/* ============================================================================
   AFQ-THEME v2.0 — technical report stylesheet
   AFQ-2026-001 · جامع الفرقان

   v1.0 was rejected: SaaS-landing tropes and a broken type scale (25 distinct
   sizes, 10px labels at 3.90:1 contrast — failing WCAG AA — against a 41px h1).
   v2.0 is built as an engineering document.

   Sources for the numbers below:
     BDA Dyslexia Style Guide 2023 ...... body 16-19px, measure 60-70ch,
                                          headings >=20% larger, no white bg
     WCAG 2.2 SC 1.4.12 Text Spacing .... line-height 1.5x, para spacing 2em
     WCAG 2.2 SC 1.4.3 Contrast ......... 4.5:1 minimum for body text
     W3C ALREQ .......................... Arabic has NO case; needs more leading
     Tufte CSS / Distill ................ narrow measure, wide figures, margin notes

   Type: IBM Plex superfamily — Sans (Latin) + Sans Arabic + Mono. One family,
   drawn to a common x-height and colour, so the two scripts sit together and
   the mono matches. Deliberately not Inter.

   Palette: Sukar Studios, per project rule R-12. #F5F5F7 canvas satisfies both
   R-12 (never cream/beige) and BDA (never pure white).
   ============================================================================ */

:root{
  /* ---- type scale · root 16px · floor 14px · ceiling 32px · max step 1.33 ---- */
  --t-h1:2rem;        --lh-h1:1.20;   /* 32 */
  --t-h2:1.5rem;      --lh-h2:1.25;   /* 24 */
  --t-h3:1.25rem;     --lh-h3:1.30;   /* 20 */
  --t-h4:1.0625rem;   --lh-h4:1.40;   /* 17 bold */
  --t-lead:1.1875rem; --lh-lead:1.60; /* 19 */
  --t-body:1.0625rem; --lh-body:1.65; /* 17 */
  --t-td:1rem;        --lh-td:1.45;   /* 16 */
  --t-th:0.9375rem;                   /* 15 */
  --t-cap:0.9375rem;  --lh-cap:1.50;  /* 15 */
  --t-label:0.875rem; --lh-label:1.40;/* 14 — ABSOLUTE FLOOR, nothing smaller */

  --measure:68ch;

  /* ---- colour · monochrome document, functional colour only ---- */
  --bg:#F5F5F7;
  --paper:#FFFFFF;
  --ink:#1A1A1A;        /* 15.9:1 on bg */
  --ink2:#43434A;       /*  8.9:1 on bg */
  --ink3:#5F5F68;       /*  6.2:1 on bg — lowest ink, still passes AA */
  --rule:#D8D8DE;
  --rule-soft:#E7E7EC;
  --accent:#0057A8;     /*  7.0:1 — links, section rules, active contents */
  --accent-soft:#EAF1F9;
  --flag:#B01B32;       /* used ONLY with a word beside it, never alone */
  --ok:#1B6B45;
  --warn:#8A5A00;

  --f-latin:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --f-arabic:'IBM Plex Sans Arabic','Geeza Pro',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',Menlo,monospace;
  --f:var(--f-latin);
}
html[lang="ar"]{
  --f:var(--f-arabic);
  --t-body:1.125rem;  --lh-body:1.90;   /* 18 / 1.90 — ALREQ: Arabic needs more leading */
  --t-lead:1.25rem;   --lh-lead:1.85;
  --lh-h1:1.45; --lh-h2:1.45; --lh-h3:1.50; --lh-h4:1.55;
  --lh-td:1.75; --lh-cap:1.75; --lh-label:1.70;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f);
  font-size:var(--t-body); line-height:var(--lh-body);
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
html[lang="ar"]{direction:rtl}

/* bilingual switching */
html[lang="en"] [data-lang="ar"]{display:none !important}
html[lang="ar"] [data-lang="en"]{display:none !important}
/* numerals, codes, units stay LTR inside Arabic prose */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ---------- masthead ---------- */
.masthead{border-bottom:2px solid var(--ink);background:var(--paper)}
.masthead-in{max-width:1180px;margin:0 auto;padding:1.5rem 26px 1.25rem;
  display:flex;align-items:baseline;gap:1.25rem;flex-wrap:wrap}
.mast-org{font-size:var(--t-label);line-height:var(--lh-label);color:var(--ink3);font-weight:600}
.mast-code{font-family:var(--f-mono);font-size:var(--t-label);color:var(--ink3);
  margin-inline-start:auto;direction:ltr}
