/* ==========================================================================
   QURAN DEBUG — styling

   Built to read like a reference work rather than an argument. That is a
   deliberate choice and it is doing real work: a page that shouts is a
   page a reader discounts before the evidence arrives. So — one column, a
   serif for the headings, generous measure, quiet colour, and the same
   card shape repeated so the reader always knows where to find the source
   and where to find the conclusion.

   The Arabic gets its own treatment: right-to-left, a larger size because
   the script carries more detail per line, extra leading for the
   diacritics, and its own font stack.
   ========================================================================== */

:root {
  color-scheme: light;

  --page:        #f7f7f5;
  --surface:     #ffffff;
  --surface-2:   #f0f0ed;
  --quote-bg:    #f4f6f8;
  --ink:         #14151a;
  --ink-2:       #45474f;
  --ink-3:       #7a7c85;
  --rule:        #e2e2df;
  --rule-2:      #c9c9c5;
  --accent:      #1f5673;   /* slate blue — the section marks */
  --accent-soft: #eaf1f5;
  --gold:        #8a6a13;

  /* verdict tags, muted on purpose */
  --v-known:       #3d5a80;
  --v-borrowed:    #8a5a12;
  --v-contradicted:#8c2f2f;
  --v-translation: #5a4a86;
  --v-disputed:    #5c5f66;
  --v-method:      #1f5f5b;

  --measure: 43rem;
  --radius:  12px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page:        #101114;
    --surface:     #17181c;
    --surface-2:   #202126;
    --quote-bg:    #1b1e23;
    --ink:         #f2f3f5;
    --ink-2:       #bec1c8;
    --ink-3:       #878a93;
    --rule:        #26282d;
    --rule-2:      #383b42;
    --accent:      #7fb2cd;
    --accent-soft: #17242c;
    --gold:        #e3b23c;

    --v-known:       #8fb0d6;
    --v-borrowed:    #d8a44e;
    --v-contradicted:#e07a7a;
    --v-translation: #a99ad8;
    --v-disputed:    #9ca0a8;
    --v-method:      #5fb8b2;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page:        #101114;
  --surface:     #17181c;
  --surface-2:   #202126;
  --quote-bg:    #1b1e23;
  --ink:         #f2f3f5;
  --ink-2:       #bec1c8;
  --ink-3:       #878a93;
  --rule:        #26282d;
  --rule-2:      #383b42;
  --accent:      #7fb2cd;
  --accent-soft: #17242c;
  --gold:        #e3b23c;

  --v-known:       #8fb0d6;
  --v-borrowed:    #d8a44e;
  --v-contradicted:#e07a7a;
  --v-translation: #a99ad8;
  --v-disputed:    #9ca0a8;
  --v-method:      #5fb8b2;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 17px/1.72 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .serif {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
               "Times New Roman", serif;
  font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink);
}

