/*
 * workbench.css — Holy-Writings.com 2026 redesign.
 *
 * Implements the Scholar's Workbench design system
 * (../../ux-redesign/mockups/design-system.html).
 * All tokens live in :root and have a prefers-color-scheme: dark counterpart.
 *
 * This file is the ONLY CSS the production site needs. The legacy
 * tpl/active/css/active.css is no longer linked; the legacy modern.css
 * has been subsumed here.
 */

/* ============================================================
   FONTS — self-hosted, GDPR-safe. See assets/fonts/LICENSE.md.
   font-display: swap so text shows immediately in a fallback
   and re-flows when the WOFF2 arrives.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-italic.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/crimson-pro-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/crimson-pro-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/crimson-pro-600.woff2') format('woff2');
}

/* Noto Serif — Latin Extended so Pali / Sanskrit diacritics (ṅ ṭ ṃ ñ ā ī ū)
   render correctly on Linux servers without Iowan or Palatino installed. */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto-serif-regular.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto-serif-italic.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jbmono-regular.woff2') format('woff2');
}

/* Per-script fallback faces — browser picks these automatically when a
   character outside the previous unicode-ranges appears. */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto-naskh-ar.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Noto Serif Hebrew';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto-serif-hebrew.woff2') format('woff2');
  unicode-range: U+0590-05FF, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto-sans-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+A8E0-A8FF;
}

/* ============================================================
   TOKENS — copied verbatim from design-system.html :root block.
   ============================================================ */

:root {
  /* Surface — warm cream / parchment instead of cool grey */
  --bg:         #f5efe3;
  --surface:    #fffdf8;
  --surface-2:  #f2ebdc;
  --tree-active:#efe4cd;   /* gold-tinted active row */

  /* Ink — warm near-black / browns */
  --ink:        #211c16;
  --ink-soft:   #574e42;
  --ink-mute:   #8b7f6f;

  /* Lines — warm borders */
  --line:       #e4d9c4;
  --line-soft:  #ede4d3;

  /* Accent + state — navy (primary), gold + bordeaux (warm accents) */
  --accent:     #244873;   /* deep navy: links, buttons, focus */
  --accent-soft:#e1e8f1;
  --gold:       #a9772a;   /* brand mark, active underline, highlights */
  --bordeaux:   #872230;   /* sparing secondary: active item, emphasis */
  --hl:         #f4dd92;   /* search highlight (warm gold) */
  --ok:         #2a8a44;
  --warn:       #b96a17;
  --danger:     #a8303a;

  /* Type families — local fonts first, system fallback to keep first-paint fast.
     Noto Serif covers Pali / Sanskrit diacritics (ṅ ṭ ṃ ñ ā ī ū) when the
     primary serif lacks them. */
  --serif: 'Crimson Pro', 'Iowan Old Style', 'Palatino', 'Georgia', 'Noto Serif', 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale */
  --t-11: 11px; --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-15: 15px;
  --t-17: 17px; --t-22: 22px; --t-28: 28px; --t-34: 34px;

  /* Space (4-pt grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* Radii */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px;

  /* Shadows */
  --sh-1: 0 1px 0 rgba(0,0,0,0.04);
  --sh-2: 0 1px 2px rgba(0,0,0,0.06);
  --sh-3: 0 8px 24px -12px rgba(0,0,0,0.10);

  /* Motion */
  --d-1: 120ms; --d-2: 200ms;
  --ease: cubic-bezier(.2,.7,.2,1);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #16130d;
    --surface:   #201b13;
    --surface-2: #1b160e95;
    --tree-active:#3a2d18;
    --ink:       #efe8d8;
    --ink-soft:  #bcb29c;
    --ink-mute:  #7e7361;
    --line:      #2f2819;
    --line-soft: #241e13;
    --accent:    #9bb6e4;
    --accent-soft:#233149;
    --gold:      #d8ab53;
    --bordeaux:  #d06d79;
    --hl:        #5c4716;
    --danger:    #d8636d;
  }
}

/* Manual theme override via data-theme on <html> */
html[data-theme="light"] {
  --bg: #f5efe3; --surface: #fffdf8; --surface-2: #f2ebdc; --tree-active:#efe4cd;
  --ink: #211c16; --ink-soft: #574e42; --ink-mute: #8b7f6f;
  --line: #e4d9c4; --line-soft: #ede4d3;
  --accent: #244873; --accent-soft: #e1e8f1;
  --gold: #a9772a; --bordeaux: #872230; --hl: #f4dd92; --danger: #a8303a;
}
html[data-theme="dark"] {
  --bg: #16130d; --surface: #201b13; --surface-2: #1b160e95; --tree-active: #3a2d18;
  --ink: #efe8d8; --ink-soft: #bcb29c; --ink-mute: #7e7361;
  --line: #2f2819; --line-soft: #241e13;
  --accent: #9bb6e4; --accent-soft: #233149;
  --gold: #d8ab53; --bordeaux: #d06d79; --hl: #5c4716; --danger: #d8636d;
}

/* ============================================================
   NAVY CHROME — the framing surfaces (topbar, tree sidebar,
   statusbar) are a fixed deep-navy band in BOTH light and dark
   themes; the content panes (results + reader) keep the warm
   parchment / brown-ink look.  Implemented by re-scoping the
   neutral tokens on the chrome containers, so every descendant
   (links, borders, hovers, the tabs) adapts automatically.
   ============================================================ */
/* ── Chrome colour schemes ────────────────────────────────────────────────
   The topbar / tree pane / statusbar share ONE "chrome" palette driven by a
   handful of --chrome-* tokens.  data-scheme on <html> swaps them; everything
   else (soft/mute text, lines, hovers) is derived via color-mix, so each
   scheme needs only ~6 values.  Account holders pick one in Settings (stored
   in localStorage, applied with no flash by the inline script in active.php). */
