/* Liqro: the spine.

   Hebrew and translation meet in the middle of the page, and the verse number
   sits between them as a Hebrew numeral over an Arabic one. The canonical verse
   is the join key between the two texts, so it gets the place where they touch.
   A selected verse lights a thread of tekhelet down that spine; a verse that
   anchors a note carries a knot on it. Everything else stays quiet. */

/* Taamey Frank CLM (Culmus, GPL with font exception): Frank-Rühl drawn with
   full cantillation support, the face of printed Israeli Tanakhs. Limited to
   the Hebrew block so Latin punctuation inside Hebrew falls through to Alegreya. */
@font-face { font-family: "Taamey Frank"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("./fonts/TaameyFrankCLM-Medium.ttf") format("truetype"); unicode-range: U+0590-05FF, U+FB1D-FB4F, U+25CC; }
@font-face { font-family: "Taamey Frank"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/TaameyFrankCLM-Bold.ttf") format("truetype"); unicode-range: U+0590-05FF, U+FB1D-FB4F, U+25CC; }
@font-face { font-family: "Alegreya"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("./fonts/Alegreya-italic-400-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("./fonts/Alegreya-italic-400-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("./fonts/Alegreya-normal-400-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("./fonts/Alegreya-normal-400-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya Sans SC"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/AlegreyaSansSC-normal-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya Sans SC"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/AlegreyaSansSC-normal-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya Sans SC"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/AlegreyaSansSC-normal-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya Sans SC"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/AlegreyaSansSC-normal-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --klaf: #f2f2ee;        /* the page */
  --margin: #e8e8e2;      /* commentary and cards, a shade into the margin */
  --margin-2: #deded7;
  --ink: #1a1a20;
  --ink-soft: #3b3b44;    /* long commentary prose */
  --muted: #66666e;
  --rule: #cbcbc3;
  --tekhelet: #2e3a8c;
  --wash: #e4e5ee;
  --on-tekhelet: #f2f2ee;
  --shadow: 0 1px 0 rgba(26, 26, 32, .04), 0 22px 50px -14px rgba(30, 34, 70, .28);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2388888f' stroke-width='1.5'/%3E%3C/svg%3E");

  --hebrew: "Taamey Frank", "Taamey Frank CLM", "SBL Hebrew", "Noto Serif Hebrew", "Times New Roman", serif;
  --serif: "Alegreya", "Iowan Old Style", Palatino, Georgia, serif;
  --caps: "Alegreya Sans SC", "Alegreya", ui-sans-serif, system-ui, sans-serif;

  --topbar: 60px;
  --spine: 60px;
  --gap: clamp(16px, 2.2vw, 32px);
  color-scheme: light;
}

/* Dark follows the device unless the reader chose light, and applies whenever
   the reader chose dark. The two blocks carry the same values: CSS has no way
   to share one declaration between a media query and an attribute selector. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --klaf: #121319; --margin: #191a22; --margin-2: #23252f;
    --ink: #e7e5de; --ink-soft: #c9c7c0; --muted: #9a9aa4; --rule: #30323c;
    --tekhelet: #a3aeea; --wash: #20253b; --on-tekhelet: #121319;
    --shadow: 0 22px 50px -14px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --klaf: #121319; --margin: #191a22; --margin-2: #23252f;
  --ink: #e7e5de; --ink-soft: #c9c7c0; --muted: #9a9aa4; --rule: #30323c;
  --tekhelet: #a3aeea; --wash: #20253b; --on-tekhelet: #121319;
  --shadow: 0 22px 50px -14px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh;
  background: var(--klaf); color: var(--ink);
  font-family: var(--serif); font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--tekhelet); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--tekhelet) 22%, transparent); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Top bar ----------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--topbar);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--klaf) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.brand-wrap { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.brand-mark { font-family: var(--hebrew); font-weight: 700; font-size: 25px; line-height: 1; color: var(--tekhelet); }
.brand { font-family: var(--caps); font-weight: 700; font-size: 16px; letter-spacing: .08em; }

.chapter-nav { display: flex; align-items: center; gap: 2px; }
.top-actions { justify-self: end; display: flex; align-items: center; gap: 2px; }

select {
  appearance: none; -webkit-appearance: none;
  border: 0; border-radius: 6px;
  background: transparent var(--chevron) no-repeat right 9px center / 10px 6px;
  padding: 7px 27px 7px 10px;
  font-family: var(--caps); font-weight: 700; font-size: 15px; letter-spacing: .03em;
  cursor: pointer; transition: background-color .15s ease;
}
select:hover { background-color: var(--margin); }
select option { font-family: system-ui, sans-serif; background: var(--klaf); color: var(--ink); }
#bookSelect { font-size: 17px; }

.icon-button, .quiet-button, .primary-button {
  border: 0; border-radius: 6px; background: transparent;
  transition: background-color .15s ease, color .15s ease;
}
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; font-size: 18px; color: var(--muted); }
.quiet-button { padding: 7px 10px; font-family: var(--caps); font-weight: 700; font-size: 15px; letter-spacing: .03em; }
.icon-button:hover, .quiet-button:hover { background: var(--margin); color: var(--ink); }
.primary-button {
  padding: 10px 18px; background: var(--tekhelet); color: var(--on-tekhelet);
  font-family: var(--caps); font-weight: 700; font-size: 16px; letter-spacing: .04em;
}
.primary-button:hover { background: color-mix(in srgb, var(--tekhelet) 88%, var(--ink)); }

.theme-toggle svg { display: block; }
.theme-toggle .theme-half, .theme-toggle .theme-full { display: none; }
.theme-toggle[data-choice="system"] .theme-half,
.theme-toggle[data-choice="dark"] .theme-full { display: inline; }

/* Workspace --------------------------------------------------------------- */
.workspace {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px;
  min-height: calc(100vh - var(--topbar));
}
.reader-panel {
  container: reader / inline-size;
  padding: 52px clamp(16px, 4vw, 60px) 140px; min-width: 0;
}

/* The chapter heading and every verse row share one grid, so the spine runs
   straight from the chapter numeral down through every verse. */
.chapter-header, .verse-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--spine) minmax(0, 1fr);
  column-gap: var(--gap);
  max-width: 1080px; margin-inline: auto; padding-inline: 12px;
}
.verse-row { grid-template-areas: "he spine en"; }
.chapter-header {
  grid-template-areas: ". . kicker" "he spine en" ". thread status";
  align-items: end;
}
/* The stretch of thread between the heading and the first verse. */
.chapter-header::after { content: ''; grid-area: thread; justify-self: center; align-self: stretch; width: 1px; background: var(--rule); }

.section-kicker {
  grid-area: kicker; margin-bottom: 8px;
  font-family: var(--caps); font-weight: 700; font-size: 14px; letter-spacing: .08em; color: var(--muted);
}
.chapter-hebrew {
  grid-area: he; text-align: right;
  font-family: var(--hebrew); font-weight: 700; font-size: clamp(44px, 5vw, 74px); line-height: 1.05;
}
.chapter-spine {
  grid-area: spine; align-self: end;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding-bottom: 8px; color: var(--tekhelet);
}
.chapter-spine .num-he { font-family: var(--hebrew); font-weight: 700; font-size: 32px; line-height: 1; }
.chapter-spine .num-en { font-family: var(--caps); font-weight: 700; font-size: 15px; font-variant-numeric: lining-nums; }
h1 {
  grid-area: en; margin: 0;
  font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 5vw, 74px);
  line-height: 1.05; letter-spacing: -.012em;
}
.chapter-status {
  grid-area: status; margin: 0; padding: 10px 0 40px;
  font-style: italic; font-size: 14px; color: var(--muted);
}