.mast-title{font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:600;width:100%}
.lang-btn{
  font-family:var(--f);font-size:var(--t-label);line-height:1;font-weight:500;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink2);
  padding:.5rem .8rem;border-radius:3px;cursor:pointer}
.lang-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- document grid: contents · text column · margin notes ---------- */
.doc{max-width:1180px;margin:0 auto;padding:2.5rem 26px 0;
  display:grid;grid-template-columns:15rem minmax(0,var(--measure)) 1fr;
  gap:0 2.75rem;align-items:start}
.main{grid-column:2;min-width:0}

/* contents — this IS the navigation */
.toc{grid-column:1;position:sticky;top:2rem;font-size:var(--t-label);
  line-height:var(--lh-label);border-inline-start:2px solid var(--rule);padding-inline-start:1rem}
.toc-h{font-weight:600;color:var(--ink);margin-bottom:.7rem;font-size:var(--t-label)}
.toc a{display:block;color:var(--ink2);text-decoration:none;padding:.32rem 0;
  border-inline-start:2px solid transparent;margin-inline-start:-1rem;padding-inline-start:1rem}
.toc a:hover{color:var(--accent)}
.toc a.on{color:var(--accent);font-weight:600;border-inline-start-color:var(--accent)}
.toc .n{font-family:var(--f-mono);color:var(--ink3);margin-inline-end:.45rem;direction:ltr;display:inline-block}
.toc a.on .n{color:var(--accent)}

/* margin notes (Tufte/Distill gutter) */
.note{grid-column:3;font-size:var(--t-cap);line-height:var(--lh-cap);color:var(--ink3);
  border-inline-start:2px solid var(--rule);padding-inline-start:.85rem;margin-top:.3rem}
.note b{color:var(--ink2);font-weight:600}

/* ---------- headings ---------- */
h1{font-size:var(--t-h1);line-height:var(--lh-h1);font-weight:600;letter-spacing:-.01em}
h2{font-size:var(--t-h2);line-height:var(--lh-h2);font-weight:600;margin-bottom:.5rem}
h3{font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:600;margin-bottom:.4rem}
h4{font-size:var(--t-h4);line-height:var(--lh-h4);font-weight:600;margin-bottom:.3rem}
.secnum{font-family:var(--f-mono);font-weight:400;color:var(--ink3);
  margin-inline-end:.6rem;direction:ltr;display:inline-block}

/* ---------- text ---------- */
p{margin-bottom:1em;color:var(--ink2);max-width:var(--measure);text-align:start}
.lead{font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--ink);margin-bottom:1.25em}
strong{color:var(--ink);font-weight:600}
a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
ul,ol{margin:0 0 1em;padding-inline-start:1.4rem;max-width:var(--measure);color:var(--ink2)}
li{margin-bottom:.45em}
code{font-family:var(--f-mono);font-size:.9em;background:var(--rule-soft);
  padding:.1rem .3rem;border-radius:2px;direction:ltr;display:inline-block}

section{padding-block:2.25rem;border-top:1px solid var(--rule-soft)}
section:first-of-type{border-top:none;padding-top:0}

/* ---------- tables — where the numbers live ---------- */
.tbl{margin:1.5rem 0 2rem;max-width:none}
.tbl-cap{font-size:var(--t-cap);line-height:var(--lh-cap);color:var(--ink);
  margin-bottom:.5rem;font-weight:600}
.tbl-cap .lbl{font-family:var(--f-mono);color:var(--ink3);font-weight:400;
  margin-inline-end:.5rem;direction:ltr;display:inline-block}
.tbl-scroll{overflow-x:auto;border-block:1px solid var(--rule)}
table{width:100%;border-collapse:collapse;font-size:var(--t-td);line-height:var(--lh-td);background:transparent}
th{font-size:var(--t-th);font-weight:600;color:var(--ink);text-align:start;
  padding:.6rem .8rem;background:rgba(26,26,26,.035);border-bottom:1px solid var(--rule);
  vertical-align:bottom}
td{padding:.6rem .8rem;border-bottom:1px solid var(--rule-soft);
  color:var(--ink2);vertical-align:top;text-align:start}
tbody tr:last-child td{border-bottom:none}
td.num{font-family:var(--f-mono);white-space:nowrap;direction:ltr}
.tbl-note{font-size:var(--t-cap);line-height:var(--lh-cap);color:var(--ink3);margin-top:.5rem}

