/* ── Fonts ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Schwabacher";
  src: url("Schwabacher.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Fraktur";
  src: url("Fraktur.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Antiqua";
  src: url("Antiqua.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* ── Base ────────────────────────────────────────────────────────────── */

:root {
  --fg:          #1a1a1a;
  --fg-soft:     #555;
  --fg-hebrew:   #754;
  --fg-muted:    #888;
  --fg-red:      #a00404;
  --fg-cinnabar: #c0382c;
  --bg:          #fbfaf6;     /* warm off-white */
  --bg-panel:    #ffffff;
  --border:      #d8d3c4;
  --accent:      #6b3e1d;     /* dark ochre */
  --accent-soft: #f0e8b0;
  --secondary-version: #f7f1e6; /*slightly darker than --bg */
  --link:        #1f4080;
  --link-hover:  #ffffa6;	/* yellow to emphasize external links */
  --navarrow:          #ff8374;
  --navarrow-hover:    #83ff74;
  --navarrow-inactive: #d8d3c4;
  --navarrow-bg:       #dbfad6;
  --column-width: 60em;
  --text-panel-width: 42em;	/* overwritten by javascript */
  --schwabacher-scale: 1;	/* overwritten by javascript */
  --initial-letter-size: 4.9;  /* 98% of 5 — prevents overflow at mid-scale sizes */
}



* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: "FreeSerif", "Free Serif", "SBL BibLit", "Gentium Plus", "Gentium", "Cardo", "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.55;
}


/* ── Layout ──────────────────────────────────────────────────────────── */

#layout {
  display: grid;
  grid-template-columns: 400px var(--text-panel-width) minmax(300px, 1fr);
  gap: 0;
  height: calc(100vh);
  position: relative;  /* containing block for .marginalia-note */
}

#nav-panel, #verse-panel {
  background: var(--bg-panel);
  overflow-y: auto;
  padding: 1em;
}

#verse-panel {
  overflow-y: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}

#nav-panel {
  overflow-y: hidden;       /* panel itself never scrolls — children do */
  padding: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}
#verse-panel { border-left: 1px solid var(--border); }

#text-panel {
  overflow-y: auto;
  padding: 1.5em 2em;
  position: relative;
}

/* ── left column (navigation/toc panel) ─────────────────────────────────────────────── */

#nav-browse {
  flex-shrink: 0;           /* stays full height, doesn't yield space to toc */
  padding: 1em;
  border-bottom: 1px solid var(--border);
}

#nav-toc {
  flex: 1;
  min-height: 0;            /* required: lets flex child shrink and scroll */
  overflow-y: auto;
  padding: 1em;
}

#verse-display {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1em;
}

#verse-nav {
  flex-shrink: 0;
  padding: 0.3em;
  border-top: 1px solid var(--border);
}

#nav-panel section {
  margin-bottom: 0.1em;
  padding-bottom: 0.1em;
  border-bottom: 1px solid var(--border);
}
#nav-panel section:last-child { border-bottom: none; }

/* #nav-browse is a flex child with its own border; undo the section spacing */
#nav-panel > #nav-browse {
  margin-bottom: 0;
  padding-bottom: 1em;
}

#nav-panel label {
  display: block;
  margin-bottom: 0.4em;
  font-size: 0.85em;
  color: var(--fg-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#nav-browse label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15em;
}
#chapter-list, #chapter-list .verse-list {
  display: contents;
}

#nav-panel select,
#nav-panel input[type="text"],
#verse-panel input[type="text"] {
  width: 100%;
  padding: 0.3em 0.5em;
  font-family: inherit;
  font-size: 1em;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--fg);
}

#nav-panel input[type="range"],
#verse-panel input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}

#scale-display {
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
}

#nav-panel select:focus,
#nav-panel input:focus {
  outline: none;
  border-color: var(--accent);
}

#status {
  font-size: 0.85em;
  color: var(--fg-muted);
  font-style: italic;
}

#references {
  font-size: 0.80em;
  color: var(--fg-muted);
}
#references a {
  color: var(--link);
  text-decoration: none;
}
#references a:hover {
  color: var(--link);
  background: var(--link-hover);
  border-bottom-style: solid;
}

/* ── Navigation arrows ──────────────────────────────────────────────── */

.nav-arrows {
  display: inline;
  margin-left: 0.3em;
  white-space: nowrap;
}

