/* Palette mirrors Theme.swift so the web reader and the iOS app look like one
   product. Values are the same hex the Swift enum documents. */
:root {
  --page-bg: #faf8f2;
  --page-bg-deep: #f0ece0;
  --row-alt: #fdf8eb;

  --ink: #1a1a1a;
  --ink-light: #444444;

  --hw-ink: #1a2744;      /* Samoan surface form */
  --gloss-ink: #5a6a8a;   /* English gloss */

  --accent: #dbb958;
  --accent-light: #e8cc78;
  --rule: #d6ceb8;
  --rule-light: #e8e2d4;
  --verse-num: #7fb3d3;

  --header-bg: #1e2233;
  --header-hover: #2a2f44;
  --header-text: #dbb958;
  --button-border: #3a3f55;

  --scale: 1;
  --serif: "Times New Roman", "Tinos", Times, serif;

  --chrome-h: 3rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #14161f;
    --page-bg-deep: #0e1017;
    --row-alt: #191c27;
    --ink: #e8e4d8;
    --ink-light: #b4b0a4;
    --hw-ink: #cdd8ef;
    --gloss-ink: #8fa0c2;
    --rule: #2e3244;
    --rule-light: #232636;
  }
}

* { box-sizing: border-box; }

/* The sheets and pager set `display: flex`, which outranks the UA rule for the
   `hidden` attribute. Without this they render on load. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--serif);
  overscroll-behavior-y: none;
}

/* ---------- chrome ---------- */

.chrome {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .25rem;
  height: var(--chrome-h);
  padding: 0 .5rem;
  padding-top: env(safe-area-inset-top);
  height: calc(var(--chrome-h) + env(safe-area-inset-top));
  background: var(--header-bg);
  color: var(--header-text);
}

