/* ============================================================================
   STRUCTURAL OVERRIDES — bernazah  ·  «السجل المفتوح» / The Open Register
   Implements Docs/10-ui-design-spec.md. Loaded by _Layout.cshtml AFTER site.css.

   WHY THIS FILE EXISTS
   Tokens change how a layout is PAINTED; they cannot change its SHAPE. Three rounds
   of token work (palette, radii, font, band order) were rejected by the owner with
   the same sentence each time — «the design has not changed» — and side by side with
   المرامية's site they were right: the BONES were identical. This file changes the
   bones. It is 100% per-fork, so it can never conflict on `git merge upstream/main`.

   THE CONCEPT, IN ONE PARAGRAPH
   The site is composed as a public REGISTER, not as a brochure. This association owns
   no photography (OQ-5) and should not pretend otherwise. What it has is a record:
   licence 545, a named regulator, 33 published policy documents, 13 named people, 8
   programmes, 4 figures, one bank account. So the page borrows the grammar of an
   official register — a masthead stating who is registered and under what number,
   numbered entries instead of decorative cards, ruled lines and dot leaders instead
   of image wells, figures set large because a numeral is the only picture this
   association owns, and people set as a roster rather than as empty avatar circles.

   THE RULES THIS FILE OBEYS (CLAUDE.md §2, §9 · spec §11.1)
     · NO hex literal. Every value is var(--token); token VALUES live in theme.css.
     · NO `gap` in a flex container — Chrome 81 supports grid gap only. Margins, or grid.
     · NO :is() / :where() / :has() / aspect-ratio / color-mix() / ::marker /
       backdrop-filter / content-visibility, and none of the inset-inline-* or
       margin-inline / padding-inline SHORTHANDS (all Chrome 87). D12 floor is Chrome 81.
     · Inline-axis rules are written as PHYSICAL properties inside [dir="rtl"]. The
       -start/-end longhands would in fact run on the floor, but several rules here MUST
       be physical (the row tick, the drawer, the seal's diamonds) and mixing the two
       conventions in one RTL stylesheet is how an implementer mirrors the wrong edge.
     · Focus is written TWICE — :focus and :focus-visible — because Chrome 81 has no
       :focus-visible and would otherwise show no ring at all.
     · --lime, --bronze and --green-300 are NEVER text. Rules, ticks, seams, diamonds.
   ============================================================================ */


/* ============================================================================
   §1  GROUNDS site.css HAS NO TOKEN FOR
   The composition uses THREE deep values, and that sequence is what splits the page
   into thirds. site.css's .band--deep is hard-wired to --surface-deep (--green-800),
   so the other two need classes of their own.
   ============================================================================ */

/* Bands 1 and 9 — the two ACTION bands (donate is in both). The rhyme brackets the
   page. Written longhand rather than with :is(), which is off the floor. */
.band--deep-900 { background: var(--green-900); color: var(--on-deep); }
.band--deep-900 h1,
.band--deep-900 h2,
.band--deep-900 h3,
.band--deep-900 h4 { color: var(--on-deep); }
.band--deep-900 a { color: var(--on-deep); }
/* ⚠ LOAD-BEARING, and the exact bug site.css records at its own .band--deep rule.
   The line above paints EVERY anchor on the ground white — including an <a class="btn
   btn--onDeep">, which has a WHITE FILL. `.band--deep-900 a` is (0,2,0) and `.btn`'s
   own `color: var(--btn-fg)` is (0,1,0), so the blanket rule wins and the masthead's
   «تبرّع الآن» renders as an empty white rectangle. site.css restates the button's own
   colour for .band--deep / .footer / .hero; these are the grounds THIS file adds, and
   they need the same restatement. Regression check: for every .btn in the DOM,
   computed color !== computed background-color. */
.band--deep-900 .btn,
.pagehead .btn,
.crumbs .btn,
.drawer .btn { color: var(--btn-fg); }
.band--deep-900 :focus { outline-color: var(--focus-ring-on-deep); }
.band--deep-900 :focus-visible { outline-color: var(--focus-ring-on-deep); }

/* The footer goes a step deeper than any mid-page band, so the page has a visible
   floor. Upstream's .footer takes --surface-deep, the same value as band 5. */
.footer { background: var(--green-950); }

/* THE SEAM — 6px of the emblem's lime, full bleed. It appears exactly TWICE on the
   homepage: closing the masthead and opening the footer. Two lime lines bracketing a
   document is the whole of the site's decoration budget. */
.seam { display: block; block-size: var(--seam-h); background: var(--lime); }
/* Inner pages echo it at half volume under the page header. */
.seam--inner { block-size: var(--seam-h-inner); }


/* ============================================================================
   §2  DEVICE C — THE DIAMOND LATTICE  (spec §9.3)
   A CSS-only geometric ground derived from the leaf roundel's angular facets. Deep
   grounds ONLY, and exactly three of them (masthead, statistics, donate), so it stays
   an identity mark rather than wallpaper. repeating-linear-gradient is Chrome 26.
   ============================================================================ */

.lattice { position: relative; overflow: hidden; }
.lattice::before {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-image:
    repeating-linear-gradient( 45deg, var(--deep-fill) 0 1px, transparent 1px var(--lattice-cell)),
    repeating-linear-gradient(-45deg, var(--deep-fill) 0 1px, transparent 1px var(--lattice-cell));
  opacity: .5;               /* ~5% effective ink */
  pointer-events: none;
}
/* The statistics band runs one step quieter — the numerals are the graphic there. */
.lattice--quiet::before { opacity: .4; }
/* Everything inside a latticed band must sit ABOVE the pseudo-element. */
.lattice > * { position: relative; z-index: 1; }

@media (max-width: 719px) {
  .lattice::before {
    background-image:
      repeating-linear-gradient( 45deg, var(--deep-fill) 0 1px, transparent 1px var(--lattice-cell-sm)),
      repeating-linear-gradient(-45deg, var(--deep-fill) 0 1px, transparent 1px var(--lattice-cell-sm));
  }
}


/* ============================================================================
   §3  THE HEADER GOES DARK  (spec §3)
   The site has no topbar and no white header. One --green-900 bar, on every page.
   Deleting those two strips is the single largest change to the page's silhouette —
   it is what stops the fork reading as a recoloured المرامية before a visitor has
   scrolled a pixel. (.topbar is removed in MARKUP, not here: overriding it to
   display:none would leave a band in the DOM a future reader has to explain.)
   ============================================================================ */

.header {
  background: var(--green-900);
  border-bottom: 0;
  color: var(--on-deep);
}
.header__inner { min-height: 76px; }
.header.is-stuck { background: var(--green-900); box-shadow: var(--shadow-pop); }
.header.is-stuck .header__inner { min-height: 64px; }