.nav-arrow {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1.3em;
  color: var(--navarrow);
  cursor: pointer;
  text-decoration: none;
  padding: 0 0.1em;
  vertical-align: baseline;
}
.nav-arrow:hover {
  color: var(--navarrow-hover);
  background: var(--navarrow-bg);
  border-radius: 2px;
}
.nav-arrow.disabled {
  color: var(--border);
  cursor: default;
}
.nav-arrow.disabled:hover {
  background: none;
  color: var(--navarrow-inactive);
}

.verse-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em;
  margin-top: 0.4em;
  font-size: 0.85em;
}
.verse-list-item {
  display: inline-block;
  padding: 0.1em 0.35em;
  color: var(--link);
  text-decoration: none;
  border-radius: 2px;
}
.verse-list-item:hover {
  background: var(--accent-soft);
}
.verse-list-item.current {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

#nav-verselist label {
  margin-top: 0.2em;
}

/* ── central column (text panel) ───────────────────────────────────────────────── */

#text-header {
  font-size: 1.6em;
  color: var(--fg);
  margin-bottom: 0.8em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--border);
}

#text-body {
  max-width: var(--column-width);
  font-size: 1.12em;
  line-height: 1.7;
}

.schwabacher-text {
  font-family: "Schwabacher";
  font-size: calc(38px * var(--schwabacher-scale));
  line-height: 0.9;
  max-width: var(--column-width);
}
.schwabacher-center {
  font-family: "Schwabacher";
  font-size: calc(38px * var(--schwabacher-scale));
  line-height: 0.9;
  max-width: var(--column-width);
  text-align: center;
}
.schwabacher-title1 {
  font-family: "Fraktur";
  font-size: calc(66px * var(--schwabacher-scale));
  line-height: 1.0;
  max-width: var(--column-width);
  text-align: center;
}
.schwabacher-title2 {
  font-family: "Fraktur";
  font-size: calc(52px * var(--schwabacher-scale));
  line-height: 0.8;
  max-width: var(--column-width);
  text-align: center;
}
.schwabacher-small {
  font-family: "Schwabacher";
  font-size: calc(27px * var(--schwabacher-scale));
  line-height: 0.9;
  max-width: var(--column-width);
}
.schwabacher-small-center {
  font-family: "Schwabacher";
  font-size: calc(27px * var(--schwabacher-scale));
  line-height: 0.9;
  max-width: var(--column-width);
  text-align: center;
}
.fraktur-toc {
  font-family: "Fraktur";
  font-size: calc(30px * var(--schwabacher-scale));
  line-height: 0.9;
  max-width: var(--column-width);
  text-align: center;
}
.para-spacer {
  height: 0.8em;
}
.hebrew-letter {
  font-family: "Schwabacher";
  font-size: calc(28px * var(--schwabacher-scale));
  line-height: 0.9;
  max-width: var(--column-width);
  text-align: center;
}
.schwabacher-toc {
  font-family: "Schwabacher";
  font-size: calc(28px);
  line-height: 0.9;
  max-width: var(--column-width);
}
.schwabacher-toc p {
  margin: 0;
  text-indent: 0.5em;
}
.schwabacher-toc p a {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 0.1em 0.4em;
  border-radius: 2px;
}
.schwabacher-toc p a:hover {
  background: var(--accent-soft);
}
.schwabacher-toc p a.toc-current {
  color: var(--fg-red);
  background: var(--bg);
}


/* Drop cap initial letter ------------------------------------------------ */
/* Float is the reliable baseline: works in every browser.                   */
/* line-height < 1 pulls the cap's top up toward the first text line; tune   */
/* margin-top if the alignment needs a nudge for a given font.               */
.schwabacher-initial {
  font-family: "Schwabacher";
  float: left;
  font-size: 4.41em;  /* 98% of 4.5em — matches --initial-letter-size scale-down */
  line-height: 0.8;
  margin: 0.05em 0.08em 0 0;
}

/* Progressive enhancement: initial-letter via ::first-letter.               */
/* The spec allows initial-letter on inline first-children too, but browser  */
/* implementations only reliably honour it on ::first-letter. The @supports  */
/* check passes for the property; the ::first-letter route is what actually  */
/* renders correctly.                                                         */
/* :has() selects the div that opens with the initial span, then             */
/* ::first-letter targets its first character (𝔄, through the span).        */
@supports (initial-letter: 1) {
  .schwabacher-initial {
    float: none;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
  }
  :has(> .schwabacher-initial)::first-letter {
    font-family: "Schwabacher";
    initial-letter: var(--initial-letter-size);
    margin-right: 0.08em;
  }
}