.chrome h1 {
  flex: 1;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chrome-btn {
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .5rem;
  border: 1px solid var(--button-border);
  border-radius: .4rem;
  background: transparent;
  color: var(--header-text);
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.chrome-btn:hover { background: var(--header-hover); }
.chrome-btn:active { background: var(--header-hover); }

/* Circular back affordance, as in the app's navigation bar. */
.chrome-btn.round {
  width: 2.25rem;
  padding: 0;
  border-radius: 50%;
  background: var(--header-hover);
  font-size: 1.4rem;
  line-height: 1;
}

/* "Aa" — the second A is set smaller, matching the app's type-size glyph. */
#btn-settings { font-size: 1.2rem; letter-spacing: -.02em; }
#btn-settings small { font-size: .78em; }

/* ---------- reading surface ---------- */

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem .75rem 5rem;
  outline: none;
}

.book-title {
  margin: .5rem 0 .25rem;
  font-size: calc(1.6rem * var(--scale));
  color: var(--hw-ink);
  text-align: center;
}

.chapter-num {
  margin: 0 0 1rem;
  font-size: calc(1.1rem * var(--scale));
  color: var(--ink-light);
  text-align: center;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Chapter title block — mirrors BookHeader in ChapterView.swift */
.book-header {
  padding: 1rem 0;
  margin-bottom: .5rem;
  border-bottom: 2px solid var(--rule);
  text-align: center;
}

.book-header p { margin: 0; }

.bh-sm {
  margin: 0;
  color: var(--header-bg);
  font-size: calc(2.125rem * var(--scale));
  font-weight: 700;
  letter-spacing: .035em;
}

.bh-en {
  color: var(--ink-light);
  font-size: calc(1.063rem * var(--scale));
  letter-spacing: .06em;
  padding-bottom: .25rem;
}

.bh-orn {
  color: var(--accent);
  font-size: calc(1.063rem * var(--scale));
  letter-spacing: .5em;
  padding: .25rem 0 .5rem;
}

.bh-ch-sm {
  color: var(--ink);
  font-size: calc(1.5rem * var(--scale));
  font-weight: 700;
  letter-spacing: .06em;
}

.bh-ch-en {
  margin-top: .125rem;
  color: var(--accent);
  font-size: calc(.875rem * var(--scale));
  letter-spacing: .09em;
  text-transform: uppercase;
}

.heading, .colophon {
  margin: 0 0 1.25rem;
  padding: .75rem .9rem;
  border-left: 3px solid var(--accent);
  background: var(--row-alt);
  border-radius: .25rem;
}

.heading .en, .colophon .en {
  margin: .4rem 0 0;
  color: var(--gloss-ink);
  font-size: calc(.85rem * var(--scale));
  font-style: italic;
}

/* One verse row: number column + mode-dependent content (VerseView). */
.verse {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .625rem .25rem;
  background: var(--row-alt);
  border-bottom: 1px solid var(--rule-light);
}

.verse-num {
  flex: none;
  width: calc(2rem * var(--scale));
  padding-top: .5rem;
  color: var(--verse-num);
  font-size: calc(1.063rem * var(--scale));
  font-weight: 700;
  text-align: center;
}

/* Interlinear: word units flow and wrap. */
.flow {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .375rem;
}

/* Samoan-only and dual modes render prose rather than stacked cells. */
.prose {
  flex: 1;
  margin: 0;
  padding-top: .375rem;
  color: var(--hw-ink);
  line-height: 1.55;
}

.mode-samoan .prose { font-size: calc(1.188rem * var(--scale)); }

.dual-cols {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: .875rem;
}

.dual-cols .prose { font-size: calc(1.063rem * var(--scale)); }

.dual-rule {
  flex: none;
  align-self: stretch;
  width: 1px;
  background: var(--rule);
}

/* Side-by-side is unreadable on a narrow phone; stack it instead. */
@media (max-width: 34rem) {
  .dual-cols { flex-direction: column; gap: .5rem; }
  .dual-rule { width: 100%; height: 1px; }
  .dual-cols .en-col { font-style: italic; color: var(--gloss-ink); }
}

/* One interlinear cell: Samoan stacked over its gloss. Mirrors WordUnitView. */
.unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}

.unit .sm {
  color: var(--hw-ink);
  font-size: calc(1.375rem * var(--scale));
  font-weight: 500;
  line-height: 1.15;
}

.unit .en {
  color: var(--gloss-ink);
  font-size: calc(.75rem * var(--scale));
  font-style: italic;
  line-height: 1.15;
}

body.no-gloss .unit .en { display: none; }

/* ---------- highlights, selection, notes ---------- */

/* Five tints from HighlightColor. Applied to a word-unit or a whole verse. */
[data-hl="yellow"] { background: #fff08c; }
[data-hl="pink"]   { background: #ffc7d9; }
[data-hl="blue"]   { background: #a8d9fc; }
[data-hl="green"]  { background: #bdeba6; }
[data-hl="purple"] { background: #d9bff2; }

/* The tints are light by design, so highlighted text keeps the dark ink
   rather than inheriting a dark-mode foreground it can't be read against. */
@media (prefers-color-scheme: dark) {
  .unit.hl .sm, .verse.hl .prose, .verse.hl .verse-num { color: #1a2744; }
  .unit.hl .en { color: #47546f; }
}

.unit.selected { border-color: var(--accent); }

.verse.hl { border-radius: .25rem; }
.verse.selected { box-shadow: inset 0 0 0 2px var(--accent); border-radius: .25rem; }

/* Margin notepad — an annotated verse shows a notepad in the right gutter,
   the way the Church's own reader marks a noted verse. Hidden unless the row
   carries a note, but always in the DOM so the gutter width never shifts. */
.note-marker {
  flex: none;
  align-self: flex-start;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .375rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  visibility: hidden;
}

.verse.has-note .note-marker { visibility: visible; }
.note-marker svg { width: 100%; height: 100%; display: block; }
.note-marker:hover { color: var(--accent-light); }

/* ---------- selection toolbar ---------- */

.actionbar {
  position: fixed;
  right: 0;
  bottom: 3.25rem;
  bottom: calc(3.25rem + env(safe-area-inset-bottom));
  left: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem 1rem;
  background: var(--header-bg);
  border-top: 1px solid var(--button-border);
}

.swatches { display: flex; gap: .5rem; }

.swatch {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  cursor: pointer;
}

.act-btn {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--header-text);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

#btn-erase {
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  font-size: .9rem;
}

.act-div { width: 1px; height: 1.5rem; background: rgba(255, 255, 255, .3); }
.act-spacer { flex: 1; }

/* ---------- note editor ---------- */

.note-ref {
  margin: 0;
  color: var(--header-bg);
  font-size: 1.05rem;
  font-weight: 600;
}

.note-preview {
  margin: .25rem 0 .75rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-light);
  font-size: .875rem;
  font-style: italic;
}

#note-text {
  width: 100%;
  padding: .75rem;
  border: 1px solid var(--rule);
  border-radius: .625rem;
  background: var(--row-alt);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.05rem;
  resize: vertical;
}

.note-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .75rem;
}

.note-delete {
  padding: .5rem .875rem;
  border: 1px solid #c0392b;
  border-radius: .375rem;
  background: transparent;
  color: #c0392b;
  font-family: var(--serif);
  font-size: .9rem;
  cursor: pointer;
}

.note-save {
  margin-left: auto;
  padding: .5rem 1.25rem;
  border: 1px solid var(--accent);
  border-radius: .375rem;
  background: var(--accent);
  color: var(--header-bg);
  font-family: var(--serif);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- library drawer ---------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, .45);
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: min(20rem, 85vw);
  height: 100%;
  padding-top: env(safe-area-inset-top);
  overflow-y: auto;
  background: var(--page-bg-deep);
  border-right: 1px solid var(--rule);
}

.drawer-head {
  position: sticky;
  top: 0;
  padding: .9rem 1rem;
  background: var(--header-bg);
  color: var(--header-text);
  font-size: 1.05rem;
}

.drawer-body-group { border-bottom: 1px solid var(--rule-light); }

.drawer-book {
  width: 100%;
  padding: .7rem 1rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}

.drawer-book:hover { background: var(--row-alt); }
.drawer-book .en { color: var(--ink-light); font-size: .8rem; font-style: italic; }

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr));
  gap: .35rem;
  padding: .25rem .75rem .85rem;
}

