@font-face { font-family: "EB Garamond"; src: url(fonts/garamond.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(fonts/garamond-italic.woff2) format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(fonts/atkinson-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(fonts/atkinson-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(fonts/atkinson-italic.woff2) format("woff2"); font-style: italic; font-display: swap; }

/* One ink, one paper, one rubric red. */
:root {
  --paper: #fbfaf7;
  --ink: #1c1b19;
  --quiet: #8d8a84;
  --rule: #e9e6df;
  --rubric: #b3261e;
  --wash: rgba(179, 38, 30, 0.07);
  --here: rgba(28, 27, 25, 0.05);
  --tile: #e6e2d9;
  --tile-alt: #dedad0;
  --glow: #b3261e;
  --garamond: "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --read: var(--garamond);
  --fs: 20px;
  --lh: 1.55;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e0e0e; --ink: #e6e3dc; --quiet: #75726c; --rule: #222120; --rubric: #e0574d;
    --wash: rgba(224, 87, 77, 0.1); --here: rgba(230, 227, 220, 0.07);
    --tile: #1b1a19; --tile-alt: #201f1d; --glow: #ff6a4d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e0e0e; --ink: #e6e3dc; --quiet: #75726c; --rule: #222120; --rubric: #e0574d;
  --wash: rgba(224, 87, 77, 0.1); --here: rgba(230, 227, 220, 0.07);
  --tile: #1b1a19; --tile-alt: #201f1d; --glow: #ff6a4d;
  color-scheme: dark;
}
:root[data-size="s"] { --fs: 17px; }
:root[data-size="l"] { --fs: 23px; }
:root[data-size="xl"] { --fs: 27px; }
:root[data-spacing="relaxed"] { --lh: 1.8; }
:root[data-spacing="loose"] { --lh: 2.1; }
:root[data-font="hyper"] { --read: "Atkinson Hyperlegible", var(--sans); }
:root[data-font="sans"] { --read: var(--sans); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.5 var(--read);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
::selection { background: var(--wash); }

/* Small caps carry every label: references, controls, counts. */
.ref, .act, header nav button, #status, .map-tools button, dialog h2, legend, #lex .code {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}

bible-search {
  display: grid;
  grid-template-rows: auto auto 1fr;
  height: var(--app-height, 100dvh);
}
#title { margin: 0; padding: 14px 32px 0; font: 400 15px var(--garamond); font-variant-caps: all-small-caps; letter-spacing: 0.14em; }
#title a { color: var(--quiet); text-decoration: none; }
#title a:hover { color: var(--ink); }

/* ---------- header ---------- */

bible-search > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 4px 28px;
  padding: 4px 32px 14px;
}
#search-form { position: relative; }
#q {
  width: 100%;
  padding: 4px 34px 8px 0;
  font: 400 30px/1.2 var(--read);
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
#q:focus { border-bottom-color: var(--ink); }
#q::placeholder { color: var(--quiet); font-style: italic; }
#q::-webkit-search-cancel-button { display: none; }
#clear {
  display: none; position: absolute; right: 0; bottom: 6px; border: 0; background: none;
  padding: 4px 6px; font-size: 26px; line-height: 1; color: var(--quiet); cursor: pointer;
}
#clear:hover { color: var(--ink); }
bible-search[data-has-query] #clear { display: block; }
#loading { position: absolute; right: 34px; bottom: 12px; color: var(--quiet); font-size: 15px; font-style: italic; pointer-events: none; }
#loading:empty { display: none; }

/* The nav carries the popover attribute for its phone form; here it's an ordinary row. */
header nav {
  display: flex; gap: 2px 16px; flex-wrap: wrap;
  position: static; inset: auto; margin: 0; border: 0; padding: 0 0 10px;
  width: auto; height: auto; overflow: visible; color: inherit; background: none;
}
header nav .word, #menu-btn { display: none; }
header nav button, .map-tools button, .try button, #status button, dialog form > button, #lex .actions button, .context nav button, .act {
  border: 0;
  background: none;
  padding: 2px 0;
  cursor: pointer;
  color: var(--quiet);
  font-size: 17px;
}
header nav button:hover, header nav button:focus-visible, .map-tools button:hover { color: var(--ink); }
#map-btn[aria-pressed="false"] { text-decoration: line-through; text-decoration-thickness: 1px; }
#read-btn[aria-pressed="true"], #listen-btn[aria-pressed="true"] { color: var(--ink); }
header nav button:disabled { opacity: 0.35; cursor: default; color: var(--quiet); }
/* One line. Anything that doesn't fit scrolls sideways, and the right edge fades to say so. */
#status {
  grid-column: 1 / -1; min-height: 1.5em; color: var(--quiet); font-size: 15px;
  display: flex; gap: 18px; white-space: nowrap; overflow-x: auto; scrollbar-width: none;
  padding-right: 28px; mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
#status::-webkit-scrollbar { display: none; }
#status[hidden] { display: none; }
#status > * { flex: none; }
#status .note { color: var(--rubric); }
#status button { color: var(--rubric); font-size: 15px; }
:focus-visible { outline: 1px solid var(--rubric); outline-offset: 3px; }

/* ---------- main ---------- */

main {
  display: grid;
  grid-template-columns: minmax(340px, 40rem) 1fr;
  min-height: 0;
}
#results { overflow-y: auto; padding: 18px 32px 45vh; overscroll-behavior: contain; scrollbar-width: thin; }
#map-panel { position: relative; min-height: 0; margin: 0 20px 20px 0; }

/* The chapters of the book being read. Only shown where there's room beside the text. */
#rail { display: none; }
#rail a {
  color: var(--quiet); text-decoration: none; text-align: right; padding: 1px 6px;
  font-size: 16px; font-variant-numeric: oldstyle-nums;
}
#rail a:hover { color: var(--ink); }
#rail a[aria-current] { color: var(--rubric); }
#map { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; outline: none; }
#map:active { cursor: grabbing; }
#tip {
  position: absolute; pointer-events: none; background: var(--paper); color: var(--ink);
  font: 15px var(--read); padding: 1px 6px; white-space: nowrap; transform: translate(14px, 10px);
  box-shadow: 0 0 0 1px var(--rule);
}
.map-tools { position: absolute; right: 10px; bottom: 6px; display: flex; gap: 14px; }
.map-tools button { font-size: 17px; padding: 4px 2px; }