.empty-state { max-width: 560px; margin: 12vh auto 0; text-align: center; }
.empty-glyph { font-family: var(--hebrew); font-size: 96px; line-height: 1; color: var(--tekhelet); margin-bottom: 18px; }
.empty-state h2 { font-weight: 500; font-size: 30px; margin-bottom: 10px; }
.empty-state p { color: var(--muted); line-height: 1.6; }
.fine-print { font-style: italic; font-size: 14px; color: var(--muted); }

/* Verse rows ---------------------------------------------------------------- */
.verses { max-width: 1080px; margin: 0 auto; }
.verse-row {
  border-radius: 10px; cursor: pointer;
  background-color: var(--klaf);   /* inherited by the spine, so numerals cut the thread cleanly */
  transition: background-color .15s ease;
}
.verse-row:hover { background-color: color-mix(in srgb, var(--margin) 70%, var(--klaf)); }
.verse-row.selected { background-color: var(--wash); }
.verse-row:focus-visible { outline-offset: -2px; }
/* Arriving at a verse puts it just under the sticky top bar. */
.verse-row { scroll-margin-top: calc(var(--topbar) + 12px); }

/* Vertical padding lives on the cells rather than the row, so the spine cell
   runs the full height of its row and the thread never breaks between verses. */
.verse-number {
  grid-area: spine; position: relative; align-self: stretch;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 20px; background: inherit;
}
.verse-number::before, .verse-number::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: var(--rule); transform: translateX(-50%);
}
.verse-number::after {
  width: 3px; border-radius: 2px; background: var(--tekhelet);
  transform: translateX(-50%) scaleY(0);
  transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.verse-row.selected .verse-number::after { transform: translateX(-50%) scaleY(1); }
.verse-number > * { position: relative; z-index: 1; background: inherit; }

.verse-number .num-he { font-family: var(--hebrew); font-size: 22px; line-height: 1.1; padding: 3px 5px 0; }
.verse-number .num-en {
  font-family: var(--caps); font-weight: 700; font-size: 12px; line-height: 1.2;
  font-variant-numeric: lining-nums tabular-nums; color: var(--muted); padding: 1px 5px 4px;
}
.num-he:empty { display: none; }
.verse-row.selected :is(.num-he, .num-en) { color: var(--tekhelet); }

/* Marks a verse where a note begins: a knot on the thread. It sits in the spine
   so it costs no layout space and reads as part of the page rather than as UI. */
.note-mark {
  display: block; width: 9px; height: 9px; margin-top: 3px;
  border: 1.5px solid var(--tekhelet); border-radius: 50%;
}
.verse-row.selected .note-mark { background: var(--tekhelet); }

/* Copies a link to the verse. Shown on hover, keyboard focus and the selected
   verse; its space is always kept, so rows never shift when it appears. */
.verse-link {
  display: grid; place-items: center; width: 26px; height: 26px; margin-top: 4px;
  border-radius: 6px; color: var(--tekhelet);
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease, background-color .15s ease;
}
.verse-row:hover .verse-link, .verse-row.selected .verse-link, .verse-link:focus-visible { opacity: 1; pointer-events: auto; }
.verse-number > .verse-link:hover, .ref-link:hover { background-color: var(--margin-2); }
.verse-link svg { display: block; }

/* The same link beside the reference in the commentary heading, which is where
   it can be reached on a phone: tapping a verse there opens the commentary. */
.selected-ref-row { display: flex; align-items: center; gap: 6px; }
.ref-link { opacity: 1; pointer-events: auto; margin-top: 2px; width: 30px; height: 30px; }

/* The edition's own verse number, shown only where it disagrees with the canon
   (the Decalogue division in Exodus 20, 2 Chronicles 1:18 printed as 2:1). */
.verse-printed {
  display: block; margin-top: 5px; padding: 1px 2px; white-space: nowrap;
  font-family: var(--caps); font-weight: 500; font-size: 11px; color: var(--muted);
}

.verse-hebrew, .verse-alter { min-width: 0; }
.verse-hebrew {
  grid-area: he; direction: rtl; text-align: right;
  font-family: var(--hebrew); font-size: clamp(24px, 2vw, 30px); line-height: 1.8;
  padding-block: 10px 22px;
}
.verse-alter {
  grid-area: en;
  font-size: clamp(18px, 1.35vw, 21px); line-height: 1.6;
  padding-block: 20px 24px;
}
.verse-alter p, .verse-hebrew p { margin: 0 0 .38em; }
.verse-range, .verse-edition-label {
  display: block; margin-bottom: 2px;
  font-family: var(--caps); font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--muted);
  font-style: normal;
}
.verse-hebrew .loading-line {
  display: inline-block; width: 70%; height: .8em; border-radius: 4px;
  background: var(--margin); animation: pulse 1.4s infinite;
}

