/* ========================================================================
   sufismqa — Editorial / Intellectual identity
   Hero: deep sage on parchment. Body: white with sage-as-ink. Brass accent.
   Fonts: Source Serif 4 (body+headlines+italic questions) + Inter (UI)
   ======================================================================== */

:root {
  /* ============================================================
     LIGHT-PALETTE THEME — cream / parchment / sage / gold
     Replaces the prior dark-sage masthead identity. Hero band is
     now a parchment gradient with subtle Islamic geometric pattern
     + soft gold glow; only the inverted hikmah block and footer
     keep the deep-sage drama.
     ============================================================ */

  /* Body / content surfaces — three-tone warm-white scale */
  --cream: #faf7f2;          /* page bg (the dominant surface) */
  --paper: #fffcf8;          /* elevated cards + hero brightest moment */
  --parchment: #f3ebe0;      /* deeper warm tone for hero gradient + dividers */

  /* Legacy aliases mapped to the new tokens so existing rules still resolve. */
  --paper-light: var(--paper);
  --paper-warm: var(--cream);
  --paper-deep: var(--parchment);

  /* Warm-black ink — slightly red shifted to harmonize with cream */
  --ink: #1a1816;
  --ink-soft: rgba(26, 24, 22, 0.85);
  --ink-muted: rgba(26, 24, 22, 0.65);
  --ink-faint: rgba(26, 24, 22, 0.45);

  /* Hairline rules — same alpha values, matched to the new ink */
  --rule: rgba(26, 24, 22, 0.12);
  --rule-soft: rgba(26, 24, 22, 0.06);

  /* Three-tone brass scale.
     --accent (was a single brass) is now an alias for --gold-warm so legacy
     references keep working; --gold and --gold-soft are the additional
     hierarchy steps borrowed from the islahenafs reference. */
  --gold-warm: #b8963e;      /* most saturated — used sparingly for emphasis */
  --gold: #9a7b4f;           /* the workhorse brass — buttons, links */
  --gold-soft: #c9b896;      /* faded brass for hairlines, soft borders */
  --accent: var(--gold-warm);
  --accent-deep: var(--gold);
  --accent-soft: rgba(184, 150, 62, 0.35);
  --accent-light: rgba(184, 150, 62, 0.18);
  --accent-bg-soft: rgba(184, 150, 62, 0.08);

  /* Sage — was the dominant background; now functional accent only. */
  --sage: #2d4f42;
  --sage-light: #3d6b5a;

  /* Brass-tinted surfaces (kept for legacy callers) */
  --highlight: rgba(184, 150, 62, 0.08);
  --tint: rgba(184, 150, 62, 0.08);
  --tint-warm: var(--cream);

  /* Hero / footer scope tokens — used ONLY by the inverted hikmah spotlight
     and the footer band now. The masthead band no longer rebinds to dark. */
  --hero-bg: var(--sage);
  --hero-ink: #F5EDD8;
  --hero-ink-soft: rgba(245, 237, 216, 0.78);
  --hero-ink-muted: rgba(245, 237, 216, 0.5);
  --hero-rule: rgba(245, 237, 216, 0.12);
  --hero-surface: rgba(245, 237, 216, 0.04);

  /* Content type accents — quieted for the editorial palette */
  --t-qa: #1F2A24;            --t-qa-bg: rgba(31, 42, 36, 0.05);
  --t-practice: #8a6a3a;      --t-practice-bg: rgba(138, 106, 58, 0.08);
  --t-story: #a67c2f;         --t-story-bg: rgba(166, 124, 47, 0.08);
  --t-hikmah: #2e5638;        --t-hikmah-bg: rgba(46, 86, 56, 0.07);
  --t-dua: #4a5a78;           --t-dua-bg: rgba(74, 90, 120, 0.07);
  --t-quote: #5a554a;         --t-quote-bg: rgba(90, 85, 74, 0.07);
  --t-teaching: #4a5a5a;      --t-teaching-bg: rgba(74, 90, 90, 0.07);

  /* Layout */
  --page-max: 72rem;
  --read-max: 68ch;

  /* Radii — 8px on cards, 100px on pills */
  --r-card: 8px;
  --r-pill: 100px;
  --r-small: 4px;

  /* Eyebrow label preset (11px, 0.18em tracking, brass, uppercase) */
  --eyebrow-size: 0.6875rem;          /* 11px against 16px root, 13.2px against 19.2px root */
  --eyebrow-tracking: 0.18em;

  /* --- Admin palette (see docs/superpowers/specs/2026-04-22-admin-review-ui-design.md) --- */
  /* Contrast audit 2026-05-02: verified all three ink tokens against --admin-bg (#faf7f0).
     --admin-ink (#2b2a28): ~16:1 — safe.
     --admin-ink-muted (#6a665e): ~5.4:1 — passes AA.
     --admin-ink-soft: was #9a8f7a (~2.97:1, fails AA for small text).
       Darkened to #5a554d (~7.28:1) to clear WCAG AA at all text sizes. */
  --admin-bg:           #faf7f0;
  --admin-bg-subtle:    #f3ecdb;
  --admin-ink:          #2b2a28;
  --admin-ink-muted:    #6a665e;
  --admin-ink-soft:     #5a554d;  /* was #9a8f7a; darkened 2026-05-02 for AA contrast */
  --admin-rule:         #e5dcc0;
  --accent-field-bg:    #fefaee;

  --status-pending:     #b58920;
  --status-approved:    #2b3d2e;
  --status-needs-edit:  #c88a1a;
  --status-rejected:    #8a3a2a;

  /* --- Admin scale (JS-controlled via ScalePicker) --- */
  --admin-scale: 1;

  /* --- Admin-contrast type tokens (higher contrast than public --t-* variants) ---
     All foreground/background pairs verified ≥ 4.5:1 WCAG AA for small text.
     Worst pair: --admin-t-quote on --admin-t-quote-bg ≈ 8.1:1 */
  --admin-t-qa:            #2a5230;  --admin-t-qa-bg:            #e8efde;
  --admin-t-teaching:      #2e4444;  --admin-t-teaching-bg:      #e3e8e0;
  --admin-t-story:         #7a5a1a;  --admin-t-story-bg:         #f5ebcc;
  --admin-t-practice:      #734a28;  --admin-t-practice-bg:      #f3e2cc;
  --admin-t-quote:         #3a362e;  --admin-t-quote-bg:         #ede9dd;
  --admin-t-dua:           #2e3e62;  --admin-t-dua-bg:           #dee4ef;
  --admin-t-hikmah:        #0f3a1c;  --admin-t-hikmah-bg:        #d5e2cd;
}

* { box-sizing: border-box; }
/* Root font-size bumped from 16px → 19.2px (+20%) to scale everything rem-based. */
/* Root font-size respects admin scale (1.0 by default). Admin's
   ScalePicker writes `--admin-scale` onto document.documentElement, so
   switching to Compact/Regular/Large/XL scales every rem-based size
   on the admin pages. Public site never sets the variable, so the
   fallback `1` keeps it at the original 19.2px. */
html {
  font-size: calc(19.2px * var(--admin-scale, 1));
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-serif), 'Iowan Old Style', Georgia, serif;
  font-weight: 400;
  line-height: 1.65;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  position: relative;
}

/* Skip link — first focusable element, hidden off-screen until focused */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-150%);
  background: var(--ink);
  color: var(--paper-light);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-small) var(--r-small);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 1000;
  transition: transform 0.2s ease;
  text-decoration: none;
}
.skip-link:focus {
  transform: translateX(-50%) translateY(0);
  outline: 2px solid #C9A961;
  outline-offset: 2px;
}

/* Reduce tap delay + prevent double-tap zoom on buttons and links */
button, a, [role="button"] {
  touch-action: manipulation;
}

/* Noise overlay removed — pure-white body, no texture (per design spec). */

::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

[lang='ur'], .urdu {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  direction: rtl;
  text-align: right;
  line-height: 2.1;
}
[lang='ar'], .arabic {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  direction: rtl;
  text-align: right;
  line-height: 1.85;
}

/* ============================================================================
   URDU-LOCALE FONT INHERITANCE
   ----------------------------------------------------------------------------
   When the page is Urdu (.locale-scope--ur from <LangLayout>), default every
   text element to Nastaliq so cards, navs, buttons, and labels all render in
   the same script-correct typeface. Per-component CSS in this file uses
   `font-family: var(--font-serif)` everywhere, so without this override every
   Urdu string would render in Source Serif (Latin) — visibly wrong.
   The :where() wrapper keeps specificity low so explicit [lang='en'] /
   [lang='ar'] children below can opt back out cleanly.
   ========================================================================== */
.locale-scope--ur :where(h1, h2, h3, h4, h5, h6, p, span, a, li, button, input, textarea, label, blockquote, em, strong, dt, dd, time, summary, figcaption, small) {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
}
/* Explicit English content inside the Urdu page goes back to the Latin serif. */
.locale-scope--ur [lang='en'],
.locale-scope--ur [lang='en'] :where(h1, h2, h3, h4, h5, h6, p, span, a, li, button, em, strong, dt, dd, time, small) {
  font-family: var(--font-serif), 'Iowan Old Style', Georgia, serif;
}
/* Arabic source quotes use Naskh, not Nastaliq, for legibility of vowel marks. */
.locale-scope--ur [lang='ar'],
.locale-scope--ur [lang='ar'] :where(h1, h2, h3, h4, h5, h6, p, span, a, li, em, strong) {
  font-family: var(--font-naskh), 'Noto Naskh Arabic', serif;
}
/* Nastaliq glyphs need more vertical room than Latin serif — raise line-height
   for headings and paragraphs that inherit the Urdu font. */
.locale-scope--ur :where(h1, h2, h3, h4) {
  line-height: 1.65;
}
.locale-scope--ur :where(p, li, blockquote, dd) {
  line-height: 2.0;
}

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  position: relative;
  z-index: 1;
}

/* -------- Masthead band (light cream/parchment scope) --------
   Background is the warm parchment-cream gradient. Sticky header floats over
   it via backdrop blur. Hero band lays the geometric pattern + gold glow as
   non-interactive overlays. Token rebinding stays minimal — the body palette
   already matches what the hero needs. */

.masthead-band {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--cream) 60%, var(--paper) 100%);
  color: var(--ink);
  position: relative;
  z-index: 1;
  /* NO overflow: hidden here — sticky-header negative margins need to
     extend past the band's flow without being clipped. */
}

.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  /* Break out of .page max-width so the chrome spans the full viewport width.
     Inner padding holds the content alignment; max-width on inner content (the
     .public-nav) keeps it readable. */
  margin: 0 calc(50% - 50vw);
  padding: 1.05rem max(clamp(1rem, 4vw, 2.5rem), calc(50vw - 36rem));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  /* Glass-on-cream sticky chrome — paper at 82% with blur lets the gradient
     and pattern beneath show through subtly as the user scrolls. */
  background: rgba(255, 252, 248, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 0.5px solid var(--rule-soft);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 60, 'wght' 600;
  font-size: clamp(2rem, 4.5vw, 2.6rem);
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1;
}
.brand em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold-warm);
}

.site-head nav {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px min, touch-spacing rule */
}

.site-head nav a {
  padding: 0.65rem 1rem;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  border-radius: var(--r-pill);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
/* Legacy .site-head nav a override removed — actual nav is .public-nav (rules below). */
.site-head nav a:hover { background: rgba(184, 150, 62, 0.08); color: var(--sage); }
.site-head nav a:active { transform: scale(0.97); background: rgba(184, 150, 62, 0.14); }
.site-head nav a[aria-current='page'] {
  background: rgba(45, 79, 66, 0.08);
  color: var(--sage);
  font-weight: 600;
}

/* Legacy .menu-btn / .desktop-only rules removed — replaced by .mobile-head-actions and .public-nav */

/* ---- Primary CTA: Ask a Question ---- */
.site-head a.ask-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.25rem;
  background: var(--sage);
  color: var(--paper);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  border-radius: var(--r-pill);
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  min-height: 44px;
  text-decoration: none;
  box-shadow: 0 6px 20px -10px rgba(45, 79, 66, 0.45);
}
.locale-scope--ur .site-head a.ask-cta {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-size: 1rem;
  padding: 0.55rem 1rem;
  line-height: 1.5;
  min-height: 44px;
}
.site-head a.ask-cta:hover {
  background: var(--sage-light);
  color: var(--paper);
}
.site-head a.ask-cta:active {
  transform: scale(0.98);
  background: var(--sage-light);
}
.site-head a.ask-cta svg {
  width: 1rem;
  height: 1rem;
  color: var(--paper);
}

/* Short/full label swap for mobile */
.ask-cta-label-full { display: none; }
.ask-cta-label-short { display: inline; }
@media (min-width: 420px) {
  .ask-cta-label-full { display: inline; }
  .ask-cta-label-short { display: none; }
}

/* -------- Hero -------- */

.hero {
  padding: clamp(3.5rem, 7.15vw, 5.5rem) 0 clamp(2.6rem, 5.2vw, 3.6rem);
  text-align: center;
  color: var(--ink);
  position: relative;
  overflow: hidden;
}

/* Subtle Islamic geometric pattern overlay — atmosphere only, never competes
   with text. Confined to the hero so it doesn't clip the sticky header. */
.hero::before {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='%239a7b4f' stroke-width='0.5'/%3E%3Cpath d='M30 10L50 30L30 50L10 30Z' fill='none' stroke='%239a7b4f' stroke-width='0.3'/%3E%3Ccircle cx='30' cy='30' r='4' fill='none' stroke='%239a7b4f' stroke-width='0.3'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  z-index: 0;
}

/* Soft gold glow centered behind the hero text. Large blur diffuses it
   across the band without being a visible circle. */
.hero::after {
  content: '';
  position: absolute;
  left: 50%; top: 40%;
  transform: translate(-50%, -50%);
  width: 760px; height: 440px;
  border-radius: 50%;
  background: rgba(184, 150, 62, 0.14);
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
}

.hero > * { position: relative; z-index: 1; }

/* Eyebrow above the hero h1 — small-caps brass tag for the three-pillar
   territory of the archive. Symmetric brass hairlines on each side. */
.hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--gold-warm);
  margin-bottom: 1.6rem;
}
.hero .hero-eyebrow::before,
.hero .hero-eyebrow::after {
  content: '';
  width: 1.4rem;
  height: 1px;
  background: var(--gold-warm);
}
/* Urdu eyebrow uses Nastaliq, no uppercase, more generous tracking. */
.hero .hero-eyebrow[lang='ur'] {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  font-weight: 500;
}

/* -------- Hero kicker — italic line that sits directly under the lede,
   carries the credibility byline (Q & A with the Shaykh's full name). */

.hero .hero-kicker {
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-variation-settings: 'opsz' 36;
  font-size: clamp(1rem, 2.4vw, 1.24rem);
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: -0.005em;
  line-height: 1.35;
  margin: 0.65rem auto clamp(1.5rem, 3.5vw, 2.25rem);
  text-align: center;
  max-width: 44ch;
}
/* Nastaliq kicker needs Nastaliq font + much taller line-height.
   Color inherits from base .hero-kicker (ink-muted) — strict parity with English. */
.hero .hero-kicker[lang='ur'] {
  font-family: var(--font-nastaliq), serif;
  font-style: normal;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  line-height: 2.0;
  max-width: 38ch;
}

/* 3-dot spacer below the search bar — preserves the rhythm the old
   guidance-ornament gave the hero without re-introducing the dedication. */
.hero .hero-spacer {
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--gold-soft);
  font-size: 0.95rem;
  letter-spacing: 0.6em;
  line-height: 1;
  opacity: 0.65;
}

/* -------- Guidance Strip (top-of-page dedication, on sub-pages only) -------- */

.guidance-strip {
  background: var(--paper-warm);
  border-bottom: 0.5px solid var(--rule-soft);
  padding: 0.8rem env(safe-area-inset-right) 0.8rem env(safe-area-inset-left);
  padding-top: calc(0.8rem + env(safe-area-inset-top));
  position: relative;
  z-index: 2;
}
.guidance-strip-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  text-align: center;
}
.guidance-strip .gs-ornament {
  color: var(--accent-soft);
  font-size: 1rem;
  line-height: 1;
  align-self: center;
}
.guidance-strip .gs-label {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: clamp(0.72rem, 1.2vw, 0.8rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  line-height: 1.3;
}
.guidance-strip .gs-name {
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-variation-settings: 'opsz' 36;
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  font-weight: 500;
  color: var(--accent-deep);
  letter-spacing: -0.003em;
  line-height: 1.3;
}
.guidance-strip .gs-honorific {
  color: var(--accent);
  font-weight: 500;
  margin-left: 0.15em;
}

.hero h1.lede {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 72, 'wght' 500;
  font-size: clamp(1.9rem, 4.95vw, 3.25rem);   /* −10% from prior */
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 30ch;
  margin: 0 auto 1.75rem;
  text-align: center;
}
/* Stack the regular line and the italic-gold accent line. Each renders as block
   so the second clause breaks underneath the first instead of running inline.
   Repeated parent class boosts specificity past any cascade conflict. */
.hero h1.lede.lede .lede-a,
.hero h1.lede.lede .lede-em,
.hero h1.lede.lede em {
  display: block;
}
.hero h1.lede.lede .lede-em,
.hero h1.lede.lede em {
  font-style: italic;
  color: var(--gold-warm);
  font-variation-settings: 'opsz' 72, 'wght' 400;
  margin-top: 0.15em;
}
/* Urdu lede uses Nastaliq + significantly taller line-height to keep
   the diagonal glyph stack from overlapping itself. */
.hero h1.lede[lang='ur'] {
  font-family: var(--font-nastaliq), serif;
  font-variation-settings: normal;
  font-weight: 500;
  font-size: clamp(1.8rem, 4.15vw, 2.65rem);   /* −10% from prior */
  line-height: 2.0;
  letter-spacing: 0;
  max-width: 32ch;
  /* Tint the middle-dot separators (·) gold-warm without touching the words.
     This is a single-property trick: the title is one string, but ::selection-style
     coloring would need spans. Instead we use a gradient text-emphasis-ish
     hack via a brass underline accent. See the ::after rule below. */
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Urdu hero stacks lede-a and lede-em (gold-warm second line) the same way as
   English. Nastaliq doesn't render italic, so we drop italic but keep the gold
   color and Nastaliq face for parity with the English visual moment. */
.hero h1.lede[lang='ur'] em,
.hero h1.lede[lang='ur'] .lede-em {
  font-family: var(--font-nastaliq), serif;
  font-style: normal;
  font-weight: 500;
  font-variation-settings: normal;
  color: var(--gold-warm);
  line-height: 1.6;
  margin-top: 0.1em;
}
.search-shell { max-width: 42rem; margin: 0 auto; }
.search-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--paper);
  border: 1px solid var(--gold-soft);
  border-radius: var(--r-pill);
  padding: 0.55rem 0.55rem 0.55rem 1.15rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 28px -16px rgba(45, 79, 66, 0.15);
}
.search-field:focus-within {
  border-color: var(--gold-warm);
  box-shadow: 0 0 0 3px rgba(184, 150, 62, 0.2);
}
.search-field svg { width: 1.25rem; height: 1.25rem; stroke: var(--ink-muted); flex-shrink: 0; }
.search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 1rem 0;
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink);
  text-align: left;
}
.locale-scope--ur .search-field input {
  font-family: var(--font-nastaliq), serif;
  font-style: normal;
  font-size: 1.3rem;
  text-align: right;
  direction: rtl;
}
.locale-scope--ur .search-field input::placeholder {
  font-family: var(--font-nastaliq), serif;
}
.search-field input::placeholder { color: var(--ink-muted); }
.search-field button.submit {
  padding: 0.7rem 1.35rem;
  background: var(--sage);
  color: var(--paper);
  border-radius: var(--r-pill);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-height: 48px;
  transition: background 0.2s ease;
  flex-shrink: 0;
  border: 0;
  cursor: pointer;
}
.locale-scope--ur .search-field button.submit {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-size: 1.2rem;
  line-height: 1.4;
  padding: 0.55rem 1.35rem;
}
.search-field button.submit:hover { background: var(--sage-light); }
.search-field button.submit:active {
  background: var(--sage-light);
  transform: scale(0.97);
}
/* Hints: single-line row, centers when all fit, horizontally scrolls on narrow.
   Pulled out of .search-shell so it can use the full hero width. */
.hints {
  margin-top: 1.35rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.55rem;
  /* `safe center` centers when content fits, else left-aligns so first items
     are not clipped off-screen when the row scrolls. */
  justify-content: safe center;
  overflow-x: auto;
  scrollbar-width: none;
  /* Bleed padding to page edges so scroll content can run from edge to edge */
  padding: 0.15rem clamp(1rem, 4vw, 2.5rem);
  margin-left: calc(-1 * clamp(1rem, 4vw, 2.5rem));
  margin-right: calc(-1 * clamp(1rem, 4vw, 2.5rem));
}
.hints::-webkit-scrollbar { display: none; }

.hints .label,
.hints a {
  flex-shrink: 0; /* no squishing — either fit or scroll */
}

