:root {
  --sea: #dfe6ee;
  --land: #f1ede3;
  --coast: #b9b3a5;
  --water: #7d9cc4;
  --bg: #f5f4f0;
  --panel: #fefefc;
  --dock: #ffffff;
  --ink: #1f2024;
  --muted: #686a70;
  --line: #e2e1dc;
  --accent: #2f4a7a;
  --accent-soft: #e4e9f2;
  --sel: #fbefb8;
  --good: #3d7a50; --evil: #a5463a;
  --shadow: 0 1px 2px rgba(20, 25, 40, .06), 0 8px 24px rgba(20, 25, 40, .08);
  --read-size: 19px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151618; --panel: #1c1d21; --dock: #2a2d35; --ink: #e9e7e2; --muted: #9c9a94; --line: #32343a;
    --accent: #9fb6e2; --accent-soft: #252b38; --sel: #4a4120; --good: #8cc49c; --evil: #e39a8e; --shadow: 0 8px 24px rgba(0, 0, 0, .4);
    --sea: #1a2230; --land: #2a2925; --coast: #4a4740; --water: #5a7aa6;
    --glow-mix: #fff; --glow-ink: #14202e;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #151618; --panel: #1c1d21; --dock: #2a2d35; --ink: #e9e7e2; --muted: #9c9a94; --line: #32343a;
  --accent: #9fb6e2; --accent-soft: #252b38; --sel: #4a4120; --good: #8cc49c; --evil: #e39a8e; --shadow: 0 8px 24px rgba(0, 0, 0, .4);
  --sea: #1a2230; --land: #2a2925; --coast: #4a4740; --water: #5a7aa6;
  --glow-mix: #fff; --glow-ink: #14202e;
  color-scheme: dark;
}

/* Sepia: a warm light page, picked in the settings */
:root[data-page="sepia"] {
  --bg: #f3ead7; --panel: #f9f2e3; --dock: #fdf8ee; --ink: #3a2e22; --muted: #7a6a58; --line: #e2d5bc;
  --accent: #7a4b2a; --accent-soft: #efe0c8; --sel: #f3dc9a; --land: #efe5cf;
}
/* Words of Jesus, when red letters are on */
:root { --wj: #b3261e; }
:root[data-theme="dark"] { --wj: #f08a7e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wj: #f08a7e; } }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
/* No pinch or double-tap zoom: the app sizes its own text (the Aa menu). The atlas map in its frame still zooms. */
html { touch-action: pan-x pan-y; }
body {
  background: var(--bg); color: var(--ink);
  font: 15px/1.5 "IBM Plex Sans", system-ui, sans-serif;
  display: flex; flex-direction: column; overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--accent); }

/* Top bar */
.bar {
  display: flex; align-items: center; gap: 6px; padding: 8px 16px;
  border-bottom: 1px solid var(--line); background: var(--panel); flex: none;
}
.bar-logo { flex: none; color: var(--ink); margin: 0 2px 0 4px; }
.title-btn {
  display: flex; align-items: center; gap: 6px; border: 0; background: none;
  font-weight: 600; font-size: 17px; padding: 6px 8px; border-radius: 8px;
}
.title-btn:hover, .icon:hover { background: var(--accent-soft); }
.caret { color: var(--muted); font-size: 12px; }
.nav { display: flex; gap: 2px; }
.icon {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; min-width: 34px; height: 34px; border-radius: 8px;
  font-size: 15px; color: var(--muted); padding: 0 6px;
}
.icon[hidden] { display: none; }
#prev, #next { font-size: 24px; line-height: 1; }
.spacer { flex: 1; }
.badge {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 6px; padding: 1px 6px; margin-right: 6px;
}
/* The translation button and its menu (styled like the text size menu). */
.ver-wrap { position: relative; margin: 0 0 0 4px; }
.ver-btn { display: flex; align-items: center; gap: 3px; font-family: inherit; background: var(--panel); cursor: pointer; padding: 3px 6px; margin: 0; max-width: 168px; white-space: nowrap; }
.ver-btn #version-name { overflow: hidden; text-overflow: ellipsis; }
.ver-btn .caret { font-weight: 400; }
.size-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 150px; padding: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.size-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none;
  padding: 5px 10px; border-radius: 7px; text-align: left; font-size: 14px;
}
.size-menu button:hover, .size-menu button:focus-visible { background: var(--accent-soft); outline: none; }
.size-menu button[aria-checked=true] { color: var(--accent); font-weight: 600; }
.ver-menu { left: 0; right: auto; width: 270px; max-height: min(70vh, 560px); overflow-y: auto; }
.ver-menu button { flex-direction: column; align-items: flex-start; gap: 0; padding: 5px 10px; }
.ver-menu button b { font-weight: 600; font-size: 14px; }
.ver-menu button small { color: var(--muted); font-size: 12px; font-weight: 400; }
.ver-menu button[aria-checked=true] { background: var(--accent-soft); }
.menu-head { padding: 8px 10px 2px; font-size: 12px; font-weight: 600; color: var(--ink); }
.menu-head:not(:first-child) { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.menu-group { padding: 4px 10px 2px; font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.settings-wrap { position: relative; }
.settings {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 400px; max-height: calc(100dvh - 80px); overflow-y: auto;
  padding: 6px 16px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.16);
  font-size: 14px; text-align: left;
}
.settings-head { display: flex; align-items: center; justify-content: space-between; }
.settings h2 { font-size: 16px; margin: 6px 0; }
.settings h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 12px 0 6px; }
.settings .seg { width: max-content; }
.settings-sizes button { padding: 2px 9px; font-family: "Source Serif 4", "Noto Serif SC", serif; line-height: 1.3; min-height: 34px; }
.settings-parts { display: flex; flex-wrap: wrap; gap: 6px; }
/* A chip whose text is the switch: outlined and muted when off, filled with the accent when on */
.settings-chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: none; border-radius: 999px;
  padding: 5px 12px; font-size: 13px; color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent);
  transition: background .15s, color .15s, border-color .15s;
}
.settings-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--panel); text-decoration: none; }
.settings-chip:hover { border-color: var(--accent); }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.settings-row .seg button { padding: 4px 11px; }

/* Context parts the reader turned off in the settings */
html.hide-orig #ctx-orig, html.hide-harmony #ctx-harmony, html.hide-topics #ctx-topics, html.hide-videos #ctx-videos, html.hide-comm #ctx-comm,
html.hide-intro #ctx-text > .intro, html.hide-mark #ctx-mark { display: none !important; }
.tabs[hidden], .tabs button[hidden] { display: none; }

