/* Manager's Playbook — Wiki Styles v2 (icon-rail sidebar) */

:root {
  --bg: #fafaf7;
  --bg-soft: #f3f1ea;
  --paper: #ffffff;
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --ink-faint: #777;
  --rule: #e4e1d7;
  --accent: #8b3a2a;
  --accent-soft: #c08374;
  --accent-bg: #fbeee9;
  --link: #1d4e89;
  --link-hover: #0e2e57;
  --highlight: #fff3a8;
  --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  --rail-w: 64px;
  --panel-w: 280px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Charter', 'Iowan Old Style', 'Source Serif Pro', 'Georgia', serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  /* Fluid body text: 15px on phones, 17px on tablets, 19px on large screens */
  font-size: clamp(15px, 0.6vw + 13px, 19px);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s; }
a:hover { border-bottom-color: var(--link); }

/* ---------- Layout ---------- */

.shell {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  min-height: 100vh;
  margin: 0 auto;
  transition: none;
  position: relative;
}
.shell.panel-open {
  /* No layout change — the panel overlays on desktop */
}

/* ---------- Sidebar: rail + panel ---------- */

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  z-index: 100;
  background: var(--bg-soft);
}

.rail {
  width: var(--rail-w);
  flex-shrink: 0;
  background: var(--bg-soft);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  gap: 4px;
  height: 100vh;
  overflow-y: auto;
}

.rail-icon {
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s;
  position: relative;
}
.rail-icon:hover {
  background: var(--paper);
  color: var(--ink);
}
.rail-icon.active {
  background: var(--accent);
  color: white;
}
.rail-icon-svg {
  display: block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.rail-icon-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}
.rail-icon-label {
  display: block;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
  line-height: 1;
  white-space: nowrap;
}

.panel {
  width: var(--panel-w);
  flex-shrink: 0;
  background: var(--paper);
  border-right: 1px solid var(--rule);
  height: 100vh;
  overflow-y: auto;
  padding: 24px 18px 60px;
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  /* Desktop: panel overlays the main content (doesn't push it) */
  position: absolute;
  top: 0;
  left: var(--rail-w);
  box-shadow: 4px 0 20px rgba(0,0,0,0.06);
  z-index: 50;
}
.shell.panel-open .panel {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.panel-header {
  margin-bottom: 16px;
}
.panel .brand {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
  display: inline-block;
  border-bottom: none;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}
.panel .brand:hover { color: var(--ink); border-bottom: none; }
.panel .brand-sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.4;
}

.search-box {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg-soft);
  font-family: inherit;
  font-size: 14px;
  margin-bottom: 12px;
  outline: none;
}
.search-box:focus { border-color: var(--accent-soft); background: var(--paper); box-shadow: 0 0 0 3px var(--accent-bg); }

.search-results {
  position: absolute;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  margin-top: 4px;
  max-height: 360px;
  overflow-y: auto;
  width: calc(var(--panel-w) - 36px);
  box-shadow: var(--shadow);
  z-index: 250;
  display: none;
}
.search-results.open { display: block; }
.search-result { padding: 9px 12px; border-bottom: 1px solid var(--rule); cursor: pointer; font-size: 14px; }
.search-result:last-child { border-bottom: none; }
.search-result:hover, .search-result.active { background: var(--accent-bg); }
.search-result .topic-tag {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: 6px;
}

.panel-links {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  margin-bottom: 8px;
  padding: 0 4px;
  display: flex;
  gap: 12px;
}
.panel-links a { color: var(--ink-soft); }

/* Toolbar (Home, Search, Quotes, About) — hidden by default, only shown in landscape */
.panel-toolbar {
  display: none;
  flex-direction: row;
  gap: 4px;
  margin: 0 0 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--rule);
}
.panel-toolbar .toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.panel-toolbar .toolbar-btn:hover {
  background: var(--accent);
  color: var(--paper);
}
.panel-toolbar .toolbar-btn svg { flex-shrink: 0; }
.panel-toolbar .toolbar-btn span { white-space: nowrap; }

