/* Bible Loom layout, built for phones. Colours, fonts and shapes come from theme.css variables.
   The screen is split: the Bible text on top (left on wide screens), the hub for everything else below (right).
   The split layout itself is at the end of this file (from Atelier's design, design/layout.css). */
* { box-sizing: border-box; }
/* no scrollbars anywhere: everything still scrolls by touch, wheel and keys */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
body { overflow: hidden; }
a { color: var(--accent); text-decoration: none; }
a[data-r] { cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 2px; }
button { font: inherit; color: inherit; -webkit-user-select: none; user-select: none; }
svg { flex: none; }
h1, h2, h3, h4 { font-weight: var(--weight-heading); letter-spacing: var(--track-heading); line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: 1.85rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; margin-top: 1.1em; }
h4 { font-size: .95rem; margin-top: 1em; }
p { margin: 0 0 .7em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.hidden { display: none !important; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; z-index: 99; background: var(--surface); padding: 8px 12px; border-radius: var(--r-item); }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- page titles, cards, lists ---------- */
.big { margin: 10px 0 14px; }
.big h1 { margin-bottom: 4px; font-size: 1.6rem; }
.big p { margin: 0; }
.card {
  display: block; background: var(--panel); color: var(--text);
  border: 1px solid var(--edge); border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: 16px; margin: 0 0 12px;
}
a.card:active { transform: scale(.985); }
.card.error { border-color: var(--accent2); }
/* "Update ready" popup (js/app.js offerUpdate) */
.update-pop {
  position: fixed; z-index: 60; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); translate: -50% 0;
  width: min(420px, calc(100vw - 24px)); margin: 0; padding: 18px 18px 14px; background: var(--surface);   /* solid, even with see-through panels */
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 14px 44px rgb(0 0 0 / .4);
  animation: update-rise var(--t-pop) ease-out backwards;
}
.update-pop h2 { margin: 0 0 6px; font-size: 1.2rem; }
.update-pop p { margin: 0 0 12px; }
.update-acts { display: flex; gap: 10px; justify-content: flex-end; }
.update-acts .btn { flex: 1; }
@keyframes update-rise { from { opacity: 0; translate: -50% 16px; } }
.eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent2); margin-bottom: 4px; }
.loading { padding: 48px 0; text-align: center; color: var(--muted); }
.note { margin-top: 18px; }
.section-h { margin: 22px 4px 8px; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.continue { position: relative; padding-right: 48px; background: linear-gradient(135deg, var(--accent-soft), var(--panel) 70%); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.continue .go { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 1.5rem; font-weight: 800; line-height: 1; padding-bottom: 3px; }
.continue h2 { font-size: 1.3rem; margin: 2px 0 4px; }

.list { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 12px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; min-height: 52px; color: var(--text); border-bottom: 1px solid var(--sep); cursor: pointer; }
.row:last-child { border-bottom: 0; }
.row:active, .sec-row:active, .book-row:active { background: var(--surface2); }
.big-row > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.chev { color: var(--muted); font-size: 1.4rem; line-height: 1; }

/* ---------- buttons, pills, chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; padding: 10px 20px; border-radius: var(--r-pill); border: 1px solid var(--edge); background: var(--surface); font-weight: 800; cursor: pointer; }
.btn.primary { background: var(--sel-bg); color: var(--accent-ink); border-color: var(--accent); }
.btn.danger { color: var(--accent2); }
.btn.wide { width: 100%; margin-top: 10px; }
.btn:disabled { opacity: .6; }
.link-btn { display: block; margin: 0 auto; border: 0; background: none; color: var(--muted); font-weight: 700; min-height: 44px; cursor: pointer; text-decoration: underline; }
.pill { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 12px; border-radius: var(--r-pill); border: 1px solid var(--edge); background: var(--surface); color: var(--text); font-weight: 700; font-size: .9rem; cursor: pointer; }
.pill.on, .pill.accent { background: var(--sel-bg); color: var(--accent-ink); border-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface2); color: var(--text); border: 1px solid transparent; font-size: .9rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.chip.static { cursor: default; }
.chip b { color: var(--muted); font-weight: 800; }
.chips a[data-r] { text-decoration: none; display: inline-flex; align-items: center; min-height: 30px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface2); font-size: .9rem; font-weight: 700; }

/* ---------- context badges: one small badge = one piece of information ---------- */
.ctx-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.ctx-row.in { display: inline-flex; margin: 0 0 0 4px; vertical-align: middle; }
.ctx {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; text-align: start;
  min-height: 28px; padding: 2px 9px 2px 7px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-ui); font-size: .78rem; font-weight: 800; line-height: 1.1; letter-spacing: 0; text-transform: none;
  cursor: pointer; vertical-align: middle; text-decoration: none;
}
/* a long label wraps onto a second line instead of being cut short with "…" */
.ctx span { min-width: 0; overflow-wrap: break-word; }
.ctx svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Where is Jesus stands out by a full accent outline; a solid fill would read as a switched-on control */
.ctx.k-j { border-color: var(--accent); border-width: 1.5px; }
/* the shiny "?" beside the story title (no background): opens everything known about the story */
.ctx-badge {
  display: inline-grid; place-items: center; width: 28px; height: 32px; margin-left: 0; padding: 0;
  border: 0; border-radius: 50%; background: none; vertical-align: middle; cursor: pointer;
  font-family: var(--font-display, serif); font-size: 1.75rem; font-weight: 800; line-height: 1; transform: translateY(-2px);
}
/* gold that catches the light: a highlight crosses it now and then (never with Reduced motion) */
.ctx-badge span {
  background: linear-gradient(110deg, var(--accent) 0%, var(--accent) 38%, color-mix(in srgb, var(--accent) 35%, white) 50%, var(--accent) 62%, var(--accent) 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--accent) 40%, transparent));
  animation: ctx-glint 6s ease-in-out 1.2s infinite;
}
@keyframes ctx-glint { 0%, 78% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.ctx-badge:hover span { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 60%, transparent)); }
/* a centred title stays centred: an invisible twin of the "?" balances it on the left */
[data-title-align="center"] .rd-head h1::before { content: ""; display: inline-block; width: 32px; }
.ctx-card p { margin: 0 0 6px; }
.ctx-card p:last-child { margin-bottom: 0; }
.ctx-card h4 { margin: 12px 0 4px; }
.ctx-card h4:first-child { margin-top: 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; }
.facts dt { font-weight: 800; color: var(--muted); }
.facts dd { margin: 0; }
/* ---------- source labels ---------- */
.src { margin-top: 10px; font-size: .78rem; color: var(--muted); }
.badge { display: inline-block; padding: 1px 7px; border-radius: var(--r-tag); font-weight: 800; font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; margin-right: 4px; }
.b-s { background: var(--accent); color: var(--accent-ink); }
.b-c { background: color-mix(in srgb, var(--accent2) 18%, var(--surface)); color: var(--accent2); }
.b-n { background: var(--accent-soft); color: var(--accent); }
.b-d { background: var(--surface2); color: var(--muted); }

