/* ELTS design system — gold/brass on navy. Ported from the approved homepage mockup.
   Self-hosted IBM Plex Sans (Latin) + IBM Plex Sans Arabic + IBM Plex Mono (WOFF2, OFL).
   Files live in /wwwroot/fonts; system fonts remain as fallback in the vars below. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2")}
/* ── Design tokens ────────────────────────────────────────────────────────────
   The redesign is DARK throughout, so :root is the dark palette. It used to be
   light with dark as a prefers-color-scheme override, which meant every new
   element inherited the wrong surface until a media query rescued it.

   Contrast: --text-3 was #6E7A8E, which measures 4.51:1 on --bg but only 4.46:1
   on --panel and 4.31:1 on --panel-2 — below the WCAG AA 4.5:1 floor on two of
   the three surfaces it is used on. #7A8698 clears 5.07:1 on all three. Fixed
   here rather than after 28 routes are built on the failing value.
   ────────────────────────────────────────────────────────────────────────── */
:root{
  /* Square corners are intentional — the blueprint language depends on it. The
     ONLY rounded elements in all 31 design files are status dots (50%). */
  --radius:0;

  /* Layout */
  --maxw:1360px;--gutter:44px;--gutter-sm:20px;
  --section-y:96px;                        /* design range is 88-104px */
  --gap-card:16px;--gap-cols:64px;         /* hairline-divided grids use 0 */

  /* Breakpoints are documented here but must be literals in @media — custom
     properties are not valid in media queries. Nav 1180, grids 900,
     sticky sidebars 620, header CTA 520. */

  --font:"IBM Plex Sans","Segoe UI Variable","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-ar:"IBM Plex Sans Arabic","IBM Plex Sans","Segoe UI","Noto Sans Arabic","Geeza Pro",Tahoma,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas","SF Mono",monospace;
}

/* ── Colour ───────────────────────────────────────────────────────────────────
   Dark is the site as designed. Light is the visitor's choice, made with the
   header's switch and remembered in their browser (elts.js; App.razor applies it
   before the first paint) — never taken from the operating system, so the site
   always opens as designed.

   Colours used with an opacity are channels (--gold-rgb and the rest, written
   rgb(var(--gold-rgb) / .22)), so one rule serves both themes: on the light page
   the gold rules turn to brass and the white tints to ink. Gold as TEXT has its
   own token, --gold-ink: #C9A227 would read at 2:1 on the light surfaces.

   The drawn product screens (.mock, .console) keep the dark colours in the light
   theme: they show a device's screen, which does not change with the page. */
