/* =============================================================================
   Memorize the Bible: site styles (index.htm + verses.htm)

   COLOURS: this file contains NO colour values of its own for text, links, buttons or panels.
   Everything comes from the CSS variables that themes.css defines for each of the 14 themes
   (--text, --link, --surface, --primary, --panel ...). To change a colour, edit lib/themes.py.

   BASE ELEMENTS: section "Base elements" styles every common HTML element (headings, links in
   all states, buttons, inputs, tables, lists, code ...) with zero specificity, so a component you
   add later (an <h3>, a <button>, a <table>) is already readable and on-theme in every theme,
   and any class you write still wins over it.

   TEXT SIZE: every font-size is rem (or inherited). The A↕ button only changes --font-scale on
   <html>, and html's font-size rescales ALL text together. Never use px for font-size and never
   set a font-size inline (verses.js writes the auto-fitted verse size in rem as well).

   Layout is mobile-first. Breakpoints: 520px, 700px (tablet), 1000px (desktop), and a
   short-landscape mode (max-height: 500px).
   ============================================================================= */

:root {
  --font-base: 16px;                   /* root text size at "Normal" */
  --font-scale: 1;                     /* 0.85 / 1 / 1.15 / 1.3 / 1.5, set by the A↕ button */
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --tap: 48px;                         /* minimum touch target */
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(var(--font-base) * var(--font-scale)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg-base); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
  background: transparent;           /* the fixed .bg layer paints the theme */
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--primary); color: var(--on-primary); }

/* ── Base elements: theme-aware defaults with ZERO specificity (:where) ─────── */
:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading); font-weight: var(--heading-weight); line-height: 1.15;
  color: var(--text); text-shadow: var(--shadow-text); margin: .8em 0 .4em;
}
:where(h1) { font-size: 2rem; }
:where(h2) { font-size: 1.6rem; }
:where(h3) { font-size: 1.3rem; }
:where(h4) { font-size: 1.1rem; }
:where(h5) { font-size: 1rem; }
:where(h6) { font-size: .875rem; text-transform: uppercase; letter-spacing: .06em; }
:where(p, ul, ol, dl, pre, table, fieldset, details, figure) { margin: 1em 0; }
:where(small) { font-size: .875em; }
:where(sub, sup) { font-size: .75em; }
:where(strong, b, th, dt, summary) { font-weight: 700; }
:where(em, i, cite, dfn) { font-style: italic; }
:where(cite) { color: var(--accent); }
:where(del) { color: var(--text-dim); }
:where(abbr[title]) { text-decoration: underline dotted; }
:where(mark) { background: var(--mark); color: inherit; border-radius: .2em; padding: 0 .15em; }
:where(blockquote) { margin: 1em 0; padding: .2em 1em; border-left: .25rem solid var(--accent); color: var(--text); }
:where(hr) { border: 0; border-top: 1px solid var(--line); margin: 1.2em 0; }
:where(dd) { margin: 0 0 .5em 1.2em; }
:where(figcaption, caption) { color: var(--text-dim); font-size: .875em; }
:where(img, video) { max-width: 100%; height: auto; }
:where(code, kbd, samp, pre) { font-family: var(--font-mono); font-size: .9em; }
:where(code, kbd, samp) { background: var(--shade); border-radius: .3em; padding: .1em .35em; }
:where(kbd) { border: 1px solid var(--line); border-bottom-width: 2px; }
:where(pre) { background: var(--shade); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8em 1em; overflow: auto; }
:where(pre code) { background: none; padding: 0; }
:where(details) { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .5em .9em; }
:where(summary) { cursor: pointer; }
:where(fieldset) { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6em 1em; }
:where(legend) { padding: 0 .4em; }
:where(table) { border-collapse: collapse; width: 100%; }
:where(th, td) { padding: .5em .75em; border-bottom: 1px solid var(--line); text-align: left; }
:where(th) { background: var(--shade); }
:where(caption) { caption-side: top; text-align: left; padding: .4em 0; }

/* Links, every state. Visited links get their own colour; hover/focus/active get a third. */
:where(a:link, a:visited) { color: var(--link); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .08em; }
:where(a:visited) { color: var(--link-visited); }
:where(a:hover, a:focus-visible, a:active) { color: var(--link-hover); }