/* ---------- home: testament switch and book list ---------- */
.seg { display: flex; gap: 4px; background: var(--surface2); padding: 4px; border-radius: var(--r-pill); }
.seg.wrap { flex-wrap: wrap; border-radius: var(--r-item); }
/* labels may wrap onto a second line rather than push the row off a narrow screen */
.seg button { flex: 1; min-height: 34px; border: 0; background: transparent; border-radius: 6px; padding: 6px 10px; font-weight: 700; cursor: pointer; line-height: 1.15; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg button.on { background: var(--sel-bg); color: var(--accent-ink); box-shadow: var(--shadow); }
.tm { margin: 18px 0 12px; }
.book-row { display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 54px; border-bottom: 1px solid var(--sep); color: var(--text); font-weight: 700; }
.book-row:last-child { border-bottom: 0; }
.ring { --p: 0; width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: radial-gradient(closest-side, var(--surface) 66%, transparent 68%), conic-gradient(var(--accent) calc(var(--p) * 1%), color-mix(in srgb, var(--muted) 45%, var(--surface)) 0); }
.book-row .bn { flex: 1; }
.book-row .rc { font-size: .78rem; color: var(--muted); font-weight: 700; }
.book-row .ring { width: 22px; height: 22px; }
.book-row .chev { margin-left: 2px; }
.book-row.done .bn { color: var(--accent); }

/* ---------- book screen ---------- */
.progress { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.bar-line { flex: 1; height: 6px; background: var(--surface2); border-radius: 9px; overflow: hidden; }
.bar-line i { display: block; height: 100%; background: var(--accent); border-radius: 9px; }
.arc { margin: 18px 0 0; }
.arc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 4px 8px; }
.arc-head h2 { margin: 0; font-size: 1.05rem; }
.group-h { font-weight: 800; color: var(--accent2); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding: 12px 16px 2px; }
.sec-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 52px; border-bottom: 1px solid var(--sep); color: var(--text); }
.sec-row:last-child { border-bottom: 0; }
.sec-row .tick { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--edge); display: grid; place-items: center; }
.sec-row.read .tick { background: var(--accent); border-color: var(--accent); }
.sec-row.read .tick::after { content: ""; width: 9px; height: 5px; border: solid var(--accent-ink); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.sec-row .st { flex: 1; font-weight: 600; }
.sec-row.read .st { color: var(--muted); }
.sec-row .sref { color: var(--muted); font-size: .8rem; white-space: nowrap; }

/* ---------- reader ---------- */
.rd-head { margin: 14px 0 12px; }
.rd-head h1 { font-size: 1.7rem; margin-bottom: 2px; }
.reader, .preview, .hit { font-size-adjust: var(--read-adjust, none); }
/* marks and headings inside the text use the interface font, so they keep their own size */
:is(.reader, .preview, .hit) :is(.ch, .vn, .fn, .b-s1, .b-s2, .b-ms, .b-mr, .b-r, sup, .hit-ref) { font-size-adjust: none; }
.reader { font-family: var(--font-read); font-size: var(--read-size, 19px); line-height: var(--read-lh, 1.7); padding: 4px 2px 8px; }
.reader.preview-box { padding: 0; font-size: var(--read-size, 19px); }
.reader p { margin: 0 0 var(--read-pg, .8em); }   /* paragraph spacing (Settings) */
/* no single word left alone on a last line (matters most when centred) */
:is(.reader p, .preview, .lex p, .lead, .card > p) { text-wrap: pretty; }
.reader .b-q1, .reader .b-q2, .reader .b-qr, .reader .b-li1, .reader .b-li2, .reader .b-pmo { margin: 0; }
.reader .b-q1 { padding-left: 1.2em; text-indent: -1.2em; margin-left: 1.2em; }
.reader .b-q2 { padding-left: 2.4em; text-indent: -1.2em; margin-left: 1.2em; }
.reader .b-qr { text-align: right; font-style: italic; color: var(--muted); }
.reader .b-li1 { padding-left: 1.2em; }
.reader .b-li2 { padding-left: 2.4em; }
.reader .b-pmo { margin-bottom: var(--read-pg, .8em); }
.reader :is(.b-q1, .b-q2, .b-qr, .b-li1, .b-li2) + :is(.b-p, .b-m, .b-pmo, .b-pc) { margin-top: var(--read-pg, .8em); }
.reader .b-pc { text-align: center; }
.reader .gap { margin-top: calc(var(--read-pg, .8em) + .1em); }
.reader .b-d, .reader .b-qa { font-style: italic; color: var(--muted); margin-bottom: .6em; }
.reader .b-s1, .reader .b-s2 { font-family: var(--font-ui); font-weight: 800; font-size: 1em; margin: 1.3em 0 .45em; color: var(--text); }
.reader .b-ms, .reader .b-mr { font-family: var(--font-ui); font-weight: 900; text-align: center; letter-spacing: .08em; margin: .6em 0; }
.reader .b-r { font-family: var(--font-ui); font-size: .76em; color: var(--muted); margin: -.3em 0 .8em; }
.reader .ch { float: left; font-family: var(--font-ui); font-weight: 900; font-size: 2.4em; line-height: .9; margin: .05em .18em 0 0; color: var(--accent); cursor: pointer; position: relative; }
.reader .vn { font-family: var(--font-ui); font-size: .62em; font-weight: 800; color: var(--accent); padding: .4em .3em .4em .15em; margin: -.4em 0; cursor: pointer; vertical-align: .55em; line-height: 0; position: relative; }
/* a small dot under a verse number that has its own study note */
.reader .vn.nt::after, .reader .ch.nt::after { content: ""; position: absolute; left: 50%; bottom: -.15em; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent2); }
.reader .ch.nt::after { bottom: -.2em; }
.reader .fn { font-family: var(--font-ui); font-size: .75em; color: var(--accent2); cursor: pointer; padding: .3em .2em; margin: -.3em -.15em; vertical-align: .5em; line-height: 0; font-weight: 900; position: relative; }
/* invisible larger tap area for small verse numbers and footnote marks (fingers need about 40px) */
.reader .vn::before, .reader .fn::before { content: ""; position: absolute; inset: -10px -3px -10px -12px; }
.reader .w { cursor: pointer; border-radius: 4px; transition: background var(--t-pop); }
.reader .w:active { background: var(--hl); }
.speakers .reader .g { color: var(--god); }      /* words God speaks (Settings) */
.speakers .reader .j { color: var(--jesus); }    /* words Jesus speaks */
/* text alignment (Settings): poetry lines drop their hanging indent when centred or right-aligned */
[data-align="center"] .reader { text-align: center; }
[data-align="right"] .reader { text-align: right; }
/* title alignment, set apart from the text: the story title and the headings in the text (with their cross-reference lines) */
[data-title-align="left"] :is(.rd-head, .reader .b-s1, .reader .b-s2, .reader .b-r) { text-align: left; }
[data-title-align="center"] :is(.rd-head, .reader .b-s1, .reader .b-s2, .reader .b-r) { text-align: center; }
[data-title-align="right"] :is(.rd-head, .reader .b-s1, .reader .b-s2, .reader .b-r) { text-align: right; }
:is([data-align="center"], [data-align="right"]) .reader :is(.b-q1, .b-q2, .b-li1, .b-li2) { padding-left: 0; margin-left: 0; text-indent: 0; }
:is([data-align="center"], [data-align="right"]) .reader .ch { float: none; display: block; margin: 0 0 .1em; }
/* the same two settings in the hub: its reading text (verses, notes, dictionary entries, descriptions) follows Text alignment,
   its titles and section headings follow Title alignment. Lists, rows, settings and controls stay as they are. */