.chapter-chip {
  padding: .45rem 0;
  border: 1px solid var(--rule);
  border-radius: .3rem;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: .9rem;
  cursor: pointer;
}

.chapter-chip:hover { border-color: var(--accent); }

/* ---------- sheets ---------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
}

.sheet-inner {
  width: min(34rem, 100%);
  max-height: 85vh;
  overflow-y: auto;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  background: var(--page-bg);
  border-radius: .75rem .75rem 0 0;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
  font-size: 1.1rem;
}

.sheet-head .chrome-btn { color: var(--ink); border-color: var(--rule); }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--rule-light);
}

.row small { color: var(--ink-light); font-style: italic; }

.note {
  margin: .6rem 0 0;
  color: var(--ink-light);
  font-size: .8rem;
  font-style: italic;
}

.pill {
  padding: .15rem .5rem;
  border: 1px solid var(--rule);
  border-radius: 1rem;
  font-size: .75rem;
  font-style: normal;
}

#search-input {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--rule);
  border-radius: .4rem;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
}

.result {
  width: 100%;
  padding: .6rem .25rem;
  border: 0;
  border-bottom: 1px solid var(--rule-light);
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  text-align: left;
  cursor: pointer;
}

.result .ref { color: var(--gloss-ink); font-size: .78rem; font-style: italic; }
.result .snip { display: block; margin-top: .15rem; font-size: .92rem; }
.result mark { background: var(--accent-light); color: var(--ink); }

/* ---------- reader mode bar (footer) ---------- */

.modebar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: .5rem 1rem .625rem;
  padding-bottom: calc(.625rem + env(safe-area-inset-bottom));
  background: var(--header-bg);
}