html {
  --chrome-bar: #4e1420; --chrome-pane: #2a1f1a; --chrome-accent: #d8ab53;
  --chrome-gold: #e6c074; --chrome-line: #483630; --chrome-ink: #f4ebe1;
}
html[data-scheme="bordeaux"] { --chrome-bar:#4e1420; --chrome-pane:#2a1f1a; --chrome-accent:#d8ab53; --chrome-gold:#e6c074; --chrome-line:#483630; --chrome-ink:#f4ebe1; }
html[data-scheme="midnight"] { --chrome-bar:#1d2b47; --chrome-pane:#1f2738; --chrome-accent:#d8ab53; --chrome-gold:#e0b964; --chrome-line:#33446a; --chrome-ink:#eef2f8; }
html[data-scheme="forest"]   { --chrome-bar:#1b3a2c; --chrome-pane:#1f3027; --chrome-accent:#c9a24b; --chrome-gold:#ddc06e; --chrome-line:#2f4a3c; --chrome-ink:#eef3ec; }
html[data-scheme="plum"]     { --chrome-bar:#2f1d3b; --chrome-pane:#271f32; --chrome-accent:#c596d8; --chrome-gold:#dab3ef; --chrome-line:#43345a; --chrome-ink:#f1eaf6; }
html[data-scheme="slate"]    { --chrome-bar:#2a2f37; --chrome-pane:#24272d; --chrome-accent:#82a9cc; --chrome-gold:#a7c2dd; --chrome-line:#3c424c; --chrome-ink:#eef1f5; }
html[data-scheme="sepia"]    { --chrome-bar:#3a2718; --chrome-pane:#31251a; --chrome-accent:#d8924e; --chrome-gold:#e6b070; --chrome-line:#4d3a26; --chrome-ink:#f4ece1; }
html[data-scheme="teal"]     { --chrome-bar:#103534; --chrome-pane:#16302f; --chrome-accent:#e0a93f; --chrome-gold:#ecc06a; --chrome-line:#224a48; --chrome-ink:#e9f3f1; }
html[data-scheme="charcoal"] { --chrome-bar:#1f2022; --chrome-pane:#232427; --chrome-accent:#c9a24b; --chrome-gold:#ddc06e; --chrome-line:#3a3b3f; --chrome-ink:#ececef; }
html[data-scheme="claret"]   { --chrome-bar:#4a132a; --chrome-pane:#2c1c24; --chrome-accent:#e08aa0; --chrome-gold:#f0b3c2; --chrome-line:#4a2f3a; --chrome-ink:#f6eaee; }

.topbar,
.panes aside.pane,
.statusbar {
  --bordeaux-bar: var(--chrome-bar);
  --surface:      var(--chrome-pane);
  --surface-2:    color-mix(in oklab, var(--chrome-pane), #ffffff 8%);
  --ink:          var(--chrome-ink);
  --ink-soft:     color-mix(in oklab, var(--chrome-ink), var(--chrome-pane) 22%);
  --ink-mute:     color-mix(in oklab, var(--chrome-ink), var(--chrome-pane) 48%);
  --line:         var(--chrome-line);
  --line-soft:    color-mix(in oklab, var(--chrome-pane), #ffffff 5%);
  --accent:       var(--chrome-accent);
  --accent-soft:  color-mix(in oklab, var(--chrome-accent), transparent 82%);
  --gold:         var(--chrome-gold);
  --tree-active:  color-mix(in oklab, var(--chrome-pane), #ffffff 9%);
  --bordeaux:     #e2838f;
  color: var(--ink);
}

/* ============================================================
   RESET + BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-14);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

img, svg { max-width: 100%; vertical-align: middle; }

kbd {
  font-family: var(--mono); font-size: var(--t-11);
  background: var(--surface); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: var(--r-sm);
  padding: 1px 5px; color: var(--ink-soft);
}

::selection { background: var(--accent-soft); color: var(--ink); }

/* Skip link — visible on focus only */
.skip-link {
  position: absolute; top: -200px; left: 8px;
  background: var(--accent); color: #fff;
  padding: 8px 14px; border-radius: var(--r-md);
  font-weight: 500; z-index: 1000;
}
.skip-link:focus { top: 8px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   APP SHELL — three-pane workbench
   ============================================================ */

.app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  overflow: hidden;
}
/* Single-column pages (account, login, info, …) put their content straight in
   #main; the three-pane search view adds .panes (which scrolls its own panes).
   Without this, a tall page like Account settings is clipped by .app's
   overflow:hidden and can't scroll. */
#main:not(.panes) { min-height: 0; overflow-y: auto; }
@media (max-width: 720px) {
  body { overflow: auto; }
  .app { display: block; height: auto; }
}

/* Top bar */
.topbar {
  /* Bordeaux top bar.  Light translucent overrides give the search field +
     text/lines enough contrast on the dark bordeaux. */
  background: var(--bordeaux-bar);
  --surface-2:   rgba(255,255,255,0.12);   /* search field on bordeaux */
  --ink-soft:    #f1dee1;
  --ink-mute:    #d3a9b1;
  --line:        rgba(255,255,255,0.24);
  --line-soft:   rgba(255,255,255,0.10);
  --accent-soft: rgba(255,255,255,0.16);
  border-bottom: 1px solid rgba(0,0,0,0.28);
  display: grid;
  grid-template-columns: 1fr minmax(260px, 600px) 1fr;  /* left · centre · right */
  align-items: center; gap: 12px;
  padding: 9px 16px;
  position: sticky; top: 0; z-index: 10;
}
.topbar > .brand   { justify-self: start; border-right: 0; margin-right: 0; padding-right: 0; margin-left: 28px; }
.topbar > .search  { justify-self: stretch; max-width: none; }
.topbar > .toolbar { justify-self: end; }
/* "Search" submit button, sits inside the search pill at the right */
.search-go {
  flex: 0 0 auto; border: 0; border-radius: var(--r-md);
  background: var(--accent); color: #4a121f;
  font: inherit; font-weight: 600; font-size: var(--t-12);
  padding: 6px 14px; cursor: pointer; white-space: nowrap;
}
.search-go:hover { filter: brightness(1.06); }
/* Concordance (KWIC) entry point — a secondary (outline) button next to Search */
.search-kwic {
  flex: 0 0 auto; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--accent); border-radius: var(--r-md);
  background: transparent; color: var(--accent);
  font: inherit; font-weight: 600; font-size: var(--t-12);
  padding: 6px 12px; text-decoration: none;
}
.search-kwic:hover { background: var(--accent-soft); text-decoration: none; }
@media (max-width: 720px) { .search-kwic { display: none; } }
/* Older-edition (_Legacy) folders shown subordinate in the browse list.
   Dimmed while the "include older editions" opt-in is OFF; lifts to full
   strength + gains an accent rule when the opt-in is armed (toggled live by JS
   the moment the topbar checkbox changes, so the change is visible). */
.browse-legacy { opacity: .5; transition: opacity .15s ease; }
.browse-legacy:hover { opacity: .8; }
.browse-legacy.legacy-armed { opacity: 1; }
.browse-legacy-head {
  padding: 8px 14px; font-size: var(--t-12); color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
  border-top: 1px solid var(--line);
  opacity: .55; transition: opacity .15s ease, color .15s ease, box-shadow .15s ease;
}
.browse-legacy-head.legacy-armed {
  opacity: 1; color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
@media (max-width: 720px) {
  .topbar { display: flex; flex-wrap: wrap; }
  .topbar > .search { order: 3; flex: 1 1 100%; }
  .topbar > .toolbar { margin-left: auto; }
}
.brand {
  font-family: var(--serif); font-size: 16px; font-weight: 500;
  color: var(--gold); padding-right: 8px;            /* gold wordmark, matching the book */
  border-right: 1px solid var(--line);
  margin-right: 6px; white-space: nowrap;
}
.brand:hover { text-decoration: none; color: var(--gold); filter: brightness(1.08); }
.brand { display: inline-flex; align-items: center; gap: 7px; }
/* Brand book — the exact favicon artwork, recoloured gold via an alpha mask. */
.brand .brand-ico {
  width: 20px; height: 20px; flex: 0 0 auto; background: var(--gold);
  -webkit-mask: url(../img/brand-book.png) center / contain no-repeat;
          mask: url(../img/brand-book.png) center / contain no-repeat;
}

.search {
  flex: 1; max-width: 720px;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 4px 8px 4px 10px;
  transition: border-color var(--d-1), box-shadow var(--d-1);
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search svg { width: 16px; height: 16px; color: var(--ink-mute); flex: 0 0 16px; }
.search input {
  flex: 1; border: 0; background: transparent;
  font: inherit; color: var(--ink); padding: 6px 0;
  outline: none; min-width: 0;
}
.search .kbd-hint { font-family: var(--mono); font-size: var(--t-11); color: var(--ink-mute); }

.toolbar { display: flex; gap: 2px; align-items: center; }
.toolbar a, .toolbar button {
  background: transparent; border: 0; border-radius: var(--r-md);
  padding: 6px 10px; color: var(--ink-soft); cursor: pointer;
  font: inherit; font-size: var(--t-13); text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.toolbar a:hover, .toolbar button:hover {
  background: var(--line-soft); color: var(--ink); text-decoration: none;
}
.toolbar .active, .toolbar a[aria-current="page"] {
  background: var(--accent-soft); color: var(--accent);
}
.toolbar a.signin {
  color: var(--ink); border: 1px solid var(--line);
}
.toolbar a.signin:hover { background: var(--surface-2); }
/* Right-cluster icon controls — account · theme · language, all the same size.
   Account + language are hover menus (the .dl-menu pattern, like the "Aa" menu);
   theme is a direct toggle. */
.toolbar .topbar-icon {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--r-md);
  color: var(--ink-soft); cursor: pointer; padding: 5px 8px;
  font-size: 22px; line-height: 1;
}
.toolbar .topbar-icon:hover, .dl-menu:hover .topbar-icon, .dl-menu:focus-within .topbar-icon {
  background: var(--line-soft); color: var(--ink);
}
/* Active section — framed like the active "Verlauf"/"Arbeitsplatz" nav links. */
.toolbar .topbar-icon.active { background: var(--accent-soft); color: var(--accent); }
/* max-width:none is essential — the global `img,svg{max-width:100%}` resolves
   against this auto-sized flex button's indefinite width and collapses the icon
   to a few px (the theme ◐ is text, so it was unaffected — that's why only it
   showed). */
.toolbar .topbar-icon svg { width: 22px; height: 22px; max-width: none; flex: 0 0 auto; display: block; }
/* Active option (current language / current theme), marked gold in the menu. */
.dl-pop a.is-cur, .dl-pop button.dl-opt.is-cur { color: var(--accent); font-weight: 600; }
/* A non-clickable header line (the signed-in name) atop the account menu. */
.dl-pop .dl-head {
  padding: 4px 12px 6px; margin-bottom: 2px;
  border-bottom: 1px solid var(--line); color: var(--ink-mute);
  font-size: var(--t-12); font-weight: 600; white-space: nowrap;
}

/* Custom tooltips are rendered by the JS overlay (.hw-tooltip, see foot of
   file + tooltips() in workbench.js): one shared, viewport-clamped bubble that
   replaces the slow native title= everywhere and reads either title or
   data-tip.  `.hw-tip` survives only as a no-op marker on elements that carry a
   data-tip hint (e.g. the topbar search-options labels). */
.hw-tip { position: relative; }

/* Three-pane layout */
.panes {
  display: grid;
  grid-template-columns: 260px 380px 1fr;
  overflow: hidden;
}
.pane {
  overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.pane:last-child { border-right: 0; }
.pane.reader { background: var(--bg); }

/* The pane header + scope bar are pinned together as ONE block, so the scope
   bar always sits directly under the header regardless of how tall the header
   wraps (a hardcoded top offset slid out of register when the header went to
   two lines).  Children inside are static; the wrapper does the sticking. */
.pane-stickhead {
  position: sticky; top: 0; z-index: 5;
  background: var(--surface);
}
.pane-stickhead > .pane-header,
.pane-stickhead > .scope-bar { position: static; top: auto; }
.pane-header {
  position: sticky; top: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  font-size: var(--t-12);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  font-weight: 600;
  z-index: 1;
}
.pane-header .meta {
  text-transform: none; font-weight: 400; letter-spacing: 0; color: var(--ink-mute);
}

/* "Suchbereich" (search-scope) bar — shows WHERE a search runs, in readable
   labels, on the home page and the results.  Slim, tinted, sticky under the
   pane header. */
.scope-bar {
  position: sticky; top: 41px; z-index: 2;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  padding: 8px 14px;
  /* Opaque, subtly tinted band — the list scrolls UNDER it, so it must hide
     what passes behind (translucent glass here just smeared the rows). */
  background: color-mix(in oklab, var(--surface), var(--accent) 5%);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-13); color: var(--ink-soft);
}
.scope-bar .scope-ico { opacity: .8; }
.scope-bar .scope-label { color: var(--ink-mute); }
.scope-crumbs { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; min-width: 0; }
.scope-crumbs .scope-sep { color: var(--ink-mute); }
.scope-crumb { color: var(--accent); text-decoration: none; border-radius: var(--r-sm); padding: 1px 4px; }
.scope-crumb:hover, .scope-crumb:focus-visible { text-decoration: underline; background: var(--accent-soft); outline: none; }
.scope-cur { color: var(--ink); font-weight: 600; padding: 1px 4px; }
.scope-note {
  font-size: var(--t-11); color: var(--ink-mute); font-style: italic;
  padding: 1px 6px; border-left: 1px solid var(--line);
}
.scope-widen {
  margin-left: auto; white-space: nowrap;
  font-size: var(--t-12); font-weight: 600; text-decoration: none;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid transparent; border-radius: var(--r-pill, 999px);
  padding: 3px 11px;
}
.scope-widen:hover { border-color: var(--accent); }
@media (max-width: 720px) { .scope-bar { top: 0; } .scope-widen { margin-left: 0; } }

/* Responsive collapse */
@media (max-width: 1000px) {
  .panes { grid-template-columns: 220px 1fr; }
  .panes > .pane:nth-child(3) { display: none; }
  .panes.show-reader > .pane:nth-child(1),
  .panes.show-reader > .pane:nth-child(2) { display: none; }
  .panes.show-reader > .pane:nth-child(3) { display: flex; }
}
@media (max-width: 720px) {
  .panes { display: block; }
  .pane { border-right: 0; border-bottom: 1px solid var(--line); max-height: none; overflow-y: visible; }
  .toolbar a:not(.active):not(.signin) { display: none; }
  .search .kbd-hint { display: none; }
  .brand { font-size: 14px; }
}

/* ============================================================
   TREE — textbase navigator
   ============================================================ */

.tree { padding: 6px; }
.tree-section {
  margin: 6px 0 4px 8px;
  font-size: var(--t-11); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.tree-item, .tree details > summary {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  border-radius: var(--r-md);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: var(--t-13);
  user-select: none;
  list-style: none;
  text-decoration: none;
}
.tree details > summary::-webkit-details-marker { display: none; }
.tree-item:hover, .tree details > summary:hover {
  background: var(--line-soft); color: var(--ink); text-decoration: none;
}
.tree-item.active, .tree details[open] > summary.active {
  background: var(--tree-active); color: var(--bordeaux); font-weight: 600;
}
.tree-item .caret, .tree summary .caret {
  color: var(--ink-soft); width: 22px; flex: 0 0 22px; font-size: 20px;
  line-height: 1; text-align: center; transition: transform var(--d-1);
}
.tree details[open] > summary .caret { transform: rotate(90deg); }
.tree-item .count, .tree summary .count {
  margin-left: auto; color: var(--ink-mute);
  font-family: var(--mono); font-size: var(--t-11);
}
.tree details .tree-children, .tree details > div { padding-left: 18px; }

/* Disclosure triangles on inline UI toggles (search-options "Aa", KWIC scope
   picker, etc.) — sized to match the left-pane tree carets (20px) so every
   "open me" triangle in the chrome reads at the same scale. */
.ui-caret {
  display: inline-block; font-size: 20px; line-height: 1;
  vertical-align: -2px; color: var(--ink-mute);
  transition: transform var(--d-1);
}
[aria-expanded="true"] > .ui-caret, details[open] > summary .ui-caret { transform: rotate(180deg); }

/* Collapsible workspace sections ("Letzte Suchen", …) — same caret as the tree. */
.ws-fold > summary {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none; user-select: none; padding: 4px 0;
}
.ws-fold > summary::-webkit-details-marker { display: none; }
.ws-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.ws-fold > summary .caret {
  font-size: 20px; width: 22px; flex: 0 0 22px; text-align: center;
  line-height: 1; color: var(--ink-soft); transition: transform var(--d-1);
}
.ws-fold[open] > summary .caret { transform: rotate(90deg); }
.ws-fold .ws-fold-title { font-family: var(--serif); font-weight: 500; font-size: var(--t-22); }
.ws-fold .ws-fold-count {
  margin-left: 4px; color: var(--ink-mute);
  font-family: var(--mono); font-size: var(--t-12);
}

/* ============================================================
   RESULTS LIST
   ============================================================ */

.results-list { padding: 0; margin: 0; list-style: none; }
.result-row {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  display: block;
  color: inherit;
  text-decoration: none;
  transition: background var(--d-1);
}
.result-row:hover { background: var(--surface-2); text-decoration: none; }
.result-row.active, .result-row[aria-current="true"] {
  background: var(--tree-active); border-left: 3px solid var(--accent); padding-left: 11px;
}
.result-row .ref {
  font-size: var(--t-12); color: var(--accent); font-weight: 500;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.result-row .snippet {
  font-family: var(--serif); font-size: var(--t-14);
  color: var(--ink); margin: 4px 0 0; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.snippet .hl, mark.hl, .verse .hl { background: var(--hl); padding: 0 1px; border-radius: 2px; color: var(--ink); }
@media (prefers-color-scheme: dark) {
  .snippet .hl, mark.hl, .verse .hl { color: var(--ink); }
}

.load-more {
  display: block; text-align: center; padding: 12px;
  color: var(--accent); font-size: var(--t-13); border-top: 1px solid var(--line-soft);
}

/* ============================================================
   READER PANE
   ============================================================ */

.reader-inner {
  max-width: 680px; margin: 0 auto;
  padding: 36px 40px 80px;
}
@media (max-width: 720px) { .reader-inner { padding: 24px 16px 64px; } }

.crumb {
  font-size: var(--t-12); color: var(--ink-mute);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.crumb a { color: var(--ink-soft); }
.crumb .sep { color: var(--ink-mute); }

.reader-inner h1, .doc-title {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--t-28); margin: 0 0 6px; line-height: 1.2;
  color: var(--ink);
}
.reader-inner .h-sub, .doc-sub {
  color: var(--ink-mute); font-size: var(--t-14); margin: 0 0 28px;
}
/* 20-year anniversary — centered at the foot of the welcome pane (only in 2026),
   with a slow, subtle gold shimmer sweeping across the text. */
.home-anniv-wrap {
  text-align: center; margin-top: 56px; padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.home-anniv {
  display: inline-block; font-size: var(--t-13); font-weight: 600; letter-spacing: .05em;
  color: var(--accent);   /* fallback when background-clip:text is unsupported */
  background: linear-gradient(100deg, var(--accent) 38%, #fff3cf 50%, var(--accent) 62%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: anniv-shimmer 5s linear infinite;
}
@keyframes anniv-shimmer { to { background-position: -220% center; } }
@media (prefers-reduced-motion: reduce) {
  .home-anniv { animation: none; -webkit-text-fill-color: var(--accent); }
}

/* Reader action toolbar — framed chrome (Compare / Download / Open standalone)
   on one line, visually set apart from the scripture text so it's clear these
   controls are not part of the actual work. */
/* macOS-style "liquid glass": a reusable frosted-blur for floating chrome
   (popovers, sticky header, action frame).  Subtle, not everywhere. */
:root { --glass-blur: blur(18px) saturate(170%); }

.reader-actions {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;        /* wrap, never overflow the frame */
  margin: 0 0 28px; padding: 7px 10px;
  background: color-mix(in oklab, var(--surface-2), transparent 24%);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid color-mix(in oklab, var(--line), transparent 25%);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);                     /* glass top edge */
  font-size: var(--t-13);
}
.reader-actions .spacer { margin-left: auto; }
/* Real, boxed icon buttons — legible glyphs with a clear tap target, not bare
   text links.  Covers the <a> actions (Compare/Matrix/Open-standalone), the
   download trigger, and the <button> actions (bookmark/clip/annotate/related). */
.reader-actions > a,
.reader-actions .reader-act,
.reader-actions .dl-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; min-width: 38px; height: 34px; padding: 0 10px;
  font: inherit; font-size: 20px; line-height: 1; color: var(--ink-soft);
  /* Render symbol glyphs (✒ ✂ ⬇ …) as monochrome TEXT, not tiny color emoji,
     so they fill the button and pick up the theme colour. */
  font-variant-emoji: text; -webkit-font-feature-settings: normal;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; white-space: nowrap;
  transition: background var(--d-1), border-color var(--d-1), color var(--d-1);
}
.reader-actions > a:hover, .reader-actions > a:focus-visible,
.reader-actions .reader-act:hover, .reader-actions .reader-act:focus-visible,
.reader-actions .dl-trigger:hover, .reader-actions .dl-trigger:focus-visible {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
  text-decoration: none; outline: none;
}
.reader-actions .reader-act.active {
  color: var(--gold); border-color: var(--gold);
  background: color-mix(in oklab, var(--gold), transparent 88%);
}
/* The "related texts" ⊕ glyph has more visual mass than the line-style
   icons (☆ ✂ ✎ ↗) at the shared 20px, so it reads as oversized — trim it
   so it sits at the same optical size as its neighbours. */
.reader-actions .reader-act[data-action="related"] { font-size: 16px; }
/* The "N hits in this file" trigger is TEXT, not a glyph — keep it a compact
   chip so it doesn't dominate the toolbar (user: "N Treffer … zu groß"). */
.hit-menu > .dl-trigger {
  min-width: 0; height: 30px; padding: 0 10px; gap: 5px;
  font-family: var(--sans); font-size: var(--t-12); font-weight: 600;
}
/* On very narrow screens allow a graceful wrap rather than overflow. */
@media (max-width: 520px) { .reader-actions { flex-wrap: wrap; row-gap: 8px; } }

/* --- Admin inline editor (admin-only) ----------------------------------- */
.reader-actions .reader-act-admin { font-size: 22px; }
.admin-panel {
  margin: 10px 0 4px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--sans); font-size: var(--t-13);
}
.admin-panel[hidden] { display: none; }
.admin-panel-head { display: flex; align-items: center; justify-content: space-between; }
.admin-panel-head strong { font-size: var(--t-13); letter-spacing: .02em; text-transform: uppercase; color: var(--ink-soft); }
.admin-close {
  border: none; background: none; cursor: pointer; color: var(--ink-soft);
  font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: var(--r-sm);
}
.admin-close:hover { background: var(--accent-soft); color: var(--accent); }
.admin-field { display: flex; flex-direction: column; gap: 4px; }
.admin-field > span { font-size: var(--t-12); color: var(--ink-soft); }
.admin-panel input[type="text"],
.admin-panel textarea {
  width: 100%; box-sizing: border-box; padding: 7px 9px;
  font-family: inherit; font-size: var(--t-13); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.admin-panel textarea { font-family: var(--mono); font-size: var(--t-12); line-height: 1.5; resize: vertical; }
.admin-panel input[type="text"]:focus,
.admin-panel textarea:focus { outline: none; border-color: var(--accent); }
.admin-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-save, .admin-rename {
  padding: 6px 14px; font-family: inherit; font-size: var(--t-13); font-weight: 600;
  color: var(--bg); background: var(--accent); border: 1px solid var(--accent);
  border-radius: var(--r-sm); cursor: pointer;
}
.admin-rename { color: var(--accent); background: transparent; }
.admin-save:hover { filter: brightness(1.08); }
.admin-rename:hover { background: var(--accent-soft); }
.admin-save:disabled, .admin-rename:disabled, .admin-delete:disabled { opacity: .55; cursor: default; }
/* Delete is destructive — danger-tinted, set apart from save/rename. */
.admin-delete {
  padding: 6px 14px; font-family: inherit; font-size: var(--t-13); font-weight: 600;
  color: var(--danger); background: transparent; border: 1px solid var(--danger);
  border-radius: var(--r-sm); cursor: pointer;
}
.admin-delete:hover { color: var(--bg); background: var(--danger); }
/* "Pick from tree" + upload controls. */
.admin-pick {
  padding: 6px 12px; font-family: inherit; font-size: var(--t-13); font-weight: 600;
  color: var(--ink); background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer;
}
.admin-pick:hover { background: var(--accent-soft); border-color: var(--accent); }
/* Structured sidecar form (_sidecar_fields.php) — replaces the raw-JSON box. */
.sc-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 12px; margin: 4px 0 10px; }
.sc-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sc-f > span { font-size: var(--t-12); font-weight: 600; color: var(--ink-soft); }
.sc-f input[type="text"], .sc-f select {
  width: 100%; box-sizing: border-box; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink); font: inherit; font-size: var(--t-13);
}
.sc-check { flex-direction: row; align-items: center; gap: 6px; }
.sc-check input { margin: 0; flex: none; }
.sc-check > span { font-weight: 500; color: var(--ink); }
/* Admin location picker — modal overlay (browses the corpus to pick a doc/folder). */
.apick {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.42); padding: 20px; box-sizing: border-box;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.apick[hidden] { display: none; }
.apick-dialog {
  display: flex; flex-direction: column; gap: 10px;
  /* Fixed size so the dialog doesn't resize as you drill in/out. */
  width: min(560px, 96vw); height: min(620px, 88vh); box-sizing: border-box; padding: 16px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 24px 64px -16px rgba(0,0,0,0.5);
}
.apick-head { display: flex; align-items: center; gap: 10px; }
.apick-title { font-size: var(--t-15); flex: 1; }
.apick-close { background: none; border: 0; color: var(--ink-mute); font-size: 18px; cursor: pointer; padding: 0 4px; }
.apick-close:hover { color: var(--ink); }
.apick-q {
  width: 100%; box-sizing: border-box; padding: 7px 10px; font: inherit; font-size: var(--t-13);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink);
}
.apick-results { flex: 1; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px; min-height: 160px; }
.apick-foot { display: flex; align-items: center; gap: 12px; }
.apick-cur { flex: 1; font-size: var(--t-12); color: var(--ink-mute); word-break: break-all; }
/* Folder mode: hide files + the search box; show the "use this folder" footer.
   File mode: hide the footer (you click a document directly). */
.apick[data-mode="folder"] .pick-file { display: none; }
.apick[data-mode="folder"] .apick-q   { display: none; }
.apick[data-mode="file"]   .apick-foot { display: none; }
/* The picker reuses the Compare .pick-* list styles (already defined). */
/* Dashboard upload form — stacked fields. */
.admin-upload-form { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.admin-upload-form .admin-field { display: flex; flex-direction: column; gap: 4px; }
.admin-upload-form .admin-field > span { font-size: var(--t-12); font-weight: 600; color: var(--ink-soft); }
.admin-upload-form input[type="text"], .admin-upload-form textarea {
  width: 100%; box-sizing: border-box; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink); font: inherit; font-size: var(--t-13);
}
.admin-upload-form textarea { font-family: var(--mono, monospace); resize: vertical; }
.admin-upload-form button[type="submit"] { align-self: flex-start; }
.admin-status { font-size: var(--t-12); }
.admin-status.is-ok  { color: var(--ok, #2e7d32); }
.admin-status.is-err { color: var(--danger, #c0392b); }
.admin-hint { font-size: var(--t-12); color: var(--ink-soft); }
.admin-sep { width: 100%; border: none; border-top: 1px solid var(--line); margin: 2px 0; }

/* --- Admin dashboard (?a=ADMIN) ----------------------------------------- */
.admin-dash { max-width: 920px; margin: 0 auto; padding: 28px 24px 64px; }
.admin-dash > h1 { margin: 0 0 4px; }
.admin-dash .lead { color: var(--ink-soft); margin: 0 0 24px; }
.admin-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: var(--s-5);
}
@media (max-width: 720px) { .admin-stats { grid-template-columns: repeat(2, 1fr); } }
.stat-card {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.stat-num   { font-size: 28px; font-weight: 700; line-height: 1; color: var(--ink); }
.stat-label {
  font-size: var(--t-11); color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: .02em; overflow-wrap: anywhere;   /* long DE compounds (ADMINISTRATOREN) never spill the card */
}
.admin-block { margin-top: 0; }                 /* spacing handled by .panel margin-bottom */
.admin-block .muted { color: var(--ink-mute); font-weight: 400; }

/* Collapsible admin section (e.g. the long 301-redirect list) — same caret as
   the left-pane tree; heading lives in the summary, table in the body. */
.admin-fold > summary {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none; user-select: none;
}
.admin-fold > summary::-webkit-details-marker { display: none; }
.admin-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.admin-fold > summary > h2 { font-size: var(--t-16); margin: 0; }
.admin-fold > summary .caret {
  font-size: 20px; width: 22px; flex: 0 0 22px; text-align: center;
  line-height: 1; color: var(--ink-soft); transition: transform var(--d-1);
}
.admin-fold[open] > summary .caret { transform: rotate(90deg); }
.admin-fold > .admin-table, .admin-fold > .admin-note { margin-top: 10px; }
.admin-note { font-size: var(--t-13); color: var(--ink-soft); margin: 0 0 12px; }
.admin-jump { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-jump input[type="text"] {
  flex: 1; min-width: 220px; box-sizing: border-box; padding: 8px 10px;
  font-family: var(--mono); font-size: var(--t-13); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.admin-jump input[type="text"]:focus { outline: none; border-color: var(--accent); }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--t-13); }
.admin-table th, .admin-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.admin-table th { font-size: var(--t-12); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
/* Wrap long paths/emails at sensible points (spaces, slashes) instead of
   character-by-character (break-all looked ragged in the bordered panels). */
.admin-table code { font-size: var(--t-12); overflow-wrap: anywhere; word-break: normal; }
.admin-table td { vertical-align: top; }
.admin-table td:last-child { width: 1%; white-space: nowrap; text-align: right; vertical-align: middle; }
.admin-table td:first-child { vertical-align: top; }
/* Redirect rows: stack old → new on full width rather than two cramped columns. */
.redir-pair { line-height: 1.55; }
.redir-pair code { display: inline; }
.redir-pair .redir-to { display: block; margin-top: 2px; }
.redir-pair .redir-to::before { content: "→ "; color: var(--ink-mute); }
.badge-ok { color: var(--ok, #2e7d32); font-weight: 600; font-size: var(--t-12); }
.admin-toggle {
  padding: 4px 12px; font-family: inherit; font-size: var(--t-12); font-weight: 600;
  color: var(--ink-soft); background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer; white-space: nowrap;
}
.admin-toggle:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.admin-toggle:disabled { opacity: .5; cursor: default; }

/* Settings form (language prioritisation) */
.admin-settings { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.admin-field-inline { display: flex; align-items: center; gap: 10px; font-size: var(--t-13); }
.admin-field-inline input[type="number"] {
  width: 80px; padding: 6px 8px; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.admin-field-inline input[type="number"]:focus { outline: none; border-color: var(--accent); }
.admin-fieldset { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px 14px; margin: 0; }
.admin-fieldset legend { font-size: var(--t-13); font-weight: 600; padding: 0 6px; }
.lang-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 14px; margin-top: 6px; }
.lang-check {
  display: flex; align-items: center; gap: 7px; padding: 4px 6px;
  font-size: var(--t-13); border-radius: var(--r-sm); cursor: pointer;
}
.lang-check:hover { background: var(--surface-2); }
.lang-check .lc-name { flex: 1; }
.lang-check .lc-count { color: var(--ink-mute); font-size: var(--t-11); font-family: var(--mono); }
.lang-check.is-core { color: var(--ink); }
.lang-check input { accent-color: var(--accent); }

/* Sticky reader header — breadcrumb + title + actions (+ hit menu) stay in
   view while the document scrolls under it.  Bleed margins cover
   .reader-inner's padding so nothing shows through at the sides. */
.reader-head {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in oklab, var(--surface), transparent 16%);   /* translucent → text blurs under it */
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  margin: -36px -40px 30px;                          /* bigger gap down to the text */
  padding: 36px 40px 14px;
  border-bottom: 1px solid color-mix(in oklab, var(--line), transparent 20%);
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.45); /* soft lift, mostly seen when stuck */
}
.reader-head .reader-actions { margin-bottom: 0; }
@media (max-width: 720px) { .reader-head { margin: -24px -16px 24px; padding: 24px 16px 12px; } }

/* Hit menu — "N hits in this file", built client-side from the highlights. */
.hit-pop { width: min(460px, 86vw); max-height: 62vh; overflow-y: auto; padding: 5px; }
/* Each hit: a small number badge in its own column, the snippet wrapping
   freely beside it over as many lines as it needs. */
.hit-pop a {
  display: grid; grid-template-columns: 1.9em 1fr; gap: 2px 10px; align-items: start;
  white-space: normal; line-height: 1.5; padding: 8px 11px; border-radius: 9px;
  overflow-wrap: anywhere; color: var(--ink); text-decoration: none;
}
.hit-pop a + a { border-top: 1px solid color-mix(in oklab, var(--line), transparent 55%); }
.hit-pop a .hit-n {
  text-align: right; color: var(--accent); font-family: var(--mono);
  font-size: var(--t-12); font-weight: 600; opacity: 0.9; padding-top: 1px;
}
.hit-pop a .hit-s { color: var(--ink-soft); }
.hit-pop a:hover, .hit-pop a:focus { background: var(--accent-soft); }
.hit-pop a:hover .hit-s, .hit-pop a:focus .hit-s { color: var(--ink); }
/* "+ N more" — a real, theme-visible button, sticky to the bottom of the
   scrolling list so it's always reachable; clicking expands the list in place. */
.hit-more {
  position: sticky; bottom: -5px; z-index: 1;
  display: block; width: 100%; margin-top: 4px;
  padding: 10px 11px;
  border: 0; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px;
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--sans); font-size: var(--t-13); font-weight: 600;
  text-align: center; cursor: pointer;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.hit-more:hover, .hit-more:focus { background: var(--accent); color: var(--bg); outline: none; }
.hit-pop mark { background: var(--hl); color: var(--ink); padding: 0 1px; }
mark.hit-flash { animation: hit-flash 1.2s ease-out; }
@keyframes hit-flash { 0%, 15% { background: var(--gold); color: #fff; } 100% { background: var(--hl); } }
mark.hit-active { outline: 2px solid var(--gold); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { mark.hit-flash { animation: none; } }

/* Exact-selection range anchor (Feature 3): a shared link like
   #p-12.5-48 re-opens the reader and wraps exactly those chars in this mark.
   Reused for stored annotations (Feature 1) and Explorer targets (Feature 5). */
mark.cite-target {
  background: var(--accent-soft);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent), transparent 55%);
}

/* ------------------------------------------------------------------ */
/* Annotations (Feature 1 — Notes + Tags)                              */
/* ------------------------------------------------------------------ */

/* Highlighted annotation span inside the reader text */
mark.annot {
  background: color-mix(in oklab, var(--gold), transparent 70%);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
  border-bottom: 2px solid color-mix(in oklab, var(--gold), transparent 20%);
  cursor: pointer;
  position: relative;
}
mark.annot:hover {
  background: color-mix(in oklab, var(--gold), transparent 50%);
}

/* Margin icon shown next to annotated paragraphs */
.annot-icon {
  display: inline-block;
  margin-inline-start: 4px;
  color: var(--gold);
  font-size: 0.85em;
  cursor: pointer;
  vertical-align: middle;
  user-select: none;
  line-height: 1;
}

/* Annotation popover (create/edit) */
.annot-popover {
  position: fixed;
  z-index: 200;
  background: color-mix(in oklab, var(--surface), transparent 4%);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid color-mix(in oklab, var(--line), transparent 18%);
  border-radius: 16px;
  padding: 14px 16px;
  min-width: 280px;
  max-width: min(360px, 90vw);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.5);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.annot-popover textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  font: inherit;
  font-size: var(--t-13);
  padding: 6px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  box-sizing: border-box;
}
.annot-popover textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.annot-popover input[type="text"] {
  width: 100%;
  font: inherit;
  font-size: var(--t-13);
  padding: 5px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  box-sizing: border-box;
}
.annot-popover input[type="text"]:focus { outline: 2px solid var(--accent); border-color: transparent; }
.annot-popover-btns {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.annot-popover .annot-selected-text {
  font-size: var(--t-12);
  color: var(--ink-mute);
  font-style: italic;
  max-height: 3em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 3px solid var(--line);
  padding-left: 8px;
}
/* Collection picker popover (Feature 2 — clip "Add to…") */
.coll-picker select,
.coll-picker input[type="text"] {
  width: 100%;
  font: inherit;
  font-size: var(--t-13);
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}
.coll-picker select:focus,
.coll-picker input[type="text"]:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* Share toggle (Feature 2 — compilations sharing) */
.share-pill {
  font-size: var(--t-11);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}

/* Drag-to-reorder clippings in a collection */
#coll-clips .clipping[draggable] { position: relative; padding-left: 28px; cursor: default; }
#coll-clips .drag-handle {
  position: absolute;
  left: 6px; top: 10px;
  cursor: grab;
  color: var(--ink-mute);
  font-size: var(--t-16);
  user-select: none;
}
#coll-clips .clipping.dragging { opacity: .45; }

/* Tag chips (read-only display in margin hover / workspace) */
.annot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.annot-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--t-11);
  font-weight: 500;
  line-height: 1.6;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
}
.annot-tag:hover { background: var(--accent); color: #fff; text-decoration: none; }
/* Tag autocomplete dropdown */
.annot-tag-ac {
  position: absolute;
  z-index: 210;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.28);
  padding: 2px 0;
  min-width: 140px;
  max-height: 160px;
  overflow-y: auto;
}
.annot-tag-ac-item {
  padding: 5px 10px;
  font-size: var(--t-13);
  cursor: pointer;
  color: var(--ink);
}
.annot-tag-ac-item:hover, .annot-tag-ac-item.focused { background: var(--accent-soft); }

/* Annotation note hover card */
.annot-hover-card {
  position: absolute;
  z-index: 120;
  background: color-mix(in oklab, var(--surface), transparent 4%);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid color-mix(in oklab, var(--line), transparent 18%);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 180px;
  max-width: 280px;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.32);
  font-size: var(--t-13);
  pointer-events: none;
}
.annot-hover-card .annot-note-text { color: var(--ink-soft); margin-bottom: 4px; }

/* Notes list in workspace */
.notes-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.notes-filters select, .notes-filters input[type="search"] {
  font: inherit; font-size: var(--t-13);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  min-width: 120px;
}
.notes-list { list-style: none; padding: 0; margin: 0; }
.note-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--surface-2);
}
.note-item blockquote {
  margin: 0 0 6px;
  padding-left: 12px;
  border-left: 3px solid var(--accent-soft);
  /* Match the clipping quote: serif, upright (not italic), full ink. */
  font-family: var(--serif);
  font-style: normal;
  font-size: var(--t-15);
  line-height: 1.65;
  color: var(--ink);
}
.note-item .note-text {
  font-size: var(--t-13);
  color: var(--ink);
  margin: 4px 0;
  white-space: pre-wrap;
}
.note-item footer {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: var(--t-12);
  color: var(--ink-mute);
}
.note-item .note-edit-form { display: none; flex-direction: column; gap: 6px; margin-top: 8px; }
.note-item.editing .note-edit-form { display: flex; }
.note-item.editing .note-view { display: none; }

/* Download menu — opens on HOVER (and on keyboard focus / tap, for a11y +
   touch), no click-toggle.  Trigger and popover are adjacent (no gap) so the
   pointer never crosses a dead zone. */
.dl-menu { position: relative; display: inline-block; }
.dl-trigger {
  background: none; border: 0; padding: 0; margin: 0;
  color: var(--accent); font: inherit; cursor: pointer; white-space: nowrap;
}
.dl-pop {
  position: absolute; top: 100%; left: 0; z-index: 30; display: none;
  background: color-mix(in oklab, var(--surface), transparent 4%);   /* mostly opaque so menu text stays readable */
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid color-mix(in oklab, var(--line), transparent 18%);
  border-radius: 14px; padding: 5px; min-width: 210px;
  box-shadow: 0 14px 36px -12px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.5);
}
.dl-pop.dl-right { left: auto; right: 0; }
.dl-menu:hover > .dl-pop, .dl-menu:focus-within > .dl-pop { display: block; }
/* Touch: JS toggles .tap-open on no-hover devices (CSS :hover never fires there).
   Desktop never gets this class, so its hover behaviour is unchanged. */
.dl-menu.tap-open > .dl-pop { display: block; }
@media (max-width: 720px) {
  /* iOS Safari mis-stacks backdrop-filter, dropping the menu BEHIND the wrapped
     full-width search row (where it was untappable).  On mobile use a solid
     background + a high z-index so the menu reliably sits on top.  Desktop keeps
     the glass effect and z-index:30 above. */
  .dl-pop {
    z-index: 250;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--surface);
  }
}
.dl-pop a, .dl-pop button.dl-opt {
  display: block; width: 100%; text-align: left; box-sizing: border-box;
  padding: 6px 10px; color: var(--ink); border-radius: var(--r-sm);
  text-decoration: none; font: inherit; font-size: var(--t-13); white-space: nowrap;
  background: none; border: 0; cursor: pointer;
}
.dl-pop a:hover, .dl-pop a:focus, .dl-pop button.dl-opt:hover, .dl-pop button.dl-opt:focus {
  background: var(--accent-soft); text-decoration: none;
}

/* Reader top-bar Share dropdown — JS-toggled (click), reusing the .dl-pop look.
   The "link to selection" item carries [hidden] until there is a selection. */
.share-menu { position: relative; display: inline-block; }
.share-pop:not([hidden]) { display: block; }
.share-pop button[hidden] { display: none !important; }

/* Search-options dropdown (the "Aa" menu: case + match mode) */
.search-opts-btn { font: inherit; font-size: var(--t-12); color: var(--ink-mute); white-space: nowrap; }
.search-opts-btn:hover { color: var(--ink); }
.search-opts-btn .opt-dot { color: var(--accent); }
.search-opts-pop { min-width: 230px; padding: 6px; }
.search-opts-pop label { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-sm); color: var(--ink); cursor: pointer; font-size: var(--t-13); white-space: nowrap; }
.search-opts-pop label:hover { background: var(--accent-soft); }
.search-opts-pop input { width: auto; margin: 0; flex: 0 0 auto; accent-color: var(--accent); }
.search-opts-pop .opt-sep { border-top: 1px solid var(--line); margin: 5px 4px; }
.search-opts-pop .opt-group-label { padding: 5px 10px 2px; font-size: var(--t-11); color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.05em; }

/* Colour-scheme picker (3×3 swatches in account settings) */
.scheme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.scheme-swatch { display: flex; flex-direction: column; gap: 6px; background: none; border: 2px solid var(--line); border-radius: var(--r-md); padding: 6px; cursor: pointer; font: inherit; }
.scheme-swatch:hover { border-color: var(--ink-mute); }
.scheme-swatch.active { border-color: var(--accent); }
.scheme-prev { position: relative; height: 46px; border-radius: var(--r-sm); overflow: hidden; background: var(--s-pane); display: block; }
.scheme-prev .scheme-bar { position: absolute; inset: 0 0 auto 0; height: 15px; background: var(--s-bar); }
.scheme-prev .scheme-dot { position: absolute; right: 8px; bottom: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--s-accent); }
.scheme-name { font-size: var(--t-12); color: var(--ink-soft); text-align: center; }
.scheme-swatch.active .scheme-name { color: var(--accent); font-weight: 600; }

.reader-inner article, .doc-body {
  font-family: var(--serif); font-size: var(--t-17); line-height: 1.75;
}
.doc-body p, .reader-inner article p { margin: 0 0 1.1em; }
.doc-text { font-family: var(--serif); font-size: var(--t-17); line-height: 1.75; }
.doc-text p { white-space: pre-wrap; margin: 0 0 1.1em; }
/* Never let a long unbreakable run (e.g. a leaked ───── box-rule, a long URL, or
   a backslash-hard-wrapped word) push the reader wider than its pane → no
   horizontal "wobble".  Break inside the token as a last resort. */
.reader-inner, .doc-body, .doc-text, .doc-text p,
.reader-inner article p, .doc-body p { overflow-wrap: break-word; word-break: break-word; min-width: 0; }

/* Verse rendering */
.passage, .verse, .doc-body p {
  position: relative;
}
.verse {
  display: grid; grid-template-columns: 36px 1fr; gap: 4px;
  align-items: baseline;
}
.verse .v {
  font-family: var(--mono); font-size: var(--t-11);
  color: var(--ink-mute); text-align: right; padding-top: 6px;
  user-select: none;
}
.verse:hover .v { color: var(--accent); }
.verse:target, .doc-body p:target {
  background: linear-gradient(transparent 60%, var(--accent-soft) 60%);
  padding: 0 4px; margin: 0 -4px;
}

/* Multiscript passages */
.passage { font-family: var(--serif); font-size: var(--t-17); line-height: 1.75; }
.passage.pass-ar { font-family: 'Noto Naskh Arabic', var(--serif); font-size: 22px; line-height: 1.9; }
.passage.pass-he { font-family: 'Noto Serif Hebrew', var(--serif); font-size: 19px; line-height: 1.8; }
.passage.pass-sa { font-family: 'Noto Sans Devanagari', var(--serif); font-size: 18px; line-height: 1.85; }
.passage[dir="rtl"] { text-align: right; }

/* Per-paragraph permalink anchor (powered by workbench.js) */
.doc-body p[id^="p-"] .anchor-link, .reader-inner p[id^="p-"] .anchor-link {
  position: absolute; left: -1.5em; top: 0.2em;
  opacity: 0; color: var(--ink-mute);
  text-decoration: none; font-size: 0.85em;
  transition: opacity var(--d-1);
}
.doc-body p[id^="p-"]:hover .anchor-link,
.reader-inner p[id^="p-"]:hover .anchor-link,
.doc-body p[id^="p-"]:focus-within .anchor-link,
.reader-inner p[id^="p-"]:focus-within .anchor-link {
  opacity: 1; color: var(--accent);
}

.row-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 28px 0 0; border-top: 1px solid var(--line); padding-top: 16px;
}
.row-actions a, .row-actions button {
  color: var(--ink-soft); font-size: var(--t-13);
  padding: 6px 10px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; font: inherit; font-size: var(--t-13);
  display: inline-flex; align-items: center; gap: 4px;
}
.row-actions a:hover, .row-actions button:hover {
  color: var(--ink); border-color: var(--ink-mute); text-decoration: none;
}

/* ============================================================
   COMPARE GRID
   ============================================================ */

.compare-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 24px; max-width: 1400px; margin: 0 auto;
}
.compare-pane {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px;
  max-height: calc(100vh - 200px); overflow-y: auto;
}
.compare-pane header {
  font-family: var(--sans); font-weight: 600;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px; margin-bottom: 12px;
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-size: var(--t-13); color: var(--ink-soft);
}
@media (max-width: 720px) { .compare-grid { grid-template-columns: 1fr; padding: 12px; } }

/* Indeterminate top progress bar shown while a full-page search is running. */
.hw-search-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px;
  z-index: 9999; overflow: hidden; pointer-events: none; background: transparent;
}
.hw-search-progress::before {
  content: ''; position: absolute; top: 0; height: 100%; width: 40%; left: -40%;
  background: var(--accent); border-radius: 0 2px 2px 0;
  animation: hw-search-prog 1.05s ease-in-out infinite;
}
@keyframes hw-search-prog {
  0% { left: -40%; width: 40%; } 50% { width: 55%; } 100% { left: 100%; width: 40%; }
}

/* Breadcrumb + exact filename under each compare column header (flowing + aligned). */
.cmp-crumb {
  flex-basis: 100%; display: block; margin-top: 4px;
  font-family: var(--sans); font-weight: 400; font-size: var(--t-11);
  color: var(--ink-mute); line-height: 1.45; overflow-wrap: anywhere;
}
.cmp-crumb a { color: var(--ink-mute); text-decoration: none; }
.cmp-crumb a:hover { color: var(--accent); text-decoration: underline; }
.cmp-crumb .sep { margin: 0 4px; opacity: 0.5; }
.cmp-crumb-file { color: var(--ink-soft); font-weight: 600; }
.cmp-ahead .cmp-crumb { margin-top: 2px; }

/* ============================================================
   MATRIX (Feature 4 — bilingual parallel view)
   ============================================================ */

/* Toolbar uses the same reader-toolbar base; add wrapping for the pickers */
.mx-toolbar { flex-wrap: wrap; gap: 8px; align-items: center; }

/* Column header area: sidecar meta + attribution + share link */
.mx-meta {
  font-size: var(--t-12); color: var(--ink-mute); background: var(--surface-2);
  padding: 8px 12px; border-radius: var(--r-sm); margin-bottom: 8px;
  border-left: 3px solid var(--accent);
}
.mx-share { margin-bottom: 12px; }

/* Language badge (pill label showing the lang code / label in toolbar + headers) */
.mx-lang-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 2px 8px;
  font-size: var(--t-12); font-family: var(--sans);
}

/* Per-column header: title + lang badge */
.mx-pane-head {
  font-family: var(--sans); font-weight: 600;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px; margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; flex-wrap: wrap;
  font-size: var(--t-13); color: var(--ink-soft);
}

/* Language picker select in the toolbar */
.mx-lang-pick select {
  font: inherit; font-size: var(--t-13); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); border-radius: var(--r-sm);
  padding: 3px 6px; cursor: pointer;
}

/* Scrollable reading area inside each column */
.mx-body {
  overflow-y: auto;
  max-height: calc(100vh - 280px);
  padding-top: 4px;
}

/* Small button variant */
.btn-sm { font-size: var(--t-12); padding: 3px 8px; }

@media (max-width: 720px) {
  .mx-grid { grid-template-columns: 1fr; padding: 12px; }
}

/* ---- Matrix Tier 2: verse-aligned grid -------------------------------- */
/* "Verse-aligned" toolbar badge */
.mx-aligned-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent); color: #fff;
  border-radius: var(--r-md); padding: 2px 9px;
  font-size: var(--t-12); font-family: var(--sans); font-weight: 600;
}

/* The aligned table scrolls as one unit so verse rows stay synced. */
.mx-aligned { padding: 0 12px 24px; }

/* Two column headers above the rows (title + attribution per language). */
.mx-aligned-heads {
  display: grid;
  grid-template-columns: 56px 1fr 1fr;
  gap: 0 16px;
  position: sticky; top: 0; z-index: 2;
  background: var(--surface); padding: 10px 0 4px;
  border-bottom: 1px solid var(--line);
}
.mx-aligned-heads .mx-aligned-head:first-child { grid-column: 2; }
.mx-aligned-heads .mx-aligned-head:last-child  { grid-column: 3; }

/* One verse row = [ key | left lang | right lang ]. */
.mx-vrow {
  display: grid;
  grid-template-columns: 56px 1fr 1fr;
  gap: 0 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.mx-vrow:target { background: var(--surface-2); border-radius: var(--r-sm); }

.mx-vkey { text-align: right; padding-top: 2px; }
.mx-vkey-link {
  font-family: var(--mono); font-size: var(--t-12);
  color: var(--ink-mute); text-decoration: none; white-space: nowrap;
}
.mx-vkey-link:hover { color: var(--accent); text-decoration: underline; }

.mx-vcell { position: relative; min-width: 0; }
.mx-vcell .passage { margin: 0; }
.mx-vmissing { color: var(--ink-mute); }

/* Per-verse "share in their language" link, revealed on row hover. */
.mx-vshare {
  position: absolute; top: 0; inset-inline-end: 0;
  opacity: 0; transition: opacity .12s ease;
  font-size: var(--t-12); text-decoration: none; color: var(--ink-mute);
  padding: 0 2px;
}
.mx-vrow:hover .mx-vshare,
.mx-vshare:focus { opacity: 1; }
.mx-vshare:hover { color: var(--accent); }

@media (max-width: 720px) {
  .mx-aligned-heads,
  .mx-vrow { grid-template-columns: 44px 1fr 1fr; gap: 0 8px; }
}

/* Standalone reader: verse-numbered scripture (verse-mapped docs). */
.doc-verses .verse { margin: .35em 0; }
.doc-verses .verse:target { background: var(--surface-2); border-radius: var(--r-sm); padding: 2px 6px; }
.verse-key {
  font-family: var(--mono); font-size: var(--t-12);
  color: var(--ink-mute); text-decoration: none; margin-inline-end: 4px;
  vertical-align: baseline;
}
.verse-key:hover { color: var(--accent); text-decoration: underline; }

/* ============================================================
   COMPONENTS (buttons, chips, badges, forms)
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit; font-size: var(--t-13);
  padding: 6px 12px; border-radius: var(--r-md);
  cursor: pointer; text-decoration: none;
  transition: border-color var(--d-1), background var(--d-1);
}
.btn:hover { border-color: var(--ink-mute); background: var(--surface-2); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); border-color: var(--accent); background: var(--accent); color: #fff; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--line-soft); color: var(--ink); }
.btn-danger { color: var(--danger); border-color: var(--line); }
.btn-danger:hover { border-color: var(--danger); background: color-mix(in oklab, var(--danger), transparent 92%); }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); padding: 4px 10px;
  border-radius: 999px; font-size: var(--t-13); cursor: pointer;
  font: inherit;
}
.chip:hover { border-color: var(--ink-mute); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent);
}

.badge {
  border: 1px solid var(--line); color: var(--ink-mute);
  background: var(--surface);
  border-radius: var(--r-sm); font-size: var(--t-11);
  padding: 1px 6px; text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 500;
  font-family: var(--mono);
}
.badge.ok    { color: var(--ok);    border-color: color-mix(in oklab, var(--ok), transparent 60%); }
.badge.warn  { color: var(--warn);  border-color: color-mix(in oklab, var(--warn), transparent 60%); }
.badge.accent{ color: var(--accent);border-color: color-mix(in oklab, var(--accent), transparent 60%); }

/* Forms */
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], textarea, select {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px 10px; font: inherit; font-size: var(--t-14);
  width: 100%;
}
input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus,
input[type="password"]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
label {
  display: block; font-size: var(--t-13); color: var(--ink-soft);
  margin-bottom: 4px;
}
.form-row { margin-bottom: var(--s-4); }
.form-row .hint { font-size: var(--t-12); color: var(--ink-mute); margin-top: 4px; }

/* Flash messages */
.flash {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin-bottom: var(--s-4);
  font-size: var(--t-14);
  display: flex; gap: 8px; align-items: flex-start;
}
.flash.ok    { color: var(--ok); border-color: color-mix(in oklab, var(--ok), transparent 70%); background: color-mix(in oklab, var(--ok), var(--bg) 92%); }
.flash.warn  { color: var(--warn); border-color: color-mix(in oklab, var(--warn), transparent 70%); background: color-mix(in oklab, var(--warn), var(--bg) 92%); }
.flash.error { color: var(--danger); border-color: color-mix(in oklab, var(--danger), transparent 70%); background: color-mix(in oklab, var(--danger), var(--bg) 94%); }

/* ============================================================
   STATUS BAR (bottom)
   ============================================================ */

.statusbar {
  background: var(--bordeaux-bar);
  border-top: 1px solid rgba(0,0,0,0.28);
  --ink-mute: rgba(255,240,235,0.62);   /* readable on bordeaux */
  --ink-soft: rgba(255,245,240,0.86);
  --line:     rgba(255,255,255,0.20);
  font-family: var(--mono); font-size: var(--t-11);
  color: var(--ink-mute);
  display: flex; flex-direction: column;   /* row 1: live status · row 2: footer */
}
.statusbar .status-row { display: flex; gap: 14px; align-items: center; padding: 6px 14px; }
/* Row 2 — site identity + imprint/contribute.  Slim, set apart by a hairline. */
.statusbar .status-foot {
  border-top: 1px solid var(--line); flex-wrap: wrap; gap: 6px 12px;
  color: var(--ink-mute);
}
.statusbar .foot-id { opacity: .82; }
.statusbar .foot-copy { white-space: nowrap; opacity: .85; }
.statusbar .foot-links { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.statusbar .foot-links a {
  color: var(--ink-soft); text-decoration: none;
  padding: 2px 9px; border-radius: 6px;
  transition: background 0.12s ease, color 0.12s ease;
}
.statusbar .foot-links a:hover, .statusbar .foot-links a:focus-visible {
  color: #fff; background: rgba(255, 255, 255, 0.14); text-decoration: none; outline: none;
}
.statusbar .foot-sep { opacity: .5; }
@media (max-width: 720px) { .statusbar .foot-links { margin-left: 0; } }
.statusbar .dot { color: var(--ok); transition: color .2s; }   /* idle = ready */
/* Always occupies the same slot (filled on result pages, empty otherwise) so it
   never reflows the items beside it. */
.statusbar .search-time {
  color: var(--ink-mute); font-family: var(--mono); font-size: var(--t-11);
  white-space: nowrap; display: inline-block; min-width: 5.2em; text-align: left;
}
@media (max-width: 720px) { .statusbar .search-time { min-width: 0; } }

/* Activity indicator: a thin indeterminate bar at the very top of the page +
   a pulsing status dot, shown while a search navigation is in flight. */
.hw-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100;
  overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .12s;
}
body.hw-busy .hw-progress { opacity: 1; }
.hw-progress::before {
  content: ''; position: absolute; top: 0; height: 100%; width: 35%; left: -35%;
  background: var(--gold, #e0b964);
  animation: hw-progress-slide 0.9s ease-in-out infinite;
}
@keyframes hw-progress-slide { to { left: 100%; } }
body.hw-busy .statusbar .dot { color: var(--gold, #e0b964); animation: hw-pulse .8s ease-in-out infinite; }
@keyframes hw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) {
  .hw-progress::before, body.hw-busy .statusbar .dot { animation: none; }
}

/* Per-file search selection (browse mode "deselect texts") */
.browse-file { display: flex; align-items: center; }
.browse-file > .result-row { flex: 1; min-width: 0; }
.file-pick {
  display: none;   /* shown only when JS is active (html.hw-js) */
  flex: 0 0 auto; width: 15px; height: 15px; margin: 0 0 0 12px;
  cursor: pointer; accent-color: var(--accent);
}
html.hw-js .file-pick { display: inline-block; }
.browse-file.excluded > .result-row { opacity: 0.4; }
.browse-file.excluded > .result-row .ref { text-decoration: line-through; }
.select-bar { display: inline-flex; gap: 6px; align-items: center; text-transform: none; letter-spacing: normal; font-weight: 400; }
.select-bar .sel-count { color: var(--ink-soft); }
.select-bar button {
  background: none; border: 1px solid var(--line); color: var(--ink-soft);
  border-radius: var(--r-sm); padding: 1px 8px; font: inherit; font-size: var(--t-11); cursor: pointer;
}
.select-bar button:hover { background: var(--surface-2); color: var(--ink); }

/* Results pager */
.pager { display: flex; gap: 14px; align-items: center; justify-content: center; padding: 16px; font-size: var(--t-13); border-top: 1px solid var(--line); }
.pager a { color: var(--accent); }
.pager a:hover { text-decoration: underline; }
.pager .disabled { color: var(--ink-mute); opacity: 0.5; }
.pager > span { color: var(--ink-soft); font-family: var(--mono); }
.statusbar .right { margin-left: auto; display: flex; gap: 14px; }
@media (max-width: 720px) {
  .statusbar .right { display: none; }
}

/* ============================================================
   ACCOUNT / AUTH PAGES (centered card)
   ============================================================ */

.auth-card {
  max-width: 420px; margin: var(--s-7) auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--s-6) var(--s-6) var(--s-5);
  box-shadow: var(--sh-3);
}
.auth-card h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--t-28); margin: 0 0 4px;
}
.auth-card .lead { color: var(--ink-soft); font-size: var(--t-14); margin: 0 0 var(--s-5); }

/* ============================================================
   WORKSPACE — collections / clippings
   ============================================================ */

.workspace { max-width: 1100px; margin: 0 auto; padding: var(--s-6) var(--s-5); }
.workspace > header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: var(--s-5); }
.workspace > header h1 { font-family: var(--serif); font-weight: 500; font-size: var(--t-34); margin: 0; }
.workspace > header .page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Unified content panel shared by Admin dashboard / Workspace / Ihr Konto.
   A bordered card with a consistent serif section heading. */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-5); margin-bottom: var(--s-5);
}
.panel > h2, .panel > h3 {
  font-family: var(--serif); font-weight: 500; font-size: var(--t-22);
  margin: 0 0 var(--s-3);
}
.panel > .admin-note, .panel > .lead { margin-top: 0; }