/* Drill-down: back button + header */
.panel-back {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
  margin-bottom: 14px;
  min-height: 36px;
}
.panel-back:hover { background: var(--bg-soft); color: var(--ink); }
.panel-back .back-arrow { font-size: 14px; }

.drilldown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px 16px;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--accent);
}
.drilldown-icon {
  width: 28px;
  height: 28px;
  color: var(--accent);
  display: inline-flex;
  flex-shrink: 0;
}
.drilldown-icon svg { width: 100%; height: 100%; }
.drilldown-title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.drilldown-sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 2px;
}

/* Top-level view: topic row is a drill-in button (with right arrow) */
.subcat-topic-header[data-action="drill-in"] {
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  margin: 0 -4px;
  padding: 14px 8px;
  min-height: 52px;
}
.subcat-topic-header[data-action="drill-in"]:hover {
  background: var(--bg-soft);
  color: var(--accent);
}
.subcat-topic-header[data-action="drill-in"] .subcat-topic-count { margin-right: 8px; }
.subcat-topic-arrow {
  font-size: 18px;
  color: var(--ink-faint);
  font-weight: 400;
  margin-left: auto;
}
.subcat-topic-header[data-action="drill-in"]:hover .subcat-topic-arrow { color: var(--accent); }

/* Subcategory groups */
.subcat-topic {
  border-top: 1px solid var(--rule);
  margin-top: 8px;
  padding-top: 8px;
}
.subcat-topic-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  min-height: 36px;
}
.subcat-topic-header:hover { background: var(--bg-soft); color: var(--ink); }
.subcat-topic-header::after {
  content: "▾";
  margin-left: auto;
  font-size: 10px;
  color: var(--ink-faint);
  transition: transform 0.15s;
}
.subcat-topic.open .subcat-topic-header::after { transform: rotate(180deg); }
.subcat-topic.open .subcat-topic-header { color: var(--accent); }
.subcat-topic-icon { width: 16px; height: 16px; display: inline-flex; }
.subcat-topic-icon svg { width: 100%; height: 100%; }
.subcat-topic-label { flex: 1; }
.subcat-topic-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-faint);
  background: var(--bg-soft);
  border-radius: 9px;
  padding: 2px 7px;
  letter-spacing: 0;
  text-transform: none;
}
.subcat-list { display: none; }
.subcat-topic.open .subcat-list { display: block; }

.subcat-group { margin: 6px 0 12px; }
.subcat-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  padding: 4px 4px 2px;
  letter-spacing: 0.01em;
}
.subcat-entries { list-style: none; padding: 0; margin: 0; }
.subcat-entries li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px 5px 8px;
  font-size: 13.5px;
  color: var(--ink-soft);
  border-bottom: none;
  border-radius: 4px;
  line-height: 1.35;
}
.subcat-entries li a:hover { background: var(--bg-soft); color: var(--ink); }
.subcat-entries li a.active { background: var(--accent); color: white; }
.subcat-entries li a.active .kind-dot { background: white; }