[data-align="center"] .pane-hub :is(.preview, .lex, .lead, .hit, .xr, .quote, .jl, .card > p, .hub-hint) { text-align: center; }
[data-align="right"] .pane-hub :is(.preview, .lex, .lead, .hit, .xr, .quote, .jl, .card > p, .hub-hint) { text-align: right; }
[data-align="center"] .pane-hub :is(.chips, .ctx-row) { justify-content: center; }
[data-align="right"] .pane-hub :is(.chips, .ctx-row) { justify-content: flex-end; }
:is([data-align="center"], [data-align="right"]) .pane-hub :is(.lex ol, .lex ul) { list-style-position: inside; padding-left: 0; }
:is([data-align="center"], [data-align="right"]) .pane-hub .preview .ln { padding-left: 0; }
[data-align="center"] .pane-hub .quote { border-left: 0; padding-left: 0; }
[data-align="right"] .pane-hub .quote { border-left: 0; border-right: 3px solid var(--accent); padding: 2px 14px 2px 0; }
[data-title-align="left"] .pane-hub :is(.big, .card > h2, .hub-col > h2, .hub-col > h3, .lex > h4, .eyebrow) { text-align: left; }
[data-title-align="center"] .pane-hub :is(.big, .card > h2, .hub-col > h2, .hub-col > h3, .lex > h4, .eyebrow) { text-align: center; }
[data-title-align="right"] .pane-hub :is(.big, .card > h2, .hub-col > h2, .hub-col > h3, .lex > h4, .eyebrow) { text-align: right; }
[data-title-align="center"] .pane-hub :is(.ref-top, .word-top) { justify-content: center; text-align: center; }
[data-title-align="right"] .pane-hub :is(.ref-top, .word-top) { justify-content: flex-end; text-align: right; }
[data-title-align="center"] .pane-hub .hub-h { justify-content: center; }
[data-title-align="right"] .pane-hub .hub-h { justify-content: flex-end; }
.where svg, .jl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; margin-right: 3px; }
.jl { padding: 10px 0; border-bottom: 1px solid var(--sep); }
.jl:last-child { border-bottom: 0; }
.jl .pill { margin-top: 8px; }
.jl .arrow { color: var(--accent2); font-weight: 900; padding: 0 4px; }

/* reading bar: previous, mark read and continue, text display, full screen */
.rd-bar { display: flex; align-items: center; gap: 10px; }
.rd-bar .btn { flex: 1; min-height: 50px; }
.icon-btn { width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--edge); background: var(--surface); color: var(--accent); cursor: pointer; }
span.icon-btn { border-color: transparent; background: none; }
.icon-btn.aa { font-weight: 900; font-size: 1.05rem; font-family: var(--font-read); }
.icon-btn:active { background: var(--accent-soft); }

/* ---------- hub content: words, verses, notes ---------- */
.lead { font-size: 1.05rem; }
.quote { margin: 10px 0 14px; padding: 2px 0 2px 14px; border-left: 3px solid var(--accent); }
.quote .preview { margin: 0 0 4px; }
.quote a[data-r] { font-size: .85rem; font-weight: 700; color: var(--accent); cursor: pointer; }
ul.plain { padding-left: 1.1em; margin: 6px 0 12px; }
ul.plain li { margin-bottom: 6px; }
.range-row { display: flex; align-items: center; gap: 10px; }
.range-row input { flex: 1; min-width: 0; }
.range-row input:disabled { opacity: .45; }
.preview { font-family: var(--font-read); font-size: calc(var(--read-size, 19px) * .92); line-height: var(--read-lh, 1.7); }
.preview sup { color: var(--accent); font-weight: 800; font-size: .65em; padding-right: 2px; }
.orig { font-size: 2.1rem; margin: 6px 0 2px; }
.orig.heb { font-family: var(--font-hebrew); }
.orig.grk { font-family: var(--font-greek); }
.lex { font-size: .98rem; }
.lex ol, .lex ul { padding-left: 1.3em; }
.lex .hebrew, .lex .greek { font-style: italic; }
.lex.titled > h4:first-child { font-size: 1.25rem; margin-top: 2px; }
.lex .sn-ref { display: none; }
.lex .sn-excerpt { font-weight: 800; }
.xr { padding: 9px 0; border-bottom: 1px solid var(--sep); font-size: .95rem; }
.xr .phrase { font-weight: 800; }

/* ---------- search ---------- */
.search-box { position: sticky; top: -2px; z-index: 10; margin: 0 -18px; padding: 6px 18px 10px; background: var(--surface); }
.search-box input { width: 100%; min-height: 50px; font: inherit; font-size: 1.05rem; padding: 12px 18px; border-radius: var(--r-pill); border: 1.5px solid var(--edge); background: var(--surface); color: var(--text); -webkit-appearance: none; appearance: none; }
.search-box input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.scope { margin-top: 10px; }
.scope button { font-size: .88rem; }
.tip { margin: 14px 4px; }
.hit { padding: 10px 2px; border-bottom: 1px solid var(--sep); font-family: var(--font-read); }
.hit-ref { font-family: var(--font-ui); font-weight: 800; margin-right: 6px; text-decoration: none !important; }
.hit mark { background: var(--hl); color: inherit; border-radius: 3px; padding: 0 1px; }
.go-ref h2 { margin: 0; }
.books-filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; margin-right: -18px; }
.books-filter .chip { font-size: .82rem; white-space: nowrap; }

/* ---------- people, places, events ---------- */
.vb { border-bottom: 1px solid var(--sep); padding: 8px 0; }
.vb summary { cursor: pointer; font-weight: 800; min-height: 36px; display: flex; align-items: center; gap: 6px; }
.idents { padding-left: 1.2em; }
.idents li { margin: 6px 0; }
.idents li.best strong { color: var(--accent); }
.events, .path { list-style: none; padding: 0; margin: 12px 0 0; }
.ev h3 { margin-top: 0; }
.ev.here { border-color: var(--accent2); }
.where { margin: 2px 0 4px; }

/* ---------- settings ---------- */
.field { margin: 14px 0; }
.field:first-child { margin-top: 0; }
.field > label { display: flex; justify-content: space-between; font-weight: 800; margin-bottom: 8px; }
input[type=range] { width: 100%; margin-inline: 0; accent-color: var(--accent); min-height: 36px; }
.switch { display: flex !important; justify-content: flex-start !important; gap: 10px; align-items: center; font-weight: 700 !important; min-height: 44px; }
.switch input { width: 22px; height: 22px; accent-color: var(--accent); }
.swatch { flex: none; width: 13px; height: 13px; border-radius: 2px; display: inline-block; border: 1px solid rgba(0,0,0,.15); }
.hue input[type=range] { -webkit-appearance: none; appearance: none; height: 36px; background: transparent; cursor: pointer; }
.hue input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: var(--hue-track, var(--surface2)); box-shadow: inset 0 0 0 1px var(--border); }
.hue input[type=range]::-moz-range-track { height: 8px; border-radius: 999px; background: var(--hue-track, var(--surface2)); box-shadow: inset 0 0 0 1px var(--border); }
.hue input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -6px; border-radius: 50%; background: var(--surface); border: 2px solid var(--text); box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
.hue input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 2px solid var(--text); box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
.credit h2 { margin-top: 8px; }

/* ================= split layout: Bible on top / left, hub below / right ================= */