/* Compare mode: editions stack inside the translation column rather than taking
   a column each, which would leave four columns fighting for width. */
.verse-edition.is-absent { display: flex; flex-direction: column; }
.verse-alter.is-comparing .verse-edition + .verse-edition {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule);
}
.verse-absent { font-size: 15px; font-style: italic; color: var(--muted); }

/* Single-column layouts. The spine moves to the side the text starts from:
   left of the translation, right of the Hebrew. */
body.layout-alter :is(.chapter-header, .verse-row) { grid-template-columns: var(--spine) minmax(0, 700px); justify-content: center; }
body.layout-alter .verse-row { grid-template-areas: "spine en"; }
body.layout-alter .chapter-header { grid-template-areas: ". kicker" "spine en" "thread status"; }
body.layout-alter :is(.verse-hebrew, .chapter-hebrew) { display: none; }

body.layout-hebrew :is(.chapter-header, .verse-row) { grid-template-columns: minmax(0, 760px) var(--spine); justify-content: center; }
body.layout-hebrew .verse-row { grid-template-areas: "he spine"; }
body.layout-hebrew .chapter-header { grid-template-areas: "kicker ." "he spine" "status thread"; }
body.layout-hebrew :is(.section-kicker, .chapter-status) { text-align: right; }
body.layout-hebrew .verse-alter { display: none; }
body.layout-hebrew h1 {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* When the reading column is too narrow for two texts side by side, each verse
   stacks with the Hebrew above the translation and the spine moves to the left.
   Queried on the column itself, so it also applies beside an open commentary. */
@container reader (max-width: 700px) {
  body:not(.layout-alter):not(.layout-hebrew) :is(.chapter-header, .verse-row) {
    grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; padding-inline: 6px 10px;
  }
  body:not(.layout-alter):not(.layout-hebrew) .verse-row { grid-template-areas: "spine he" "spine en"; }
  body:not(.layout-alter):not(.layout-hebrew) .chapter-header { grid-template-areas: ". kicker" "spine he" "thread en" "thread status"; }
  .verse-number { padding-top: 16px; }
  .verse-hebrew { padding-block: 10px 2px; }
  .verse-alter { padding-block: 4px 22px; }
  .chapter-hebrew { font-size: 46px; }
  h1 { font-size: 46px; }
  .chapter-status { padding-bottom: 28px; }
}

/* Commentary ---------------------------------------------------------------- */
.commentary-panel { border-left: 1px solid var(--rule); background: var(--margin); min-width: 0; }
.commentary-sticky {
  position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar));
  display: flex; flex-direction: column;
}
.commentary-heading { padding: 30px 28px 14px; display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.commentary-heading .section-kicker { margin-bottom: 4px; }
.commentary-heading h2 { margin: 0; font-size: 30px; font-weight: 500; line-height: 1.15; }
.selected-ref-he { font-family: var(--hebrew); font-size: 22px; line-height: 1.4; color: var(--muted); text-align: left; }

.commentary-tabs { display: flex; gap: 22px; padding: 0 28px; border-bottom: 1px solid var(--rule); }
.tab {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none; padding: 10px 0 10px;
  font-family: var(--caps); font-weight: 700; font-size: 15px; letter-spacing: .04em; color: var(--muted);
  transition: color .15s ease, border-color .15s ease;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--tekhelet); }