.collections {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-4); margin-bottom: var(--s-7);
}
.collection-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-4);
  display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: inherit;
  transition: border-color var(--d-1), transform var(--d-1);
}
.collection-card:hover { border-color: var(--ink-mute); text-decoration: none; }
.collection-card h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: var(--t-17); color: var(--ink); }
.collection-card .meta { font-size: var(--t-12); color: var(--ink-mute); }

.clipping-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.clipping {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-4);
}
.clipping blockquote {
  margin: 0 0 8px;
  font-family: var(--serif); font-size: var(--t-15); line-height: 1.65;
  border-left: 3px solid var(--accent-soft); padding-left: 12px;
  color: var(--ink);
}
.clipping footer {
  font-size: var(--t-12); color: var(--ink-mute);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.clipping footer .src { color: var(--accent); }
.clipping footer button { background: none; border: 0; color: var(--ink-mute); cursor: pointer; font-size: var(--t-12); padding: 0; }
.clipping footer button:hover { color: var(--danger); }
/* Per-clip download menu (._clip_download.php) — undo the footer's generic
   button rules so its trigger + menu items read like the reader download menu. */
.clipping footer .dl-clip .dl-trigger { color: var(--ink-mute); padding: 0; }
.clipping footer .dl-clip .dl-trigger:hover { color: var(--accent); }
.clipping footer .dl-clip .dl-pop button.dl-opt { color: var(--ink); font-size: var(--t-13); padding: 6px 10px; }
.clipping footer .dl-clip .dl-pop button.dl-opt:hover { color: var(--ink); background: var(--accent-soft); }

/* Reader toolbar (sticky bar used on showtext) */
.reader-toolbar {
  /* #main is its own scroll container on desktop (the topbar is a separate
     grid row above it), so the toolbar sticks to the TOP of the reading area. */
  position: sticky; top: 0;
  z-index: 5;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 8px 14px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--t-13);
}
/* Mobile: the whole window scrolls and the topbar is window-sticky, so the
   reader toolbar must sit just below it instead of at the window top. */