:root,
:root[data-theme="light"] :is(.mock,.console){
  color-scheme:dark;

  /* Surfaces — deeper than the previous dark theme; the blueprint language needs
     the panels to sit only just above the page. */
  --bg:#070C14;--panel:#080E17;--panel-2:#0B1220;--panel-3:#111A2B;
  --text:#EEF1F7;--text-2:#AEB9C9;--text-3:#7A8698;

  /* Channels for the colours used with an opacity. */
  --gold-rgb:227 190 85;       /* the gold rule */
  --ink-rgb:255 255 255;       /* neutral tints and borders: light on dark */
  --scrim-rgb:7 12 20;         /* see-through surfaces over the page */
  --shadow-color:var(--shadow-color);

  --accent:#E3BE55;--gold:#E3BE55;--gold-bright:#F4D580;--on-accent:#1A1406;
  --gold-ink:#E3BE55;--gold-ink-hover:#F4D580;

  /* Status */
  --success:#4CAF6E;--error:#C0392B;--error-text:#E8836F;

  /* Hairlines are GOLD-TINTED, not neutral: the gold rule replacing the card
     border is the load-bearing device of the whole visual system. */
  --hair:rgb(var(--gold-rgb) / .18);--hair-inner:rgb(var(--gold-rgb) / .14);--hair-inner-2:rgb(var(--gold-rgb) / .16);
  --hair-2:rgb(var(--ink-rgb) / .15);          /* neutral border, used sparingly */
  --glow:rgb(var(--gold-rgb) / .22);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#EDEFF3;--panel:#FFFFFF;--panel-2:#F3F5F9;--panel-3:#E9ECF3;
  --text:#0E1626;--text-2:#3B4557;--text-3:#5D6878;   /* darkened for AA on #F3F5F9 */
  --gold-rgb:150 116 26;--ink-rgb:14 22 38;--scrim-rgb:255 255 255;--shadow-color:rgba(14,22,38,.28);
  --accent:#7D5F10;--gold:#C9A227;--gold-bright:#E0BE4E;--on-accent:#1A1406;
  --gold-ink:#7D5F10;--gold-ink-hover:#5E470B;   /* 5:1 or better on every light surface */
  --glow:rgba(201,162,39,.16);   /* warm gold: the brass channel would glow grey on white */
  --success:#276B43;--error:#A5281B;--error-text:#A5281B;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
html[dir="rtl"] body{font-family:var(--font-ar)}
a{color:inherit;text-decoration:none}
svg{display:block}

/* ── Type scale ───────────────────────────────────────────────────────────────
   Uppercase condensed headlines with tight negative tracking are the redesign's
   voice. Arabic has NO uppercase, so every rule here is unwound in the RTL block
   below — applying text-transform to Arabic does nothing visually but does break
   copy-paste and screen-reader pronunciation in some engines. Arabic compensates
   with weight 700 and looser leading instead.
   ────────────────────────────────────────────────────────────────────────── */
h1,h2,h3{margin:0}
h1{font-size:clamp(2.2rem,5.2vw,5.6rem);font-weight:700;line-height:1;letter-spacing:-.04em;text-transform:uppercase}
h2{font-size:clamp(2rem,3.8vw,3.2rem);font-weight:700;line-height:1.05;letter-spacing:-.03em;text-transform:uppercase;margin:12px 0 28px}
h3{font-size:clamp(1.2rem,1.6vw,1.5rem);font-weight:600;line-height:1.2;letter-spacing:-.02em}

html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{
  text-transform:none;letter-spacing:0;line-height:1.2;font-weight:700}

.lead{color:var(--text-2);font-size:clamp(1.06rem,1.2vw,1.24rem);line-height:1.6}
html[dir="rtl"] .lead{line-height:1.75}
.prose,.longform{line-height:1.7}
html[dir="rtl"] .prose,html[dir="rtl"] .longform{line-height:1.75}

/* Numbers are monospace with tabular figures so a changing metric does not make
   the layout jitter — the home page animates several of these. */
.num,.metric,.stat-tile b,td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── Layout rhythm ─────────────────────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
@media (max-width:900px){
  :root{--gutter:var(--gutter-sm);--section-y:64px}
}

.muted{color:var(--text-3);font-size:.9rem}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600}
html[dir="rtl"] .eyebrow{font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-weight:700}
.eyebrow::before{content:"// "}
html[dir="rtl"] .eyebrow::before{content:""}

/* Bare 1fr floors at min-content and overflows its track; every grid in the
   redesign uses minmax(0,1fr). This catches the ones that do not. */