.mode-btn {
  padding: .438rem .875rem;
  border: 1px solid var(--button-border);
  border-radius: .25rem;
  background: transparent;
  color: var(--accent);
  font-family: var(--serif);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}

.mode-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--header-bg);
}

/* ---------- chapter-to-chapter navigation ---------- */

.chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1.5rem;
}

.nav-spacer { flex: 1; }

.nav-btn {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .125rem;
  padding: .625rem .875rem;
  border: 1px solid var(--rule);
  border-radius: .375rem;
  background: var(--row-alt);
  color: var(--ink);
  font-family: var(--serif);
  cursor: pointer;
}

.nav-btn.next { text-align: right; }
.nav-dir { color: var(--accent); font-size: .688rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.nav-ref { font-size: .938rem; }

/* ---------- misc ---------- */

.front-body {
  font-size: calc(1rem * var(--scale));
  line-height: 1.7;
  white-space: pre-wrap;
}

.front-body.en { color: var(--gloss-ink); font-style: italic; }

.section-list { list-style: none; margin: 0; padding: 0; }

.section-list button {
  width: 100%;
  padding: .8rem .25rem;
  border: 0;
  border-bottom: 1px solid var(--rule-light);
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}

.loading { padding: 2rem 0; color: var(--ink-light); text-align: center; font-style: italic; }

/* ---------- landing page (mirrors BookListView) ---------- */

.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 35rem;
  margin: 0 auto;
}

/* The single cover plate. 3:4 like the app, navy gradient, gold rules. */
.cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .875rem;
  width: min(100%, 17rem);
  aspect-ratio: 3 / 4;
  margin-top: 1.5rem;
  padding: 1.75rem 1rem;
  border: 1px solid #2a4060;
  border-radius: .5rem;
  background: linear-gradient(180deg, #0d1a2e 0%, #162744 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
  cursor: pointer;
  font-family: var(--serif);
}

.cover-rule {
  width: calc(100% - 3.5rem);
  height: 1px;
  background: rgba(219, 185, 88, .55);
}

.cover-title, .cover-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cover-title { gap: .875rem; }
.cover-sub { gap: .375rem; }

.cover-cell { display: flex; flex-direction: column; gap: 1px; }

.cover-title .sm {
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .094em;
}

.cover-title .en {
  color: rgba(219, 185, 88, .8);
  font-size: .688rem;
  font-style: italic;
}

.cover-sub .sm {
  color: rgba(219, 185, 88, .9);
  font-size: .813rem;
  letter-spacing: .031em;
}

.cover-sub .en {
  color: rgba(219, 185, 88, .7);
  font-size: .563rem;
  font-style: italic;
}

.continue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 1.5rem;
  padding: .75rem 1.5rem;
  border: 1px solid rgba(219, 185, 88, .6);
  border-radius: .5rem;
  background: var(--header-bg);
  cursor: pointer;
  font-family: var(--serif);
}

.continue-kicker {
  color: var(--accent);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .031em;
  text-transform: uppercase;
}

.continue-ref {
  color: var(--header-text);
  font-size: 1.125rem;
  font-weight: 700;
}

/* Required license notice, in the app's three registers. */
.disclaimer {
  width: 100%;
  margin-top: 2.25rem;
  padding: .875rem 1.125rem;
  border-bottom: 1px solid var(--rule);
  background: var(--row-alt);
}

.disclaimer-en, .disclaimer-sm {
  margin: 0;
  color: var(--ink-light);
  font-size: .656rem;
  line-height: 1.6;
  text-align: center;
}

.disclaimer-sm { font-style: italic; }

.disclaimer .hairline {
  height: 1px;
  margin: .75rem 2.5rem;
  background: rgba(214, 206, 184, .6);
}

.disclaimer-gloss {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem .5rem;
}

.gloss-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
}

.gloss-cell .sm {
  color: var(--hw-ink);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.2;
}

.gloss-cell .en {
  color: var(--gloss-ink);
  font-size: .5rem;
  font-style: italic;
  line-height: 1.2;
}