/* ---------- intro ---------- */

#intro { max-width: 34rem; padding-top: 4px; }
#intro p { margin: 0 0 14px; }
.try button { color: var(--rubric); font-style: italic; padding: 0; font-variant-caps: normal; letter-spacing: 0; }
.try button:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.credits { color: var(--quiet); }
#intro .credits { font-size: 14px; margin-top: 40px; }
code, kbd { font: 0.82em ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink); }
bible-search[data-has-query] #intro { display: none; }

/* ---------- results ---------- */

#list { list-style: none; margin: 0; padding: 0; }
.hit { position: relative; padding: 14px 0 18px; }
.hit + .hit { border-top: 1px solid var(--rule); }
.hit.selected { background: var(--here); box-shadow: 0 0 0 14px var(--here); border-top-color: transparent; }
.hit.selected + .hit { border-top-color: transparent; }
.hit.selected .ref::before { content: "¶ "; }
:root[data-ruler="on"] .hit:not(.selected) { opacity: 0.28; }
.hit-head { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: baseline; margin-bottom: 2px; }
.act { font-size: 16px; }
.act:hover, .act[aria-expanded="true"] { color: var(--ink); }
.ref { border: 0; background: none; padding: 0; cursor: pointer; color: var(--rubric); font-size: 18px; font-family: var(--garamond); }
.partial .ref::after { content: " · some words"; color: var(--quiet); }
.notes { margin: 4px 0 0; }
.why { font-size: 15px; font-style: italic; color: var(--quiet); }
.why + .why::before { content: "·"; margin: 0 0.45em; font-style: normal; }
button.why { border: 0; background: none; padding: 0; cursor: pointer; }
button.why:hover { color: var(--ink); }
.text, .context p { font: var(--fs)/var(--lh) var(--read); margin: 0; hanging-punctuation: first; }
.w[data-s] { cursor: pointer; }
/* One quiet mark for every kind of match; the notes under the verse say which kind. */
.m { text-decoration: underline 1px var(--quiet); text-underline-offset: 0.2em; }
.m-stop { text-decoration: none; }
@media (hover: hover) {
  .w[data-s]:hover { text-decoration: underline 1px var(--ink); text-underline-offset: 0.2em; }
}
:root[data-italics="on"] .it { font-style: italic; }
:root[data-red="on"] .wj { color: var(--rubric); }