/* ---------- host + shell ---------- */
.loom-host { position: relative; z-index: 1; container: loom / inline-size; height: 100vh; height: 100dvh; }
.loom {
  --split: 62%;            /* Bible share of the height in split view (phone) */
  --peek: 56px;            /* Bible strip left when the hub is full screen */
  --hub-min: 30px;         /* hub strip left when the Bible is full screen */
  --snap-t: calc(var(--t-screen) * .6);   /* .3s; 0s with reduced motion (theme.css) */
  --top: var(--split);
  position: relative; height: 100%; overflow: hidden;
  display: grid; grid-template-rows: var(--top) minmax(0, 1fr);
  background: transparent; color: var(--text);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.5;
  transition: grid-template-rows var(--snap-t) var(--ease), grid-template-columns var(--snap-t) var(--ease);
}
.loom[data-split="bible"] { --top: calc(100% - var(--hub-min)); }
.loom[data-split="hub"]   { --top: var(--peek); }
.loom.dragging { transition: none; user-select: none; }   /* JS sets --top in px while dragging */

.loom svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Bible pane ---------- */
.pane-bible { min-height: 0; min-width: 0; display: flex; flex-direction: column; position: relative; }
/* The Bible side is the page, like Sabo's desktop: the background shows behind the text at full strength.
   The hub is the panel: see-through by Settings > Transparency (--pane = 100% minus it), frosted by --blur. */
.pane-bible { background: transparent; }
.pane-hub { -webkit-backdrop-filter: var(--blur, none); backdrop-filter: var(--blur, none); }
/* cards inside the hub sit on a panel that is already see-through: they add only half a layer more,
   so Transparency shows through them too (stacked, they were 91% solid at 30% and half solid at 70%) */
.pane-hub { --panel: color-mix(in srgb, var(--surface) calc(var(--pane, 100%) / 2), transparent); }
.bible-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top) + 2px) 20px 20px; scroll-padding-block: 32px;
}
.bible-col { max-width: 40rem; margin: 0 auto; }
.pane-bible .rd-head { margin: 12px 0 10px; }
.pane-bible .rd-head h1 { font-size: 1.6rem; }
.pane-bible .rd-head .eyebrow { margin-bottom: 2px; }

/* the slim reading bar: part of the Bible pane, never floating over the hub */
.pane-bible .rd-bar {
  position: static; max-width: none; margin: 0; flex: none;
  gap: 8px; padding: 6px 12px 8px; min-height: 58px;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.pane-bible .rd-bar .btn { min-height: 44px; padding: 8px 16px; }
.pane-bible .rd-bar .icon-btn { width: 44px; height: 44px; }
.icon-btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.loom[data-split="bible"] .pane-bible .rd-bar { padding-bottom: 8px; }

/* selection stays marked in the text */
.reader .w.sel { background: var(--hl); box-shadow: inset 0 -2px 0 var(--accent2); border-radius: 4px; }
.reader [data-v].vsel { background: color-mix(in srgb, var(--accent2) 13%, transparent); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.reader .vn.vsel, .reader .ch.vsel { color: var(--accent-ink); background: var(--accent2); border-radius: var(--r-tag); padding: .25em .45em; margin: -.25em .1em; }

/* Bible strip shown when the hub is full screen */
.bible-peek {
  display: none; align-items: center; gap: 10px; width: 100%; height: 100%;
  padding: calc(env(safe-area-inset-top) + 0px) 10px 0 16px; border: 0; background: transparent; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.bible-peek .pk-icon { width: 22px; height: 22px; color: var(--accent); }
.bible-peek .pk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.bible-peek .pk-t b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bible-peek .pk-t span { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bible-peek:hover .pk-t b { color: var(--accent); }
.loom[data-split="hub"] .bible-peek { display: flex; }
.loom[data-split="hub"] .bible-scroll, .loom[data-split="hub"] .pane-bible .rd-bar { display: none; }

/* expand / collapse icons swap by state (no JS needed) */
.i-collapse { display: none; }
.loom[data-split="bible"] .pane-bible .i-expand, .loom[data-split="hub"] .pane-hub .i-expand { display: none; }
.loom[data-split="bible"] .pane-bible .i-collapse, .loom[data-split="hub"] .pane-hub .i-collapse { display: block; }

/* ---------- hub ---------- */
.pane-hub {
  min-height: 0; min-width: 0; position: relative; z-index: 2;
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--surface) var(--pane, 100%), transparent); border-top: 1px solid var(--edge);
  border-radius: var(--r-card) var(--r-card) 0 0;
  box-shadow: 0 -14px 32px -22px color-mix(in srgb, var(--text) 50%, transparent);
}
/* the divider: a grip at the hub's top edge. Drag, or keys, or tap the buttons. */
.hub-grab {
  flex: none; position: relative; width: 100%; height: 22px; padding: 0; border: 0; background: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: row-resize; touch-action: none; color: var(--muted); font: inherit;
}
.hub-grab::before { content: ""; width: 44px; height: 5px; border-radius: 9px; background: color-mix(in srgb, var(--muted) 45%, var(--border)); transition: background var(--t-pop); }
.hub-grab:hover::before, .loom.dragging .hub-grab::before { background: var(--accent); }
.hub-grab::after { content: ""; position: absolute; inset: -10px 0 -4px; }   /* taller touch target */
.hub-grab .grab-label { display: none; font-size: .78rem; font-weight: 800; }

.hub-head { flex: none; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px 2px 18px; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* for screen readers only */
/* a tab's own page has no title row: the expand button sits in the corner, beside the divider's grip */
.hub-head.root { position: absolute; top: 0; right: 6px; z-index: 4; min-height: 0; padding: 0; }
.hub-head.root .hub-btn { width: 34px; height: 22px; border-radius: 8px; background: none; color: var(--muted); position: relative; }
.hub-head.root .hub-btn svg { width: 17px; height: 17px; }
.hub-head.root .hub-btn::after { content: ""; position: absolute; inset: -10px -4px -12px; }   /* finger-sized */
.hub-back {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px; min-width: 0;   /* uses the free row; "…" only when truly out of room */
  margin-left: -8px; padding: 0 8px 0 2px; border: 0; background: none; border-radius: var(--r-pill);
  color: var(--accent); font: inherit; font-weight: 800; cursor: pointer;
}
.hub-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-back svg { width: 20px; height: 20px; stroke-width: 2.4; }
.hub-back:hover { background: var(--accent-soft); }
.hub-head .spacer { flex: 1; }
.hub-btn {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: var(--surface2); color: var(--text); cursor: pointer;
}
.hub-btn svg { width: 20px; height: 20px; }
.hub-btn:hover { color: var(--accent); background: var(--accent-soft); }

.hub-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 18px 18px; }
.hub-col { max-width: 44rem; margin: 0 auto; overflow-wrap: break-word; }   /* long web addresses break instead of running off the screen */

.hub-tabs {
  flex: none; display: flex; padding: 2px 4px calc(2px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border); background: transparent;
}
.hub-tabs a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 52px; padding: 4px 2px; color: var(--muted); font-size: .68rem; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer;
}
.hub-tabs svg { width: 24px; height: 24px; padding: 2px 10px; box-sizing: content-box; border-radius: var(--r-pill); stroke-width: 1.8; transition: background var(--t-pop); }
.hub-tabs a:hover { color: var(--text); }
.hub-tabs a.on { color: var(--accent); }
.hub-tabs a.on svg { background: var(--accent-soft); }
.hub-tabs a.gear { flex: 0 0 56px; }
/* the hub is its own container, so its rows fit however narrow it is dragged */
.pane-hub { container: hub / inline-size; }
/* columns never grow past their share (minmax 0), so a long name wraps inside its button instead of widening the grid */
.seg.fonts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r-item); }
/* each font button is a sample of its face, so no style turns them into small capitals
   (doubled :root so it outranks the styles' label rules, which sit later in this file) */
