:root {
  --page: #f3f5f8;
  --surface: #ffffff;
  --ink: #18223a;
  --muted: #566074;
  --line: #d8dde6;
  --lapis: #2747a3;
  --lapis-tint: #e3e9f8;
  --gold: #8a6514;
  --gold-tint: #f6edd6;
  --body: "Gentium Book Plus", "Noto Serif Hebrew", "Amiri Quran", Georgia, serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #10151f;
    --surface: #171e2b;
    --ink: #e3e7ee;
    --muted: #9aa3b5;
    --line: #2c3547;
    --lapis: #9db1f0;
    --lapis-tint: #26335a;
    --gold: #d9b25a;
    --gold-tint: #3a2f17;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font: 1.0625rem/1.6 var(--body); }
a { color: var(--lapis); }
:focus-visible { outline: 2px solid var(--lapis); outline-offset: 2px; }
button, select, input { font: inherit; color: inherit; }

/* Scripts. JS sets these classes from the Unicode script of each text. */
.sc-arab { font-family: "Amiri Quran", "Noto Naskh Arabic", serif; }
.sc-hebr { font-family: "Noto Serif Hebrew", "SBL Hebrew", serif; }
.sc-syrc { font-family: "Noto Sans Syriac", "Estrangelo Edessa", serif; }
.sc-sarb { font-family: "Noto Sans Old South Arabian", sans-serif; }

/* Top bar */
.bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
  padding: .6rem 1rem; background: var(--surface); border-bottom: 1px solid var(--line);
  font: .9375rem/1.3 var(--ui);
}
.brand { margin: 0; font: 700 1.2rem/1 var(--body); }
.brand span { font: 400 .875rem var(--ui); color: var(--muted); margin-left: .35rem; }
.nav { display: flex; align-items: center; gap: .4rem; }
.nav label { display: flex; align-items: center; gap: .3rem; color: var(--muted); }
.nav select { max-width: 11rem; padding: .3rem .25rem; border: 1px solid var(--line); border-radius: 6px; background: var(--page); }
.nav button {
  min-width: 2.5rem; height: 2.25rem; font-size: 1.4rem; line-height: 1;
  border: 1px solid var(--line); border-radius: 6px; background: var(--page); cursor: pointer;
}
.nav button:disabled { opacity: .35; cursor: default; }
.filter { display: flex; align-items: center; gap: .35rem; cursor: pointer; }
.progress { margin: 0 0 0 auto; display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .8125rem; }
.progress progress { width: 5rem; accent-color: var(--lapis); }

/* Verse page: one reading column. */
main { max-width: 46rem; margin: 0 auto; padding: 2rem 1rem 3rem; }
.empty { color: var(--muted); }
.verse h1 { margin: 0 0 1.25rem; text-align: center; font: 500 .9375rem/1.4 var(--ui); color: var(--muted); }
.verse h1 .sc-arab { font-size: 1.15em; }

/* The verse is the hero. Key words carry the gold mark; any word with evidence opens it. */
.ar { margin: 0; text-align: center; font-size: clamp(2rem, 6vw, 2.9rem); line-height: 2.1; }
.ar .w { display: inline-block; padding: 0 .14em; line-height: 1.6; border-radius: 6px; background: none; }
.ar button.w { border: 0; cursor: pointer; }
.ar .ref { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--lapis) 45%, transparent); }
.ar .key { background: var(--gold-tint); box-shadow: inset 0 -3px 0 var(--gold); }
.ar .on { background: var(--lapis-tint); color: var(--lapis); box-shadow: inset 0 -3px 0 var(--lapis); }
.ar .rd { border-bottom: 2px dotted var(--lapis); border-radius: 6px 6px 0 0; }
.ar .end { color: var(--gold); margin-right: .2em; }
.ar ruby { ruby-position: under; }
.ar rt { font: .8rem/1.3 var(--ui); color: var(--muted); padding-top: .2rem; }
.ar:not(.wbw) rt { display: none; }
.meanings { display: flex; justify-content: center; align-items: center; gap: .35rem; margin: .25rem 0 0; font: .875rem var(--ui); color: var(--muted); cursor: pointer; }