/* Context: a few verses above and below the hit's own text, which gets a verse number while they show. */
.context p, .open .text { padding: 1px 0; }
.open p.here { background: var(--here); box-shadow: -10px 0 0 var(--here), 10px 0 0 var(--here); }
.hit sup { font: 13px var(--garamond); color: var(--rubric); margin-right: 3px; vertical-align: 0.35em; }
.hit:not(.open) .text sup { display: none; }
.context nav { margin-top: 6px; }
.context nav button { font-style: italic; font-size: 16px; }
#more { height: 1px; }
.pilcrow { color: var(--rubric); }

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

#reader { display: none; max-width: 36rem; }
bible-search[data-mode="read"] #reader { display: block; }
bible-search[data-mode="read"] #intro,
bible-search[data-mode="read"] #list,
bible-search[data-mode="read"] #more { display: none; }
.reader-nav { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.reader-nav button, .reader-nav a {
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--quiet); font-size: 17px;
  font-variant-caps: all-small-caps; letter-spacing: 0.06em;
}
.reader-nav a { text-decoration: none; }
.reader-nav button:hover, .reader-nav a:hover { color: var(--ink); }

/* The ESV, alone or beside the King James. Its line breaks are the translation's own. */
.esv { white-space: pre-line; }
#reader .chapter[data-version="both"] .vl { display: block; padding: 0 0 0 2.1em; margin: 0 0 0.6em; }
#reader .chapter[data-version="both"] .vl sup { position: absolute; width: 1.6em; margin: 0; vertical-align: baseline; }
#reader .chapter[data-version="both"] .esv { display: block; margin-top: 0.2em; padding-left: 0.8em; border-left: 1px solid var(--rule); }
.versions { display: none; }
.esv-note { color: var(--quiet); font-size: 15px; font-variant-caps: all-small-caps; letter-spacing: 0.06em; text-align: center; }
fieldset.key label { flex-wrap: wrap; }
fieldset.key input { flex: 1 1 14rem; border: 0; border-bottom: 1px solid var(--rule); background: none; padding: 2px 0; outline: none; }
fieldset.key input:focus { border-bottom-color: var(--ink); }
fieldset.key p { margin: 0; color: var(--quiet); font-size: 15px; }
.chapter { margin: 0 0 64px; }
.chapter > header { display: flex; flex-direction: column; align-items: center; margin: 28px 0 22px; }
.chapter > header .book { font-variant-caps: all-small-caps; letter-spacing: 0.14em; color: var(--quiet); font-size: 18px; }
.chapter > header .num { font-size: 68px; line-height: 1; color: var(--rubric); font-variant-numeric: oldstyle-nums; }
.chapter .title { font-style: italic; color: var(--quiet); text-align: center; margin: -8px 0 18px; }
.vl { position: relative; margin: 0 0 0.4em; padding: 0 0 0 2.1em; font: var(--fs)/var(--lh) var(--read); border-radius: 2px; cursor: text; }
.vl sup {
  position: absolute; left: 0; width: 1.6em; text-align: right; top: 0.15em;
  font-size: 0.62em; line-height: inherit; color: var(--rubric); font-variant-numeric: oldstyle-nums;
}
.vl.here { background: var(--here); box-shadow: 0 0 0 6px var(--here); }
:root[data-paragraphs="on"] .verses { font: var(--fs)/var(--lh) var(--read); }
:root[data-paragraphs="on"] .vl { display: inline; padding: 0; margin: 0; }
:root[data-paragraphs="on"] .vl sup { position: static; width: auto; margin: 0 0.15em 0 0.25em; vertical-align: 0.4em; }
:root[data-paragraphs="on"] .vl.para::before { content: ""; display: block; height: 0.9em; }
.reader-end { height: 1px; }
.contents h2 { font-weight: 400; font-variant-caps: all-small-caps; letter-spacing: 0.12em; color: var(--rubric); font-size: 20px; margin: 18px 0 8px; }
.contents .books { list-style: none; padding: 0; margin: 0 0 24px; columns: 2; column-gap: 28px; }
.contents .books li { break-inside: avoid; padding: 1px 0; }
.contents .books a { display: block; color: var(--ink); font-size: 19px; text-decoration: none; }