:root:root .seg.fonts button { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 500; padding-inline: 6px; }
/* the Font row: three across, two when the hub is narrow */
@container hub (max-width: 400px) { .seg.fonts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the Style row: four across, two by two when the hub is too narrow for four */
.seg.styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--r-item); }
@container hub (max-width: 480px) { .seg.styles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* hub collapsed (Bible full screen): only the grip strip with a label */
.loom[data-split="bible"] .pane-hub > :not(.hub-grab) { display: none; }
.loom[data-split="bible"] .hub-grab { height: 100%; padding-bottom: env(safe-area-inset-bottom); cursor: pointer; }
.loom[data-split="bible"] .hub-grab .grab-label { display: inline; }
.loom[data-split="bible"] .hub-grab::before { width: 28px; }

/* ---------- hub content pieces ---------- */
.pane-hub .list { box-shadow: none; }
.pane-hub .ctx { min-height: 30px; font-size: .82rem; padding: 3px 10px 3px 8px; }
.pane-hub .ctx-row { margin-top: 8px; }
.hub-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 18px 2px 8px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.hub-h:first-child { margin-top: 6px; }
.hub-h .n { font-weight: 700; letter-spacing: 0; }
.hub-jump { margin: 2px 0 4px; }
.hub-hint { margin: 0 0 8px; padding: 8px 12px; border-radius: var(--r-item); background: var(--accent-soft); color: var(--accent); font-size: .82rem; font-weight: 700; }
.nrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; min-height: 52px; border: 0; border-bottom: 1px solid var(--sep); background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.nrow:last-child { border-bottom: 0; }
.nrow:hover { background: color-mix(in srgb, var(--surface2) 55%, transparent); }
.nrow .nt { flex: 1; min-width: 0; }
.nrow .nt b { display: block; font-weight: 800; }
.nrow .nt span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .88rem; color: var(--muted); line-height: 1.4; }
.more-row { display: flex; justify-content: center; margin-top: 8px; }
.pane-hub .jl { font-size: .95rem; }
.pane-hub .jl .src { margin-top: 4px; }

/* word page */
.word-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 2px; }
.word-top .orig { margin: 0; line-height: 1.25; }
.word-top .tr { font-size: 1.05rem; }
.word-top .tr b { font-weight: 800; }
.pane-hub .lex p { margin: 6px 0; }
.pane-hub h3 { font-size: .95rem; margin: 14px 0 4px; }
.hits-count { margin: 0 2px 4px; font-size: .85rem; color: var(--muted); font-weight: 700; }
.pane-hub .hit { padding: 10px 2px; }
.pane-hub .preview { margin: 4px 0 0; }
.preview .ln { display: block; padding-left: 1.2em; }

/* stories tab */
.pane-hub .continue { margin: 4px 0 12px; box-shadow: none; }
.pane-hub .tm { margin: 4px 0 10px; }

/* ---------- wide screens: hub on the right ---------- */
@container loom (min-width: 900px) {
  .loom {
    --split: 66.667%;
    --rail: 64px;
    --left: var(--split);
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: var(--left) minmax(0, 1fr);
  }
  .loom[data-split="bible"] { --left: calc(100% - var(--hub-min)); }
  .loom[data-split="hub"]   { --left: var(--rail); }
  .bible-scroll { padding: 8px 40px 32px; }
  .pane-bible .rd-head { margin-top: 28px; }
  .pane-bible .rd-head h1 { font-size: 2rem; }
  .pane-bible .rd-bar { justify-content: center; padding: 8px 24px; }
  .pane-bible .rd-bar .btn { flex: 0 1 22rem; }

  .pane-hub {
    border-top: 0; border-left: 1px solid var(--edge); border-radius: 0;
    box-shadow: -14px 0 32px -26px color-mix(in srgb, var(--text) 50%, transparent);
  }
  /* divider becomes a vertical grip on the hub's left edge */
  .hub-grab { position: absolute; left: -9px; top: 0; bottom: 0; width: 18px; height: auto; z-index: 3; cursor: col-resize; flex-direction: column; }
  .hub-grab::before { width: 5px; height: 44px; }
  .hub-grab::after { inset: 0 -4px; }
  .loom[data-split="bible"] .hub-grab { left: 0; width: 100%; height: 100%; padding: 0; }
  .loom[data-split="bible"] .hub-grab::before { width: 5px; height: 28px; }
  .loom[data-split="bible"] .hub-grab .grab-label { writing-mode: vertical-rl; }

  /* tabs move to the top of the hub as a row */
  .hub-tabs { order: -1; padding: 8px 10px 6px; border-top: 0; border-bottom: 1px solid var(--border); gap: 2px; }
  .hub-tabs a { flex: none; flex-direction: row; gap: 5px; min-height: 34px; padding: 0 10px 0 7px; border-radius: var(--r-pill); font-size: .85rem; white-space: nowrap; }
  .hub-tabs svg { width: 20px; height: 20px; padding: 0; background: none !important; }
  .hub-tabs a.on { background: var(--accent-soft); }
  .hub-tabs a.gear { flex: none; margin-left: auto; padding: 0 10px; }
  .hub-tabs a.gear span { display: none; }
  .hub-head { padding-top: 6px; }
  /* wide: the expand button joins the end of the tab row */
  .hub-tabs { padding-right: 52px; }
  .hub-head.root { top: 8px; right: 10px; padding: 0; }
  .hub-head.root .hub-btn { width: 34px; height: 34px; border-radius: 50%; }

  /* hub full screen: the Bible becomes a slim rail on the left */
  .bible-peek { flex-direction: column; justify-content: flex-start; padding: 18px 0; gap: 14px; }
  .bible-peek .pk-t { flex: none; writing-mode: vertical-rl; transform: rotate(180deg); }
  .bible-peek .pk-t span { display: none; }
}
/* a narrow hub on a wide screen: only the open tab keeps its name, the rest are icons (each still has its name for screen readers) */
@container loom (min-width: 900px) { @container hub (max-width: 480px) {
  .hub-tabs a:not(.on) span { display: none; }
  .hub-tabs a:not(.on) { padding: 0 9px; }
} }

/* passage preview: title with Read it beside it */
.ref-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ref-top h2 { margin: 0; }
.sec-row.current .st { color: var(--accent); font-weight: 800; }

/* first-time setup: the hub fills the screen until reading starts */
.loom.setup { display: block; }
.loom.setup .pane-bible, .loom.setup .hub-grab, .loom.setup .hub-head, .loom.setup .hub-tabs { display: none; }
.loom.setup .pane-hub { height: 100%; border-radius: 0; border: 0; box-shadow: none; padding-top: env(safe-area-inset-top); }

/* ================= motion (Sabo OS motion.css): pages slide in the way you went, presses give way a little =================
   Durations come from theme.css (--t-1, --t-2, --t-page); Reduced motion sets them to 0 and stops every animation. */