@media (max-width: 720px) { .reader-toolbar { top: 53px; } }
.reader-toolbar button {
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-soft); padding: 4px 10px; border-radius: var(--r-md);
  cursor: pointer; font: inherit; font-size: var(--t-13);
  display: inline-flex; align-items: center; gap: 4px;
}
.reader-toolbar button:hover { border-color: var(--ink-mute); color: var(--ink); }
.reader-toolbar button.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* Help overlay (keyboard shortcuts) */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: none; align-items: center; justify-content: center; z-index: 100;
  padding: 16px;
}
.overlay.active { display: flex; }
.overlay > .card {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: var(--s-5) var(--s-6);
  max-width: 540px; width: 100%;
  box-shadow: var(--sh-3);
  max-height: 86vh; overflow-y: auto;
}
.overlay h2 { font-family: var(--serif); font-weight: 500; font-size: var(--t-22); margin: 0 0 var(--s-3); }
.overlay table { width: 100%; border-collapse: collapse; font-size: var(--t-14); }
.overlay td { padding: 6px 8px; }
.overlay td:first-child { text-align: right; white-space: nowrap; }

/* Toast */
#hw-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg);
  padding: 10px 16px; border-radius: var(--r-md);
  font-size: var(--t-13); z-index: 200;
  box-shadow: var(--sh-3);
  opacity: 0; transition: opacity var(--d-2);
  pointer-events: none;
}
#hw-toast.show { opacity: 1; }

