/* AISBT Reader styles (from the prototype). Fonts are local (web/static/fonts, OFL). */
@font-face { font-family: "Gentium"; src: url("/static/fonts/gentium/Gentium-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Gentium"; src: url("/static/fonts/gentium/Gentium-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "Gentium"; src: url("/static/fonts/gentium/Gentium-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; }
@font-face { font-family: "Gentium"; src: url("/static/fonts/gentium/Gentium-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: block; }
@font-face { font-family: "Gentium"; src: url("/static/fonts/gentium/Gentium-SemiBoldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: block; }
@font-face { font-family: "Gentium"; src: url("/static/fonts/gentium/Gentium-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "Ezra SIL"; src: url("/static/fonts/ezra-sil/SILEOT.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Inter"; src: url("/static/fonts/inter/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-display: block; }

:root, [data-theme="parchment"] {
  --bg: #efe6d4; --paper: #fbf7ee; --paper-2: #f5eedf;
  --ink: #2a241c; --ink-2: #554a3b; --ink-3: #6b5f4c;
  --rule: #ddd0b7; --rule-strong: #bfae8e;
  --rubric: #9a2d1f; --lapis: #2b5486; --ochre: #7f5d18; --verdigris: #2a6656; --murex: #6b3f78; --gold: #9c7020; --gold-ink: #775812;
  --focus: #1f5fbf;
  --shadow: 0 1px 0 rgba(60,40,10,.04), 0 10px 26px -14px rgba(60,40,10,.30);
  --draft-ink: rgba(154,45,31,.075);
  --chip-bg: #f0e7d5;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #13100c; --paper: #1c1813; --paper-2: #231e18;
  --ink: #ede4d2; --ink-2: #cbbfa9; --ink-3: #aa9d87;
  --rule: #362f26; --rule-strong: #554a3b;
  --rubric: #ee8d70; --lapis: #96bbea; --ochre: #ddb25c; --verdigris: #82c9b0; --murex: #cda5df; --gold: #dbb05a; --gold-ink: #dbb05a;
  --focus: #8fbaff;
  --shadow: 0 1px 0 rgba(0,0,0,.4), 0 12px 30px -14px rgba(0,0,0,.8);
  --draft-ink: rgba(238,141,112,.065);
  --chip-bg: #29241d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  background-image: radial-gradient(ellipse at 15% -10%, rgba(255,252,240,.55), transparent 55%),
                    radial-gradient(ellipse at 110% 110%, rgba(140,95,25,.08), transparent 50%);
  background-attachment: fixed;
  color: var(--ink); font-family: "Gentium", serif; font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
[data-theme="dark"] body { background-image: radial-gradient(ellipse at 30% -10%, rgba(219,176,90,.07), transparent 55%); }
.heb, bdi.heb { font-family: "Ezra SIL", serif; unicode-bidi: isolate; font-size: 1.16em; line-height: 1.6; }
.lord { font-variant: small-caps; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inter { font-family: "Inter", system-ui, sans-serif; }

/* ---------- app shell ---------- */
.app { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: 58px auto 1fr; min-height: 100vh; }
.topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding-right: 18px; border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--paper) 78%, transparent); position: relative; z-index: 5; }
.brand { width: 64px; height: 58px; display: grid; place-items: center; border-right: 1px solid var(--rule); flex: none; }
.brand svg { display: block; }
.crumbs { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.crumbs .t { font-weight: 600; font-size: 18.5px; white-space: nowrap; }
.crumbs .t .app-name { color: var(--rubric); font-variant: small-caps; letter-spacing: .06em; margin-right: 10px; font-weight: 700; }
.crumbs .s { font-size: 11.5px; color: var(--ink-3); font-family: "Inter"; letter-spacing: .02em; white-space: nowrap; }
.search { margin-left: 14px; flex: 0 1 420px; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px 0 12px; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--paper); color: var(--ink-3); font-size: 13px; font-family: "Inter"; }
.search .ph { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
kbd { font-family: "Inter"; font-size: 11px; border: 1px solid var(--rule-strong); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; color: var(--ink-2); background: var(--paper-2); }
.spacer { flex: 1; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-family: "Inter"; font-size: 12.5px; color: var(--ink-2); padding: 6px 8px; border-radius: 9px; border: 0; background: none; cursor: pointer; white-space: nowrap; }
.toggle .sw { width: 30px; height: 18px; border-radius: 9px; background: var(--rule-strong); position: relative; flex: none; }
.toggle .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.toggle[aria-pressed="true"] .sw { background: var(--rubric); }
.toggle[aria-pressed="true"] .sw::after { left: 14px; }
.iconbtn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2); cursor: pointer; flex: none; }

.rail { grid-row: 2 / -1; border-right: 1px solid var(--rule); display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 4px; }
.rail a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; color: var(--ink-3); text-decoration: none; position: relative; }
.rail a[aria-current="page"] { background: var(--paper); color: var(--rubric); box-shadow: var(--shadow); }
.rail a[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--rubric); }
.rail .sep { width: 26px; border-top: 1px solid var(--rule); margin: 6px 0; }

.devbanner { grid-column: 2 / -1; display: flex; align-items: center; gap: 12px; padding: 6px 24px; font-family: "Inter"; font-size: 12px; color: var(--ink-2); border-bottom: 1px solid var(--rule);
  background: repeating-linear-gradient(-45deg, var(--draft-ink) 0 10px, transparent 10px 20px), var(--paper-2); }
.devbanner b { color: var(--rubric); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; }
.main { grid-column: 2; min-width: 0; }

/* ---------- layer bar ---------- */
.layers { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.layer { font-family: "Inter"; font-size: 12px; padding: 4px 11px 4px 9px; border-radius: 999px; border: 1px solid var(--rule-strong); color: var(--ink-2); background: transparent; display: inline-flex; gap: 7px; align-items: center; cursor: pointer; white-space: nowrap; }
.layer[aria-pressed="true"],
html.l-greek .layer[data-layer="greek"], html.l-interlinear .layer[data-layer="interlinear"], html.l-notes .layer[data-layer="notes"],
html.l-variants .layer[data-layer="variants"], html.l-echoes .layer[data-layer="echoes"], html.l-numbering .layer[data-layer="numbering"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.layer .dot { width: 8px; height: 8px; border-radius: 50%; }
.lbl { font-family: "Inter"; font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); font-weight: 600; }

/* ---------- reader ---------- */
.reader { display: grid; grid-template-columns: minmax(0, 1fr) 410px; }
.page { padding: 22px 56px 80px 72px; max-width: 880px; position: relative; }
.page .eyebrow { margin-top: 14px; }
.page h2 { font-size: 36px; font-weight: 600; margin: 4px 0 2px; letter-spacing: -.005em; line-height: 1.1; }
.page .sub { color: var(--ink-3); font-style: italic; margin: 6px 0 16px; font-size: 15.5px; }
.sechead { font-family: "Inter"; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--rubric); font-weight: 650; margin: 22px 0 8px; display: flex; gap: 12px; align-items: center; }
.sechead::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.text { font-size: 20.5px; line-height: 1.7; }
.v { border-radius: 6px; padding: 1px 4px; margin: 0 -4px; }
.v.focus { background: color-mix(in srgb, var(--gold) 13%, transparent); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--gold) 50%, transparent); }
.vn { font-family: "Inter"; font-size: 10.5px; font-weight: 700; color: var(--rubric); vertical-align: 6px; margin-right: 3px; }
.dropcap { float: left; font-size: 78px; line-height: .8; margin: 9px 10px 0 0; color: var(--rubric); font-weight: 600; }
.markers { display: inline-flex; gap: 3px; margin-left: 5px; vertical-align: 3px; }
.mk { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.mk.language { background: var(--lapis); } .mk.historical { background: var(--ochre); } .mk.exegetical { background: var(--rubric); }
.mk.textual { background: var(--verdigris); border-radius: 1px; transform: rotate(45deg) scale(.9); }
.mk.xref { background: transparent; border: 1.5px solid var(--murex); }
.greekline { display: block; font-size: 18.5px; line-height: 1.7; color: var(--ink-2); margin: 3px 0 12px 2px; padding-left: 14px; border-left: 2px solid var(--rule); }
.gw { border-radius: 3px; padding: 0 1px; cursor: help; }
.gw.open { background: color-mix(in srgb, var(--lapis) 15%, transparent); color: var(--ink); box-shadow: inset 0 -2px 0 var(--lapis); }
.gw.var { text-decoration: underline wavy color-mix(in srgb, var(--verdigris) 75%, transparent); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.para { margin: 0 0 6px; }

/* interlinear */
.ilin { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 6px 0 16px; padding-left: 14px; border-left: 2px solid var(--rule); }
.tok { display: flex; flex-direction: column; line-height: 1.25; }
.tok .s { font-size: 19px; }
.tok .g { font-family: "Inter"; font-size: 11px; color: var(--ink-3); }
.tok .m { font-family: "Inter"; font-size: 10px; color: var(--lapis); }

/* popover */
.pop { position: absolute; z-index: 30; width: 372px; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 14px; box-shadow: 0 2px 0 rgba(0,0,0,.03), 0 26px 50px -18px rgba(50,30,5,.5); padding: 16px 18px 14px; font-size: 14px; }
[data-theme="dark"] .pop { box-shadow: 0 26px 50px -14px rgba(0,0,0,.85); }
.pop::before { content: ""; position: absolute; top: -8px; left: var(--arrow, 40px); width: 14px; height: 14px; background: var(--paper); border-left: 1px solid var(--rule-strong); border-top: 1px solid var(--rule-strong); transform: rotate(45deg); }
.pop .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pop .lemma { font-size: 29px; font-weight: 500; line-height: 1.1; }
.pop .tr { font-style: italic; color: var(--ink-2); font-size: 16px; }
.pop .form { font-family: "Inter"; font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.pop dl { display: grid; grid-template-columns: 76px 1fr; gap: 5px 10px; margin: 10px 0 0; font-family: "Inter"; font-size: 12.5px; }
.pop dt { color: var(--ink-3); text-transform: uppercase; letter-spacing: .09em; font-size: 10px; padding-top: 3px; font-weight: 600; }
.pop dd { margin: 0; color: var(--ink); }
.code { font-family: "Inter"; font-feature-settings: "tnum", "zero"; background: var(--chip-bg); border: 1px solid var(--rule); border-radius: 5px; padding: 0 6px; font-size: 11.5px; }
.pop .links { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; padding-top: 9px; border-top: 1px solid var(--rule); }
.pop .lnk { font-family: "Inter"; font-size: 12.5px; display: flex; gap: 8px; align-items: center; color: var(--ink); text-decoration: none; }
.pop .lnk .mk { flex: none; }
.pop .foot { margin-top: 10px; font-family: "Inter"; font-size: 10.5px; color: var(--ink-3); line-height: 1.45; }

/* ---------- margin rail ---------- */
.margin { border-left: 1px solid var(--rule); padding: 18px 20px 60px; background: color-mix(in srgb, var(--paper) 50%, transparent); }
.margin-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.margin-head .ref { font-size: 21px; font-weight: 600; }
.typekey { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 14px; font-family: "Inter"; font-size: 11px; color: var(--ink-2); }
.typekey span { display: inline-flex; gap: 5px; align-items: center; }
.card { position: relative; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 13px 15px 12px 19px; margin-bottom: 10px; box-shadow: var(--shadow); overflow: hidden; }
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tc, var(--ink-3)); }
.language { --tc: var(--lapis); } .historical { --tc: var(--ochre); } .exegetical { --tc: var(--rubric); } .textual, .variant { --tc: var(--verdigris); } .xref { --tc: var(--murex); }
.tag { font-family: "Inter"; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tc); }
.cardtop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card .ttl { font-size: 16.5px; font-weight: 600; line-height: 1.3; margin: 5px 0 9px; }
.card .meta { font-family: "Inter"; font-size: 11px; color: var(--ink-3); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 11px; }
.card.compact { padding-top: 10px; padding-bottom: 10px; }
.card.compact .ttl { margin: 3px 0 0; font-size: 15px; font-weight: 500; }
.card .count { font-family: "Inter"; font-size: 11px; color: var(--ink-3); display: inline-flex; gap: 4px; align-items: center; }
.more { font-family: "Inter"; font-size: 12px; color: var(--ink-3); text-align: center; padding: 6px; }

/* ---------- certainty ruling (signature) ---------- */
.claims { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.claim { position: relative; padding: 0 0 0 30px; font-size: 14.5px; line-height: 1.45; }
.claim::before { content: ""; position: absolute; left: 6px; top: 20px; bottom: 1px; border-left: 2.5px solid var(--ink-2); }
.claim.implies::before { border-left-style: dashed; }
.claim.uncertain::before { border-left-style: dotted; border-left-width: 3px; }
.claim .seal { position: absolute; left: 0; top: 3px; }
.claim .lv { font-family: "Inter"; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); display: block; margin-bottom: 1px; }
.claim.uncertain .lv { font-style: italic; }
.seal { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--ink-2); flex: none; }
.seal.says { background: var(--ink-2); }
.seal.implies { background: linear-gradient(90deg, var(--ink-2) 50%, transparent 50%); }
.seal.uncertain { border-style: dotted; border-width: 2.5px; }
.badge { display: inline-flex; align-items: center; gap: 5px; font-family: "Inter"; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 8px 1px 4px; border-radius: 999px; color: var(--ink); background: var(--chip-bg); border: 1.5px solid var(--ink-2); vertical-align: 2px; white-space: nowrap; line-height: 1.5; }
.badge .seal { width: 10px; height: 10px; border-width: 1.5px; }
.badge.implies { border-style: dashed; }
.badge.uncertain { border-style: dotted; border-width: 2px; color: var(--ink-2); font-style: italic; }
.keybox { margin: 0 0 6px; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 12px; background: color-mix(in srgb, var(--paper) 70%, transparent); display: flex; gap: 22px; align-items: center; flex-wrap: wrap; column-gap: 18px; }
.keybox .k { display: flex; white-space: nowrap; gap: 8px; align-items: center; font-family: "Inter"; font-size: 12px; color: var(--ink-2); }
.keybox .k b { color: var(--ink); font-weight: 650; }
.keybox .rl { width: 0; height: 22px; border-left: 2.5px solid var(--ink-2); }
.keybox .rl.implies { border-left-style: dashed; } .keybox .rl.uncertain { border-left-style: dotted; border-left-width: 3px; }