@keyframes page-fwd  { from { opacity: 0; translate: 28px 0; } }
@keyframes page-back { from { opacity: 0; translate: -28px 0; } }
@keyframes page-rise { from { opacity: 0; translate: 0 6px; } }
.hub-col[data-enter="fwd"]  { animation: page-fwd var(--t-page) var(--ease-in) both; }
.hub-col[data-enter="back"] { animation: page-back var(--t-page) var(--ease-in) both; }
.hub-col[data-enter="rise"], .bible-col[data-enter="rise"] { animation: page-rise calc(var(--t-page) * 1.3) var(--ease-in) both; }
:is(.btn, .pill, .chip, .chips a[data-r], .ctx, .seg button, .icon-btn, .hub-btn, .hub-back, .nrow, .row, .sec-row, .book-row, .hub-tabs a, .card) {
  transition: background-color var(--t-2) ease-out, color var(--t-2) ease-out, border-color var(--t-2) ease-out, box-shadow var(--t-2) ease-out, scale var(--t-1) ease-out;
}
:is(.btn, .pill, .chip, .ctx, .seg button, .icon-btn, .hub-btn, .hub-tabs a):not(:disabled):not([aria-disabled="true"]):active { scale: .97; }
/* a change of light/dark, style or colours cross-fades (a view transition, started in js/app.js) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; animation-timing-function: cubic-bezier(.2, 0, 0, 1); }

/* ================= Silo style: shape language (colours and fonts are in theme.css) =================
   From Sabo OS silo.css: mono caps micro labels, gold hairlines instead of grey borders, corner brackets on panels,
   ring buttons, a gold highlight bar for the selected control, glow = focus. No looping motion. */
[data-style="silo"] {
  --corners:
    linear-gradient(var(--tick), var(--tick)) left top / 10px 1px no-repeat, linear-gradient(var(--tick), var(--tick)) left top / 1px 10px no-repeat,
    linear-gradient(var(--tick), var(--tick)) right top / 10px 1px no-repeat, linear-gradient(var(--tick), var(--tick)) right top / 1px 10px no-repeat,
    linear-gradient(var(--tick), var(--tick)) left bottom / 10px 1px no-repeat, linear-gradient(var(--tick), var(--tick)) left bottom / 1px 10px no-repeat,
    linear-gradient(var(--tick), var(--tick)) right bottom / 10px 1px no-repeat, linear-gradient(var(--tick), var(--tick)) right bottom / 1px 10px no-repeat;
}
[data-style="silo"] ::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--text); }
[data-style="silo"] :focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; box-shadow: var(--halo); border-radius: var(--r-item); }
[data-style="silo"] :is(h1, h2) { font-family: var(--font-label); font-weight: 500; letter-spacing: .01em; }

/* mono caps micro labels */
[data-style="silo"] :is(.eyebrow, .section-h, .hub-h, .group-h, .badge, .field > label:not(.switch), .seg button, .pill, .chip, .chips a[data-r], .ctx, .btn, .link-btn, .hub-tabs a, .hub-back, .grab-label, .sec-row .sref, .book-row .rc) {
  font-family: var(--font-label); font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
}
[data-style="silo"] :is(.pill, .chip, .chips a[data-r], .ctx, .seg button, .btn, .link-btn) { font-size: .74rem; }
[data-style="silo"] .hub-tabs a { font-size: .68rem; letter-spacing: .06em; }
[data-style="silo"] .eyebrow { color: var(--accent); }
[data-style="silo"] .chip b { color: var(--accent); }

/* panels float on hairlines with corner brackets, no card fill shading */
[data-style="silo"] :is(.card:not(.continue), .list) { background: var(--corners), var(--panel); }
[data-style="silo"] .continue { background: var(--corners), linear-gradient(135deg, var(--accent-soft), var(--panel) 70%); border-color: var(--edge); }
[data-style="silo"] .pane-hub { border-color: var(--edge); }
[data-style="silo"] .hub-tabs, [data-style="silo"] .pane-bible .rd-bar { border-color: var(--sep); }

/* chips and pills: hairline outlines; selection lights up */
[data-style="silo"] :is(.chip, .chips a[data-r]) { background: transparent; border-color: var(--edge); }
[data-style="silo"] :is(.pill, .chip, .chips a[data-r], .ctx):hover { border-color: var(--accent); box-shadow: var(--halo); }
[data-style="silo"] .ctx { background: transparent; border-color: var(--edge); max-width: 22em; letter-spacing: .06em; }
[data-style="silo"] .b-n { color: color-mix(in srgb, var(--accent) 55%, var(--text)); }
[data-style="silo"] .ctx.k-j { border-color: var(--accent); color: var(--accent); }
[data-style="silo"] .seg { background: transparent; border: 1px solid var(--sep); }
[data-style="silo"] .seg button.on, [data-style="silo"] .btn.primary { box-shadow: var(--halo); }
[data-style="silo"] .hub-tabs a.on svg, [data-style="silo"] .hub-tabs a.on { background: none; }
[data-style="silo"] .hub-tabs a.on { color: var(--accent); }
[data-style="silo"] .hub-tabs a.on svg { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 60%, transparent)); }
[data-style="silo"] .hub-hint { background: transparent; border: 1px solid var(--edge); }

/* ring nodes: round buttons are hairline rings; the active one glows */
[data-style="silo"] :is(.icon-btn, .hub-btn) { background: transparent; border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); }
[data-style="silo"] :is(.icon-btn, .hub-btn):hover { border-color: var(--accent); color: var(--accent); background: transparent; box-shadow: var(--halo); }
[data-style="silo"] span.icon-btn { border-color: transparent; }
[data-style="silo"] .continue .go { box-shadow: var(--halo); }
[data-style="silo"] .sec-row.read .tick, [data-style="silo"] .hub-grab:hover::before { box-shadow: var(--halo); }
[data-style="silo"] .bar-line, [data-style="silo"] .bar-line i { border-radius: 0; }
[data-style="silo"] .bar-line i { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), var(--accent)); }
[data-style="silo"] .search-box input { border-width: 1px; }
[data-style="silo"] .search-box input:focus { box-shadow: var(--halo); }


/* ================= Papyrus style: a finely made old book (colours and fonts are in theme.css) =================
   Quiet by design: single ink hairlines, no shadows, generous air. What makes it Papyrus:
   - Garamond titles with a small rubric ornament beneath (a hairline, a lozenge, a hairline);
   - rubricated chapter initials and verse numbers, the one place the red-ochre is used freely;
   - small inscription capitals, set wide and in muted ink, for labels and controls; chosen controls set in ink.
   Hover only darkens the ink or draws a hairline; pages unroll gently sideways. */
[data-style="papyrus"] ::selection { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--text); }
[data-style="papyrus"] :focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; border-radius: var(--r-item); }