/* Print */
@media print {
  .topbar, .toolbar, .statusbar, .reader-toolbar, .pane:not(.reader),
  .row-actions, .overlay, #hw-toast { display: none !important; }
  .panes { display: block; }
  .reader-inner { max-width: 100%; padding: 0; }
  body { font-size: 12pt; background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}



/* Small inline icon buttons in the workspace (delete ✕ / download ⬇). */
.x-del {
  background: none; border: 0; color: var(--ink-mute); cursor: pointer;
  font-size: var(--t-13); line-height: 1; padding: 2px 5px; border-radius: var(--r-sm);
}
.x-del:hover, .x-del:focus { color: var(--danger); background: color-mix(in oklab, var(--danger), transparent 88%); }

/* -----------------------------------------------------------------------
   Feature 5 — Explorer: Related-passages panel
   A dismissible slide-in panel anchored to the right edge of the reader.
   The panel is JS-created and injected; the CSS here drives its appearance.
   ----------------------------------------------------------------------- */

/* Panel container — fixed to the viewport's right edge so it stays visible no
   matter how far the reader is scrolled (JS sets --rp-top to the reader's top). */
.related-panel {
  position: fixed;
  top: var(--rp-top, 72px);
  right: 0;
  width: clamp(260px, 30%, 360px);
  max-height: calc(100vh - var(--rp-top, 72px) - 10px);
  overflow-y: auto;
  background: color-mix(in oklab, var(--surface), transparent 2%);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-left: 1px solid var(--line);
  border-bottom-left-radius: var(--r-xl);
  box-shadow: -4px 0 24px -8px rgba(0,0,0,0.22);
  z-index: 60;
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  /* Enter animation */
  animation: related-slide-in 160ms ease-out both;
}
@keyframes related-slide-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* On mobile the panel floats full-width at the bottom */
@media (max-width: 720px) {
  .related-panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 55vh;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom-left-radius: 0;
    box-shadow: 0 -8px 32px -8px rgba(0,0,0,0.32);
  }
}