/* How much is waiting behind each tab for the selected verse. */
.tab-count { font-family: var(--serif); font-weight: 500; font-size: 14px; letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; color: var(--muted); }
.tab.active .tab-count { color: var(--tekhelet); }
.tab.tab-empty { opacity: .5; }

.commentary-body { flex: 1 1 auto; min-height: 0; padding: 22px 28px 80px; overflow: auto; }
.commentary-placeholder { color: var(--muted); font-style: italic; line-height: 1.6; font-size: 16px; }
.commentary-group + .commentary-group { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); }
.commentary-group-title {
  display: flex; align-items: center; gap: 10px; margin: 0 -6px 10px; padding: 4px 6px;
  cursor: pointer; list-style: none; user-select: none; border-radius: 6px;
  transition: background-color .12s ease;
}
.commentary-group-title::-webkit-details-marker { display: none; }
.commentary-group-title:hover { background: var(--margin-2); }
.commentary-group-title h3 { margin: 0; flex: 1; font-family: var(--caps); font-weight: 700; font-size: 15px; letter-spacing: .04em; }
/* Chevron: points right when closed, down when open. */
.commentary-group-title::before {
  content: ''; flex: none; width: 6px; height: 6px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.commentary-group[open] > .commentary-group-title::before { transform: rotate(45deg); }
.commentary-group-body { padding-left: 16px; }
.commentary-count { font-style: italic; font-size: 14px; color: var(--muted); }

.note-card, .comment-card { margin: 0 0 18px; }
/* Note and comment headers. A lighter chevron than the group-level one, so the
   nesting reads at a glance. */
.note-head, .comment-head {
  display: flex; align-items: baseline; gap: 8px;
  cursor: pointer; list-style: none; user-select: none;
  padding: 2px 4px; margin: 0 -4px 2px; border-radius: 5px;
  transition: background-color .12s ease;
}
.note-head::-webkit-details-marker, .comment-head::-webkit-details-marker { display: none; }
.note-head:hover, .comment-head:hover { background: var(--margin-2); }
.note-head::before, .comment-head::before {
  content: ''; flex: none; align-self: center; width: 5px; height: 5px;
  border-right: 1.5px solid var(--rule); border-bottom: 1.5px solid var(--rule);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.note-card[open] > .note-head::before,
.comment-card[open] > .comment-head::before { transform: rotate(45deg); }
.note-card > .note-text, .comment-card > .comment-body { padding-left: 13px; }

/* A note on a passage rather than a single verse. It reappears on every verse
   it covers, so it is marked with its range and hangs from its own thread;
   collapsing it holds for the whole passage. */
.note-scope {
  flex: none; font-family: var(--caps); font-weight: 700; font-size: 12px; letter-spacing: .03em;
  color: var(--muted); padding: 0 7px; border: 1px solid var(--rule); border-radius: 99px;
}
.note-card.is-passage { border-left: 2px solid color-mix(in srgb, var(--tekhelet) 35%, transparent); padding-left: 10px; margin-left: -2px; }

.note-phrase { color: var(--tekhelet); font-style: italic; font-weight: 600; font-size: 17px; }
.note-text, .comment-text { color: var(--ink-soft); font-size: 16px; line-height: 1.62; }
.comment-source { font-family: var(--caps); font-weight: 700; font-size: 14px; letter-spacing: .02em; color: var(--tekhelet); }
.comment-he { direction: rtl; text-align: right; font-family: var(--hebrew); font-size: 21px; line-height: 1.7; margin: 6px 0; }
.comment-en { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.commentary-loading { display: grid; gap: 10px; }
.skeleton { height: 14px; border-radius: 4px; background: var(--rule); animation: pulse 1.35s infinite; }
.skeleton:nth-child(2) { width: 78%; } .skeleton:nth-child(3) { width: 92%; }

/* Overlays ------------------------------------------------------------------ */
.overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(10, 11, 24, .42); backdrop-filter: blur(6px); }
.import-card {
  width: min(430px, calc(100vw - 32px)); padding: 32px; text-align: center;
  background: var(--klaf); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow);
}
.import-card h2 { margin: 14px 0 8px; font-weight: 500; }
.import-card p { color: var(--muted); }
.spinner { width: 28px; height: 28px; margin: 0 auto; border: 2px solid var(--rule); border-top-color: var(--tekhelet); border-radius: 50%; animation: spin .9s linear infinite; }
.progress-track { height: 4px; background: var(--margin); border-radius: 99px; overflow: hidden; margin: 20px 0 13px; }
.progress-bar { width: 0%; height: 100%; background: var(--tekhelet); transition: width .18s ease; }

/* Hebrew lexicon ------------------------------------------------------------ */
.heb-word { cursor: pointer; border-radius: 4px; transition: background-color .12s ease; }
.heb-word:hover { background: color-mix(in srgb, var(--tekhelet) 14%, transparent); }
.heb-word:focus-visible { outline-offset: 1px; }

.lexicon-card {
  position: fixed; z-index: 130; width: min(360px, calc(100vw - 24px)); max-height: 52vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--klaf); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow);
}
.lexicon-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--rule); background: var(--margin);
}
.lexicon-word { font-family: var(--hebrew); font-size: 28px; line-height: 1.3; }
.lexicon-body { overflow: auto; padding: 14px 16px 16px; }
.lexicon-entry + .lexicon-entry { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.lexicon-entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lexicon-lemma { font-family: var(--hebrew); font-size: 24px; color: var(--tekhelet); }
.lexicon-source { font-family: var(--caps); font-weight: 500; font-size: 12px; color: var(--muted); text-align: right; }
.lexicon-meta { font-style: italic; font-size: 14px; color: var(--muted); margin-top: 2px; }
.lexicon-senses { margin: 8px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.lexicon-senses li { margin-bottom: 3px; }

/* Today's readings ---------------------------------------------------------- */
.calendar-card { width: min(400px, calc(100vw - 24px)); }
.calendar-date { font-family: var(--caps); font-weight: 700; font-size: 15px; letter-spacing: .04em; color: var(--muted); }
.calendar-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 6px;
  background: transparent;
}
button.calendar-item { cursor: pointer; }
button.calendar-item:hover, button.calendar-item:focus-visible { background: var(--margin); }
.calendar-title { font-family: var(--caps); font-weight: 700; font-size: 14px; letter-spacing: .02em; color: var(--tekhelet); flex: none; }
.calendar-value { font-size: 16px; text-align: right; color: var(--ink-soft); }

/* Search -------------------------------------------------------------------- */
.search-overlay { align-items: start; padding-top: 10vh; }
.search-card {
  width: min(760px, calc(100vw - 32px)); max-height: 78vh; display: flex; flex-direction: column;
  background: var(--klaf); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden;
}
.search-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 20px;
  border-bottom: 1px solid var(--rule); transition: box-shadow .15s ease;
}
.search-bar:focus-within { box-shadow: inset 0 -2px 0 var(--tekhelet); }
#searchInput {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  padding: 8px 0; font-family: var(--serif); font-size: 22px;
}
#searchInput::placeholder { color: var(--muted); font-style: italic; }
/* The card already has a close button; a second × beside it reads as the same control. */
#searchInput::-webkit-search-cancel-button { display: none; }