/* Buttons and form controls */
:where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .5em 1em; cursor: pointer;
}
:where(button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover) { background: var(--surface-hi); }
:where(button:disabled, input:disabled, select:disabled, textarea:disabled) { opacity: .45; cursor: default; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="color"]):not([type="file"]), textarea, select) {
  font: inherit; color: var(--input-text); background: var(--input-bg); border: 1.5px solid var(--input-line);
  border-radius: var(--radius-sm); padding: .5em .75em; max-width: 100%;
}
:where(input, textarea)::placeholder { color: var(--input-dim); opacity: 1; }
:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress, meter) { accent-color: var(--accent); }
:where(label) { color: var(--text); }
:where(dialog) { color: var(--panel-text); background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--radius); }

/* ── Shared controls ─────────────────────────────────────────────────────── */
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--primary); color: var(--on-primary); padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; }
.skip:focus { top: 8px; }
.chip, .icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: max(44px, 2.75rem); padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--text); font-weight: 700; font-size: 1.0625rem; text-decoration: none;
  text-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .15s ease, transform .1s ease;
  white-space: nowrap;
}
.icon-btn { min-width: max(44px, 2.75rem); padding: 0 .4rem; font-size: 1.3125rem; line-height: 1; }
.chip:hover, .icon-btn:hover { background: var(--surface-hi); }
.chip:active, .icon-btn:active { transform: scale(.95); }
.icon-btn[aria-expanded="true"] { background: var(--primary); color: var(--on-primary); text-shadow: none; }
.glass {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .chip, .icon-btn, .thumbbar { background-color: var(--surface-hi); }
}
.seg { display: inline-flex; border-radius: var(--radius-pill); background: var(--shade); border: 1px solid var(--line); padding: 3px; }
.seg button {
  min-width: 46px; min-height: max(38px, 2.375rem); padding: 0 .5rem; border: 0; border-radius: var(--radius-pill); background: transparent;
  font-weight: 700; font-size: 1rem; color: var(--text); text-shadow: var(--shadow-soft);
}
.seg button:hover { background: var(--surface); }
.seg button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); text-shadow: none; }

/* Toast (bottom message) */
.toast {
  position: fixed; left: 50%; bottom: calc(118px + var(--safe-b)); z-index: 60;
  transform: translate(-50%, 12px); max-width: min(92vw, 520px);
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--panel); color: var(--panel-text); border: 1px solid var(--panel-line);
  font-size: 1.0625rem; font-weight: 700;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; transition: opacity .2s ease, transform .2s ease; }
.toast button { border: 0; border-radius: var(--radius-sm); padding: 8px 12px; background: var(--primary); color: var(--on-primary); font-weight: 700; white-space: nowrap; }
.page-home .toast { bottom: calc(24px + var(--safe-b)); }

/* Dialog sheets (Tools, Jump to verse) and the centred Yes/No box (Install) */
dialog.sheet {
  border: 0; padding: 0; color: var(--panel-text);
  width: 100%; max-width: 560px; max-height: 88vh; max-height: 88dvh;
  margin: auto auto 0; border-radius: 22px 22px 0 0;
  background: var(--panel); box-shadow: 0 -10px 40px rgba(0, 0, 0, .45);
  overscroll-behavior: contain;
}
dialog.sheet[open] { display: flex; flex-direction: column; animation: sheet-up .22s ease-out; }
dialog.sheet::backdrop { background: rgba(0, 0, 0, .5); }
@keyframes sheet-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 700px) {
  dialog.sheet { margin: auto; border-radius: 22px; max-height: 84vh; }
}
dialog.sheet.modal { width: calc(100% - 32px); max-width: 440px; margin: auto; border-radius: 22px; }
.sheet :where(h1, h2, h3, h4, h5, h6) { color: inherit; text-shadow: none; }
.sheet a { text-underline-offset: .18em; }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 10px 20px; border-bottom: 1px solid var(--panel-line); }
.sheet-head h2 { flex: 1; margin: 0; font-size: 1.375rem; }
.sheet-close { min-width: var(--tap); min-height: var(--tap); padding: 0; border: 0; border-radius: var(--radius-sm); background: var(--panel-hi2); font-size: 1.375rem; color: var(--panel-text); }
.sheet-close:hover { background: var(--panel-line); }
.sheet-body { overflow-y: auto; padding: 8px 16px calc(18px + var(--safe-b)); -webkit-overflow-scrolling: touch; }
.sheet-foot { padding: 10px 16px calc(12px + var(--safe-b)); border-top: 1px solid var(--panel-line); }
.sheet h3 { margin: 18px 4px 8px; font-family: var(--font-body); font-size: .9375rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--panel-dim); }
.sheet .note { margin: 14px 4px 0; font-size: .875rem; color: var(--panel-dim); }
.dlg-text { margin: 12px 4px 18px; font-size: 1.125rem; line-height: 1.45; }
.dlg-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.dlg-btns .pill { flex: 1 1 9rem; }