.hints .label {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.9rem;
  color: var(--ink-muted);
  padding: 0.5rem 0.15rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.locale-scope--ur .hints .label {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-size: 0.95rem;
  line-height: 1.4;
  padding: 0.5rem 0.15rem;
}
.hints a {
  padding: 0.55rem 1.05rem;
  min-height: 44px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-pill);
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.locale-scope--ur .hints a {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.55rem 1rem;
  min-height: 44px;
}
.hints a:hover {
  background: rgba(184, 150, 62, 0.08);
  border-color: var(--gold-soft);
  color: var(--ink);
}
.hints a:active {
  transform: scale(0.97);
  background: rgba(184, 150, 62, 0.14);
}

/* ========================================================================
   REVIEW-STATUS INDICATORS (pending review = asterisk + banner)
   ======================================================================== */

/* Small amber superscript asterisk that sits next to an entry title
   when its review_status !== 'approved'. Tooltip explains. */
.draft-mark {
  display: inline-flex;
  align-items: flex-start;
  font-family: var(--font-sans), sans-serif;
  font-weight: 700;
  color: #b88b3a; /* muted amber — same as story type color */
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.2em;
  cursor: help;
  transition: color 0.2s ease;
}
.draft-mark:hover { color: #a67c2f; }

/* Detail-page banner: "this entry is pending review" */
.review-banner {
  margin: 1.25rem 0 2rem;
  padding: 1rem 1.25rem;
  background: #f6eed8;
  border: 0.5px solid #d9c28b;
  border-left: 3px solid #b88b3a;
  border-radius: var(--r-small);
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  font-family: var(--font-serif), serif;
  font-size: 0.98rem;
  line-height: 1.55;
  color: #6b4f1a;
}
.review-banner svg {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  stroke: #b88b3a;
  margin-top: 0.15rem;
}
.review-banner strong {
  font-weight: 600;
  font-style: normal;
  color: #583f10;
}

/* ========================================================================
   HOMEPAGE CONTENT SECTIONS (ported from web-preview-v3)
   ======================================================================== */

/* -------- Ornament (section break) -------- */

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin: clamp(1.75rem, 3.5vw, 2.75rem) auto;
  max-width: 22rem;
}
/* Arabesque divider — gradient hairlines that fade to brass at the center,
   matching the islahenafs reference treatment. */
.ornament::before,
.ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-soft), transparent);
}
.ornament::after {
  background: linear-gradient(to left, transparent, var(--gold-soft), transparent);
}
.ornament .glyph {
  font-family: var(--font-nastaliq), serif;
  color: var(--gold-warm);
  font-size: 1.4rem;
  line-height: 1;
  opacity: 0.85;
}

/* -------- Topic strip (between masthead and Today) -------- */

.topic-strip {
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 1.25rem 0 0.5rem;
  margin: 0 calc(-1 * clamp(1rem, 4vw, 2.5rem));
  padding-left: clamp(1rem, 4vw, 2.5rem);
  padding-right: clamp(1rem, 4vw, 2.5rem);
}
.topic-strip::-webkit-scrollbar { display: none; }
.topic-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.15rem;
  background: var(--paper-light);
  border: 0.5px solid var(--rule-soft);
  border-radius: var(--r-pill);
  font-family: var(--font-serif), serif;
  font-size: 1.05rem;
  color: var(--ink);
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.topic-chip:hover { background: var(--tint); border-color: var(--accent-soft); transform: translateY(-1px); }
.topic-chip .arabic {
  font-family: var(--font-nastaliq), serif;
  font-size: 1.15rem;
  color: var(--accent);
  direction: rtl;
  line-height: 1.4;
}
.locale-scope--ur .topic-chip {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-size: 1.2rem;
  line-height: 1.4;
  padding: 0.6rem 1.15rem;
  min-height: 44px;
}
.locale-scope--ur .topic-chip .arabic { font-size: 1rem; }
.topic-chip .count {
  font-family: var(--font-sans), sans-serif;
  font-size: 0.85rem;
  color: var(--ink-muted);
  padding: 0.1rem 0.45rem;
  background: var(--paper-deep);
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* -------- Section title -------- */

.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 auto 1.25rem;
  gap: 1rem;
  max-width: var(--read-max);
}
.section-title--wide { max-width: none; }
.section-title h2 {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 60, 'wght' 600;
  font-size: clamp(1.6rem, 3.5vw, 2.15rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.section-title h2 em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: 'opsz' 60, 'wght' 400;
}
.locale-scope--ur .section-title h2,
.locale-scope--ur .section-title h2 em {
  font-family: var(--font-nastaliq), serif;
  font-style: normal;
  line-height: 1.7;
}
.section-title .see-all {
  font-family: var(--font-sans), sans-serif;
  font-size: 1rem;
  color: var(--accent);
  font-weight: 600;
  transition: color 0.2s ease, gap 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}
.locale-scope--ur .section-title .see-all {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-size: 1.15rem;
  line-height: 1.4;
}
.section-title .see-all:hover { color: var(--accent-deep); gap: 0.5rem; }

/* -------- Today (featured card) -------- */

.today { padding-top: clamp(1.5rem, 3vw, 2.25rem); }

.today-card {
  display: block;
  background: var(--paper-light);
  border: 0.5px solid var(--rule);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
  position: relative;
}
.today-card:hover { border-color: var(--accent-soft); transform: translateY(-2px); }
.today-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--accent);
}
.today-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 2rem 1.75rem 1.75rem;
}
@media (min-width: 780px) {
  .today-card-grid { grid-template-columns: 1fr 18rem; gap: 3rem; padding: 2.5rem 2.5rem 2rem; }
}
/* RTL: aside should sit on the LEFT (logical end), main on the RIGHT (logical start). */
.locale-scope--ur .today-card-grid {
  /* CSS Grid columns are placed in writing-mode order; in RTL, column 1 is on the right.
     The default 1fr 18rem stays correct, but the .aside should stick to the visual left
     in Urdu — handled by direction inheritance. We just confirm the grid honours dir. */
  direction: rtl;
}
.locale-scope--ur .today-card .meta-row {
  direction: rtl;
}
.today-card .kicker {
  font-family: var(--font-sans), sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.85rem;
}
.today-card h3 {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 72, 'wght' 500;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 0.85rem;
}
.today-card h3 em { font-style: italic; color: var(--accent-deep); }
.locale-scope--ur .today-card h3 {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-size: clamp(1.5rem, 3.5vw, 1.95rem);
  line-height: 2.2;
  letter-spacing: 0;
}
.today-card .dek {
  font-size: 1.1rem;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 56ch;
  margin-bottom: 1.5rem;
}
.locale-scope--ur .today-card .dek {
  font-family: var(--font-nastaliq), serif;
  font-size: 1.2rem;
  line-height: 2;
}
.today-card .meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 0.5px solid var(--rule-soft);
}
.today-card .meta-row .stamp {
  font-family: var(--font-sans), sans-serif;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  font-weight: 500;
}
.today-card .meta-row .read {
  font-family: var(--font-sans), sans-serif;
  font-size: 0.88rem;
  color: var(--accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap 0.2s ease;
}
.today-card:hover .meta-row .read { gap: 0.6rem; }
.today-card .aside {
  padding: 1.25rem 1.25rem 0;
  border-top: 0.5px solid var(--rule-soft);
}
@media (min-width: 780px) {
  .today-card .aside { padding: 0 0 0 2rem; border-top: 0; border-left: 0.5px solid var(--rule-soft); }
}
.today-card .aside .urdu-block {
  font-family: var(--font-nastaliq), serif;
  direction: rtl;
  text-align: right;
  font-size: 1.1rem;
  color: var(--ink-soft);
  line-height: 2.1;
  margin-bottom: 1.25rem;
}
/* When the side aside actually holds English text, render it LTR */
.today-card .aside .urdu-block[dir="ltr"] {
  font-family: var(--font-serif), 'Iowan Old Style', Georgia, serif;
  direction: ltr;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.today-card .aside .aside-meta {
  font-family: var(--font-sans), sans-serif;
  font-size: 0.74rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
}
.today-card .aside .aside-meta span { display: block; margin-bottom: 0.35rem; }
.today-card .aside .aside-meta strong { color: var(--ink-soft); font-weight: 600; }

/* -------- Entry list rows -------- */

.entries { list-style: none; margin: 0; padding: 0; }
.entries li { border-bottom: 0.5px solid var(--rule-soft); }
.entries a.entry {
  display: block;
  padding: 1.4rem 0.5rem;
  border-radius: var(--r-small);
  transition: background 0.25s ease, padding 0.25s ease;
}
.entries a.entry:hover { background: var(--paper-light); padding-left: 1rem; padding-right: 1rem; }
.entries .entry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 780px) {
  .entries .entry-grid { grid-template-columns: 1fr 16rem; gap: 2rem; align-items: start; }
}
.entries .entry-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}
.entries h3 {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 48, 'wght' 500;
  font-size: clamp(1.3rem, 2.6vw, 1.55rem);
  line-height: 1.28;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}