/* The logo lockup, restated for the dark bar. */
.header .brand__name { color: var(--on-deep); font-weight: var(--h-weight-strong); }
.header .brand__sub  { color: var(--on-deep-muted); }
.header .brand__mark img {
  inline-size: 68px; block-size: 68px;
  transition: width var(--dur-slow) var(--ease), height var(--dur-slow) var(--ease);
}
.header.is-stuck .brand__mark img { inline-size: 52px; block-size: 52px; }

/* A 1px rule between the emblem and the wordmark — the lockup's only ornament. */
[dir='rtl'] .header .brand__text {
  border-right: 1px solid var(--line-deep);
  padding-right: var(--s4);
  margin-right: var(--s4);
}
[dir='ltr'] .header .brand__text {
  border-left: 1px solid var(--line-deep);
  padding-left: var(--s4);
  margin-left: var(--s4);
}

/* Nav items. Rest muted; hover and current go white with a lime underline. */
.header .nav a,
.header .nav summary {
  color: var(--on-deep-muted);
  font-weight: var(--h-weight);
  background: transparent;
  position: relative;
}
.header .nav a:hover,
.header .nav summary:hover { color: var(--on-deep); background: transparent; }
.header .nav a[aria-current='page'],
.header .nav summary[aria-current='page'] {
  color: var(--on-deep);
  font-weight: var(--h-weight-strong);
  background: transparent;
}
.header .nav details[open] > summary { color: var(--on-deep); background: transparent; }

/* The underline. site.css draws its own ::after on the current item; this restates it
   in --lime and animates it in from the reading edge. */
.header .nav a::after,
.header .nav summary::after {
  content: '';
  position: absolute;
  right: var(--s4); left: var(--s4);
  bottom: 10px;
  block-size: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
[dir='ltr'] .header .nav a::after,
[dir='ltr'] .header .nav summary::after { transform-origin: left; }
.header .nav a:hover::after,
.header .nav summary:hover::after,
.header .nav a[aria-current='page']::after,
.header .nav summary[aria-current='page']::after { transform: scaleX(1); }

/* The dropdown is a floating surface, so it stays LIGHT — a dark panel on a dark bar
   would lose its edge, and this is the one place --shadow-pop is earned.

   ⚠ EVERY rule in this block is written at [aria-current] specificity or repeated for
   it, and that is load-bearing. The bar's own rules above are `.header .nav a`
   (0,2,1) and `.header .nav a[aria-current='page']` (0,3,1) — so a panel rule written
   only as `.header .nav__panel a` LOSES to the current-page rule and paints the active
   item WHITE ON A WHITE PANEL. That is invisible on «/» and on «/programs»; it appears
   only on the six /about/* routes, which is exactly where the panel is most used. */
.header .nav__panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  min-inline-size: 248px;
}
.header .nav__panel a,
.header .nav__panel a[aria-current='page'] {
  color: var(--green-900);
  background: transparent;
  font-weight: var(--h-weight);
}
.header .nav__panel a::after,
.header .nav__panel a[aria-current='page']::after { content: none; display: none; }
.header .nav__panel a:hover,
.header .nav__panel a[aria-current='page']:hover { background: var(--row-hover); color: var(--green-900); }
/* The active item is marked by WEIGHT and a lime tick, not by colour — the panel has
   only one text colour that is legible on it. */
.header .nav__panel a[aria-current='page'] { font-weight: var(--h-weight-strong); }
[dir='rtl'] .header .nav__panel a[aria-current='page'] { border-right: 3px solid var(--lime); padding-right: calc(var(--s5) - 3px); }
[dir='ltr'] .header .nav__panel a[aria-current='page'] { border-left: 3px solid var(--lime); padding-left: calc(var(--s5) - 3px); }
.header .nav__panel :focus { outline-color: var(--focus-ring-soft); }
.header .nav__panel :focus-visible { outline-color: var(--focus-ring-soft); }

/* One CTA in the bar. «طلب مساعدة» is deliberately NOT here: a header button pointing
   at a closed intake form is a dead end. It lives in the services menu and bands 1/8. */
.header .burger { color: var(--on-deep); border-color: var(--line-deep); background: transparent; }
.header .burger:hover { background: var(--deep-fill-strong); border-color: var(--lightbox-chrome-line); }

.header :focus { outline-color: var(--focus-ring-on-deep); }
.header :focus-visible { outline-color: var(--focus-ring-on-deep); }

/* Spec §3.3 — below 480px the bar carries no CTA at all; the drawer's foot has both. */
@media (max-width: 479px) { .header__cta-mobile { display: none; } }
@media (max-width: 719px) { .header__inner { min-height: 60px; } .header .brand__mark img { inline-size: 44px; block-size: 44px; } }
@media (max-width: 1023px) and (min-width: 720px) { .header__inner { min-height: 68px; } }

/* The drawer sits a step deeper again, so it reads as a surface over the bar. */
.drawer__panel { background: var(--green-950); }
.drawer__nav a { color: var(--on-deep); border-bottom: 1px solid var(--line-deep); }
.drawer__nav a:hover { background: var(--deep-fill); color: var(--on-deep); }
.drawer__group { color: var(--on-deep-faint); }
.drawer__head { border-bottom: 1px solid var(--line-deep); }
.drawer__head .brand__name { color: var(--on-deep); }
.drawer__foot { border-top: 1px solid var(--line-deep); background: var(--green-950); }


/* ============================================================================
   §4  BAND 1 — THE MASTHEAD, AND THE SEAL  (spec §2 band 1, §9.1)
   Identity + registration + two actions, in one screen, with no photograph. It
   replaces THREE stacked elements of the sibling site: topbar, white header, and a
   hero whose facts sat in a white panel floating over a photo. A floating panel reads
   as «a widget placed on an image»; a ruled row reads as «an entry in a register».
   The first thing a visitor reads here is a licence number.
   ============================================================================ */

.mast { position: relative; }
.mast__inner { display: grid; grid-template-columns: 1fr; }

@media (min-width: 1024px) {
  .mast__inner {
    grid-template-columns: repeat(12, 1fr);
    grid-gap: var(--s5);
    align-items: center;
    min-block-size: 560px;     /* never 100vh — old Android URL-bar chrome */
  }
  /* RTL: columns 1-7 are the reading-start side. */
  .mast__id   { grid-column: 1 / span 7; }
  .mast__seal { grid-column: 9 / span 4; justify-self: center; }
}

/* 1 — the eyebrow rule + the licence line. */
.mast__licence {
  display: flex; align-items: center;
  font-size: var(--fs-xs); font-weight: var(--h-weight); letter-spacing: 0;
  color: var(--on-deep);
  margin: 0 0 var(--s4);
}
.mast__licence::before {
  content: ''; flex: none;
  inline-size: 20px; block-size: 2px;
  background: var(--lime);
}
[dir='rtl'] .mast__licence::before { margin-left: 10px; }
[dir='ltr'] .mast__licence::before { margin-right: 10px; }