.kind-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ink-faint);
}
.kind-dot.kind-fw { background: #4a6fa5; }
.kind-dot.kind-case { background: var(--accent); }

/* ---------- Main ---------- */

.main {
  padding: 40px 56px 80px;
  max-width: none;
  width: 100%;
  min-width: 0;
}

/* Cap line length on text content for readability (the textbook sweet spot is 60-80 chars).
   This makes the right side available for breathing room on wide screens without making
   paragraphs run forever. */
.entry-body,
.daily-quote,
.entry-summary,
.entry-meta,
.hero .lede,
.featured-card p,
.related,
.monday-move,
.notes-section,
.topic-section p,
.home-sub-desc,
.topic-entry p {
  max-width: 75ch;
}

/* The titles can be wider — they break naturally. */
.entry-title,
.hero h1,
.home-topic h2,
.topic-section h2,
.featured-card h3,
.topic-entry h4 {
  max-width: 20ch;
}
.entry-title { max-width: 24ch; }
.hero h1 { max-width: 16ch; }

/* On very wide screens, give the page some side padding */
@media (min-width: 1200px) {
  .main { padding: 48px 80px 80px; }
}
@media (min-width: 1600px) {
  .main { padding: 56px 120px 100px; }
}

.daily-quote {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: 22px 28px;
  margin-bottom: 36px;
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.daily-quote .label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.daily-quote blockquote {
  margin: 0;
  font-size: clamp(17px, 0.5vw + 15px, 22px);
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
}
.daily-quote .attribution {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 10px;
  font-style: normal;
}

.entry-header {
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.entry-kind {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.entry-topic {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-left: 4px;
}
.entry-sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-soft);
  font-weight: 500;
  margin-left: 4px;
}
.entry-title {
  /* Fluid: 28px on phones, 36px on desktop, 44px on wide */
  font-size: clamp(28px, 1.5vw + 22px, 44px);
  line-height: 1.2;
  font-weight: 600;
  margin: 6px 0 12px;
  letter-spacing: -0.01em;
}
.entry-summary {
  font-size: clamp(16px, 0.4vw + 14px, 20px);
  color: var(--ink-soft);
  line-height: 1.5;
  font-style: italic;
}

.entry-body h2 {
  font-size: clamp(19px, 0.5vw + 17px, 24px);
  font-weight: 600;
  margin: 32px 0 12px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.entry-body h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 24px 0 8px;
  color: var(--ink);
}
.entry-body p { margin: 0 0 14px; }
.entry-body ul, .entry-body ol { padding-left: 22px; margin: 0 0 14px; }
.entry-body li { margin-bottom: 4px; }
.entry-body strong { color: var(--ink); }
.entry-body em { color: var(--ink-soft); }
.entry-body blockquote {
  border-left: 3px solid var(--accent-soft);
  margin: 16px 0;
  padding: 4px 18px;
  color: var(--ink-soft);
  font-style: italic;
}
.entry-body code {
  background: var(--bg-soft);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.9em;
  font-family: 'SF Mono', Menlo, monospace;
}

.entry-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 14px;
}
.entry-meta div { line-height: 1.4; }
.entry-meta .label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
}

.monday-move {
  background: var(--accent-bg);
  border: 1px solid var(--accent-soft);
  border-radius: 6px;
  padding: 18px 22px;
  margin: 28px 0;
}
.monday-move .label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.monday-move p { margin: 0; color: var(--ink); }

/* === Book reference cards (Amazon affiliate-ready) === */
.books-section {
  margin: 36px 0 24px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}