/* ---------- word study ---------- */

#lex {
  position: fixed; right: 20px; top: 130px; bottom: 20px; width: min(380px, calc(100vw - 40px));
  overflow-y: auto; background: var(--paper); padding: 20px 24px; z-index: 5;
  box-shadow: 0 0 0 1px var(--rule), 0 20px 50px rgba(0, 0, 0, 0.12);
}
#lex .close { position: absolute; right: 12px; top: 8px; border: 0; background: none; font-size: 26px; cursor: pointer; color: var(--quiet); }
#lex .code { color: var(--rubric); font-size: 16px; }
#lex .lemma { font-size: 44px; margin: 0; line-height: 1.15; font-weight: 400; }
#lex .translit { font-style: italic; font-size: 20px; }
#lex .pron { color: var(--quiet); }
#lex .def { font-size: 19px; line-height: 1.45; }
#lex h4 { font-weight: 400; color: var(--quiet); font-variant-caps: all-small-caps; letter-spacing: 0.06em; margin: 18px 0 6px; font-size: 16px; }
#lex .deriv, #lex .usage { color: var(--quiet); font-size: 15px; }
#lex .renderings { padding: 0; margin: 0; list-style: none; columns: 2; column-gap: 20px; }
#lex .renderings li { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--rule); }
#lex .renderings b { font-weight: 400; color: var(--quiet); font-variant-numeric: oldstyle-nums; }
#lex .actions button { color: var(--rubric); font-style: italic; font-size: 17px; }
#lex a.code-link { color: var(--rubric); text-decoration: none; }

/* ---------- dialogs ---------- */

dialog {
  border: 0; background: var(--paper); color: var(--ink); padding: 28px 32px;
  max-width: min(580px, calc(100vw - 32px)); box-shadow: 0 0 0 1px var(--rule), 0 24px 70px rgba(0, 0, 0, 0.2);
}
dialog::backdrop { background: color-mix(in srgb, var(--paper) 70%, transparent); backdrop-filter: blur(2px); }
dialog h2 { margin: 0 0 12px; font-size: 20px; font-weight: 400; color: var(--rubric); }
dialog dl + h2 { margin-top: 22px; }
dialog form > button { color: var(--rubric); font-style: italic; margin-top: 8px; }
fieldset { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
legend { color: var(--quiet); margin-bottom: 4px; padding: 0; }
fieldset label { display: flex; gap: 6px; align-items: baseline; cursor: pointer; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--rubric); }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; }
.keys dd { margin: 0; color: var(--quiet); }

#qr-dialog { text-align: center; }
#qr-code svg { width: min(68vmin, 400px); height: auto; display: block; margin: 0 auto; }
#qr-label { font-size: 26px; margin: 16px 0 2px; }
#qr-url { font-size: 13px; color: var(--quiet); word-break: break-all; max-width: 400px; margin: 0 auto 6px; font-family: ui-monospace, Menlo, monospace; }

#present-dialog {
  max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; padding: 6vh 8vw 3vh;
  box-shadow: none; display: none;
}
#present-dialog[open] { display: grid; grid-template-rows: 1fr auto; }
#present-dialog::backdrop { background: var(--paper); }
#present-dialog figure { margin: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
#present-text { margin: 0; font-family: var(--read); line-height: 1.3; }
#present-ref { margin-top: 0.7em; color: var(--rubric); font: clamp(22px, 3.6vh, 44px) var(--garamond); font-variant-caps: all-small-caps; letter-spacing: 0.08em; }
#present-dialog .hint { color: var(--quiet); font-size: 14px; font-style: italic; margin: 0; text-align: center; }