a { color: inherit; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

.wrap { width: min(100% - 2.5rem, var(--measure)); margin-inline: auto; }

/* ── top bar ─────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--page) 90%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.top__in {
  display: flex; align-items: center; gap: 1rem; height: 54px;
  width: min(100% - 2.5rem, 62rem); margin-inline: auto;
}
.brand {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-weight: 600; font-size: 15px; letter-spacing: -0.02em; text-decoration: none;
  white-space: nowrap;
}
.brand span { color: var(--accent); }
.top nav { display: flex; gap: 1rem; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.top nav::-webkit-scrollbar { display: none; }
.top nav a {
  font-size: 13px; color: var(--ink-2); text-decoration: none; white-space: nowrap;
  padding: 3px 0; border-bottom: 2px solid transparent;
}
.top nav a:hover { color: var(--ink); }
.top nav a.on { color: var(--ink); border-bottom-color: var(--accent); }
.themebtn {
  flex: none; width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink-2); cursor: pointer; font-size: 14px; line-height: 1;
}
.themebtn:hover { color: var(--ink); }

/* ── hero ────────────────────────────────────────────────────── */
.hero { padding: clamp(3rem, 8vw, 5.5rem) 0 2rem; }
.hero h1 { font-size: clamp(2.4rem, 7vw, 4rem); margin: 0 0 1rem; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__sub { font-size: clamp(1.05rem, 2.2vw, 1.22rem); color: var(--ink-2); margin: 0 0 1.5rem; }
.hero__rule { height: 3px; width: 68px; background: var(--accent); border: 0; margin: 0 0 1.4rem; }

/* ── the method strip ────────────────────────────────────────── */
.steps {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: 1.6rem 0 0; padding: 1rem 1.1rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
}
.steps b {
  font: 600 11.5px/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: var(--surface-2); border: 1px solid var(--rule);
  border-radius: 999px; padding: .38rem .7rem;
}
.steps i { font-style: normal; color: var(--ink-3); font-size: 13px; }

/* ── sections ────────────────────────────────────────────────── */
section { padding: clamp(2.5rem, 6vw, 4rem) 0; border-top: 1px solid var(--rule); scroll-margin-top: 66px; }
.eyebrow {
  font: 600 11.5px/1 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .8rem;
}
section h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 0 0 .9rem; }
.lede { font-size: 1.06rem; color: var(--ink-2); margin: 0 0 1.4rem; }
p { margin: 0 0 1.1rem; }
h3 { font-size: 1.25rem; margin: 2rem 0 .6rem; }

/* ── a claim card ────────────────────────────────────────────── */
.card {
  margin: 1.8rem 0; background: var(--surface);
  scroll-margin-top: 66px;   /* every card is an anchor target too */
  border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
}
.part { padding: 1.1rem 1.25rem; border-top: 1px solid var(--rule); }
.part:first-child { border-top: 0; }
.part__k {
  font: 600 10.5px/1 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 .6rem;
}
.part--claim { background: var(--surface-2); }
.part--claim p { font-size: 1.05rem; line-height: 1.6; margin: 0; color: var(--ink); }

.part ul { margin: 0; padding-left: 1.15rem; }
.part li { margin-bottom: .7rem; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.part li:last-child { margin-bottom: 0; }
.part--analysis p { font-size: 15.5px; line-height: 1.7; margin: 0; color: var(--ink-2); }

/* ── the verse block ─────────────────────────────────────────── */
.verse { background: var(--quote-bg); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: .9rem; }
.verse:last-child { margin-bottom: 0; }
.verse__ref {
  font: 600 12px/1 system-ui, sans-serif; letter-spacing: .06em;
  color: var(--accent); margin: 0 0 .8rem;
}
.verse__ar {
  direction: rtl; text-align: right;
  font-family: "Amiri", "Scheherazade New", "Traditional Arabic",
               "Arabic Typesetting", "Segoe UI Historic", "Times New Roman", serif;
  font-size: 1.55rem; line-height: 2.05; color: var(--ink); margin: 0 0 .7rem;
}
.verse__tl {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px; line-height: 1.7; color: var(--ink-3); margin: 0 0 .9rem;
}
.verse__tr { margin: 0; display: grid; gap: .55rem; }
.verse__tr div { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.verse__tr b {
  display: block; font: 600 11px/1 system-ui, sans-serif; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: .2rem;
}

/* ── the verdict ─────────────────────────────────────────────── */
.part--verdict { display: flex; flex-wrap: wrap; gap: .9rem; align-items: flex-start; }
.tag {
  flex: none; font: 600 11.5px/1 system-ui, sans-serif; letter-spacing: .04em;
  border-radius: 999px; padding: .42rem .75rem; color: #fff; white-space: nowrap;
}
.tag--known        { background: var(--v-known); }
.tag--borrowed     { background: var(--v-borrowed); }
.tag--contradicted { background: var(--v-contradicted); }
.tag--translation  { background: var(--v-translation); }
.tag--disputed     { background: var(--v-disputed); }
.tag--method       { background: var(--v-method); }
:root[data-theme="dark"] .tag,
:root:not([data-theme="light"]) .tag { color: #101114; }
.part--verdict p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink); flex: 1 1 260px; }

/* ── the honesty box ─────────────────────────────────────────── */
.caveat {
  margin: 1.8rem 0; padding: 1.1rem 1.25rem;
  border: 1px dashed var(--rule-2); border-radius: var(--radius); background: var(--surface);
}
.caveat h4 { margin: 0 0 .5rem; font-size: 1.03rem; }
.caveat p, .caveat li { font-size: 14.5px; color: var(--ink-2); }
.caveat ul { margin: .6rem 0 0; padding-left: 1.15rem; }

.srclist { font-size: 14px; color: var(--ink-2); }
.srclist li { margin-bottom: .65rem; }

footer { border-top: 1px solid var(--rule); padding: 2.4rem 0 3.5rem; font-size: 13.5px; color: var(--ink-3); }

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .top nav { display: none; }
  .verse__ar { font-size: 1.35rem; line-height: 1.95; }
  .part { padding: .95rem 1rem; }
}