.entries h3 em { font-style: italic; color: var(--accent-deep); }
.locale-scope--ur .entries h3 {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-size: clamp(1.3rem, 2.8vw, 1.6rem);
  line-height: 2.15;
  letter-spacing: 0;
}
.entries .summary {
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 62ch;
}
.entries .bottom {
  margin-top: 0.65rem;
  font-family: var(--font-sans), sans-serif;
  font-size: 0.74rem;
  color: var(--ink-faint);
  display: flex;
  gap: 1rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.entries .urdu-col {
  font-family: var(--font-nastaliq), serif;
  direction: rtl;
  text-align: right;
  font-size: 1rem;
  color: var(--ink-muted);
  line-height: 2.05;
  padding-top: 0.25rem;
}
.entries .urdu-col[dir="ltr"] {
  font-family: var(--font-serif), 'Iowan Old Style', Georgia, serif;
  direction: ltr;
  text-align: left;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
@media (min-width: 780px) {
  .entries .urdu-col {
    padding-right: 1.5rem;
    border-right: 0.5px solid var(--rule-soft);
    font-size: 1.05rem;
  }
  .entries .urdu-col[dir="ltr"] {
    font-size: 1.05rem;
  }
}

/* -------- Type pills (content-type color coding) -------- */

.type-pill {
  font-family: var(--font-sans), sans-serif;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.type-pill[data-type='qa']       { background: var(--t-qa-bg);       color: var(--t-qa); }
.type-pill[data-type='practice'] { background: var(--t-practice-bg); color: var(--t-practice); }
.type-pill[data-type='story']    { background: var(--t-story-bg);    color: var(--t-story); }
.type-pill[data-type='hikmah']   { background: var(--t-hikmah-bg);   color: var(--t-hikmah); }
.type-pill[data-type='dua']      { background: var(--t-dua-bg);      color: var(--t-dua); }
.type-pill[data-type='quote']    { background: var(--t-quote-bg);    color: var(--t-quote); }
.type-pill[data-type='teaching'] { background: var(--t-teaching-bg); color: var(--t-teaching); }

.topic-mini {
  font-family: var(--font-sans), sans-serif;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  font-weight: 500;
}

/* -------- Compact 2-up grid (inside Latest feed) -------- */

.compact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  padding: 0.9rem 0;
  border-bottom: 0.5px solid var(--rule-soft);
}
@media (min-width: 640px) { .compact-grid { grid-template-columns: repeat(2, 1fr); } }
.compact-card {
  display: block;
  padding: 1.15rem 1.15rem 1.05rem;
  background: var(--paper-light);
  border: 0.5px solid var(--rule-soft);
  border-radius: var(--r-small);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.compact-card:hover { border-color: var(--accent-soft); transform: translateY(-1px); }
.compact-card .top-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}
.compact-card h4 {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 36, 'wght' 500;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}
.locale-scope--ur .compact-card h4 {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-size: 1.2rem;
  line-height: 2.1;
  letter-spacing: 0;
}
.compact-card h4 em { font-style: italic; color: var(--accent-deep); }
.compact-card .folio {
  font-family: var(--font-sans), sans-serif;
  font-size: 0.72rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.compact-card .urdu-echo {
  font-family: var(--font-nastaliq), serif;
  font-size: 0.88rem;
  color: var(--ink-faint);
  direction: rtl;
  text-align: right;
  margin-top: 0.35rem;
}
.compact-card .urdu-echo[dir="ltr"] {
  font-family: var(--font-serif), 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  direction: ltr;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* -------- Hikmah spotlight (mid-feed) — inverted dark-sage panel --------
   Mirrors the hero band: parchment text on deep-sage so the wisdom quote
   reads as a separate moment within the feed. Larger pull-quote sizing. */

.hikmah-spot {
  display: block;
  margin: 1.5rem 0;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.75rem, 6vw, 3.5rem);
  /* Sage gradient on cream — keeps the dramatic moment in the feed without
     losing the cream palette's overall warmth. */
  background: linear-gradient(135deg, var(--sage), var(--sage-light));
  color: var(--hero-ink);
  border: 0.5px solid var(--accent-soft);
  border-radius: var(--r-card);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  box-shadow: 0 14px 40px -20px rgba(45, 79, 66, 0.35);
}
.hikmah-spot:hover { border-color: var(--accent); transform: translateY(-2px); }
.hikmah-spot::before {
  content: '۞';
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  font-family: var(--font-nastaliq), serif;
  font-size: 2rem;
  color: var(--accent);
  opacity: 0.5;
  line-height: 1;
}
.hikmah-spot .label {
  font-family: var(--font-sans), sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.hikmah-spot .label::before {
  content: '';
  width: 1.5rem; height: 1.5px;
  background: var(--accent);
}
.hikmah-spot blockquote {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 144, 'wght' 400;
  font-style: italic;
  font-size: clamp(1.7rem, 4.5vw, 2.45rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--hero-ink);
  max-width: 36ch;
  margin: 0;
}
.hikmah-spot .urdu-echo {
  margin-top: 1.5rem;
  font-family: var(--font-nastaliq), serif;
  direction: rtl;
  text-align: right;
  font-size: 1.55rem;
  color: rgba(245, 237, 216, 0.8);
  line-height: 2;
  max-width: 36ch;
  margin-left: auto;
}
.hikmah-spot .urdu-echo[dir="ltr"] {
  font-family: var(--font-serif), Georgia, serif;
  direction: ltr;
  text-align: left;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-left: 0;
}
/* Urdu primary quote — when on /ur the blockquote itself has lang="ur" */
.hikmah-spot blockquote[lang='ur'] {
  font-family: var(--font-nastaliq), serif;
  font-style: normal;
  font-size: clamp(1.55rem, 4vw, 2.1rem);
  line-height: 1.95;
  max-width: 30ch;
}
.hikmah-spot .cite {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 0.5px solid rgba(245, 237, 216, 0.18);
  font-family: var(--font-sans), sans-serif;
  font-size: 0.85rem;
  color: rgba(245, 237, 216, 0.7);
  font-weight: 500;
  letter-spacing: 0.05em;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.hikmah-spot .cite em { color: var(--accent); font-style: italic; }

/* -------- Story feature -------- */

.story-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  background: var(--paper-light);
  border: 0.5px solid var(--rule);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.story-feature:hover { border-color: var(--accent-soft); transform: translateY(-2px); }
@media (min-width: 900px) { .story-feature { grid-template-columns: 1.6fr 1fr; } }
.story-feature .story-main {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  position: relative;
}
.story-feature .story-main::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--t-story);
  opacity: 0.65;
}
.story-feature .kicker {
  font-family: var(--font-sans), sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--t-story);
  font-weight: 600;
  margin-bottom: 0.85rem;
  padding-top: 0.35rem;
}
.story-feature h3 {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 72, 'wght' 500;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.story-feature h3 em { font-style: italic; color: var(--t-story); }
.locale-scope--ur .story-feature h3 {
  font-family: var(--font-nastaliq), serif;
  font-size: clamp(1.65rem, 3.5vw, 2.15rem);
  line-height: 1.9;
}
.story-feature .opener {
  font-family: var(--font-serif), serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 54ch;
  margin-bottom: 1.5rem;
}
.story-feature .opener::first-letter {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 144, 'wght' 700;
  font-size: 4.5rem;
  line-height: 0.88;
  float: left;
  padding: 0.15rem 0.55rem 0 0;
  color: var(--t-story);
}
.story-feature .meta-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-family: var(--font-sans), sans-serif;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  font-weight: 500;
  padding-top: 1rem;
  border-top: 0.5px solid var(--rule-soft);
  flex-wrap: wrap;
}
.story-feature .meta-row .read {
  margin-left: auto;
  color: var(--t-story);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap 0.2s ease;
}
.story-feature:hover .read { gap: 0.6rem; }
.story-feature .story-side {
  background: var(--t-story-bg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
  position: relative;
}
.story-feature .story-side::before {
  content: '۞';
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-family: var(--font-nastaliq), serif;
  font-size: 1.4rem;
  color: var(--t-story);
  opacity: 0.45;
  line-height: 1;
}
.story-feature .story-side .label {
  font-family: var(--font-sans), sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--t-story);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.story-feature .story-side .characters {
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.55;
}
.story-feature .story-side .characters strong,
.story-feature .story-side .moral strong {
  font-style: normal;
  font-family: var(--font-sans), sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 0.3rem;
}
.story-feature .story-side .moral {
  padding-top: 1rem;
  border-top: 0.5px solid color-mix(in srgb, var(--t-story) 20%, transparent);
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* -------- Practice cards -------- */

.practice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}
@media (min-width: 640px) { .practice-grid { grid-template-columns: repeat(2, 1fr); } }
.practice-card {
  padding: 1.5rem 1.5rem 1.3rem;
  background: var(--paper-light);
  border: 0.5px solid var(--rule);
  border-left: 4px solid var(--t-practice);
  border-radius: var(--r-small);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.practice-card:hover { border-color: var(--t-practice); transform: translateY(-2px); }
.practice-card .type-pill { align-self: flex-start; }
.practice-card h3 {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 48, 'wght' 500;
  font-size: 1.2rem;
  line-height: 1.22;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.practice-card .arabic-hero {
  font-family: var(--font-nastaliq), serif;
  direction: rtl;
  text-align: right;
  font-size: 1.3rem;
  color: var(--t-practice);
  line-height: 1.8;
}
.practice-card .struct {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 0.5px solid var(--rule-soft);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 1.25rem;
  font-size: 1rem;
}
.practice-card .struct dt {
  font-family: var(--font-sans), sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  padding-top: 0.15em;
  font-weight: 600;
}
.locale-scope--ur .practice-card .struct dt {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.5;
}
.practice-card .struct dd { color: var(--ink); font-style: italic; margin: 0; font-size: 1rem; }
.locale-scope--ur .practice-card .struct dd {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-style: normal;
  font-size: 1.1rem;
  line-height: 1.5;
}
.practice-card h3 { font-size: 1.35rem; }
.locale-scope--ur .practice-card h3 {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-size: 1.4rem;
  line-height: 2.1;
  letter-spacing: 0;
}

/* -------- Topics explorer (grid of topic cards) -------- */

.topic-explorer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.75rem;
}
.topic-card {
  display: block;
  padding: 1.35rem 1.35rem 1.15rem;
  background: var(--paper-light);
  border: 0.5px solid var(--rule);
  border-radius: var(--r-small);
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
  min-height: 9rem;
}
.topic-card:hover { background: var(--tint); border-color: var(--accent-soft); transform: translateY(-2px); }
.topic-card .arabic-hero {
  font-family: var(--font-nastaliq), serif;
  direction: rtl;
  text-align: left;
  font-size: 2.6rem;
  color: var(--accent);
  /* Nastaliq has tall ascenders/descenders; line-height 1 collides with the
     english-name underneath. 1.5 + larger margin gives breathing room. */
  line-height: 1.5;
  margin-bottom: 1.1rem;
}
.topic-card .english-name {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 36, 'wght' 600;
  font-size: 1.5rem;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.topic-card .meaning {
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-muted);
  margin-top: 0.4rem;
  line-height: 1.45;
}
.topic-card .count-row {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 0.5px solid var(--rule-soft);
  font-family: var(--font-sans), sans-serif;
  font-size: 0.74rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.08em;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.topic-card .count-row .arrow { transition: transform 0.2s ease; }
.topic-card:hover .arrow { transform: translateX(3px); }

/* -------- Hikmah row (3 small cards) -------- */

.hikmah-row-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 760px) { .hikmah-row-grid { grid-template-columns: repeat(3, 1fr); } }
.hikmah-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1.35rem 1.25rem;
  background: var(--paper-light);
  border: 0.5px solid var(--rule);
  border-top: 3px solid var(--t-hikmah);
  border-radius: var(--r-small);
  position: relative;
  min-height: 12rem;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.hikmah-card:hover { background: var(--t-hikmah-bg); border-color: var(--t-hikmah); transform: translateY(-2px); }
.hikmah-card .quote {
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-variation-settings: 'opsz' 48, 'wght' 400;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.hikmah-card .quote[lang='ur'] {
  font-family: var(--font-nastaliq), serif;
  font-style: normal;
  font-size: 1.4rem;
  line-height: 2;
}
.hikmah-card .urdu-echo {
  font-family: var(--font-nastaliq), serif;
  direction: rtl;
  text-align: right;
  font-size: 1.1rem;
  color: var(--ink-muted);
  line-height: 2;
}
.hikmah-card .urdu-echo[dir="ltr"] {
  font-family: var(--font-serif), Georgia, serif;
  direction: ltr;
  text-align: left;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
}
.hikmah-card .footer-row {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 0.5px solid var(--rule-soft);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-sans), sans-serif;
  font-size: 0.72rem;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  font-weight: 500;
}
.hikmah-card .footer-row .from { color: var(--t-hikmah); font-weight: 600; }

/* -------- Submit CTA -------- */

.submit-cta {
  margin-top: 2rem;
  background: var(--accent);
  color: var(--paper-light);
  border-radius: var(--r-card);
  padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: end;
  position: relative;
  overflow: hidden;
}
@media (min-width: 760px) { .submit-cta { grid-template-columns: 1.5fr auto; gap: 2.5rem; } }
.submit-cta::before {
  content: '۞';
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  font-family: var(--font-nastaliq), serif;
  font-size: 2rem;
  color: var(--paper-light);
  opacity: 0.2;
  line-height: 1;
}
.submit-cta h3 {
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-variation-settings: 'opsz' 72, 'wght' 400;
  font-size: clamp(1.65rem, 4vw, 2.15rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin-bottom: 0.65rem;
  color: var(--paper-light);
}
.locale-scope--ur .submit-cta h3 {
  font-family: var(--font-nastaliq), serif;
  font-style: normal;
  font-size: clamp(1.85rem, 4.5vw, 2.4rem);
  line-height: 2;
}
.submit-cta p {
  font-size: 1.1rem;
  max-width: 42ch;
  line-height: 1.6;
  opacity: 0.92;
  color: var(--paper-light);
}
.locale-scope--ur .submit-cta p {
  font-family: var(--font-nastaliq), serif;
  font-size: 1.25rem;
  line-height: 2;
}
.submit-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.5rem;
  background: var(--paper-light);
  color: var(--accent-deep);
  border-radius: var(--r-pill);
  font-family: var(--font-sans), sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  min-height: 48px;
  transition: background 0.25s ease, gap 0.2s ease;
  white-space: nowrap;
}
.locale-scope--ur .submit-cta .btn {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-size: 1.2rem;
  line-height: 1.4;
  padding: 0.75rem 1.5rem;
}
.submit-cta .btn:hover { background: var(--paper-warm); gap: 0.75rem; }

/* ====================================================================
   FOOTER
   ==================================================================== */

/* Footer band — edge-to-edge deep-sage backdrop that mirrors the hero.
   Top margin is 0 so adjacent edge-to-edge bands (e.g., the AskInvite
   parchment band on the homepage) butt directly against the footer with
   no white gap. Vertical breathing room comes from the band's padding. */
.foot-band {
  margin: 0 calc(50% - 50vw) 0;
  padding: clamp(3.25rem, 6.5vw, 4.55rem) clamp(1rem, 4vw, 2.5rem) calc(clamp(3.25rem, 6.5vw, 4.55rem) + env(safe-area-inset-bottom));
  /* Light cream footer matching the reference — quietly closes the page
     without competing with the masthead band. Brass hairline above. */
  background: var(--cream);
  border-top: 0.5px solid var(--gold-soft);
  color: var(--ink);
}

.site-foot {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.site-foot .foot-left {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
/* Footer wordmark — mirrors the .brand mark in the header. */
.site-foot .foot-brand {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 60, 'wght' 600;
  font-size: clamp(1.85rem, 3.5vw, 2.4rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}
.site-foot .foot-brand em {
  font-style: italic;
  color: var(--gold-warm);
  font-weight: 500;
}
.site-foot .foot-brand:hover { opacity: 0.78; }
.site-foot .links {
  display: flex;
  gap: 1.5rem;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.95rem;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
  font-weight: 500;
  flex-wrap: wrap;
}
.site-foot .links a { color: var(--ink-muted); }
/* Match the top-nav exactly: same Nastaliq family, same scale, same leading. */
.locale-scope--ur .site-foot .links,
.locale-scope--ur .site-foot .links a {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-size: 1.2rem;
  line-height: 1.4;
}
.site-foot .links a { color: var(--ink-muted); text-decoration: none; }
.site-foot .links a:hover { color: var(--accent); }
@media (min-width: 720px) {
  .site-foot {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .site-foot .links {
    align-self: flex-end;
    justify-content: flex-end;
  }
}

/* ========================================================================
   ADMIN SHELL & REVIEW UI
   ======================================================================== */

.admin-shell {
  min-height: 100vh;
  background: var(--admin-bg);
  color: var(--admin-ink);
}

/* WordPress-style admin chrome — sidebar + slim top bar */
.admin-shell--split {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.admin-shell-main {
  display: flex;
  flex-direction: column;
  min-width: 0; /* prevent grid blow-out from wide tables */
}

.admin-shell-content {
  flex: 1;
  padding: 1.6rem 2rem 3rem;
  background: var(--admin-bg, #faf7f0);
}

/* Sidebar */
.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--admin-bg-subtle, #f3ecdb);
  border-right: 1px solid var(--admin-rule, #e5dcc0);
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: 0.9rem;
}

.admin-sidebar-header {
  padding: 1.1rem 1.25rem 0.9rem;
  border-bottom: 1px solid var(--admin-rule, #e5dcc0);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.admin-sidebar-brand {
  font-family: var(--font-serif), 'Source Serif 4', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--admin-ink, #2b2a28);
  letter-spacing: 0.01em;
}
.admin-sidebar-brand-sub {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--admin-ink-muted, #6a665e);
  margin-left: 0.4rem;
}

.admin-sidebar-collapse-btn {
  background: transparent;
  border: 1px solid var(--admin-rule, #e5dcc0);
  border-radius: 3px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--admin-ink-muted, #6a665e);
  font-size: 0.85rem;
  line-height: 1;
  flex-shrink: 0;
}
.admin-sidebar-collapse-btn:hover { color: var(--admin-ink, #2b2a28); }

.admin-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.8rem 0;
}

.admin-sidebar-section {
  margin-bottom: 0.9rem;
}
.admin-sidebar-heading {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--admin-ink-muted, #6a665e);
  margin: 0.6rem 1.25rem 0.3rem;
  font-weight: 600;
}
.admin-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.admin-sidebar-li {
  display: flex;
  align-items: center;
  position: relative;
}
.admin-sidebar-link {
  display: block;
  flex: 1;
  padding: 0.5rem 1.25rem;
  color: var(--admin-ink, #2b2a28);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 90ms ease, border-color 90ms ease;
}
.admin-sidebar-link:hover {
  background: rgba(43, 61, 46, 0.06);
}
.admin-sidebar-link--active {
  background: rgba(43, 61, 46, 0.1);
  border-left-color: var(--status-approved, #2b3d2e);
  font-weight: 600;
}

/* WordPress-style "+ New X" pill on hover/active */
.admin-sidebar-addnew {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  margin-right: 0.6rem;
  font-size: 0.72rem;
  color: var(--admin-ink-muted, #7a7464);
  background: transparent;
  border: 1px solid var(--admin-rule, #d8d2c0);
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 90ms ease, color 90ms ease, background 90ms ease;
}
.admin-sidebar-li:hover .admin-sidebar-addnew,
.admin-sidebar-li:focus-within .admin-sidebar-addnew { opacity: 1; }
.admin-sidebar-li:has(.admin-sidebar-link--active) .admin-sidebar-addnew { opacity: 1; }
.admin-sidebar-addnew:hover {
  color: var(--admin-ink, #2b2a28);
  background: rgba(43, 61, 46, 0.08);
  border-color: var(--admin-ink-soft, #5a554d);
}
.admin-sidebar--collapsed .admin-sidebar-addnew { display: none; }

/* Topics manager (admin/topics) */
.topics-new {
  border: 1px solid var(--admin-rule);
  border-radius: 6px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.5rem;
  background: var(--admin-bg-subtle);
}
.topics-new-title {
  font-family: var(--font-serif), Georgia, serif;
  font-size: 1rem;
  margin: 0 0 0.6rem;
  font-weight: 600;
}
.topics-list-section { margin-top: 1rem; }
.topics-list-title {
  font-family: var(--font-serif), Georgia, serif;
  font-size: 1rem;
  margin: 0 0 0.65rem;
  font-weight: 600;
}
.topics-form { display: flex; flex-direction: column; gap: 0.65rem; }
.topics-form--inline { padding: 0.85rem 1rem; background: var(--admin-bg); border: 1px solid var(--admin-rule); border-radius: 4px; }
.topics-form-row { display: flex; gap: 0.85rem; flex-wrap: wrap; }
.topics-form-row label { display: flex; flex-direction: column; flex: 1; min-width: 8rem; gap: 0.25rem; font-family: var(--font-inter), Inter, sans-serif; font-size: 0.8rem; color: var(--admin-ink-soft); }
.topics-form > label { display: flex; flex-direction: column; gap: 0.25rem; font-family: var(--font-inter), Inter, sans-serif; font-size: 0.8rem; color: var(--admin-ink-soft); }
.topics-form input,
.topics-form textarea {
  font-family: var(--font-serif), Georgia, serif;
  font-size: 0.95rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--admin-rule);
  border-radius: 3px;
  background: var(--admin-bg);
  color: var(--admin-ink);
}
.topics-form input:focus,
.topics-form textarea:focus { outline: none; border-color: var(--admin-ink-soft); box-shadow: 0 0 0 3px rgba(43,61,46,0.08); }
.topics-form-actions { display: flex; gap: 0.5rem; align-items: center; }

.topics-meaning {
  color: var(--admin-ink-muted);
  font-size: 0.85rem;
  font-weight: 400;
}
.topics-arabic {
  font-family: var(--font-naskh), 'Noto Naskh Arabic', serif;
  font-size: 1.05rem;
  color: var(--admin-ink-soft);
}
.admin-ink-muted { color: var(--admin-ink-muted); }

/* "+ Add new" CTA on the dashboard */
.admin-quick-add {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  background: var(--status-approved, #2b3d2e);
  color: var(--admin-bg, #faf7f0);
  border: 0;
  border-radius: 4px;
  font-family: var(--font-inter), Inter, sans-serif;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
}
.admin-quick-add:hover { background: #1f2d22; }

.admin-sidebar-footer {
  border-top: 1px solid var(--admin-rule, #e5dcc0);
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: var(--admin-ink-muted, #6a665e);
}
.admin-sidebar-footer-name {
  font-weight: 600;
  color: var(--admin-ink, #2b2a28);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Collapsed sidebar — narrow rail, labels hidden */
.admin-shell--split:has(.admin-sidebar--collapsed) {
  grid-template-columns: 64px 1fr;
}
.admin-sidebar--collapsed .admin-sidebar-brand-sub,
.admin-sidebar--collapsed .admin-sidebar-heading,
.admin-sidebar--collapsed .admin-sidebar-footer-name {
  display: none;
}
.admin-sidebar--collapsed .admin-sidebar-list { display: none; }
.admin-sidebar--collapsed .admin-sidebar-link { display: none; }

/* Mobile: single column, sidebar stacks above content */
@media (max-width: 880px) {
  .admin-shell--split { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--admin-rule);
  }
  .admin-sidebar-nav { padding: 0.4rem 0; }
}

.admin-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0.55rem 20px;
  min-height: 48px;
  background: var(--status-approved);
  color: var(--admin-bg);
  border-bottom: 0.5px solid rgba(0,0,0,0.18);
  font-family: var(--font-sans), 'Inter', system-ui, sans-serif;
  font-size: calc(13px * var(--admin-scale));
  position: sticky;
  top: 0;
  z-index: 50;
}
/* .admin-topbar .brand removed — brand moved to sidebar header */
.admin-topbar .spacer { flex: 1; }
.admin-topbar .ident { color: color-mix(in srgb, var(--admin-bg) 75%, transparent); }
.admin-topbar .signout {
  color: var(--admin-bg);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--admin-bg) 60%, transparent);
}
.admin-topbar .signout:hover {
  color: var(--admin-bg);
  border-bottom-color: var(--admin-bg);
}
/* .admin-topbar .topnav removed — nav moved to sidebar */

/* Review layout — opts out of admin-shell-content padding so the queue
   sidebar can hug the chrome without an awkward outer gutter. */
.admin-shell-content:has(.review-grid) {
  padding: 0;
}
.review-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: calc(100vh - 48px); /* 48px = .admin-topbar min-height */
}
@media (max-width: 1023px) {
  .review-grid { grid-template-columns: 1fr; }
  .review-grid .queue-sidebar { display: none; }
  .review-grid.drawer-open .queue-sidebar {
    display: block; position: fixed; inset: 48px 0 0 0; z-index: 20;
  }
}

.queue-sidebar {
  background: var(--admin-bg-subtle);
  border-right: 0.5px solid var(--admin-rule);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
}
.queue-sidebar .queue-head {
  padding: 14px 16px;
  border-bottom: 0.5px solid var(--admin-rule);
}
.queue-sidebar .queue-title {
  font-family: var(--font-serif), 'Source Serif 4', serif;
  font-size: calc(17px * var(--admin-scale));
  margin: 0 0 8px;
}
.queue-sidebar .filter-tabs {
  display: flex;
  gap: 4px;
  font-family: var(--font-inter), 'Inter', sans-serif;
  font-size: calc(12px * var(--admin-scale));
  flex-wrap: wrap;
}
.queue-sidebar .filter-tab {
  padding: 3px 10px;
  border-radius: 10px;
  color: var(--admin-ink-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.queue-sidebar .filter-tab .tab-count {
  color: var(--admin-ink-soft);
  font-size: 0.9em;
}
.queue-sidebar .filter-tab.active {
  color: var(--admin-ink);
}
.queue-sidebar .filter-tab.active .tab-count {
  color: var(--admin-ink-muted);
}
.queue-sidebar .filter-tab.active[data-filter="pending"]    { background: #f5e6c4; color: #7a5a18; }
.queue-sidebar .filter-tab.active[data-filter="approved"]   { background: #d6e4d7; color: #2b4e34; }
.queue-sidebar .filter-tab.active[data-filter="needs_edit"] { background: #f4d9b1; color: #7d5112; }
.queue-sidebar .filter-tab.active[data-filter="rejected"]   { background: #ebc9c0; color: #6d2e1f; }
.queue-sidebar .filter-tab.active[data-filter="pending"] .tab-count    { color: #9a7a30; }
.queue-sidebar .filter-tab.active[data-filter="approved"] .tab-count   { color: #3a6644; }
.queue-sidebar .filter-tab.active[data-filter="needs_edit"] .tab-count { color: #9d6a24; }
.queue-sidebar .filter-tab.active[data-filter="rejected"] .tab-count   { color: #8a4a3a; }
.queue-search {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 0.5px solid var(--admin-rule);
  border-radius: 4px;
  background: var(--admin-bg);
  color: var(--admin-ink);
  font-family: var(--font-inter), 'Inter', sans-serif;
  font-size: calc(13px * var(--admin-scale));
  line-height: 1.4;
  outline: none;
}
.queue-search::placeholder { color: var(--admin-ink-soft); }
.queue-search:focus { border-color: var(--accent-soft); }
.queue-progress {
  margin-top: 8px;
  font-family: var(--font-inter), 'Inter', sans-serif;
  font-size: calc(11px * var(--admin-scale));
  color: var(--admin-ink-soft);
  line-height: 1.4;
}
.queue-progress-bar-track {
  margin-top: 4px;
  height: 2px;
  background: var(--admin-rule);
  border-radius: 2px;
  overflow: hidden;
}
.queue-progress-bar {
  height: 2px;
  background: var(--status-approved);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.queue-sidebar .queue-list {
  flex: 1;
  overflow-y: auto;
}

.queue-item {
  display: block;
  padding: 10px 14px;
  border-bottom: 2px solid var(--admin-rule);
  cursor: pointer;
  border-left: 2px solid transparent;
  text-decoration: none;
  color: var(--admin-ink);
  position: relative;
}
.queue-item:hover { background: rgba(255,255,255,0.4); }
.queue-item.active {
  background: var(--admin-bg);
  border-left-color: var(--status-approved);
}
.queue-item .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.queue-item .title-en {
  font-family: var(--font-serif), 'Source Serif 4', serif;
  font-size: calc(16px * var(--admin-scale));
  line-height: 1.4;
  color: var(--admin-ink);
  margin-bottom: 2px;
}
.queue-item .title-en--fallback {
  color: var(--admin-ink-soft);
  font-style: italic;
}
.queue-item .title-ur {
  direction: rtl;
  text-align: right;
  font-family: var(--font-nastaliq), 'Noto Nastaliq Urdu', serif;
  font-size: calc(16px * var(--admin-scale));
  line-height: 1.9;
  color: var(--admin-ink);
}
.queue-item .meta {
  font-family: var(--font-inter), 'Inter', sans-serif;
  font-size: calc(10px * var(--admin-scale));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--admin-ink-soft);
  margin-top: 2px;
}

/* Detail pane */
.unit-detail {
  padding: 22px 28px 120px;
  overflow-y: auto;
  max-height: calc(100vh - 64px);
  position: relative;
}
.unit-detail .eyebrow {
  font-family: var(--font-inter), 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--admin-ink-soft);
}
/* Chip row: type + status + publication chips in a flex row */
.unit-detail .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 4px;
}
/* Reviewer attribution — ADMIN-ONLY, never used on public site */
.unit-detail .reviewer-attribution {
  font-family: var(--font-inter), 'Inter', sans-serif;
  font-size: 11px;
  color: var(--admin-ink-muted);
  margin-bottom: 6px;
}
.unit-detail h2.unit-headline {
  font-family: var(--font-serif), 'Source Serif 4', serif;
  font-weight: 400;
  font-size: calc(26px * var(--admin-scale));
  margin: 4px 0 16px;
}
.unit-detail .dirty-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--status-approved);
  margin-left: 8px;
  vertical-align: middle;
}

.bilingual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 14px;
}

/* ──────────────────────────────────────────────────────────────────────
   TipTap-based bilingual body editor (Track 2).
   Replaces BilingualPair multiline mode for body fields.
   ────────────────────────────────────────────────────────────────────── */
.bilingual-editor-block {
  margin-bottom: 1.4rem;
}
.bilingual-editor-label {
  font-family: var(--font-inter), 'Inter', sans-serif;
  font-size: calc(11px * var(--admin-scale));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--admin-ink-soft);
  margin: 0 0 6px;
}
.bilingual-editor-sub-label {
  font-family: var(--font-inter), 'Inter', sans-serif;
  font-size: calc(10px * var(--admin-scale));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--admin-ink-muted);
  margin: 0 0 4px;
  font-weight: 500;
}
.bilingual-editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.bilingual-editor-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-items: center;
  padding: 0.4rem 0.5rem;
  background: var(--admin-bg-subtle);
  border: 1px solid var(--admin-rule);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  font-family: var(--font-inter), Inter, sans-serif;
  font-size: 0.84rem;
  margin-bottom: 4px;
}
.editor-toolbar-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  color: var(--admin-ink);
  cursor: pointer;
  min-width: 1.8rem;
  text-align: center;
  font-family: inherit;
  font-size: 0.84rem;
  line-height: 1;
}
.editor-toolbar-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
}
.editor-toolbar-btn--active {
  background: rgba(43, 61, 46, 0.12);
  border-color: rgba(43, 61, 46, 0.18);
}
.editor-toolbar-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.editor-toolbar-divider {
  width: 1px;
  background: var(--admin-rule);
  align-self: stretch;
  margin: 0 0.2rem;
}

.tiptap-content {
  min-height: 180px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--admin-rule);
  border-radius: 4px;
  background: var(--accent-field-bg);
  font-family: var(--font-serif), 'Source Serif 4', Georgia, serif;
  font-size: calc(16px * var(--admin-scale));
  line-height: 1.6;
  color: var(--admin-ink);
  outline: none;
  transition: border-color 90ms ease, box-shadow 90ms ease;
}
.tiptap-content:focus,
.tiptap-content:focus-visible {
  border-color: var(--admin-ink-soft);
  box-shadow: 0 0 0 3px rgba(43, 61, 46, 0.08);
}
.tiptap-content[dir="rtl"] {
  font-family: var(--font-nastaliq), 'Noto Nastaliq Urdu', serif;
  text-align: right;
  line-height: 2.1;
}
.tiptap-content p { margin: 0 0 0.75em; }
.tiptap-content p:last-child { margin: 0; }
.tiptap-content h2 {
  font-size: calc(20px * var(--admin-scale));
  margin: 1em 0 0.5em;
  font-weight: 600;
  font-family: var(--font-serif), 'Source Serif 4', serif;
}
.tiptap-content h3 {
  font-size: calc(17px * var(--admin-scale));
  margin: 0.9em 0 0.4em;
  font-weight: 600;
  font-family: var(--font-serif), 'Source Serif 4', serif;
}
.tiptap-content blockquote {
  border-left: 3px solid var(--admin-rule);
  padding-left: 1em;
  margin: 0.75em 0;
  color: var(--admin-ink-soft);
  font-style: italic;
}
.tiptap-content[dir="rtl"] blockquote {
  border-left: 0;
  border-right: 3px solid var(--admin-rule);
  padding-left: 0;
  padding-right: 1em;
  font-style: normal;
}
.tiptap-content ul,
.tiptap-content ol {
  padding-left: 1.4em;
  margin: 0.5em 0;
}
.tiptap-content[dir="rtl"] ul,
.tiptap-content[dir="rtl"] ol {
  padding-left: 0;
  padding-right: 1.4em;
}
.tiptap-content a {
  color: var(--accent, #2b3d2e);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tiptap-content code {
  font-family: var(--font-mono), JetBrains Mono, monospace;
  background: rgba(0, 0, 0, 0.05);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-size: 0.92em;
}
.tiptap-content hr {
  border: 0;
  border-top: 1px solid var(--admin-rule);
  margin: 1.2em 0;
}

/* TipTap placeholder pattern — applied via Placeholder extension. */
.tiptap-content p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: var(--admin-ink-muted);
  pointer-events: none;
  float: left;
  height: 0;
}
.tiptap-content[dir="rtl"] p.is-editor-empty:first-child::before {
  float: right;
}

@media (max-width: 880px) {
  .bilingual-editor { grid-template-columns: 1fr; }
}
.field label {
  display: block;
  font-family: var(--font-inter), 'Inter', sans-serif;
  font-size: calc(11px * var(--admin-scale));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--admin-ink-soft);
  margin-bottom: 4px;
}
.field textarea {
  field-sizing: content;
  min-height: calc(72px * var(--admin-scale));
}
.field input, .field textarea {
  width: 100%;
  background: var(--accent-field-bg);
  border: 0.5px solid var(--admin-rule);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: calc(16px * var(--admin-scale));
  line-height: 1.5;
  font-family: var(--font-serif), 'Source Serif 4', serif;
  color: var(--admin-ink);
  resize: vertical;
}
.field.ur input, .field.ur textarea {
  direction: rtl;
  text-align: right;
  font-family: var(--font-nastaliq), 'Noto Nastaliq Urdu', serif;
  font-size: calc(17px * var(--admin-scale));
  line-height: 2;
}
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--status-approved);
  outline-offset: 2px;
}
.hint {
  display: block;
  font-family: var(--font-inter), 'Inter', sans-serif;
  font-size: calc(10px * var(--admin-scale));
  color: var(--admin-ink-muted);
  margin-top: 3px;
  letter-spacing: 0.04em;
}

/* Pill editor */
.pill-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
  background: var(--accent-field-bg);
  border: 0.5px solid var(--admin-rule);
  border-radius: 4px;
  min-height: 36px;
}
.pill-editor .pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--admin-bg-subtle);
  color: var(--admin-ink);
  border-radius: 12px;
  font-family: var(--font-inter), 'Inter', sans-serif;
  font-size: calc(13px * var(--admin-scale));
}
.pill-editor .pill .remove {
  background: transparent;
  border: 0;
  color: var(--admin-ink-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.pill-editor input {
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-inter), 'Inter', sans-serif;
  font-size: calc(12px * var(--admin-scale));
  flex: 1;
  min-width: 80px;
  padding: 4px;
}

/* Decision bar */
.decision-bar {
  position: sticky;
  bottom: 0;
  background: var(--admin-bg);
  padding: 14px 0;
  border-top: 0.5px solid var(--admin-rule);
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.decision-bar .btn {
  font-family: var(--font-inter), 'Inter', sans-serif;
  font-size: calc(13px * var(--admin-scale));
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 4px;
  border: 0.5px solid transparent;
  cursor: pointer;
}
.decision-bar .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.decision-bar .btn.approve {
  background: var(--status-approved);
  color: var(--admin-bg);
  border-color: var(--status-approved);
}
.decision-bar .btn.edit {
  background: transparent;
  color: var(--status-needs-edit);
  border-color: var(--status-needs-edit);
}
.decision-bar .btn.reject {
  background: transparent;
  color: var(--status-rejected);
  border-color: var(--status-rejected);
  margin-left: auto;
}
.decision-bar .progress {
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  background: var(--status-approved);
  animation: admin-indeterminate 1.2s linear infinite;
}
/* Top decision bar — non-sticky compact variant */
.decision-bar--top {
  position: static;
  margin: 0 0 16px;
  padding: 10px 0;
  border-top: 0;
  border-bottom: 0.5px solid var(--admin-rule);
}
.decision-bar--top .btn { padding: 6px 14px; }
.decision-bar--top .progress { bottom: auto; top: 0; }

@keyframes admin-indeterminate {
  0% { left: -30%; width: 30%; }
  100% { left: 100%; width: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .decision-bar .progress { animation: none; width: 100%; }
}

/* YouTube embed slot */
.yt-embed {
  max-width: 480px;
  width: 100%;
  margin-right: auto;
  margin-bottom: 16px;
}
.yt-embed__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}
.yt-embed iframe { width: 100%; height: 100%; border: 0; }

/* Source metadata fallback */
.source-meta {
  font-family: var(--font-mono), 'JetBrains Mono', ui-monospace, monospace;
  font-size: calc(11px * var(--admin-scale));
  color: var(--admin-ink-soft);
  background: var(--admin-bg-subtle);
  padding: 8px 10px;
  border-radius: 4px;
  margin-bottom: 16px;
}

/* Inline error */
.inline-error {
  background: #fdf3e6;
  border: 0.5px solid #e3c89a;
  color: #7a5520;
  padding: 10px 12px;
  border-radius: 4px;
  font-family: var(--font-inter), 'Inter', sans-serif;
  font-size: 13px;
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.inline-error button {
  margin-left: auto;
  background: transparent;
  border: 0.5px solid #c8a86b;
  color: #7a5520;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}

/* Modal */
.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(40, 36, 30, 0.5);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-modal {
  background: var(--admin-bg);
  border: 0.5px solid var(--admin-rule);
  border-radius: 8px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-modal h3 {
  font-family: var(--font-serif), 'Source Serif 4', serif;
  font-weight: 500;
  margin: 0;
  font-size: 18px;
}
.admin-modal textarea {
  flex: 1;
  min-height: 300px;
  font-family: var(--font-mono), 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 10px;
  border: 0.5px solid var(--admin-rule);
  border-radius: 4px;
  background: var(--accent-field-bg);
  resize: vertical;
}
.admin-modal .modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Structural fields accordion */
.structural {
  margin: 16px 0;
  border-top: 0.5px solid var(--admin-rule);
  padding-top: 14px;
}
.structural summary {
  font-family: var(--font-inter), 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--admin-ink-muted);
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
}
.structural summary::before { content: '▸ '; display: inline-block; transition: transform 180ms; }
.structural[open] summary::before { transform: rotate(90deg); }
.structural .structural-body {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.structural .warning {
  font-family: var(--font-inter), 'Inter', sans-serif;
  font-size: 11px;
  color: var(--status-needs-edit);
  margin-top: 4px;
}

/* Font-variable overrides for admin component classes */
.admin-topbar, .filter-tab, .queue-item .meta, .field label, .pill-editor, .decision-bar .btn, .inline-error, .structural summary {
  font-family: var(--font-inter), 'Inter', system-ui, sans-serif;
}
.queue-item .title-ur, .field.ur input, .field.ur textarea {
  font-family: var(--font-nastaliq), 'Noto Nastaliq Urdu', serif;
}
.source-meta, .admin-modal textarea {
  font-family: var(--font-mono), 'JetBrains Mono', ui-monospace, monospace;
}

/* ========================================================================
   ADMIN LOGIN PAGE
   ======================================================================== */

.admin-login-wrapper {
  min-height: 100vh;
  background: var(--admin-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.admin-login-card {
  background: var(--accent-field-bg);
  border: 0.5px solid var(--admin-rule);
  border-radius: 10px;
  padding: 32px 28px;
  max-width: 360px;
  width: 100%;
  font-family: var(--font-inter), 'Inter', system-ui, sans-serif;
}
.admin-login-card .brand {
  font-family: var(--font-serif), 'Source Serif 4', serif;
  font-size: 15px;
  color: var(--admin-ink-muted);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.admin-login-card h1 {
  font-family: var(--font-serif), 'Source Serif 4', serif;
  font-weight: 400;
  font-size: 26px;
  margin: 0 0 20px;
  color: var(--admin-ink);
}
.admin-login-card label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--admin-ink-soft);
  margin-bottom: 14px;
}
.admin-login-card input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  font-family: var(--font-inter), sans-serif;
  font-size: 14px;
  color: var(--admin-ink);
  background: #fff;
  border: 0.5px solid var(--admin-rule);
  border-radius: 4px;
}
.admin-login-card input:focus {
  outline: 2px solid var(--status-approved);
  outline-offset: 2px;
}
.admin-login-card button {
  margin-top: 8px;
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-inter), sans-serif;
  font-size: 13px;
  font-weight: 500;
  background: var(--status-approved);
  color: var(--admin-bg);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.admin-login-card .inline-error { margin-bottom: 14px; }

/* ========================================================================
   ADMIN CHIP PRIMITIVES
   ======================================================================== */

.admin-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 10px;
  font-family: var(--font-inter), 'Inter', system-ui, sans-serif;
  font-size: calc(11px * var(--admin-scale));
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
}

.admin-chip--sm {
  padding: 2px 8px;
  font-size: calc(10px * var(--admin-scale));
}

/* Type chips */
.admin-chip--type-qa       { background: var(--admin-t-qa-bg);       color: var(--admin-t-qa); }
.admin-chip--type-teaching { background: var(--admin-t-teaching-bg); color: var(--admin-t-teaching); }
.admin-chip--type-story    { background: var(--admin-t-story-bg);    color: var(--admin-t-story); }
.admin-chip--type-practice { background: var(--admin-t-practice-bg); color: var(--admin-t-practice); }
.admin-chip--type-quote    { background: var(--admin-t-quote-bg);    color: var(--admin-t-quote); }
.admin-chip--type-dua      { background: var(--admin-t-dua-bg);      color: var(--admin-t-dua); }
.admin-chip--type-hikmah   { background: var(--admin-t-hikmah-bg);   color: var(--admin-t-hikmah); }

/* Status chips */
.admin-chip--status-pending    { background: #f5e6c4; color: #7a5a18; }
.admin-chip--status-approved   { background: #d6e4d7; color: #2b4e34; }
.admin-chip--status-needs_edit { background: #f4d9b1; color: #7d5112; }
.admin-chip--status-rejected   { background: #ebc9c0; color: #6d2e1f; }

/* Publication chips */
.admin-chip--pub-public { background: #d5e4d8; color: #2a4a32; }
.admin-chip--pub-hidden { background: #e8dcd8; color: #6d4a3d; }

/* ========================================================================
   SCALE PICKER (top bar segmented control)
   ======================================================================== */

.scale-picker {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 0.5px solid rgba(250,247,240,0.30);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.scale-picker__btn {
  padding: 3px 9px;
  background: transparent;
  border: 0;
  border-right: 0.5px solid rgba(250,247,240,0.20);
  font-family: var(--font-inter), 'Inter', system-ui, sans-serif;
  font-size: 11px;
  color: color-mix(in srgb, var(--admin-bg) 70%, transparent);
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.scale-picker__btn:last-child { border-right: 0; }
.scale-picker__btn:hover { background: rgba(250,247,240,0.10); color: var(--admin-bg); }
.scale-picker__btn--active {
  background: var(--admin-bg);
  color: var(--status-approved);
}
.scale-picker__btn--active:hover {
  background: var(--admin-bg);
  color: var(--status-approved);
}

/* ========================================================================
   SHORTCUT TOGGLE (top bar)
   ======================================================================== */

.shortcut-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.shortcut-toggle__chip {
  padding: 3px 9px;
  border-radius: 6px;
  border: 0.5px solid rgba(250,247,240,0.30);
  background: transparent;
  font-family: var(--font-inter), 'Inter', system-ui, sans-serif;
  font-size: 11px;
  color: color-mix(in srgb, var(--admin-bg) 70%, transparent);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  line-height: 1.4;
}
.shortcut-toggle__chip:hover { background: rgba(250,247,240,0.10); color: var(--admin-bg); }
.shortcut-toggle__chip--on {
  background: var(--admin-bg);
  color: var(--status-approved);
  border-color: var(--admin-bg);
}
.shortcut-toggle__chip--on:hover {
  background: var(--admin-bg);
  border-color: var(--admin-bg);
  color: var(--status-approved);
}

.shortcut-toggle__help {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 0.5px solid rgba(250,247,240,0.30);
  background: transparent;
  font-family: var(--font-inter), 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--admin-bg) 70%, transparent);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1;
}
.shortcut-toggle__help:hover {
  background: rgba(250,247,240,0.10);
  color: var(--admin-bg);
}

/* ========================================================================
   SHORTCUT LEGEND MODAL
   ======================================================================== */

.shortcut-legend__note {
  font-family: var(--font-inter), 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: var(--admin-ink-muted);
  line-height: 1.5;
  margin: 0;
}
.shortcut-legend__note strong { color: var(--admin-ink); }

.shortcut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shortcut-legend__row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-inter), 'Inter', system-ui, sans-serif;
  font-size: 13px;
}

.shortcut-legend__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 3px 8px;
  background: var(--admin-bg-subtle);
  border: 0.5px solid var(--admin-rule);
  border-radius: 4px;
  font-family: var(--font-mono), 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--admin-ink);
  flex-shrink: 0;
}

.shortcut-legend__desc {
  color: var(--admin-ink);
  flex: 1;
}

.shortcut-legend__badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 8px;
  background: #f5e6c4;
  color: #7a5a18;
  font-weight: 500;
  flex-shrink: 0;
}

.modal-btn {
  padding: 7px 16px;
  border-radius: 4px;
  border: 0.5px solid var(--admin-rule);
  font-family: var(--font-inter), 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  color: var(--admin-ink);
  transition: background 0.15s ease;
}
.modal-btn:hover { background: var(--admin-bg-subtle); }
.modal-btn--primary {
  background: var(--admin-ink);
  color: var(--admin-bg);
  border-color: var(--admin-ink);
}
.modal-btn--primary:hover { background: var(--admin-ink-soft); border-color: var(--admin-ink-soft); }

/* ========================================================================
   SOURCES PAGE
   ======================================================================== */

.sources-page {
  padding: 32px 28px 80px;
  max-width: 960px;
  margin: 0 auto;
}
.sources-page h1 {
  font-family: var(--font-serif), 'Source Serif 4', serif;
  font-size: calc(28px * var(--admin-scale));
  font-weight: 400;
  margin: 0 0 6px;
}
.sources-page .page-sub {
  color: var(--admin-ink-muted);
  font-family: var(--font-inter), sans-serif;
  font-size: calc(13px * var(--admin-scale));
  margin: 0 0 28px;
}
.sources-page .empty-sources {
  color: var(--admin-ink-muted);
  font-family: var(--font-inter), sans-serif;
  font-size: calc(14px * var(--admin-scale));
  text-align: center;
  margin-top: 60px;
  line-height: 1.6;
}
.source-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  background: #fff;
  border: 0.5px solid var(--admin-rule);
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 16px;
}
.source-card .thumb {
  width: 160px;
  height: 90px;
  background: var(--admin-bg-subtle);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.source-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.source-card .thumb .no-thumb {
  font-family: var(--font-mono), monospace;
  font-size: 10px;
  color: var(--admin-ink-soft);
  text-align: center;
  padding: 6px;
  word-break: break-all;
}
.source-card .source-name {
  font-family: var(--font-mono), monospace;
  font-size: calc(13px * var(--admin-scale));
  color: var(--admin-ink);
  margin-bottom: 4px;
  word-break: break-all;
}
.source-card .source-info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-inter), sans-serif;
  font-size: calc(12px * var(--admin-scale));
  color: var(--admin-ink-muted);
  margin-bottom: 10px;
}
.source-card .source-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  align-items: center;
}
.source-card .source-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.source-card .source-open {
  display: inline-block;
  color: var(--status-approved);
  font-family: var(--font-inter), sans-serif;
  font-size: calc(13px * var(--admin-scale));
  font-weight: 500;
  text-decoration: none;
}
.source-card .source-open:hover { text-decoration: underline; }

/* ========================================================================
   Entry detail page — /q/[slug]
   ======================================================================== */

.entry-article { max-width: 840px; margin: 0 auto; padding: 32px 28px 80px; }
.entry-article .entry-eyebrow { font-family: var(--font-inter), sans-serif; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--admin-ink-muted); margin-bottom: 6px; }
.entry-article h1 { font-family: var(--font-serif), serif; font-weight: 400; font-size: 34px; line-height: 1.25; margin: 0 0 10px; }
.entry-article .title-ur { font-family: var(--font-nastaliq), serif; font-size: 22px; line-height: 1.8; direction: rtl; margin: 0 0 24px; color: var(--admin-ink-muted); }
.entry-bilingual { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 24px 0; }
.entry-bilingual > div { font-size: 17px; line-height: 1.65; }
.entry-bilingual > div[dir='rtl'] { font-family: var(--font-nastaliq), serif; font-size: 18px; line-height: 2.0; }
.entry-bilingual p { margin: 0 0 1em; }
@media (max-width: 768px) {
  .entry-bilingual { grid-template-columns: 1fr; gap: 20px; }
}
.entry-summary { background: #faf7f0; border-left: 2px solid var(--status-approved); padding: 14px 18px; margin: 24px 0; font-style: italic; }
.entry-refs { margin: 24px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.entry-refs dl { margin: 0; font-family: var(--font-inter), sans-serif; font-size: 14px; }
.entry-refs dt { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--admin-ink-soft); margin-bottom: 4px; }
.entry-refs dd { margin: 0 0 3px; }
.entry-source { color: var(--admin-ink-muted); font-family: var(--font-mono), monospace; font-size: 12px; margin: 18px 0; }
.topic-chip-inline { color: var(--accent); text-decoration: none; font-family: var(--font-inter), sans-serif; }
.topic-chip-inline:hover { text-decoration: underline; }

/* ========================================================================
   Topic listing page — /topic/[slug]
   ======================================================================== */

.topic-page { max-width: 960px; margin: 0 auto; padding: 32px 28px 80px; }
.topic-page .topic-head { margin-bottom: 28px; }
.topic-page .topic-head h1 { font-family: var(--font-serif), serif; font-weight: 400; font-size: 30px; margin: 0 0 4px; }
.topic-page .topic-head .arabic { font-family: var(--font-nastaliq), serif; direction: rtl; font-size: 18px; color: var(--admin-ink-muted); }
.topic-page .topic-head .meaning { color: var(--admin-ink-muted); font-family: var(--font-inter), sans-serif; font-size: 14px; margin-top: 6px; }
.topic-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.topic-units a { display: block; padding: 16px; border: 0.5px solid var(--admin-rule); border-radius: 6px; background: #fff; text-decoration: none; color: inherit; }
.topic-units a:hover { border-color: var(--status-approved); }
.topic-units .title-en { font-family: var(--font-serif), serif; font-size: 17px; margin-bottom: 4px; }
.topic-units .title-ur { font-family: var(--font-nastaliq), serif; direction: rtl; font-size: 15px; color: var(--admin-ink-muted); }

/* ========================================================================
   ASK PAGE — /ask
   ======================================================================== */

.ask-page {
  padding: clamp(3.25rem, 7.8vw, 5.2rem) 0 clamp(4rem, 10.4vw, 6.5rem);
}

.ask-article {
  max-width: 720px;
  margin: 0 auto;
}

/* Title */
.ask-title {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 60, 'wght' 500;
  font-size: clamp(2.1rem, 5vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 1.1rem;
}

/* Lede paragraph */
.ask-lede {
  font-family: var(--font-serif), serif;
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 0.25rem;
}

/* Ornament spacing on this page */
.ask-article .ornament {
  margin: 1.75rem 0;
}

/* Form container */
.ask-form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* Error banner */
.ask-error-banner {
  padding: 0.85rem 1.1rem;
  background: #fdf0ec;
  border: 0.5px solid #e0b0a0;
  border-radius: 4px;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--status-rejected);
}

/* Field wrapper */
.ask-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Label */
.ask-label {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.ask-label-optional {
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 0.7rem;
  color: var(--ink-faint);
}

/* Textarea */
.ask-textarea {
  width: 100%;
  min-height: 180px;
  padding: 0.85rem 1rem;
  font-family: var(--font-serif), serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--admin-bg-subtle);
  border: 0.5px solid var(--admin-rule);
  border-radius: 5px;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ask-textarea:focus {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.25);
}
.ask-textarea::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}
.ask-textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Field hint text */
.ask-field-hint {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.72rem;
  color: var(--ink-faint);
  line-height: 1.4;
  margin: 0;
}

/* Anonymous row */
.ask-anonymous-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.ask-anonymous-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.8rem;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}

.ask-checkbox {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.ask-anonymous-hint {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.72rem;
  color: var(--ink-faint);
  line-height: 1.4;
}

/* Side-by-side fields row */
.ask-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 540px) {
  .ask-fields-row {
    grid-template-columns: 1fr;
  }
}

/* Text input */
.ask-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--admin-bg-subtle);
  border: 0.5px solid var(--admin-rule);
  border-radius: 5px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ask-input:focus {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.25);
}
.ask-input::placeholder {
  color: var(--ink-faint);
}
.ask-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--paper-deep);
}

/* Submit row */
.ask-submit-row {
  display: flex;
  align-items: center;
}

/* Submit button */
.ask-submit-btn {
  padding: 0.65rem 1.4rem;
  background: var(--accent-deep);
  color: #F5EDD8;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.2s ease, transform 0.1s ease;
}
.ask-submit-btn:hover:not(:disabled) {
  background: var(--ink);
}
.ask-submit-btn:active:not(:disabled) {
  transform: scale(0.98);
}
.ask-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  .ask-submit-btn { transition: none; }
}

/* Success panel */
.ask-success {
  background: var(--paper-warm);
  border: 0.5px solid var(--rule-soft);
  border-radius: 6px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  outline: none;
}

.ask-success-title {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 36, 'wght' 500;
  font-size: clamp(1.6rem, 4vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 0.85rem;
}

.ask-success-body {
  font-family: var(--font-serif), serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 1rem;
}

.ask-success-ref {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin: 0 0 1.4rem;
  letter-spacing: 0.02em;
}

.ask-success-id {
  font-family: var(--font-mono), 'Courier New', monospace;
  font-size: 0.78rem;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
}

.ask-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.ask-reset-link {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-color: var(--accent-light);
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.ask-reset-link:hover { color: var(--ink); text-decoration-color: var(--rule); }

.ask-home-link {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.875rem;
  color: var(--ink-faint);
  text-decoration: underline;
  text-decoration-color: var(--rule-soft);
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.ask-home-link:hover { color: var(--ink-soft); }

/* ========================================================================
   ABOUT
   ======================================================================== */

.about-page {
  padding: clamp(3.25rem, 7.8vw, 5.2rem) 0 clamp(4rem, 10.4vw, 6.5rem);
}

.about-header {
  max-width: 720px;
  margin: 0 auto 0;
}

.about-header h1 {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 60, 'wght' 500;
  font-size: clamp(2.1rem, 5vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 1rem;
}

.about-lede {
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 0 0.25rem;
}

.about-body {
  max-width: 720px;
  margin: 0 auto;
}

.about-section {
  margin: 0 0 0.5rem;
}

.about-kicker {
  display: block;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.55rem;
  margin-top: 2.25rem;
}

.about-section h2 {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 48, 'wght' 500;
  font-size: clamp(1.4rem, 3.5vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 1.1rem;
}

.about-section p {
  font-size: clamp(0.98rem, 2vw, 1.05rem);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 66ch;
  margin: 0 0 1.1rem;
}

/* Drop cap on the first paragraph of each section */
.about-section p:first-of-type::first-letter {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 144, 'wght' 600;
  font-size: 3.5rem;
  line-height: 0.86;
  float: left;
  padding: 0.1rem 0.45rem 0 0;
  color: var(--accent);
}

.about-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-light);
  transition: color 0.2s ease;
}
.about-link:hover { color: var(--accent-deep); }

/* ========================================================================
   YESTERDAY
   ======================================================================== */

.yesterday-page {
  padding: clamp(4rem, 10.4vw, 6.5rem) 0;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.yesterday-page h1 {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 72, 'wght' 500;
  font-size: clamp(2rem, 5vw, 2.6rem);
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 0.85rem;
}

.yesterday-sub {
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-muted);
  line-height: 1.6;
  margin: 0 0 2rem;
}

.yesterday-links {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
}

.yesterday-link {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-light);
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.yesterday-link:hover { color: var(--accent-deep); }

/* ========================================================================
   ENTRIES (master archive)
   ======================================================================== */

.entries-page {
  padding: clamp(2.6rem, 6.5vw, 4.5rem) 0 clamp(4rem, 7.8vw, 5.85rem);
}

.entries-page-header {
  margin-bottom: 2rem;
}

.entries-page-header h1 {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 60, 'wght' 500;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 0.4rem;
}

.entries-page-sub {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.82rem;
  color: var(--ink-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0;
}

/* Two-column layout: sidebar + content */
.entries-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 800px) {
  .entries-layout {
    grid-template-columns: 13rem 1fr;
    gap: 3rem;
    align-items: start;
  }
}

/* Filter bar (sidebar on desktop, horizontal on mobile) */
.entries-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
@media (min-width: 800px) {
  .entries-filter-bar {
    flex-direction: column;
    gap: 0.25rem;
  }
}

.entries-filter-btn {
  padding: 0.5rem 0.9rem;
  border: 0.5px solid var(--rule-soft);
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  text-align: left;
  white-space: nowrap;
  min-height: 36px;
}
.entries-filter-btn:hover {
  background: var(--tint);
  border-color: var(--accent-light);
  color: var(--ink);
}
.entries-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper-light);
  font-weight: 600;
}

/* Entry list */
.entries-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entries-index-row {
  border-bottom: 0.5px solid var(--rule-soft);
}

.entries-index-link {
  display: block;
  padding: 1.1rem 0.5rem;
  border-radius: var(--r-small);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease, padding 0.2s ease;
}
.entries-index-link:hover {
  background: var(--paper-light);
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

.entries-index-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}

.entries-index-date {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.74rem;
  color: var(--ink-faint);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.entries-index-titles {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.65rem;
}

.entries-index-title-en {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 48, 'wght' 500;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.012em;
}

.entries-index-title-ur {
  font-family: var(--font-nastaliq), serif;
  font-size: 0.95rem;
  color: var(--ink-muted);
  direction: rtl;
  line-height: 2;
}

.entries-index-teaser {
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: 1.5;
  max-width: 70ch;
  margin: 0.3rem 0 0;
}

/* Pagination */
.entries-pagination {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 0.5px solid var(--rule-soft);
  flex-wrap: wrap;
}

.entries-page-btn {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 0.55rem 1rem;
  border: 0.5px solid var(--accent-light);
  border-radius: var(--r-pill);
  transition: background 0.2s ease, color 0.2s ease;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.entries-page-btn:hover {
  background: var(--tint);
  color: var(--accent-deep);
}

.entries-page-counter {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.8rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.entries-empty {
  padding: 3rem 0;
  color: var(--ink-muted);
}
.entries-empty a {
  color: var(--accent);
  text-decoration: underline;
}

/* ========================================================================
   TOPICS INDEX
   ======================================================================== */

.topics-index-page {
  padding: clamp(2.6rem, 6.5vw, 4.5rem) 0 clamp(4rem, 7.8vw, 5.85rem);
}

.topics-index-header {
  margin-bottom: 2rem;
}

.topics-index-header h1 {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 60, 'wght' 500;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 0.55rem;
}

.topics-index-sub {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 1rem;
  color: var(--ink-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0;
}

.topics-index-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 600px) {
  .topics-index-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.topics-index-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--paper-light);
  border: 0.5px solid var(--rule);
  border-radius: var(--r-small);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  min-height: 10rem;
}
.topics-index-card:hover {
  background: var(--tint);
  border-color: var(--accent-soft);
  transform: translateY(-2px);
}

.topics-index-arabic {
  font-family: var(--font-nastaliq), serif;
  font-size: 2.5rem;
  color: var(--accent);
  line-height: 1.4;
  text-align: center;
  margin-bottom: 0.6rem;
  direction: rtl;
  /* Reserve the slot height even when empty, so cards align in the grid. */
  min-height: 3.5rem;
}
/* Empty Arabic slot — invisible but the height is preserved. */
.topics-index-arabic--empty {
  visibility: hidden;
}

.topics-index-english {
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-variation-settings: 'opsz' 36, 'wght' 500;
  font-size: 1.45rem;
  color: var(--ink);
  letter-spacing: -0.012em;
  text-align: center;
}

.topics-index-meaning {
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-muted);
  text-align: center;
  margin-top: 0.25rem;
  line-height: 1.45;
}

.topics-index-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 0.5px solid var(--rule-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.06em;
}

.topics-index-arrow {
  transition: transform 0.2s ease;
  font-size: 1.1rem;
  color: var(--accent-soft);
}
.topics-index-card:hover .topics-index-arrow {
  transform: translateX(3px);
}

.topics-index-empty {
  padding: 3rem 0;
  color: var(--ink-muted);
  font-style: italic;
}

/* ========================================================================
   PRACTICES ARCHIVE
   ======================================================================== */

.practices-page {
  padding: clamp(2.6rem, 6.5vw, 4.5rem) 0 clamp(4rem, 7.8vw, 5.85rem);
}

.practices-header {
  margin-bottom: 2.5rem;
}

.practices-header h1 {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 60, 'wght' 500;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 0.4rem;
}

.practices-sub {
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.5;
}

.practices-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 680px;
}

.practice-archive-card {
  background: var(--paper-light);
  border: 0.5px solid var(--rule);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.practice-archive-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.practice-archive-entry-label {
  font-family: var(--font-mono), 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
}

.practice-archive-title {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 48, 'wght' 500;
  font-size: clamp(1.2rem, 2.8vw, 1.4rem);
  line-height: 1.22;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0;
}

.practice-archive-title-ur {
  font-family: var(--font-nastaliq), serif;
  font-size: 1rem;
  color: var(--ink-muted);
  line-height: 2;
  direction: rtl;
  text-align: right;
}

.practice-archive-excerpt {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  max-width: 62ch;
}

.practice-archive-steps ol {
  margin: 0;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.practice-archive-steps-more {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.practice-archive-steps-more:hover { color: var(--accent-deep); text-decoration: underline; }

.practice-archive-struct-meta {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-family: var(--font-mono), 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

.practice-archive-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--ink-faint);
}

.practice-archive-read {
  align-self: flex-start;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--t-practice);
  text-decoration: none;
  margin-top: 0.25rem;
  transition: color 0.2s ease;
}
.practice-archive-read:hover { color: var(--ink); text-decoration: underline; }

.practices-empty {
  padding: 3rem 0;
  color: var(--ink-muted);
  font-style: italic;
}
.practices-empty a { color: var(--accent); text-decoration: underline; }

/* ========================================================================
   STORIES ARCHIVE
   ======================================================================== */

.stories-page {
  padding: clamp(2.6rem, 6.5vw, 4.5rem) 0 clamp(4rem, 7.8vw, 5.85rem);
}

.stories-header {
  margin-bottom: 2.5rem;
}

.stories-header h1 {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 60, 'wght' 500;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 0.4rem;
}

.stories-sub {
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.5;
}

.stories-list {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.stories-rule {
  border: none;
  border-top: 0.5px solid var(--rule-soft);
  margin: 3rem 0;
}

.stories-card {
  padding: 0;
}

.stories-card-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.stories-entry-label {
  font-family: var(--font-mono), 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
}

.stories-card-title {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 72, 'wght' 500;
  font-size: clamp(1.5rem, 4vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.65rem;
}

.stories-card-title-ur {
  font-family: var(--font-nastaliq), serif;
  font-size: 1.1rem;
  color: var(--ink-muted);
  line-height: 2;
  direction: rtl;
  text-align: right;
  margin-bottom: 1rem;
}

/* Drop cap on story opener */
.stories-card-opener {
  font-family: var(--font-serif), serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 65ch;
  margin: 0 0 1rem;
}
.stories-card-opener::first-letter {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 144, 'wght' 700;
  font-size: 4rem;
  line-height: 0.88;
  float: left;
  padding: 0.12rem 0.45rem 0 0;
  color: var(--t-story);
}

.stories-card-meta-line {
  font-family: var(--font-mono), 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.74rem;
  color: var(--ink-muted);
  margin: 0 0 0.5rem;
  letter-spacing: 0.04em;
}

.stories-meta-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--ink-faint);
  font-size: 0.68rem;
}

/* Moral block: left sage border, italic serif */
.stories-moral {
  border-left: 3px solid var(--accent-soft);
  margin: 1rem 0;
  padding: 0.65rem 1rem;
  background: var(--tint);
  border-radius: 0 var(--r-small) var(--r-small) 0;
}
.stories-moral p {
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--accent-deep);
  margin: 0;
  max-width: 60ch;
}

.stories-card-read {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--t-story);
  text-decoration: none;
  transition: color 0.2s ease;
}
.stories-card-read:hover { color: var(--ink); text-decoration: underline; }

.stories-empty {
  padding: 3rem 0;
  color: var(--ink-muted);
  font-style: italic;
}
.stories-empty a { color: var(--accent); text-decoration: underline; }

/* ========================================================================
   HIKMAH ARCHIVE
   ======================================================================== */

.hikmah-page {
  padding: clamp(2.6rem, 6.5vw, 4.5rem) 0 clamp(4rem, 7.8vw, 5.85rem);
}

.hikmah-page-header {
  text-align: center;
  margin-bottom: 3rem;
}

.hikmah-page-header h1 {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 60, 'wght' 500;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 0.4rem;
}

.hikmah-page-sub {
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.5;
}

.hikmah-page-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 560px;
  margin: 0 auto;
}

.hikmah-page-ornament {
  display: block;
  text-align: center;
  color: var(--accent-light);
  font-size: 1.2rem;
  line-height: 1;
  margin: 2.5rem auto;
}

.hikmah-page-card {
  display: block;
  width: 100%;
  text-align: center;
  padding: 2rem 1.5rem;
  text-decoration: none;
  color: inherit;
  border: 0.5px solid var(--rule-soft);
  border-radius: var(--r-small);
  background: var(--paper-light);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.hikmah-page-card:hover {
  background: var(--t-hikmah-bg);
  border-color: var(--accent-light);
  transform: translateY(-2px);
}

.hikmah-page-title {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 48, 'wght' 500;
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 0.85rem;
}

.hikmah-page-title--ur {
  font-family: var(--font-nastaliq), serif;
  font-size: 1.4rem;
  line-height: 1.9;
  direction: rtl;
  text-align: center;
}

.hikmah-page-quote {
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-variation-settings: 'opsz' 48, 'wght' 400;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 auto 1rem;
}

.hikmah-page-entry-label {
  font-family: var(--font-mono), 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  margin-top: 0.75rem;
}

.hikmah-page-empty {
  padding: 3rem 0;
  text-align: center;
  color: var(--ink-muted);
  font-style: italic;
}
.hikmah-page-empty a { color: var(--accent); text-decoration: underline; }

/* ====================================================================
   ERROR / NOT FOUND / LOADING
   ==================================================================== */

/* Loading bar — thin 2px sage progress bar at top of page */
.public-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-soft);
  z-index: 9999;
  overflow: hidden;
}
.public-loading-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  animation: public-indeterminate 1.4s ease-in-out infinite;
}
@keyframes public-indeterminate {
  0%   { left: -35%; width: 35%; }
  100% { left: 100%; width: 35%; }
}
@media (prefers-reduced-motion: reduce) {
  .public-loading-bar::after { animation: none; width: 100%; }
}

.public-loading-label {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono), 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  color: var(--ink-faint);
  letter-spacing: 0.12em;
  text-transform: lowercase;
}

/* Error page */
.public-error-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 8vw, 6rem) clamp(1rem, 4vw, 2.5rem);
  background: var(--paper);
}
.public-error-inner {
  max-width: 44ch;
  text-align: center;
}
.public-error-inner h1 {
  font-family: var(--font-serif), 'Source Serif 4', serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 1rem;
}
.public-error-inner p {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.95rem;
  color: var(--ink-muted);
  line-height: 1.6;
  margin: 0 0 2rem;
}
.public-error-btn {
  display: inline-block;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  border: 0.5px solid var(--accent-soft);
  border-radius: var(--r-pill);
  padding: 0.6rem 1.4rem;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.public-error-btn:hover {
  background: var(--highlight);
  color: var(--accent-deep);
}

/* Not-found page body text (used in section) */
.not-found-section {
  padding: 4rem 0;
  max-width: var(--read-max);
  margin: 0 auto;
  text-align: center;
}
.not-found-section h1 {
  font-family: var(--font-serif), 'Source Serif 4', serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 1rem;
}
.not-found-section p {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.95rem;
  color: var(--ink-muted);
  line-height: 1.65;
  margin: 0 0 0.5rem;
}
.not-found-section .not-found-links {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 1.75rem;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.85rem;
}
.not-found-section .not-found-links a {
  color: var(--accent);
  border-bottom: 0.5px solid var(--accent-light);
  text-decoration: none;
}
.not-found-section .not-found-links a:hover {
  border-bottom-color: var(--accent);
}

/* ========================================================================
   SEARCH
   ======================================================================== */

.search-page {
  padding: clamp(2.6rem, 6.5vw, 4.5rem) 0 clamp(4rem, 7.8vw, 5.85rem);
}

.search-page-header {
  margin-bottom: 1.5rem;
}

.search-page-header h1 {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 60, 'wght' 500;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 0.4rem;
}

.search-page-sub {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.82rem;
  color: var(--ink-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0;
}

/* Search input on the /search page — same .search-field base, overrides for
   standalone (non-hero) context: warm cream bg, sage focus ring. */
.search-page-box {
  margin-bottom: 2rem;
}

.search-page-field {
  /* Override the hero's box-shadow with a page-appropriate treatment */
  background: var(--paper-warm);
  border: 1.5px solid var(--rule);
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-page-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.28);
}

/* Result count line */
.search-result-count {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.82rem;
  color: var(--ink-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 1.5rem;
}

/* Empty-query state */
.search-empty-state {
  margin-top: 0.5rem;
}

.search-empty-prompt {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin: 0 0 1rem;
}

.search-empty-hint {
  font-style: italic;
  color: var(--ink-soft);
}

/* Topic chips (empty-query suggestions and empty-results fallback) */
.search-topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.search-chip {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent);
  background: var(--tint);
  border: 0.5px solid var(--accent-light);
  border-radius: var(--r-pill);
  padding: 0.35rem 0.85rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  letter-spacing: 0.02em;
}
.search-chip:hover {
  background: var(--highlight);
  color: var(--accent-deep);
}

/* Empty-results state */
.search-no-results {
  padding: 2.5rem 0 1rem;
  color: var(--ink-muted);
}

.search-no-results p {
  font-family: var(--font-serif), serif;
  font-size: 1.05rem;
  margin: 0 0 0.4rem;
}

.search-no-results-tip {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.88rem;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}

/* Inline fetch error */
.search-error {
  padding: 2rem 0;
  color: var(--ink-muted);
}

.search-error p {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
}

.search-retry {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.88rem;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}

/* ========================================================================
   SUBMISSIONS
   ======================================================================== */

.submissions-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.submissions-header {
  margin-bottom: 20px;
}

.submissions-title {
  font-family: var(--font-serif), 'Source Serif 4', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--admin-ink);
  margin: 0;
}

.submissions-filter-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.submission-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 13px;
  color: var(--admin-ink-muted);
  transition: background 0.1s, color 0.1s;
}

.submission-filter-tab .tab-count {
  color: var(--admin-ink-soft);
  font-size: 11px;
}

.submission-filter-tab:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--admin-ink);
}