/* Panel header row */
.related-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.related-panel-header h2 {
  font-size: var(--t-14);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  font-family: var(--sans);
}
/* Close (×) button */
.related-panel-close {
  background: none;
  border: 0;
  color: var(--ink-mute);
  font-size: 1.1em;
  line-height: 1;
  padding: 3px 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.related-panel-close:hover { color: var(--ink); background: var(--surface-2); }

/* Section headings inside the panel */
.related-group-title {
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 4px;
}
/* List of related items */
.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.related-item { display: block; }
.related-link {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--d-1);
}
.related-link:hover { background: var(--surface-2); }
.related-link.active { background: var(--accent-soft); }
.related-lang {
  font-size: var(--t-11);
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.related-title {
  font-size: var(--t-13);
  color: var(--ink);
  line-height: 1.35;
}
.related-meta {
  font-size: var(--t-11);
  color: var(--ink-mute);
}
.related-empty {
  font-size: var(--t-13);
  color: var(--ink-mute);
  font-style: italic;
  text-align: center;
  padding: var(--s-3) 0;
}
/* Loading / error states */
.related-panel-loading,
.related-panel-error {
  font-size: var(--t-13);
  color: var(--ink-mute);
  text-align: center;
  padding: var(--s-3) 0;
}
.related-panel-error { color: var(--danger); }

/* The reader pane must be position:relative so the absolute panel stays
   inside it (it already is in .pane.reader; this guard handles edge cases). */
#reader, .pane.reader { position: relative; }

/* -----------------------------------------------------------------------
   Phase 5 — Cross-references ("✦ Cited scriptures")
   Reuses the .related-panel chrome; these style the xref-specific bits +
   the inline Qur'an-citation links in the reader body.
   ----------------------------------------------------------------------- */
.xref-intro {
  font-size: var(--t-12);
  color: var(--ink-mute);
  margin: 0 0 var(--s-2);
}
.xref-count { color: var(--ink-mute); font-weight: 400; }
.xref-list .xref-item { display: block; }
.xref-link {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  justify-content: space-between;
}
.xref-ref { font-variant-numeric: tabular-nums; }
.xref-jump { color: var(--accent); opacity: .7; }
.xref-noresolve { color: var(--ink-mute); padding: var(--s-1) var(--s-2); display: block; }

/* Inline citation link inside the scripture body — a subtle dotted underline
   so it reads as an apparatus link, not a normal hyperlink. */
a.xref-inline,
.xref-cite {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
  cursor: pointer;
}
a.xref-inline:hover,
.xref-cite:hover,
.xref-cite:focus { color: var(--accent); border-bottom-style: solid; outline: none; }

/* In-place verse popover: click a citation → read the cited verse without
   navigating away (lazily filled from ?a=…&_action=verse). */
.xref-pop {
  position: fixed;
  z-index: 60;
  width: min(340px, 92vw);
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  padding: 10px 12px;
  font-size: var(--t-14);
  line-height: 1.5;
  backdrop-filter: var(--glass-blur, none);
}
.xref-pop-head {
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.xref-pop-body { color: var(--ink); max-height: 40vh; overflow-y: auto; }
.xref-pop-body .xref-v { margin: 2px 0; }
.xref-pop-body .xref-v.focus { background: var(--accent-soft); border-radius: 4px; padding: 1px 3px; }
.xref-pop-body .xref-vk { color: var(--ink-mute); font-size: var(--t-11); font-variant-numeric: tabular-nums; margin-right: 2px; }
.xref-pop-open {
  display: inline-block;
  margin-top: 8px;
  font-size: var(--t-12);
  color: var(--accent);
  text-decoration: none;
  border-top: 1px solid var(--border);
  padding-top: 6px;
  width: 100%;
}
.xref-pop-open:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------
   Feature 5 — Footnote two-way linking
   The JS detects href="#fn*" patterns in HTML docs and adds back-link
   anchors to each footnote list item.  Styling for those extras:
   ----------------------------------------------------------------------- */

/* Back-to-text link appended to each footnote in the reader */
.fn-backlink {
  display: inline-block;
  margin-inline-start: 6px;
  color: var(--accent);
  font-size: 0.8em;
  text-decoration: none;
  vertical-align: middle;
  line-height: 1;
}
.fn-backlink:hover { text-decoration: underline; }

/* Highlighted state when jumping to a footnote or back */
.fn-highlight {
  background: color-mix(in oklab, var(--gold), transparent 72%);
  border-radius: 3px;
  outline: 2px solid color-mix(in oklab, var(--gold), transparent 40%);
  outline-offset: 2px;
}

/* Make sure inline footnote markers look clickable when enhanced */
.doc-body a[href^="#fn"] sup,
.reader-inner a[href^="#fn"] sup {
  cursor: pointer;
  color: var(--accent);
  transition: color var(--d-1);
}
.doc-body a[href^="#fn"]:hover sup,
.reader-inner a[href^="#fn"]:hover sup {
  color: var(--gold);
}

/* ---- Compare "choose another text" picker (mini-workbench overlay) ---- */
.cmp-pick {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, #000, transparent 55%); padding: 24px;
}
.cmp-pick[hidden] { display: none; }
.cmp-pick-dialog {
  width: min(900px, 100%); height: min(640px, 90vh);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg, 12px);
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.cmp-pick-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.cmp-pick-head strong { font-family: var(--serif); font-weight: 500; white-space: nowrap; }
.cmp-pick-q {
  flex: 1; min-width: 0; padding: 6px 10px; font: inherit;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm, 6px);
}
.cmp-pick-close {
  background: none; border: 0; color: var(--ink-mute); cursor: pointer;
  font-size: var(--t-16); line-height: 1; padding: 4px 8px; border-radius: var(--r-sm, 6px);
}
.cmp-pick-close:hover { background: var(--surface); color: var(--ink); }
.cmp-pick-parallels {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: var(--t-12);
}
.cmp-pick-lbl { color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.05em; }
.pick-chip {
  padding: 2px 9px; font: inherit; font-size: var(--t-12); cursor: pointer;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--line); border-radius: 999px;
}
.pick-chip:hover, .pick-chip:focus { background: var(--accent); color: var(--bg); }
.cmp-pick-body { flex: 1; display: flex; min-height: 0; }
.cmp-pick-tree {
  width: 230px; flex: none; overflow: auto; padding: 8px;
  border-right: 1px solid var(--line); background: var(--surface-2);
}
.cmp-pick-tree .tree, .cmp-pick-tree aside { width: 100%; }   /* let the embedded tree fill the column */
.cmp-pick-results { flex: 1; overflow: auto; padding: 8px 10px; min-width: 0; }
.pick-crumb { font-size: var(--t-12); color: var(--ink-mute); margin-bottom: 6px; }
.pick-crumb .pick-dir { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0 2px; font: inherit; }
.pick-crumb .pick-dir:hover { text-decoration: underline; }
.pick-list { list-style: none; margin: 0; padding: 0; }
.pick-item {
  display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  padding: 7px 9px; border-radius: var(--r-sm, 6px); font: inherit; line-height: 1.4;
}
.pick-item:hover, .pick-item:focus { background: var(--accent-soft); }
.pick-item .pick-ico { color: var(--ink-mute); }
.pick-item .pick-name { flex: 1; overflow-wrap: anywhere; }
.pick-item .pick-meta { color: var(--ink-mute); font-family: var(--mono); font-size: var(--t-11); white-space: nowrap; }
.pick-dir .pick-name { font-weight: 500; }
.pick-legacy { opacity: .6; }
.pick-legacy .pick-name { font-weight: 400; font-style: italic; }
/* "change this side" button in a compare-pane header */
.cmp-change { background: none; border: 0; color: var(--accent); cursor: pointer; font-size: 1em; line-height: 1; padding: 0 4px; margin-left: 6px; }
.cmp-change:hover { opacity: .7; }