.opt-list { display: grid; gap: 8px; }
.opt {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px;
  width: 100%; min-height: 58px; padding: 8px 12px; text-align: left;
  border: 1px solid var(--panel-line); border-radius: var(--radius-sm); background: var(--panel-hi);
  color: var(--panel-text); font-size: 1.125rem; text-decoration: none;
}
.opt:hover { background: var(--panel-hi2); }
.opt .ico { font-size: 1.625rem; text-align: center; }
.opt b { display: block; font-size: 1.125rem; }
.opt small { display: block; font-size: .875rem; color: var(--panel-dim); }
.opt[aria-checked="true"], .opt[aria-pressed="true"] { border-color: var(--accent); background: var(--panel-sel); }
.opt .check { font-size: 1.25rem; color: var(--accent); opacity: 0; }
.opt[aria-checked="true"] .check { opacity: 1; }
.switch { width: 52px; height: 30px; border-radius: 99px; background: var(--panel-track); position: relative; transition: background-color .15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .15s; }
[aria-checked="true"] > .switch { background: #2f9e5a; }
[aria-checked="true"] > .switch::after { transform: translateX(22px); }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  min-height: var(--tap); min-width: var(--tap); padding: 0 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--panel-line); background: var(--panel-hi); color: var(--panel-text);
  font-weight: 700; font-size: 1.0625rem; text-decoration: none;
}
.pill:hover { background: var(--panel-hi2); }
.pill[aria-pressed="true"], .pill.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.pill.wide { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; }
.state-box .pill:not(.primary) { background: var(--surface); border-color: var(--line); color: var(--text); }   /* pills on the page (not in a dialog) */