.grid,[class*="grid-"]{min-width:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 .95rem/1 var(--font);padding:13px 22px;border:1px solid transparent;cursor:pointer;transition:.15s}
html[dir="rtl"] .btn{font-family:var(--font-ar)}
.btn-primary{background:var(--gold);color:var(--on-accent)}
.btn-primary:hover{background:var(--gold-bright)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--hair-2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ── Nav + mega-menus ─────────────────────────────────────────────────────────
   The panels open on :hover AND :focus-within — no JavaScript and no Blazor
   circuit. :focus-within is what makes them keyboard-operable: tabbing into a
   top-level link opens its panel, and tabbing out of the last link closes it.
   elts.js only syncs aria-expanded and adds Escape-to-close.

   The panel is position:absolute so it OVERLAYS the page rather than pushing it
   down. The prototype pushes content down because its panel sits inside the
   sticky header's flow; that shifts the whole page on hover, which is
   disorienting and causes layout shift on every menu open.
   ────────────────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.nav-in{display:flex;align-items:center;gap:28px;height:76px;min-width:0}
.brand{display:flex;align-items:center;gap:11px;flex:none;font-family:var(--mono);font-weight:600;font-size:.94rem;letter-spacing:.04em;color:var(--text)}
/* The company emblem: a 128px image shown at 40px (52px in the footer), sharp on 3x screens. */
.brand .mark{width:40px;height:40px;flex:none;object-fit:contain}
.foot-brand .brand .mark{width:52px;height:52px}
.brand .wm{display:inline-flex;align-items:center}

.nav-links{margin-inline-start:auto;min-width:0}
.nav-links ul{display:flex;gap:1px;list-style:none;margin:0;padding:0}
.nav-item{position:static}
.nav-item>a{display:block;padding:10px 15px;border:1px solid transparent;color:var(--text-2);
  font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
html[dir="rtl"] .nav-item>a{font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:.9rem}
.nav-item:hover>a,.nav-item:focus-within>a,.nav-item>a[aria-current]{border-color:rgb(var(--gold-rgb) / .4);color:var(--gold-ink)}

.mega{position:absolute;inset-inline:0;top:100%;background:var(--panel);border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease-out,transform .18s ease-out,visibility .18s}
.nav-item:hover>.mega,.nav-item:focus-within>.mega{opacity:1;visibility:visible;transform:none}
.mega-in{display:grid;gap:0;padding:0}
.nav-item.is-wide .mega-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) minmax(0,1fr)}
.nav-item.is-narrow .mega-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mega-col{padding:30px 34px 36px;min-width:0}
.mega-col+.mega-col{border-inline-start:1px solid var(--hair-inner)}
.mega-title{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:16px}
html[dir="rtl"] .mega-title{font-family:var(--font-ar);letter-spacing:0;text-transform:none}
.mega-links{display:flex;flex-direction:column;gap:2px}
.mega-links a{display:block;padding:9px 10px;margin-inline-start:-10px;color:var(--text)}
.mega-links a:hover{background:var(--panel-2)}
.mega-link-label{display:block;font-size:.98rem;font-weight:500}
.mega-link-desc{display:block;color:var(--text-3);font-size:.86rem;margin-top:2px}
.mega-card{display:block;border:1px solid rgb(var(--gold-rgb) / .3);padding:20px 22px;color:var(--text);margin-bottom:18px}
.mega-card:hover{border-color:var(--gold)}
.mega-card-kicker{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
html[dir="rtl"] .mega-card-kicker{font-family:var(--font-ar);letter-spacing:0;text-transform:none}
.mega-card-title{display:block;font-size:1.1rem;font-weight:600;margin-top:10px;letter-spacing:-.02em}
.mega-card-copy{display:block;color:var(--text-2);font-size:.92rem;margin-top:8px}
.mega-card-cta{display:block;font-family:var(--mono);font-size:.72rem;color:var(--gold-ink);margin-top:14px}

.nav-right{display:flex;align-items:center;gap:10px;flex:none}
.icon-btn{width:38px;height:38px;border:1px solid var(--hair-2);background:transparent;color:var(--text-2);
  display:grid;place-items:center;cursor:pointer;font:600 .76rem/1 var(--mono);padding:0}
.icon-btn:hover{color:var(--gold-ink);border-color:var(--gold)}
.icon-btn svg{width:17px;height:17px}
/* The light/dark switch: the sun on the dark page, the moon on the light one. Without
   scripts there is nothing to switch, so it is not shown. */
.theme-btn .theme-moon{display:none}
:root[data-theme="light"] .theme-btn .theme-sun{display:none}
:root[data-theme="light"] .theme-btn .theme-moon{display:block}
.mobile-actions .theme-btn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-ink)}
html:not(.js) .theme-btn{display:none}
.nav-cta{font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
html[dir="rtl"] .nav-cta{font-family:var(--font-ar);letter-spacing:0;text-transform:none}

/* Search + mobile menu use <details>, so the browser owns the open/close state,
   the keyboard handling and the ARIA. summary::marker is removed, not the
   element — removing the summary would remove the control. */
.nav-search,.nav-mobile{position:static}
.nav-search summary,.nav-mobile summary{list-style:none}
.nav-search summary::-webkit-details-marker,.nav-mobile summary::-webkit-details-marker{display:none}
.search-panel{position:absolute;inset-inline:0;top:100%;background:var(--panel);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.search-in{display:flex;align-items:center;gap:14px;padding-block:20px}
.search-icon{width:19px;height:19px;flex:none;color:var(--text-3)}
.search-in input{flex:1;min-width:0;font:400 1.02rem var(--font);color:var(--text);background:transparent;border:none;outline:none}
html[dir="rtl"] .search-in input{font-family:var(--font-ar)}
.search-in input::placeholder{color:var(--text-3);opacity:1}
.search-in input:focus-visible{box-shadow:0 2px 0 var(--gold)}
.search-go{flex:none;padding:11px 16px;border:none;background:var(--gold);color:var(--on-accent);cursor:pointer;
  font:600 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.search-go:hover{background:var(--gold-bright)}
html[dir="rtl"] .search-go{font-family:var(--font-ar);font-size:.9rem;letter-spacing:0;text-transform:none}

.nav-mobile{display:none;margin-inline-start:auto}
.mobile-panel{position:absolute;inset-inline:0;top:100%;background:var(--panel);border-top:1px solid var(--hair);max-height:74vh;overflow-y:auto}
.mobile-group>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;
  border-bottom:1px solid var(--hair-inner);color:var(--text);cursor:pointer;
  font-family:var(--mono);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
html[dir="rtl"] .mobile-group>summary{font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:.95rem}
.mobile-group>summary .chev{color:var(--gold-ink)}
.mobile-links{padding:8px 20px 16px;display:flex;flex-direction:column;gap:2px;background:var(--panel-2)}
.mobile-col-title{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin:14px 0 6px}
html[dir="rtl"] .mobile-col-title{font-family:var(--font-ar);letter-spacing:0;text-transform:none}
.mobile-links a{padding:9px 0;color:var(--text);font-size:.96rem}
.mobile-actions{padding:20px;display:flex;gap:10px;flex-wrap:wrap}
.mobile-actions .btn{flex:1;min-width:180px;justify-content:center}

/* Nav collapses at 1180px — the six-item row plus the CTA needs about 1150px.
   The previous breakpoint was 820px and hid the links with NO replacement, so a
   phone had no navigation at all. */
@media(max-width:1180px){
  .nav-links{display:none}
  .nav-mobile{display:block}
  .nav-in{gap:14px}
}
/* The CTA is the widest fixed item; below 520px it moves into the hamburger
   panel, which already carries its own copy of it. */
@media(max-width:520px){ .nav-cta{display:none} }
/* The light/dark switch leaves the bar below 600px, where the logo, search, language and
   menu (and, above 520px, the CTA) need all the room: with it, pages from 361 to 396px
   and from 521 to 557px wide were pushed sideways. The menu panel has its own switch. */
@media(max-width:600px){ .nav-right .theme-btn{display:none} }
/* The smallest phones (320px): logo, search, language and menu need about 336px at the
   normal spacing, which pushed every page sideways. Tighter gaps, a smaller wordmark,
   34px buttons (still above the 24px minimum target) and a 16px gutter make it fit. */
@media(max-width:360px){
  :root{--gutter:16px}
  .nav-in{gap:10px}
  .nav-right,.brand{gap:8px}
  .brand{font-size:.84rem}
  .nav .brand .mark{width:32px;height:32px}
  .nav-in .icon-btn{width:34px;height:34px}
}


.badge{position:absolute;inset-inline-end:16px;inset-block-start:16px;font:700 .62rem/1 var(--mono);text-transform:uppercase;color:var(--gold-ink);background:color-mix(in srgb,var(--gold) 16%,transparent);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);padding:4px 9px}
html[dir="rtl"] .badge{font-family:var(--font-ar);text-transform:none}

.prod-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:6px}



/* admin island */
.admin-card{background:var(--panel);border:1px solid var(--hair);padding:24px;max-width:440px}
.admin-card h3{font-size:1.2rem}
.admin-stat{display:flex;justify-content:space-between;align-items:center;margin:14px 0;padding:12px 14px;background:var(--panel-2)}
.admin-stat strong{font:800 1.4rem/1 var(--mono);color:var(--accent)}

#blazor-error-ui{position:fixed;inset-inline:0;bottom:0;display:none;background:#8b0000;color:#fff;padding:10px 16px;z-index:1000}

/* ============ tech atmosphere + motion (ported from the mockup) ============ */





/* motion */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;inset-inline-start:-70%;width:45%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);opacity:0}
.btn-primary:hover::after{animation:sheen .85s ease}
@keyframes sheen{0%{inset-inline-start:-70%;opacity:1}100%{inset-inline-start:140%;opacity:0}}