.submission-filter-tab.active {
  color: var(--admin-ink);
}

.submission-filter-tab.active .tab-count {
  color: var(--admin-ink-muted);
}

.submission-filter-tab.active[data-filter="pending"]  { background: #f5e6c4; color: #7a5a18; }
.submission-filter-tab.active[data-filter="approved"] { background: #d6e4d7; color: #2b4e34; }
.submission-filter-tab.active[data-filter="rejected"] { background: #ebc9c0; color: #6d2e1f; }
.submission-filter-tab.active[data-filter="answered"] { background: #dee4ef; color: #2e3e62; }
.submission-filter-tab.active[data-filter="all"]      { background: var(--admin-bg-subtle); color: var(--admin-ink); }

.submission-filter-tab.active[data-filter="pending"] .tab-count  { color: #9a7a30; }
.submission-filter-tab.active[data-filter="approved"] .tab-count { color: #3a6644; }
.submission-filter-tab.active[data-filter="rejected"] .tab-count { color: #8a4a3a; }
.submission-filter-tab.active[data-filter="answered"] .tab-count { color: #3a4e72; }

.submissions-empty {
  padding: 48px 0;
  text-align: center;
  color: var(--admin-ink-muted);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 15px;
}

.submissions-empty p {
  margin: 0 0 12px;
}

.submissions-empty-link {
  color: var(--accent);
  text-decoration: underline;
  font-size: 14px;
}

.submissions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 0.5px solid var(--admin-rule);
}

.submission-row {
  border-bottom: 0.5px solid var(--admin-rule);
}

.submission-row-inner {
  display: block;
  padding: 14px 12px;
  text-decoration: none;
  color: inherit;
  transition: background 0.1s;
}

.submission-row-inner:hover {
  background: rgba(255, 252, 240, 0.7);
}

.submission-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.submission-row-submitter {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 13px;
  color: var(--admin-ink-muted);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.submission-row-time {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 12px;
  color: var(--admin-ink-soft);
  white-space: nowrap;
}

.submission-row-preview {
  font-family: var(--font-serif), 'Source Serif 4', serif;
  font-size: 15px;
  color: var(--admin-ink);
  line-height: 1.55;
  margin: 0 0 4px;
}

.submission-row-source {
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  color: var(--admin-ink-soft);
}

/* Status chip for "answered" (not in the base set) */
.admin-chip--status-answered { background: #dee4ef; color: #2e3e62; }

/* ========================================================================
   SUBMISSIONS DETAIL
   ======================================================================== */

.submission-detail {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.submission-back {
  display: inline-block;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 13px;
  color: var(--admin-ink-muted);
  text-decoration: none;
  margin-bottom: 24px;
}

.submission-back:hover {
  color: var(--admin-ink);
  text-decoration: underline;
}

.submission-detail-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.submission-detail-time {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 13px;
  color: var(--admin-ink-muted);
}

.submission-detail-source {
  font-family: var(--font-mono), monospace;
  font-size: 12px;
  color: var(--admin-ink-soft);
}

.submission-detail-submitter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 24px;
  padding: 12px 14px;
  background: var(--admin-bg-subtle);
  border: 0.5px solid var(--admin-rule);
  border-radius: var(--r-small);
}

.submission-detail-anon {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 14px;
  color: var(--admin-ink-muted);
  font-style: italic;
}

.submission-detail-name {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--admin-ink);
}

.submission-detail-email {
  font-family: var(--font-mono), monospace;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}

.submission-detail-email:hover { text-decoration: underline; }

.submission-detail-email--absent {
  color: var(--admin-ink-soft);
}

.submission-detail-question {
  margin-bottom: 28px;
}

.submission-detail-question p {
  font-family: var(--font-serif), 'Source Serif 4', serif;
  font-size: 20px;
  line-height: 1.65;
  color: var(--admin-ink);
  margin: 0 0 1em;
}

.submission-detail-question p:last-child { margin-bottom: 0; }

.submission-detail-notes-block {
  margin-bottom: 20px;
}

.submission-detail-notes-label {
  display: block;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--admin-ink-muted);
  margin-bottom: 6px;
}

.submission-detail-notes {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 0.5px solid var(--admin-rule);
  border-radius: var(--r-small);
  background: var(--admin-bg);
  color: var(--admin-ink);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  min-height: 72px;
}

.submission-detail-notes:focus {
  outline: none;
  border-color: var(--accent-soft);
}

.submission-save-bar {
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  margin-bottom: 12px;
  animation: save-pulse 1.2s ease-in-out infinite;
}

@keyframes save-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.submission-save-error {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 13px;
  color: #8b2a1a;
  background: #f7e0dc;
  border: 0.5px solid #e8c0b8;
  border-radius: var(--r-small);
  padding: 8px 12px;
  margin-bottom: 12px;
}

.submission-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.submission-action-btn {
  padding: 7px 16px;
  border-radius: var(--r-pill);
  border: 0.5px solid transparent;
  cursor: pointer;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  transition: opacity 0.1s, filter 0.1s;
}

.submission-action-btn:disabled { opacity: 0.5; cursor: default; }

.submission-action-btn--pending  { background: #f5e6c4; color: #7a5a18; border-color: #e8d09e; }
.submission-action-btn--approved { background: #d6e4d7; color: #2b4e34; border-color: #b4cdb6; }
.submission-action-btn--rejected { background: #ebc9c0; color: #6d2e1f; border-color: #d9a89c; }
.submission-action-btn--answered { background: #dee4ef; color: #2e3e62; border-color: #b8c4da; }

.submission-action-btn.active {
  filter: brightness(0.92);
  font-weight: 700;
  box-shadow: inset 0 0 0 2px currentColor;
}

.submission-status-legend {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 12px;
  color: var(--admin-ink-muted);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 0;
  padding-top: 20px;
  border-top: 0.5px solid var(--admin-rule);
}

.submission-status-legend dt {
  font-weight: 600;
  color: var(--admin-ink-soft);
}

.submission-status-legend dd { margin: 0; }

/* ========================================================================
   MASTHEAD NAV
   ======================================================================== */

/* --- Desktop public nav ---
   Use site-head-prefixed selector so specificity (1,1) ties with the
   parent .site-head nav rule, with my rule winning by source order.
   Without this, the masthead's `.site-head nav { display: flex }`
   beats `.public-nav { display: none }` and the desktop nav leaks
   into mobile widths. */
.site-head .public-nav {
  display: none; /* hidden below 1024px */
  align-items: center;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

@media (min-width: 1024px) {
  .site-head .public-nav {
    display: flex;
  }
}

.public-nav a {
  padding: 0.55rem 0.75rem;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  border-radius: var(--r-pill);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
/* Urdu nav: explicit Nastaliq + matched size to English (~0.92rem visual).
   Nastaliq glyphs sit a touch taller than Inter so 0.95rem keeps optical parity.
   Colors inherit from English base rules — strict palette parity. */
.locale-scope--ur .public-nav a {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 0.5rem 0.65rem;
  min-height: 44px;
  align-items: center;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.public-nav a:hover {
  background: rgba(184, 150, 62, 0.08);
  color: var(--sage);
}

/* Active state: thin underline */
.public-nav a[aria-current='page'] {
  color: var(--sage);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gold-soft);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* "About" sits right-tucked, slightly muted */
.public-nav a.about-link {
  color: var(--ink-muted);
  font-size: 0.875rem;
}
.public-nav a.about-link:hover {
  color: var(--ink);
  background: rgba(184, 150, 62, 0.08);
}

/* Spacer pushes About + CTA to the right */
.public-nav-spacer {
  flex: 1;
}

/* Locale toggle — sits between About and the Ask CTA, mirrors the
   muted tone of About. Renders the OTHER language's name as the link. */
.public-nav a.locale-toggle {
  color: var(--ink-muted);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.92rem;             /* match other nav items so it sits in the row cleanly */
  font-weight: 500;
  padding: 0.55rem 0.75rem;
  border-radius: var(--r-pill);
  transition: color 0.18s ease, background 0.18s ease;
  text-decoration: none;
  white-space: nowrap;
}
.public-nav a.locale-toggle:hover {
  color: var(--ink);
  background: rgba(184, 150, 62, 0.08);
}
/* When the toggle points to Urdu, render the Nastaliq glyph at the same optical
   size as the surrounding nav. */
.public-nav a.locale-toggle[lang="ur"] {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
}

/* Mobile drawer locale link */
.mobile-nav-locale {
  display: block;
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  background: rgba(184, 150, 62, 0.06);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-small);
  color: var(--ink);
  text-decoration: none;
  font-size: 1rem;
  text-align: center;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.mobile-nav-locale:hover { background: rgba(184, 150, 62, 0.12); border-color: var(--gold-soft); color: var(--sage); }
.mobile-nav-locale[lang="ur"] {
  font-family: var(--font-nastaliq), serif;
  font-size: 1.25rem;
}

/* "Ask a question" desktop CTA — primary action, sage filled pill */
.public-nav a.cta {
  padding: 0.6rem 1.15rem;
  margin-left: 0.35rem;
  background: var(--sage);
  border: 1px solid var(--sage);
  color: var(--paper);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--r-pill);
  min-height: 40px;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
  box-shadow: 0 6px 20px -10px rgba(45, 79, 66, 0.4);
}
/* Urdu Ask CTA pill: Nastaliq, matched optical size to English version. */
.locale-scope--ur .public-nav a.cta {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 0.5rem 1rem;
  min-height: 44px;
}

.public-nav a.cta:hover {
  background: var(--sage-light);
  border-color: var(--sage-light);
  color: var(--paper);
  text-decoration: none;
  transform: translateY(-1px);
}

/* At 1024–1280px, compress slightly so everything fits one row */
@media (min-width: 1024px) and (max-width: 1280px) {
  .public-nav a {
    padding: 0.5rem 0.55rem;
    font-size: 0.84rem;
  }
  .public-nav a.cta {
    padding: 0.5rem 0.85rem;
    font-size: 0.84rem;
    margin-left: 0.2rem;
  }
}

/* At exactly tight widths, hide Search (hero has search) */
@media (min-width: 1024px) and (max-width: 1100px) {
  .public-nav a.hide-tight {
    display: none;
  }
}

/* --- Mobile head: Ask CTA + hamburger --- */
.mobile-head-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

@media (min-width: 1024px) {
  .mobile-head-actions {
    display: none;
  }
}

/* --- Hamburger toggle button --- */
.mobile-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  border: none;
  background: rgba(245, 237, 216, 0.1);
  color: #F5EDD8;
  cursor: pointer;
  transition: background 0.18s ease;
  flex-shrink: 0;
}

.mobile-nav-toggle:hover {
  background: rgba(245, 237, 216, 0.2);
}

/* --- Scrim overlay --- */
.mobile-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 20, 20, 0.55);
  animation: scrimFadeIn 150ms ease-out forwards;
}

@keyframes scrimFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-scrim {
    animation: none;
  }
}

/* --- Drawer ---
   Token rebinding mirrors the hero scope: deep sage background,
   parchment text, brass accent on hover. Same trick as .masthead-band
   so child elements auto-theme via inheritance. */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: min(340px, 88vw);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 180ms ease-out;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--hero-bg);                /* deep sage #1F2A24 */
  color: var(--hero-ink);
  /* Re-bind tokens so child links/text inherit parchment-on-sage */
  --paper: var(--hero-bg);
  --paper-light: var(--hero-bg);
  --ink: var(--hero-ink);
  --ink-soft: var(--hero-ink-soft);
  --ink-muted: var(--hero-ink-soft);
  --ink-faint: var(--hero-ink-muted);
  --rule: var(--hero-rule);
  --rule-soft: var(--hero-rule);
}

.mobile-nav-drawer.is-open {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-drawer {
    transition: none;
  }
}

/* Drawer close button (the button element inside the drawer) */
button.mobile-nav-drawer.close,
.mobile-nav-drawer button.close {
  /* reset — this selector is wrong; handled below via drawer-header */
  all: unset;
}

/* --- Drawer header --- */
.mobile-nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem 0.9rem;
  border-bottom: 0.5px solid rgba(74, 114, 80, 0.15);
  flex-shrink: 0;
}

.mobile-nav-drawer-header {
  border-bottom-color: var(--hero-rule);
}

.mobile-nav-brand {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 48, 'wght' 600;
  font-size: 1.5rem;
  color: var(--hero-ink);
  letter-spacing: -0.02em;
  line-height: 1;
}

.mobile-nav-brand em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

/* Close × button inside drawer */
.mobile-nav-drawer-header button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  border: 0.5px solid var(--hero-rule);
  background: transparent;
  color: var(--hero-ink-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.mobile-nav-drawer-header button:hover {
  background: var(--hero-surface);
  color: var(--hero-ink);
  border-color: var(--accent);
}

/* --- Drawer nav links --- */
.mobile-nav-drawer nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
}

.mobile-nav-drawer nav a {
  display: block;
  padding: 0.95rem 1.4rem;
  font-family: var(--font-serif), serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--hero-ink);
  text-decoration: none;
  border-bottom: 0.5px solid var(--hero-rule);
  transition: background 0.15s ease, color 0.15s ease;
}

.mobile-nav-drawer nav a:first-child {
  border-top: 0.5px solid var(--hero-rule);
}

.mobile-nav-drawer nav a:hover {
  background: var(--hero-surface);
  color: var(--accent);
}

.mobile-nav-drawer nav a[aria-current='page'] {
  color: var(--accent);
  font-weight: 600;
  background: var(--hero-surface);
}

/* --- Drawer footer CTA --- */
.mobile-nav-drawer-footer {
  padding: 1.1rem 1.25rem 1.4rem;
  flex-shrink: 0;
}

.mobile-nav-cta {
  display: block;
  width: 100%;
  padding: 0.95rem 1.25rem;
  background: var(--accent);                /* brass on sage */
  color: var(--hero-bg);                    /* deep sage text on brass */
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  border-radius: var(--r-pill);
  transition: background 0.18s ease, transform 0.12s ease;
}

.mobile-nav-cta:hover {
  background: var(--accent-deep);
  color: var(--hero-ink);
  transform: translateY(-1px);
}

.mobile-nav-cta:active {
  transform: translateY(0) scale(0.98);
}

/* ============================================================
   RELATED ENTRIES
   ============================================================ */

.related-entries {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
  border-top: 0.5px solid var(--rule-soft);
}

.related-entries-head {
  margin-bottom: 1.5rem;
}

.related-entries-title {
  font-family: var(--font-serif), Georgia, serif;
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.related-entries-ornament {
  width: 2rem;
  height: 2px;
  background: var(--accent-light);
  border-radius: 1px;
}

.related-entries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.related-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.125rem 1.25rem;
  background: var(--paper);
  border: 0.5px solid var(--rule-soft);
  border-radius: var(--r-card);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.related-card:hover {
  background: var(--paper-warm);
  border-color: var(--rule);
}

.related-card-type {
  align-self: flex-start;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-pill);
}

.related-card-title {
  font-family: var(--font-serif), Georgia, serif;
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.45;
}

.related-card-excerpt {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.825rem;
  color: var(--ink-muted);
  line-height: 1.55;
}

@media (max-width: 600px) {
  .related-entries-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ADMIN — QUEUE SOURCE CHIP
   ============================================================ */

.queue-source-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 4px;
  padding: 6px 10px;
  background: var(--status-approved);
  border-radius: 6px;
  font-family: var(--font-inter), sans-serif;
  font-size: 11.5px;
  color: var(--admin-bg);
}

.queue-source-chip-label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.queue-source-chip-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.queue-source-chip-clear {
  background: transparent;
  border: none;
  color: var(--admin-bg);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.75;
  flex-shrink: 0;
  transition: opacity 0.12s ease;
}

.queue-source-chip-clear:hover {
  opacity: 1;
}

/* ========================================================================
   Editorial identity tokens — aligned with the deep-sage/parchment/brass
   system. Components in components/entry/* and the redesigned archive
   panels reference --ed-* names; we keep them as a thin alias layer so
   the entire site themes from one root variable cascade.
   ======================================================================== */
:root {
  --ed-surface:        var(--paper);            /* #FFFFFF */
  --ed-surface-alt:    var(--paper-warm);       /* #FAFAF7 elevated card */
  --ed-ink:            var(--ink);              /* #1F2A24 sage ink */
  --ed-ink-body:       var(--ink-soft);         /* sage @ 0.85 for body */
  --ed-ink-muted:      var(--ink-muted);        /* sage @ 0.65 */
  --ed-sage:           var(--accent);           /* BRASS — sole consistent accent */
  --ed-forest:         var(--ink);              /* deep ink for emphatic links */
  --ed-forest-tint:    var(--accent-bg-soft);   /* brass-tinted card surface */
  --ed-hairline:       var(--rule-soft);        /* 0.5px hairline default */

  --ed-read-en:        680px;
  --ed-read-ur:        720px;
  --ed-marginalia:     220px;
  --ed-rail-gap:       48px;

  --ed-font-display:   var(--font-serif), 'Source Serif 4', Georgia, serif;
  --ed-font-body:      var(--font-serif), 'Source Serif 4', Georgia, serif;
  --ed-font-ui:        var(--font-sans), 'Inter', -apple-system, sans-serif;
  /* Source Serif 4 has its own italic axis — same family, italic style. */
  --ed-font-italic:    var(--font-serif), 'Source Serif 4', Georgia, serif;
  --ed-font-ur:        var(--font-nastaliq), serif;
  --ed-font-ar:        var(--font-naskh), serif;
  --ed-font-mono:      var(--font-mono), ui-monospace, monospace;
}

/* Editorial layout primitives — used by redesigned pages. */
.ed-page {
  background: var(--ed-surface);
  color: var(--ed-ink-body);
  min-height: 100vh;
}

.ed-read-column {
  max-width: var(--ed-read-en);
  margin: 0 auto;
  padding: 0 24px;
}

.ed-read-column[lang='ur'] {
  max-width: var(--ed-read-ur);
}

.ed-eyebrow {
  font-family: var(--ed-font-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ed-sage);
  font-weight: 600;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--ed-sage);
  display: inline-block;
}

.ed-h1 {
  font-family: var(--ed-font-display);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
  margin: 0 0 18px;
  color: var(--ed-ink);
  font-weight: 600;
  letter-spacing: -0.012em;
}

.ed-h1[lang='ur'] {
  font-family: var(--ed-font-ur);
  font-size: clamp(26px, 3.6vw, 38px);
  /* Nastaliq has tall ascenders/descenders that diagonally extend across
     the line — anything under ~2.1 causes the title to overlap itself. */
  line-height: 2.2;
  font-weight: 500;
  direction: rtl;
  text-align: right;
}

.ed-hairline {
  border: none;
  border-top: 0.5px solid var(--ed-hairline);
  margin: 28px 0;
}

.ed-hairline-sage {
  border: none;
  border-top: 0.5px solid var(--ed-sage);
  margin: 24px 0;
}

/* ========================================================================
   Task 14 — Editorial body (.ed-body)
   ======================================================================== */

/* Editorial body — applied to the <article> wrapping rendered Markdown. */
.ed-body {
  font-family: var(--ed-font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ed-ink-body);
}

.ed-body p { margin: 0 0 18px; }

.ed-body h2 {
  font-family: var(--ed-font-display);
  font-size: 26px;
  line-height: 1.18;
  margin: 36px 0 14px;
  color: var(--ed-ink);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.ed-body h3 {
  font-family: var(--ed-font-display);
  font-size: 19px;
  line-height: 1.25;
  margin: 28px 0 10px;
  color: var(--ed-ink);
  font-weight: 600;
}

.ed-body ul, .ed-body ol {
  margin: 0 0 18px;
  padding-left: 24px;
}

.ed-body li {
  margin-bottom: 6px;
}

.ed-body ol {
  counter-reset: ed-step;
  list-style: none;
  padding-left: 0;
}

.ed-body ol > li {
  position: relative;
  padding-left: 36px;
  counter-increment: ed-step;
}

.ed-body ol > li::before {
  content: counter(ed-step) '.';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ed-sage);
  font-family: var(--ed-font-mono);
  font-size: 14px;
  font-weight: 600;
}

.ed-body blockquote {
  margin: 0 0 18px;
  padding-left: 18px;
  border-left: 2px solid var(--ed-sage);
  font-style: italic;
  color: var(--ed-ink-muted);
}

.ed-body a {
  color: var(--ed-forest);
  text-decoration: underline;
  text-decoration-color: var(--ed-sage);
  text-underline-offset: 3px;
}

.ed-body hr {
  border: none;
  border-top: 0.5px solid var(--ed-hairline);
  margin: 28px 0;
}

.ed-body code {
  font-family: var(--ed-font-mono);
  font-size: 0.92em;
  background: var(--ed-surface-alt);
  padding: 1px 6px;
  border-radius: 3px;
}

/* Urdu body adjustments */
.ed-body[lang='ur'] {
  font-family: var(--ed-font-ur);
  font-size: 22px;
  line-height: 2;
  direction: rtl;
  text-align: right;
}
.ed-body[lang='ur'] ol { padding-left: 0; padding-right: 0; }
.ed-body[lang='ur'] ol > li { padding-left: 0; padding-right: 36px; }
.ed-body[lang='ur'] ol > li::before { left: auto; right: 0; }
.ed-body[lang='ur'] blockquote {
  border-left: none;
  border-right: 2px solid var(--ed-sage);
  padding-left: 0;
  padding-right: 18px;
}

/* ========================================================================
   Task 15 — Source-material block (.ed-source-quote*)
   ======================================================================== */

/* Source-material block — Arabic Naskh + translation. */
.ed-source-quote {
  margin: 28px 0;
  border: 0.5px solid var(--ed-hairline);
  border-left: 3px solid var(--ed-sage);
  padding: 18px 22px;
  background: var(--ed-surface);
}

.ed-source-quote-text {
  font-family: var(--ed-font-ar);
  font-size: 24px;
  line-height: 2;
  color: var(--ed-ink);
  direction: rtl;
  text-align: right;
  margin: 0;
}

.ed-source-quote-rule {
  border: none;
  border-top: 0.5px solid var(--ed-sage);
  margin: 14px 0 12px;
  width: 36px;
}

.ed-source-quote-translation {
  font-family: var(--ed-font-body);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ed-ink-body);
  margin: 0;
}

.ed-source-quote-translation[lang='ur'] {
  font-family: var(--ed-font-ur);
  font-style: normal;
  font-size: 18px;
  line-height: 1.9;
  direction: rtl;
  text-align: right;
}

.ed-source-quote-citation {
  font-family: var(--ed-font-ui);
  font-size: 11px;
  color: var(--ed-sage);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 10px;
  display: block;
}

/* ========================================================================
   Task 16 — Attribution colophon (.ed-attribution*)
   ======================================================================== */

.ed-attribution {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 0.5px solid var(--ed-hairline);
  font-family: var(--ed-font-italic);
  font-size: 14px;
  font-style: italic;
  color: var(--ed-ink-muted);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.ed-attribution .ed-attribution-prefix {
  font-family: var(--ed-font-ui);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ed-sage);
  font-style: normal;
  font-weight: 600;
}
.ed-attribution .ed-attribution-name {
  color: var(--ed-ink);
  font-style: normal;
  font-family: var(--ed-font-display);
  font-size: 15.5px;
  font-weight: 500;
}
.ed-attribution .ed-attribution-honorific {
  font-family: var(--ed-font-ui);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ed-ink-muted);
  font-style: normal;
}

/* ========================================================================
   Task 17 — Per-type primary blocks (.ed-hikmah, .ed-dua, .ed-quote, .ed-practice-steps)
   ======================================================================== */

/* Hikmah pull-quote — title is the saying, displayed at large size. */
.ed-hikmah {
  font-family: var(--ed-font-display);
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.05;
  color: var(--ed-ink);
  margin: 0 0 24px;
  font-weight: 500;
  letter-spacing: -0.018em;
}
.ed-hikmah[lang='ur'] {
  font-family: var(--ed-font-ur);
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.5;
  font-weight: 500;
  direction: rtl;
  text-align: right;
}

/* Du'a stack — Arabic dominant, transliteration, translation. */
.ed-dua {
  margin: 0 0 28px;
}
.ed-dua-arabic {
  font-family: var(--ed-font-ar);
  font-size: 32px;
  line-height: 2;
  color: var(--ed-ink);
  direction: rtl;
  text-align: right;
  margin: 0 0 14px;
}
.ed-dua-translit {
  font-family: var(--ed-font-italic);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ed-ink-muted);
  margin: 0 0 14px;
}
.ed-dua-translation {
  font-family: var(--ed-font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ed-ink-body);
  margin: 0;
}
.ed-dua-translation[lang='ur'] {
  font-family: var(--ed-font-ur);
  font-size: 20px;
  line-height: 1.9;
  direction: rtl;
  text-align: right;
}

/* Quote block — pull-quote with prominent attribution. */
.ed-quote {
  margin: 0 0 24px;
}
.ed-quote-text {
  font-family: var(--ed-font-display);
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.18;
  color: var(--ed-ink);
  margin: 0 0 14px;
  font-weight: 500;
  font-style: italic;
}
.ed-quote-text[lang='ur'] {
  font-family: var(--ed-font-ur);
  font-style: normal;
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.6;
  direction: rtl;
  text-align: right;
}
.ed-quote-attrib {
  font-family: var(--ed-font-ui);
  font-size: 13px;
  color: var(--ed-forest);
  letter-spacing: 0.04em;
  font-weight: 600;
  margin: 0;
}
.ed-quote-attrib::before { content: '— '; color: var(--ed-sage); }

/* Practice steps (from type_metadata.steps[]) — explicit numbered block. */
.ed-practice-steps {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  counter-reset: ed-pstep;
}
.ed-practice-steps > li {
  counter-increment: ed-pstep;
  padding: 12px 0 12px 44px;
  position: relative;
  border-bottom: 0.5px solid var(--ed-hairline);
  font-family: var(--ed-font-body);
  font-size: 17px;
  line-height: 1.55;
}
.ed-practice-steps > li:last-child { border-bottom: none; }
.ed-practice-steps > li::before {
  content: counter(ed-pstep);
  position: absolute;
  left: 0;
  top: 14px;
  width: 28px;
  height: 28px;
  background: var(--ed-forest);
  color: var(--ed-surface);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ed-font-ui);
  font-size: 12px;
  font-weight: 600;
}