/* ---------- status / drafts ---------- */
.status { font-family: "Inter"; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }
.status.approved { color: var(--verdigris); background: color-mix(in srgb, var(--verdigris) 11%, transparent); }
.status.review { color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.status.draft { color: var(--rubric); background: color-mix(in srgb, var(--rubric) 11%, transparent); }
.drafted { background-image: repeating-linear-gradient(-45deg, var(--draft-ink) 0 8px, transparent 8px 16px); border-style: dashed; border-color: color-mix(in srgb, var(--rubric) 45%, var(--rule)); }
.drafted .wm { position: absolute; right: 10px; bottom: 6px; font-family: "Inter"; font-weight: 800; font-size: 26px; letter-spacing: .16em; color: color-mix(in srgb, var(--rubric) 16%, transparent); pointer-events: none; transform: rotate(-8deg); transform-origin: right bottom; white-space: nowrap; }
.chip { font-family: "Inter"; font-size: 10.5px; padding: 1px 7px; border-radius: 6px; background: var(--chip-bg); color: var(--ink-2); border: 1px solid var(--rule); display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; line-height: 1.6; }
.chip.ro { border-style: dashed; color: var(--ink-3); background: transparent; }
.chip .lic { color: var(--ink-3); }
.chip.snapshot-ind { border-style: dashed; color: var(--ink-3); background: transparent; margin-left: 6px; }

/* ---------- markdown ---------- */
.md p { margin: 0 0 9px; }
.md p:last-child { margin-bottom: 0; }
.md ul { margin: 0 0 9px; padding-left: 20px; }
.md blockquote { margin: 0 0 9px; padding: 8px 12px; border-left: 3px solid var(--rule-strong); color: var(--ink-3); }
.md blockquote.pending { border: 1px dashed var(--rule-strong); border-radius: 8px; background: var(--paper-2); font-family: "Inter"; font-size: 12.5px; }
sup.sig { font-size: .66em; line-height: 0; vertical-align: .55em; }

/* ---------- generic view chrome ---------- */
.view { padding: 22px 32px 50px; }
.view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.eyebrow { font-family: "Inter"; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 650; }
.view-head h2 { font-size: 32px; font-weight: 600; margin: 4px 0 0; line-height: 1.12; }
.view-head .sub { font-size: 15px; color: var(--ink-3); font-style: italic; margin-top: 4px; }
.panel { background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.panel > .ph { padding: 12px 18px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.panel > .ph h4 { margin: 0; font-family: "Inter"; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.panel > .pb { padding: 16px 18px; }
.seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 9px; overflow: hidden; font-family: "Inter"; font-size: 12px; }
.seg button { border: 0; background: transparent; padding: 6px 12px; color: var(--ink-2); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button + button { border-left: 1px solid var(--rule-strong); }

/* ---------- manuscript lens ---------- */
.lens-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.versebox { padding: 20px 24px 22px; }
.versebox .gk { font-size: 26px; line-height: 1.6; }
.versebox .gk mark { background: none; color: inherit; padding: 0 3px; border-radius: 3px; box-shadow: inset 0 -0.45em 0 color-mix(in srgb, var(--verdigris) 24%, transparent); }
.versebox .gk mark.alt { box-shadow: inset 0 -0.45em 0 color-mix(in srgb, var(--rubric) 20%, transparent); }
.versebox .en { color: var(--ink-2); margin-top: 8px; font-size: 16px; }
.readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.reading { border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; background: var(--paper-2); position: relative; }
.reading.printed { background: var(--paper); border: 1.5px solid var(--verdigris); }
.reading .rk { font-family: "Inter"; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.reading.printed .rk { color: var(--verdigris); }
.reading .gr { font-size: 22px; margin: 6px 0 0; line-height: 1.25; }
.reading .tl { font-style: italic; color: var(--ink-2); font-size: 14px; }
.reading .gl { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.35; }
.reading .wits { margin-top: 9px; font-size: 16px; letter-spacing: .03em; line-height: 1.5; }
.reading .eds { margin-top: 9px; display: flex; gap: 5px; flex-wrap: wrap; }
.seal-printed { position: absolute; right: -8px; top: -14px; width: 50px; height: 50px; border-radius: 50%; background: var(--rubric); color: #fff8ef; display: grid; place-items: center; text-align: center; font-family: "Gentium"; font-weight: 700; font-size: 9.5px; letter-spacing: .1em; line-height: 1.05; transform: rotate(-12deg); box-shadow: 0 3px 8px rgba(120,30,10,.35), inset 0 0 0 2.5px rgba(255,255,255,.22); }
[data-theme="dark"] .seal-printed { color: #1c1813; }
.timeline { padding: 6px 18px 14px; }
.tl-axis { position: relative; height: 26px; margin-left: 168px; }
.tl-axis span { position: absolute; bottom: 5px; transform: translateX(-50%); font-family: "Inter"; font-size: 10px; color: var(--ink-3); letter-spacing: .08em; font-weight: 600; }
.tl-row { display: grid; grid-template-columns: 168px 1fr; align-items: stretch; border-top: 1px solid var(--rule); }
.tl-row .rl { font-size: 16px; padding: 10px 12px 10px 0; line-height: 1.2; }
.tl-row .rl small { display: block; font-family: "Inter"; font-size: 9.5px; color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; font-weight: 650; }
.tl-row.printed .rl small { color: var(--verdigris); }
.tl-track { position: relative; }
.tl-grid { position: absolute; top: 0; bottom: 0; border-left: 1px dashed color-mix(in srgb, var(--rule-strong) 55%, transparent); }
.wit { position: absolute; height: 8px; border-radius: 4px; transform: translateY(-50%); }
.wit.papyrus { background: var(--gold); } .wit.majuscule { background: var(--ink-2); } .wit.minuscule, .wit.family { background: var(--ink-3); opacity: .7; }
.wit.majority { background: repeating-linear-gradient(90deg, var(--ink-3) 0 5px, transparent 5px 8px); }
.wit.version { background: transparent; border: 1.5px solid var(--lapis); height: 9px; }
.wit.corrector { background: transparent; border: 1.5px dashed var(--ink-3); height: 9px; }
.wit.father { background: var(--murex); width: 10px !important; height: 10px; transform: translate(-5px, -50%) rotate(45deg); border-radius: 1.5px; }
.witlbl { position: absolute; font-size: 14px; transform: translateX(-50%); white-space: nowrap; line-height: 1; color: var(--ink); }
.witlbl.fa { font-family: "Inter"; font-size: 10px; color: var(--murex); font-weight: 600; }
.tl-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-family: "Inter"; font-size: 11px; color: var(--ink-2); align-items: center; }
.tl-legend i { display: inline-block; width: 18px; height: 8px; border-radius: 4px; margin-right: 5px; vertical-align: 0; }
.provisional { font-family: "Inter"; font-size: 10.5px; color: var(--rubric); border: 1px dashed currentColor; border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.conf { display: inline-flex; gap: 3px; align-items: center; vertical-align: 1px; }
.conf i { width: 18px; height: 6px; border-radius: 3px; background: var(--rule); }
.conf i.on { background: var(--verdigris); }
.kv { display: grid; grid-template-columns: 104px 1fr; gap: 8px 12px; font-size: 14.5px; align-items: baseline; }
.kv dt { font-family: "Inter"; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 650; }
.kv dd { margin: 0; }
.evidence { font-size: 14.5px; line-height: 1.5; }

/* ---------- echo map ---------- */
.echo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 18px; align-items: start; }
svg.graph { width: 100%; height: auto; display: block; }
.graph .edge { fill: none; stroke-linecap: round; }
.graph .node rect { fill: var(--paper); stroke: var(--rule-strong); stroke-width: 1; }
.graph .node.srcnode rect { fill: var(--ink); stroke: var(--ink); }
.graph .node.srcnode text { fill: var(--paper); font-weight: 600; }
.graph .node text { font-family: "Gentium"; font-size: 14px; fill: var(--ink); }
.graph .node.sel rect { stroke: var(--murex); stroke-width: 2.5; fill: color-mix(in srgb, var(--murex) 10%, var(--paper)); }
.graph .booklbl { font-family: "Inter"; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; fill: var(--ink-3); font-weight: 700; }
.graph .shelf { fill: color-mix(in srgb, var(--paper-2) 60%, transparent); stroke: var(--rule); }
.graph .dim { opacity: .2; }
.graph .vbadge { font-family: "Inter"; font-size: 9.5px; fill: var(--gold-ink); font-weight: 700; }
.legend-edges { display: flex; gap: 14px; flex-wrap: wrap; font-family: "Inter"; font-size: 11.5px; color: var(--ink-2); align-items: center; }
.legend-edges span { display: inline-flex; align-items: center; gap: 6px; }
.legend-edges i { width: 22px; height: 3px; border-radius: 2px; display: inline-block; }
.hebblock { font-size: 25px; line-height: 1.9; text-align: right; padding: 4px 0 2px; }
.numrow { display: flex; gap: 6px; flex-wrap: wrap; }
.numcell { font-family: "Inter"; font-size: 11.5px; border: 1px solid var(--rule); border-radius: 7px; padding: 3px 8px; background: var(--paper-2); white-space: nowrap; }
.numcell b { font-weight: 700; color: var(--ink-3); letter-spacing: .06em; font-size: 9.5px; margin-right: 5px; }
.numcell.diff { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--paper)); }
.numcell.unres { border-style: dashed; color: var(--ink-3); }
.xlink { padding: 10px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.xlink:first-child { border-top: 0; padding-top: 0; }
.xlink .h { display: flex; gap: 8px; align-items: center; font-family: "Inter"; font-size: 11.5px; color: var(--ink-2); margin-bottom: 4px; }

/* ---------- dashboard ---------- */
.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.kpi { padding: 15px 18px 16px; }
.kpi .n { font-size: 42px; font-weight: 600; line-height: 1; margin: 10px 0 6px; font-variant-numeric: lining-nums; }
.kpi .n small { font-size: 18px; color: var(--ink-3); font-weight: 400; }
.kpi .d { font-family: "Inter"; font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }
.bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--rule); min-width: 120px; }
.bar i { display: block; height: 100%; }
.bar .a { background: var(--verdigris); } .bar .r { background: var(--gold); } .bar .dr { background: repeating-linear-gradient(-45deg, var(--rubric) 0 3px, color-mix(in srgb, var(--rubric) 50%, transparent) 3px 6px); }
table.t { width: 100%; border-collapse: collapse; font-family: "Inter"; font-size: 12px; }
table.t th { text-align: left; font-weight: 700; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 7px 10px; border-bottom: 1px solid var(--rule-strong); }
table.t td { padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; color: var(--ink); }
table.t tr:last-child td { border-bottom: 0; }
table.t td.serif { font-family: "Gentium"; font-size: 14.5px; }
table.t .num { text-align: right; font-variant-numeric: tabular-nums; }
.ok { color: var(--verdigris); font-weight: 700; }
.issues { list-style: none; padding: 0; margin: 0; }
.issues li { padding: 9px 0; border-top: 1px solid var(--rule); font-size: 14.5px; display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: baseline; }
.issues li:first-child { border-top: 0; padding-top: 0; }
.issues .src { font-family: "Inter"; font-size: 10.5px; color: var(--ink-3); }
.sev { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--gold); }
.sev.hi { background: var(--rubric); } .sev.lo { background: var(--rule-strong); }

/* ---------- study ---------- */
.study-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; align-items: start; }
.qgroup h5 { font-family: "Inter"; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 4px; display: flex; gap: 10px; align-items: center; font-weight: 700; }
.qgroup h5::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.q { display: grid; grid-template-columns: 30px 1fr; gap: 2px 8px; padding: 12px 0; border-bottom: 1px dashed var(--rule); font-size: 16px; }
.q:last-child { border-bottom: 0; }
.q .qn { font-family: "Inter"; font-weight: 700; color: var(--rubric); font-size: 12.5px; padding-top: 4px; }
.q .refs { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.refchip { font-family: "Inter"; font-size: 11px; color: var(--lapis); border: 1px solid color-mix(in srgb, var(--lapis) 35%, transparent); border-radius: 6px; padding: 0 7px; text-decoration: none; line-height: 1.7; }
.leader { margin-top: 9px; border-radius: 10px; padding: 10px 12px; background: var(--paper-2); border: 1px solid var(--rule); font-size: 14.5px; }
.leader.hidden { background: transparent; border-style: dashed; color: var(--ink-3); font-family: "Inter"; font-size: 11.5px; display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; }
.leader .lh { font-family: "Inter"; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.recs { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.outline { border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-2); padding: 10px 14px; margin: 14px 0 4px; }
.outline summary { font-family: "Inter"; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; cursor: pointer; }
.outline ol { margin: 8px 0 2px; padding-left: 20px; font-size: 15px; }
.outline a { color: var(--lapis); text-decoration: none; font-family: "Inter"; font-size: 11.5px; margin-left: 6px; }
.sessions { display: flex; gap: 8px; margin-bottom: 4px; }
.sessions button { font-family: "Inter"; font-size: 12px; border: 1px solid var(--rule-strong); border-radius: 9px; background: transparent; padding: 6px 12px; color: var(--ink-2); cursor: pointer; text-align: left; }
.sessions button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.passage-panel .text { font-size: 17.5px; line-height: 1.65; }

/* ---------- mobile ---------- */
.tabbar, .sheet { display: none; }
@media (max-width: 760px) {
  body { font-size: 16px; }
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .rail, .search, .topbar .toggle, .hide-m { display: none !important; }
  .topbar { padding: 0 12px 0 0; gap: 8px; }
  .brand { width: 52px; border: 0; }
  .crumbs .t { font-size: 17px; } .crumbs .t .app-name { display: none; }
  .devbanner { grid-column: 1; padding: 6px 16px; font-size: 11px; }
  .main { grid-column: 1; }
  .reader { grid-template-columns: minmax(0, 1fr); }
  .page { padding: 4px 20px 340px; }
  .page h2 { font-size: 28px; }
  .text { font-size: 19px; }
  .greekline { font-size: 17.5px; }
  .margin, .keybox, .page .sub, .page .eyebrow { display: none; }
  .devbanner span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sheet .pop dl { grid-template-columns: 70px 1fr; }
  .sheet .pop .lemma { font-size: 26px; }
  .layers.mob { overflow-x: auto; flex-wrap: nowrap; margin: 0 -20px; padding: 10px 20px 2px; }
  .sheet { display: block; position: fixed; left: 0; right: 0; bottom: 66px; background: var(--paper); border-top: 1px solid var(--rule-strong); border-radius: 18px 18px 0 0; box-shadow: 0 -18px 40px -12px rgba(0,0,0,.55); padding: 8px 18px 14px; z-index: 40; }
  .sheet .grab { width: 38px; height: 5px; border-radius: 3px; background: var(--rule-strong); margin: 0 auto 10px; }
  .tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 66px; justify-content: space-around; align-items: flex-start; padding-top: 8px; border-top: 1px solid var(--rule); background: var(--paper); z-index: 50; }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: "Inter"; font-size: 10px; color: var(--ink-3); text-decoration: none; min-width: 48px; min-height: 44px; }
  .tabbar a[aria-current="page"] { color: var(--rubric); }
}
@media print {
  .rail, .topbar, .devbanner, .layers, .leader, .margin, .tabbar, .sheet, .no-print { display: none !important; }
  .app { display: block; } body { background: #fff; color: #000; }
  .study-grid { display: block; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ======================= AISBT Reader (server-rendered) additions ======================= */
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--paper); color: var(--ink); padding: 8px 12px; border-radius: 8px; border: 2px solid var(--focus); }
.skip:focus { left: 8px; }
.main:focus { outline: none; }
.muted { color: var(--ink-3); } .small { font-size: 12.5px; } .tight { padding: 4px 8px 8px !important; }
.app { grid-template-rows: 58px auto 1fr auto; }
.brand { color: inherit; }
.crumbs .t .ttl-txt { color: var(--ink); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--ink); outline: none; }
.search input::placeholder { color: var(--ink-3); opacity: 1; }
.search:focus-within { outline: 2.5px solid var(--focus); outline-offset: 1px; }
a.toggle, a.layer, a.iconbtn { text-decoration: none; }
.toggle[aria-checked="true"] .sw { background: var(--rubric); }
.toggle[aria-checked="true"] .sw::after { left: 14px; }
.sitefoot { grid-column: 2; font-family: "Inter"; font-size: 11px; color: var(--ink-3); padding: 14px 32px 22px; border-top: 1px solid var(--rule); line-height: 1.6; }
.sitefoot a { color: var(--lapis); }
h1, .h4 { margin: 0; }
.page h1 { font-size: 36px; font-weight: 600; margin: 4px 0 2px; letter-spacing: -.005em; line-height: 1.1; }
.view-head h1 { font-size: 32px; font-weight: 600; margin: 4px 0 0; line-height: 1.12; }
.view-head h1 .unit { font-weight: 400; color: var(--ink-2); }
.view-head h1 .tl { font-weight: 400; color: var(--ink-2); }
.panel > .ph .h4, h2.h4 { margin: 0; font-family: "Inter"; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
h2.eyebrow { margin: 0; }
h2.sechead { font-size: 10.5px; }
.margin-head h2.ref { margin: 0; font-size: 21px; font-weight: 600; }
.chapnav { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; font-family: "Inter"; font-size: 12px; }
.chapnav a { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); text-decoration: none; border: 1px solid var(--rule); border-radius: 8px; padding: 3px 9px; min-height: 28px; }
.chapnav a[aria-current="page"] { border-color: var(--ink-2); color: var(--ink); font-weight: 600; }
.v a.vn { text-decoration: none; padding: 2px 2px; border-radius: 3px; }
.v a.vn:hover { background: color-mix(in srgb, var(--rubric) 12%, transparent); }
.absent { color: var(--ink-3); font-style: italic; font-size: .85em; }
.numtag { font-family: "Inter"; font-size: 11px; color: var(--gold-ink); font-weight: 600; }
a.gw, a.tok { color: inherit; text-decoration: none; }
a.gw:hover { background: color-mix(in srgb, var(--lapis) 10%, transparent); }
.hebline { display: block; font-family: "Ezra SIL", serif; font-size: 22px; line-height: 1.9; color: var(--ink-2); margin: 3px 0 12px; padding-right: 14px; border-right: 2px solid var(--rule); text-align: right; unicode-bidi: isolate; }
.pop { font-family: "Gentium"; }
.inline-pop { position: relative; display: block; margin: 4px 0 18px; width: min(100%, 400px); }
.inline-pop::before { left: 40px; }
.pop.floating { position: absolute; }
.pop .formgk { font-family: Gentium; font-size: 15px; color: var(--ink); }
.pop-close { position: absolute; right: 10px; top: 8px; font-family: Inter; font-size: 20px; color: var(--ink-3); text-decoration: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; }
.pop-close:hover { background: var(--paper-2); }
.pop .lnk.is-draft, .is-draft { text-decoration: line-through dashed color-mix(in srgb, var(--rubric) 60%, transparent); }
.card .ttl a, .relnote a, .hit, .comm-nav a { color: inherit; text-decoration: none; }
.card .ttl a:hover, .relnote a:hover { text-decoration: underline; text-decoration-color: var(--rule-strong); }
.card .refs-lbl { font-family: "Inter"; font-size: 10px; color: var(--ink-3); letter-spacing: .04em; }
.seal.mini { width: 9px; height: 9px; border-width: 1.5px; }
.more { display: block; text-decoration: none; }
.card.study { --tc: var(--gold); }
.echo-list a { color: var(--murex); text-decoration: none; }
.margin .echo-list { font-size: 14.5px; }
.empty { font-family: "Inter"; font-size: 13px; color: var(--ink-3); }
.recid { color: var(--lapis); font-family: "Inter"; font-size: .78em; text-decoration: none; border-bottom: 1px dotted currentColor; word-break: break-all; }
.seg a { border: 0; background: transparent; padding: 6px 12px; color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.seg a[aria-current] { background: var(--ink); color: var(--paper); }
.seg a + a { border-left: 1px solid var(--rule-strong); }
.chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.chip.alt { border-color: var(--rubric); color: var(--rubric); }
.tl-panel { margin-top: 18px; }
.tl-legend .dia { background: var(--murex); width: 9px; height: 9px; transform: rotate(45deg); border-radius: 1px; }
.big { font-size: 18px; }
.lens-grid aside .panel + .panel { margin-top: 16px; }
.echo-grid aside .panel + .panel { margin-top: 14px; }
.echo-ctl { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.graph-wrap { padding: 8px 10px 4px !important; }
.graph a.node { cursor: pointer; }
.graph a.node:focus { outline: none; }
.graph a.node:focus rect { stroke: var(--focus); stroke-width: 2.5; }
.graph .edge.draft { stroke-dasharray: 5 4; }
.lbl.gold { color: var(--gold-ink); }
.echo-list { display: none; }
.echo-list ul, .ob-list { list-style: none; margin: 4px 0 12px; padding: 0; font-size: 14.5px; }
.echo-list li, .ob-list li { padding: 6px 0; border-bottom: 1px solid var(--rule); }
.echo-list .lxx, .lxx { font-family: Inter; font-size: 10.5px; color: var(--gold-ink); font-weight: 700; }
.ob { border-top: 1px solid var(--rule); margin-top: 8px; padding-top: 8px; }
.bsb { font-size: 16px; line-height: 1.5; margin-bottom: 8px; }
.srcline { font-family: Inter; font-size: 10.5px; color: var(--ink-3); margin: 6px 0 12px; }
.swatch { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.xlink.drafted { padding-left: 8px; }
.relnote { font-size: 14px; margin-bottom: 5px; display: flex; gap: 8px; align-items: baseline; }
.dash .span3 { grid-column: span 3; } .dash .span5 { grid-column: span 5; } .dash .span7 { grid-column: span 7; } .dash .span12 { grid-column: span 12; }
.pb.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pb.two .lbl { padding: 8px 10px 2px; margin: 0; }
.more-src { grid-column: 1 / -1; justify-self: start; margin: 4px 10px; }
.hatch { background: repeating-linear-gradient(-45deg, var(--rubric) 0 3px, color-mix(in srgb, var(--rubric) 50%, transparent) 3px 6px); height: 8px !important; }
.barcell { width: 34%; }
.comm-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 30px; align-items: start; }
.comm-nav { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.comm-nav ol { list-style: none; margin: 10px 0 0; padding: 0; }
.comm-nav li a { display: block; font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--rule); line-height: 1.3; }
.comm-nav li a:hover { color: var(--rubric); }
.comm { padding: 30px 48px; max-width: 800px; }
.comm h1 { font-size: 34px; margin: 6px 0 14px; line-height: 1.15; font-weight: 600; }
.comm-sec h2 { font-size: 22px; font-weight: 600; margin: 28px 0 8px; color: var(--rubric); scroll-margin-top: 16px; }
.comm .md { font-size: 18.5px; line-height: 1.7; }
.srcs { margin-top: 24px; align-items: center; }
.sense { margin-bottom: 6px; } .seealso { font-size: 13.5px; margin-bottom: 4px; }
.panel h3.lbl, .pb > h3.lbl, .pb h2.lbl { margin: 14px 0 6px; }
.refform { display: flex; gap: 6px; align-items: center; font-family: Inter; font-size: 13px; }
.refform input, .searchform input { font: inherit; padding: 6px 10px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--paper); color: var(--ink); min-height: 34px; }
.refform button, .searchform button { font-family: Inter; font-size: 13px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; min-height: 34px; }
.searchform { display: flex; gap: 8px; margin-bottom: 14px; } .searchform input { flex: 1; }
.exnav { margin: 0 0 14px; }
.refchip[aria-current] { background: var(--lapis); color: var(--paper); }
table.t th[scope="row"] { font-weight: 400; text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--rule); }
table.t th[scope="row"] a { color: var(--ink); }
.view.narrow { max-width: 860px; }
.note-full h1 { font-size: 28px; margin: 6px 0 12px; line-height: 1.2; font-weight: 600; }
.note-full .body { font-size: 17px; line-height: 1.65; margin-bottom: 12px; }
.note-full .claims { margin: 6px 0 12px; }
.cits { padding-left: 0; list-style: none; font-size: 14px; } .cits li { margin-bottom: 4px; }
.study-ctl { display: flex; gap: 10px; align-items: center; }
.banner { padding: 10px 16px; margin-bottom: 16px; border-radius: 12px; }
.sessions a { font-family: "Inter"; font-size: 12px; border: 1px solid var(--rule-strong); border-radius: 9px; padding: 6px 12px; color: var(--ink-2); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.sessions a[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sessions { flex-wrap: wrap; margin-bottom: 14px; }
.qpanel { overflow: visible; }
.sesh { font-size: 24px; margin: 4px 0 8px; font-weight: 600; }
.aim { font-size: 16px; color: var(--ink-2); } .aim p { display: inline; }
.qgroup h3 { font-family: "Inter"; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 4px; display: flex; gap: 10px; align-items: center; font-weight: 700; }
.qgroup h3::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.q { scroll-margin-top: 20px; }
.hide-link { display: inline-block; margin-top: 8px; }
.sticky { position: sticky; top: 16px; }
.sticky .keybox { margin-top: 14px; }
.hit { display: flex; gap: 8px; align-items: baseline; padding: 8px 10px; border-radius: 8px; font-size: 14.5px; flex-wrap: wrap; position: relative; }
.hit:hover, .hit[aria-selected="true"] { background: var(--paper-2); outline: 1px solid var(--rule); }
.sgroup + .sgroup { margin-top: 10px; }
.sgroup h3.lbl { margin: 4px 10px; }
/* Cmd-K palette */
dialog.palette { width: min(640px, calc(100vw - 24px)); max-height: 70vh; padding: 0; border: 1px solid var(--rule-strong); border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); margin-top: 10vh; }
dialog.palette::backdrop { background: rgba(20,14,6,.35); }
.pal-form input { width: 100%; font: inherit; font-size: 18px; border: 0; border-bottom: 1px solid var(--rule); padding: 14px 18px; background: transparent; color: var(--ink); outline: none; }
.pal-res { max-height: 50vh; overflow: auto; padding: 8px; }
.pal-foot { font-family: Inter; font-size: 11px; color: var(--ink-3); padding: 8px 14px; border-top: 1px solid var(--rule); }
/* sheet (phone word card) */
.sheet { display: none; }
@media (max-width: 760px) {
  .app { grid-template-rows: auto auto 1fr auto; }
  .sitefoot { grid-column: 1; padding: 12px 18px 90px; }
  .topbar { height: 52px; padding-top: env(safe-area-inset-top); }
  .page { padding: 4px 20px 30px; }
  .page h1 { font-size: 28px; }
  .layers { overflow-x: auto; flex-wrap: nowrap; margin: 0 -20px; padding: 10px 20px 2px; scrollbar-width: none; }
  .layer, .chapnav a { min-height: 36px; }
  .margin { display: block; border-left: 0; border-top: 1px solid var(--rule); padding: 16px 20px 20px; }
  .margin .card:not(:first-of-type) .claims { display: none; }
  .keybox { display: flex; gap: 10px; padding: 8px 10px; } .keybox .k span:not(.seal):not(.rl) { font-size: 11px; }
  .keybox .rl { display: none; }
  .chapnav { display: none; }
  .crumbs .t .app-name { display: none; }
  .inline-pop { display: none; }
  .sheet { display: block; position: fixed; left: 0; right: 0; bottom: calc(66px + env(safe-area-inset-bottom)); max-height: 62vh; overflow: auto; }
  .sheet .pop { position: static; width: auto; box-shadow: none; border: 0; padding: 0; }
  .sheet .pop::before { display: none; }
  .tabbar { padding-bottom: env(safe-area-inset-bottom); height: calc(66px + env(safe-area-inset-bottom)); }
  .tabbar a { min-width: 56px; }
  .view { padding: 16px 16px 30px; }
  .view-head { flex-direction: column; align-items: flex-start; }
  .lens-grid, .echo-grid, .study-grid, .comm-grid { grid-template-columns: minmax(0, 1fr); }
  .readings { grid-template-columns: minmax(0, 1fr); }
  .dash { grid-template-columns: minmax(0, 1fr); }
  .dash > .panel { grid-column: 1 / -1 !important; }
  .pb.two { grid-template-columns: minmax(0, 1fr); }
  svg.graph { display: none; }
  .echo-list { display: block; }
  .echo-ctl { align-items: flex-start; }
  .comm-nav { position: static; max-height: none; }
  .comm { padding: 20px 18px; }
  .comm .md { font-size: 17.5px; }
  .tl-axis { display: none; }
  .tl-row { grid-template-columns: minmax(0, 1fr); }
  .tl-track { height: auto !important; display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 0 0 10px; }
  .tl-track .tl-grid, .tl-track .wit { display: none; }
  .tl-track .witlbl { position: static; transform: none; }
  .sticky { position: static; }
  .sessions a, .seg a { min-height: 44px; }
  .study-ctl { flex-wrap: wrap; }
  .hide-m { display: none !important; }
  .search { display: none !important; }
  .topbar .toggle { display: inline-flex !important; font-size: 11px; padding: 6px 4px; }
  table.t { font-size: 11px; }
  .barcell { width: 30%; }
}
@media print { .sitefoot, .palette { display: none !important; } }

.topbar { position: sticky; top: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 20; }
.rail { position: sticky; top: 58px; align-self: start; height: calc(100vh - 58px); }
.v, .sechead, .comm-sec, .q, .inline-pop { scroll-margin-top: 80px; }
.pop .hd { padding-right: 36px; }
.v a.dropwrap { text-decoration: none; color: var(--rubric); font: inherit; vertical-align: baseline; margin: 0; padding: 0; }
.v a.dropwrap .dropcap { font-family: "Gentium", serif; font-weight: 600; }
.v a.dropwrap:hover { background: none; }
@media (max-width: 760px) { .rail { position: static; height: auto; } .v, .sechead { scroll-margin-top: 64px; } .sheet .pop .hd { padding-right: 40px; } }
@media print { .topbar { position: static; } }

/* ---- book & chapter picker (multi-package) ---- */
.chapnav a.picker { font-weight: 600; color: var(--ink); }
.chapnav a.pkg { border-color: var(--verdigris); }
.bookcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; }
.booklist { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 18px; font-family: "Inter"; font-size: 13px; }
.booklist li { break-inside: avoid; padding: 3px 0; }
.booklist li a { color: var(--ink); text-decoration: none; }
.booklist li a:hover, .booklist li a:focus-visible { text-decoration: underline; }
.booklist li.cur a { font-weight: 700; color: var(--rubric); }
.booklist li.haspkg a { font-weight: 600; }
.pkgchip { border-color: var(--verdigris); color: var(--verdigris); font-size: 10px; }
.chapgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin: 14px 0; max-width: 760px; }
.chapgrid a { display: flex; align-items: center; justify-content: center; min-height: 40px; border: 1px solid var(--rule); border-radius: 8px; font-family: "Inter"; font-size: 13px; color: var(--ink); text-decoration: none; }
.chapgrid a.haspkg { border-color: var(--verdigris); box-shadow: inset 0 -3px 0 var(--verdigris); font-weight: 600; }
.chapgrid a:hover, .chapgrid a:focus-visible { background: var(--paper-2, rgba(0,0,0,.04)); }
.pkglist ul { list-style: none; margin: 0; padding: 0; font-family: "Inter"; font-size: 13px; }
.pkglist li { padding: 3px 0; }
.draftlist { list-style: none; margin: 6px 0 0; padding: 0; font-family: "Inter"; font-size: 12px; }
.draftlist li { padding: 4px 6px; margin-bottom: 3px; border-radius: 6px; }
.pkgstack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pkgstack > .panel { margin: 0; }