/* ── Cookie consent ───────────────────────────────────────────────────────────
   Fixed to the bottom so it cannot be scrolled past, but it does NOT trap focus
   or block the page: a modal cookie wall would make the site unusable until a
   choice is made, which is coercion rather than consent. */
.consent{position:fixed;inset-inline:0;bottom:0;z-index:40;background:var(--panel);
  border-top:1px solid var(--hair);box-shadow:0 -20px 60px -30px var(--shadow-color)}
.consent-in{display:flex;align-items:center;gap:28px;padding-block:20px;flex-wrap:wrap}
.consent-text{flex:1;min-width:min(420px,100%)}
.consent-text p{margin:6px 0 0;color:var(--text-2);font-size:.94rem;line-height:1.55;max-width:78ch}
.consent-text a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px}
/* Both actions are the same element at the same weight. A greyed-out "decline"
   beside a gold "accept" is exactly the dark pattern that equal-prominence
   exists to forbid (08-devops-security.md:435). */
.consent-actions{display:flex;gap:10px;flex-wrap:wrap}
.consent-actions form{margin:0}
.consent-actions .btn{white-space:nowrap}
@media(max-width:620px){
  .consent-in{gap:16px}
  .consent-actions{width:100%}
  .consent-actions form{flex:1}
  .consent-actions .btn{width:100%;justify-content:center}
}