.ed-practice-steps[lang='ur'] > li {
  padding-left: 0;
  padding-right: 44px;
  font-family: var(--ed-font-ur);
  font-size: 19px;
  line-height: 1.9;
  direction: rtl;
  text-align: right;
}
.ed-practice-steps[lang='ur'] > li::before {
  left: auto;
  right: 0;
}

/* ── EntryArticle layout helpers ─────────────────────────────────────────── */

.ed-hairline-sage { border: none; border-top: 0.5px solid var(--accent); margin: 18px 0 24px; width: 60px; }

.ed-h1 {
  font-family: var(--ed-font-display);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  color: var(--ed-ink);
  margin: 0 0 6px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ed-h1[lang='ur'] {
  font-family: var(--ed-font-ur);
  font-size: clamp(24px, 3.4vw, 34px);
  /* Nastaliq needs significantly more line-height than Latin — the diagonal
     glyph flow overlaps below ~2.0. */
  line-height: 2.2;
  direction: rtl;
  text-align: right;
}

.ed-read-column { max-width: var(--ed-read-en); }
.ed-read-column[lang='ur'] { max-width: var(--ed-read-ur); }

/* -------------------------------------------------------------------------
 * Task 22 — ArchivePanel layout
 * ------------------------------------------------------------------------- */

.ed-archive-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--ed-rail-gap);
  max-width: var(--page-max);
  margin: 32px auto 64px;
  padding: 0 24px;
}
@media (max-width: 1023px) {
  .ed-archive-grid { grid-template-columns: 1fr; }
}
/* RTL: ArchivePanel sidebar moves to the right (logical start position). */
.locale-scope--ur .ed-archive-grid {
  direction: rtl;
}