/* type */
[data-style="papyrus"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 500; }
[data-style="papyrus"] h1 { font-size: 2.2rem; line-height: 1.08; letter-spacing: 0; }
[data-style="papyrus"] h2 { font-size: 1.4rem; }
[data-style="papyrus"] h3 { font-size: 1.2rem; font-weight: 600; }
[data-style="papyrus"] .pane-bible .rd-head h1 { font-size: 2.05rem; }
[data-style="papyrus"] .continue h2 { font-size: 1.55rem; }
[data-style="papyrus"] .rd-head .muted { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.12rem; color: var(--muted); }
[data-style="papyrus"] .reader .b-r { font-family: var(--font-display); font-style: italic; font-size: .9em; }
[data-style="papyrus"] .reader .b-r a[data-r] { text-decoration: none; color: var(--accent); }
[data-style="papyrus"] .nrow .nt b { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin-bottom: 2px; }
[data-style="papyrus"] .hub-h .n { font-family: var(--font-display); font-weight: 500; letter-spacing: 0; color: var(--muted); }
[data-style="papyrus"] :is(.eyebrow, .section-h, .hub-h, .group-h, .badge, .field > label:not(.switch), .seg button, .pill, .btn, .link-btn, .hub-tabs a, .hub-back, .grab-label, .book-row .rc) {
  font-family: var(--font-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
[data-style="papyrus"] :is(.seg button, .pill, .btn, .link-btn, .hub-back) { font-size: .74rem; }
[data-style="papyrus"] .field > label:not(.switch) { font-size: .72rem; color: var(--muted); }
[data-style="papyrus"] .field > label .muted { font-family: var(--font-ui); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .85rem; }
[data-style="papyrus"] .hub-tabs a { font-size: .68rem; letter-spacing: .08em; }
[data-style="papyrus"] :is(.section-h, .group-h) { color: var(--muted); font-size: .7rem; }
[data-style="papyrus"] .eyebrow { color: var(--accent); font-size: .68rem; }

/* the title ornament: hairline, lozenge, hairline, in rubric; it follows Title alignment */
[data-style="papyrus"] .rd-head::after {
  content: ""; display: block; width: 128px; height: 10px; margin: 14px 0 6px; background: color-mix(in srgb, var(--accent) 70%, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 7'%3E%3Cpath d='M0 3h38v1H0zM54 3h38v1H54zM46 0l3.5 3.5L46 7l-3.5-3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 7'%3E%3Cpath d='M0 3h38v1H0zM54 3h38v1H54zM46 0l3.5 3.5L46 7l-3.5-3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-style="papyrus"][data-title-align="center"] .rd-head::after { margin-inline: auto; }
[data-style="papyrus"][data-title-align="right"] .rd-head::after { margin-left: auto; }
/* section labels: a small rubric lozenge before, a hairline after */
[data-style="papyrus"] .section-h { display: flex; align-items: center; gap: 10px; }
[data-style="papyrus"] .section-h::before { content: ""; width: 5px; height: 5px; rotate: 45deg; background: var(--accent); flex: none; opacity: .8; }
[data-style="papyrus"] .section-h::after { content: ""; flex: 1; height: 1px; background: var(--sep); }

/* rubrics in the text */
[data-style="papyrus"] .reader .ch { font-family: var(--font-display); font-weight: 600; font-size: 3.4em; line-height: .8; margin: .04em .16em 0 0; }
[data-style="papyrus"] .reader :is(.b-s1, .b-s2) { font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: 1.1em; letter-spacing: .01em; }
[data-style="papyrus"] .reader :is(.b-ms, .b-mr) { font-family: var(--font-label); font-weight: 500; letter-spacing: .14em; color: var(--accent); }
[data-style="papyrus"] .reader .vn { font-family: var(--font-display); font-weight: 600; font-size: .72em; }
/* Garamond's old-style figures are kept in running text, but numbers that are read as numbers stand at full height
   (an old-style 1 reads as a capital I in the chapter numeral and in references) */
[data-style="papyrus"] :is(h1, h2, h3, h4, .reader .ch, .reader .vn, .rd-head, .hub-h .n, .hit-ref, a[data-r], .nrow .nt b) { font-variant-numeric: lining-nums; }
[data-style="papyrus"] .hit-ref { font-family: var(--font-display); font-weight: 600; font-size: 1.06em; }

/* surfaces: single hairlines, no shadows */
[data-style="papyrus"] .card { border-color: var(--edge); }
/* lists are ruled, like the index of a book, rather than boxed */
[data-style="papyrus"] .list { background: transparent; border: 0; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); border-radius: 0; }
[data-style="papyrus"] .list > :is(.nrow, .row, .sec-row, .book-row) { padding-inline: 4px; }
[data-style="papyrus"] .continue { background: var(--panel); border-color: var(--edge); }
[data-style="papyrus"] .continue .go { background: none; color: var(--accent); border: 1px solid var(--rule); font-family: var(--font-display); font-weight: 500; }
[data-style="papyrus"] .pane-hub { border-color: var(--edge); }
[data-style="papyrus"] :is(.hub-tabs, .pane-bible .rd-bar) { border-color: var(--sep); }
[data-style="papyrus"] .hub-hint { background: transparent; border: 0; border-left: 1px solid var(--rule); border-radius: 0; color: var(--muted); font-style: italic; font-size: .84rem; font-weight: 400; }
[data-style="papyrus"] .quote { border-left-width: 1px; }

/* controls: hairlines; chosen ones set in ink */
[data-style="papyrus"] :is(.chip, .chips a[data-r]) { background: transparent; border-color: var(--edge); font-weight: 500; }
[data-style="papyrus"] .ctx { background: transparent; border-color: var(--sep); color: var(--text); font-weight: 500; }
[data-style="papyrus"] .ctx svg { color: var(--accent); }
[data-style="papyrus"] :is(.pill, .chip, .chips a[data-r], .ctx, .btn):hover { border-color: color-mix(in srgb, var(--text) 45%, transparent); }
[data-style="papyrus"] .ctx.k-j { background: transparent; color: var(--text); border-color: var(--sep); }
[data-style="papyrus"] .btn:not(.primary) { background: transparent; }
/* the main action is the one control written in rubric */
[data-style="papyrus"] .btn.primary { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--accent); border-color: var(--accent); font-size: .82rem; font-weight: 700; }
[data-style="papyrus"] .btn.primary:hover { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); }
[data-style="papyrus"] .seg { background: transparent; border: 1px solid var(--sep); padding: 3px; }
[data-style="papyrus"] .seg button { border-radius: 1px; }
[data-style="papyrus"] .seg button.on { box-shadow: none; }
/* in the dark a solid cream block glares; a chosen control is a faint ink wash with a hairline instead */
[data-style="papyrus"][data-mode="dark"] .seg button:not(.on) { color: var(--muted); }
[data-style="papyrus"][data-mode="dark"] .seg button.on { background: color-mix(in srgb, var(--text) 20%, var(--surface)); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 50%, transparent); }
[data-style="papyrus"][data-mode="dark"] :is(.pill.on, .pill.accent) { background: color-mix(in srgb, var(--text) 20%, var(--surface)); color: var(--text); border-color: color-mix(in srgb, var(--text) 50%, transparent); }
[data-style="papyrus"] :is(.icon-btn, .hub-btn) { background: transparent; border: 1px solid var(--edge); color: var(--text); border-radius: var(--r-item); }
[data-style="papyrus"] .icon-btn.aa { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; }
[data-style="papyrus"] :is(.icon-btn, .hub-btn):hover { border-color: color-mix(in srgb, var(--text) 45%, transparent); background: transparent; }
[data-style="papyrus"] span.icon-btn { border-color: transparent; }
[data-style="papyrus"] .hub-tabs a { color: var(--muted); }
[data-style="papyrus"] .hub-tabs a.on { color: var(--text); }
[data-style="papyrus"] .hub-tabs a.on svg { background: none; }
[data-style="papyrus"] .hub-tabs a.on span { text-decoration: underline 1px var(--accent); text-underline-offset: 5px; }
[data-style="papyrus"] .sec-row .tick { border-width: 1px; }
[data-style="papyrus"] .sec-row.read .tick { background: none; border-color: var(--rule); }
[data-style="papyrus"] .sec-row.read .tick::after { border-color: var(--accent); border-width: 0 0 1.5px 1.5px; }
[data-style="papyrus"] .bar-line { height: 2px; border-radius: 0; background: var(--sep); }
[data-style="papyrus"] .bar-line i { border-radius: 0; background: var(--accent); }
[data-style="papyrus"] input[type=range]:not(.hue input) { accent-color: var(--text); }
[data-style="papyrus"] .search-box input { border-width: 1px; background: transparent; }
[data-style="papyrus"] .search-box input:focus { border-color: color-mix(in srgb, var(--text) 50%, transparent); }

