/* =============================================================================
   sq-base.css — STRUCTURAL tokens and Arabic invariants. NEVER themed.
   -----------------------------------------------------------------------------
   Two-layer token system (the method is borrowed from the sibling Hanot platform,
   which is genuinely well built; the values and the look are our own):

     THIS FILE   geometry — type scale, spacing, radii, rules, motion, z-index,
                 measure. Identical under every theme and every era.
     sq-theme    colour and font-family binding ONLY.

   The payoff: a component stylesheet that contains zero hardcoded colours can be
   re-themed, given a dark mode, or tinted per historical era without touching a
   single component rule.

   Hanot has no spacing scale, no type scale, no transition tokens and no z-index
   ladder, and pays for it in ad-hoc values. All four are here.
   ========================================================================== */

:root {
  /* --- Type scale ---------------------------------------------------------
     Each step carries its own line-height, because Arabic cannot share Latin's.
     Arabic ascenders and descenders travel much further than Latin's and stacked
     tashkeel needs vertical room (W3C ALReq §7.4), so body sits at 1.70 and
     nothing that carries running prose goes below it.
     Body is 23px, not the 20px the old site used: Amiri has a small apparent
     size, and 17-19px Arabic is the single most common reason an Arabic site
     feels cramped. */
  --t-2xs: 0.688rem;  --lh-2xs: 1.45;   /* 11px — apparatus keys, plate codes  */
  --t-xs:  0.813rem;  --lh-xs:  1.50;   /* 13px — apparatus values, rubrics    */
  --t-sm:  0.938rem;  --lh-sm:  1.55;   /* 15px — bylines, captions            */
  --t-ui:  1.000rem;  --lh-ui:  1.50;   /* 16px — controls (16 stops iOS zoom) */
  --t-mid: 1.063rem;  --lh-mid: 1.75;   /* 17px — standfirst, table lead cell  */
  --t-base:1.313rem;  --lh-base:1.95;   /* 21px/41px — RUNNING TEXT            */
  --t-lit: 1.500rem;  --lh-lit: 1.90;   /* 24px — عمود                         */
  --t-lg:  1.500rem;  --lh-lg:  1.60;   /* 24px — h3 (sans, 700)               */
  --t-xl:  1.900rem;  --lh-xl:  1.45;   /* 30px — invocation                   */
  --t-2xl: 2.125rem;  --lh-2xl: 1.45;   /* 34px — h2, chapter openings         */
  --t-3xl: 2.400rem;  --lh-3xl: 1.00;   /* 38px — the verdict's big numerals   */
  --t-4xl: 2.350rem;  --lh-4xl: 1.00;   /* 38px — wordmark                     */

  /* Fluid display sizes. Only display steps are fluid; prose is NOT, because a
     reading measure plus a fluid body size double-compensates and the line
     length drifts. */
  /* The article title is the approved prototype's clamp: it reaches 65.6px at
     1440, not the 52px this file previously capped it at. Al-Awwal has a small
     apparent size and the whole head composition is built around the title being
     the largest thing on the page by a clear margin. */
  --t-title:  clamp(2.2rem, 1.1rem + 4vw, 4.1rem);
  --t-lead:   clamp(1.75rem, 1.25rem + 1.7vw, 2.75rem);

  /* --- Measure and layout -------------------------------------------------
     660px is the reading column. The three-zone page that won the bake-off is
     text | marginalia | apparatus; the marginalia strip is what keeps the
     apparatus alive through a 42-couplet poem, because the poem's own verse
     rubrics hang in it. */
  --measure:        40rem;     /* 640px — running text, as the prototype set  */
  --measure-narrow: 34rem;     /* pull quotes, standfirst                     */
  --measure-wide:   64rem;     /* listings, directories                       */
  --marginalia:      7rem;     /* verse rubrics, section marks                */
  --apparatus:    19.5rem;     /* sources, documentation status, contents     */
  --maxw:           82.5rem;   /* 1320px — the full sheet incl. the margin    */
  --gutter:       clamp(1rem, 4vw, 2.5rem);
  --rail:         3.25rem;     /* the era rail                                */

  /* --- Spacing scale ------------------------------------------------------ */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  /* --- The edition rhythm -------------------------------------------------
     The approved prototype uses its own spacing steps, and they are not a
     subset of the scale above — .375 / 1.25 / 3.25 / 5 / 7.5 have no equivalent
     in it. They are kept at their exact values rather than rounded onto the
     nearest --sp-*, because the apparatus composition was tuned against these
     and "close enough" is how a design becomes a different design. */
  --e-1: 0.375rem;  --e-2: 0.75rem;   --e-3: 1.25rem;   --e-4: 2rem;
  --e-5: 3.25rem;   --e-6: 5rem;      --e-7: 7.5rem;
  --sp-prose:   1.15em;                        /* between prose blocks        */
  --sp-section: clamp(var(--sp-7), 7vw, var(--sp-9));

  /* --- Radii --------------------------------------------------------------
     Editorial surfaces are square. Large radii on everything is one of the
     specific habits that makes a site read as a generic app template rather
     than a publication. */
  --r-0: 0;  --r-1: 2px;  --r-2: 4px;  --r-pill: 999px;

  /* --- Rules -------------------------------------------------------------- */
  --hair: 1px;  --hair-2: 2px;  --rule-len: 6rem;

  /* --- Motion -------------------------------------------------------------
     One global reduced-motion override at the bottom of this file. Components
     must never write their own @media (prefers-reduced-motion) guard. */
  --dur-1: 120ms;  --dur-2: 200ms;  --dur-3: 320ms;
  --ease:     cubic-bezier(.2, .6, .2, 1);
  --ease-out: cubic-bezier(0, .6, .3, 1);

  /* --- Z-index ladder ----------------------------------------------------- */
  --z-ornament: 1;  --z-sticky: 20;  --z-topbar: 30;
  --z-overlay: 40;  --z-modal: 50;   --z-toast: 60;
}