/* ── Verse page ──────────────────────────────────────────────────────────── */
/* Named areas: hidden parts (title in landscape, practice strip) can never shift the rows. */
.page-verses {
  height: 100vh; height: 100dvh; overflow: hidden;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "top" "title" "stage" "practice" "bar";
}
.page-verses .topbar { grid-area: top; }
.page-verses .topic-title { grid-area: title; }
.page-verses .stage { grid-area: stage; }
.page-verses .practice { grid-area: practice; }
.page-verses .thumbbar { grid-area: bar; }
.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  padding: calc(10px + var(--safe-t)) 12px 4px;
  width: 100%; max-width: 1100px; margin: 0 auto;
}
.topbar .spacer { flex: 1; }
.topbar #toolsBtn { margin-left: auto; }                     /* stays at the right edge if the bar wraps (big text) */
.topbar .mini-title { display: none; flex: 1; min-width: 0; text-align: center; font-family: var(--font-heading); font-size: 1.25rem; font-weight: var(--heading-weight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: var(--shadow-text); }
.topic-title {
  margin: 4px 16px 0; text-align: center;
  font-size: clamp(1.625rem, 6.4vw, 2.75rem); line-height: 1.1;
}
.topic-title .emoji { text-shadow: none; }
.topic-title .emoji:first-child { margin-right: .25em; }     /* emoji on both sides of the title */
.topic-title .emoji:last-child { margin-left: .25em; }
.topic-title .emoji:empty { display: none; }

.stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 10px 18px; min-height: 0; touch-action: pan-y; }
.verse-card {
  width: 100%; max-width: 980px; max-height: 100%;
  display: flex; flex-direction: column; justify-content: center; text-align: center;
  overflow: hidden;
}
.verse-card.scroll { overflow-y: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
.verse-text {
  margin: 0; font-family: var(--font-verse); font-size: 2rem; line-height: 1.28;
  text-shadow: var(--shadow-text); overflow-wrap: break-word; hyphens: manual;
}
.verse-ref {
  margin: .6em 0 0; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  font-weight: 700; color: var(--accent); text-shadow: var(--shadow-text);
  font-size: clamp(1.125rem, 4.4vw, 1.875rem);
}
.speak-btn {
  min-width: max(44px, 2.75rem); min-height: max(44px, 2.75rem); padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-size: 1.25rem; line-height: 1;
}
.speak-btn:hover { background: var(--surface-hi); }
.speak-btn.on { background: var(--primary); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.enter-next { animation: in-next .28s ease-out; }
.enter-prev { animation: in-prev .28s ease-out; }
.enter-fade { animation: in-fade .3s ease-out; }
@keyframes in-next { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes in-prev { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes in-fade { from { opacity: 0; } to { opacity: 1; } }

/* Practice-mode words */
.w { border-radius: 4px; }
.mode-hints .w, .mode-fade .w { cursor: pointer; }
.w.gone { color: transparent; text-shadow: none; border-bottom: 3px solid var(--text-dim); }
.w.peek { color: var(--accent); border-bottom-color: transparent; text-shadow: var(--shadow-text); }
.reveal-all .w.gone { color: inherit; text-shadow: var(--shadow-text); border-bottom-color: transparent; }

/* Loading / error / not found / finished */
.state-box { max-width: 560px; text-align: center; padding: 20px; }
.state-box h2 { margin: 0 0 10px; font-size: 1.875rem; }
.state-box p { margin: 0 0 16px; font-size: 1.1875rem; text-shadow: var(--shadow-text); }
.state-box .row-btns { justify-content: center; }
.spinner { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%; border: 5px solid var(--track); border-top-color: var(--text); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.finish-list { display: grid; gap: 10px; margin-top: 8px; }
.finish-list .opt { justify-content: center; grid-template-columns: 40px 1fr; background: var(--surface); border-color: var(--line); color: var(--text); }
.finish-list .opt small { color: var(--text-dim); }
.finish-list .opt:hover { background: var(--surface-hi); }
.finish-list .opt.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); text-shadow: none; }
.finish-list .opt.primary small { color: var(--on-primary); opacity: .8; }
.topic-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.notfound .stage { align-items: flex-start; overflow-y: auto; touch-action: auto; }
.notfound .state-box { padding-bottom: calc(24px + var(--safe-b)); }

/* Practice strip (above the thumb bar) */
.practice {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px;
  padding: 0 10px 8px; width: 100%; max-width: 680px; margin: 0 auto;
}
.practice .label { font-weight: 700; font-size: .9375rem; text-shadow: var(--shadow-text); white-space: nowrap; }
.practice .chip { min-height: max(40px, 2.5rem); min-width: max(40px, 2.5rem); font-size: .9375rem; padding: 0 12px; }
.practice .chip.sq { padding: 0; width: max(40px, 2.5rem); font-size: 1.25rem; }
.practice .chip:disabled { opacity: .4; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
.dots i.on { background: var(--accent); }

/* Thumb bar */
.thumbbar {
  position: relative;
  width: min(680px, calc(100% - 16px)); margin: 0 auto calc(8px + var(--safe-b));
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px;
  padding: 16px 10px 10px; border-radius: 22px;
  background: var(--bar); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.progress { position: absolute; left: 16px; right: 16px; top: 6px; height: 5px; border-radius: 5px; background: var(--track); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 5px; transition: width .3s ease; }
.nav-btn {
  min-height: 58px; min-width: 0; padding: 0 6px; border-radius: var(--radius); font-weight: 700;
  font-size: clamp(1rem, 4.6vw, 1.375rem); line-height: 1.15; text-align: center;
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px;
  transition: transform .08s ease, opacity .15s ease;
  touch-action: manipulation;
}
.nav-btn:active:not(:disabled) { transform: scale(.96); }
.nav-btn.back { background: var(--surface); border: 1px solid var(--line); color: var(--text); text-shadow: var(--shadow-soft); }
.nav-btn.back:hover:not(:disabled) { background: var(--surface-hi); }
.nav-btn.next { background: var(--primary); border: 1px solid var(--primary); color: var(--on-primary); }
.nav-btn:disabled { opacity: .35; cursor: default; }
.counter {
  min-width: max(92px, 5.75rem); min-height: 58px; padding: 0 10px; border-radius: var(--radius-sm);
  background: var(--shade); border: 1px dashed var(--line); color: var(--text);
  font-weight: 700; font-size: 1.25rem; line-height: 1; touch-action: manipulation;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.counter small { font-size: .75rem; font-weight: 400; letter-spacing: .04em; }

/* Jump list */
.jump-list { display: grid; gap: 6px; }
.jump-list button {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: center; text-align: left; width: 100%;
  min-height: 52px; padding: 6px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--panel-line); background: var(--panel-hi); color: var(--panel-text);
}
.jump-list button:hover { background: var(--panel-hi2); }
.jump-list button .n { font-weight: 700; font-size: 1.125rem; text-align: center; color: var(--panel-dim); }
.jump-list button .r { font-weight: 700; color: var(--accent); display: block; font-size: 1rem; }
.jump-list button .s { display: block; font-size: .875rem; color: var(--panel-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jump-list button.cur { border-color: var(--accent); background: var(--panel-sel); }
.jump-list button.cur .n { color: var(--accent); }

@media (min-width: 700px) {
  .stage { padding: 16px 40px; }
}
/* Short landscape phones: fold the big title into the top bar */
@media (max-height: 500px) {
  .topic-title { display: none; }
  .topbar .mini-title { display: block; }
  .topbar .spacer { display: none; }
  .topbar { padding-top: calc(6px + var(--safe-t)); }
  .nav-btn, .counter { min-height: 46px; }
  .thumbbar { padding: 12px 8px 6px; margin-bottom: calc(4px + var(--safe-b)); }
  .toast { bottom: calc(80px + var(--safe-b)); }
}

/* ── Home page ───────────────────────────────────────────────────────────── */
.page-home main, .home-head, .home-foot { width: 100%; max-width: 1100px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.home-head { padding-top: calc(12px + var(--safe-t)); text-align: center; }
/* ONE row of buttons: 🏠 on the left, language + search + theme + text size + install on the right */
.home-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.head-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
@media (max-width: 430px) {      /* keeps all six buttons on one line on a 360px phone */
  .home-head-row .icon-btn { min-width: max(38px, 2.375rem); min-height: max(38px, 2.375rem); }
  .head-actions { gap: 5px; }
  .head-actions .seg button { min-width: 34px; min-height: max(34px, 2.125rem); }
}
.home-title { margin: 14px 0 4px; font-size: clamp(2rem, 8vw, 3.625rem); line-height: 1.05; }
.tagline { margin: 0 auto 16px; max-width: 640px; font-size: clamp(1.0625rem, 2.4vw, 1.3125rem); text-shadow: var(--shadow-text); }
.searchbox { position: relative; max-width: 640px; margin: 0 auto 14px; }
.searchbox input {
  width: 100%; min-height: max(54px, 3.375rem); padding: 0 52px 0 50px; border-radius: var(--radius);
  border: 2px solid var(--input-line); background: var(--input-bg); color: var(--input-text);
  font-size: 1.1875rem; box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  -webkit-appearance: none; appearance: none;
}
.searchbox input::-webkit-search-cancel-button { display: none; }
.searchbox .mag { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 1.25rem; pointer-events: none; }
.searchbox .clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-sm); background: var(--input-clear); color: var(--input-text); font-size: 1.125rem; }
.continue {
  display: flex; align-items: center; gap: 12px; max-width: 640px; margin: 0 auto 12px; padding: 12px 16px;
  color: var(--text); text-decoration: none; font-size: 1.1875rem; font-weight: 700;
}
.continue .go { margin-left: auto; background: var(--primary); color: var(--on-primary); border-radius: var(--radius-sm); padding: 8px 14px; white-space: nowrap; }
.continue .bar { display: block; height: 5px; margin-top: 6px; border-radius: 5px; background: var(--track); overflow: hidden; }
.continue .bar i { display: block; height: 100%; background: var(--accent); }
.continue .txt { min-width: 0; flex: 1; }
.continue .txt span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.votd { max-width: 640px; margin: 0 auto 18px; padding: 16px 18px; text-align: center; }
.votd h2 { margin: 0 0 8px; font-family: var(--font-body); font-size: 1.125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.votd blockquote { margin: 0; padding: 0; border: 0; font-family: var(--font-verse); font-size: clamp(1.25rem, 3.4vw, 1.625rem); line-height: 1.3; text-shadow: var(--shadow-text); }
.votd cite { display: block; margin-top: 8px; font-style: normal; font-weight: 700; color: var(--accent); font-size: 1.25rem; text-shadow: var(--shadow-text); }
.votd .from { display: block; margin-top: 2px; font-size: .9375rem; text-shadow: var(--shadow-soft); }
.votd .row-btns { justify-content: center; margin-top: 12px; }
.votd .chip.solid { background: var(--primary); color: var(--on-primary); text-shadow: none; border-color: var(--primary); }

/* Topic cards: a centred, wrapping row of cards (an unfinished last row stays centred).
   Columns: 2 on phones, 3 from 520px, 4 from 700px, 5 from 1000px; a card is never narrower than
   10rem, so at big text sizes the grid drops to fewer columns instead of squeezing the words. */
.grid { --gap: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  flex: 0 0 auto; width: max(10rem, calc((100% - var(--gap)) / 2 - .5px));
  min-height: 5.75rem; padding: .7rem .4rem 1rem; text-align: center; text-decoration: none; color: var(--text);
  transition: transform .12s ease, background-color .15s ease;
}
@media (min-width: 520px) { .card { width: max(10rem, calc((100% - 2 * var(--gap)) / 3 - .5px)); } }
@media (min-width: 700px) { .card { width: max(10rem, calc((100% - 3 * var(--gap)) / 4 - .5px)); } }
@media (min-width: 1000px) {
  .grid { --gap: 14px; }
  .card { width: max(10rem, calc((100% - 4 * var(--gap)) / 5 - .5px)); }
}
.card:hover { background: var(--surface-hi); transform: translateY(-2px); }
.card:active { transform: scale(.97); }
.card { container-type: inline-size; }
/* Emoji and title always share one line (a long title such as "Kingdom of God" wraps beside the emoji).
   The title size follows the card width (cqw) so even the longest single word ("Commandments") fits. */
.card .head { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0 .3rem; max-width: 100%; }
.card .emoji { font-size: 1.25rem; line-height: 1.2; flex: none; }
.card .name {
  min-width: 0; overflow-wrap: anywhere;
  font-family: var(--font-heading); line-height: 1.15; text-shadow: var(--shadow-text);
  font-size: 1rem;                                                   /* fallback without container units */
  font-size: clamp(.875rem, calc(12.74cqw - .338rem), 1.25rem);
}
.card .meta { font-size: .9375rem; text-shadow: var(--shadow-soft); }
.card .bar { position: absolute; left: 12px; right: 12px; bottom: 7px; height: 4px; border-radius: 4px; background: var(--track); overflow: hidden; }
.card .bar i { display: block; height: 100%; background: var(--accent); }
.card .done { font-size: 1.125rem; color: var(--accent); text-shadow: var(--shadow-soft); }
.search-empty { text-align: center; font-size: 1.1875rem; text-shadow: var(--shadow-text); }
.results { max-width: 760px; margin: 22px auto 0; }
.results h2 { font-size: 1.25rem; margin: 0 0 10px; }
.results ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.results a { display: block; padding: 12px 14px; text-decoration: none; color: var(--text); }
.results a:hover { background: var(--surface-hi); }
.results .t { display: block; font-family: var(--font-verse); font-size: 1.125rem; text-shadow: var(--shadow-text); }
.results .r { display: block; margin-top: 4px; font-weight: 700; color: var(--accent); text-shadow: var(--shadow-soft); }
.results .more { text-align: center; margin-top: 10px; text-shadow: var(--shadow-text); }
.home-foot { padding-top: 22px; padding-bottom: calc(28px + var(--safe-b)); text-align: center; font-size: 1rem; }
.home-foot p { margin: 0; color: var(--text-dim); text-shadow: var(--shadow-soft); }
.noscript-list { columns: 2; font-size: 1.25rem; }

/* ── Reduced motion: keep everything still and instant ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}