/* 2 — the H1 carries BOTH tiers: the legal name identifies, the tagline displays.
   SEO keeps one <h1> containing both. */
.mast__h1 { margin: 0; letter-spacing: 0; }
.mast__name {
  display: block;
  font-size: var(--fs-lg);
  font-weight: var(--h-weight);
  color: var(--on-deep);
  line-height: var(--lh-tight);
}
.mast__line {
  display: block;
  margin-top: var(--s3);
  font-size: var(--fs-3xl);
  font-weight: var(--h-weight-strong);
  color: var(--on-deep);
  line-height: var(--lh-display);
  letter-spacing: 0;
}

/* 3 — the CTA pair. No flex gap (Chrome 81): the second button carries the margin. */
.mast__cta { display: flex; flex-wrap: wrap; align-items: center; margin-top: var(--s6); }
[dir='rtl'] .mast__cta > * + * { margin-right: var(--s3); }
[dir='ltr'] .mast__cta > * + * { margin-left: var(--s3); }

/* 4 — THE REGISTER RULE. Four facts on hairlines, directly on the ground. This is the
   device that replaces the sibling's floating white facts panel. */
.mast__facts {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  grid-gap: 0;
  margin-top: var(--s7);
}
.fact { padding: 0 var(--s5); }
[dir='rtl'] .fact + .fact { border-right: 1px solid var(--line-deep); }
[dir='ltr'] .fact + .fact { border-left: 1px solid var(--line-deep); }
[dir='rtl'] .mast__facts > .fact:first-child { padding-right: 0; }
[dir='ltr'] .mast__facts > .fact:first-child { padding-left: 0; }
.fact__label {
  display: block;
  font-size: var(--fs-xs); font-weight: 500;
  color: var(--on-deep-faint);      /* 4.93:1 on --green-800, computed */
  margin-bottom: 4px;
}
.fact__value {
  display: block;
  font-size: var(--fs-md); font-weight: var(--h-weight);
  color: var(--on-deep);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

@media (max-width: 1023px) {
  .mast__facts { grid-template-columns: 1fr 1fr; grid-gap: var(--s4); margin-top: var(--s6); }
  .fact { padding: 0; }
  [dir='rtl'] .fact + .fact,
  [dir='ltr'] .fact + .fact { border-right: 0; border-left: 0; }
  .mast__facts > .fact:nth-child(3),
  .mast__facts > .fact:nth-child(4) { border-top: 1px solid var(--line-deep); padding-top: var(--s4); }
  .mast__cta > .btn { display: flex; width: 100%; }
  [dir='rtl'] .mast__cta > * + *,
  [dir='ltr'] .mast__cta > * + * { margin-right: 0; margin-left: 0; margin-top: var(--s3); }
}

/* ── THE SEAL ───────────────────────────────────────────────────────────────
   The answer to «the emblem is 68px and there is no vector» (OQ-2). Concentric rings
   enlarge the mark's PRESENCE without upscaling its ~61×71px of real detail: the PNG
   itself never renders above 68px, where it visibly softens. */
.seal {
  position: relative;
  inline-size: 220px; block-size: 220px;
  display: grid; place-items: center;
  border: 2px solid var(--lightbox-chrome-hover);
  border-radius: 50%;
}
.seal::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  inline-size: 168px; block-size: 168px;
  margin-top: -84px; margin-left: -84px;
  border: 1px solid var(--deep-fill-strong);
  border-radius: 50%;
}
.seal img { inline-size: 68px; block-size: 68px; object-fit: contain; position: relative; }

/* Four lime diamonds at the ring's diagonal positions. Absolute percentages, because
   there is no other way to sit on a circle without trigonometry in CSS. */
.seal__pip {
  position: absolute;
  inline-size: 6px; block-size: 6px;
  background: var(--lime);
  transform: rotate(45deg);
}
.seal__pip--tr { top: 12.5%; left: 12.5%; }
.seal__pip--tl { top: 12.5%; right: 12.5%; }
.seal__pip--br { bottom: 12.5%; left: 12.5%; }
.seal__pip--bl { bottom: 12.5%; right: 12.5%; }

@media (max-width: 1279px) { .seal { inline-size: 180px; block-size: 180px; } .seal::before { inline-size: 138px; block-size: 138px; margin-top: -69px; margin-left: -69px; } }
@media (max-width: 1023px) { .seal { inline-size: 160px; block-size: 160px; margin: 0 auto var(--s6); } .seal::before { inline-size: 122px; block-size: 122px; margin-top: -61px; margin-left: -61px; } }
@media (max-width: 719px)  { .seal { inline-size: 132px; block-size: 132px; } .seal::before { inline-size: 100px; block-size: 100px; margin-top: -50px; margin-left: -50px; } .seal img { inline-size: 56px; block-size: 56px; } }
@media (max-width: 479px)  { .seal { inline-size: 116px; block-size: 116px; } .seal::before { inline-size: 88px; block-size: 88px; margin-top: -44px; margin-left: -44px; } .seal img { inline-size: 48px; block-size: 48px; } }


/* ============================================================================
   §5  SECTION HEADING & EYEBROW  (spec §5.7)
   The measurable split between a designed charity site and an assembled one is the
   heading scale: rf.org.sa sets 32px start-aligned with a rule; the three Rafed-CMS
   sites set 18px bold and CENTRED, barely above body copy. A centred 18px section
   heading is the cheapest possible way to look like the template this was forked from.
   ============================================================================ */

.shead { margin-bottom: var(--s7); }
.shead__eyebrow {
  display: flex; align-items: center;
  font-size: var(--fs-xs); font-weight: var(--h-weight);
  letter-spacing: 0;
  color: var(--bronze-ink);            /* the warm text colour — 6.69:1 */
  margin: 0 0 var(--s3);
}
.shead__eyebrow::before {
  content: ''; flex: none;
  inline-size: 20px; block-size: 2px;
  background: var(--lime);
}
[dir='rtl'] .shead__eyebrow::before { margin-left: 10px; }
[dir='ltr'] .shead__eyebrow::before { margin-right: 10px; }
.band--deep .shead__eyebrow,
.band--deep-900 .shead__eyebrow { color: var(--on-deep); }

.shead h2 {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--h-weight-strong);
  line-height: var(--lh-display);
  letter-spacing: 0;
  color: var(--h-color);
}
.band--deep .shead h2,
.band--deep-900 .shead h2 { color: var(--on-deep); }

.shead__lead {
  margin: var(--s4) 0 0;
  font-size: var(--fs-md); font-weight: 400;
  line-height: var(--lh-body);
  color: var(--ink-muted);
  max-inline-size: var(--measure-lead);
  text-align: right;
}
[dir='ltr'] .shead__lead { text-align: left; }
.band--deep .shead__lead,
.band--deep-900 .shead__lead { color: var(--on-deep-muted); }

