:root {
  color-scheme: light dark;
  --bg: #fff;
  --fg: #121212;
  --muted: #8a8a8a;
  --rule: #d9d9d9;
  --hover: #f3f3f3;
  --mark: #fdf1c0;
  --mark-strong: #fbdc6a;
  --card: #fff;
  --card-rule: #e4e2dc;
  --card-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 4px 16px rgb(0 0 0 / .06);
  --shadow: 0 2px 12px rgb(0 0 0 / .14);
  --nav: 72px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121212; --fg: #ececec; --muted: #8e8e8e; --rule: #3a3a3a; --hover: #222; --mark: #4a3f14; --mark-strong: #7a6516;
    --card: #1f1f1e; --card-rule: #3a3936; --card-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 6px 20px rgb(0 0 0 / .35); --shadow: 0 2px 12px rgb(0 0 0 / .6); }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }

/* Top bar */
.bar {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 22px;
  padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
  background: var(--bg);
}
.select {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 2px; border-bottom: 1px solid var(--rule);
  font-size: 1rem; font-weight: 600;
}
.select:hover { border-color: var(--fg); }
.caret { width: 10px; height: 7px; }
svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.panel {
  position: absolute; top: 100%; left: 50%; translate: -50% 0;
  width: min(360px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto;
  padding: 8px; border-radius: 14px; background: var(--bg); box-shadow: var(--shadow); border: 1px solid var(--rule);
}
.list { list-style: none; margin: 0; padding: 0; }
.list button, .back { width: 100%; padding: 10px 12px; border-radius: 8px; text-align: left; }
.panel button:hover { background: var(--hover); }
.panel [aria-current] { font-weight: 700; }
.back { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.back svg { width: 8px; height: 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 4px; padding: 4px; }
.grid button { aspect-ratio: 1; border-radius: 8px; }
.offline { margin: 0; padding: 2px 12px 10px; font-size: .85rem; color: var(--muted); }
.offline progress { display: block; width: 100%; margin-bottom: 6px; accent-color: var(--fg); }
.list .download { width: auto; margin: 0 12px 8px; padding: 6px 0; font-size: .85rem; border-bottom: 1px solid var(--rule); border-radius: 0; }

.link { padding: 6px 2px; font-weight: 600; color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.link:hover, .link[aria-current] { border-color: var(--fg); }

/* Stories */
.page { max-width: 720px; margin: 0 auto; padding: 24px 20px 96px; font-size: 1.05rem; line-height: 1.6; }
.page .notice { margin: 32px 0; }
.add { display: flex; align-items: center; gap: 12px; }
.add input { flex: 1; margin: 0; }
.add button:not(.primary) { font-size: .8rem; color: var(--muted); }
.stories, .rows { list-style: none; margin: 16px 0 0; padding: 0; }
.stories li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.stories .add { flex: 1; }
.name { font-size: 1.25rem; font-weight: 600; color: inherit; text-decoration: none; }
.name:hover { text-decoration: underline; }
.count { font-size: .85rem; color: var(--muted); }
.stories .actions { margin: 0 0 0 auto; }
.share { margin: 0 0 8px; text-align: center; font-size: .9rem; color: var(--muted); }
.share p { margin: 10px 0; }
.share .add, .share .actions { justify-content: center; color: var(--fg); }
.share a.primary { text-decoration: none; }
.row.plain { padding-left: 0; }
.row { position: relative; padding: 24px 0 24px 28px; border-bottom: 1px solid var(--rule); }
.row.dragging { opacity: .4; }
.row.drop-before { box-shadow: 0 -2px 0 var(--fg); }
.row.drop-after { box-shadow: 0 2px 0 var(--fg); }
.handle { position: absolute; left: 0; top: 26px; padding: 2px 6px 2px 0; cursor: grab; color: var(--muted); }
.handle svg { display: block; width: 10px; height: 16px; }
.handle path { stroke-width: 2.4; }
.ref { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.ref:hover { color: var(--fg); }
.quote { margin: 6px 0 12px; color: var(--muted); }
.row .card-body { margin: 0; font-size: 1.15rem; }

/* Sync */
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--rule); vertical-align: 1px; }
.dot.idle { background: #2e9e5b; }
.dot.syncing { background: #d9a400; animation: pulse 1s ease-in-out infinite alternate; }
.dot.error { background: #c0392b; }
@keyframes pulse { to { opacity: .3; } }
.status { text-align: center; color: var(--muted); }
.error { color: #c0392b; }
.fields { margin-top: 24px; }
.fields label { display: block; margin-bottom: 14px; font-size: .8rem; color: var(--muted); }
.fields label input, .fields label select { margin: 4px 0 0; font-size: 1rem; color: var(--fg); }
.hint { margin: 0 0 20px; color: var(--muted); }
.help { margin-top: 40px; font-size: .9rem; color: var(--muted); }
.help h2 { margin: 0 0 6px; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg); }
.help p { margin: 0 0 12px; }
button:disabled { opacity: .5; cursor: default; }
.dialog {
  position: fixed; z-index: 5; top: 20vh; left: 50%; translate: -50% 0; width: min(380px, calc(100vw - 32px));
  padding: 20px; border-radius: 16px; border: 1px solid var(--rule); background: var(--bg); box-shadow: var(--shadow);
}
.dialog p { margin: 0 0 12px; }

/* Reader */
.reader { padding: 24px 20px calc(var(--nav) + 48px); }
.chapter { max-width: 720px; margin: 0 auto; }
.heading {
  margin: 24px 0 32px; text-align: center;
  font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.text { position: relative; font-size: 1.25rem; line-height: 2; }
.text p { margin: 0; text-indent: 1.5em; }
.text > p:first-child, .text > h3 + p { text-indent: 0; }
.text h3 { margin: 1.6em 0 .2em; font-size: 1em; font-weight: 700; line-height: 1.4; }
.text h3:first-child { margin-top: 0; }
.text h3.title { text-align: center; font-size: .8em; font-weight: 400; color: var(--muted); margin-bottom: 1em; }
.text .colophon { margin-top: 1.6em; text-indent: 0; font-size: .7em; font-style: italic; line-height: 1.6; color: var(--muted); }
/* Poetry: an empty .q marker starts a line, indented by its level; the verse stays one inline span. */
.text p:has(.q) { text-indent: 0; }
.q::before { content: '\\A'; white-space: pre; }
.q::after { content: ''; display: inline-block; width: 1em; }
.q[data-l="2"]::after { width: 2.5em; }
.num.q::after { width: 0; }
.num.q { margin-left: 1em; }
.num.q[data-l="2"] { margin-left: 2.5em; }
.para > .num.q:first-child::before { content: none; }
/* Divine name as print KJVs set it: a capital, then small caps. */
.dn { display: inline-block; text-indent: 0; text-transform: lowercase; font-variant: small-caps; }
.dn::first-letter { text-transform: uppercase; }
.ins { font-variant: small-caps; }
.fn { vertical-align: super; margin: 0 .15em; padding: 0 .25em; font-size: .5em; font-style: italic; line-height: 1; color: var(--muted); }
.fn[aria-expanded="true"] { color: var(--fg); font-weight: 700; }
.note {
  display: block; margin: .4em 0 .6em; padding: .6em .9em; text-indent: 0;
  font-size: .6em; line-height: 1.5; border-left: 2px solid var(--rule); background: var(--hover); border-radius: 0 8px 8px 0;
}
.num { vertical-align: super; margin-right: .3em; font-size: .5em; font-weight: 500; line-height: 1; color: var(--muted); user-select: none; }
.num:hover { color: var(--fg); }
.verse { scroll-margin-bottom: 65vh; border-radius: 4px; }
.verse[aria-current] { background: var(--hover); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
::highlight(note) { background-color: var(--mark); }
::highlight(note-active) { background-color: var(--mark-strong); }
.bubble { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; margin-left: .3em; font-size: .5em; line-height: 1; color: var(--muted); }
.bubble svg { width: 1.5em; height: 1.35em; }
.notice { text-align: center; color: var(--muted); }

/* Round icon buttons: the add-note offer and the composer's save. */
.round {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border: 1px solid var(--card-rule); border-radius: 50%; background: var(--card); color: var(--fg);
}
.round svg { width: 18px; height: 18px; }
.round path { stroke-width: 1.5; }
.round:hover:not(:disabled) { border-color: var(--fg); }
.add-note { position: absolute; z-index: 2; width: 36px; height: 36px; box-shadow: var(--shadow); }
.chapter { position: relative; }

/* Note cards. A bottom sheet here; margin columns from 1100px (below). */
.margin { display: none; font-size: .95rem; line-height: 1.5; }
.margin.open {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
  min-height: 0 !important; max-height: 60vh; overflow-y: auto;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--bg); border-radius: 18px 18px 0 0; box-shadow: 0 -4px 24px rgb(0 0 0 / .25);
}
.sheet-close { display: block; margin: 0 0 8px auto; }
.margin .card:not(.in-sheet, .composer) { display: none; }
.card {
  margin-bottom: 12px; padding: 14px 16px 12px; cursor: pointer;
  border: 1px solid var(--card-rule); border-radius: 16px; background: var(--card); box-shadow: var(--card-shadow);
  transition: border-color .15s, top .15s;
}
.card:hover, .card.active, .card:focus-within { border-color: var(--muted); }
.card:focus-visible { outline-offset: 2px; border-radius: 16px; }
.card.composer { cursor: auto; }
.card p { margin: 0; text-indent: 0; }
.card-quote, .quote {
  padding-left: 10px; border-left: 3px solid var(--rule); color: var(--muted);
}
.card-quote { margin-bottom: 10px !important; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; margin-top: 10px; font-size: .8rem; color: var(--muted); }
.card-foot:empty, .card-foot:not(:has(:not(.sr))) { display: none; }
.card-foot .chip { margin-right: auto; }
.chip {
  display: inline-block; width: auto; max-width: 100%; margin: 0; padding: 3px 10px; font-size: .8rem;
  color: var(--muted); text-decoration: none; border: 1px solid var(--card-rule); border-radius: 99px; background: transparent;
}
a.chip:hover, select.chip:hover { color: var(--fg); border-color: var(--muted); }
.story-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.story-row input.chip { flex: 1; min-width: 8em; }
.note-editor textarea {
  display: block; width: 100%; min-height: 1.5em; margin: 0; padding: 0; resize: none; overflow: hidden;
  border: 0; border-radius: 0; background: transparent; font: inherit; color: inherit;
}
.note-editor textarea:focus { outline: none; }
.quiet { padding: 4px 0; color: var(--muted); }
.quiet:hover { color: var(--fg); }
.danger, .actions .danger { color: #c0392b; font-weight: 600; }
.sr:not(:focus-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; font-size: .8rem; color: var(--muted); }
.actions button { padding: 4px 0; color: var(--muted); }
.actions button:hover { color: var(--fg); }
.primary, .actions .primary { padding: 6px 16px; border-radius: 99px; background: var(--fg); color: var(--bg); font-weight: 600; }
.primary:hover, .actions .primary:hover { color: var(--bg); opacity: .85; }
.actions select { display: inline-block; width: auto; max-width: 12em; margin: 0; padding: 3px 8px; color: var(--muted); }
select, input {
  display: block; width: 100%; margin: 0 0 8px; padding: 9px 11px;
  font: inherit; color: inherit; background: transparent; border: 1px solid var(--rule); border-radius: 8px;
}
select:focus, input:focus { outline: none; border-color: var(--fg); }
::placeholder { color: var(--muted); opacity: .7; }
.row .note-editor { padding: 12px 14px; border: 1px solid var(--card-rule); border-radius: 16px; background: var(--card); font-size: .95rem; }

/* Prev / next: bottom corners on phones, mid-height on tablets, in the top bar once there are margins. */
.nav {
  --nav: 48px;
  position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1;
  display: grid; place-items: center; width: var(--nav); height: var(--nav);
  border-radius: 50%; background: var(--bg); color: var(--fg); box-shadow: var(--shadow);
}
.nav svg { width: 40%; height: 40%; }
.nav.prev { left: 16px; }
.nav.next { right: 16px; }

@media (min-width: 700px) {
  .reader { padding: 32px calc(var(--nav) + 40px) 96px; }
  .text { font-size: 1.6rem; line-height: 2.1; }
  .nav { --nav: 72px; top: 50%; bottom: auto; translate: 0 -50%; }
  .nav.prev { left: 20px; }
  .nav.next { right: 20px; }
}

/* A margin of notes on the right, and from 1360px on both sides. */
@media (min-width: 1100px) {
  .reader { padding: 32px 24px 96px; }
  .nav { --nav: 40px; top: calc(var(--bar) + 10px); translate: none; z-index: 3; box-shadow: none; border: 1px solid var(--rule); }
  .chapter { max-width: none; display: grid; grid-template-columns: minmax(0, 720px) minmax(220px, 300px); column-gap: 32px; justify-content: center; }
  .heading, .text { grid-column: 1; }
  .bubble, .sheet-close { display: none; }
  .margin.right, .margin.right.open {
    display: block; grid-column: 2; grid-row: 2; position: relative; z-index: auto;
    max-height: none; overflow: visible; padding: 0; border-radius: 0; box-shadow: none; background: none;
  }
  .margin .card, .margin .card:not(.in-sheet, .composer) { display: block; position: absolute; left: 0; right: 0; margin: 0; }
}
@media (min-width: 1360px) {
  .chapter { grid-template-columns: minmax(220px, 300px) minmax(0, 720px) minmax(220px, 300px); }
  .heading, .text { grid-column: 2; }
  .margin.left { display: block; grid-column: 1; grid-row: 2; position: relative; }
  .margin.right, .margin.right.open { grid-column: 3; }
}

/* Versions */
.addons h2 { margin: 36px 0 0; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.addons .rows { margin-top: 0; }
.addons .row { padding: 18px 0; }
.addons .meta, .addons .state { margin: 2px 0 0; font-size: .9rem; color: var(--muted); }
.addons .state progress { display: block; width: 100%; margin: 6px 0; accent-color: var(--fg); }
.addons .add { margin-top: 12px; }
.addons .error { margin: 8px 0 0; }
.panel .more { display: block; margin: 4px 12px 8px; font-size: .85rem; }

/* Shell: a fixed bar, measured into --bar by App, and the content under it. */
:root { --bar: 96px; }
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 3; }
#app { padding-top: var(--bar); }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.verse, .row { scroll-margin-top: calc(var(--bar) + 24px); }
.panel .add { margin: 8px 12px 4px; }
.panel .add input { margin: 0; padding: 6px 10px; font-size: .9rem; }
.panel .add .primary { padding: 5px 12px; font-size: .85rem; }
.panel .count { margin-left: 6px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0 12px 8px; font-size: .8rem; color: var(--muted); }
.row-actions span { flex: 1 0 100%; }
.row-actions .danger { color: #c0392b; }
.row-actions button, .row-actions a { width: auto; padding: 2px 0; border: 0; color: var(--muted); font-weight: 500; }
.row-actions button:hover, .row-actions a:hover { color: var(--fg); background: none; }
.bar .nav { top: calc(var(--bar) + 10px); }

/* Notes from a version numbered differently. */
.foreign { max-width: 720px; margin: 32px auto 0; font-size: .9rem; color: var(--muted); }
.foreign summary { cursor: pointer; }
.foreign .row { padding: 14px 0; }
.foreign .card-body { font-size: 1rem; color: var(--fg); }

/* Import dialog */
.dialog textarea { display: block; width: 100%; margin: 0 0 8px; padding: 9px 11px; font: inherit; color: inherit; background: transparent; border: 1px solid var(--rule); border-radius: 8px; resize: vertical; }
.dialog.import { top: 10vh; max-height: 80vh; overflow-y: auto; width: min(560px, calc(100vw - 32px)); }
.dialog.import .page { padding: 12px 0 0; }

/* Story view: the reader on the left, the story on the right, each scrolling on its own. */
.tabs { display: none; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: calc(100vh - var(--bar)); }
.split .pane { min-width: 0; position: relative; overflow: hidden; }
.split .pane.bible > .reader, .split .pane.story { height: 100%; overflow-y: auto; }
.split .pane.story { border-left: 1px solid var(--rule); }
.split .reader { padding: 24px 64px calc(var(--nav) + 48px); }
.split .chapter { display: block; max-width: 720px; margin: 0 auto; }
.split .text { font-size: 1.25rem; line-height: 2; }
.split .nav { position: absolute; top: 50%; bottom: auto; translate: 0 -50%; z-index: 1; box-shadow: var(--shadow); border: 0; --nav: 40px; }
.split .nav.prev { left: 12px; }
.split .nav.next { right: 12px; }
.split .bubble { display: inline-flex; }
.split .margin, .split .margin.right { display: none; }
.split .margin.right.open {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; grid-column: auto;
  max-height: 60vh; overflow-y: auto; padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--bg); border-radius: 18px 18px 0 0; box-shadow: 0 -4px 24px rgb(0 0 0 / .25);
}
.split .margin .card { position: static; margin-bottom: 12px; }
.split .margin .card:not(.composer) { display: none; }
.split .sheet-close { display: none; }
.row:focus { outline: none; }
.row:focus-visible, .row.active { box-shadow: -3px 0 0 var(--mark-strong); }

@media (max-width: 1099px) {
  .tabs { display: flex; justify-content: center; gap: 24px; padding: 8px 0 0; }
  .tabs [role="tab"] { padding: 6px 2px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; }
  .tabs [aria-selected="true"] { color: var(--fg); border-color: var(--fg); }
  .split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .split[data-tab="bible"] .pane.story, .split[data-tab="story"] .pane.bible { display: none; }
  .split .pane.story { border: 0; }
}

/* Search pane: a column beside the content, an overlay where there is no room. */
.shell { display: flex; align-items: flex-start; }
.shell-main { flex: 1; min-width: 0; }
.bar .icon { display: grid; place-items: center; padding: 6px; }
.bar .icon svg { width: 18px; height: 18px; }
.bar .icon[aria-expanded="true"] { border-color: var(--fg); }
.search-pane {
  position: sticky; top: var(--bar); flex: none; width: min(400px, 40vw); height: calc(100vh - var(--bar)); overflow-y: auto;
  padding: 12px 16px 48px; border-left: 1px solid var(--rule); font-size: .95rem; line-height: 1.5;
}
.search-head { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.search-head input { margin: 0; }
.search-pane .status, .search-pane .count { margin: 8px 0; font-size: .85rem; color: var(--muted); text-align: left; }
.search-pane progress { display: block; width: 100%; margin-bottom: 6px; accent-color: var(--fg); }
.search-empty { color: var(--muted); }
.search-empty p { margin: 0 0 10px; }
.search-empty .example { color: var(--fg); font-weight: 600; text-decoration: underline; }
.search-empty .hint { font-size: .85rem; }
.result { display: block; padding: 10px 8px; margin: 0 -8px; border-radius: 10px; color: inherit; text-decoration: none; }
.result:hover, .result.active { background: var(--hover); }
.result.reference { font-weight: 600; }
.result .ref { display: block; margin-bottom: 2px; }
.result mark { background: var(--mark); color: inherit; border-radius: 2px; }
.search-notes h2 { margin: 12px 0 4px; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.result.note .card-body { display: block; }
.result.note .card-quote { display: block; margin: 4px 0 !important; white-space: normal; }
.result.note .chip { margin-top: 4px; }
.scope { display: flex; align-items: center; gap: 12px; margin: 8px 0; font-size: .85rem; }
.search-pane .more { display: inline-block; margin: 12px 0; }
.split .pane.story { border-right: 0; }
@media (max-width: 1099px) {
  .search-pane { position: fixed; inset: var(--bar) 0 0 0; z-index: 3; width: auto; height: auto; border: 0; background: var(--bg); }
}

/* Phone bar: the book picker and search stay in the row; the rest folds behind More. */
.bar-rest { display: contents; }
.more-toggle { display: none; }
/* A story name is anything: it never gets to push the bar onto a second row. */
.story-picker .select-text { display: block; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 479px) {
  .more-toggle { display: inline-flex; align-items: center; gap: 6px; }
  .more-toggle .dot { margin: 0 0 0 2px; }
  .bar.more-open .more-toggle .caret { rotate: 180deg; }
  .bar-rest {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 22px;
    padding: 14px 16px; background: var(--bg); border-bottom: 1px solid var(--rule); box-shadow: var(--shadow);
  }
  .bar.more-open .bar-rest { display: flex; }
}