:root {
  --bg: #fafaf7;
  --fg: #1c1c1c;
  --muted: #6b6b6b;
  --accent: #8b6914;
  --pali-fg: #2c2820;
  --english-fg: #4a4a4a;
  --border: #e2dfd5;
  --highlight: #fff4d6;
  --code-bg: #f0ede5;
  /* Category tints — low-saturation so the page stays scholarly. Each is
     a slightly darker shade than --accent (light mode) so left rails
     register at a glance without competing with the gold accent. */
  --cat-start:    #5e8a5e;   /* sage green — beginnings */
  --cat-pivotal:  #8b6914;   /* same as --accent — biographical anchor */
  --cat-practice: #5d7da0;   /* dusty blue — calm */
  --cat-foundation:#8067a0;  /* muted violet — philosophical depth */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16140f;
    --fg: #e8e6e0;
    --muted: #9a9690;
    --accent: #d4b04a;
    --pali-fg: #ece9dd;
    --english-fg: #b8b4a8;
    --border: #2e2a22;
    --highlight: #3a2f15;
    --code-bg: #221f17;
    --cat-start:    #8db58d;
    --cat-pivotal:  #d4b04a;
    --cat-practice: #9bb4d4;
    --cat-foundation:#b89dd4;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Sarabun", "Noto Sans Thai", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.search-mini {
  flex: 1;
  max-width: 320px;
  margin: 0;
}

.search-mini input {
  width: 100%;
  background: var(--code-bg, var(--bg));
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 10px;
  font: inherit;
  font-size: 13px;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.search-mini input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
}

@media (max-width: 600px) {
  .search-mini { max-width: 100%; order: 3; flex-basis: 100%; }
}