/* The footer control is a form (it mutates state) but must read as a link. */
.foot-consent{display:inline;margin:0}
.foot-consent button{background:none;border:none;padding:0;cursor:pointer;
  color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px}
.foot-consent button:hover{color:var(--gold-ink)}

/* ── Interactive island (render-mode pattern) ───────────────────────────────── */
.island{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:0;
  border:1px solid var(--hair);margin-top:28px}
.island-list{display:flex;flex-direction:column;border-inline-end:1px solid var(--hair-inner)}
.island-tab{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;background:transparent;border:none;border-bottom:1px solid var(--hair-inner);
  color:var(--text-2);cursor:pointer;text-align:start;font:inherit;transition:.15s}
.island-tab:hover{background:var(--panel-2);color:var(--text)}
.island-tab.is-on{background:var(--gold);color:var(--on-accent)}
.island-tab-name{font-size:.95rem;font-weight:500}
.island-tab-pct{font-family:var(--mono);font-size:.78rem;font-variant-numeric:tabular-nums}
.island-detail{padding:24px 28px;min-width:0}
.island-detail-head h3{margin:8px 0 18px}
.island-rows{margin:0;display:flex;flex-direction:column;gap:0}
.island-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--hair-inner)}
.island-row dt{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.island-row dd{margin:0;font-size:.92rem}
.island-row dd.ok{color:var(--success)}
.island-row dd.warn{color:var(--error-text)}
@media(max-width:620px){ .island{grid-template-columns:minmax(0,1fr)}
  .island-list{border-inline-end:none;border-bottom:1px solid var(--hair-inner)} }

/* ── Accessibility baseline ───────────────────────────────────────────────────
   Set here, in Phase 2, rather than discovered at launch. The design prototypes
   supply nothing to inherit: aria- attribute count is 0 across ELTS-Home,
   ELTS-Store and ELTS-Support (2 in SiteNav), and alt= count is 0 in ELTS-Home.
   Per docs/plan/07-design-ux.md:299-309.
   ────────────────────────────────────────────────────────────────────────── */

/* Skip link — first focusable element in the DOM, visible only when focused.
   With six hover-opened mega-menus, a keyboard user otherwise tabs through ~60
   nav links before reaching content on every single page. */
.skip-link{position:absolute;inset-inline-start:-9999px;top:0;z-index:100;
  background:var(--gold);color:var(--on-accent);padding:12px 18px;
  font:600 .85rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.skip-link:focus{inset-inline-start:0}
html[dir="rtl"] .skip-link{font-family:var(--font-ar);letter-spacing:0;text-transform:none}

/* One visible focus ring for everything. :focus-visible rather than :focus so a
   mouse click does not leave a ring behind, which is why authors disable focus
   styles altogether and break keyboard use. */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* FocusOnNavigate (Routes.razor) moves focus to the page's h1 after each navigation, so a
   screen reader announces the new page. The h1 is not a control and needs no ring — and on
   a fresh page load Chrome drew one round every headline. */
h1:focus{outline:none}
.q-form input:focus-visible,.q-form textarea:focus-visible,
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

/* Minimum 24x24 CSS px target (WCAG 2.2 SC 2.5.8). Applies to the small icon
   buttons in the nav and the quantity steppers. */
button,[role="button"],.btn,.icon-btn{min-height:24px;min-width:24px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,[data-rise]{opacity:1!important;transform:none!important}
  /* The redesign's motion, named explicitly so a new animation is not silently
     exempt: atlas wire flow, scene drawin, status-dot pulse, mega-panel entry,
     and the animated home counters. */
  [data-atlas-wire],[data-scene],[data-status-dot],[data-mega],[data-counter]{
    animation:none!important;transition:none!important}
  html{scroll-behavior:auto!important}
}

/* ============ store / quote / admin ============ */
.wrap.narrow{max-width:780px}

.q-list{display:flex;flex-direction:column;gap:8px;margin:8px 0 24px}
.q-form{display:flex;flex-direction:column;gap:12px;background:var(--panel);border:1px solid var(--hair);padding:20px}
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.q-grid{grid-template-columns:1fr}}
.q-form input,.q-form textarea{font:400 .95rem var(--font);color:var(--text);background:var(--bg);border:1px solid var(--hair-2);padding:11px 13px;width:100%}
html[dir="rtl"] .q-form input,html[dir="rtl"] .q-form textarea{font-family:var(--font-ar)}
.q-form input:focus,.q-form textarea:focus{outline:none;border-color:var(--accent)}
.q-form textarea{resize:vertical}
.q-form .btn{align-self:flex-start}

.admin-links{display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:22px;font-size:.9rem}
.admin-links a,.admin-links .linkbtn{color:var(--text-2);white-space:nowrap}
.admin-cats input[type="checkbox"]{accent-color:var(--accent)}
.admin-links a:hover{color:var(--accent)}
.table-scroll{overflow-x:auto;border:1px solid var(--hair)}
.admin-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px;background:var(--panel)}
.admin-table th,.admin-table td{text-align:start;padding:12px 14px;border-bottom:1px solid var(--hair);vertical-align:top}
.admin-table th{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
html[dir="rtl"] .admin-table th{font-family:var(--font-ar);letter-spacing:0;text-transform:none}
.admin-table tr:last-child td{border-bottom:none}
.admin-table select{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--hair-2);padding:6px 8px}
.linkbtn{background:none;border:none;color:var(--text-2);cursor:pointer;font:inherit;padding:0}
.linkbtn:hover{color:var(--accent)}
.field{display:flex;flex-direction:column;gap:6px;font-size:.78rem;color:var(--text-3)}
.field input,.field textarea{font:400 .95rem var(--font);color:var(--text);background:var(--bg);border:1px solid var(--hair-2);padding:10px 12px;width:100%}
html[dir="rtl"] .field input,html[dir="rtl"] .field textarea{font-family:var(--font-ar)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{resize:vertical}
.check{display:flex;align-items:center;gap:8px;font-size:.92rem;color:var(--text-2)}
.q-form .check input,.field .check input{width:auto;padding:0;accent-color:var(--accent)}
.q-form input[type="file"]{padding:9px 10px;cursor:pointer}
.admin-note{margin:0 0 18px;padding:12px 14px;border:1px solid var(--hair-2);border-inline-start:3px solid var(--accent);background:var(--panel);font-size:.9rem;color:var(--text-2)}
.admin-note.bad{border-inline-start-color:#c0392b;color:var(--text)}
.admin-select{font:400 .95rem var(--font);color:var(--text);background:var(--bg);border:1px solid var(--hair-2);padding:10px 12px;width:100%}
.admin-fieldset{border:1px solid var(--hair);padding:12px 14px;margin:0;min-width:0}
.admin-fieldset legend{padding:0 6px}
.admin-checks{display:flex;flex-wrap:wrap;gap:8px 18px}
.admin-cell-input{font:400 .9rem var(--font);color:var(--text);background:var(--bg);border:1px solid var(--hair-2);padding:7px 9px;width:100%;min-width:110px}
.admin-thumb{width:48px;height:48px;object-fit:cover;display:block;background:var(--bg);border:1px solid var(--hair)}
.admin-thumb.logo{width:96px;object-fit:contain;padding:4px}
.admin-preview{display:flex;gap:14px;align-items:center}
.admin-preview img{width:120px;height:120px;object-fit:cover;border:1px solid var(--hair);background:var(--bg)}
.admin-preview img.logo{width:200px;object-fit:contain;padding:8px}
.pill{cursor:pointer;border:1px solid var(--hair-2);padding:4px 12px;font:600 .76rem/1 var(--font);background:transparent}
.pill.on{color:#1e824c;border-color:#1e824c}
.pill.off{color:var(--text-3)}
.admin-flag{display:inline-block;margin-top:4px;padding:2px 7px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);color:var(--gold-ink);font:600 .72rem/1.4 var(--font)}
.admin-flag.bad{border-color:#c0392b;color:#e8836f;text-transform:uppercase;letter-spacing:.06em}
.admin-filter{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 16px;font-size:.9rem}
.admin-filter a{color:var(--text-2)}
.admin-filter a:hover{color:var(--accent)}
.admin-filter a[aria-current]{color:var(--accent);font-weight:600}
.admin-code{font-family:var(--mono)!important;font-size:.86rem!important;line-height:1.55}
.admin-file{color:var(--accent);font-weight:600}
.admin-delete{margin-top:10px;font-size:.84rem}
.admin-delete>summary{cursor:pointer;color:var(--text-3)}
.admin-delete>summary:hover{color:#e8836f}
.admin-delete form{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:8px}
.admin-delete .linkbtn{color:#e8836f;font-weight:600}

/* ── Page-text editor (/admin/texts, ADR-023) ──────────────────────────────── */
.tf-bar{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin:0 0 14px;font-size:.92rem}
.tf-bar>a{color:var(--text-2)}
.tf-bar>a:hover{color:var(--accent)}
.tf-langs{display:flex;gap:4px}
.tf-langs a{padding:6px 12px;border:1px solid var(--hair-2);color:var(--text-2)}
.tf-langs a[aria-current]{border-color:var(--accent);color:var(--text)}
.tf-status{margin:0 0 14px}
.tf-edited,.tf-needs{display:inline-block;padding:2px 7px;border:1px solid rgb(var(--gold-rgb) / .45);color:var(--gold-ink);font:600 .64rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.tf-needs{border-color:#c0392b;color:#e8836f}
.tf-legend{margin:0 0 18px;padding:12px 16px;border:1px solid var(--hair);background:var(--panel);font-size:.9rem;color:var(--text-2)}
.tf-legend summary{cursor:pointer;color:var(--text)}
.tf-legend p{margin:10px 0 0}
.tf-legend ul{margin:8px 0 0;padding-inline-start:18px}
.tf-legend code,.tf-fixed code{font:.85rem var(--mono);color:var(--text)}
.tf-problems{margin:0;padding-inline-start:18px}
.tf-problems a{color:var(--text);text-decoration:underline}
.tf-form{display:flex;flex-direction:column;gap:12px}
.tf-section{border:1px solid var(--hair);background:var(--panel)}
.tf-section>summary{cursor:pointer;padding:14px 18px;font-weight:600;color:var(--text);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tf-section>summary:hover{color:var(--accent)}
.tf-section[open]>summary{border-bottom:1px solid var(--hair)}
.tf-section-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:16px}
.tf-group{border:1px solid var(--hair);padding:12px 14px 14px;margin:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.tf-group>legend{padding:0 6px;font-size:.8rem;color:var(--text-2);font-weight:600}
.tf-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.tf-field-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tf-field label,.tf-label{font-size:.82rem;color:var(--text-2);font-weight:600}
.tf-field input:not([type="checkbox"]),.tf-field textarea,.tf-field select{font:400 .95rem/1.5 var(--font);color:var(--text);background:var(--bg);border:1px solid var(--hair-2);padding:10px 12px;width:100%}
.tf-field [dir="rtl"]{font-family:var(--font-ar);font-size:1rem}
.tf-field textarea{resize:vertical}
.tf-field input:focus,.tf-field textarea:focus,.tf-field select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.tf-field .check{font-size:.9rem}
.tf-field .check input{accent-color:var(--accent)}
.tf-hint{margin:0;font-size:.8rem;line-height:1.5;color:var(--text-3)}
.tf-ref{margin:0;padding-inline-start:10px;border-inline-start:2px solid var(--hair-2);font-size:.82rem;line-height:1.55;color:var(--text-3);white-space:pre-line}
.tf-ref-label{font-weight:600}
.tf-ref [dir="rtl"]{font-family:var(--font-ar)}
.tf-error{margin:0;font-size:.85rem;color:#e8836f}
.has-error input,.has-error textarea,.has-error select{border-color:#c0392b}
.tf-default{align-self:flex-start;font-size:.8rem}
.tf-fixed code{display:inline-block;align-self:flex-start;padding:6px 10px;border:1px dashed var(--hair-2);background:var(--bg)}
.tf-list{display:flex;flex-direction:column;gap:10px;min-width:0}
.tf-list-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tf-count{font:.72rem var(--mono);color:var(--text-3)}
.tf-items{display:flex;flex-direction:column;gap:10px}
.tf-item{border:1px solid var(--hair-2);background:var(--panel-2);padding:10px 14px 14px;margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.tf-item>legend{padding:0 6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;color:var(--text)}
.tf-item-tools{display:flex;gap:16px;justify-content:flex-end;margin-top:-6px;font-size:.84rem}
.tf-remove{color:#e8836f}
.tf-add{align-self:flex-start}
.tf-actions{position:sticky;bottom:0;z-index:2;display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:12px 16px;background:var(--panel);border:1px solid var(--hair)}
.tf-history{margin-top:36px}
.tf-revisions{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.tf-revisions li{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;padding:8px 12px;border:1px solid var(--hair);font-size:.9rem}
.tf-reset{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:.9rem}
.pe-h.tf-group-title{margin-top:30px}
.tf-table td{vertical-align:top}
.tf-table td>a{color:var(--text)}
.tf-table td>a:hover{color:var(--accent)}
.tf-covers{display:block;margin-top:4px;max-width:62ch;font-size:.8rem}
.tf-state{display:block;margin-top:4px;font-size:.8rem}



/* ---- admin stat tiles ---- */
.admin-stats{display:flex;gap:16px;flex-wrap:wrap;margin:20px 0 26px}
.stat-tile{background:var(--panel);border:1px solid var(--hair);padding:16px 20px;min-width:160px;display:flex;flex-direction:column;gap:6px}
.stat-tile span{color:var(--text-3);font-size:.82rem}
.stat-tile b{font:800 1.8rem/1 var(--mono);color:var(--accent);font-variant-numeric:tabular-nums}
.stat-tile.action{flex-direction:row;align-items:center;justify-content:space-between;text-decoration:none}
.stat-tile.action:hover{border-color:var(--accent)}
.stat-tile.action span{color:var(--text-2);font-size:.92rem}
.stat-tile.action b{font-size:1.2rem}

/* ================= CMS page-builder blocks (public) ================= */
.prose{color:var(--text-2);line-height:1.75}
.prose h2,.prose h3{color:var(--text);margin:1.4em 0 .5em;line-height:1.2}
.prose h2{font-size:1.5rem}.prose h3{font-size:1.2rem}
.prose p{margin:0 0 1em}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{margin:0 0 1em;padding-inline-start:1.4em}
.prose li{margin:.3em 0}
.prose strong{color:var(--text)}
.prose blockquote{margin:1em 0;padding-inline-start:16px;border-inline-start:3px solid var(--gold);color:var(--text-3)}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--panel-2);padding:1px 6px}

.pb-hero{text-align:center}
.pb-hero .wrap{display:flex;flex-direction:column;align-items:center}
.pb-hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;margin:12px 0 18px}
.pb-hero .lead{font-size:1.15rem;max-width:640px}
.pb-hero .lead p{margin:0 0 .6em}
.pb-hero-img{max-width:100%;border:1px solid var(--hair);margin:26px 0 6px}
.pb-hero .btn{margin-top:22px}

.pb-features .feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:26px}
.feat-card{background:var(--panel);border:1px solid var(--hair);padding:22px}
.feat-ic{display:inline-grid;place-items:center;width:44px;height:44px;background:var(--panel-2);color:var(--gold-ink);border:1px solid var(--hair);margin-bottom:14px}
.feat-ic svg{width:22px;height:22px}
.feat-card h3{font-size:1.1rem;margin:0 0 8px}
.feat-card p{color:var(--text-3);font-size:.94rem;margin:0;line-height:1.6}

.pb-imgtext .it-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.pb-imgtext.rev .it-text{order:2}
.pb-imgtext .it-media img{width:100%;border:1px solid var(--hair);display:block}
.pb-imgtext h2{margin:10px 0 16px}

.pb-cta{background:linear-gradient(135deg,var(--panel),var(--panel-2));border:1px solid var(--hair);padding:34px 40px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pb-cta h2{margin:0 0 6px}
.pb-cta .pb-cta-txt{max-width:640px}

.pb-faq .faq-list{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--panel);border:1px solid var(--hair);padding:4px 18px}
.faq-item summary{cursor:pointer;padding:14px 0;font-weight:600;color:var(--text);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--gold-ink);font-size:1.3rem;font-weight:400}
.faq-item[open] summary::after{content:"–"}
.faq-item .prose{padding:0 0 16px}

@media(max-width:760px){
  .pb-imgtext .it-grid{grid-template-columns:1fr;gap:24px}
  .pb-imgtext.rev .it-text{order:0}
}

/* ================= page builder (admin) ================= */
.page-editor{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.pe-h{font-size:1.05rem;margin:0 0 14px;color:var(--text)}
.block-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:blk}
.block-row{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--hair);padding:10px 14px}
.block-type{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--panel-2);border:1px solid var(--hair);padding:3px 8px;white-space:nowrap}
.block-title{flex:1;color:var(--text-2);font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.block-actions{display:flex;align-items:center;gap:10px}
.linkbtn{background:transparent;border:0;cursor:pointer;color:var(--text-2);font:inherit;font-size:.9rem;padding:0}
.linkbtn:hover:not([disabled]){color:var(--accent)}
.linkbtn[disabled]{opacity:.3;cursor:default}
@media(max-width:860px){.page-editor{grid-template-columns:1fr}}