/* ---------- iPhone / iPad (2026-10-29): safe areas, 44px touch targets, phone sheets, margin drawer ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.m-only { display: none !important; }
.app { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.md, .claims, .card .ttl, .sub, .comm, .note-full, .q, .panel { overflow-wrap: break-word; }
.panel, .card, .view, .page, .margin { min-width: 0; }
table.t { max-width: 100%; }
.pb.tight { overflow-x: auto; }
.notes-view .notes-verse { margin: 18px 0; scroll-margin-top: 80px; }
.notes-view .notes-verse.focus > h2 a { color: var(--rubric); }
.notes-view .notes-verse > h2 { margin: 0 0 8px; }
.notes-view .notes-verse > h2 a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.notes-view .card { margin-bottom: 10px; }
.notes-chapnav { margin: 6px 0 0; }

/* phone sheets (popover: tap outside or Esc closes; no JS needed) */
.msheet { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; max-height: min(82vh, 640px); overflow: auto;
  border: 0; border-top: 1px solid var(--rule-strong); border-radius: 18px 18px 0 0; background: var(--paper); color: var(--ink);
  box-shadow: 0 -18px 40px -12px rgba(0,0,0,.55); padding: 8px max(18px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
.msheet:not(:popover-open) { display: none; }
.msheet::backdrop { background: rgba(20,14,6,.35); }
.msheet .grab { width: 38px; height: 5px; border-radius: 3px; background: var(--rule-strong); margin: 0 auto 6px; }
.msheet-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.msheet-hd h2 { margin: 0; font-size: 21px; font-weight: 600; }
.msheet-x, .sheet-x { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--rule); border-radius: 50%; background: var(--paper); color: var(--ink-2); font-size: 22px; line-height: 1; cursor: pointer; text-decoration: none; flex: none; }
.msheet-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 6px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-family: "Inter"; font-size: 15px; }
.msheet-row[aria-current="page"] { color: var(--rubric); font-weight: 600; }
.msheet-row .sw { width: 34px; height: 20px; border-radius: 10px; background: var(--rule-strong); position: relative; flex: none; }
.msheet-row .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); }
.msheet-row[aria-checked="true"] .sw { background: var(--rubric); }
.msheet-row[aria-checked="true"] .sw::after { left: 16px; }
.msheet .mchap { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); margin: 10px 0 6px; }
.msheet .mchap a { min-height: 48px; font-size: 15px; }
.chapgrid a[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.msearch { display: flex; gap: 8px; margin: 10px 0 4px; }
.msearch input { flex: 1; min-width: 0; min-height: 48px; font: inherit; font-size: 16px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--paper); color: var(--ink); }
.msearch button { width: 48px; min-height: 48px; border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--paper-2); display: grid; place-items: center; cursor: pointer; }
.msheet-prefs { margin-top: 8px; }