/* =============================================================================
   ARABIC INVARIANTS — asserted once, here, so no component can regress them.
   Every rule below cites the W3C Arabic & Persian Layout Requirements (ALReq),
   which is a standards-body document, not a style opinion.
   ========================================================================== */

/* ALReq §7.2 — Arabic justifies by KASHIDA (elongating the connection between
   joined letters), not by stretching word spaces. CSS cannot do kashida. Using
   `text-align: justify` therefore falls back to inter-word spacing, which the
   spec explicitly warns "can lead to unpleasant results, such as rivers".
   Arabic prose is set flush-start, ragged-end. Always. */
p, li, dd, dt, blockquote, figcaption, .prose, .sq-prose {
  text-align: start;
}

/* ALReq §4.3.7.1 — Arabic is a connected script. Spacing between joined letters
   breaks the joining and destroys legibility; the only adjustable gaps are at
   non-joining characters, which CSS cannot target. So: zero tracking on Arabic.
   Tracking is permitted ONLY on Latin/numeric micro-labels, which must opt in
   explicitly via .sq-track and carry lang="en". */
h1, h2, h3, h4, h5, h6,
.sq-display, .sq-title, .sq-brand, .sq-kicker, .sq-heading {
  letter-spacing: 0;
}
.sq-track { letter-spacing: 0.14em; }

/* Bidi islands. Emails, URLs, DOIs, inventory numbers and plate codes must not
   be reordered by the surrounding RTL run. */
.sq-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

/* Inline code is an identifier, never prose — a file path, a table name, an IP
   prefix. Left to the surrounding RTL run the bidi algorithm reorders the
   dot-separated runs, so `220.181` renders to the reader as `181.220`. That is
   not a typographic nicety: it is a different number on the screen from the one
   in the database. Caught on admin-search-view.php, where the crawler ranges
   were all displaying backwards. */
code {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--f-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 0.92em;
}

/* --- Reset (minimal, deliberate) ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Sticky footer. Short pages (a bare search, an empty author) otherwise left the
   footer floating mid-viewport with a few hundred pixels of empty ground beneath it,
   which reads as a broken page rather than a short one. */
body {
  margin: 0;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > .site-foot { flex-shrink: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }

/* Focus must always be visible. Never remove it without replacing it. */
:focus-visible {
  outline: var(--hair-2) solid currentColor;
  outline-offset: 3px;
}

/* --- Reduced motion — the single global override -------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}