/* motion: a page unrolls gently sideways, the way you went */
@keyframes scroll-fwd  { from { opacity: 0; translate: 10px 0; clip-path: inset(0 60% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes scroll-back { from { opacity: 0; translate: -10px 0; clip-path: inset(0 0 0 60%); } to { clip-path: inset(0 0 0 0); } }
[data-style="papyrus"] .hub-col[data-enter="fwd"]  { animation: scroll-fwd var(--t-page) var(--ease-in) backwards; }
[data-style="papyrus"] .hub-col[data-enter="back"] { animation: scroll-back var(--t-page) var(--ease-in) backwards; }


/* ================= Space style: Sabo OS's ASCII Art look (frontend/src/home/ascii.css) with the Starfield background =================
   Kept: one quiet face, lowercase labels, thin hairline frames, monochrome ink with a chosen control set in ink, no shadows,
   stars drifting behind see-through panels. Left out on purpose (Peter): every coding mark, so no [brackets], no "#"
   prefixes, no block cursor, no dotted block meters and no dashed edges. Colours and fonts are in theme.css. */
[data-style="space"] body { font-variant-ligatures: none; }
[data-style="space"] ::selection { background: var(--text); color: var(--bg); }
[data-style="space"] :focus-visible { outline: 1px solid var(--text); outline-offset: 2px; box-shadow: none; }
[data-style="space"] :is(input[type="checkbox"], input[type="radio"], progress, input[type="range"]:not(.hue input)) { accent-color: var(--text); }

/* type: headings at 500, a little smaller (the face sets wide) */
[data-style="space"] :is(h1, h2, h3, h4) { font-weight: 500; letter-spacing: 0; }
[data-style="space"] h1 { font-size: 1.6rem; line-height: 1.2; }
[data-style="space"] h2 { font-size: 1.08rem; }
[data-style="space"] :is(.eyebrow, .section-h, .hub-h, .group-h, .badge, .field > label:not(.switch), .seg button, .pill, .chip, .chips a[data-r], .ctx, .btn, .link-btn, .hub-tabs a, .hub-back, .grab-label, .book-row .rc) {
  font-family: var(--font-label); font-weight: 500; letter-spacing: 0; text-transform: lowercase;
}
[data-style="space"] .field > label .muted { text-transform: none; }
[data-style="space"] :is(.section-h, .group-h, .eyebrow) { color: var(--muted); }
[data-style="space"] .reader .ch { font-weight: 500; color: var(--text); }
[data-style="space"] .reader .vn { font-weight: 500; color: var(--muted); }
[data-style="space"] .reader :is(.b-s1, .b-s2) { font-weight: 500; }
[data-style="space"] .reader .fn { color: var(--muted); }
[data-style="space"] .reader .b-r a[data-r] { color: var(--muted); text-decoration-color: var(--edge); }

/* surfaces: thin frames on the page, no lift */
[data-style="space"] :is(.card, .list, .continue) { background: var(--panel); border: 1px solid var(--edge); box-shadow: none; }
[data-style="space"] .continue .go { border-radius: var(--r-item); background: var(--text); color: var(--bg); font-weight: 500; }
[data-style="space"] .pane-hub { border-color: var(--edge); box-shadow: none; }
[data-style="space"] :is(.hub-tabs, .pane-bible .rd-bar) { border-color: var(--sep); }
[data-style="space"] .hub-hint { background: transparent; border: 1px solid var(--edge); color: var(--text); box-shadow: none; }
[data-style="space"] .quote { border-left: 1px solid var(--strong); background: transparent; }
[data-style="space"] :is(.row, .sec-row, .book-row, .nrow):hover { background: var(--well); }

/* controls: ink words on thin hairlines; the main action and a chosen control are set in ink */
[data-style="space"] :is(.pill, .chip, .chips a[data-r], .ctx) { background: transparent; border-color: var(--edge); box-shadow: none; }
[data-style="space"] :is(.pill, .chip, .chips a[data-r], .ctx):hover { background: var(--well); border-color: var(--strong); }
[data-style="space"] :is(.chip b, .ctx svg) { color: var(--text); }
[data-style="space"] .ctx.k-j { background: transparent; color: var(--text); border-color: var(--edge); }
[data-style="space"] .btn { background: transparent; border: 1px solid var(--edge); color: var(--text); box-shadow: none; font-size: .86rem; }
[data-style="space"] .btn:hover { border-color: var(--text); }
[data-style="space"] .btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
[data-style="space"] .btn.primary:hover { background: color-mix(in srgb, var(--text) 86%, var(--bg)); }
[data-style="space"] .seg { background: transparent; border: 1px solid var(--edge); box-shadow: none; }
[data-style="space"] .seg button { color: var(--muted); border-radius: var(--r-item); }
[data-style="space"] .seg button:hover { color: var(--text); background: var(--well); }
[data-style="space"] .seg button.on { background: var(--text); color: var(--bg); box-shadow: none; }
/* round buttons become small square frames */
[data-style="space"] :is(.icon-btn, .hub-btn) { background: transparent; border: 1px solid var(--edge); color: var(--text); border-radius: var(--r-item); box-shadow: none; }
[data-style="space"] :is(.icon-btn, .hub-btn):hover { border-color: var(--text); background: var(--well); }
[data-style="space"] span.icon-btn { border-color: transparent; }
/* tabs: the open one is ink with a hairline beneath */
[data-style="space"] .hub-tabs a { color: var(--muted); }
[data-style="space"] .hub-tabs a:hover { color: var(--text); }
[data-style="space"] .hub-tabs a.on, [data-style="space"] .hub-tabs a.on:hover { color: var(--text); background: none; }
[data-style="space"] .hub-tabs a.on svg { background: none; }
[data-style="space"] .hub-tabs a.on span { text-decoration: underline 1px var(--text); text-underline-offset: 5px; }
/* read ticks: a square box with an ink check */
[data-style="space"] .sec-row .tick { border-radius: 2px; border-width: 1px; border-color: var(--strong); }
[data-style="space"] .sec-row.read .tick { background: transparent; border-color: var(--text); }
[data-style="space"] .sec-row.read .tick::after { border-color: var(--text); border-width: 0 0 1.5px 1.5px; }
/* progress: a fine plain line */
[data-style="space"] .bar-line { height: 3px; border-radius: 0; background: var(--sep); }
[data-style="space"] .bar-line i { border-radius: 0; background: var(--text); }
/* search: an underline, no box */
[data-style="space"] .search-box input { background: transparent; border: 0; border-bottom: 1px solid var(--strong); border-radius: 0; box-shadow: none; }
[data-style="space"] .search-box input:focus { border-bottom-color: var(--text); outline: none; box-shadow: none; }

/* motion: a page arrives through four soft opacity steps */
@keyframes sp-shade { 0% { opacity: .25; } 25% { opacity: .5; } 50% { opacity: .75; } 75%, 100% { opacity: 1; } }
[data-style="space"] :is(.hub-col, .bible-col)[data-enter] { animation: sp-shade .28s steps(1, end) backwards; }
[data-style="space"]::view-transition-old(root), [data-style="space"]::view-transition-new(root) { animation-timing-function: steps(4, end); }