/* With a trailing link, the header becomes a two-cell grid. Below 720px the link
   moves BELOW the section content instead — never above it. */
@media (min-width: 720px) {
  .shead--row { display: grid; grid-template-columns: 1fr auto; align-items: end; grid-gap: var(--s5); }
}
@media (max-width: 1023px) { .shead { margin-bottom: var(--s6); } }
@media (max-width: 719px)  { .shead--row .btn--text { display: none; } }
.shead__after { display: none; margin-top: var(--s5); }
@media (max-width: 719px)  { .shead__after { display: block; } }


/* ============================================================================
   §6  BUTTONS  (spec §5.6)
   site.css builds .btn from --btn-bg / --btn-fg / --btn-bd custom properties, so a
   variant here is three declarations and inherits every geometry, focus and
   transition rule already written. letter-spacing is forced to 0: positive tracking
   severs the cursive joins between Arabic letters in every major engine.
   ============================================================================ */

.btn { letter-spacing: 0; }

/* On a deep ground: white fill, --green-900 label = 11.08:1. */
.btn--onDeep { --btn-bg: var(--paper); --btn-fg: var(--green-900); --btn-bd: var(--paper); }
.btn--onDeep:hover { --btn-bg: var(--stone); --btn-bd: var(--stone); }
.btn--onDeep:active { --btn-bg: var(--stone); --btn-bd: var(--green-300); }

.btn--ghostDeep { --btn-bg: transparent; --btn-fg: var(--on-deep); --btn-bd: var(--lightbox-chrome-line); }
.btn--ghostDeep:hover { --btn-bg: var(--deep-fill-strong); --btn-bd: var(--on-deep); }
.btn--ghostDeep:active { --btn-bg: var(--deep-fill-strong); --btn-bd: var(--on-deep); }

/* A text button, not a box. Used for every «see all» in a section header. */
.btn--text {
  --btn-bg: transparent; --btn-bd: transparent;
  --btn-fg: var(--green);
  min-height: 44px;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: var(--fs-sm);
}
.btn--text:hover { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--green-700); }
.band--deep .btn--text,
.band--deep-900 .btn--text { --btn-fg: var(--on-deep); }

/* A disabled action is NEVER the only signal that intake is closed — a .pill--neutral
   states it in words, and the server rejects the POST regardless (D10). */
.btn[aria-disabled='true'] {
  --btn-bg: var(--stone); --btn-fg: var(--ink-muted); --btn-bd: var(--line-strong);
  cursor: not-allowed;
}


/* ============================================================================
   §7  BAND 2 — الرؤية والرسالة  (spec §2 band 2)
   Two sentences, two cells, one vertical hairline. It costs ~120px of page and it
   answers the only question a first-time visitor has after the masthead. Placing it
   BEFORE the programmes makes the programme list read as «how», not as «what».
   ============================================================================ */

.statements { display: grid; grid-template-columns: 1fr; grid-gap: var(--s5); }
@media (min-width: 1024px) {
  .statements { grid-template-columns: 1fr 1fr; grid-gap: var(--s7); }
  [dir='rtl'] .statement + .statement { border-right: 1px solid var(--line-strong); padding-right: var(--s7); }
  [dir='ltr'] .statement + .statement { border-left: 1px solid var(--line-strong); padding-left: var(--s7); }
}
@media (max-width: 1023px) {
  .statement + .statement { border-top: 1px solid var(--line-strong); padding-top: var(--s5); margin-top: var(--s5); }
}
.statement__body {
  margin: 0;
  color: var(--green-900);
  font-weight: 500;
  max-inline-size: 46ch;
  text-align: right;
}
[dir='ltr'] .statement__body { text-align: left; }
/* Optically balanced despite very different lengths: a short statement is set large
   and tight, a long one steps down and opens its leading. */
.statement__body--short { font-size: var(--fs-lg); line-height: var(--lh-tight); }
.statement__body--long  { font-size: var(--fs-md); line-height: var(--lh-body); }


/* ============================================================================
   §8  BAND 3 — THE PROGRAMME REGISTER  (spec §2 band 3, §5.1)
   Eight items in a 4-up card grid is two identical rows of four — the exact shape the
   sibling uses and the shape that reads as «template». A numbered register reads the
   list AS a list, holds an odd count gracefully, is far denser (~430px instead of
   ~760px) and needs no image well per item.
   ============================================================================ */

.register { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .register { grid-template-columns: 1fr 1fr; column-gap: var(--s7); row-gap: 0; }
}
/* Every row carries the bottom hairline; the TOP row needs one too or the register opens with
   an unclosed edge.
   ⚠ The flow is ROW-MAJOR (the default), so at two columns the top row is children 1 AND 2 —
   not 1 and 5. It was written as :nth-child(5) on the assumption of column-major flow, which
   would put 01 and 05 side by side; with the ordinals visible, reading 01 → 02 across is the
   natural order, so the flow stays row-major and the selector matches it. Rendered proof of the
   mismatch: the left column's first row had no top border while the right column's did. */
.register > .prow:first-child { border-top: 1px solid var(--line); }
@media (min-width: 1024px) {
  .register > .prow:nth-child(2) { border-top: 1px solid var(--line); }
}