.books-section .label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.book-card {
  display: flex;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.book-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.book-card:active {
  transform: translateY(0);
}
.book-cover {
  flex-shrink: 0;
  width: 72px;
  height: 108px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--accent-bg);
}
.book-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.book-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
}
.book-author {
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
}
.book-blurb {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-top: 4px;
  /* Limit to ~3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.book-cta {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* === Comments thread (Cloudflare KV) === */
.comments-thread {
  margin: 0 0 16px;
}
.comments-loading,
.comments-empty {
  padding: 12px 14px;
  background: var(--paper);
  border: 1px dashed var(--rule);
  border-radius: 4px;
  color: var(--ink-faint);
  font-size: 13px;
  text-align: center;
  font-style: italic;
}
.comment {
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin-bottom: 8px;
}
.comment-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--ink-faint);
  flex-wrap: wrap;
}
.comment-type {
  display: inline-block;
  padding: 2px 8px;
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: 999px;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.comment-type.tag-amendment { background: #e7f3ff; color: #1565c0; }
.comment-type.tag-article   { background: #fff3e0; color: #b65b00; }
.comment-type.tag-typo      { background: #f3e7ff; color: #6a1b9a; }
.comment-type.tag-book      { background: #e8f5e9; color: #2e7d32; }
.comment-type.tag-praise    { background: #fce4ec; color: #ad1457; }
.comment-type.tag-other     { background: var(--accent-bg); color: var(--accent); }
.comment-who {
  font-weight: 600;
  color: var(--ink);
  font-size: 12px;
}
.comment-when {
  color: var(--ink-faint);
  font-size: 11px;
  margin-left: auto;
}
.comment-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* === Comment status tag === */
.comment-status {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: -2px;
}
.status-new   { background: #e3f2fd; color: #1565c0; }
.status-acked { background: #fff8e1; color: #b26a00; }
.status-acted { background: #e8f5e9; color: #2e7d32; }

/* === System replies === */
.system-replies {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.system-reply {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-soft);
  background: rgba(0, 0, 0, 0.03);
  padding: 4px 8px;
  border-radius: 4px;
}
.system-reply-kind {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.system-reply-msg {
  flex: 1;
  color: var(--ink);
}
.system-reply-when {
  color: var(--ink-faint);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* === Admin action bar === */
.comment-admin-actions {
  display: flex;
  gap: 6px;
  margin: -4px 0 8px 0;
  padding: 6px 8px;
  background: rgba(139, 58, 42, 0.05);
  border: 1px solid var(--rule);
  border-radius: 0 0 4px 4px;
  flex-wrap: wrap;
}
.admin-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.admin-btn:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.admin-btn:active { transform: translateY(1px); }
.admin-btn.danger { color: #c62828; }
.admin-btn.danger:hover { background: #fde7e7; border-color: #c62828; color: #c62828; }
.admin-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* === Comments form === */
.comments-section {
  margin: 36px 0 16px;
  padding: 20px;
  background: var(--accent-bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.comments-section .label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.comments-blurb {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 14px;
}
.comment-form label {
  display: block;
  margin-bottom: 12px;
}
.comment-form label > span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.comment-form input[type="text"],
.comment-form select,
.comment-form textarea {
  width: 100%;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  transition: border-color 0.15s;
}
.comment-form input[type="text"]:focus,
.comment-form select:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.comment-form textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}
.comment-row {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 12px;
}
.comment-form .btn-primary {
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, transform 0.1s;
}
.comment-form .btn-primary:hover { background: #6b1f15; }
.comment-form .btn-primary:active { transform: translateY(1px); }
.comment-form .comment-status {
  display: inline-block;
  margin-left: 12px;
  font-size: 12px;
  color: var(--ink-soft);
  vertical-align: middle;
}
.comment-form .comment-status.success { color: #0a7d3b; font-weight: 600; }
.comment-form .comment-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.comment-form .comment-actions .btn-primary { margin: 0; }

/* === Comment list (YouTube-style) === */
.comment-list {
  margin: 16px 0;
}
.comment-empty {
  padding: 12px 16px;
  background: rgba(0,0,0,0.03);
  border-radius: 4px;
  color: var(--ink-faint);
  font-size: 13px;
  font-style: italic;
  text-align: center;
}
.comment-item {
  position: relative;
  padding: 12px 14px 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin-bottom: 8px;
  background: var(--paper);
  transition: border-color 0.15s;
}
.comment-item:hover {
  border-color: var(--accent-soft);
}
.comment-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 8px;
  flex-wrap: wrap;
}
.comment-author {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.comment-author em {
  color: var(--ink-faint);
  font-weight: 400;
  font-style: italic;
}
.comment-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--ink-faint);
}
.comment-type-tag {
  display: inline-block;
  padding: 2px 6px;
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.comment-time { white-space: nowrap; }
.comment-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  word-wrap: break-word;
}
.comment-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 20px;
  line-height: 1;
  width: 24px;
  height: 24px;
  cursor: pointer;
  padding: 0;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.comment-item:hover .comment-delete { opacity: 1; }
.comment-delete:hover { color: #c0392b; background: rgba(192,57,43,0.08); }

@media (max-width: 640px) {
  .comment-row { grid-template-columns: 1fr; }
}

/* === Comment form (Netlify Forms) === */
.comments-section {
  margin: 36px 0 16px;
  padding: 20px;
  background: var(--accent-bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.comments-section .label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.comments-blurb {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 14px;
}
.comment-form label {
  display: block;
  margin-bottom: 12px;
}
.comment-form label > span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.comment-form input[type="text"],
.comment-form select,
.comment-form textarea {
  width: 100%;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  transition: border-color 0.15s;
}
.comment-form input[type="text"]:focus,
.comment-form select:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.comment-form textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}
.comment-form .comment-row {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 12px;
}
.comment-form .btn-primary {
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, transform 0.1s;
}
.comment-form .btn-primary:hover { background: #6b1f15; }
.comment-form .btn-primary:active { transform: translateY(1px); }
.hidden-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
@media (max-width: 640px) {
  .comment-form .comment-row { grid-template-columns: 1fr; }
}

/* === Flash success toast (after comment submission) === */
.flash-success {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 500;
  background: var(--paper);
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  max-width: 380px;
  animation: flash-in 0.25s ease-out;
}
.flash-success.flash-fade {
  animation: flash-out 0.4s ease-in forwards;
}
.flash-inner {
  padding: 14px 36px 14px 18px;
  position: relative;
}
.flash-inner strong {
  display: block;
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 4px;
}
.flash-inner p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.flash-inner code {
  background: var(--accent-bg);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 12px;
}
.flash-close {
  position: absolute;
  top: 6px;
  right: 6px;
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 22px;
  line-height: 1;
  width: 28px;
  height: 28px;
  cursor: pointer;
  padding: 0;
  border-radius: 3px;
}
.flash-close:hover {
  color: var(--ink);
  background: var(--accent-bg);
}
@keyframes flash-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes flash-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}
@media (max-width: 640px) {
  .flash-success {
    top: 12px;
    right: 12px;
    left: 12px;
    max-width: none;
  }
}

.related {
  margin: 32px 0;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.related .label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.related a {
  display: inline-block;
  margin: 4px 8px 4px 0;
  padding: 4px 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 20px;
  font-size: 13px;
  color: var(--link);
}
.related a:hover { background: var(--link); color: white; border-color: var(--link); }

.notes-section {
  margin-top: 36px;
  padding: 18px 22px;
  background: var(--bg-soft);
  border: 1px dashed var(--rule);
  border-radius: 6px;
  font-size: 14px;
  color: var(--ink-soft);
}
.notes-section .label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

.entry-actions {
  display: flex;
  gap: 10px;
  margin: 24px 0 0;
}
.btn {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); }

/* ---------- Home / Topic pages ---------- */

.hero { margin-bottom: 40px; }
.hero h1 {
  font-size: clamp(32px, 2.2vw + 22px, 56px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  font-weight: 600;
}
.hero .lede {
  font-size: clamp(16px, 0.5vw + 14px, 22px);
  color: var(--ink-soft);
  line-height: 1.5;
}

.section-title {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 40px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.featured-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 22px 24px;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  transition: all 0.15s;
}
.featured-card:hover {
  border-color: var(--accent);
  border-bottom-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.featured-card .kind {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.featured-card h3 {
  margin: 0 0 8px;
  font-size: clamp(17px, 0.4vw + 15px, 21px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.featured-card p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Home subcategory layout */
.home-topic {
  margin: 28px 0 36px;
}
.home-topic-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
}
.home-topic-icon {
  width: 22px;
  height: 22px;
  color: var(--accent);
  display: inline-flex;
}
.home-topic-icon svg { width: 100%; height: 100%; }
.home-topic h2 {
  font-size: clamp(20px, 0.7vw + 17px, 26px);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.005em;
}
.home-subs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.home-sub {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 14px 16px;
}
.home-sub-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.home-sub-desc {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--ink-faint);
  margin-bottom: 10px;
  font-style: italic;
}
.home-sub-entries { list-style: none; padding: 0; margin: 0; }
.home-sub-entries li a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  border-bottom: 1px dotted transparent;
}
.home-sub-entries li a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.kind-tag {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-soft);
  color: var(--ink-faint);
  flex-shrink: 0;
  min-width: 22px;
  text-align: center;
}
.kind-tag.kind-fw { background: #e5edf5; color: #2a4a7a; }
.kind-tag.kind-case { background: var(--accent-bg); color: var(--accent); }
.entry-name { line-height: 1.35; }

/* ---------- Print ---------- */

@media print {
  .sidebar, .mobile-bar, .sidebar-overlay, .mobile-search-modal, .entry-actions, .related { display: none !important; }
  .shell { grid-template-columns: 1fr; }
  .main { max-width: 100%; padding: 20px; }
  .entry-body, .entry-header, .monday-move { page-break-inside: avoid; }
  body { font-size: 12pt; background: white; }
  .entry-title { font-size: 24pt; }
  a { color: black; border-bottom: none; }
}

/* ---------- Mobile ---------- */

.mobile-bar { display: none; }

@media (max-width: 900px) {
  .shell { grid-template-columns: var(--rail-w) 0 1fr; }
  .shell.panel-open { grid-template-columns: var(--rail-w) var(--panel-w) 1fr; }
  .panel { box-shadow: 4px 0 20px rgba(0,0,0,0.15); }
  .rail-icon-label { display: none; }
  .rail-icon { width: 44px; height: 44px; }
  .main { padding: 24px 22px 60px; max-width: 100%; grid-column: 3; }
  .featured-grid, .home-subs { grid-template-columns: 1fr; }
  .hero h1 { font-size: 28px; }
  .entry-title { font-size: 28px; }
}

@media (max-width: 640px) {
  /* === MOBILE: text-first, no wasted space === */

  /* Larger, more readable mobile body text */
  body { font-size: 17px; line-height: 1.65; }

  /* Remove the 75ch cap — let text fill the phone width */
  .entry-body,
  .daily-quote,
  .entry-summary,
  .entry-meta,
  .hero .lede,
  .featured-card p,
  .related,
  .monday-move,
  .notes-section,
  .topic-section p,
  .home-sub-desc,
  .topic-entry p {
    max-width: none;
  }

  /* Top mobile bar — must be ABOVE the panel so the user can close it */
  .mobile-bar { display: flex; position: sticky; top: 0; z-index: 400; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 12px 16px; font-family: 'Inter', sans-serif; font-size: 14px; align-items: center; justify-content: space-between; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
  .mobile-bar .brand { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-size: 12px; text-decoration: none; border-bottom: none; }
  .mobile-bar .menu-btn { background: none; border: 1px solid var(--rule); border-radius: 6px; padding: 8px 12px; font-size: 20px; cursor: pointer; color: var(--ink); min-width: 44px; min-height: 44px; }
  .mobile-bar .search-toggle { background: none; border: 1px solid var(--rule); border-radius: 6px; padding: 8px 12px; cursor: pointer; font-size: 18px; min-width: 44px; min-height: 44px; }

  /* Layout: panel takes full screen when open, main hidden behind */
  .shell { grid-template-columns: 1fr; padding-top: 0; }
  .rail { display: none; }
  .sidebar { display: contents; } /* Let rail/panel escape the grid flow */

  /* Panel: takes over the whole screen on mobile when open, but starts below the bar */
  .panel {
    position: fixed;
    top: 50px; /* below the mobile bar (approx) */
    left: 0;
    width: 100vw;
    max-width: 100vw;
    height: calc(100vh - 50px);
    padding: 16px 16px 60px;
    z-index: 300;
    background: var(--bg-soft);
    box-shadow: none;
  }
  /* Main is hidden when panel is open on mobile */
  .shell.panel-open .main { display: none; }
  /* Prevent body scroll when panel is open */
  .shell.panel-open { overflow: hidden; }

  /* Main fills full width with comfortable padding */
  .main { padding: 20px 18px 80px; max-width: 100%; }

  /* Larger titles on mobile */
  .hero h1 { font-size: 30px; line-height: 1.15; }
  .entry-title { font-size: 26px; line-height: 1.2; }
  .entry-summary { font-size: 17px; }
  .entry-body { font-size: 17px; line-height: 1.7; }
  .daily-quote blockquote { font-size: 18px; }
  .entry-body h2 { font-size: 21px; margin-top: 28px; }
  .entry-body h3 { font-size: 18px; }

  /* Action buttons stack */
  .entry-actions { flex-wrap: wrap; gap: 8px; }
  .entry-actions .btn { flex: 1; min-width: 90px; text-align: center; padding: 12px 10px; }

  /* Touch targets */
  .subcat-entries li a { min-height: 44px; display: flex; align-items: center; padding: 10px 6px; }
  .subcat-topic-header { min-height: 44px; padding: 12px 4px; font-size: 12px; }

  /* Word wrap safety */
  .entry-body, .entry-title, .entry-summary { overflow-wrap: break-word; word-wrap: break-word; }
  .entry-body pre { white-space: pre-wrap; word-break: break-all; }

  /* Wider daily quote for impact on phone */
  .daily-quote { padding: 18px 20px; margin-bottom: 28px; }
  .daily-quote blockquote { font-size: 18px; }
}

/* Mobile overlay + search modal — hidden on desktop, only used on small screens */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.2s;
}
/* Overlay only shows on tablets (<900px but >=641px), not on phones (<=640px).
   Also excluded from phone landscape (height < 500). */
@media (min-width: 641px) and (max-width: 900px) and (min-height: 501px) {
  .shell.panel-open .sidebar-overlay { display: block; opacity: 1; }
  .sidebar-overlay { z-index: 299; }
}

/* === Phone landscape (height-constrained, wide-ish screen) === */
/* Catches landscape phones (~812x375, 896x414) where 75ch leaves too much white space.
   Two-axis query: width > phone, but height < typical phone-portrait. */
@media (min-width: 641px) and (max-height: 500px) and (orientation: landscape) {
  /* Drop the 75ch cap so text fills the available width */
  .entry-body,
  .daily-quote,
  .entry-summary,
  .entry-meta,
  .hero .lede,
  .featured-card p,
  .related,
  .monday-move,
  .notes-section,
  .topic-section p,
  .home-sub-desc,
  .topic-entry p {
    max-width: none;
  }
  /* Tighten padding to maximize content area */
  .main { padding: 16px 20px 60px; }
  /* Slightly smaller mobile-bar height since vertical space is precious */
  .mobile-bar { padding: 8px 14px; }
  .mobile-bar .menu-btn,
  .mobile-bar .search-toggle { min-width: 40px; min-height: 40px; padding: 6px 10px; }

  /* COMPACT PANEL: hide the brand header + search box + inline nav links in landscape
     to maximize the room for subcategory entries. The toolbar (Home, Search, etc.)
     is the landscape-only way to access those features. */
  .panel .panel-header,
  .panel .search-box,
  .panel .search-results,
  .panel .panel-links {
    display: none;
  }
  /* Show the toolbar in landscape */
  .panel .panel-toolbar { display: flex; }
  /* Compact back button */
  .panel .panel-back {
    margin-bottom: 8px;
    padding: 6px 10px;
    min-height: 32px;
    font-size: 11px;
  }
  /* Compact drilldown header — smaller, less padding */
  .panel .drilldown-header {
    padding: 6px 4px 10px;
    margin-bottom: 6px;
  }
  .panel .drilldown-icon { width: 22px; height: 22px; }
  .panel .drilldown-title { font-size: 13px; }
  .panel .drilldown-sub { font-size: 10px; }
  /* Compact subcategory rows */
  .panel .subcat-group { margin: 4px 0 8px; }
  .panel .subcat-label { padding: 4px 4px 2px; font-size: 11px; }
  .panel .subcat-entries li a { padding: 5px 4px 5px 6px; font-size: 13px; }
  /* Compact top-level view: smaller topic rows */
  .panel .subcat-topic-header[data-action="drill-in"] {
    padding: 8px 8px;
    min-height: 40px;
  }
  .panel .subcat-topic-label { font-size: 12px; }
}

.mobile-search-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 400;
  padding: 20px;
  flex-direction: column;
}
.mobile-search-modal.open { display: flex; }
.mobile-search-modal input {
  width: 100%;
  padding: 14px 16px;
  font-size: 17px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  margin-bottom: 16px;
  font-family: inherit;
  outline: none;
}
.mobile-search-modal input:focus { border-color: var(--accent-soft); }
.mobile-search-modal .close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
}
.mobile-search-modal .results { flex: 1; overflow-y: auto; }
.mobile-search-modal .result {
  display: block;
  padding: 14px 12px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.mobile-search-modal .result:active { background: var(--accent-bg); }
.mobile-search-modal .result .tag {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2px;
}
.mobile-search-modal .result .title { font-size: 16px; font-weight: 500; }

/* On wider screens (desktop/tablet) the inline search box is always available,
   so we hide the mobile modal. But landscape phones (641-900px wide, <500px tall)
   also fall in this range — keep the modal available there. */
@media (min-width: 641px) and (min-height: 501px) {
  .mobile-search-modal { display: none !important; }
}