/* touch sizing for phones and iPads (portrait and landscape) */
@media (max-width: 1180px), (pointer: coarse) {
  .iconbtn { width: 44px; height: 44px; }
  .topbar .toggle { min-height: 44px; }
  .layer, .chapnav a, .refchip, .seg a, .sessions a, .sessions button, .study-ctl a, .echo-ctl a, .edtabs a, .lens a.refchip, .more { min-height: 44px; display: inline-flex; align-items: center; }
  .chapgrid a { min-height: 44px; }
  .comm-nav li a { display: flex; align-items: center; min-height: 44px; }
  .booklist li a { display: inline-flex; align-items: center; min-height: 44px; }
  .card .ttl a, .relnote a, .draftlist a, .issues a, .kpi .d a, .pkgpanel h2 a, .notes-verse h2 a, .more-src { display: inline-flex; align-items: center; min-height: 44px; }
  /* verse numbers and Greek words are inline text targets; give them a tall hit area without moving the line */
  .v a.vn, a.gw { padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px; }
  .pop-close { width: 44px; height: 44px; }
}

/* narrow tablets and phones: the margin becomes a bottom drawer opened from the verse or the Margin button */
@media (max-width: 1023px) {
  .reader { grid-template-columns: minmax(0, 1fr) !important; }
  .m-only { display: inline-flex !important; }
  .reader .margin { display: block !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 78vh; overflow: auto;
    background: var(--paper); border: 0; border-top: 1px solid var(--rule-strong); border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 40px -12px rgba(0,0,0,.55); padding: 14px max(20px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    transform: translateY(105%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
  .reader .margin.open, .reader .margin:target { transform: none; visibility: visible; transition: transform .2s ease; }
  .reader .margin .margin-head { align-items: center; gap: 10px; }
  .reader .margin .margin-head .lbl { margin-left: auto; }
  .margin-fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 45;
    align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 24px; border: 1px solid var(--rule-strong);
    background: var(--paper); color: var(--ink); box-shadow: var(--shadow); font-family: "Inter"; font-size: 14px; text-decoration: none; }
  .margin-fab .fab-n { min-width: 22px; height: 22px; border-radius: 11px; background: var(--rubric); color: var(--paper); display: inline-grid; place-items: center; font-size: 12px; padding: 0 6px; }
  body.margin-open .margin-fab { visibility: hidden; }
  .comm-grid, .lens-grid, .echo-grid, .study-grid { grid-template-columns: minmax(0, 1fr); }
  .comm-nav { position: static; max-height: none; }
  .page { padding-bottom: 96px; }
}

/* phones: bottom bar with the passage picker in the thumb zone */
@media (max-width: 760px) {
  .topbar { height: calc(52px + env(safe-area-inset-top)); }
  .topbar .toggle { display: none !important; }        /* moved to the More sheet */
  .tabbar { display: flex; align-items: stretch; justify-content: space-between; height: calc(64px + env(safe-area-inset-bottom)); padding: 4px max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left)); }
  .tabbar a, .tabbar button { flex: 1 1 0; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: none; font-family: "Inter"; font-size: 11px; color: var(--ink-3); text-decoration: none; padding: 0; cursor: pointer; }
  .tabbar [aria-current="page"] { color: var(--rubric); }
  .tabbar .tab-passage { flex: 1.5 1 0; }
  .tab-passage .pp { font-family: "Gentium", serif; font-weight: 600; font-size: 15px; color: var(--rubric); border: 1px solid var(--rule-strong); border-radius: 999px; padding: 4px 10px; background: var(--paper-2); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .tab-passage .pl { font-size: 10px; }
  .margin-fab { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .reader .margin { bottom: calc(64px + env(safe-area-inset-bottom)); max-height: 70vh; padding-bottom: 20px; }
  .sheet { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .sitefoot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .page { padding-bottom: 150px; }
  .text { font-size: 19px; line-height: 1.7; }
  .chapnav { display: none; }
}
/* touch round 2: every remaining control at 44x44 on phones and iPads */
.seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg a { flex: none; }
@media (max-width: 1180px), (pointer: coarse) {
  .search { height: 46px; } .search input { height: 44px; }
  .seg a, .refchip, .chapnav a, .layer, .more, .booklist li a, .echo-list a, .ob-list a { min-height: 44px; min-width: 44px; justify-content: center; }
  .seg a { min-height: 44px; }
  .booklist li a { min-width: 44px; }
  .pkglist li a, .outline li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .outline summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
  .refform input, .refform button, .searchform input, .searchform button { min-height: 44px; font-size: 16px; }
  .refform button, .searchform button { min-width: 44px; }
  .echo-list { display: block; margin-top: 14px; }
  .echo-list li a { display: inline-flex; align-items: center; }
  /* the map stays as the overview; on touch screens its nodes are too small to tap, so the 44px list below it
     carries the same links */
  svg.graph a.node { pointer-events: none; }
}
.layers .layer { flex: none; }
.refform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; }
.refform input { flex: 1 1 140px; min-width: 0; }
.comm-toc > summary { list-style: none; cursor: default; }
.comm-toc > summary::-webkit-details-marker { display: none; }
@media (max-width: 1023px) {
  .comm-toc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--paper); }
  .comm-toc > summary::after { content: "▾"; font-size: 14px; color: var(--ink-3); }
  .comm-toc[open] > summary::after { content: "▴"; }
  .comm-nav { margin-bottom: 12px; }
}
@media (max-width: 1180px), (pointer: coarse) { .comm-toc > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; } }