.prow {
  position: relative;
  display: grid;
  grid-template-columns: 34px 44px 1fr 18px;
  align-items: center;
  grid-gap: var(--s4);
  min-block-size: 92px;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
/* THE TICK — a 3px lime bar on the reading edge, bled past the text column. Physical,
   because inset-inline-* is off the Chrome 81 floor. `calc(var(--s4) * -1)` and not
   `-var(--s4)`, which is not valid CSS. */
[dir='rtl'] .prow::before,
[dir='ltr'] .prow::before {
  content: '';
  position: absolute; top: 0; bottom: 0;
  inline-size: 3px;
  background: var(--lime);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}
[dir='rtl'] .prow::before { right: calc(var(--s4) * -1); }
[dir='ltr'] .prow::before { left: calc(var(--s4) * -1); }

.prow__ord {
  font-size: var(--fs-sm); font-weight: var(--h-weight);
  color: var(--bronze-ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: .06em;
  transition: color var(--dur) var(--ease);
}
.prow__tile {
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  background: var(--green-200);
  border-radius: var(--r-sm);
  color: var(--green-900);
}
.prow__title {
  margin: 0;
  font-size: var(--fs-md); font-weight: var(--h-weight);
  line-height: var(--lh-tight);
  color: var(--green-900);
}
.prow__summary {
  margin: 6px 0 0;
  font-size: var(--fs-sm); font-weight: 400;
  line-height: 1.7;
  color: var(--ink-muted);
  /* Two-line clamp, Chrome 81-safe (-webkit-line-clamp is Chrome 6+). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prow__chev { color: var(--ink-muted); transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }

/* States. The title colour does NOT move on hover — it is already the darkest value,
   so changing it would be a regression, not a response. */
.prow:hover { background: var(--row-hover); }
.prow:hover::before { transform: scaleY(1); }
.prow:hover .prow__ord { color: var(--green); }
.prow:hover .prow__chev { color: var(--green); transform: translateX(-3px); }
[dir='ltr'] .prow:hover .prow__chev { transform: translateX(3px); }
.prow:active { background: var(--surface-hover); }
.prow:focus { outline: 3px solid var(--focus-ring-soft); outline-offset: -2px; }
.prow:focus-visible { outline: 3px solid var(--focus-ring-soft); outline-offset: -2px; }
.prow:focus::before { transform: scaleY(1); }
.prow:focus-visible::before { transform: scaleY(1); }

@media (max-width: 479px) {
  .prow { grid-template-columns: 28px 40px 1fr 16px; grid-gap: var(--s3); min-block-size: 84px; }
  .prow__tile { inline-size: 40px; block-size: 40px; }
}


/* ============================================================================
   §9  BAND 4 — كلمة رئيس مجلس الإدارة  (spec §2 band 4, §5.5)
   The only human voice the association has published, placed high on the page
   precisely BECAUSE there is no photograph to carry warmth. The text is the image.
   ============================================================================ */

.word { display: grid; grid-template-columns: 1fr; grid-gap: var(--s5); }
@media (min-width: 1024px) {
  .word { grid-template-columns: 4fr 8fr; grid-gap: var(--s7); align-items: start; }
  .word__rail { position: sticky; top: 96px; }
}
.word__quote {
  font-size: 96px;
  line-height: 1;
  color: var(--bronze);        /* decorative — carries no information, so 3.34:1 is fine */
  opacity: .35;
}
@media (max-width: 1023px) { .word__quote { font-size: 64px; } }
.word__role { margin: var(--s5) 0 0; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-muted); }
.word__name { margin: 4px 0 0; font-size: var(--fs-lg); font-weight: var(--h-weight); color: var(--green-900); }
.word__rule {
  display: block;
  inline-size: var(--rule-w); block-size: var(--rule-h);
  background: var(--rule-color);
  margin-top: var(--s4);
}
.word__body {
  max-inline-size: var(--measure-narrow);
  text-align: right;
  line-height: var(--lh-body);
}
[dir='ltr'] .word__body { text-align: left; }
.word__body p { margin: 0 0 var(--s5); }
.word__body p:first-child { font-size: var(--fs-md); font-weight: 500; color: var(--green-900); }
.word__body p { font-size: var(--fs-base); color: var(--ink); }
/* Qur'anic and hadith fragments stay LIVE TEXT inside the chairman's prose — never a
   decorative frame, and never set into an image (spec §9's hard prohibition). */
.ayah { color: var(--bronze-ink); font-weight: 500; }

/* The disclosure. No height animation: <details> cannot be transitioned reliably and
   a jump beats a stutter on a 2019 Android phone. */
.word__more { margin-top: calc(var(--s5) * -1); }
.word__more > summary {
  display: inline-flex; align-items: center;
  min-block-size: 44px;
  font-size: var(--fs-sm); font-weight: var(--h-weight);
  color: var(--green);
  cursor: pointer;
  list-style: none;                                  /* ::marker is Chrome 86 */
}
.word__more > summary::-webkit-details-marker { display: none; }
[dir='rtl'] .word__more > summary svg { margin-right: var(--s2); }
[dir='ltr'] .word__more > summary svg { margin-left: var(--s2); }
.word__more > summary svg { transition: transform var(--dur) var(--ease); }
.word__more[open] > summary svg { transform: rotate(180deg); }
.word__more[open] .word__more-open { display: none; }
.word__more-close { display: none; }
.word__more[open] .word__more-close { display: inline; }
.word__more > summary:focus { outline: 3px solid var(--focus-ring-soft); outline-offset: 2px; }
.word__more > summary:focus-visible { outline: 3px solid var(--focus-ring-soft); outline-offset: 2px; }


/* ============================================================================
   §10  BAND 5 — THE FIGURES LEDGER  (spec §2 band 5, §5.2)
   One continuous ruled band, not four white cards. The numerals ARE the imagery.
   ============================================================================ */

.ledger-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
@media (min-width: 1024px) { .ledger-stats { grid-template-columns: repeat(4, 1fr); } }

.ledger-stats .stat {
  background: transparent;
  padding: var(--s6) var(--s4);
  text-align: center;
  display: block;
}
[dir='rtl'] .ledger-stats .stat + .stat { border-right: 1px solid var(--line-deep); }
[dir='ltr'] .ledger-stats .stat + .stat { border-left: 1px solid var(--line-deep); }
/* Below 1024px the band is 2-up, so cells 3 and 4 start a new row and need a top rule
   while cell 3 must lose the side rule it would otherwise inherit as a middle child. */
@media (max-width: 1023px) {
  .ledger-stats .stat:nth-child(3),
  .ledger-stats .stat:nth-child(4) { border-top: 1px solid var(--line-deep); }
  [dir='rtl'] .ledger-stats .stat:nth-child(3) { border-right: 0; }
  [dir='ltr'] .ledger-stats .stat:nth-child(3) { border-left: 0; }
}

.ledger-stats .stat__value {
  font-size: var(--fs-3xl);
  font-weight: var(--h-weight-strong);
  color: var(--on-deep);
  line-height: var(--lh-display);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.ledger-stats .stat__rule {
  display: block;
  inline-size: 28px; block-size: 2px;
  background: var(--rule-color);
  margin: var(--s3) auto;
}
.ledger-stats .stat__label {
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--on-deep-muted);       /* 5.87:1 on --green-800, computed */
  line-height: 1.6;
}

/* The light-ground variant, for inner pages. */
.stat--onLight .stat__value { color: var(--green-900); }
.stat--onLight .stat__label { color: var(--ink-muted); }


/* ============================================================================
   §11  BAND 6 — THE TRANSPARENCY LEDGER  (spec §2 band 6, §5.3)
   33 published compliance documents is unusual for an association this size and is the
   most persuasive thing on the site. The legacy site buried it at the bottom.
   The DOT LEADER is the design: it is what makes five text items read as a register
   rather than as an unstyled <ul>.
   ============================================================================ */

.split { display: grid; grid-template-columns: 1fr; grid-gap: var(--s6); }
@media (min-width: 1024px) { .split { grid-template-columns: 4fr 8fr; grid-gap: var(--s7); align-items: start; } }

/* Device A — the total, set as the page's second-largest numeral. */
.bignum {
  display: block;
  font-size: var(--fs-3xl);
  font-weight: var(--h-weight-strong);
  color: var(--green-900);
  line-height: var(--lh-display);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  margin-top: var(--s5);
}
.bignum__unit { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-muted); margin-top: var(--s1); }

.ledger { list-style: none; margin: 0; padding: 0; }
.doc-row {
  display: flex; align-items: baseline;
  min-block-size: 56px;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
.doc-row__title { flex: 0 0 auto; font-size: var(--fs-base); font-weight: 500; color: var(--green-900); transition: color var(--dur) var(--ease); }
.doc-row__leader {
  flex: 1 1 auto;
  margin: 0 12px;
  border-bottom: 1px dotted var(--line-strong);
  transform: translateY(-5px);
  transition: border-color var(--dur) var(--ease);
}
.doc-row__count {
  flex: 0 0 auto;
  font-size: var(--fs-sm); color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.doc-row:hover { background: var(--row-hover); }
.doc-row:hover .doc-row__title { color: var(--green); }
.doc-row:hover .doc-row__leader { border-bottom-color: var(--green-300); }
.doc-row:focus { outline: 3px solid var(--focus-ring-soft); outline-offset: -2px; }
.doc-row:focus-visible { outline: 3px solid var(--focus-ring-soft); outline-offset: -2px; }
/* A policy PDF is not an article — a visited-purple here would be noise. */
.doc-row:visited .doc-row__title { color: var(--green-900); }

/* File rows on /documents carry a type badge and a size. */
.doc-row--file .doc-row__badge {
  flex: 0 0 auto;
  inline-size: 32px; block-size: 32px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--chip-neutral-bg);
  border: 1px solid var(--chip-neutral-line);
  font-size: 10px; font-weight: var(--h-weight-strong);
  color: var(--green-900);
  align-self: center;
}
[dir='rtl'] .doc-row--file .doc-row__badge { margin-left: var(--s4); }
[dir='ltr'] .doc-row--file .doc-row__badge { margin-right: var(--s4); }
.doc-row--file .doc-row__title { flex: 0 1 auto; min-inline-size: 0; }
.doc-row__meta {
  flex: 0 0 auto;
  font-size: var(--fs-xs); color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.doc-row__dl { flex: 0 0 auto; color: var(--ink-muted); align-self: center; transition: color var(--dur) var(--ease); }
[dir='rtl'] .doc-row__dl { margin-right: var(--s4); }
[dir='ltr'] .doc-row__dl { margin-left: var(--s4); }
.doc-row:hover .doc-row__dl { color: var(--green); }
@media (max-width: 479px) {
  .doc-row--file .doc-row__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* The two regulator lines below the ledger, each ticked with a bronze diamond. */
.regline {
  display: flex; align-items: center;
  font-size: var(--fs-sm); color: var(--ink-muted);
  margin-top: var(--s3);
}
.regline::before {
  content: ''; flex: none;
  inline-size: 6px; block-size: 6px;
  background: var(--bronze);
  transform: rotate(45deg);
}
[dir='rtl'] .regline::before { margin-left: var(--s3); }
[dir='ltr'] .regline::before { margin-right: var(--s3); }


/* ============================================================================
   §12  BAND 7 — THE ROSTER  (spec §2 band 7, §5.4)
   Thirteen real names are a stronger trust signal for a rural association than any
   graphic, and they cost no photography.

   PII GUARD (CLAUDE.md §1.3). A person row has NO avatar, NO photo slot, NO contact
   affordance and no hover state — deliberately, so there is nowhere for a future admin
   to paste a national ID or a personal mobile. Initials-in-a-circle is explicitly
   rejected: it reads as a CRM contact list and fabricates a graphic identity for a
   private individual.
   ============================================================================ */

.roster { display: grid; grid-template-columns: 1fr; column-gap: var(--s7); row-gap: 0; }
@media (min-width: 720px)  { .roster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .roster { grid-template-columns: repeat(3, 1fr); } }
.roster--wide { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .roster--wide { grid-template-columns: repeat(2, 1fr); } }

.person {
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline;
  grid-gap: var(--s4);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.person__name { font-size: var(--fs-md); font-weight: var(--h-weight); color: var(--green-900); line-height: var(--lh-tight); }
.person__role { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-muted); }

/* The chairman is distinguished by a rule and a diamond, not by a glyph: four role
   glyphs across nine members classify EIGHT of them identically, which adds graphic
   weight and no information. */
.person--chair {
  grid-column: 1 / -1;
  border-top: 2px solid var(--green-800);
  padding-top: var(--s5); padding-bottom: var(--s5);
}
.person--chair .person__name { font-size: var(--fs-lg); font-weight: var(--h-weight-strong); }
.person--chair .person__name::before {
  content: '';
  display: inline-block;
  inline-size: 8px; block-size: 8px;
  background: var(--lime);
  transform: rotate(45deg);
  vertical-align: middle;
}
[dir='rtl'] .person--chair .person__name::before { margin-left: 12px; }
[dir='ltr'] .person--chair .person__name::before { margin-right: 12px; }

.roster-foot {
  display: flex; flex-wrap: wrap; align-items: center;
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
  margin-top: var(--s4);
}
[dir='rtl'] .roster-foot > * + * { margin-right: var(--s4); }
[dir='ltr'] .roster-foot > * + * { margin-left: var(--s4); }
.roster-foot__label { font-size: var(--fs-sm); font-weight: var(--h-weight); color: var(--green-900); }
.roster-foot__count { font-size: var(--fs-sm); color: var(--ink-muted); }


/* ============================================================================
   §13  BAND 8 — BENEFICIARY SERVICES, AND THE STATUS PILL  (spec §2 band 8, §5.8)
   Two doors: submit, and track. Flat panels — hover moves the border only, never a
   lift and never a shadow (D11).
   ============================================================================ */

.panels { display: grid; grid-template-columns: 1fr; grid-gap: var(--s5); }
@media (min-width: 720px) { .panels { grid-template-columns: 1fr 1fr; } }

.spanel {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: var(--s5);
  transition: border-color var(--dur) var(--ease);
}
.spanel:hover { border-color: var(--card-hover-border); }
/* The 3px marker rule — used at most three times on a page. */
.spanel--marked { border-top-width: 3px; border-top-color: var(--green-800); }
.spanel__tile {
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  background: var(--green-200);
  border-radius: var(--r-sm);
  color: var(--green-900);
  margin-bottom: var(--s4);
}
.spanel__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--h-weight); color: var(--green-900); }
.spanel__text { margin: var(--s2) 0 var(--s4); font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.8; }
.spanel__actions { display: flex; flex-wrap: wrap; align-items: center; }
[dir='rtl'] .spanel__actions > * + * { margin-right: var(--s3); }
[dir='ltr'] .spanel__actions > * + * { margin-left: var(--s3); }

.pill {
  display: inline-flex; align-items: center;
  min-block-size: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid;
  font-size: var(--fs-xs); font-weight: var(--h-weight);
  white-space: nowrap;
}
.pill--ok      { background: var(--ok-wash); border-color: var(--ok-line); color: var(--ok); }
.pill--neutral { background: var(--chip-neutral-bg); border-color: var(--chip-neutral-line); color: var(--chip-neutral-fg); }
.pill--warn    { background: var(--warn-wash); border-color: var(--warn-line); color: var(--bronze-ink); }
.pill--info    { background: var(--info-wash); border-color: var(--info-line); color: var(--info); }


/* ============================================================================
   §14  BAND 9 — THE ACCOUNT  (spec §2 band 9)
   With no gateway (D7), the IBAN *is* the call to action — so it is typeset as the
   band's display object and is the largest graphic thing on the page.
   Explicitly absent: progress bar, thermometer, amount presets, card logos, donor
   counter. None of it exists, and implying it is a compliance risk.
   ============================================================================ */

.account { display: grid; grid-template-columns: 1fr; grid-gap: var(--s6); }
@media (min-width: 1024px) { .account { grid-template-columns: 7fr 5fr; grid-gap: var(--s7); align-items: end; } }

.iban-block { margin-top: var(--s5); }
.iban__label { display: block; font-size: var(--fs-xs); color: var(--on-deep-faint); margin-bottom: var(--s2); }
.iban {
  font-size: var(--fs-xl);
  font-weight: var(--h-weight);
  color: var(--on-deep);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: .06em;
  direction: ltr;
  unicode-bidi: embed;
  overflow-wrap: break-word;
}
[dir='rtl'] .iban > span { margin-left: .45em; }
.iban > span:last-child { margin-left: 0; }
@media (max-width: 1023px) { .iban { font-size: var(--fs-lg); } }

.acct-facts { display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--s4); margin-top: var(--s5); }
.acct-facts dt { font-size: var(--fs-xs); color: var(--on-deep-faint); margin-bottom: 4px; }
.acct-facts dd { margin: 0; font-size: var(--fs-sm); font-weight: var(--h-weight); color: var(--on-deep); }
.account__actions > .btn { display: flex; width: 100%; }
.account__actions > .btn + .btn { margin-top: var(--s3); }


/* ============================================================================
   §15  THE FOOTER  (spec §4)
   Four ruled columns and the account sub-band. Deliberately absent: social icons (no
   accounts exist — OQ-9), a newsletter field (no system, and PDPL exposure for zero
   benefit), partner logos, certification badges, a «designed by» credit.
   ============================================================================ */

.footer__grid { grid-gap: var(--s7); }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 4fr 2.5fr 2.5fr 3fr; } }