/* Firefox does not pass @supports (initial-letter: 1) and uses the float
   fallback above.  Scale font-size by 4/3 to match Chrome's visual glyph size,
   and compensate line-height so the float's layout height stays identical
   (5.88 × 0.6 = 4.41 × 0.8 = 3.528 em) → same 5 lines cleared as Chrome. */
@supports (-moz-appearance: none) and (not (initial-letter: 1)) {
  .schwabacher-initial {
    font-size: 5.88em;
    line-height: 0.6;
  }
}

/* Image drop-cap: always float, never touched by the @supports block above. */
img.book-initial {
  float: left;
  margin: 0.05em 0.08em 0 0;
}

.verse {
  margin-bottom: 0.3em;
}

/* Verse hover highlighting — one rule covers every verse number */
[data-verse] {
  cursor: pointer;
  border-radius: 2px;
}

.verse-hover {
  color: var(--fg-cinnabar);
/* background: var(--accent-soft); */
}

.verse-current {
  color: var(--fg-red);
}

/* Floating verse-reference tooltip */
#verse-tooltip {
  position: fixed;
  display: none;
  padding: 0.2em 0.5em;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 0.8em;
  color: var(--fg-soft);
  pointer-events: none;
  z-index: 100;
  white-space: nowrap;
}

.verse-ref {
  color: var(--fg-muted);
  font-size: 0.78em;
  vertical-align: super;
  margin-right: 0.3em;
  user-select: none;
  text-decoration: none;
  cursor: pointer;
}
.verse-ref:hover {
  color: var(--accent);
  text-decoration: underline;
}

.token {
  cursor: pointer;
}

.token:hover {
  background: var(--accent-soft);
}

/* ── right column (verse panel) ────────────────────────────────────── */


.manicule {
  font-style: normal;
  color: var(--fg);
  font-size: 1.4em;
}

#verse-header {
  font-size: 1.0em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg);
  padding-top: 0.4em;
  margin-top: 0.8em;
  margin-bottom: 0.8em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--border);
}

#verse-body {
  font-style: italic;
  color: var(--fg);
  font-size: 1.0em;
}

#verse-body .de {
  font-style: italic;
  color: var(--fg);
  font-size: 1.2em;
}

#verse-body .la {
  font-style: italic;
  color: var(--fg);
  font-size: 1.2em;
}

#verse-body .gk {
  font-family: "SBL Greek", serif;
  font-style: normal;
  color: var(--fg);
  font-size: 1.2em;
}

#verse-body .he {
  font-style: normal;
  font-weight: bold;
  font-size: 1.6em;
  direction: rtl;
  unicode-bidi: bidi-override;
  display: block;
  font-family: "DejaVu Serif", "Free Serif", "FreeSerif", "SBL Hebrew", "SBL BibLit", "Ezra SIL", serif;
  line-height: 1.0;
}

#verse-body .hint {
  font-style: italic;
  color: var(--fg-muted);
  font-size: 0.9em;
}

#verse-panel label {
  display: block;
  margin-bottom: 0.2vem;
  font-size: 0.85em;
  color: var(--fg-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

a.external-link {
  font-size: 1.0em;
  font-family: inherit;
  color: var(--link);
  border-bottom: none;
  text-decoration: none;
  margin: 0 0.05em;
  vertical-align: baseline;
  font-weight: normal;
}
a.external-link:hover {
  text-decoration: none;
  background: var(--link-hover);
}

/* Selected token in the text panel */
.token.selected {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 2px;
}

/* Briefly highlight a verse when arrived-at via anchor link */
.verse-highlight {
  background: var(--accent-soft);
  transition: background 1s ease-out;
  border-radius: 3px;
  margin-left: -0.4em;
  padding-left: 0.4em;
}

/* ── Search results (in text panel) ─────────────────────────────────── */

.search-summary {
  font-size: 0.85em;
  color: var(--fg-muted);
  font-style: italic;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--border);
}

.search-results {
  max-width: 44em;
  font-size: 1.05em;
  line-height: 1.7;
}

.search-result {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  margin-bottom: 0.35em;
}

.search-ref {
  flex-shrink: 0;
  width: 6em;
  color: var(--link);
  text-decoration: none;
  font-size: 0.85em;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.search-ref:hover {
  text-decoration: underline;
}

.search-text {
  flex: 1;
}

.search-text .hit {
  background: var(--accent-soft);
  padding: 0 0.1em;
  border-radius: 2px;
  font-weight: 600;
}

/* ── Verse view ─────────────────────────────────────────────────────── */

.verse-solo {
  font-size: 1.2em;
  line-height: 1.5;
  margin-bottom: 1.0em;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--border);
}