.brand {
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brand-mark {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex-shrink: 0;
}

.brand-sub {
  color: var(--muted);
  font-weight: 400;
  font-size: 14px;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 16px;
  font-size: 14px;
}

.site-nav a:hover { color: var(--accent); }

.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.sutta-head {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.breadcrumb {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.breadcrumb .sep { margin: 0 6px; opacity: 0.5; }
.breadcrumb .sutta-id { color: var(--accent); font-weight: 500; }

/* Prev/next-sutta inline arrows wrapping the sutta-id in the breadcrumb.
   Subtle by default; hover lifts to accent so the navigation affordance
   reads as such. Padding ensures they have a comfortable hit area
   (desktop) without enlarging the line visually. */
.breadcrumb .bc-sutta-nav {
  display: inline-block;
  padding: 0 6px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  border-radius: 3px;
  user-select: none;
}

.breadcrumb .bc-sutta-nav:hover {
  color: var(--accent);
  background: var(--code-bg, var(--bg));
}

.title-pali {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--pali-fg);
  font-style: italic;
}

.title-english {
  font-size: 18px;
  color: var(--english-fg);
  margin: 0 0 12px;
}

.meta {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.meta .sep { margin: 0 8px; opacity: 0.5; }
.meta a { color: var(--accent); text-decoration: none; }
.meta a:hover { text-decoration: underline; }

.cite-btn {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 8px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.cite-btn:hover {
  background: var(--highlight);
  border-color: var(--accent);
}

.cite-btn-ok,
.cite-btn-ok:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.segment {
  position: relative;
  padding: 12px 0 12px 56px;
  scroll-margin-top: 40vh;
  transition: background 0.4s ease, border-left-color 0.4s ease;
  border-left: 4px solid transparent;
}

.segment:target {
  background: var(--highlight);
  border-left-color: var(--accent);
  border-radius: 0 4px 4px 0;
  padding-left: 60px;
  padding-right: 12px;
  margin-right: -8px;
  animation: target-pulse 1.6s ease-out 1;
}

@keyframes target-pulse {
  0%   { background: var(--bg); border-left-color: transparent; }
  20%  { background: var(--highlight); border-left-color: var(--accent); }
  100% { background: var(--highlight); border-left-color: var(--accent); }
}

.seg-anchor {
  position: absolute;
  left: 0;
  top: 14px;
  width: 44px;
  text-align: right;
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.segment:hover .seg-anchor,
.segment:target .seg-anchor { opacity: 1; }

.seg-anchor:hover { color: var(--accent); }

.text-pali {
  margin: 0 0 6px;
  color: var(--pali-fg);
  font-style: italic;
  font-size: 17px;
}

.text-english {
  margin: 0;
  color: var(--english-fg);
  font-size: 16px;
}

/* --- Floating page navigation -------------------------------------------
   Always-visible top/bottom-of-page buttons with segment prev/next
   sliding in between when a segment is focused. Bottom-right placement;
   44×44 touch targets (Apple HIG minimum). Desktop users have keyboard
   shortcuts (↑/↓/Home/End/Esc) as faster alternatives.
   ----------------------------------------------------------------------- */

.segment-nav {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Same specificity pitfall as .dict-hint-banner — author `display: flex`
   on the buttons ties with UA `[hidden] { display: none }`, so an explicit
   attr selector is needed to win. (Lesson logged in PROGRESS.md 2026-05-11.) */
.segment-nav button[hidden] {
  display: none;
}

.segment-nav button {
  width: 44px;
  height: 44px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--fg);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.segment-nav button:hover:not(:disabled) {
  background: var(--code-bg, var(--bg));
  border-color: var(--fg);
}

.segment-nav button:active:not(:disabled) {
  transform: translateY(1px);
}

.segment-nav button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

/* --- Per-segment focus + lemma indicator -------------------------------
   Click any segment to focus it. The lemma-indicator handler wraps Pāli
   words that have a dict entry in <span class="word-has-entry">. The
   underline only appears when the parent segment has .is-focused, so
   unfocused segments stay visually quiet — user sees indicators only
   where they've shown intent to study.
   ----------------------------------------------------------------------- */

.segment.is-focused {
  background: var(--code-bg, transparent);
  border-radius: 4px;
}

/* Subtle dotted underline — low contrast so it doesn't distract from
   reading. Offset shifts the line below the diacritic descenders so it
   doesn't collide with marks like ṅ ñ ṭ ḍ ṇ ḷ. */
.segment.is-focused .word-has-entry {
  text-decoration: underline dotted;
  text-decoration-color: var(--muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* --- Word popup (Pāli double-click → dictionary) --- */

.text-pali {
  /* `help` (?-cursor) signals "info available" without breaking text
     selection — browsers switch to the I-beam while dragging anyway. */
  cursor: help;
}

.text-pali::selection {
  background: var(--accent);
  color: var(--bg);
}

/* --- Dictionary discoverability hints (persistent + one-time) --- */

.reader-tip {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.reader-tip kbd {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 11px;
  font-style: normal;
  background: var(--code-bg, var(--bg));
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0 4px;
  color: var(--fg);
}

.dict-hint-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0 0;
  padding: 12px 16px;
  background: var(--code-bg, #fafaf7);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg);
}

/* Author class selector + UA [hidden] rule have the same specificity (0,1,0).
   Author stylesheet wins source-order, so display:flex above keeps the
   banner visible even after `banner.hidden = true`. Add an attribute
   selector — specificity (0,2,0) — to force `hidden` to actually hide. */
.dict-hint-banner[hidden] {
  display: none;
}

.dict-hint-banner p {
  margin: 0;
  flex: 1;
}

.dict-hint-banner em {
  font-style: italic;
  color: var(--pali-fg);
}

.dict-hint-dismiss {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}

.dict-hint-dismiss:hover {
  color: var(--fg);
  border-color: var(--fg);
}

.word-popup {
  position: fixed;
  z-index: 100;
  max-width: 380px;
  min-width: 240px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

.wp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--code-bg, var(--bg));
  border-bottom: 1px solid var(--border);
}

.wp-word {
  font-style: italic;
  color: var(--pali-fg);
  font-weight: 600;
  font-size: 15px;
}

.wp-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.wp-close:hover { color: var(--fg); }

.wp-body {
  padding: 12px 14px;
  max-height: 300px;
  overflow-y: auto;
}

/* Lemma-fallback breadcrumb — shown when the popup resolved an inflected
   form via stem-strip. Sits at the top of wp-body to teach the case before
   the definitions appear. Padding compensates for wp-body's own padding so
   the breadcrumb reads as a header strip, not an indented note. */
.wp-lemma {
  margin: -12px -14px 12px;
  padding: 8px 14px;
  background: var(--code-bg, var(--bg));
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.wp-lemma strong {
  color: var(--pali-fg);
  font-style: italic;
  font-weight: 600;
}

.wp-lemma .wp-case {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

.wp-def + .wp-def {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.wp-source {
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

.wp-lang {
  color: var(--muted);
  text-transform: lowercase;
  letter-spacing: 0;
}

.wp-text {
  white-space: pre-wrap;
  font-size: 13px;
  color: var(--fg);
}

.wp-empty {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.wp-empty code {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-style: italic;
  font-size: 12px;
  background: var(--code-bg, var(--bg));
  padding: 1px 4px;
  border-radius: 2px;
}

/* --- In-sutta filter --- */

.in-sutta-filter {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  padding: 8px 0;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.in-sutta-filter input {
  flex: 1;
  background: var(--code-bg, var(--bg));
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 12px;
  font: inherit;
  font-size: 14px;
  transition: border-color 0.12s ease;
}

.in-sutta-filter input:focus {
  outline: none;
  border-color: var(--accent);
}

.in-sutta-count {
  font-size: 12px;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  white-space: nowrap;
}

/* Prev/next-sutta arrows inside the sticky filter row. Compact (28×28) so
   the filter input keeps as much horizontal room as possible on mobile.
   .is-disabled span renders the edge case (first/last sutta in book) at
   reduced opacity to preserve layout width — avoids the filter input
   jumping wider when a neighbor is missing. */
.filter-sutta-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  user-select: none;
}

a.filter-sutta-nav:hover {
  background: var(--code-bg, var(--bg));
  color: var(--accent);
}

.filter-sutta-nav.is-disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* Reading-progress bar — overlays the bottom border of the sticky filter
   row. Absolute positioning keeps it out of flex flow; sticky parents
   establish a positioning context so left/right/bottom anchor correctly.
   pointer-events: none so the bar doesn't intercept clicks meant for the
   filter input below. */
.reading-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
  pointer-events: none;
}

.reading-progress-bar {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 120ms linear;
}

mark.inline-mark {
  background: var(--accent);
  color: var(--bg);
  padding: 0 2px;
  border-radius: 2px;
  font-style: inherit;
}

/* --- Sutta footer: prev/next nav --- */

.sutta-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 32px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
}

.sutta-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.sutta-nav a:hover {
  background: var(--highlight);
  border-color: var(--accent);
}

.sutta-nav .nav-prev { justify-content: flex-start; text-align: left; }
.sutta-nav .nav-next { justify-content: flex-end; text-align: right; }

.sutta-nav .nav-arrow {
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}

.sutta-nav .nav-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sutta-nav .sid {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
}

.sutta-nav .t-pali {
  font-style: italic;
  color: var(--pali-fg);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- /read/ landing — hero strip --------------------------------------- */

.read-home > * + * {
  /* Major rhythm between the four sections (hero, featured, jump, full-tree).
     Each new section section uses this margin-top — easier than per-section
     overrides. */
  margin-top: 56px;
}

.hero {
  text-align: center;
  padding: 0 0 4px;
}

.hero-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 14px;
  border-radius: 6px;
  /* The image is dark forest at night — looks natural in dark mode and
     contrasts cleanly with the parchment-ish light bg without needing a
     border. */
}

/* --- Pacchimavācā cycler — RPG textbox style -------------------------
   The Buddha's last words type out grapheme-by-grapheme inside a small
   bordered frame, with a language label at the top-left and a blinking
   "▼" cursor at the bottom-right when the line is fully typed. Hovering
   pauses. Multi-script font fallbacks live on .lw-phrase so each
   lang-tagged child renders cleanly on systems that ship Noto fonts
   (most modern macOS / Windows / iOS / Android / ChromeOS); on bare-
   bones Linux without Noto, browsers degrade to whatever shapes the
   script — usually fine for Latin/Thai/CJK, may show tofu for Sinhala /
   Myanmar / Khmer until system fonts are installed. */

.last-words {
  margin: 0 0 22px;
}

.lw-frame {
  /* Single flat box — label sits absolutely in the top-left corner so
     no separate header strip is needed. The frame is the relative
     ancestor for both .lw-label (top-left) and .lw-cursor (bottom-right). */
  position: relative;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--code-bg);
}

.lw-label {
  position: absolute;
  top: 7px;
  left: 14px;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  pointer-events: none;
}

.lw-body {
  /* Top-aligned text + cursor parked at bottom-right = iconic RPG
     waiting-for-input feel. Padding-top clears the absolute label. Grid
     cell measures to the tallest phrase so layout stays put across
     cycles — short phrases leave the bottom of the body empty (with the
     blinking cursor) instead of floating mid-cell. */
  position: relative;
  padding: 26px 30px 12px 14px;
  display: grid;
  align-items: start;
  min-height: 2.4em;
}

.lw-phrase {
  /* All 13 phrases stack into the same grid cell so the cell takes the
     tallest phrase's height and the frame stays stable as languages
     cycle. Layout-wise every phrase contributes its full text; only
     opacity hides the inactive ones. */
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 14px;
  font-style: italic;
  line-height: 1.55;
  color: var(--english-fg);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Sarabun", "Noto Sans Thai",
    "Noto Sans CJK SC", "Noto Sans CJK JP", "Noto Sans CJK KR",
    "Noto Sans Devanagari", "Noto Sans Sinhala",
    "Noto Sans Myanmar", "Padauk",
    "Noto Sans Khmer",
    system-ui, sans-serif;
}

.lw-phrase.active {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .lw-phrase { transition: none; }
}

.lw-cursor {
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-size: 11px;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.lw-cursor.show {
  opacity: 0.85;
  animation: lw-blink 0.85s steps(2, jump-none) infinite;
}

@keyframes lw-blink {
  to { opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
  .lw-cursor.show { animation: none; opacity: 0.6; }
}

@media (max-width: 600px) {
  .lw-body { padding: 24px 26px 10px 12px; min-height: 2.4em; }
  .lw-phrase { font-size: 13.5px; }
}

.hero-title {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--pali-fg);
  font-style: italic;
  line-height: 1.1;
}

.hero-tagline {
  font-size: 17px;
  color: var(--english-fg);
  margin: 0 0 12px;
  line-height: 1.4;
}

.hero-stats {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.hero-stats .hero-sep { margin: 0 8px; opacity: 0.5; }
.hero-stats em { color: var(--accent); font-style: italic; }

/* --- Section headings (unified across /read/ sections) ----------------- */

.section-heading {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--fg);
  letter-spacing: -0.005em;
}

.section-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 20px;
  line-height: 1.5;
}

.section-sub code.sid {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--accent);
  background: var(--code-bg);
  padding: 1px 5px;
  border-radius: 2px;
  border: 1px solid var(--border);
}

/* --- Jump form (compact utility — single line on /read/) --------------- */

.jump {
  /* Uses the .read-home > * + * margin from above. */
}

.jump-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 14px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.jump-form label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

.jump-form input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px 11px;
  font: inherit;
  font-size: 13px;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  transition: border-color 0.12s ease;
}

.jump-form input:focus {
  outline: none;
  border-color: var(--accent);
}

.jump-form button {
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 7px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.12s ease;
}

.jump-form button:hover { opacity: 0.85; }

/* --- "How sutta IDs work" expandable help (standalone under jump form) --- */

.id-help {
  margin: 12px 0 0;
  padding: 0 4px;
}

.id-help[open] {
  padding: 0 14px 4px;
  background: transparent;
}

.id-help summary {
  padding: 6px 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  list-style: none;
  user-select: none;
}

.id-help summary::-webkit-details-marker { display: none; }

.id-help summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 8px;
  font-size: 9px;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.id-help[open] summary::before {
  transform: rotate(90deg);
}

.id-help summary:hover { color: var(--accent); }

.id-help-body {
  padding: 8px 0 4px;
  font-size: 13px;
  color: var(--english-fg);
  line-height: 1.5;
}

.id-help-body p {
  margin: 12px 0 6px;
  font-size: 13px;
}

.id-help-body p:first-child { margin-top: 4px; }

.id-help-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 8px;
}

.id-help-table td {
  padding: 4px 8px 4px 0;
  font-size: 12.5px;
  vertical-align: top;
}

.id-help-table td:first-child {
  width: 160px;
  white-space: nowrap;
}

.id-help-table code {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--accent);
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 2px;
  border: 1px solid var(--border);
}

.id-help-note {
  margin: 16px 0 0 !important;
  padding: 10px 12px;
  background: var(--bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  color: var(--muted);
}

.id-help-note code {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--accent);
  background: var(--code-bg, var(--bg));
  padding: 0 4px;
  border-radius: 2px;
}

/* Cursor hint that .sid elements are interactive (have a tooltip) */
code.sid[title], .sutta-id[title] { cursor: help; }

/* --- Featured suttas — card grid (curated entry points on /read/) --- */

.featured { margin: 0; }

.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.featured-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 14px 18px;
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  border: 1px solid var(--border);
  /* Default rail uses border colour; per-category overrides below tint
     it according to the data-cat attribute set by the template. */
  border-left: 3px solid var(--cat-rail, var(--border));
  border-radius: 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* Category-specific rail colours (data-cat values come from the
   template's slugified category name). */
.featured-card[data-cat="start-here"]       { --cat-rail: var(--cat-start); }
.featured-card[data-cat="pivotal-moments"]  { --cat-rail: var(--cat-pivotal); }
.featured-card[data-cat="practice"]         { --cat-rail: var(--cat-practice); }
.featured-card[data-cat="foundations"]      { --cat-rail: var(--cat-foundation); }

.featured-card:hover {
  border-color: var(--cat-rail, var(--accent));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

@media (prefers-color-scheme: dark) {
  .featured-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); }
}

.featured-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.featured-card-top .sid {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--accent);
  background: transparent;
  padding: 0;
  letter-spacing: 0.02em;
}

.featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  background: var(--code-bg, var(--highlight));
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.featured-card:hover .featured-badge {
  border-color: var(--cat-rail, var(--accent));
  color: var(--cat-rail, var(--accent));
}

.featured-badge-emoji {
  font-size: 11px;
  filter: saturate(0.85);
}

.featured-card-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 0 8px;
}

.featured-card .t-pali {
  font-style: italic;
  color: var(--pali-fg);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
}

.featured-card .t-en {
  color: var(--english-fg);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
}

.featured-card-blurb {
  margin: 0;
  color: var(--english-fg);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .featured-grid { grid-template-columns: 1fr; gap: 10px; }
  .jump-form { flex-direction: column; align-items: stretch; }
  .jump-form label { margin-bottom: 4px; }
}

/* --- Full-tree: 3-column grid (one per piṭaka) ------------------------- */

.full-tree { margin: 0; }

.pitaka-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pitaka-col {
  min-width: 0;
}

.pitaka-col-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pitaka-col-title .pi {
  font-style: italic;
  color: var(--pali-fg);
  letter-spacing: -0.005em;
}

.pitaka-col-title .en {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pitaka-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pitaka-col-list li {
  border-bottom: 1px solid var(--border);
}

.pitaka-col-list li:last-child { border-bottom: none; }

.pitaka-col-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 4px;
  text-decoration: none;
  color: var(--fg);
  font-size: 13px;
  transition: background 0.12s ease, color 0.12s ease;
}

.pitaka-col-list a:hover {
  background: var(--highlight);
  color: var(--accent);
}

.pitaka-col-list .nik-pali {
  font-style: italic;
  color: var(--pali-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pitaka-col-list a:hover .nik-pali { color: var(--accent); }

.pitaka-col-list .nik-count {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .pitaka-cols { grid-template-columns: 1fr; gap: 18px; }
}

/* --- Browse pages (index + nikaya) --- */

.pitaka-block,
.book-block {
  margin: 0 0 36px;
}

.pitaka-title {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
}

.pitaka-title .pi {
  font-style: italic;
  color: var(--pali-fg);
  margin-right: 8px;
}

.pitaka-title .en {
  color: var(--muted);
  font-weight: 400;
  font-size: 16px;
}

.nikaya-list,
.sutta-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nikaya-list li {
  border-bottom: 1px solid var(--border);
}

.nikaya-list li:last-child {
  border-bottom: none;
}

.nikaya-list a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 4px;
  text-decoration: none;
  color: var(--fg);
  transition: background 0.12s ease;
}

.nikaya-list a:hover {
  background: var(--highlight);
}

.nik-pali {
  font-style: italic;
  color: var(--pali-fg);
  font-weight: 500;
  min-width: 140px;
}

.nik-en {
  color: var(--muted);
  flex: 1;
  font-size: 14px;
}

.nik-count {
  color: var(--muted);
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

.book-title {
  font-size: 16px;
  font-weight: 500;
  margin: 24px 0 8px;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.book-title .pi {
  font-style: italic;
  color: var(--pali-fg);
}

.book-title .en {
  font-size: 13px;
  color: var(--muted);
  font-style: normal;
}

.book-title .book-count {
  margin-left: auto;
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  color: var(--muted);
  opacity: 0.7;
}

.sutta-list li {
  border-bottom: 1px solid var(--border);
}

.sutta-list li:last-child {
  border-bottom: none;
}

.sutta-list a {
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 8px 4px;
  text-decoration: none;
  color: var(--fg);
  transition: background 0.12s ease;
}

.sutta-list a:hover {
  background: var(--highlight);
}

.sutta-list .sid {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--accent);
  background: transparent;
  padding: 0;
}

.sutta-list .t-pali {
  font-style: italic;
  color: var(--pali-fg);
}

.sutta-list .t-en {
  color: var(--muted);
  font-size: 14px;
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--accent);
}

@media (max-width: 600px) {
  .sutta-list a {
    grid-template-columns: 80px 1fr;
  }
  .sutta-list .t-en {
    grid-column: 1 / -1;
    margin-left: 92px;
  }
}

/* --- Search page --- */

.search-page {
  /* same container constraints as articles */
}

.search-form {
  display: flex;
  gap: 8px;
  margin: 0 0 24px;
}

.search-form input[type="search"] {
  flex: 1;
  background: var(--code-bg, var(--bg));
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px;
  transition: border-color 0.12s ease;
}

.search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
}

.search-form button {
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 10px 20px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.12s ease;
}

.search-form button:hover { opacity: 0.85; }

.search-meta {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 20px;
}

.search-meta strong { color: var(--fg); }
.search-meta .muted { color: var(--muted); opacity: 0.7; }

.search-empty {
  padding: 24px;
  background: var(--code-bg, var(--bg));
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 14px;
}

.search-empty code {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 1px 5px;
  background: var(--bg);
  border-radius: 2px;
}

.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-results li {
  border-bottom: 1px solid var(--border);
}

.search-results li:last-child { border-bottom: none; }

.search-results a {
  display: block;
  padding: 14px 8px;
  text-decoration: none;
  color: var(--fg);
  transition: background 0.12s ease;
}

.search-results a:hover {
  background: var(--highlight);
}

.search-result-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.search-result-head .sid {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--accent);
  background: transparent;
  padding: 0;
}

.search-result-head .t-pali {
  font-style: italic;
  color: var(--pali-fg);
  font-weight: 500;
}

.search-result-head .t-nik {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

.search-results .text-pali,
.search-results .text-english {
  margin: 2px 0;
  padding: 0;
  font-size: 14px;
}

.search-results mark {
  background: var(--accent);
  color: var(--bg);
  padding: 0 2px;
  border-radius: 2px;
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.site-footer a { color: var(--accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer em { font-style: italic; color: var(--fg); }

.site-footer .legal-links {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}
.site-footer .legal-links a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.site-footer .legal-links a:hover { color: var(--accent); }
.site-footer .legal-links .sep { color: var(--border); margin: 0 0.4em; }