/* Every column heading gets the signature rule under it. */
.footer h3,
.footer h4,
.footer .footer__head {
  font-size: var(--fs-sm);
  font-weight: var(--h-weight-strong);
  color: var(--on-deep);
  margin: 0 0 var(--s5);
}
.footer h3::after,
.footer h4::after,
.footer .footer__head::after {
  content: '';
  display: block;
  inline-size: var(--rule-w); block-size: var(--rule-h);
  background: var(--rule-color);
  margin-top: var(--s2);
}
.footer a { color: var(--on-deep-muted); text-decoration: none; }
.footer a:hover { color: var(--on-deep); text-decoration: underline; text-underline-offset: 4px; }
.footer :focus { outline-color: var(--focus-ring-on-deep); }
.footer :focus-visible { outline-color: var(--focus-ring-on-deep); }

.footer__compliance {
  border-top: 1px solid var(--line-deep);
  margin-top: var(--s4);
  padding-top: var(--s4);
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--on-deep-faint);
}
.footer__compliance p { margin: 0 0 var(--s2); }

/* Repeating the account in the footer is deliberate: with no gateway (D7), the account
   number IS the product. The markup is site.css's .footer__bank strip; this restates it
   as one ruled line rather than the bordered box it renders upstream. */
.footer__bank {
  border-top: 1px solid var(--line-deep);
  border-bottom: 0;
  border-left: 0; border-right: 0;
  border-radius: 0;
  background: transparent;
  padding: var(--s5) 0;
}
.footer__bank dt { font-size: var(--fs-xs); color: var(--on-deep-faint); }
.footer__bank dd {
  font-size: var(--fs-md); font-weight: var(--h-weight);
  color: var(--on-deep);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  direction: ltr; unicode-bidi: embed;
}
.footer__legal { border-top: 1px solid var(--line-deep); }
.footer__legal-registry,
.footer__legal-row { color: var(--on-deep-faint); font-size: var(--fs-xs); }
.footer__legal-registry b { color: var(--on-deep-muted); }