.verse-secondary {
  background: var(--secondary-version);
}

.verse-gloss {
  min-height: 0.5em;
  font-family: "FreeSerif", "Free Serif", "Gentium", "Cardo", serif;
  color: var(--fg-soft);
  margin-bottom: 1.0em;
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
}

.verse-gloss-chapter {
  font-family: "FreeSerif", "Free Serif", "Gentium", "Cardo", serif;
  color: var(--fg-soft);
  font-size: 0.85em;
  line-height: 1.4;
  margin-bottom: 0.6em;
}

.variants {
  font-size: 0.8em;
  color: var(--fg);
  margin-bottom: 1.0em;
  line-height: 1.6;
  border-bottom: 1px solid var(--border);
}

.variant {
  display: block;
}

.witnesses {
  color: var(--fg-soft);
  font-style: normal;
}

.witnesses abbr {
  text-decoration: underline dotted;
  cursor: help;
}

.variant-diff {
  font-style: regular;
}

.hebrew-translit {
  font-size: 0.95em;
  color: var(--fg-hebrew);
  margin-bottom: 0.4em;
  line-height: 1.5;
  font-family: "FreeSerif", "Free Serif", "Gentium Plus", "Gentium", "Cardo", serif;
  border-bottom: 1px solid var(--border);
}

.verse-external {
  font-size: 1.0em;
  color: var(--fg);
}
.verse-external a {
  color: var(--link);
  text-decoration: none;
}
.verse-external a:hover {
  text-decoration: underline;
  background: var(--link-hover);
}

.nt-refs {
  font-size: 0.88em;
  color: var(--fg-soft);
  margin-bottom: 1em;
  line-height: 1.6;
}
.nt-refs .nt-label {
  font-variant: small-caps;
  color: var(--fg-muted);
}
.nt-refs a {
  color: var(--link);
  text-decoration: none;
}
.nt-refs a:hover {
  text-decoration: underline;
  background: var(--link-hover);
}


/* ── switch to stacked columns ──────────────────────────────── */

@media (max-width: 500px) {
  #layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    height: auto;
  }
  #nav-panel, #verse-panel { border: none; border-top: 1px solid var(--border); }
  #text-panel { padding: 1em; }
}

/* ── Marginalia ─────────────────────────────────────────────────────────── */

.marginal-mark {
  display: inline;   /* zero-width anchor; gives us the y coordinate */
}

.marginalia-note {
  position: absolute; /* within #layout, so it scrolls with page on horizontal overflow */
  width: 3.2em;
  font-family: "Schwabacher", serif;
  font-size: calc(24px * var(--schwabacher-scale));
  line-height: 0.85;
  color: var(--fg);
  opacity: 0.75;
  pointer-events: none;  /* don't block text interaction */
}

.antiqua {
  font-size: calc(20px * var(--schwabacher-scale));
  font-family: "Antiqua", Hultog, "SBL Greek", serif;
  font-style: italic;
}

/* ── Loader overlay ─────────────────────────────────────────────────── */

#loader-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 250, 246, 0.88);
  backdrop-filter: blur(2px);
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease;
}

#loader-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

#loader-box {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.8em 2.8em;
  text-align: center;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.09);
  min-width: 16em;
}

#loader-title {
  font-family: "Fraktur";
  font-size: 1.5em;
  color: var(--accent);
  margin-bottom: 0.25em;
}

#loader-subtext {
  font-size: 0.9em;
  color: var(--fg-soft);
  font-style: italic;
  margin-bottom: 1em;
}

#loader-dots {
  display: flex;
  justify-content: center;
  gap: 0.4em;
  color: var(--accent);
  font-size: 1.6em;
  line-height: 1;
}

#loader-dots span {
  display: inline-block;
  animation: loader-wave 1.5s ease-in-out infinite;
  opacity: 0.2;
}

#loader-dots span:nth-child(1) { animation-delay: 0s; }
#loader-dots span:nth-child(2) { animation-delay: 0.25s; }
#loader-dots span:nth-child(3) { animation-delay: 0.5s; }
#loader-dots span:nth-child(4) { animation-delay: 0.75s; }
#loader-dots span:nth-child(5) { animation-delay: 1.0s; }

@keyframes loader-wave {
  0%, 100% { opacity: 0.15; transform: translateY(0); }
  40%       { opacity: 1;    transform: translateY(-0.28em); }
}

.verse-loading {
  font-size: 0.85em;
  font-style: italic;
  color: var(--fg-muted);
  margin-top: 0.5em;
}