/* The Tours button glows softly and brightly until it is first used */
.dock #tours-btn.new { --glow: #9fa8ff; color: var(--glow-ink, inherit); animation: tours-glow 2.2s ease-in-out infinite; }
.dock #tours-btn.new svg { color: var(--glow-ink, var(--accent)); }
@keyframes tours-glow {
  0%, 100% { background: color-mix(in srgb, var(--glow) 18%, var(--glow-mix, transparent)); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--glow) 40%, transparent); }
  50% { background: color-mix(in srgb, var(--glow) 55%, var(--glow-mix, transparent)); box-shadow: 0 0 24px 8px color-mix(in srgb, var(--glow) 85%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .dock #tours-btn.new { animation: none; background: color-mix(in srgb, var(--glow) 45%, var(--glow-mix, transparent)); box-shadow: 0 0 18px 5px color-mix(in srgb, var(--glow) 70%, transparent); } }

/* Panels */
.panels { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); min-height: 0; }
.reader { overflow-y: auto; container-type: inline-size; padding: 32px 16px 48px; scroll-behavior: smooth; }
.chapter {
  max-width: 680px; margin: 0 auto;
  font-family: "Source Serif 4", Georgia, serif; font-size: var(--read-size); line-height: 1.75;
}
/* The book group's emblem by the chapter title (img/emblems/*.svg, drawn in black and used as a mask, so any page colour can tint it) */
.chapter { position: relative; isolation: isolate; }
.chapter .emblem { position: absolute; z-index: -1; right: -8px; top: -30px; width: 176px; height: 176px; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 55%, transparent); -webkit-mask: var(--em) center / contain no-repeat; mask: var(--em) center / contain no-repeat; }
:root.no-emblem .chapter .emblem, .chapter .emblem:not([data-g]), .chapter .emblem[data-g=""] { display: none; }
.emblem[data-g="law"] { --em: url(img/emblems/law.svg); }
.emblem[data-g="history"] { --em: url(img/emblems/history.svg); }
.emblem[data-g="poetry"] { --em: url(img/emblems/poetry.svg); }
.emblem[data-g="major"] { --em: url(img/emblems/major.svg); }
.emblem[data-g="minor"] { --em: url(img/emblems/minor.svg); }
.emblem[data-g="gospels"] { --em: url(img/emblems/gospels.svg); }
.emblem[data-g="acts"] { --em: url(img/emblems/acts.svg); }
.emblem[data-g="paul"] { --em: url(img/emblems/paul.svg); }
.emblem[data-g="general"] { --em: url(img/emblems/general.svg); }
.emblem[data-g="apocalypse"] { --em: url(img/emblems/apocalypse.svg); }
/* With an emblem, the title block is tall enough that the verses start below the drawing, and a soft halo of the accent sits behind it. */
:root:not(.no-emblem) .chapter .emblem[data-g]:not([data-g=""]) ~ h1 { min-height: 132px; display: flex; flex-direction: column; justify-content: flex-end; padding-right: 170px; margin-bottom: .6em; }
:root:not(.no-emblem) .chapter .emblem[data-g]:not([data-g=""]) ~ h1::after { content: ""; position: absolute; z-index: -2; right: -70px; top: -100px; width: 300px; height: 300px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 65%); }
@media (max-width: 520px) {
  .chapter .emblem { width: 120px; height: 120px; top: -18px; right: -8px; }
  :root:not(.no-emblem) .chapter .emblem[data-g]:not([data-g=""]) ~ h1 { min-height: 104px; padding-right: 116px; }
  :root:not(.no-emblem) .chapter .emblem[data-g]:not([data-g=""]) ~ h1::after { width: 220px; height: 220px; right: -60px; top: -70px; }
}
.chapter h1 { font-size: 1.6em; font-weight: 600; margin: 0 0 .8em; line-height: 1.2; }
.chapter h1 small { display: block; font: 500 13px "IBM Plex Sans", sans-serif; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.chapter p { margin: 0; }
.v { border-radius: 4px; cursor: pointer; transition: background .15s; padding: 1px 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.v:hover { background: var(--accent-soft); }
.v.sel { background: var(--sel); }
.v.rng { background: var(--sel); }
/* Highlights: see-through, so a selected or highlighted verse still shows both */
.hl-y { --hl: rgba(250, 204, 21, .32); } .hl-g { --hl: rgba(74, 190, 110, .28); }
.hl-b { --hl: rgba(80, 150, 240, .26); } .hl-p { --hl: rgba(240, 100, 160, .24); }
.v[class*="hl-"] { background: var(--hl); }
.v.sel[class*="hl-"] { background: linear-gradient(var(--hl), var(--hl)), var(--sel); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hl-y { --hl: rgba(250, 204, 21, .2); } :root:not([data-theme="light"]) .hl-g { --hl: rgba(74, 190, 110, .2); }
  :root:not([data-theme="light"]) .hl-b { --hl: rgba(80, 150, 240, .22); } :root:not([data-theme="light"]) .hl-p { --hl: rgba(240, 100, 160, .2); }
}
.v.noted > sup::after { content: "•"; color: var(--accent); margin-left: 1px; }
/* 和合本, and two translations side by side: each verse its own block, the second under the first */
.chapter:lang(zh), .ctx-head blockquote:lang(zh), .v2:lang(zh), .xt:lang(zh) { font-family: "Source Serif 4", "Noto Serif SC", "Songti SC", serif; }
.chapter:lang(zh) h1 small, .chapter:lang(zh) sup { font-family: "IBM Plex Sans", sans-serif; }
.chapter.both .v { display: block; padding: 4px 6px; margin: 0 -6px 6px; }
.v2 { display: block; color: var(--muted); font-size: .9em; line-height: 1.65; margin-top: 2px; }
.chapter.both .v2:lang(zh), .ctx-head .v2:lang(zh) { font-size: .95em; }
.ctx-head .v2 { margin-top: 8px; }
/* With room for it, the two translations sit in columns, verse beside verse, both at full size. */
.cols-head { display: none; }
@container (min-width: 720px) {
  .chapter.both { max-width: 1040px; }
  .chapter.both .cols-head {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; margin: -.4em 0 .8em; padding-bottom: 6px;
    border-bottom: 1px solid var(--line); font: 600 12px "IBM Plex Sans", sans-serif; letter-spacing: .06em; color: var(--muted);
  }
  .chapter.both .v { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; padding: 6px 10px; margin: 0 -10px 4px; }
  .chapter.both .v2 { margin-top: 0; color: var(--ink); font-size: 1em; line-height: inherit; }
  .chapter.both .v2:lang(zh) { font-size: .97em; }
}
.v sup { font: 600 .55em "IBM Plex Sans", sans-serif; color: var(--accent); margin: 0 .25em 0 .1em; vertical-align: .55em; }
/* Reading choices from the settings: font, line spacing, verse numbers, a verse per line, red letters */
:root { --read-lh: 1.75; }
:root[data-spacing="compact"] { --read-lh: 1.5; }
:root[data-spacing="relaxed"] { --read-lh: 2.05; }
.chapter { line-height: var(--read-lh); }
:root[data-font="sans"] .chapter, :root[data-font="sans"] .chapter:lang(zh) { font-family: "IBM Plex Sans", "Noto Sans SC", "PingFang SC", system-ui, sans-serif; }
:root[data-font="kai"] .chapter:lang(zh), :root[data-font="kai"] .chapter .v2:lang(zh) { font-family: "Kaiti SC", "STKaiti", "KaiTi", "BiauKai", "Noto Serif SC", serif; }
:root.no-vnum .chapter .v > sup { font-size: 0; margin: 0; }
:root.no-vnum .chapter .v.noted > sup::after { font-size: calc(var(--read-size) * .55); }
:root.verse-lines .chapter .v { display: block; margin-bottom: .35em; }
:root.red-letters .wj { color: var(--wj); }
.chapter-foot { max-width: 680px; margin: 40px auto 0; display: flex; justify-content: space-between; gap: 8px; }
.pill { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 6px 14px; color: var(--muted); }
.pill:hover { border-color: var(--accent); color: var(--accent); }
.pill[hidden] { display: inline-block; visibility: hidden; }
.credit { max-width: 680px; margin: 28px auto 0; font-size: 12px; color: var(--muted); }

.text-btn { white-space: nowrap; border: 0; background: none; border-radius: 8px; padding: 6px 10px; font-weight: 500; color: var(--accent); margin-right: 4px; }
.text-btn:hover { background: var(--accent-soft); }

/* Tour card, pinned over the top of the text. Like the dock, the text behind it is frosted across the reader (::before,
   fading out downwards) so the card stands out from the verses scrolling under it; the card itself is ::after. */
.tour {
  position: sticky; top: -24px; z-index: 3; max-width: 680px; margin: -12px auto 20px; padding: 12px 14px; border-radius: 14px;
}
.tour::before, .tour::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.tour::before {
  left: 50%; width: calc(100cqw + 32px); transform: translateX(-50%); top: -24px; bottom: -30px;
  background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 30px), transparent); mask-image: linear-gradient(#000 calc(100% - 30px), transparent);
}
.tour::after {
  inset: 0; border-radius: inherit; background: var(--dock); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow);
}
.tour-head { display: flex; align-items: center; gap: 8px; }
.tour-head b { flex: 1; min-width: 0; }
.tour-head .icon { min-width: 28px; height: 28px; margin: -4px -6px -4px 0; font-size: 18px; }
.tour p { margin: 6px 0 10px; font-size: 14px; }
/* The step's AI picture runs across the card above its note, cropped to a wide strip; tapped, it shows whole. */
.tour-body { display: flex; flex-direction: column; }
.tour-pic { position: relative; width: 100%; margin: 8px 0 2px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--line); cursor: zoom-in; }
.tour-pic img { display: block; width: 100%; height: auto; }
.tour-pic:not(.big) img { aspect-ratio: 21 / 9 !important; object-fit: cover; max-height: 30vh; }
.tour-pic i { position: absolute; right: 6px; bottom: 6px; padding: 0 4px; border-radius: 4px; font: 600 10px/14px system-ui, sans-serif; font-style: normal; color: #fff; background: rgb(0 0 0 / .45); }
.tour-pic.big { cursor: zoom-out; }
.tour-pic.big img { max-height: 45vh; object-fit: contain; background: #000; }
/* A step with both a picture and a map shows one at a time, switched by the Picture / Map tabs in the button row;
   either takes the whole strip. */
.tour-media { display: flex; gap: 8px; margin: 8px 0 2px; --rh: clamp(110px, 24vh, 190px); }
.seg.tour-mtabs { display: none; }
.tour:has(.tour-pic:not([hidden])):has(.tour-route:not([hidden])) .seg.tour-mtabs { display: flex; align-self: center; flex: none; }
.tour-mtabs button { width: 40px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.tour-mtabs span { display: none; } /* icons only; the words are the buttons' titles */
.tour-media[data-show="pic"]:has(.tour-pic:not([hidden])) .tour-route,
.tour-media[data-show="map"]:has(.tour-route:not([hidden])) .tour-pic { display: none; }
.tour-media .tour-pic { margin: 0; flex: 1 1 0; min-width: 0; }
.tour-route { position: relative; flex: 0 0 auto; height: var(--rh); aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--sea); }
.tour-media:is([data-show="map"], :not(:has(.tour-pic:not([hidden])))) .tour-route { flex: 1 1 auto; height: auto; aspect-ratio: 21 / 9; max-height: 30vh; }
.tour-media:has(.tour-pic.big) .tour-route { display: none; }
.tour-route iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; pointer-events: none; transition: opacity .3s; background: var(--sea); }
.tour-route.live iframe { opacity: 1; pointer-events: auto; }
.tour-route.live > svg.map { visibility: hidden; }
.tour-route .map { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.map .trail { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 0 5; stroke-linecap: round; opacity: .6; }
.map .leg { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.map .leg-arrow { fill: var(--accent); stroke: var(--panel); stroke-width: 1.5; }
.route-atlas { position: absolute; right: 6px; top: 6px; padding: 0 6px; border-radius: 4px; font: 600 11px/18px system-ui, sans-serif; color: #fff; background: rgb(0 0 0 / .45); text-decoration: none; }
.route-atlas:hover { background: rgb(0 0 0 / .65); }
/* A wide reader (a laptop or desktop) gives the card more room, so the picture and the map grow with it. */
@container (min-width: 820px) { .tour { max-width: min(960px, 100%); } .tour-media { --rh: clamp(150px, 31vh, 300px); } .tour-pic:not(.big) img { max-height: 40vh; } }
@media (max-width: 520px) { .tour-media { --rh: 104px; } .route-atlas { right: 4px; top: 4px; padding: 0 4px; font-size: 10px; line-height: 16px; } }
/* While touring, the card is the whole reading panel: the step's verses sit in it under the note and scroll inside it,
   and the chapter behind is put away until the tour ends. */
body.touring .reader { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 16px; }
body.touring .chapter, body.touring .chapter-foot, body.touring .credit { display: none; }
body.touring .dock-wrap { flex: none; margin-top: 14px; }
body.touring .dock-wrap::before { display: none; }
body.touring .tour { position: relative; top: 0; flex: 1 1 auto; min-height: 0; width: 100%; margin: 0 auto; display: flex; flex-direction: column; }
body.touring .tour::before { display: none; }
body.touring .tour-body { flex: 1 1 auto; min-height: 0; overflow: hidden; } /* the verses never run under the buttons */
/* Short windows: the picture and map give up height first, so the verses keep a few lines; very short ones drop them, and the dock. */
@media (min-width: 521px) {
  body.touring .tour-media { --rh: clamp(64px, min(24vh, 100dvh - 470px), 190px); }
  body.touring .tour-pic:not(.big) img, body.touring .tour-media:is([data-show="map"], :not(:has(.tour-pic:not([hidden])))) .tour-route { max-height: clamp(64px, min(40vh, 100dvh - 470px), 40vh); }
  body.touring .tour-pic.big img { max-height: max(120px, 100dvh - 380px); }
}
@container (min-width: 820px) { body.touring .tour-media { --rh: clamp(64px, min(31vh, 100dvh - 470px), 300px); } }
@media (min-width: 521px) and (max-height: 520px) { body.touring .tour-media, body.touring .dock-wrap { display: none; } }
.tour-verses { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0 0 10px; border-top: 1px solid var(--line); }
.tv-head { display: flex; align-items: baseline; gap: 8px; padding: 8px 0 2px; }
.tv-head b { flex: 1; min-width: 0; font-size: 13px; letter-spacing: .02em; color: var(--muted); }
.tv-head .text-btn { margin: -6px 0; padding-right: 2px; font-size: 13px; }
.tv-text { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 2px 14px;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), transparent); mask-image: linear-gradient(#000 calc(100% - 18px), transparent);
  font-family: "Source Serif 4", Georgia, serif; font-size: var(--read-size); line-height: var(--read-lh); }
:root[data-font="sans"] .tv-text { font-family: "IBM Plex Sans", "Noto Sans SC", "PingFang SC", system-ui, sans-serif; }
:root[data-font="kai"] .tv-text:lang(zh) { font-family: "Kaiti SC", "STKaiti", "KaiTi", "BiauKai", "Noto Serif SC", serif; }
:root.no-vnum .tv-text .v > sup { font-size: 0; margin: 0; }
:root.verse-lines .tv-text .v { display: block; margin-bottom: .35em; }
.tour-sound { display: inline-flex; align-items: center; gap: 4px; }
.tour-sound[aria-pressed="false"] { color: var(--muted); }
/* Play options: the speaker blue for the male voice, red for the female, grey and crossed out when off; the note green
   while the music is on */
#tour-opts { gap: 2px; padding-left: 10px; padding-right: 9px; }
#tour-opts .po-voice { color: var(--muted); }
#tour-opts[data-voice="Charon"] .po-voice { color: #3d7be0; }
#tour-opts[data-voice="Kore"] .po-voice { color: #d9534a; }
#tour-opts .po-music { color: var(--muted); opacity: .45; }
#tour-opts[data-music="on"] .po-music { color: #2f9e6a; opacity: 1; }
#tour-opts .po-caret { opacity: .6; margin-left: 1px; }
#tour-opts[aria-expanded="true"] { border-color: var(--accent); }
.tour-opts-menu { position: fixed; z-index: 30; display: grid; gap: 10px; min-width: 240px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--panel); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.tour-opts-menu[hidden] { display: none; }
.tour-opts-menu .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tour-opts-menu .seg button { padding: 4px 11px; }
.tour-opts-menu small { color: var(--muted); font-size: 12px; line-height: 1.45; max-width: 260px; }
.tour-year { font-weight: 600; color: var(--accent); }
.tour-ctl { display: flex; gap: 8px; }
.tour-bar { height: 2px; margin: -4px 0 10px; background: var(--line); border-radius: 1px; overflow: hidden; }
body:not(.playing) .tour-bar:not(.held) { visibility: hidden; } /* shown while playing, and held where a pause left it */
.tour-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
/* Play glows (the Tours button's periwinkle) to invite a tap; while playing, Pause gets a ring and only a faint glow. */
#tour-play { --glow: #9fa8ff; border-color: color-mix(in srgb, var(--glow) 80%, var(--line)); box-shadow: 0 0 14px 3px color-mix(in srgb, var(--glow) 65%, transparent); }
#tour-play[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--glow) 18%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 6px 1px color-mix(in srgb, var(--glow) 35%, transparent); }
/* Playback: the step's verses glow in turn */
@keyframes lit { 0% { background: var(--sel); box-shadow: 0 0 0 3px var(--sel); } 100% { background: var(--accent-soft); box-shadow: 0 0 0 0 transparent; } }
.v.lit { animation: lit 2.2s ease-out both; }
/* In the tour card every verse lights in turn, so each fades back to the page rather than staying marked. */
@keyframes lit-fade { 0% { background: transparent; } 20% { background: var(--sel); box-shadow: 0 0 0 3px var(--sel); } 100% { background: transparent; box-shadow: 0 0 0 0 transparent; } }
.tv-text .v.lit { animation: lit-fade 2.4s ease-out both; }
.tour-ctl .pill { text-decoration: none; font-size: 14px; }
.tour-ctl #tour-opts { margin-left: auto; } /* Play options, Play and Next sit together at the right */
.tour-ctl #tour-next { color: var(--accent); border-color: var(--accent); }
.pill:disabled { opacity: .45; cursor: default; border-color: var(--line); color: var(--muted); }
.tour-list { display: grid; gap: 8px; text-align: left; margin-top: 10px; }
.tour-group { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tour-group h3 { grid-column: 1 / -1; }
.tour-group h3 { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tour-group:first-child h3 { margin-top: 0; }
.tour-group h3 .ico { display: inline-flex; color: var(--accent); }
.tour-group h3 svg.line { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.tour-item { display: grid; align-content: start; gap: 2px; text-align: left; border: 1px solid var(--line); background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.tour-item:hover { border-color: var(--accent); }
.tour-item b { color: var(--ink); }
.tour-item span { font-size: 12px; color: var(--muted); }
.tour-item small { font-size: 13px; color: var(--muted); line-height: 1.4; }
.tour-text { display: grid; align-content: start; gap: 2px; min-width: 0; }
.tour-item.has-thumb { grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
.tour-thumb { width: 96px; height: 72px; object-fit: cover; border-radius: 7px; background: var(--line); }
.tours-hint { margin-top: 28px; }

/* Context panel */
.context { border-left: 1px solid var(--line); background: var(--panel); overflow-y: auto; padding: 20px; }
.sheet-handle { display: none; }
.ctx-empty { color: var(--muted); text-align: center; margin-top: 12vh; }
.ctx-logo img { display: block; margin: 0 auto 10px; opacity: .85; }
.hint-title { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.ctx-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.ctx-head h2 { font-size: 18px; margin: 0; flex: 1; }
#sheet-x { font-size: 22px; margin: -6px -8px -6px 0; }
.ctx-head .vn { font-size: .62em; color: var(--accent); font-weight: 600; margin-right: 2px; font-family: "IBM Plex Sans", sans-serif; }
.ctx-head blockquote {
  margin: 0 0 16px; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--bg);
  font-family: "Source Serif 4", Georgia, serif; font-size: 16px; line-height: 1.6; border-radius: 0 8px 8px 0;
}
.ctx-head .w { cursor: pointer; border-radius: 3px; }
.ctx-head .w:hover { background: var(--accent-soft); color: var(--accent); }
.word-sum { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.word-parts { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; }
.word-parts .chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.word-chart { display: flex; align-items: flex-end; gap: 1px; height: 84px; padding-bottom: 1px; border-bottom: 1px solid var(--line); }
.word-chart button { flex: 1 1 0; min-width: 0; height: var(--h); padding: 0; border: 0; border-radius: 2px 2px 0 0; background: var(--accent); opacity: .75; }
.word-chart button:hover, .word-chart button.on { opacity: 1; background: var(--ink); }
.word-chart button.none { background: var(--line); opacity: 1; cursor: default; }
.word-chart button.nt { margin-left: 4px; }
.word-axis { position: relative; height: 18px; font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.word-axis span { position: absolute; top: 2px; } .word-axis span + span { left: var(--nt); }
.testament .pill.small-pill { padding: 1px 10px; font-size: 12px; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; position: sticky; top: -20px; background: var(--panel); padding-top: 4px; z-index: 1; }
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs button { white-space: nowrap; border: 0; background: none; padding: 8px 10px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; font-size: 14px; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.count { font-size: 12px; color: var(--muted); font-weight: 400; }
.note { color: var(--muted); }

.xref-view { width: max-content; margin-bottom: 10px; }
.xref-view button { padding: 3px 14px; font-size: 13px; }
.web-box { margin: 0 -6px; }
.web { display: block; width: 100%; height: auto; overflow: visible; }
.web .spokes line { stroke: var(--accent); opacity: .45; }
.web .links path { fill: none; stroke: var(--muted); stroke-width: .8; stroke-dasharray: 2 3; opacity: .7; }
.web .node { cursor: pointer; }
.web .node circle { fill: var(--muted); stroke: var(--panel); stroke-width: 1.5; }
.web .node.nt circle { fill: var(--accent); }
.web .node.here circle { fill: var(--ink); cursor: default; }
.web .node text { font: 500 10.5px "IBM Plex Sans", sans-serif; fill: var(--ink); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; }
.web .node.here text { font-weight: 600; }
.web .node:not(.here):hover circle, .web .node:focus-visible circle { stroke: var(--ink); stroke-width: 2; }
.web .node:not(.here):hover text { fill: var(--accent); }
.xref { list-style: none; margin: 0; padding: 0; }
.xref li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.xref a { font-weight: 600; text-decoration: none; }
.xref a:hover { text-decoration: underline; }
.xref .votes { float: right; font-size: 12px; color: var(--muted); }
.xref .xt { font-family: "Source Serif 4", Georgia, serif; font-size: 15px; line-height: 1.55; margin-top: 2px; color: var(--ink); }
.xref .xt.loading { color: var(--muted); }
.more { margin-top: 12px; width: 100%; }

.links { list-style: none; padding: 0; margin: 0; }
.links li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.links a { font-weight: 600; text-decoration: none; }
.links span { display: block; color: var(--muted); font-size: 13px; }

.note.small { font-size: 13px; margin: 0 0 8px; }
.map { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 10px; border: 1px solid var(--line); }
.map-box { position: relative; aspect-ratio: 4 / 3; }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 1px solid var(--line); border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .3s; background: var(--sea); }
.map-box.live iframe { opacity: 1; pointer-events: auto; }
.map-box.live #map-fallback { visibility: hidden; }
.map-box.waiting { background: var(--sea); border-radius: 10px; }
.map-box.waiting #map-fallback, .tour-route.waiting > svg.map { visibility: hidden; }
.map-box[hidden] { display: none; }
.map .sea { fill: var(--sea); }
.map .land { fill: var(--land); stroke: var(--coast); stroke-width: 1; }
.map .lake { fill: var(--sea); stroke: var(--water); stroke-width: .8; }
.map .river { fill: none; stroke: var(--water); stroke-width: 1.2; }
.map .pin { fill: var(--accent); stroke: var(--panel); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.map .pin-label { fill: var(--ink); font-family: "IBM Plex Sans", sans-serif; font-weight: 600; paint-order: stroke; stroke: var(--land); stroke-width: 3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map .mark { fill: var(--muted); }
.map .mark-label { fill: var(--muted); font-family: "IBM Plex Sans", sans-serif; paint-order: stroke; stroke: var(--land); stroke-width: 3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.places, .events { list-style: none; padding: 0; margin: 8px 0 0; }
.places li, .events li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.places span { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.tab-pane h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 20px 0 0; }
.people { list-style: none; padding: 0; margin: 0; }
.people li { border-bottom: 1px solid var(--line); }
.people button { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 4px; color: var(--ink); border-radius: 6px; }
.people button:hover { background: var(--accent-soft); }
.people .n { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.people .line { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.pill.back { margin-bottom: 10px; }
.person-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tab-pane .person-head h3 { font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0; }
.person-head .other { color: var(--muted); }
.person-line { color: var(--muted); margin: 2px 0 0; }
.bio { font-family: "Source Serif 4", Georgia, serif; font-size: 15px; line-height: 1.6; margin: 12px 0 2px; }
.bio a { text-decoration: none; }
.bio a:hover { text-decoration: underline; }
.note.src { font-size: 12px; }
.tab-pane h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 6px; font-weight: 600; }
.family { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; align-items: baseline; }
.family dt { color: var(--muted); font-size: 13px; }
.family dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.chip { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 2px 10px; font-size: 13px; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.person-verses p { margin: 0 0 6px; font-size: 14px; line-height: 1.7; }
.person-verses a { text-decoration: none; font-variant-numeric: tabular-nums; padding: 0 2px; border-radius: 4px; }
.person-verses a:hover { text-decoration: underline; }
.person-verses a.on { background: var(--sel); color: var(--ink); }
.events .yr { display: inline-block; min-width: 72px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Book and chapter picker */
.picker {
  border: 0; border-radius: 14px; padding: 0; width: min(720px, calc(100vw - 32px)); max-height: min(80vh, 720px);
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow);
}
.picker::backdrop { background: rgba(10, 12, 20, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.picker-head { z-index: 2; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); }
.picker-head h2 { flex: 1; margin: 0; font-size: 17px; }
#picker-body { padding: 12px 16px 20px; }
.testament { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 8px 0 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; margin-bottom: 14px; }
.grid.nums { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
.grid button { border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 8px; text-align: left; }
.grid.nums button { text-align: center; }
.grid button:hover { border-color: var(--accent); }
.grid button.cur { background: var(--accent-soft); border-color: var(--accent); }

/* The dock: a floating row of buttons at the bottom of the reader, and the timeline card it opens */
.dock-wrap { position: sticky; bottom: 14px; z-index: 4; max-width: 680px; margin: 24px auto 0; display: grid; justify-items: center; gap: 8px; pointer-events: none; }
.dock-wrap > * { pointer-events: auto; }
/* The text behind the dock (and the timeline card, when open) is frosted, so they stand out from it */
.dock-wrap::before {
  content: ""; position: absolute; z-index: -1; left: 50%; width: calc(100cqw + 32px); transform: translateX(-50%); top: -28px; bottom: -14px;
  background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(transparent, #000 28px); mask-image: linear-gradient(transparent, #000 28px);
}
.dock {
  display: flex; gap: 2px; padding: 4px; background: var(--dock); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 999px; box-shadow: var(--shadow), 0 0 0 4px color-mix(in srgb, var(--bg) 70%, transparent);
}
.dock button { display: flex; align-items: center; gap: 6px; border: 0; background: none; border-radius: 999px; padding: 7px 14px; color: var(--ink); font-size: 14px; font-weight: 500; white-space: nowrap; }
.dock button svg { color: var(--accent); }
.dock button:hover { color: var(--accent); background: var(--accent-soft); }
.dock button[aria-pressed="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--dock)); }
.timeline-card { width: 100%; background: var(--dock); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 12px; box-shadow: var(--shadow); padding: 8px 10px 6px; }
.timeline-card[hidden] { display: none; }
.timeline-card { container-type: inline-size; }
.tl-now { display: block; border: 0; background: none; padding: 0 2px 6px; font-size: 14px; color: var(--ink); text-align: left; }
.tl-now:not(:disabled):hover b { color: var(--accent); }
.tl-now span { color: var(--muted); }
.timeline { position: relative; display: flex; height: 26px; gap: 2px; }
.era { flex: 1 1 0; min-width: 0; border: 0; background: none; padding: 0 2px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 3px solid var(--accent-soft); border-radius: 4px 4px 0 0; }
.era:hover { color: var(--accent); background: var(--accent-soft); }
.era.cur { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.era .tiny { display: none; }
.timeline .here { position: absolute; bottom: 0; width: 0; height: 0; margin-left: -5px; border: 5px solid transparent; border-bottom-color: var(--ink); pointer-events: none; }
.timeline .here[hidden] { display: none; }
@container (max-width: 900px) { .era .full { display: none; } .era .tiny { display: inline; } }
.era-years { color: var(--muted); margin: 0 0 6px; }
.era-here { color: var(--accent); font-weight: 500; }
.era-summary { margin: 0 0 12px; line-height: 1.55; }
.era-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.era-nav .pill { font-size: 14px; text-decoration: none; }
#picker-body h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 20px 0 6px; font-weight: 600; }
.era-books { list-style: none; padding: 0; margin: 0; columns: 2 220px; column-gap: 24px; }
.era-books li { break-inside: avoid; padding: 3px 0; font-size: 14px; }
.era-books a { text-decoration: none; font-variant-numeric: tabular-nums; }
.era-books a:hover { text-decoration: underline; }

/* Verse card */
.card-preview { display: block; width: 100%; max-width: 432px; margin: 0 auto 12px; border-radius: 10px; box-shadow: var(--shadow); aspect-ratio: 4 / 5; }
.card-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.card-acts .pill { text-decoration: none; font-size: 14px; }

/* Highlight and note on the open verse */
.ctx-mark { margin: -4px 0 14px; }
.swatches { display: flex; align-items: center; gap: 8px; }
.swatch { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: var(--hl); padding: 0; }
.swatch[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.swatches .pill + .pill { margin-left: 0; }
.swatches .pill { margin-left: auto; padding: 3px 12px; font-size: 13px; }
.note-box { display: block; width: 100%; min-height: 72px; margin-top: 10px; resize: vertical; font: 15px/1.5 "IBM Plex Sans", sans-serif; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.note-box:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.note-box[hidden] { display: none; }

/* My reading: plan, highlights, offline */
.seg { display: flex; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.seg button { border: 0; background: none; border-radius: 999px; padding: 5px 14px; color: var(--muted); font-weight: 500; }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
#mine-body { padding: 12px 16px 20px; }
#mine-body > p:first-child { margin-top: 4px; }
#mine-body h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 20px 0 6px; font-weight: 600; }
.pill.primary { color: var(--accent); border-color: var(--accent); }
.plan-day { font-size: 18px; font-weight: 600; margin: 4px 0 8px; }
.progress { height: 6px; border-radius: 3px; background: var(--accent-soft); overflow: hidden; margin-bottom: 6px; }
.progress i { display: block; height: 100%; background: var(--accent); }
.plan-chapters { list-style: none; padding: 0; margin: 0; }
.plan-chapters li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.plan-chapters input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; display: block; }
.plan-chapters a { text-decoration: none; font-weight: 500; }
.plan-all { margin: 18px 0 14px; }
.plan-all summary { cursor: pointer; color: var(--accent); }
.plan-days { list-style: none; padding: 0; margin: 8px 0 0; max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.plan-days li { display: grid; grid-template-columns: 3em 1fr 1.5em; gap: 6px; padding: 5px 10px; font-size: 14px; border-bottom: 1px solid var(--line); }
.plan-days li:last-child { border-bottom: 0; }
.plan-days li.on { background: var(--accent-soft); }
.plan-days li.done a { color: var(--muted); }
.plan-days .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.plan-days a { text-decoration: none; }
.plan-days .tick { color: var(--accent); }
.marks { list-style: none; padding: 0; margin: 0 0 12px; }
.marks li { padding: 8px 10px; margin-bottom: 6px; border-radius: 8px; background: var(--hl, var(--bg)); }
.marks a { font-weight: 600; text-decoration: none; }
.marks .xt { font-family: "Source Serif 4", Georgia, serif; font-size: 15px; line-height: 1.55; }
.mark-note { margin: 6px 0 0; font-size: 14px; white-space: pre-wrap; border-left: 2px solid var(--accent); padding-left: 8px; }
.mark-tools { display: flex; gap: 8px; }
.offline { margin-top: 4px; }
.offline .pill { margin: 4px 6px 4px 0; }

/* Phones: a tighter top bar, and (below) the context panel becomes a bottom sheet */
@media (max-width: 800px) {
  .bar { padding: 6px 8px; }
  .reader { padding: 20px 16px 40px; }
  .tour { top: -12px; margin-top: -8px; }
  .bar { gap: 2px; }
  .bar-logo { width: 22px; margin: 0 2px 0 2px; }
  .title-btn { white-space: nowrap; padding: 6px 4px; min-width: 0; font-size: 16px; }
  #ref-title { overflow: hidden; text-overflow: ellipsis; }
  .icon { min-width: 30px; }
  .timeline { gap: 1px; height: 24px; }
  .era { font-size: 11px; padding: 0 1px; }
  .text-btn { padding: 6px 6px; margin-right: 0; }
  .ver-wrap { margin-left: 2px; }
  .ver-btn { max-width: 96px; }
  .ver-btn .caret { display: none; }
}
/* A phone held upright, or any narrow screen. A phone in landscape is too short for a sheet: see "Phones in landscape". */
@media (max-width: 800px) and (min-height: 501px), (max-width: 599px) {
  .panels { grid-template-columns: 1fr; }
  .context {
    position: fixed; left: 0; right: 0; bottom: 0; height: 55vh; height: 55dvh; border-left: 0;
    border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: var(--shadow);
    transform: translateY(105%); transition: transform .25s ease, height .25s ease; padding: 6px 16px 20px; z-index: 5;
  }
  .context[data-size="peek"] { height: 112px; overflow: hidden; }
  .context[data-size="full"] { height: calc(100vh - 60px); height: calc(100dvh - 60px); }
  .context.dragging { transition: none; }
  .context.open { transform: none; }
  .sheet-handle { display: flex; justify-content: center; padding: 8px 0 12px; margin-top: -2px; cursor: grab; position: sticky; top: -6px; background: var(--panel); z-index: 2; touch-action: none; }
  .sheet-handle span { width: 40px; height: 4px; border-radius: 2px; background: var(--line); }
  .ctx-empty { display: none; }
  .tabs { top: 18px; gap: 0; }
  .tabs button { padding: 8px 6px; font-size: 13px; }
  body.sheet-open .reader { padding-bottom: 64vh; }
  /* The dock would float over the verse the sheet is about, or over the tour card's buttons */
  body.sheet-open .dock-wrap, body.touring .dock-wrap { display: none; }
  body.touring .context { display: none; }
  body.touring .reader { padding: 10px 10px 12px; }
}

/* Search */
.search .picker-head { gap: 8px; }
#search-q { flex: 1; min-width: 0; font: inherit; font-size: 16px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--bg); color: var(--ink); }
#search-q:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.search-results { padding: 8px 16px 20px; }
.search-results > .note { margin: 12px 0; }
.results { list-style: none; padding: 0; margin: 0 0 14px; }
.results button { display: grid; gap: 1px; width: 100%; text-align: left; border: 0; background: none; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; }
.results button:hover, .results button:focus-visible { background: var(--accent-soft); }
.results b { font-weight: 600; }
.results span { font-size: 12px; color: var(--muted); }
.results small { font-family: "Source Serif 4", "Noto Serif SC", serif; font-size: 14px; line-height: 1.5; color: var(--ink); }
.results mark { background: var(--sel); color: inherit; border-radius: 2px; }
/* Narrow phones: the title keeps its room, so the bar tightens up */
@media (max-width: 400px) {
  .era { font-size: 10px; text-overflow: clip; letter-spacing: -.02em; }
  .timeline-card { padding: 8px 6px 6px; }
  .dock button { padding: 7px 11px; font-size: 13px; gap: 5px; }
  .icon { min-width: 28px; padding-left: 4px; padding-right: 4px; }
  .seg button { padding: 5px 12px; }
  .ver-btn { max-width: 80px; }
}

/* Family tree: an indented outline with connector lines, so a wide generation still fits a phone. */
.family-h { display: flex; align-items: center; gap: 8px; }
.family-h .pill { padding: 1px 10px; font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--accent); border-color: var(--accent); }
.tree-line { display: flex; align-items: center; gap: 2px; overflow-x: auto; white-space: nowrap; font-size: 13px; padding-bottom: 6px; scrollbar-width: none; mask-image: linear-gradient(90deg, transparent, #000 24px); }
.tree-line b { color: var(--muted); font-weight: 600; margin-right: 4px; }
.tree-line .sep { color: var(--line); }
.tree-line .chip { flex: none; border: 0; background: none; color: var(--muted); padding: 2px 6px; }
.tree-line .chip:hover { color: var(--accent); }
.tree-line .chip.on { color: var(--accent); font-weight: 600; }
/* The tree: soft curved elbows from each parent to its children. */
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree { margin: 10px 0 18px; }
.tree ul { margin-left: 9px; }
.tree li { position: relative; }
.tree ul > li { padding-left: 16px; }
.tree ul > li::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 19px; border: solid var(--line); border-width: 0 0 1.5px 1.5px; border-bottom-left-radius: 10px; }
.tree ul > li:not(:last-child)::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1.5px solid var(--line); }
.trow { display: flex; align-items: flex-start; padding: 2px 0; }
.ttog { flex: none; position: relative; width: 18px; height: 18px; margin: 9px 4px 0 0; padding: 0; border: 1.5px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--muted); cursor: pointer; }
.ttog::before { content: ""; position: absolute; left: 4px; top: 3.5px; width: 5px; height: 5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .15s; }
.ttog[aria-expanded=true]::before { left: 4.5px; top: 2.5px; transform: rotate(45deg); }
.ttog:hover { border-color: var(--accent); color: var(--accent); }
.ttog.leaf { border: 0; background: none; cursor: default; }
.ttog.leaf::before { left: 6px; top: 6px; width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--line); transform: none; }
.tname { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tname b { font-family: "Source Serif 4", "Noto Serif SC", Georgia, serif; font-size: 16px; font-weight: 600; line-height: 1.25; }
.tname .kids { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tname .kids::before { content: "· "; }
.tname .partners { flex-basis: 100%; font-size: 12px; font-style: italic; color: var(--muted); margin-top: 1px; }
.tname:hover { background: var(--accent-soft); }
.tname.path b { color: var(--accent); }
.tname.me { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.tname.me b { color: var(--accent); }

/* The land of Canaan: the map stays in view above the outline (beside it on wide screens). */
.land-btn { margin-top: 12px; }
.places .also { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.places .also a { color: var(--accent); text-decoration: none; }
.map .dot { fill: var(--muted); opacity: .45; }
.map .pin.picked { fill: var(--accent); stroke-width: 2.5; }
.land-map { position: sticky; top: var(--head, 50px); z-index: 1; background: var(--panel); padding: 0 0 6px; }
.land-map .map { max-height: 34vh; width: auto; margin: 0 auto; }
.land .tname { scroll-margin-top: calc(var(--head, 50px) + 34vh + 16px); }
.tree .tref { flex: none; align-self: center; margin-left: 2px; padding: 2px 6px; border: 0; background: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; }
.tree .tref:hover { color: var(--accent); text-decoration: underline; }
.tname.tgroup { cursor: default; }
.tname.tgroup b { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted); }
.tname.tgroup:hover { background: none; }
@media (min-width: 900px) {
  .picker:has(.land) { width: min(1040px, calc(100vw - 32px)); }
  .tree-box.land { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .land .land-map { grid-row: 1 / span 2; top: calc(var(--head, 50px) + 12px); }
  .land-map .map { max-height: none; width: 100%; }
  .land .tree { margin-top: 0; }
  .land .tname { scroll-margin-top: calc(var(--head, 50px) + 12px); }
}

/* Kings of Israel and Judah: two columns, time running down, prophets in the outer lanes. */
.picker:has(.kings) { width: min(720px, calc(100vw - 32px)); }
.kings-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.kings-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.kings-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--muted); }
.kings-legend .good i { background: var(--good); }
.kings-legend .evil i { background: var(--evil); }
.kings-legend .none i { background: var(--line); }
.kings-legend .lg-prophet i { width: 4px; background: var(--accent); }
.kings-head, .kings-body { display: grid; grid-template-columns: 30px 46px 1fr 1fr 46px; column-gap: 3px; }
.kings-head { position: sticky; top: var(--head, 50px); z-index: 3; background: var(--panel); padding: 8px 0 6px; font-size: 13px; text-align: center; }
.kings-body { position: relative; margin-bottom: 8px; }
.k-axis, .k-lane, .k-col { position: relative; }
.k-axis .tick { position: absolute; right: 2px; transform: translateY(-50%); font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.k-col { border-left: 1px dashed var(--line); }
.king { position: absolute; left: 2px; right: 2px; display: flex; flex-direction: column; justify-content: flex-start; gap: 0; overflow: hidden; padding: 3px 6px 3px 9px; border: 0; border-radius: 8px; background: var(--bg); color: var(--ink); text-align: left; font: inherit; cursor: pointer; box-shadow: inset 4px 0 0 var(--line); }
.king.good { box-shadow: inset 4px 0 0 var(--good); background: color-mix(in srgb, var(--good) 10%, var(--panel)); }
.king.evil { box-shadow: inset 4px 0 0 var(--evil); background: color-mix(in srgb, var(--evil) 9%, var(--panel)); }
.king.united { left: calc(30px + 46px + 8px); right: calc(46px + 5px); }
.king b { font-family: "Source Serif 4", "Noto Serif SC", Georgia, serif; font-size: 14px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.king span { font-size: 11px; line-height: 1.3; color: var(--muted); font-variant-numeric: tabular-nums; }
.king.short { padding-top: 1px; padding-bottom: 1px; }
.king.short span { display: none; }
.king:hover { outline: 1px solid var(--accent); }
.king.me { outline: 2px solid var(--accent); outline-offset: -1px; }
.prophet { position: absolute; width: 16px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 11px; cursor: pointer; }
.prophet::before { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--accent); opacity: .7; }
.prophet span { position: absolute; top: 0; writing-mode: vertical-rl; white-space: nowrap; line-height: 12px; letter-spacing: .02em; }
.k-axis + .k-lane .prophet { right: calc(var(--slot) * 17px + 1px); }
.k-axis + .k-lane .prophet::before { right: 0; }
.k-axis + .k-lane .prophet span { right: 4px; }
.k-lane:last-child .prophet { left: calc(var(--slot) * 17px + 1px); }
.k-lane:last-child .prophet::before { left: 0; }
.k-lane:last-child .prophet span { left: 4px; }
.prophet.me span { font-weight: 700; }
.prophet.me::before { opacity: 1; width: 4px; }
.k-event { position: absolute; left: 30px; right: 0; height: 0; border-top: 1.5px dashed color-mix(in srgb, var(--evil) 55%, transparent); z-index: 1; pointer-events: none; }
.k-event.up a { top: auto; bottom: 2px; }
.k-event a { position: absolute; left: 49px; top: 2px; padding: 0 6px; border-radius: 6px; background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--evil); font-size: 11px; white-space: nowrap; pointer-events: auto; }
/* Key events: a dot on the column's right edge at the year, its title to the left where the column has room. */
.k-col { container-type: inline-size; }
.k-act { position: absolute; right: 2px; z-index: 1; display: flex; align-items: center; gap: 4px; max-width: calc(100% - 4px); height: 14px; padding: 0; transform: translateY(-50%); border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.k-act i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--panel); }
.k-act span { overflow: hidden; padding: 0 5px; border-radius: 6px; background: color-mix(in srgb, var(--panel) 85%, transparent); font-size: 10.5px; line-height: 14px; white-space: nowrap; text-overflow: ellipsis; }
.k-act:hover span, .k-act.me span { color: var(--accent); }
.k-act.me i { box-shadow: 0 0 0 2px var(--accent); }
@container (max-width: 200px) { .k-act span { display: none; } }
.king-acts { margin: 6px 0 0; padding: 0; list-style: none; }
.king-acts button { padding: 1px 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.king-acts button span { color: var(--muted); font-variant-numeric: tabular-nums; }
.king-acts button:hover { color: var(--accent); }
.king-card { position: sticky; bottom: -20px; z-index: 2; margin: 0 -16px -20px; padding: 10px 16px 14px; background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -8px 16px rgba(0,0,0,.06); }
.king-card h3 { margin: 0; font-family: "Source Serif 4", "Noto Serif SC", Georgia, serif; font-size: 18px; }
.king-card p { margin: 1px 0; font-size: 13px; color: var(--muted); }
.king-card .verdict.good { color: var(--good); }
.king-card .verdict.evil { color: var(--evil); }
.king-card .card-acts { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin-top: 8px; }
.king-card .pill { font-size: 12px; padding: 3px 10px; margin: 0; }

/* Share: the link to this view, copied or handed to the phone's share sheet. */
.share-btn svg { display: block; }
.toast { position: fixed; left: 50%; bottom: 88px; z-index: 100; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--panel); font-size: 14px; box-shadow: var(--shadow); animation: toast 1.8s ease both; pointer-events: none; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 6px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* Install guide (iPhone and iPad): a card at the bottom, above the dock. */
.install { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; max-width: 440px; margin: 0 auto; padding: 14px 16px 12px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 18px; background: var(--dock); box-shadow: 0 12px 40px rgba(10, 15, 30, .22); animation: install-in .3s ease both; }
.install.leaving { animation: install-out .2s ease both; }
@keyframes install-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes install-out { to { opacity: 0; transform: translateY(16px); } }
.install-head { display: flex; align-items: center; gap: 10px; }
.install-head img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.install-head h2 { flex: 1; margin: 0; font-size: 16px; line-height: 1.3; }
.install-head .icon { margin: -6px -8px 0 0; align-self: flex-start; font-size: 20px; }
.install-why { margin: 8px 0 6px; font-size: 13px; color: var(--muted); }
.install-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 8px; }
.install-steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.35; counter-increment: s; }
.install-steps li::before { content: counter(s); flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.install-steps .ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--bg); color: var(--accent); font-size: 15px; }
.install-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.install-acts .pill { font-size: 14px; }
.install-acts .pill:last-child { background: var(--accent); border-color: var(--accent); color: var(--panel); }
.install-acts .quiet { border-color: transparent; background: none; }
@media (min-width: 700px) { .install { left: auto; right: 24px; bottom: 24px; width: 400px; margin: 0; } }

/* Context panel: the switch between the selected verses and their chapter, and the chapter's own entries. */
.ctx-scope { width: max-content; margin: 0 0 10px; }
.ctx-scope button { padding: 3px 14px; font-size: 13px; }
.ctx-scope[hidden] { display: none; }
#ctx-text.chapter { border: 0; padding: 0; margin: 0 0 8px; background: none; font: inherit; }
.xref .from { color: var(--muted); font-size: 13px; margin-right: 6px; font-variant-numeric: tabular-nums; }
#ctx-chapter { margin-top: 4px; }
/* The dock's buttons don't fit side by side in a narrow text column (a phone, either way up, or a small window beside the
   panel), so each label sits under its icon. */
@container (max-width: 640px) {
  .dock { border-radius: 22px; }
  .dock button { flex-direction: column; gap: 2px; padding: 5px 6px 4px; font-size: 11px; border-radius: 18px; min-width: 52px; }
}

/* Hebrew and Greek: the words under a verse, and a Strong's entry as a card. */
.ctx-orig { margin: -8px 0 14px; }
.ctx-orig summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 500; width: max-content; }
.orig-words { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.orig-chip { display: flex; flex-direction: column; align-items: center; gap: 1px; border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 4px 8px; color: var(--ink); }
.orig-chip:hover { border-color: var(--accent); }
.orig-chip small { color: var(--muted); font-size: 11px; }
.orig-lemma { font-family: "SBL Hebrew", "Ezra SIL", "Noto Serif Hebrew", "Times New Roman", serif; font-size: 18px; line-height: 1.3; }
.orig-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; background: var(--bg); }
.orig-card .orig-from { margin: 0 0 4px; }
.orig-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.orig-head .orig-lemma { font-size: 28px; }
.orig-xlit { font-style: italic; }
.orig-id { color: var(--muted); font-size: 12px; margin-left: auto; }
.orig-pos { color: var(--muted); font-size: 13px; margin: 2px 0 6px; }
.orig-def { font-size: 14px; line-height: 1.5; margin: 0 0 8px; }
.renderings .chip { font-size: 13px; }
.results .rendered { color: var(--accent); font-size: 13px; }

/* Read aloud: the verse being read, and the player above the dock while Listen is on. */
.listen-pp .ico { display: inline-flex; color: var(--accent); }
#listen-btn[hidden] { display: none; }
.v.reading { background: var(--accent-soft); border-radius: 4px; box-shadow: 0 0 0 3px var(--accent-soft); }
.listen-bar {
  pointer-events: auto; display: flex; align-items: center; gap: 2px; padding: 4px 6px; background: var(--dock); max-width: calc(100vw - 24px);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 999px; box-shadow: var(--shadow), 0 0 0 4px color-mix(in srgb, var(--bg) 70%, transparent);
}
.listen-bar[hidden] { display: none; }
.listen-bar .icon { color: var(--accent); }
.listen-pp { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); }
.listen-ref { font-size: 13px; font-weight: 500; padding: 0 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.listen-rate { font-size: 13px; font-weight: 600; min-width: 40px; }
.listen-voice { gap: 5px; font-size: 13px; padding: 0 6px; max-width: 150px; }
.listen-voice span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.listen-voice[hidden] { display: none; }
@media (max-width: 480px) { .listen-voice span { display: none; } }
.listen-bar { position: relative; }
.voice-menu {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 30; width: min(320px, calc(100vw - 32px));
  max-height: 50vh; overflow-y: auto; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.voice-menu[hidden] { display: none; }
.voice-menu .voice-head { margin: 6px 10px 4px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.voice-menu button { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 8px; text-align: left; font-size: 14px; color: var(--ink); }
.voice-menu button:hover, .voice-menu button:focus-visible { background: var(--accent-soft); outline: none; }
.voice-menu button[aria-checked=true] { color: var(--accent); font-weight: 600; }
.voice-menu button[aria-checked=true]::before { content: "✓"; margin-right: -4px; }
.voice-menu button span { flex: 1; }
.voice-menu small { color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; }
.voice-menu .note { margin: 6px 10px; }
@media (max-width: 340px) { .dock { gap: 0; } .dock button { padding: 5px 4px 4px; min-width: 50px; font-size: 10.5px; } }

/* A book's introduction, at the top of a chapter's context. */
.intro { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 10px 14px; margin: 0 0 12px; }
.intro summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.intro[open] summary { margin-bottom: 6px; }
.intro-about { margin: 0 0 10px; line-height: 1.55; }
.intro-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 10px; font-size: 14px; }
.intro-facts dt { color: var(--muted); }
.intro-facts dd { margin: 0; }
.intro-key { color: var(--muted); font-style: italic; }
.intro-key:lang(zh), .intro-key:empty { font-style: normal; }
.intro h4 { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--muted); }
.intro-outline { list-style: none; margin: 0 0 8px; padding: 0; }
.intro-outline a { display: flex; justify-content: space-between; gap: 12px; padding: 4px 8px; margin: 0 -8px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.intro-outline a:hover { background: var(--accent-soft); }
.intro-outline small { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.intro-outline .here a { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.intro .note { margin: 0; }
.videos { margin: 0 0 10px; }
.videos h4 { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--muted); }
.videos .video + .video { margin-top: 6px; }
.video-play { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.video-play:hover { background: var(--accent-soft); }
.video-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; padding-left: 2px; }
.video.playing { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.video.playing iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-credit { margin: 4px 0 0; }
.ctx-videos { margin: 6px 0 14px; }
.ctx-videos summary .count { font-weight: 400; }
.ctx-videos .videos { margin: 8px 0 0; }
.videos + .videos { margin-top: 14px; }

/* Topics (Nave's): chips under a verse, and a topic's headings and references in the picker. */
.ctx-topics { margin: 0 0 14px; }
.ctx-orig + .ctx-topics { margin-top: 6px; }
.topic-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.topic-chips .chip.more { color: var(--muted); }
.topic { margin: 4px 0 12px; }
.topic-entry { padding: 5px 0 5px calc(var(--depth, 0) * 16px); border-bottom: 1px solid var(--line); line-height: 1.7; font-size: 14px; }
.topic-entry.topic-head { border-bottom: 0; padding-top: 12px; font-weight: 600; font-size: 13px; color: var(--muted); }
.topic-label { margin-right: 4px; }
.topic-ref { display: inline-block; white-space: nowrap; color: var(--accent); text-decoration: none; font-size: 13px; padding: 0 3px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.topic-ref:hover { background: var(--accent-soft); }
.topic-ref.here { background: var(--sel); color: var(--ink); font-weight: 600; }
.topic-entry .link { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }

/* Gospel harmony: a verse's sections, the accounts side by side, and the list of all sections. */
.harmony-list { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 6px; }
.harmony-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 6px 10px; }
.harmony-item:hover { border-color: var(--accent); }
.harmony-item b { font-weight: 500; font-size: 14px; }
.harmony-item small { color: var(--muted); font-size: 12px; }
.ctx-harmony .link, .ctx-topics .link { border: 0; background: none; padding: 0; color: var(--accent); font-size: 13px; cursor: pointer; }
.picker:has(.harmony) { width: min(1180px, calc(100vw - 32px)); max-height: min(88vh, 900px); }
.harmony-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px 0; }
.harmony-nav .note { margin: 0; }
.harmony { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 18px; padding: 12px 16px 20px; }
.harmony-col h3 { margin: 0 0 6px; font-size: 15px; position: sticky; top: 0; }
.harmony-col h3 small { color: var(--muted); font-weight: 400; font-size: 12px; }
.harmony-text { font: 16px/1.65 "Source Serif 4", Georgia, serif; }
.harmony-text:lang(zh) { font-family: "Source Serif 4", "Noto Serif SC", "Songti SC", serif; }
.harmony-text p { margin: 0 0 10px; }
.hv { cursor: pointer; border-radius: 3px; }
.hv:hover { background: var(--accent-soft); }
.hv.here { background: var(--sel); }
.hv .vn { color: var(--accent); font-size: 10px; font-family: "IBM Plex Sans", sans-serif; margin-right: 2px; }
/* On a phone the accounts sit side by side as cards, swiped across. */
@media (max-width: 700px) {
  .harmony { grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; }
  .harmony-col { scroll-snap-align: start; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg); }
  .harmony.harmony-1 { grid-auto-columns: 100%; }
}
.harmony-tags { display: inline-flex; gap: 3px; margin-left: 8px; }
.harmony-tags i { font-style: normal; font-size: 11px; color: var(--line); padding: 0 3px; border-radius: 4px; }
.harmony-tags i.on { color: var(--accent); background: var(--accent-soft); }
.results button.on { background: var(--accent-soft); }
.harmony-tabs { display: none; }
@media (max-width: 700px) {
  .harmony-tabs { display: flex; width: max-content; max-width: calc(100% - 32px); margin: 10px 16px 0; overflow-x: auto; }
  .harmony-tabs button { padding: 3px 10px; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 480px) {
  .ver-menu { position: fixed; top: 50px; left: 8px; right: 8px; width: auto; }
}
#version-menu button { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; min-height: 0; padding: 5px 10px; gap: 0; }

/* Installed as an app: back and forward, then the chapter's up and down. */
.app .hist { font-size: 24px; line-height: 1; }
.app .hist:disabled { opacity: .3; cursor: default; }
.app #prev { margin-left: 4px; }
.app #prev svg, .app #next svg { display: block; }

/* Commentary (Matthew Henry): the sections on the selected verses, a long one folded; a chapter's sections, each opening in place. */
.ctx-comm { margin: 6px 0 14px; }
.ctx-comm summary .count { font-weight: 400; }
.comm { margin: 8px 0 4px; }
.comm-sec { margin: 0 0 12px; }
.comm-sec h4, .comm-fold summary { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.comm-sec h4 span, .comm-fold summary span { font-weight: 400; }
.comm-text { font: 15px/1.6 "Source Serif 4", Georgia, serif; color: var(--ink); }
.comm-text p { margin: 0 0 8px; }
.comm-text a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.comm-text a:hover { text-decoration: underline; }
.comm-text.folded { max-height: 9.6em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.ctx-comm .link { border: 0; background: none; padding: 0; color: var(--accent); font-size: 13px; cursor: pointer; }
.comm-fold { border-bottom: 1px solid var(--line); padding: 6px 0; }
.comm-fold summary { cursor: pointer; margin: 0; color: var(--ink); font-weight: 500; width: auto; }
.comm-fold[open] summary { margin-bottom: 6px; }
.comm-fold summary span { color: var(--muted); }
.ctx-comm .note { margin: 6px 0 0; }

/* Memory verses: the list in My reading, and a passage to practise by typing. */
.mem-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; margin: 4px 0 14px;
  border-radius: 14px; background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 40%, var(--panel))); }
.mem-stats { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: baseline; }
.mem-stats b { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.mem-stats span { color: var(--muted); font-size: 13px; }
.mem-go { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mem-go .link, .mem-head .link { border: 0; background: none; padding: 0; color: var(--accent); font-size: 13px; cursor: pointer; }
.mem-start { border: 0; border-radius: 999px; padding: 10px 22px; background: var(--accent); color: var(--bg); font-weight: 600; font-size: 15px; cursor: pointer; box-shadow: var(--shadow); }
.mem-start:hover { filter: brightness(1.08); }
.mem-list { list-style: none; padding: 0; margin: 0 0 12px; }
.mem-list li { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.mem-list li.due { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.mem-head { display: flex; align-items: center; gap: 8px; }
.mem-head a { font-weight: 600; text-decoration: none; }
.mem-head small { color: var(--muted); font-size: 12px; flex: 1; }
.mem-list li.due .mem-head small { color: var(--accent); }
.mem-dots { display: inline-flex; gap: 3px; }
.mem-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.mem-dots i.on { background: var(--accent); }
.mem-rm { width: 26px; height: 26px; font-size: 16px; color: var(--muted); }
.mem-list .xt { margin-top: 4px; color: var(--muted); font: 14px/1.5 "Source Serif 4", Georgia, serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mem-card { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.mem-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mem-card-head h3 { margin: 0; font-size: 20px; }
.mem-count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.mem-modes { align-self: flex-start; }
.mem-progress { height: 4px; margin: 0; }
.mem-progress i { transition: width .2s ease; }
.mem-text { font: 21px/1.85 "Source Serif 4", Georgia, serif; margin: 4px 0; padding: 14px 16px; min-height: 5.5em; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); cursor: text; }
.mem-text:lang(zh) { font-family: "Source Serif 4", "Noto Serif SC", "Songti SC", serif; letter-spacing: .06em; }
.mem-w { border-radius: 3px; color: color-mix(in srgb, var(--ink) 28%, transparent); transition: color .15s, background .15s; }
.mem-w.hide { color: transparent; background: color-mix(in srgb, var(--line) 70%, transparent); }
.mode-blank .mem-w.hide { background: none; }
.mem-w.cur { box-shadow: inset 0 -2px 0 var(--accent); }
.mode-blank .mem-w.hide.cur { background: var(--accent-soft); }
.mem-w.done { color: var(--ink); }
.mem-w.missed { color: var(--evil); }
.mem-w.slip { animation: mem-shake .25s; background: color-mix(in srgb, var(--evil) 22%, transparent); }
@keyframes mem-shake { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.mem-w.slip { display: inline-block; }
.mem-input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; font-size: 16px; background: var(--panel); color: var(--ink); }
.mem-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mem-tools, .mem-grade { display: flex; gap: 8px; flex-wrap: wrap; }
.mem-grade .pill { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; padding: 8px 18px; font-size: 15px; }
.mem-grade .pill small { font-size: 11px; color: var(--muted); }
.mem-result { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mem-result b { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mem-result.good b { color: var(--good); }
.mem-result span { color: var(--muted); font-size: 14px; }
.mem-finish { align-items: center; text-align: center; padding: 24px 0; }
.mem-big { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; color: var(--bg); background: var(--good); }
.small-pill[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

/* Reading streak (My reading → Plan) */
.streak { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 10px; margin: 2px 0 16px; }
.streak-grid { flex: 0 1 335px; min-width: 0; }
.streak-head { display: flex; align-items: center; gap: 14px; }
.streak-now { display: flex; flex-direction: column; align-items: center; min-width: 4.5em; }
.streak-now b { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.streak-now span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.streak-now.out b { color: var(--muted); }
.streak-side { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.streak-side small { color: var(--muted); font-size: 12px; }
.streak-months, .streak-cal { display: grid; grid-template-columns: repeat(17, minmax(0, 16px)); gap: 3px; }
.streak-months span { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: visible; height: 14px; }
.streak-cal .wk { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; }
.streak-cal i { aspect-ratio: 1; border-radius: 3px; background: var(--accent-soft); max-width: 16px; }
.streak-cal i.l1 { background: color-mix(in srgb, var(--accent) 40%, transparent); }
.streak-cal i.l2 { background: color-mix(in srgb, var(--accent) 70%, transparent); }
.streak-cal i.l3 { background: var(--accent); }
.streak-cal i.later { background: transparent; }
.streak-cal i.now { outline: 1.5px solid var(--ink); outline-offset: 0; }

/* Plan options: reading order and daily Psalms/Proverbs */
.plan-opts { border-top: 1px solid var(--line); margin: 14px 0; padding-top: 4px; }
.plan-opts .seg { display: inline-grid; grid-template-columns: 1fr 1fr; max-width: 100%; margin: 2px 0 4px; }
.plan-opts .seg button { white-space: nowrap; }
.plan-opts .note { margin: 4px 0 10px; }
.plan-daily { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.plan-daily input { margin-top: 3px; accent-color: var(--accent); }
.plan-daily span { display: flex; flex-direction: column; }
.plan-daily small { color: var(--muted); font-size: 12.5px; }
.plan-sample { color: var(--muted); }
.plan-opts .seg.plan-shuffle { margin: 8px 0 4px 26px; }
.plan-opts .seg[hidden] { display: none; }
/* Four tabs in My reading: tighter on phones, and scrollable on the narrowest. */
@media (max-width: 440px) {
  #mine .picker-head .seg { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  #mine .picker-head .seg button { padding: 5px 8px; font-size: 14px; white-space: nowrap; }
}
@media (max-width: 360px) {
  #mine .picker-head { padding-left: 10px; padding-right: 6px; }
  #mine .picker-head .seg button { padding: 4px 6px; font-size: 13px; }
}
@media (max-width: 340px) {
  #mine .picker-head .seg button { padding: 4px 5px; font-size: 12px; }
}

/* Phones: the context sheet floats like the dock, as frosted glass: a little see-through, with the page behind it
   blurred, inside the dock's accent border and see-through rim. */
@media (max-width: 800px) and (min-height: 501px), (max-width: 599px) {
  .context {
    --glass: color-mix(in srgb, var(--panel) 88%, transparent);
    left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
    background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
    box-shadow: var(--shadow), 0 0 0 6px color-mix(in srgb, var(--bg) 60%, transparent);
    transform: translateY(calc(100% + 40px));
  }
  .context[data-size="full"] { height: calc(100vh - 68px); height: calc(100dvh - 68px - env(safe-area-inset-bottom)); }
  /* What stays put while the sheet scrolls is glass too, so the text sliding under it blurs away. */
  .context .sheet-handle, .context .tabs {
    background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  }
}

/* Book picker: a filter, the chapters read lately, and the books in their groups, each with its own colour */
.book-filter { width: 100%; font: inherit; font-size: 15px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); margin: 2px 0 10px; }
.book-filter:focus { outline: none; border-color: var(--accent); }
.recent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; }
.recent:empty { display: none; }
.recent-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.recent .pill { padding: 4px 11px; font-size: 13px; }
.testament-sec .testament { margin-top: 14px; }
.book-group { --g: var(--accent); display: grid; grid-template-columns: 7.5em 1fr; gap: 0 10px; align-items: start; padding: 6px 0; border-top: 1px solid var(--line); }
.book-group .group-name { font-size: 12px; font-weight: 600; color: var(--g); padding-top: 9px; }
.book-group .group-name { display: flex; align-items: flex-start; gap: 5px; }
.group-name .ico { flex: none; display: inline-flex; margin-top: -1px; }
.group-name svg.line { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.grid.books { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); margin: 0; gap: 5px; }
.grid.books button { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 7px 9px; border-left: 3px solid color-mix(in srgb, var(--g) 70%, transparent); }
.grid.books button small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.grid.books button .bn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-law { --g: #b07a2a; } .g-history { --g: #5f8a4a; } .g-poetry { --g: #8a5fa8; } .g-major { --g: #b5524a; } .g-minor { --g: #c27a5a; }
.g-gospels { --g: #3f78b5; } .g-acts { --g: #3f9a8f; } .g-paul { --g: #5a6fc0; } .g-general { --g: #4f97b0; } .g-apocalypse { --g: #a8456f; }
.grid.nums button.read { color: var(--muted); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.grid.nums button.read::after { content: "✓"; font-size: 9px; color: var(--accent); margin-left: 2px; vertical-align: super; }
@media (max-width: 560px) {
  .book-group { grid-template-columns: 1fr; }
  .book-group .group-name { padding: 2px 0 5px; }
  .grid.books { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  /* Whole names matter more than chapter counts on a phone: the count goes, and a long name wraps. */
  .grid.books button { padding: 7px 7px 7px 8px; font-size: 14px; line-height: 1.25; }
  .grid.books button small { display: none; }
  .grid.books button .bn { white-space: normal; overflow: visible; }
}
/* A narrow reading panel (phones, or a small window beside the context panel): the card's buttons go compact. */
@container (max-width: 520px) {
  .tour-sound span { display: none; }
  .tour-ctl .pill { white-space: nowrap; padding-inline: 9px; font-size: 13px; }
  .tour-ctl { gap: 5px; }
  /* Narrow phones: Back and Play keep only their arrow and symbol (the words stay for screen readers). */
  #tour-prev, #tour-play { font-size: 0; }
  #tour-prev::before, #tour-play::before { font-size: 14px; }
  /* Every button but Next is an icon in a true circle. */
  .tour-ctl .pill:not(#tour-next) { width: 36px; height: 36px; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; }
  #tour-prev::before { content: "‹"; font-size: 18px; }
  #tour-play::before { content: "▶"; }
  #tour-play[aria-pressed="true"]::before { content: "❚❚"; }
  .tour-mtabs button { width: 34px; }
}
@media (max-width: 340px) { .tour-ctl { gap: 4px; } .tour-ctl .pill { padding-inline: 7px; } .tour-ctl .pill:not(#tour-next) { width: 34px; height: 34px; } .tour-mtabs button { width: 30px; height: 28px; } }


/* On a phone the settings span the screen under the bar */
@media (max-width: 480px) {
  .settings { position: fixed; left: 10px; right: 10px; top: 56px; width: auto; }
}

/* More room for the tabs. Focus: an opened tab folds away the verse, topics and commentary above it, with a back arrow
   to bring them back. Big: the panel as a large window over the page (the whole screen on a phone), the map beside the list. */
#ctx-back { font-size: 24px; margin: -6px 0 -6px -8px; color: var(--accent); }
#ctx-big { color: var(--muted); margin: -6px 0; }
#ctx-big:hover { color: var(--accent); }
.context.focus #ctx-scope, .context.focus #ctx-text, .context.focus .ctx-orig, .context.focus #ctx-mark,
.context.big #ctx-scope, .context.big #ctx-text, .context.big .ctx-orig, .context.big #ctx-mark { display: none !important; }
.context.big #ctx-back { display: none; }
.ctx-veil { position: fixed; inset: 0; z-index: 59; background: rgba(20, 25, 40, .35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ctx-veil[hidden] { display: none; }
.context.big {
  position: fixed !important; inset: 40px max(24px, 5vw) !important; height: auto !important; transform: none !important;
  z-index: 60; border: 1px solid var(--line) !important; border-radius: 14px !important; padding: 16px 24px 24px !important;
  background: var(--panel) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, .3) !important;
}
.context.big .sheet-handle { display: none; }
.context.big .ctx-head h2 { font-size: 20px; }
.context.big #tab-places:not([hidden]) {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); grid-template-rows: auto 1fr; gap: 0 24px; align-items: start;
}
.context.big #places-note { grid-column: 1 / -1; }
.context.big .map-box { grid-row: 2; aspect-ratio: auto; height: calc(100vh - 220px); height: calc(100dvh - 220px); position: sticky; top: 56px; }
.context.big #places-body { grid-row: 2; grid-column: 2; }
.context.big ul.xref { columns: 2 340px; column-gap: 32px; }
.context.big ul.xref > li { break-inside: avoid; }
@media (max-width: 800px) {
  .context.big { inset: 0 !important; border-radius: 0 !important; border: 0 !important; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)) !important; }
  .context.big #tab-places:not([hidden]) { display: block; }
  .context.big .map-box { height: auto; aspect-ratio: 1; position: relative; top: 0; }
}

/* The Tours window: a tab for each group of tours, as chips that wrap so every group stays in view */
.tour-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 6px; }
.tour-tabs button {
  display: flex; align-items: center; gap: 6px; white-space: nowrap; border: 1px solid var(--line); background: var(--bg);
  border-radius: 999px; padding: 5px 12px; color: var(--ink); font-size: 13px; font-weight: 500;
}
.tour-tabs button:hover { border-color: var(--accent); }
.tour-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--panel); }
.tour-tabs .ico { display: inline-flex; color: var(--accent); }
.tour-tabs button[aria-selected="true"] .ico, .tour-tabs button[aria-selected="true"] .count { color: inherit; }
.tour-tabs svg.line { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.tour-tabs .count { font-size: 12px; color: var(--muted); }

/* Notes (ContextHive, notes.js): its UI takes the reader's colours and type, in every theme. Its highlights are painted
   in the page, so their fill is set on :root. */
contexthive-root {
  --ctx-accent: var(--accent); --ctx-accent-contrast: var(--panel); --ctx-background: var(--panel); --ctx-foreground: var(--ink);
  --ctx-muted: var(--muted); --ctx-border: var(--line); --ctx-shadow: var(--shadow); --ctx-radius: 10px;
  --ctx-font: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif; --ctx-font-size: 14px;
}
:root { --ctx-highlight: color-mix(in srgb, var(--sel) 75%, transparent); --ctx-highlight-active: color-mix(in srgb, var(--accent) 22%, var(--sel)); }

/* Phones in landscape: wide but short (an iPhone is 330–430px tall on its side, less under Safari's bars). A bottom
   sheet would cover most of the text, so the panel sits beside the text instead, only while it is open, and the
   heading, bar, dock and dialogs give up height so more lines of text stay in view. app.js's SHEET_MQ matches. */
@media (max-height: 500px) and (min-width: 600px) and (max-width: 1000px) {
  .panels { grid-template-columns: minmax(0, 1fr); }
  body.sheet-open .panels { grid-template-columns: minmax(0, 1fr) clamp(280px, 42vw, 400px); }
  .context:not(.open) { display: none; }
  .context { padding: 10px 14px 16px; }
  .tabs { top: -10px; }
  .tabs button { padding: 7px 8px; font-size: 13px; }
  .bar { padding-top: 3px; padding-bottom: 3px; }
  .reader { padding: 14px 20px 12px; }
  .chapter .emblem { width: 96px; height: 96px; top: -10px; right: 0; }
  :root:not(.no-emblem) .chapter .emblem[data-g]:not([data-g=""]) ~ h1 { min-height: 0; padding-right: 100px; margin-bottom: .5em; }
  :root:not(.no-emblem) .chapter .emblem[data-g]:not([data-g=""]) ~ h1::after { width: 180px; height: 180px; right: -50px; top: -60px; }
  .dock-wrap { bottom: 8px; margin-top: 16px; }
  .picker { max-height: calc(100dvh - 16px); }
  .settings { max-height: calc(100dvh - 56px); }
  .install { bottom: 8px; right: 8px; padding: 10px 14px 8px; }
  .install-why { display: none; }
  .install-steps { gap: 4px; margin-top: 8px; }
  .install-steps .ico { width: 26px; height: 26px; }
  .install-acts { margin-top: 6px; }
  /* The page runs edge to edge (viewport-fit=cover), so the strips beside the notch are no longer left empty. iOS
     reports the same inset on both sides; app.js marks which side the camera is on (data-notch), and the other side
     keeps only enough to clear the rounded corner. The text comes up to the notch's edge, not a margin past it. */
  .bar { padding-left: max(8px, var(--sl)); padding-right: max(8px, var(--sr)); }
  .reader { padding-left: max(20px, calc(var(--sl) + 4px)); padding-right: max(20px, calc(var(--sr) + 4px)); }
  body.sheet-open .reader { padding-right: 20px; }
  .context { padding-right: max(14px, calc(var(--sr) + 4px)); }
  .install { right: max(8px, var(--sr)); }
}
:root { --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); }
:root[data-notch="left"] { --sr: calc(env(safe-area-inset-right, 0px) * .3); }
:root[data-notch="right"] { --sl: calc(env(safe-area-inset-left, 0px) * .3); }
/* A tour on a phone in landscape: the step's picture and map stand beside its note and verses (too short to go above
   them), filling the card's height. */
@media (max-height: 500px) and (min-width: 600px) and (max-width: 1000px) {
  body.touring .tour { max-width: none; }
  body.touring .tour-body:has(.tour-pic:not([hidden]), .tour-route:not([hidden])) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 12px;
  }
  body.touring .tour-body > :not(.tour-media) { grid-column: 2; }
  body.touring .tour-media { display: flex; flex-direction: column; grid-column: 1; grid-row: 1 / span 2; min-height: 0; margin: 8px 0 4px; }
  body.touring .tour-media .tour-pic { flex: 1 1 0; min-height: 0; }
  body.touring .tour-media .tour-pic:not(.big) img { aspect-ratio: auto !important; width: 100%; height: 100%; max-height: none; }
  body.touring .tour-pic.big img { height: 100%; max-height: none; }
  body.touring .tour-media .tour-route,
  body.touring .tour-media:is([data-show="map"], :not(:has(.tour-pic:not([hidden])))) .tour-route { flex: 1 1 0; min-height: 0; height: auto; width: 100%; aspect-ratio: auto; max-height: none; }
}