/* ============================================================================
   §16  THE SHARED PAGE HEADER  (spec §10.0)
   A compact deep band under the opaque header, on every page except «/». The lattice
   stays OFF here — it belongs to the homepage's three bands only. The crumbs strip
   that _Layout renders immediately above it takes the same ground, so the two read as
   one band without any markup change.
   ============================================================================ */

.crumbs { background: var(--green-900); border-bottom: 0; padding-top: var(--s5); }
.crumbs li { color: var(--on-deep-faint); }
.crumbs a { color: var(--on-deep-muted); text-decoration: none; }
.crumbs a:hover { color: var(--on-deep); text-decoration: underline; }
.crumbs li + li::before { color: var(--lightbox-chrome-line); }
.crumbs [aria-current='page'] { color: var(--on-deep-faint); }
.crumbs :focus { outline-color: var(--focus-ring-on-deep); }
.crumbs :focus-visible { outline-color: var(--focus-ring-on-deep); }

.pagehead {
  background: var(--green-900);
  color: var(--on-deep);
  border-bottom: 0;
  position: relative;
}
.pagehead__inner {
  padding-block-start: var(--s7);
  padding-block-end: var(--s7);
  min-block-size: 148px;
}
.pagehead h1 {
  margin: 0 0 var(--s3);
  font-size: var(--fs-xl);
  font-weight: var(--h-weight-strong);
  color: var(--on-deep);
  letter-spacing: 0;
}
.pagehead p { color: var(--on-deep-muted); max-inline-size: var(--measure-lead); }
.pagehead .eyebrow { color: var(--on-deep); }
.pagehead a { color: var(--on-deep); }
.pagehead :focus { outline-color: var(--focus-ring-on-deep); }
.pagehead :focus-visible { outline-color: var(--focus-ring-on-deep); }
/* The 3px lime echo of the homepage's 6px seam, so inner pages read as the same
   system at a lower volume. */
.pagehead::after {
  content: '';
  position: absolute; right: 0; left: 0; bottom: 0;
  block-size: var(--seam-h-inner);
  background: var(--lime);
}
/* When crumbs sit above it, the pagehead must not re-pad the top of the same block. */
.crumbs + .pagehead .pagehead__inner { padding-block-start: var(--s5); }