.ed-archive-panel {
  font-family: var(--ed-font-ui);
  font-size: 16px;
  color: var(--ed-ink-body);
  border-right: 0.5px solid var(--ed-hairline);
  padding-right: 22px;
  position: sticky;
  top: 24px;
  align-self: start;
  line-height: 1.45;
}
@media (max-width: 1023px) {
  .ed-archive-panel {
    position: static;
    border-right: none;
    border-bottom: 0.5px solid var(--ed-hairline);
    padding: 0 0 18px;
    margin-bottom: 24px;
  }
}

.ed-archive-panel .ed-ph {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ed-sage);
  font-weight: 600;
  margin: 26px 0 12px;
}
.ed-archive-panel .ed-ph:first-child { margin-top: 0; }

.ed-archive-panel ul { list-style: none; padding: 0; margin: 0; }
.ed-archive-panel li { padding: 5px 0; }
.ed-archive-panel a {
  color: var(--ed-ink-body);
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 16px;
}
.ed-archive-panel a:hover { color: var(--ed-forest); }
.ed-archive-panel a.is-active { color: var(--ed-forest); font-weight: 600; }
.ed-archive-panel .ed-count {
  font-family: var(--ed-font-mono);
  font-size: 13px;
  color: var(--ed-ink-muted);
}