/* KWIC scope picker — the textbase tree shown as an overlay (deep scope) */
.kwic-scope-open { background: var(--surface-2, transparent); border: 1px solid var(--border); border-radius: var(--r-md); color: inherit; font: inherit; padding: 4px 10px; cursor: pointer; }
.kwic-scope-open:hover { border-color: var(--accent); }
.kwic-scope-modal { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.45); display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; overflow-y: auto; }
.kwic-scope-modal[hidden] { display: none; }
.kwic-scope-dialog { background: var(--bg); color: var(--ink); border: 1px solid var(--border); border-radius: 12px; width: min(760px, 100%); max-height: 82vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.kwic-scope-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.kwic-scope-close { background: none; border: 0; font-size: 1.1em; cursor: pointer; color: var(--ink-mute); }
.kwic-scope-body { overflow-y: auto; padding: 8px 10px; }
/* neutralise the sidebar positioning of the embedded tree inside the modal */
.kwic-scope-body .tree-pane, .kwic-scope-body aside { position: static; width: auto; max-width: none; height: auto; background: none; border: 0; padding: 0; }

/* Compare ⇄ Matrix merge: verse-aligned rows */
.compare-aligned { overflow-y: auto; height: 100%; }
.cmp-arow { display: grid; grid-template-columns: 56px 1fr 1fr; gap: 14px; padding: 8px 16px; border-bottom: 1px solid var(--line-soft); align-items: start; }
.cmp-arow.cmp-ahead { position: sticky; top: 0; z-index: 2; background: var(--bg); border-bottom: 1px solid var(--line); }
.cmp-arow:target { background: var(--accent-soft); }
.cmp-akey { color: var(--ink-mute); font-size: var(--t-11); font-variant-numeric: tabular-nums; padding-top: 2px; }
.cmp-acell { line-height: 1.6; }
.cmp-align-toggle { font-size: var(--t-12); color: var(--accent); text-decoration: none; font-weight: 400; }
.cmp-align-toggle:hover { text-decoration: underline; }
@media (max-width: 720px) { .cmp-arow { grid-template-columns: 40px 1fr 1fr; gap: 8px; padding: 8px 10px; } }
.pick-empty { color: var(--ink-mute); padding: 12px; font-style: italic; }

/* ---- Mandatory attribution block (restricted-by-permission sources) ---- */
.reader-attrib {
  display: flex; gap: 7px; align-items: flex-start;
  margin: 0 0 14px; padding: 7px 11px;
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--r-sm, 6px) var(--r-sm, 6px) 0;
  background: color-mix(in oklab, var(--surface-2), transparent 35%);
  font-size: var(--t-11); line-height: 1.5; color: var(--ink-mute);
}
.reader-attrib-ico { color: var(--gold); font-weight: 700; flex: none; }
.reader-attrib-txt em { font-style: italic; }
.reader-attrib a { color: var(--accent); }