/* status — the WORD carries the meaning; colour only reinforces (BDA, UFC 3-450-01) */
.st{font-weight:600;white-space:nowrap}
.st-ok{color:var(--ok)}
.st-open{color:var(--warn)}
.st-no{color:var(--flag)}
.st-na{color:var(--ink3)}

/* ---------- figures ---------- */
figure{margin:1.5rem 0 2rem}
figure img{width:100%;height:auto;border:1px solid var(--rule);background:var(--paper)}
figcaption{font-size:var(--t-cap);line-height:var(--lh-cap);color:var(--ink2);margin-top:.5rem}
figcaption .lbl{font-family:var(--f-mono);color:var(--ink3);margin-inline-end:.5rem;
  direction:ltr;display:inline-block}

/* ---------- callouts — ruled, not tinted cards ---------- */
.callout{border-inline-start:3px solid var(--accent);padding:.15rem 0 .15rem 1.1rem;
  margin:1.25rem 0;max-width:var(--measure)}
html[lang="ar"] .callout{padding:.15rem 1.1rem .15rem 0}
.callout.flagged{border-inline-start-color:var(--flag)}
.callout h4{margin-bottom:.35rem}
.callout p:last-child{margin-bottom:0}

/* ---------- equations ---------- */
.eq{font-family:var(--f-mono);font-size:var(--t-td);line-height:1.9;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);padding:1rem 1.2rem;
  margin:1.25rem 0;overflow-x:auto;direction:ltr;text-align:left}
.eq .where{display:block;margin-top:.7rem;font-size:var(--t-cap);
  line-height:var(--lh-cap);color:var(--ink3)}

/* ---------- document control block ---------- */
.docctl{background:var(--paper);border:1px solid var(--rule);padding:1.25rem 1.4rem;margin:1.5rem 0 2rem}
.docctl h2{font-size:var(--t-h4);margin-bottom:.75rem}
.docctl dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.25rem;
  font-size:var(--t-td);line-height:var(--lh-td)}
.docctl dt{font-weight:600;color:var(--ink);white-space:nowrap}
.docctl dd{color:var(--ink2)}

/* ---------- progressive disclosure ---------- */
details{border-block:1px solid var(--rule-soft);margin:1.25rem 0;max-width:var(--measure)}
details+details{border-top:none;margin-top:-1.25rem}
summary{cursor:pointer;padding:.85rem 0;font-weight:600;font-size:var(--t-body);
  color:var(--ink);list-style:none;display:flex;gap:.55rem;align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::before{content:'+';font-family:var(--f-mono);color:var(--accent);font-weight:400}
details[open] summary::before{content:'−'}
summary:hover{color:var(--accent)}
.dbody{padding-bottom:1.1rem}
.dbody>*:last-child{margin-bottom:0}

/* ---------- footer ---------- */
.foot{border-top:2px solid var(--ink);margin-top:3.5rem;background:var(--paper)}
.foot-in{max-width:1180px;margin:0 auto;padding:1.75rem 26px 2.5rem;
  font-size:var(--t-cap);line-height:var(--lh-cap);color:var(--ink3)}
.foot-in p{color:var(--ink3);font-size:var(--t-cap);max-width:none}
.foot-in .mono{font-family:var(--f-mono);direction:ltr;display:inline-block}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .doc{grid-template-columns:minmax(0,1fr);gap:0}
  .main,.toc,.note{grid-column:1}
  .toc{position:static;border:1px solid var(--rule);padding:1rem 1.1rem;
    margin-bottom:2rem;background:var(--paper);
    border-inline-start-width:1px}
  .toc a{margin-inline-start:0;padding-inline-start:0;border-inline-start:none}
  .toc a.on{border-inline-start:none}
  .note{border-inline-start:2px solid var(--rule);margin:1.25rem 0;max-width:var(--measure)}
}
@media (max-width:600px){
  :root{--t-h1:1.625rem;--t-h2:1.3125rem;--t-h3:1.125rem}
  .doc{padding-inline:18px}
  .masthead-in,.foot-in{padding-inline:18px}
}
@media print{
  .toc,.lang-btn{display:none}
  body{background:#fff;font-size:11pt}
  .doc{display:block;max-width:none}
  details{border:none}
  summary{display:none}
  .dbody{padding:0}
  section{break-inside:avoid-page}
}