/* =========================================================================
   Entry Marginalia — right rail outline + cited + topics (Task 20 + 21)
   ========================================================================= */

.ed-marginalia {
  font-family: var(--ed-font-ui);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ed-ink-muted);
  position: sticky;
  top: 24px;
  align-self: start;
  border-left: 0.5px solid var(--ed-hairline);
  padding-left: 22px;
}
@media (max-width: 1023px) {
  .ed-marginalia {
    position: static;
    border-left: none;
    border-top: 0.5px solid var(--ed-hairline);
    padding: 22px 0 0;
    margin-top: 32px;
  }
}

.ed-marginalia .ed-mh {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ed-sage);
  font-weight: 600;
  margin: 18px 0 8px;
}
.ed-marginalia .ed-mh:first-child { margin-top: 0; }

.ed-marginalia ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ed-marginalia li {
  padding: 4px 0;
}
.ed-marginalia li.indent { padding-left: 14px; }
.ed-marginalia a {
  color: var(--ed-ink-body);
  text-decoration: none;
}
.ed-marginalia a:hover { color: var(--ed-forest); }
.ed-marginalia .ed-topic-pill {
  display: inline-block;
  padding: 2px 8px;
  background: var(--ed-surface-alt);
  border: 0.5px solid var(--ed-hairline);
  border-radius: 12px;
  margin: 2px 4px 2px 0;
  font-size: 11px;
  color: var(--ed-forest);
  text-decoration: none;
}
.ed-marginalia .ed-topic-pill:hover {
  background: var(--ed-forest-tint);
  border-color: var(--ed-sage);
}

/* Scrollspy active state — Task 21 */
.ed-marginalia a.is-active {
  color: var(--ed-forest);
  font-weight: 600;
}

/* Entry-page two-column grid: article column + sticky right marginalia rail. */
.ed-entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ed-marginalia);
  gap: var(--ed-rail-gap);
  max-width: calc(var(--ed-read-en) + var(--ed-marginalia) + var(--ed-rail-gap) + 48px);
  margin: 32px auto 64px;
  padding: 0 24px;
}
@media (max-width: 1023px) {
  .ed-entry-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================
   Ask Invite — edge-to-edge parchment band that interrupts the
   sage→white→sage rhythm. Letterpress invitation: ornament + brass eyebrow
   + italic Source Serif headline + soft lede + textarea + brass submit.
   Replaces the old SubmitCTA card. Pure HTML form, no client JS.
   ======================================================================== */

.ask-invite {
  /* Edge-to-edge parchment band with the same negative-margin trick as
     .foot-band so it bleeds outside the .page max-width. Bottom margin
     is 0 so the AskInvite band butts directly against the footer with
     no white gap below it. */
  margin: clamp(4rem, 8vw, 6rem) calc(50% - 50vw) 0;
  padding: clamp(4rem, 7.5vw, 5.5rem) clamp(1.25rem, 4vw, 2.5rem);
  background: var(--hero-ink);            /* warm parchment #F5EDD8 */
  border-top: 0.5px solid var(--accent-soft);
  border-bottom: 0.5px solid var(--accent-soft);
  /* Sage ink + brass accent inside this scope */
  color: var(--ink);
  position: relative;
  overflow: hidden;
}

/* Subtle deckle-edge feel: a brass hairline 12px in from each end of the band */
.ask-invite::before,
.ask-invite::after {
  content: '';
  position: absolute;
  left: clamp(1.5rem, 5vw, 4rem);
  right: clamp(1.5rem, 5vw, 4rem);
  height: 0;
  border-top: 0.5px solid var(--accent-soft);
  opacity: 0.6;
  pointer-events: none;
}
.ask-invite::before { top: 14px; }
.ask-invite::after  { bottom: 14px; }

.ask-invite-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.ask-invite-ornament {
  color: var(--accent);
  margin-bottom: 1.4rem;
  display: inline-flex;
}

.ask-invite-eyebrow {
  font-family: var(--font-sans), 'Inter', system-ui, sans-serif;
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 0.85rem;
}

.ask-invite-headline {
  font-family: var(--font-serif), serif;
  font-variation-settings: 'opsz' 60, 'wght' 500;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.85rem;
}
.ask-invite-headline em {
  font-style: italic;
  color: var(--ink);
  font-weight: 400;
}

.ask-invite-lede {
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2.1vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0 0 2rem;
  max-width: 38ch;
}

.ask-invite-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ask-invite-textarea {
  width: 100%;
  background: #FFFFFF;                       /* clean white surface inside parchment */
  border: 0.5px solid var(--accent-soft);
  border-radius: var(--r-card);
  padding: 1.1rem 1.25rem;
  font-family: var(--font-serif), serif;
  font-size: 1.075rem;
  line-height: 1.55;
  color: var(--ink);
  resize: vertical;
  min-height: 5.5rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ask-invite-textarea::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}
.ask-invite-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.25);
}

.ask-invite-submit {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  background: var(--accent);
  color: var(--hero-ink);                   /* parchment text on brass */
  font-family: var(--font-sans), 'Inter', system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  min-height: 44px;
  transition: background 0.18s ease, transform 0.12s ease;
}
.ask-invite-submit:hover {
  background: var(--accent-deep);
}
.ask-invite-submit:active {
  transform: scale(0.98);
}
.ask-invite-arrow {
  display: inline-block;
  transition: transform 0.18s ease;
}
.ask-invite-submit:hover .ask-invite-arrow {
  transform: translateX(3px);
}

.ask-invite-microline {
  margin: 1.6rem 0 0;
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-muted);
}
.ask-invite-microlink {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}
.ask-invite-microlink:hover {
  color: var(--accent);
}

/* ----------------------------------------------------------------------------
   Urdu overrides for the ask-invite parchment band.
   The Latin presets above use Inter / Source Serif italic which both lack
   Arabic glyphs and cause the browser to fall back to a system Naskh font —
   wrong feel and wrong size for Urdu. Switch every text node to Nastaliq with
   line-heights that respect its taller ascenders/descenders.
   --------------------------------------------------------------------------*/
.locale-scope--ur .ask-invite-eyebrow,
.ask-invite[lang='ur'] .ask-invite-eyebrow {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
}
.locale-scope--ur .ask-invite-headline,
.ask-invite[lang='ur'] .ask-invite-headline {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-size: clamp(1.85rem, 4.5vw, 2.6rem);
  line-height: 1.85;
  letter-spacing: 0;
}
.locale-scope--ur .ask-invite-headline em,
.ask-invite[lang='ur'] .ask-invite-headline em {
  font-style: normal;
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
}
.locale-scope--ur .ask-invite-lede,
.ask-invite[lang='ur'] .ask-invite-lede {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-style: normal;
  font-size: clamp(1.1rem, 2.2vw, 1.25rem);
  line-height: 2;
  max-width: 36ch;
}
.locale-scope--ur .ask-invite-textarea,
.ask-invite[lang='ur'] .ask-invite-textarea {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-size: 1.15rem;
  line-height: 1.95;
  text-align: right;
  direction: rtl;
}
.locale-scope--ur .ask-invite-textarea::placeholder,
.ask-invite[lang='ur'] .ask-invite-textarea::placeholder {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-style: normal;
}
.locale-scope--ur .ask-invite-submit,
.ask-invite[lang='ur'] .ask-invite-submit {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-size: 1.15rem;
  line-height: 1.4;
  letter-spacing: 0;
  padding: 0.7rem 1.6rem;
  min-height: 48px;
}
.locale-scope--ur .ask-invite-microline,
.ask-invite[lang='ur'] .ask-invite-microline {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.7;
}
.locale-scope--ur .ask-invite-microlink,
.ask-invite[lang='ur'] .ask-invite-microlink {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
}

/* Consent group on the Ask page — opt-ins for email list and WhatsApp. */
.ask-consent-group {
  border: 0.5px solid var(--rule-soft);
  border-radius: var(--r-card);
  padding: 1.1rem 1.25rem 1.15rem;
  margin: 0;
  background: var(--paper-warm);
}
.ask-consent-legend {
  font-family: var(--font-sans), 'Inter', system-ui, sans-serif;
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  padding: 0 0.4rem;
  margin-left: -0.4rem;
}
.ask-consent-row {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  cursor: pointer;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.5;
}
.ask-consent-row + .ask-consent-row {
  border-top: 0.5px solid var(--rule-soft);
}
.ask-consent-row strong {
  font-weight: 500;
  color: var(--ink);
}
.ask-consent-hint {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
  font-weight: 400;
}
.ask-consent-row input[type="checkbox"] {
  margin-top: 0.25rem;
}

/* ========================================================================
   CMS Pages — public route + admin UI
   ======================================================================== */

/* Public CMS page wrapper */
.cms-page {
  max-width: 720px;
  padding: clamp(2rem, 5vw, 4rem) 0;
}

.cms-page h1 {
  font-family: var(--ed-font-display);
  font-size: clamp(26px, 3.5vw, 38px);
  line-height: 1.15;
  margin: 0 0 32px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.cms-page-empty {
  color: var(--ink-muted);
  font-style: italic;
}

/* Page-status chips (draft / published / archived) */
.admin-chip--status-draft     { background: #e8e3d8; color: #5a5448; }
.admin-chip--status-published { background: #d6e4d7; color: #2b4e34; }
.admin-chip--status-archived  { background: #e4d8d5; color: #5d3a33; }

/* Admin pages table */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-inter), sans-serif;
  font-size: calc(13px * var(--admin-scale));
  color: var(--admin-ink);
}

.admin-table th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--admin-rule);
  font-weight: 600;
  color: var(--admin-ink-muted);
  font-size: calc(11px * var(--admin-scale));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-table td {
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--admin-rule);
  vertical-align: middle;
}

.admin-table tr:last-child td { border-bottom: none; }

.admin-code {
  font-family: var(--font-mono), monospace;
  font-size: calc(12px * var(--admin-scale));
  background: var(--admin-bg-subtle);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--admin-ink);
}

.admin-link {
  color: var(--admin-ink);
  text-decoration: underline;
  text-decoration-color: var(--admin-rule);
  text-underline-offset: 2px;
  font-size: calc(12px * var(--admin-scale));
}

.admin-link:hover { text-decoration-color: var(--admin-ink); }

.admin-row-actions { display: flex; gap: 8px; align-items: center; }

.admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 4px;
  font-family: var(--font-inter), sans-serif;
  font-size: calc(13px * var(--admin-scale));
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  line-height: 1.4;
}

.admin-btn--primary {
  background: var(--admin-ink);
  color: var(--admin-bg);
  border-color: var(--admin-ink);
}

.admin-btn--primary:hover { opacity: 0.85; }

.admin-btn--danger {
  background: #c0392b;
  color: #fff;
  border-color: #c0392b;
}

.admin-btn--danger:hover { opacity: 0.85; }

.admin-btn-tertiary {
  display: inline-block;
  margin-top: 6px;
  background: transparent;
  border: 1px solid var(--admin-rule);
  padding: 4px 10px;
  border-radius: 3px;
  font-family: var(--font-inter), 'Inter', sans-serif;
  font-size: calc(11px * var(--admin-scale));
  cursor: pointer;
  color: var(--admin-ink);
}
.admin-btn-tertiary:hover {
  background: var(--admin-bg-subtle);
}

/* Admin page form */
.admin-page-form {
  max-width: 860px;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.admin-page-form h1 {
  font-family: var(--font-inter), sans-serif;
  font-size: calc(22px * var(--admin-scale));
  font-weight: 600;
  color: var(--admin-ink);
  margin: 0 0 28px;
}

.admin-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.admin-form-row label {
  font-family: var(--font-inter), sans-serif;
  font-size: calc(12px * var(--admin-scale));
  font-weight: 600;
  color: var(--admin-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-form-row input[type="text"],
.admin-form-row input[type="number"],
.admin-form-row textarea {
  font-family: var(--font-inter), sans-serif;
  font-size: calc(14px * var(--admin-scale));
  color: var(--admin-ink);
  background: var(--admin-bg);
  border: 1px solid var(--admin-rule);
  border-radius: 4px;
  padding: 8px 10px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.admin-form-row input[type="text"]:focus,
.admin-form-row input[type="number"]:focus,
.admin-form-row textarea:focus {
  border-color: var(--admin-ink-muted);
}

.admin-form-row textarea {
  resize: vertical;
  line-height: 1.55;
}

.admin-form-row textarea.mono {
  font-family: var(--font-mono), monospace;
  font-size: calc(13px * var(--admin-scale));
}

.admin-form-row textarea[dir="rtl"] {
  text-align: right;
}

.admin-form-radios,
.admin-form-checks {
  display: flex;
  flex-direction: row;
  gap: 20px;
  flex-wrap: wrap;
}

.admin-form-radios label,
.admin-form-checks label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-inter), sans-serif;
  font-size: calc(13px * var(--admin-scale));
  font-weight: 400;
  color: var(--admin-ink);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.admin-form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 0.5px solid var(--admin-rule);
}

/* Form utility classes — replaces scattered inline styles in unit forms */
.admin-back-link {
  display: inline-block;
  margin-bottom: 20px;
}

.form-label-hint {
  font-weight: 400;
  color: var(--admin-ink-muted);
  font-size: calc(12px * var(--admin-scale));
}

/* Inline variant: used within checkbox labels where left-margin matters */
.form-label-hint--inline {
  margin-left: 0.5em;
}

/* Block variant: helper text below a field (e.g. below a select) */
.form-field-hint {
  margin-top: 6px;
  font-weight: 400;
  color: var(--admin-ink-muted);
  font-size: calc(12px * var(--admin-scale));
}

.form-row-timestamps {
  flex-direction: row;
  gap: 0.85rem;
  align-items: flex-end;
}
.form-row-timestamp-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Unit detail empty state — shown when no unit is selected in the queue */
.unit-detail-empty {
  color: var(--admin-ink-soft);
  font-family: var(--font-inter), 'Inter', sans-serif;
  font-size: calc(13px * var(--admin-scale));
}

/* type_metadata JSON preview block */
.type-metadata-preview {
  background: var(--admin-bg-subtle);
  padding: calc(10px * var(--admin-scale));
  border-radius: 4px;
  font-family: var(--font-mono), 'JetBrains Mono', monospace;
  font-size: calc(11px * var(--admin-scale));
  max-height: 160px;
  overflow: auto;
  margin: 0;
  color: var(--admin-ink);
}

.admin-error {
  background: #fce8e5;
  border: 1px solid #e0b4b0;
  border-radius: 4px;
  padding: 10px 14px;
  color: #6d2e1f;
  font-family: var(--font-inter), sans-serif;
  font-size: calc(13px * var(--admin-scale));
  margin-bottom: 20px;
}

/* ========================================================================
   Admin dashboard — landing page at /admin
   Editorial mini-CMS feel: parchment-warm shell, sage ink, brass accent.
   ======================================================================== */
.admin-dashboard {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2.5rem) 4rem;
  font-family: var(--font-sans), 'Inter', system-ui, sans-serif;
  color: var(--admin-ink);
}

.admin-dashboard-header {
  border-bottom: 0.5px solid var(--admin-rule);
  padding-bottom: 1.6rem;
  margin-bottom: 2rem;
}
.admin-dashboard-eyebrow {
  font-family: var(--font-sans), 'Inter', system-ui, sans-serif;
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--admin-ink-soft);
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.admin-dashboard-title {
  font-family: var(--font-serif), 'Source Serif 4', serif;
  font-variation-settings: 'opsz' 60, 'wght' 500;
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--admin-ink);
  margin: 0 0 0.4rem;
}
.admin-dashboard-sub {
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--admin-ink-muted);
  margin: 0;
}

.admin-dash-section {
  margin-bottom: 2.4rem;
}
.admin-dash-section-title {
  font-family: var(--font-sans), 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 0.85rem;
}

.admin-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.85rem;
}

.admin-dash-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.1rem 1.2rem 1rem;
  background: var(--admin-bg-subtle);
  border: 0.5px solid var(--admin-rule);
  border-radius: var(--r-card);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
  min-height: 96px;
}
.admin-dash-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  background: rgba(201, 169, 97, 0.06);
}
.admin-dash-card-value {
  font-family: var(--font-serif), 'Source Serif 4', serif;
  font-variation-settings: 'opsz' 60, 'wght' 500;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--admin-ink);
}
.admin-dash-card-label {
  font-family: var(--font-sans), 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--admin-ink-muted);
  letter-spacing: 0.01em;
}

/* Tone-specific colour cues on the value glyph */
.admin-dash-card--attention .admin-dash-card-value { color: var(--status-pending); }
.admin-dash-card--caution   .admin-dash-card-value { color: var(--status-needs-edit); }
.admin-dash-card--published .admin-dash-card-value { color: var(--status-approved); }
/* quiet uses default ink */

.admin-dash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.admin-dash-action {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.05rem;
  background: transparent;
  border: 0.5px solid var(--admin-rule);
  border-radius: var(--r-pill);
  font-family: var(--font-sans), 'Inter', system-ui, sans-serif;
  font-size: 0.88rem;
  color: var(--admin-ink);
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.admin-dash-action:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(201, 169, 97, 0.08);
}

/* ========================================================================
   Admin CMS surfaces — Navigation + Pages CRUD
   Shared styles for both nav-cms-* and admin-* class families so the
   admin shell looks consistent across all CRUD pages.
   ======================================================================== */

.nav-cms-page,
.admin-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2.5rem) 4rem;
  font-family: var(--font-sans), 'Inter', system-ui, sans-serif;
  color: var(--admin-ink);
}

.nav-cms-header,
.admin-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.4rem;
  border-bottom: 0.5px solid var(--admin-rule);
  flex-wrap: wrap;
}

.nav-cms-title,
.admin-page-title {
  font-family: var(--font-serif), 'Source Serif 4', serif;
  font-variation-settings: "opsz" 60, "wght" 500;
  font-size: clamp(1.85rem, 4vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--admin-ink);
  margin: 0;
}

.nav-cms-add-btn,
.admin-btn,
.admin-btn--primary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.25rem;
  background: var(--accent-deep);
  color: var(--hero-ink);
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  min-height: 40px;
  transition: background 0.18s ease, transform 0.12s ease;
}
.nav-cms-add-btn:hover,
.admin-btn:hover,
.admin-btn--primary:hover { background: var(--ink); }
.nav-cms-add-btn:active,
.admin-btn:active,
.admin-btn--primary:active { transform: scale(0.98); }

.nav-cms-section { margin-bottom: 2.4rem; }
.nav-cms-slot-heading {
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 0.85rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}
.nav-cms-slot-count {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--admin-ink-muted);
  letter-spacing: 0.04em;
  font-weight: 500;
  background: var(--admin-bg-subtle);
  border: 0.5px solid var(--admin-rule);
  padding: 0.05rem 0.45rem;
  border-radius: var(--r-pill);
}

.nav-cms-empty {
  font-family: var(--font-serif), serif;
  font-style: italic;
  color: var(--admin-ink-muted);
  padding: 1.5rem 0;
  margin: 0;
}

.nav-cms-table,
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: 0.92rem;
  background: var(--admin-bg-subtle);
  border: 0.5px solid var(--admin-rule);
  border-radius: var(--r-card);
  overflow: hidden;
}
.nav-cms-table thead,
.admin-table thead { background: rgba(31, 42, 36, 0.04); }
.nav-cms-table th,
.admin-table th {
  padding: 0.7rem 1rem;
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--admin-ink-muted);
  font-weight: 600;
  border-bottom: 0.5px solid var(--admin-rule);
}
.nav-cms-table td,
.admin-table td {
  padding: 0.7rem 1rem;
  border-bottom: 0.5px solid var(--admin-rule);
  color: var(--admin-ink);
  vertical-align: middle;
}
.nav-cms-table tr:last-child td,
.admin-table tr:last-child td { border-bottom: none; }

.nav-cms-row--hidden { opacity: 0.55; }

.nav-cms-order-input {
  width: 60px;
  padding: 0.35rem 0.5rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.85rem;
  border: 0.5px solid var(--admin-rule);
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--admin-ink);
  text-align: center;
}
.nav-cms-order-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.25);
}

.nav-cms-href,
.admin-code,
.mono {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.84rem;
  color: var(--admin-ink-muted);
  background: rgba(31, 42, 36, 0.04);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}

.nav-cms-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  background: var(--accent-bg-soft);
  color: var(--accent);
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 3px;
  border: 0.5px solid var(--accent-soft);
}

.nav-cms-bool {
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--admin-ink-muted);
}
.nav-cms-none { color: var(--admin-ink-soft); font-style: italic; }

.nav-cms-actions,
.admin-row-actions { display: flex; gap: 0.5rem; }
.nav-cms-action-edit,
.admin-link {
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.nav-cms-action-edit:hover,
.admin-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

.nav-cms-reorder-row {
  margin-top: 0.85rem;
  display: flex;
  justify-content: flex-end;
}
.nav-cms-save-order-btn {
  padding: 0.5rem 1rem;
  background: transparent;
  border: 0.5px solid var(--admin-rule);
  border-radius: var(--r-pill);
  color: var(--admin-ink);
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.nav-cms-save-order-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(201, 169, 97, 0.06);
}

.nav-cms-form,
.admin-page-form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  max-width: 720px;
}
.nav-cms-fieldset,
.admin-form-row {
  border: 0.5px solid var(--admin-rule);
  border-radius: var(--r-card);
  padding: 1.1rem 1.25rem 1.25rem;
  margin: 0;
  background: var(--admin-bg-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.nav-cms-legend {
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  padding: 0 0.4rem;
  margin-left: -0.4rem;
}
.nav-cms-field { display: flex; flex-direction: column; gap: 0.35rem; }
.nav-cms-label,
.admin-form-row > label,
.admin-form-row > legend {
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--admin-ink);
  letter-spacing: 0.02em;
}
.nav-cms-input,
.admin-form-row input[type="text"],
.admin-form-row input[type="number"],
.admin-form-row input[type="email"],
.admin-form-row input[type="url"],
.admin-form-row textarea,
.admin-form-row select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: #FFFFFF;
  border: 0.5px solid var(--admin-rule);
  border-radius: 5px;
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: 0.95rem;
  color: var(--admin-ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.admin-form-row textarea {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  min-height: 8rem;
  resize: vertical;
}
.nav-cms-input--narrow { max-width: 200px; }
.nav-cms-input:focus,
.admin-form-row input:focus,
.admin-form-row textarea:focus,
.admin-form-row select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.25);
}
.nav-cms-input::placeholder { color: var(--admin-ink-soft); }