/* ---------- small screens ---------- */

@media (max-width: 860px) {
  #title { padding: calc(10px + env(safe-area-inset-top)) 18px 0; }

  header nav { padding-bottom: 0; gap: 2px 14px; }

  /* The tools fold into a menu behind three dots, so nothing but the search box sits above the page. */
  @supports selector(:popover-open) {
    #menu-btn {
      display: block; position: fixed; top: env(safe-area-inset-top); right: 4px; z-index: 2;
      border: 0; background: none; padding: 2px 14px 8px; font-size: 24px; letter-spacing: 2px;
      color: var(--quiet); cursor: pointer;
    }
    header nav {
      position: fixed; inset: calc(38px + env(safe-area-inset-top)) 10px auto auto;
      flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 4px;
      padding: 10px 22px 12px 18px; background: var(--paper);
      box-shadow: 0 0 0 1px var(--rule), 0 20px 50px rgba(0, 0, 0, 0.12);
    }
    header nav:not(:popover-open) { display: none; }
    header nav button { font-size: 19px; padding: 5px 0; }
    header nav .word { display: inline; }
  }
  bible-search > header { grid-template-columns: 1fr; padding: 2px 18px 8px; gap: 6px; }
  #q { font-size: 24px; }
  main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  #map-panel { order: -1; width: 100%; aspect-ratio: 2 / 1; max-height: 40dvh; margin: 0 0 4px; }
  bible-search[data-map="hidden"] #map-panel { display: none; }
  #results { padding: 6px 18px 45vh; }
  .contents .books { columns: 1; }
  #lex { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 64dvh; }

  /* Search box by the thumb: the header moves under the results, with the box itself lowest. */
  :root[data-bottom="on"] bible-search { grid-template-rows: auto 1fr auto; }
  :root[data-bottom="on"] #title { padding-bottom: 6px; }
  :root[data-bottom="on"] bible-search > header {
    order: 1; padding: 6px 18px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule);
  }
  :root[data-bottom="on"] #status { order: -1; }
  :root[data-bottom="on"] #search-form { order: 1; }
  :root[data-bottom="on"] #q { border-bottom: 0; padding-bottom: 2px; }
  :root[data-bottom="on"] bible-search[data-keyboard] #map-panel { display: none; }
}
@media (min-width: 861px) {
  main { grid-template-columns: minmax(340px, 40rem) auto 1fr; }
  #results { grid-column: 1; }
  #rail { grid-column: 2; }
  #map-panel { grid-column: 3; }
  #rail:not([hidden]) {
    display: flex; flex-direction: column; min-height: 0; overflow-y: auto; scrollbar-width: none;
    padding: 20px 14px 45vh 0;
  }
  bible-search[data-map="hidden"] main { grid-template-columns: minmax(340px, 42rem) auto; justify-content: center; }
  bible-search[data-map="hidden"] #map-panel { display: none; }

  /* Two translations side by side, verse against verse, in the room the map leaves. */
  bible-search[data-mode="read"][data-version="both"][data-map="hidden"] main { grid-template-columns: minmax(340px, 76rem) auto; }
  bible-search[data-version="both"][data-map="hidden"] #reader { max-width: none; }
  bible-search[data-map="hidden"] #reader .chapter[data-version="both"] .vl,
  bible-search[data-map="hidden"] #reader .chapter[data-version="both"] .versions {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px;
  }
  bible-search[data-map="hidden"] #reader .chapter[data-version="both"] .esv { margin: 0; padding: 0; border: 0; }
  bible-search[data-map="hidden"] .versions {
    padding-left: 2.1em; margin: 0 0 10px; color: var(--quiet); font-size: 15px;
    font-variant-caps: all-small-caps; letter-spacing: 0.08em;
  }
}