/* tablets (iPad portrait 820 and landscape 1180): the passage title always shows in full. The title sets the
   crumbs' width and never shrinks below one word (it wraps rather than clipping); the subtitle takes the title's
   width plus any free space and ellipsises; the search box gives up the room (down to 150px, placeholder ellipsised). */
@media (min-width: 761px) and (max-width: 1180px) {
  .crumbs { flex: 1 1 auto; min-width: auto; }
  .crumbs .t { white-space: normal; overflow-wrap: break-word; }
  .crumbs .s { width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .search { margin-left: 4px; flex: 1 1 220px; min-width: 150px; max-width: 420px; }
  .search input { text-overflow: ellipsis; }
  .topbar .spacer { flex: 0 1 0; }
}
@media (min-width: 761px) and (max-width: 1023px) {
  .crumbs .t .app-name { display: none; }
  .search kbd { display: none; }
  .search { flex: 0 1 220px; }            /* the header text gets the free space first */
}
/* phones: same rule, no search box; a long title wraps instead of being clipped, the subtitle ellipsises */
@media (max-width: 760px) {
  .crumbs .t { white-space: normal; overflow-wrap: break-word; }
  .crumbs .s { overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- reading layers (2026-10-30) ----------
   static/js/layers.js sets html.l-<layer> in <head> before first paint (the visitor's remembered set; none on a first
   visit). The server renders every layer's content; these rules show only the visitor's set. With JS on, the toolbar
   state comes from the html classes too (a server aria-pressed from a stale ?layers= never wins). */
html:not(.l-notes) .markers, html:not(.l-variants) .mk.textual, html:not(.l-echoes) .mk.xref,
html:not(.l-numbering) .numtag, html:not(.l-interlinear) .ilin,
html:not(.l-greek) .greekline, html.l-interlinear .greekline,
html:not(.l-greek):not(.l-interlinear) .hebline, html.l-greek:not(.l-interlinear):not(.l-allgreek) .hebline:not(.f) { display: none; }
html:not(.l-variants) .gw.var { text-decoration: none; }
html[data-layers]:not(.l-greek) .layer[data-layer="greek"], html[data-layers]:not(.l-interlinear) .layer[data-layer="interlinear"],
html[data-layers]:not(.l-notes) .layer[data-layer="notes"], html[data-layers]:not(.l-variants) .layer[data-layer="variants"],
html[data-layers]:not(.l-echoes) .layer[data-layer="echoes"], html[data-layers]:not(.l-numbering) .layer[data-layer="numbering"] { background: transparent; color: var(--ink-2); border-color: var(--rule-strong); }

/* ---------- margin panel preference (2026-10-30) ----------
   Wide screens: the docked margin is collapsed on a first visit; html.m-open (static/js/layers.js, from localStorage,
   before first paint) opens it. html.js means that script ran: without JS the margin shows as it always did.
   Narrow screens keep the bottom drawer (closed until a verse or the Margin button opens it). */
.pagebar { display: flex; align-items: center; gap: 10px; }
.pagebar .layers { flex: 1 1 auto; min-width: 0; }
.margin-toggle { display: none; flex: none; font-family: "Inter"; font-size: 12px; padding: 4px 10px 4px 11px; border-radius: 999px; border: 1px solid var(--rule-strong); color: var(--ink-2); background: transparent; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.margin-toggle:hover { border-color: var(--ink-3); color: var(--ink); }
.margin-toggle:focus-visible { outline: 2px solid var(--rubric); outline-offset: 2px; }
.margin-toggle .mt-ref { color: var(--ink-3); }
.margin-toggle .mt-n { min-width: 18px; height: 18px; border-radius: 9px; background: var(--rubric); color: var(--paper); display: inline-grid; place-items: center; font-size: 11px; padding: 0 5px; }
.margin-toggle .mt-chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(135deg); margin-left: 2px; }
html.m-open .margin-toggle { background: var(--ink); color: var(--paper); border-color: var(--ink); }
html.m-open .margin-toggle .mt-ref { color: inherit; opacity: .8; }
html.m-open .margin-toggle .mt-chev { transform: rotate(-45deg); }
@media (min-width: 1024px) {
  html.js .margin-toggle { display: inline-flex; }
  html.js:not(.m-open) .reader { grid-template-columns: minmax(0, 1fr); }
  html.js:not(.m-open) .reader .margin { display: none; }
}
/* intro line under the heading: true for whatever Greek/Hebrew layers are on */
.page .sub .sub-l { display: none; }
html.l-greek:not(.l-interlinear):not(.l-allgreek) .page .sub .sub-focus,
html.l-greek.l-allgreek:not(.l-interlinear) .page .sub .sub-every { display: inline; }
html.l-interlinear .page .sub .sub-ilin { display: inline; }
html.l-interlinear .page .sub.ot .sub-every { display: inline; }

/* ---------- desktop toolbar on one line (2026-10-30) ----------
   Short visible layer labels (the full name stays in aria-label and title); tighter spacing; with the margin open on
   narrower desktops the "Layers" caption and the verse in the Margin button are dropped (the toolbar keeps its
   aria-label; the button still reads "Margin, N notes"), and at 1024-1279 the margin is 350px and the colour dots go. */
@media (min-width: 1024px) {
  .pagebar { gap: 8px; }
  .pagebar .layers { gap: 5px; }
  .pagebar .layer { padding: 4px 9px 4px 8px; gap: 6px; }
  .margin-toggle { padding: 4px 9px 4px 10px; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  html.m-open .margin-toggle .mt-ref, html.m-open .pagebar .layers .lbl { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  html.m-open .reader { grid-template-columns: minmax(0, 1fr) 350px; }
  html.m-open .page { padding-left: 32px; padding-right: 24px; }
  html.m-open .pagebar .layer .dot { display: none; }
}

/* ---------- chapter navigation on one line (2026-10-30) ----------
   Only where it is tight (1024-1279px with the margin open): shorter visible labels (book abbreviation, "Ch.",
   package without the book, which the book button beside it already names) and tighter spacing. Every link keeps its
   full accessible name (aria-label) and a title. Phones hide this row as before. */
.chapnav .cn-short { display: none; }
@media (min-width: 1024px) and (max-width: 1279px) {
  html.m-open .chapnav { gap: 4px; }
  html.m-open .chapnav a { padding: 3px 7px; gap: 3px; }
  html.m-open .chapnav .cn-long { display: none; }
  html.m-open .chapnav .cn-short { display: inline; }
}