.nav-cms-checkboxes,
.admin-form-checks,
.admin-form-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: 0.9rem;
  color: var(--admin-ink);
}
.nav-cms-checkbox-label,
.admin-form-checks label,
.admin-form-radios label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.nav-cms-hint {
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: 0.78rem;
  color: var(--admin-ink-muted);
  margin: 0;
}

.nav-cms-form-actions,
.admin-form-actions {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  margin-top: 0.5rem;
}
.nav-cms-cancel-link,
.admin-form-actions a {
  color: var(--admin-ink-muted);
  text-decoration: none;
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: 0.9rem;
}
.nav-cms-cancel-link:hover,
.admin-form-actions a:hover {
  color: var(--admin-ink);
  text-decoration: underline;
}

.nav-cms-danger-zone {
  border: 0.5px solid var(--status-rejected);
  border-radius: var(--r-card);
  padding: 1.1rem 1.25rem;
  background: rgba(138, 58, 42, 0.04);
}
.nav-cms-danger-heading {
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--status-rejected);
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.nav-cms-delete-btn,
.admin-btn--danger {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1rem;
  background: transparent;
  border: 0.5px solid var(--status-rejected);
  border-radius: var(--r-pill);
  color: var(--status-rejected);
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav-cms-delete-btn:hover,
.admin-btn--danger:hover {
  background: var(--status-rejected);
  color: var(--paper-light);
}

.admin-error {
  background: rgba(138, 58, 42, 0.08);
  border: 0.5px solid var(--status-rejected);
  color: var(--status-rejected);
  padding: 0.75rem 1rem;
  border-radius: var(--r-card);
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: 0.92rem;
}

/* MigrationNudge — admin banner shown when a CMS table is missing. */
.migration-nudge {
  margin: 1.5rem 0 2.5rem;
  padding: 1.5rem 1.6rem;
  background: var(--accent-bg-soft);
  border: 0.5px solid var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-card);
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
}
.migration-nudge-eyebrow {
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.migration-nudge-title {
  font-family: var(--font-serif), serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--admin-ink);
  margin: 0 0 0.6rem;
  letter-spacing: -0.005em;
}
.migration-nudge-title code,
.migration-nudge-steps code {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.86em;
  background: rgba(31, 42, 36, 0.08);
  padding: 0.05em 0.35em;
  border-radius: 3px;
}
.migration-nudge-body {
  font-size: 0.95rem;
  color: var(--admin-ink);
  margin: 0 0 0.85rem;
  line-height: 1.5;
}
.migration-nudge-steps {
  margin: 0;
  padding-left: 1.4rem;
  font-size: 0.92rem;
  color: var(--admin-ink-muted);
  line-height: 1.7;
}

/* ========================================================================
   LIBRARY TABS + FILTERS + ROW ACTIONS + PAGINATION
   Used by /admin/units and /admin/pages library views.
   ======================================================================== */

.library-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--admin-rule, #d8d2c0);
  margin: 0 0 1.2rem;
  font-family: var(--font-sans), Inter, sans-serif;
  font-size: 0.86rem;
}
.library-tab {
  padding: 0.55rem 0.85rem;
  color: var(--admin-ink-muted, #7a7464);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.library-tab:hover { color: var(--admin-ink, #1d1c1a); }
.library-tab--active {
  color: var(--admin-ink, #1d1c1a);
  border-bottom-color: var(--status-approved, #2b3d2e);
  font-weight: 600;
}
.library-tab-count {
  margin-left: 0.4rem;
  font-size: 0.78rem;
  color: var(--admin-ink-muted, #7a7464);
  font-weight: 400;
}
.library-tab--active .library-tab-count { color: var(--admin-ink, #1d1c1a); }

.library-filters {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  margin: 0 0 1rem;
  flex-wrap: wrap;
}
.library-filters select,
.library-filters input[type="search"] {
  font-family: var(--font-sans), Inter, sans-serif;
  font-size: 0.86rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--admin-rule, #d8d2c0);
  border-radius: 3px;
  background: var(--admin-bg, #faf7f0);
}
.library-filters input[type="search"] { min-width: 16rem; }

/* Inline action form — per-row buttons for trash/restore/publish/etc. */
.library-row-form { display: inline-block; margin-right: 0.4rem; }
.library-row-form button {
  background: transparent;
  border: 1px solid var(--admin-rule, #d8d2c0);
  border-radius: 3px;
  padding: 0.18rem 0.5rem;
  font-size: 0.78rem;
  font-family: var(--font-sans), Inter, sans-serif;
  cursor: pointer;
  color: var(--admin-ink, #1d1c1a);
}
.library-row-form button:hover { background: var(--admin-bg-subtle, #f3eedf); }
.library-row-form button.danger { color: #8b2929; }
.library-row-form button.danger:hover { background: #faeaea; border-color: #d6a0a0; }

/* Pagination */
.library-pagination {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 1rem 0 0;
  font-size: 0.84rem;
  color: var(--admin-ink-muted, #7a7464);
}
.library-pagination a {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--admin-rule, #d8d2c0);
  border-radius: 3px;
  text-decoration: none;
  color: var(--admin-ink, #1d1c1a);
}
.library-pagination span.current { font-weight: 600; }

/* Publication-status chips (for the new publication_status column) */
.admin-chip--pub-status-draft     { background: #e8e3d8; color: #5a5448; }
.admin-chip--pub-status-scheduled { background: #dee4ef; color: #2e3e62; }
.admin-chip--pub-status-published { background: #d6e4d7; color: #2b4e34; }
.admin-chip--pub-status-trash     { background: #ebc9c0; color: #6d2e1f; }

/* Admin page sub-heading */
.admin-page-sub {
  font-family: var(--font-sans), Inter, sans-serif;
  font-size: 0.9rem;
  color: var(--admin-ink-muted);
  margin: 0.25rem 0 0;
  line-height: 1.4;
}

/* CMS pages — /[lang]/p/[slug] */
.cms-page {
  max-width: var(--read-max);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.cms-page > .cms-page-article > h1,
.cms-page-article > h1 {
  font-family: var(--font-serif), 'Source Serif 4', serif;
  font-variation-settings: "opsz" 60, "wght" 500;
  font-size: clamp(2rem, 4.4vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 1.5rem;
}

/* Two-column layout when a sidebar exists. Collapses on mobile. */
.cms-page--with-sidebar {
  max-width: calc(var(--ed-read-en) + var(--ed-marginalia) + var(--ed-rail-gap) + 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ed-marginalia);
  gap: var(--ed-rail-gap);
}
.cms-page-article { min-width: 0; }
.cms-page-sidebar {
  font-size: 0.94rem;
  line-height: 1.55;
  border-left: 0.5px solid var(--rule-soft);
  padding-left: 22px;
  position: sticky;
  top: 24px;
  align-self: start;
  color: var(--ink-muted);
}
.cms-page-sidebar h2,
.cms-page-sidebar h3 {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 1rem 0 0.5rem;
  font-family: var(--font-sans), 'Inter', system-ui, sans-serif;
  font-style: normal;
  letter-spacing: 0.16em;
}
.cms-page-sidebar h2:first-child,
.cms-page-sidebar h3:first-child { margin-top: 0; }
@media (max-width: 1023px) {
  .cms-page--with-sidebar { grid-template-columns: 1fr; }
  .cms-page-sidebar {
    position: static;
    border-left: none;
    border-top: 0.5px solid var(--rule-soft);
    padding: 1.5rem 0 0;
    margin-top: 2rem;
  }
}
.cms-page-empty {
  font-family: var(--font-serif), serif;
  font-style: italic;
  color: var(--ink-muted);
}

/* ========================================================================
   Mobile polish — tightening and proportions for ≤640px viewports.
   The redesign was authored at desktop scale; this block does the
   final sweep so the experience reads as native mobile rather than
   a downscaled desktop.
   ======================================================================== */
@media (max-width: 640px) {
  /* Hero — tighter padding, smaller display sizes */
  .hero {
    padding: clamp(2rem, 6vw, 3rem) 0 clamp(2rem, 4.5vw, 3rem);
  }
  .hero h1.lede {
    font-size: clamp(2.4rem, 9vw, 3.4rem) !important;
    line-height: 1.05;
  }
  .hero .hero-kicker {
    font-size: clamp(0.95rem, 3.4vw, 1.15rem);
    margin-top: 0.55rem;
    margin-bottom: clamp(1.25rem, 4vw, 1.75rem);
  }
  .search-field {
    padding: 0.45rem 0.45rem 0.45rem 1rem;
  }
  .search-field input { font-size: 0.95rem; }
  .search-field button.submit {
    padding: 0.55rem 0.95rem;
    font-size: 0.85rem;
  }
  .hints { gap: 0.5rem; padding: 0.85rem 0; font-size: 0.85rem; }
  .hero .hero-spacer {
    margin-top: clamp(1rem, 3vw, 1.5rem);
    font-size: 0.85rem;
  }

  /* Masthead — tighter on phones, brand pulls left, no awkward gaps */
  .site-head { padding: 0.85rem 0; gap: 0.5rem; }
  .brand { font-size: clamp(1.6rem, 7vw, 2.1rem); }

  /* AskInvite — smaller on phone, pull padding in */
  .ask-invite { padding: clamp(2.6rem, 8vw, 4rem) clamp(1rem, 5vw, 2rem); }
  .ask-invite-headline { font-size: clamp(1.85rem, 7.5vw, 2.6rem); }
  .ask-invite-lede { font-size: clamp(1rem, 3.5vw, 1.1rem); }
  .ask-invite-textarea { font-size: 1rem; padding: 0.85rem 1rem; }

  /* Section titles compress */
  .section-title h2 { font-size: clamp(1.4rem, 6vw, 1.85rem); }

  /* Footer band — reduce side padding */
  .foot-band {
    padding: clamp(2.5rem, 7vw, 3.5rem) clamp(1rem, 4vw, 2rem) calc(clamp(2.5rem, 7vw, 3.5rem) + env(safe-area-inset-bottom));
  }

  /* Topic cards — single column */
  .topic-explorer { grid-template-columns: 1fr; }
  .topic-card { min-height: auto; padding: 1.1rem 1.15rem 0.95rem; }
  .topic-card .arabic-hero { font-size: 2.1rem; line-height: 1.4; }
  .topic-card .english-name { font-size: 1.25rem; }
  .topic-card .meaning { font-size: 0.95rem; }

  /* Topics index page (the /topics route) */
  .topics-index-grid { grid-template-columns: 1fr; }

  /* Entry page two-column → single column already collapses at 1023.
     Tighten typography on phone for the article body. */
  .ed-h1 { font-size: clamp(1.85rem, 7.5vw, 2.4rem); }
  .ed-body { font-size: 16.5px; }
  .ed-hikmah { font-size: clamp(2rem, 9vw, 3rem); }
  .ed-source-quote { padding: 14px 16px; }
  .ed-source-quote-text { font-size: 22px; }

  /* Marginalia rail when collapsed — reduce padding */
  .ed-marginalia { font-size: 13.5px; }

  /* Archive panel collapsed below 1023 — tighten further on phone */
  .ed-archive-panel { font-size: 14.5px; }
  .ed-archive-panel a { font-size: 14.5px; }

  /* Tap targets — 44px min-height where applicable */
  .topic-chip, .hints a, .public-nav a, .ask-cta { min-height: 44px; }
}

/* Extra-narrow (<= 380px / iPhone SE class) */
@media (max-width: 380px) {
  .brand { font-size: 1.5rem; }
  .hero h1.lede { font-size: clamp(2.1rem, 9vw, 2.7rem) !important; }
  .ask-invite-headline { font-size: clamp(1.6rem, 7.5vw, 2rem); }
  .topics-index-card { padding: 1rem 1rem 0.85rem; }
}

/* ========================================================================
   PREVIEW GATE — /preview (public passcode entry)
   Parchment-on-sage palette. No nav, no footer, noindex.
   ======================================================================== */

.preview-shell {
  min-height: 100dvh;
  background: var(--hero-bg);          /* deep sage, same as masthead */
  color: var(--hero-ink);              /* warm parchment */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 3rem);
  font-family: var(--font-serif), 'Source Serif 4', Georgia, serif;
}

.preview-card {
  background: rgba(245, 237, 216, 0.06);   /* faint parchment tint */
  border: 0.5px solid rgba(245, 237, 216, 0.16);
  border-radius: var(--r-card);
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1.5rem, 5vw, 3rem);
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.preview-wordmark {
  font-family: var(--font-serif), 'Source Serif 4', serif;
  font-variation-settings: 'opsz' 60, 'wght' 600;
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  color: var(--hero-ink);
  letter-spacing: -0.025em;
  line-height: 1;
}

.preview-message {
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  line-height: 1.7;
  color: var(--hero-ink-soft);
}
.preview-message p { margin: 0 0 0.75em; }
.preview-message p:last-child { margin-bottom: 0; }
.preview-message a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.preview-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.preview-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 1rem;
  color: var(--hero-ink);
  background: rgba(245, 237, 216, 0.08);
  border: 0.5px solid rgba(245, 237, 216, 0.28);
  border-radius: var(--r-small);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.preview-input::placeholder { color: var(--hero-ink-muted); }
.preview-input:focus {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.2);
}
.preview-input:disabled { opacity: 0.5; cursor: not-allowed; }

.preview-button {
  padding: 0.75rem 1.5rem;
  background: var(--accent-deep);
  color: var(--hero-ink);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  min-height: 44px;
  transition: background 0.2s ease, transform 0.1s ease;
  align-self: flex-start;
}
.preview-button:hover:not(:disabled) { background: var(--accent); }
.preview-button:active:not(:disabled) { transform: scale(0.98); }
.preview-button:disabled { opacity: 0.55; cursor: not-allowed; }

.preview-error {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.88rem;
  color: #f5c0a0;
  background: rgba(220, 80, 40, 0.15);
  border: 0.5px solid rgba(220, 80, 40, 0.35);
  border-radius: var(--r-small);
  padding: 0.65rem 0.9rem;
  margin: 0;
  line-height: 1.5;
}

/* ========================================================================
   GATE PANEL — /admin/seo "Public access" section
   ======================================================================== */

.gate-panel {
  background: var(--admin-bg-subtle);
  border: 0.5px solid var(--admin-rule);
  border-radius: var(--r-card);
  padding: 1.4rem 1.6rem;
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.gate-panel-title {
  font-family: var(--font-serif), 'Source Serif 4', serif;
  font-variation-settings: "opsz" 36, "wght" 500;
  font-size: 1.2rem;
  color: var(--admin-ink);
  margin: 0 0 0.15rem;
}

.gate-panel-section {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-top: 1rem;
  border-top: 0.5px solid var(--admin-rule);
}

.gate-panel-section-label {
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0;
}

.gate-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-small);
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
}

.gate-banner--gated {
  background: rgba(201, 120, 40, 0.1);
  border: 0.5px solid rgba(201, 120, 40, 0.35);
  color: #7a4a10;
}

.gate-banner--open {
  background: rgba(43, 77, 46, 0.08);
  border: 0.5px solid rgba(43, 77, 46, 0.25);
  color: var(--status-approved);
}

.gate-passcode-status {
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: 0.88rem;
  color: var(--admin-ink-muted);
  margin: 0;
}

.gate-passcode-status strong {
  color: var(--admin-ink);
  font-family: var(--font-mono), ui-monospace, monospace;
  letter-spacing: 0.05em;
}

.gate-inline-form {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  flex-wrap: wrap;
}

.gate-passcode-input {
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: 0.92rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--admin-rule);
  border-radius: var(--r-card, 4px);
  background: var(--admin-bg, #faf7f0);
  color: var(--admin-ink, #1d1c1a);
  min-width: 14rem;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.gate-passcode-input:focus {
  border-color: var(--admin-ink-soft, #5a554d);
  box-shadow: 0 0 0 3px rgba(43, 61, 46, 0.1);
}

.gate-hint {
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-size: 0.78rem;
  color: var(--admin-ink-muted);
  margin: 0;
  font-style: italic;
}

/* ==========================================================================
   ENTRY SIGN-OFF — admin-managed sign-off block at foot of selected entries
   Brass hairline above, three lines (greeting, name, address) aligned to the
   reading edge: left for EN, right for UR — like a printed letter sign-off.
   ========================================================================== */

.entry-signoff {
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  max-width: 100%;
  text-align: start;
  position: relative;
}

/* Force RTL flow on Urdu so the hairline + text both read from the right
   reliably, even if an ancestor's direction is LTR. */
.entry-signoff[lang='ur'] {
  direction: rtl;
  text-align: right;
}

.entry-signoff::before {
  content: '';
  display: block;
  width: 6rem;
  height: 0.5px;
  background: var(--gold-soft);
  margin: 0 0 clamp(1.5rem, 3.5vw, 2.5rem);
}

.entry-signoff[lang='ur']::before {
  margin-left: auto;
  margin-right: 0;
}

.entry-signoff .greeting {
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-variation-settings: 'opsz' 36;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-muted);
  margin: 0 0 0.4rem;
}

.entry-signoff .name {
  font-family: var(--font-serif), serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 0.4rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: visible;
}

.entry-signoff .address {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
  margin: 0;
  white-space: nowrap;
  overflow: visible;
}

/* Allow wrapping on narrow viewports (≤640px) so long lines don't overflow. */
@media (max-width: 640px) {
  .entry-signoff .name,
  .entry-signoff .address {
    white-space: normal;
  }
}

/* Urdu: only font face / size / line-height differ. Colors and the brass
   hairline match EN exactly. */
.entry-signoff[lang='ur'] .greeting,
.entry-signoff[lang='ur'] .name {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-style: normal;
  font-variation-settings: normal;
  line-height: 1.85;
}

.entry-signoff[lang='ur'] .greeting { font-size: 1.05rem; }
.entry-signoff[lang='ur'] .name { font-size: 1.15rem; }

.entry-signoff[lang='ur'] .address {
  font-family: var(--font-nastaliq), 'Noto Naskh Arabic', serif;
  font-size: 0.95rem;
  line-height: 1.85;
}

/* /admin/signature — live preview grid */
.signoff-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

@media (max-width: 720px) {
  .signoff-preview-grid { grid-template-columns: 1fr; }
}

/* ========================================================================
   2026-07-08 — hero + footer + mobile refinement (frontend-design pass)
   Fixes: full-bleed atmospheric pattern (no mid-screen seam), mobile hero
   proportions (one-line lede, smaller gold line, hidden eyebrow, smaller
   Try chips), and a more finished footer.
   ======================================================================== */

/* --- Kill horizontal overflow from full-bleed `calc(50% - 50vw)` breakouts:
   50vw counts the scrollbar, so on any viewport WITH a scrollbar the masthead/
   footer bands push the document a scrollbar-width too wide (content shifts and
   clips on the right). Clipping the x-axis at the root removes that phantom
   width. Safe with the top-sticky header (root stays the scroll container). --- */
html, body { overflow-x: clip; max-width: 100%; }

/* The single atmospheric pattern is enhance.css `.masthead-band::after` (now a
   uniform, full-bleed diamond pattern with NO edge mask). Just keep content
   above it and disable the width-constrained hero pattern so it can't seam. */
.masthead-band > .page { position: relative; z-index: 1; }
.hero::before { display: none !important; }

@media (max-width: 640px) {
  /* Hide the three-pillar eyebrow on phones — reclaims vertical space. */
  .hero .hero-eyebrow { display: none; }

  /* Lede: keep "Sufism. Inner Path." on ONE line; gold "Purification" smaller. */
  .hero h1.lede { margin-bottom: 1.4rem; }
  .hero h1.lede.lede .lede-a {
    font-size: clamp(1.5rem, 6.8vw, 1.9rem) !important;
    white-space: nowrap;
    line-height: 1.1;
  }
  .hero h1.lede.lede .lede-em {
    font-size: clamp(1.25rem, 5.3vw, 1.55rem) !important;
    line-height: 1.15;
    margin-top: 0.2em;
  }

  /* Try chips: short labels + smaller text so the row reads calmly. */
  .hints { gap: 0.4rem; }
  .hints .label { font-size: 0.75rem; padding: 0.5rem 0.1rem; }
  .hints a { font-size: 0.78rem; padding: 0.4rem 0.75rem; }

  /* Single entry: tighten the left/right reading gutter further (~12px each). */
  body.asksufi-entry .page { padding-left: 0.5rem; padding-right: 0.5rem; }
  .ed-entry-grid { padding-left: 4px; padding-right: 4px; }

  /* Footer nav: one tidy row instead of wrapping to two lines. */
  .site-foot .links { gap: 0.9rem; font-size: 0.82rem; row-gap: 0.4rem; }

  /* Top-nav Ask button: smaller so it stops overflowing the menu bar.
     Selector must out-specify base `.site-head a.ask-cta` (which has an element
     selector), so include `a` + `.site-head`. */
  .site-head .mobile-head-actions a.ask-cta { padding: 0.32rem 0.6rem; font-size: 0.78rem; gap: 0.25rem; min-height: 34px; box-shadow: none; }
  .site-head .mobile-head-actions a.ask-cta svg { width: 0.75rem; height: 0.75rem; }

  /* Topic strip cuts off on phones — hide it (topics stay in nav + Topics section). */
  .topic-strip { display: none; }
}