.search-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 20px 8px; }
.scope-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--caps); font-weight: 700; font-size: 14px; letter-spacing: .03em; color: var(--muted);
  padding: 3px 11px 3px 8px; border: 1px solid var(--rule); border-radius: 99px;
  transition: background-color .12s ease;
}
.scope-chip:hover { background: var(--margin); }
.scope-chip input { margin: 0; accent-color: var(--tekhelet); }
.scope-chip:has(input:checked) { color: var(--ink); background: var(--wash); border-color: color-mix(in srgb, var(--tekhelet) 40%, var(--rule)); }
.scope-chip:has(input:focus-visible) { outline: 2px solid var(--tekhelet); outline-offset: 2px; }
.scope-divider { width: 1px; height: 16px; background: var(--rule); margin: 0 4px; }

.search-status { padding: 0 20px 8px; }
.search-results { overflow: auto; padding: 2px 10px 12px; }
.search-hit {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: 8px; padding: 10px 12px; margin-bottom: 2px;
}
.search-hit:hover, .search-hit:focus-visible { background: var(--margin); }
.search-hit-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.search-hit-ref { font-family: var(--caps); font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--tekhelet); }
.search-hit-tag { font-style: italic; font-size: 14px; color: var(--muted); }
.search-hit-snippet { display: block; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.search-hit mark { background: var(--wash); color: var(--ink); box-shadow: inset 0 -2px 0 var(--tekhelet); }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 120;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  padding: 10px 16px; border-radius: 8px; background: var(--ink); color: var(--klaf);
  font-family: var(--caps); font-weight: 700; font-size: 14px; letter-spacing: .03em;
  transition: opacity .2s ease, transform .2s ease; box-shadow: var(--shadow);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.mobile-only { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Narrower screens ---------------------------------------------------------- */
@media (max-width: 1100px) {
  :root { --spine: 52px; }
  .workspace { grid-template-columns: minmax(0, 1fr) 360px; }
  .topbar { grid-template-columns: auto 1fr auto; }
  .chapter-nav { justify-self: center; }
}
@media (max-width: 780px) {
  .topbar { height: auto; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 8px 12px 6px; }
  .brand-wrap { grid-column: 1; }
  .top-actions { grid-column: 2; }
  .chapter-nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: space-between; }
  #layoutToggle { display: none; }
  .verse-row { scroll-margin-top: 104px; }   /* the top bar is two rows here */
  .workspace { display: block; }
  .reader-panel { padding: 30px 10px 100px; }
  .search-overlay { padding-top: 0; }
  .search-card { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; border: 0; }
  .commentary-panel {
    position: fixed; inset: 0; z-index: 60; border: 0;
    transform: translateY(103%); transition: transform .28s cubic-bezier(.2, .7, .2, 1);
  }
  .commentary-panel.open { transform: none; box-shadow: var(--shadow); }
  .commentary-sticky { position: static; height: 100%; }
  .commentary-heading { padding: 20px 16px 12px 20px; }
  .commentary-tabs { padding: 0 20px; }
  .commentary-body { padding: 20px 20px 60px; }
  .mobile-only { display: grid; }
}