/* ============================================================================
   §17  MOTION  (spec §8)
   Only eight things move on this site, all of them ≤220ms and all on hover, focus,
   [open] or scroll. Nothing auto-plays. There is no carousel anywhere.

   Entrance animation applies to TWO groups only — the 8 programme rows and the 5
   ledger rows — via site.css's existing .reveal mechanism, which is already guarded
   by both a JS-set class and prefers-reduced-motion. A page where every band fades in
   reads as a template.
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  /* Exhaustive, per spec §8: an entrance element must never be left at opacity 0. */
  .prow::before { transition: none; }
  .prow:hover::before { transform: scaleY(1); }
  .prow:hover .prow__chev { transform: none; }
  .header .nav a::after,
  .header .nav summary::after { transition: none; }
  .word__more > summary svg { transition: none; }
  .header .brand__mark img { transition: none; }
}


/* ============================================================================
   §18  INNER PAGE TEMPLATES  (spec §10)
   The homepage carries the concept; these carry it through the rest of the site. Every
   component below is the SAME one the homepage uses — the register row, the ledger row,
   the roster row, the panel — at a different width or density. Nothing new is invented
   here, which is the point: a site whose inner pages are a different design system is
   the "template nobody finished" the whole composition exists to avoid.
   ============================================================================ */

/* ── /programs — the register at full width ──────────────────────────────────
   20px taller than the homepage's row, so the summary can breathe on the page whose
   whole job is the programme list. */
.prow--wide { min-block-size: 112px; }
.prow__pill { margin-top: 6px; }
[dir='rtl'] .prow__pill { margin-right: var(--s3); }
[dir='ltr'] .prow__pill { margin-left: var(--s3); }
/* The pill sits after the title on its own baseline; the title is inline so they share a line
   when there is room and wrap when there is not. */
.prow__title { display: inline; }
.prow__summary { display: -webkit-box; }

/* ── /programs/{slug} — prose plus a sticky rail ─────────────────────────────── */
.detail { display: grid; grid-template-columns: 1fr; grid-gap: var(--s6); }
@media (min-width: 1024px) {
  .detail { grid-template-columns: 1fr 280px; grid-gap: var(--s7); align-items: start; }
  .rail { position: sticky; top: 96px; }
}
.rail {
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--green-800);   /* the marker rule, device B.3 */
  border-radius: var(--r-card);
  background: var(--paper);
  padding: var(--s5);
}
.rail__tile {
  inline-size: 56px; block-size: 56px;
  display: grid; place-items: center;
  background: var(--green-200);
  border-radius: var(--r-sm);
  color: var(--green-900);
  margin-bottom: var(--s5);
}
.rail__note { margin: var(--s4) 0 0; font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.8; }
.rail__more { border-top: 1px solid var(--line); margin-top: var(--s5); padding-top: var(--s5); }
.rail__head {
  margin: 0 0 var(--s3);
  font-size: var(--fs-sm); font-weight: var(--h-weight-strong);
  color: var(--green-900);
}
.rail__link { display: block; text-align: right; margin-bottom: var(--s2); }
[dir='ltr'] .rail__link { text-align: left; }

/* The «قيد التوثيق» panel. It exists so an undocumented programme reads as HONEST rather than
   as broken — and so nobody is tempted to write programme copy the association never published. */
.note-panel {
  background: var(--stone-50);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s7);
}
.note-panel__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--h-weight); color: var(--green-900); }
.note-panel__text {
  margin: var(--s3) 0 var(--s5);
  font-size: var(--fs-base); line-height: var(--lh-body); color: var(--ink-muted);
  max-inline-size: var(--measure-narrow);
}

/* ── /donate — the account panel ─────────────────────────────────────────────
   The IBAN is the page's display object, not a field in a card: with no gateway (D7) the
   account number IS the product. */
.account-panel {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--green-800);
  border-radius: var(--r-card);
  padding: var(--s7);
}
.acct-rows { display: grid; grid-template-columns: 1fr; grid-gap: var(--s4); margin: 0 0 var(--s6); }
@media (min-width: 560px) { .acct-rows { grid-template-columns: 1fr 1fr; } }
.acct-rows dt { font-size: var(--fs-xs); color: var(--ink-muted); margin-bottom: 4px; }
.acct-rows dd { margin: 0; font-size: var(--fs-md); font-weight: var(--h-weight); color: var(--green-900); }

.iban-block--light { border-top: 1px solid var(--line); padding-top: var(--s5); }
.iban-block--light .iban__label { color: var(--ink-muted); }
.iban--light { color: var(--green-900); }
.account-panel__actions { margin-top: var(--s5); }
.account-panel__actions > * + * { margin-top: var(--s3); }

/* ── /documents — the filter bar and its chips ───────────────────────────────
   A plain <form method="get"> with real submit buttons, so filtering works with JS disabled
   (D2/D12). The chips are LINKS, so each category is a shareable, crawlable URL. */
.filterbar {
  background: var(--paper);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: var(--s4) 0;
}
.chip {
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--green-900);
  font-weight: var(--h-weight);
}
.chip:hover { border-color: var(--green-300); background: var(--row-hover); }
.chip.is-on { background: var(--green); border-color: var(--green); color: var(--on-deep); }
.chip.is-on .chip__count { color: var(--on-deep); }

/* ── The empty state, shared by /documents and /gallery ──────────────────────
   Centring is allowed here: it is a short heading and one line, not Arabic prose (§6.3). */
.empty {
  background: var(--stone-50);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s7);
  text-align: center;
}
.empty h3 { font-size: var(--fs-md); color: var(--green-900); margin: 0 0 var(--s2); }

/* ── /requests — the group headings and the confirmation numeral ─────────────
   Each fieldset group gets the signature rule under its legend, so the form reads as sections
   rather than as one 24-field wall. */
.band form > h2,
.band form legend.label {
  font-size: var(--fs-lg);
  font-weight: var(--h-weight);
  color: var(--green-900);
  letter-spacing: 0;
}
.band form > h2::after {
  content: '';
  display: block;
  inline-size: var(--rule-w); block-size: var(--rule-h);
  background: var(--rule-color);
  margin-top: var(--s2);
}
.band form > h2 { border-top: 1px solid var(--line); margin-top: var(--s7); padding-top: var(--s6); }
.band form > h2:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

/* The request number on the confirmation screen — Device A, the numeral as the page's image.
   It is shown ONCE and the applicant needs it to track, so it is set like a figure, not a field. */
.copyfield__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.reference-number {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: var(--h-weight-strong);
  color: var(--green-900);
  line-height: var(--lh-display);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  direction: ltr; unicode-bidi: embed;
}