/* Compare picker on phones: stack the tree above the results (side-by-side is
   too cramped under ~640px), and let the dialog use the full screen. */
@media (max-width: 640px) {
  .cmp-pick { padding: 0; }
  .cmp-pick-dialog { width: 100%; height: 100%; border: 0; border-radius: 0; }
  .cmp-pick-body { flex-direction: column; }
  .cmp-pick-tree {
    width: auto; max-height: 38vh;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .cmp-pick-head { flex-wrap: wrap; }
  .cmp-pick-q { order: 3; flex-basis: 100%; }
}

/* ---- Mobile polish: tree behind a toggle + denser lists ---- */
.tree-toggle { display: none; }
@media (max-width: 720px) {
  .tree-toggle {
    display: inline-flex; align-items: center; gap: 6px; margin-right: auto;
    padding: 4px 11px; cursor: pointer; font: inherit; font-size: var(--t-12);
    background: var(--surface-2); color: var(--ink-soft);
    border: 1px solid var(--line); border-radius: 999px;
  }
  .tree-toggle:hover, .tree-toggle:focus { background: var(--surface); color: var(--ink); }
  /* Tree hidden by default so results lead; the toggle reveals it. */
  .panes > .tree-pane { display: none; }
  /* .pane.tree-pane keeps specificity ≥ the show-reader collapse rule. */
  .panes.tree-open > .pane.tree-pane { display: block; max-height: 60vh; overflow-y: auto; }
  /* Denser result + browse rows and popovers on phones. */
  .result-row { padding: 9px 12px; }
  .results-list .ref { font-size: var(--t-14); line-height: 1.35; }
  .pane-header { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .hit-pop, .dl-pop, .search-opts-pop { width: min(94vw, 460px); }
  .browse-file > .result-row { padding: 8px 12px; }
}

/* ---- Compact source line (replaces the big sidecar box) ---- */
.reader-src { font-size: var(--t-12); color: var(--ink-mute); line-height: 1.55; margin: 0 0 14px; }
.reader-src strong { color: var(--ink-soft); font-weight: 600; }
.reader-src em { color: var(--ink-soft); font-style: italic; }
.reader-src a { color: var(--accent); }

/* Standalone-reader toolbar (.reader-toolbar already draws boxed buttons):
   enlarge the now-icon-only action glyphs so they read as buttons too. */
.reader-toolbar button[data-action],
.reader-toolbar .dl-menu > .btn,
.reader-toolbar .dl-trigger,
.reader-toolbar > a.btn[href*="a=COMPARE"] {
  font-size: 19px; line-height: 1; padding: 4px 10px; font-variant-emoji: text;
}
/* The standalone hit-menu trigger is text — keep it compact, like the inline one. */
.reader-toolbar .hit-menu > .dl-trigger { font-size: var(--t-12); font-weight: 600; }

/* ---- Custom tooltip overlay (replaces the slow native title= bubble) ---- */
.hw-tooltip {
  position: fixed; z-index: 9999; pointer-events: none;
  max-width: 280px; padding: 6px 9px;
  background: rgba(28, 28, 30, 0.95); color: #fff;
  font-family: var(--sans); font-size: var(--t-12); font-weight: 500; line-height: 1.42;
  letter-spacing: 0; text-transform: none;
  border-radius: var(--r-sm); box-shadow: var(--sh-3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  white-space: normal; text-align: center;
  opacity: 0; transform: translateY(3px);
  transition: opacity var(--d-1) ease, transform var(--d-1) ease;
}
.hw-tooltip.below { transform: translateY(-3px); }
.hw-tooltip.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hw-tooltip { transition: none; } }

.xref-lang { color: var(--ink-mute); font-weight: 400; font-size: var(--t-11); }

/* ============================================================
   USER CONTRIBUTIONS — suggest-a-correction popover + moderation diff
   ============================================================ */
.sc-bar {
  position: absolute; z-index: 60; display: flex; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill, 999px);
  padding: 3px; box-shadow: 0 8px 22px -8px rgba(0,0,0,0.42);
}
.sc-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
  font: inherit; font-size: var(--t-12); font-weight: 600; white-space: nowrap;
  padding: 5px 11px; border-radius: var(--r-pill, 999px);
}
.sc-btn svg { width: 15px; height: 15px; max-width: none; flex: 0 0 auto; }
.sc-btn:hover { background: var(--accent-soft); color: var(--accent); }
/* The old reader-toolbar pencil moved into the selection bar — keep it hidden
   (it survives only as the annotation popover's i18n carrier). */
.reader-act[hidden], [data-action="annotate"][hidden] { display: none !important; }
.mod-msg { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); font-family: var(--serif); font-size: 15px; line-height: 1.55; }
.dl-ico { width: 16px; height: 16px; max-width: none; vertical-align: -2px; }
.sc-pop {
  position: absolute; z-index: 61; width: min(360px, 92vw);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px; padding: 14px;
  box-shadow: 0 18px 44px -14px rgba(0,0,0,0.42);
  display: flex; flex-direction: column; gap: 9px;
}
.sc-pop .sc-l { display: block; font-size: var(--t-12); color: var(--ink-soft); }
.sc-pop input[type=text], .sc-pop input[type=email], .sc-pop textarea {
  width: 100%; box-sizing: border-box; margin-top: 4px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--ink); font: inherit; padding: 7px 9px;
}
.sc-pop textarea { font-family: var(--serif); font-size: 15px; resize: vertical; }
.sc-pop .sc-orig {
  margin-top: 4px; padding: 7px 9px; border-radius: var(--r-md);
  background: color-mix(in oklab, var(--danger, #b3261e), transparent 88%);
  color: var(--ink); font-family: var(--serif); font-size: 15px;
}
.sc-pop .sc-why { font-size: var(--t-11); color: var(--ink-mute); }
.sc-pop .sc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.sc-pop .sc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }

/* Moderation page old→new diff */
.mod-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.mod-diff > div { padding: 10px 12px; border-radius: var(--r-md); font-family: var(--serif); font-size: 15px; line-height: 1.55; }
.mod-diff .mod-lbl { font-family: var(--sans); font-size: var(--t-11); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-mute); margin-bottom: 5px; }
.mod-old { background: color-mix(in oklab, var(--danger, #b3261e), transparent 88%); }
.mod-new { background: color-mix(in oklab, var(--ok, #2e7d32), transparent 86%); }
@media (max-width: 620px) { .mod-diff { grid-template-columns: 1fr; } }

/* Floating "back to top" button (appears on scroll; Home/g do the same). */
.to-top {
  position: fixed; right: 18px; bottom: 64px; z-index: 55;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--accent);
  background: color-mix(in oklab, var(--surface), transparent 16%);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid color-mix(in oklab, var(--line), transparent 20%);
  box-shadow: 0 10px 26px -8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
}
.to-top:hover { color: var(--ink); background: color-mix(in oklab, var(--surface), transparent 6%); }
.to-top[hidden] { display: none; }
@media (max-width: 720px) { .to-top { bottom: 18px; right: 14px; } }

/* Middle-pane disclosure triangles — match the left tree's caret size (20px). */
.mid-caret {
  display: inline-block; font-size: 20px; line-height: 1; flex: 0 0 auto;
  transition: transform var(--d-1, 0.15s) ease;
}
details[open] > summary > .mid-caret { transform: rotate(90deg); }

/* Contribution forms (Contribute page) */
.contrib-form .cf-row { display: block; margin: 0 0 12px; }
.contrib-form .cf-row > span {
  display: block; font-size: var(--t-13); color: var(--ink-soft);
  margin: 0 0 4px; font-weight: 500;
}
.contrib-form input[type="text"],
.contrib-form input[type="email"],
.contrib-form input[type="url"],
.contrib-form input[type="file"],
.contrib-form textarea {
  width: 100%; box-sizing: border-box; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px;
}
.contrib-form input[type="file"] { padding: 7px 10px; background: var(--surface-2); }
.contrib-form textarea { resize: vertical; min-height: 2.4em; }
.contrib-form input:focus, .contrib-form textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft, color-mix(in oklab, var(--accent), transparent 80%));
}
.contrib-form .cf-meta {
  border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 14px 14px 4px; margin: 0 0 14px; background: var(--surface-2);
}
.contrib-form .cf-meta legend {
  font-size: var(--t-12); color: var(--ink-mute); text-transform: uppercase;
  letter-spacing: 0.05em; padding: 0 6px;
}
.contrib-form .cf-hint { font-size: var(--t-12); color: var(--ink-mute); margin: -6px 0 12px; }

/* Contribute hub — two big choice cards (mock screen-contribute.html) */
.paths { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 22px 0 6px; }
@media (max-width: 640px) { .paths { grid-template-columns: 1fr; } }
.path {
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 20px 22px; color: inherit; text-decoration: none;
  transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.path:hover { border-color: var(--accent); transform: translateY(-1px); text-decoration: none;
  box-shadow: 0 8px 22px -12px rgba(0,0,0,0.35); }
.path .icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent-soft, color-mix(in oklab, var(--accent), transparent 84%));
  color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.path .icon svg { width: 18px; height: 18px; max-width: none; }
.path .tag { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); font-weight: 600; margin-bottom: 6px; }
.path h3 { font-family: var(--serif); font-weight: 500; font-size: 18px; margin: 0 0 6px; color: var(--ink); }
.path p { font-size: 13.5px; color: var(--ink-soft); margin: 0; }

/* Card is highlighted (framed) while its form is open */
.path.is-open {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), 0 8px 22px -12px rgba(0,0,0,0.35);
}
.path.is-open .icon { background: var(--accent); color: var(--bg); }

/* Each form is hidden until opened.  No-JS: revealed by :target (anchor).
   With JS (html.hw-js): the card toggles an .is-open class instead, so a second
   click collapses it — the :target fallback is then suppressed. */
.cf-panel {
  display: none; max-width: 62ch; margin-top: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px;
  scroll-margin-top: 80px;
}
.cf-panel:target { display: block; }
html.hw-js .cf-panel:target { display: none; }
html.hw-js .cf-panel.is-open { display: block; }

/* Destination chosen from the library tree */
.cf-dest { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; }
.cf-dest-lbl { font-size: var(--t-12); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); margin-bottom: 4px; }
.cf-dest-val { font-weight: 600; color: var(--ink); }
.cf-dest-empty { font-weight: 400; color: var(--ink-mute); font-style: italic; }