/* Glossary words: a quiet dotted underline; a tap opens the meaning in a small panel. */
.term { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: help; text-decoration: underline dotted var(--muted) 1.5px; text-underline-offset: .2em; }
/* Hidden until opened; a browser without popover support never shows the empty box. */
.pop { display: none; }
.pop:popover-open { display: block; }
.pop { max-width: min(26rem, calc(100vw - 2rem)); padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 8px 32px rgb(0 0 0 / .25); }
.pop::backdrop { background: rgb(0 0 0 / .2); }
.pop p { margin: 0 0 .6rem; }
.pop-links { display: flex; gap: 1rem; align-items: center; margin: 0 !important; font: .875rem var(--ui); }
.pop-links button { padding: .25rem .75rem; border: 1px solid var(--line); border-radius: 6px; background: var(--page); cursor: pointer; }
.glink { font-weight: 600; }

/* Other accepted readings */
.readings { margin-top: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.5rem; }
.readings h2 { margin: 0 0 .75rem; font: 600 .9375rem/1.3 var(--ui); color: var(--lapis); }
.reading + .reading { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.reading blockquote { margin: .15rem 0; font-size: 1.8rem; line-height: 1.6; }
.reading p { margin: .5rem 0 0; }

/* Classical commentary */
.tf { padding: .5rem 0; border-top: 1px solid var(--line); }
.tf p { margin: .25rem 0; }
.tf .quote .sc-arab { font-size: 1.2em; }
.tf .quote small, .tf .knew { font: .8125rem/1.5 var(--ui); color: var(--muted); }
.en { max-width: 36rem; margin: .75rem auto 2rem; text-align: center; font-size: 1.1875rem; line-height: 1.55; }

/* What is special here */
.special { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem 1.5rem 1rem; }
.special.none { color: var(--muted); }
.special h2 { margin: 0 0 .5rem; font: 600 .9375rem/1.3 var(--ui); color: var(--gold); }
.special .headline { margin: 0 0 .75rem; font-size: 1.5rem; line-height: 1.3; font-weight: 700; }
.special p { margin: 0 0 .8rem; font-size: 1.1875rem; line-height: 1.65; }
.special p b { font-weight: 700; }
.special .proposed { color: var(--muted); font-style: italic; }
.limits { margin: 0 0 1rem; color: var(--muted); }
.special .stamp { display: inline-block; margin: .4rem 0 0; padding: .1rem .55rem; border: 1.5px solid var(--gold); border-radius: 4px; color: var(--gold); font: 600 .8125rem/1.4 var(--ui); }
.legend { margin: 0 0 1rem; font: .8125rem/1.4 var(--ui); color: var(--muted); }

/* Folded sections: evidence, context, surah overview */
.fold { margin-top: 1rem; border-top: 1px solid var(--line); }
.fold > summary { padding: .9rem 0 .5rem; cursor: pointer; font: 600 1rem/1.4 var(--ui); color: var(--lapis); }
.fold[open] > summary { margin-bottom: .5rem; }
.record { margin: 2rem 0 0; text-align: center; font: .8125rem/1.5 var(--ui); color: var(--muted); }
.record a { color: inherit; }

/* Evidence cards. Solid border: a sourced observation. Dashed border: a hypothesis or proposed link. */
.ob { background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1rem; scroll-margin-top: 4.5rem; }
.ob.tentative { border-style: dashed; border-color: var(--gold); }
.ob.active { box-shadow: 0 0 0 3px var(--lapis-tint); }
.ob h3 { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.ob h3 .id { color: var(--muted); font-weight: 400; margin-right: .4rem; }
.tags { margin: .35rem 0 .5rem; display: flex; flex-wrap: wrap; gap: .35rem; font: .8125rem/1.4 var(--ui); }
.tags span { padding: .05rem .5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.tags .cls { color: var(--lapis); border-color: var(--lapis); }
.ob.tentative .tags .cls { color: var(--gold); border-color: var(--gold); }
.ob h4 { margin: 1rem 0 .35rem; font: 600 .875rem/1.3 var(--ui); color: var(--muted); }
.ob p { margin: .35rem 0; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .25rem 0 .5rem; padding: 0; list-style: none; }
.chips button {
  display: inline-flex; align-items: baseline; gap: .35rem; padding: .1rem .5rem;
  border: 1px solid var(--line); border-radius: 6px; background: var(--page); cursor: pointer;
}
.chips small { font: .75rem var(--ui); color: var(--muted); }
.chips .sc-arab { font-size: 1.25rem; line-height: 1.6; }

.forms { margin: 0; padding: 0; list-style: none; }
.forms li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0 .75rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.forms .lang { font: .8125rem/1.8 var(--ui); color: var(--muted); }
.forms .form { font-size: 1.5rem; line-height: 1.5; }
.forms .tr { font-style: italic; margin-left: .5rem; }
.forms .sense, .forms .src { grid-column: 2; }
.forms .src { font: .8125rem/1.4 var(--ui); color: var(--muted); }

.refs { display: grid; gap: .75rem; }
.ref-group { margin: 0; }
.ref-group figcaption { font: 600 .875rem var(--ui); margin-bottom: .25rem; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; }
.col { border-left: 3px solid var(--line); padding-left: .75rem; }
.col .lang { font: .75rem var(--ui); color: var(--muted); }
.col blockquote { margin: .15rem 0; font-size: 1.4rem; line-height: 1.7; }
.col .gloss { font-style: italic; color: var(--muted); }

/* Context checks */
/* Each check is a plain question (dt) with its answer (dd) below. */
.ctx dl { margin: 0; line-height: 1.5; }
.ctx dt { margin-top: .9rem; font: 600 .9375rem/1.4 var(--ui); }
.ctx dt:first-child { margin-top: 0; }
.ctx dd { margin: .2rem 0 0; }
.ctx .rw { display: block; margin: .2rem 0; }
.ctx .sc-arab { font-size: 1.25em; }
.ctx small { display: block; margin: .1rem 0 .2rem; font: .8125rem/1.45 var(--ui); color: var(--muted); }

/* Glossary page */
.glossary h1 { margin: 0 0 .5rem; font-size: 1.6rem; line-height: 1.25; }
.glossary h2 { margin: 2rem 0 .25rem; font: 600 1rem/1.3 var(--ui); color: var(--gold); }
.glossary dt { margin-top: .9rem; font-weight: 700; }
.glossary dd { margin: .15rem 0 0; }
.nr { color: var(--muted); font-style: italic; }

/* Surah overview */
.study h3 { margin: 1rem 0 .4rem; font: 600 .875rem/1.3 var(--ui); color: var(--muted); }
.study ul { list-style: none; margin: 0; padding: 0; }
.study li { margin: .3rem 0; padding: .35rem .6rem; border-left: 3px solid var(--line); }
.study li.here { border-left-color: var(--lapis); background: var(--lapis-tint); }
.study li.tentative { border-left-style: dashed; }
.study li.tentative .cls { color: var(--gold); border-color: var(--gold); }
.study .note { display: block; color: var(--muted); font-size: .9375rem; }
.study .ring-end { display: block; }
.study .ring-end small { display: inline-block; min-width: 3.5rem; font: .75rem var(--ui); color: var(--muted); }
.study .ring-end .sc-arab { font-size: 1.2em; margin-left: .35rem; }
.study .tags { margin: .25rem 0 0; }

.foot { max-width: 46rem; margin: 0 auto; padding: 1rem 1rem 2rem; border-top: 1px solid var(--line); font: .8125rem/1.5 var(--ui); color: var(--muted); }

@media (max-width: 40rem) {
  .bar { position: static; gap: .5rem .75rem; }
  .brand span { display: none; }
  .nav { width: 100%; }
  .nav label { flex: 1; min-width: 0; }
  .nav .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav select { max-width: none; width: 100%; }
  .progress { margin-left: 0; }
  main { padding-top: 1.25rem; }
  .special { padding: 1rem 1rem .75rem; }
  .special .headline { font-size: 1.3rem; }
  .special p { font-size: 1.0625rem; }
  .forms li { grid-template-columns: 1fr; }
  .forms .sense, .forms .src { grid-column: 1; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.reading .rnote { margin: .3rem 0; font-size: 1rem; }
.lexicon { margin-bottom: 1rem; }
.lexicon h3 { margin: 0 0 .25rem; font: 600 .9375rem/1.3 var(--ui); color: var(--muted); }
.reading .rare { display: table; margin-bottom: .25rem; padding: .05rem .5rem; border: 1px dashed var(--gold); border-radius: 999px; color: var(--gold); font: 600 .75rem/1.5 var(--ui); }