/**
 * assets/iiu-hub.css — IIU admin-hub shared design foundation (Design Pass 1).
 *
 * One stylesheet + tokens for the whole hub (00-SENIOR-DESIGN-AUDIT.md §10). The Launch
 * Center adopts it fully (Pass 2); other hub pages adopt it progressively. Logical
 * properties are used throughout so RTL never needs a mirrored duplicate rule.
 *
 * Load via iiu_ui_css_tag() (iiu/ui.php) — a cache-busted <link> using filemtime().
 */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root{
  --bg:#f5f7f8; --surface:#fff; --surface-2:#f2f5f7; --line:#e3e8ec;
  --ink:#1f2937; --muted:#4b5563;
  --primary:#1e3a5f; --primary-ink:#fff; --accent:#0ea5a0;
  --info:#2456a4; --info-bg:#eaf1fb;
  --ok:#067647; --ok-bg:#e6f4ea;
  --warn:#b54708; --warn-bg:#fdf1e6;
  --bad:#b42318; --bad-bg:#fbeae9;
  --neutral:#475569; --neutral-bg:#eef2f6;
  --gold:#c9a227;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  --radius-control:6px; --radius-card:10px; --radius-pill:999px;
  --shadow-pop:0 8px 24px rgba(16,24,40,.12);

  --container-reading:72ch; --container:1120px; --container-wide:1360px;
}

/* ── Type scale ─────────────────────────────────────────────────────────── */
.t-display{font-size:2rem;line-height:1.2;font-weight:700}
.t-title{font-size:1.625rem;line-height:1.25;font-weight:700}
.t-section{font-size:1.25rem;line-height:1.3;font-weight:650}
.t-card{font-size:1.0625rem;line-height:1.35;font-weight:650}
.t-body{font-size:1rem;line-height:1.6;font-weight:400}
.t-secondary{font-size:.875rem;line-height:1.5;font-weight:400;color:var(--muted)}
.t-label{font-size:.78125rem;line-height:1.4;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.t-data{font-size:1.375rem;line-height:1.3;font-weight:700;font-variant-numeric:tabular-nums}
[lang=ar] .t-label{text-transform:none}

/* ── Base (reset-lite) ──────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-size:1rem;line-height:1.6;color:var(--ink);background:var(--bg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
[lang=ar] body{font-family:"Noto Sans Arabic","Segoe UI",Tahoma,system-ui,Arial,sans-serif;line-height:1.7}
h1,h2,h3,h4{margin:0 0 var(--s2);overflow-wrap:break-word}
h1{font-size:1.75rem;font-weight:800;letter-spacing:-.01em;line-height:1.25}
h2{font-size:1.25rem;font-weight:700;color:var(--primary);line-height:1.3}
h3{font-size:.95rem;font-weight:700;margin-block:var(--s4) var(--s2);color:var(--ink)}
p{margin:0 0 var(--s3)}
a{color:var(--primary)}
ul,ol{margin:0;padding-inline-start:1.2em}
img,svg{max-width:100%}
/* Foundation safety net (DP4 §7 item 4): unbreakable monospace strings (file paths, SSH
   commands) must wrap rather than push the page wider than the viewport. */
code,kbd,pre{overflow-wrap:anywhere}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{
  .top,.tabs,.nav-groups,.help-wrap,form,.segmented,.tournav,select,button:not(.lc-node),.btn{display:none}
  body{background:#fff}
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--s5)}
.container--reading{max-width:var(--container-reading);margin-inline:auto;padding-inline:var(--s5)}
.container--wide{max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--s5)}
@media(max-width:560px){.container,.container--reading,.container--wide{padding-inline:var(--s4)}}

.page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);flex-wrap:wrap;margin-block-end:var(--s6)}
.page-header .ph-text{max-width:var(--container-reading)}
.page-header .ph-actions{display:flex;gap:var(--s2);flex-wrap:wrap}

.stack{display:flex;flex-direction:column;gap:var(--s3)}
.row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--min,280px),1fr));gap:var(--s4);align-items:stretch}
.grid.systems{--min:260px}
/* DP4 item 4: whatever --min a page sets, a grid track can never be forced wider than the
   viewport at phone widths — collapse to one column outright below 360px. */
@media(max-width:360px){.grid{grid-template-columns:1fr}}

/* ── Card ───────────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--s5);min-width:0;display:flex;flex-direction:column}
@media(max-width:560px){.card{padding:20px}}
.card.full{grid-column:1/-1}
.card > .card-actions{margin-block-start:auto;padding-block-start:var(--s3)}
.card hr{border:0;border-block-start:1px solid var(--line);margin-block:var(--s3)}

/* ── DefList — labels above values by default; side-by-side only in .deflist--side at ≥640px ── */
.deflist{display:grid;grid-template-columns:1fr;gap:var(--s2) var(--s4);font-size:.92rem;margin:0}
.deflist dt{color:var(--muted);font-size:.78125rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding-block-start:2px}
[lang=ar] .deflist dt{text-transform:none}
.deflist dd{margin:0;margin-block-end:var(--s2)}
@media(min-width:640px){
  .deflist--side{grid-template-columns:9rem 1fr}
  .deflist--side dt{grid-column:1}
  .deflist--side dd{grid-column:2;margin-block-end:0}
}

/* ── Status chip — 7 states, sentence case, icon slot ──────────────────── */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:var(--radius-pill);font-size:.8125rem;font-weight:700;letter-spacing:.01em;vertical-align:middle;white-space:nowrap;max-width:100%}
@media(max-width:640px){.chip{white-space:normal}}
[lang=ar] .chip{text-transform:none}
.chip .chip-icon{aria-hidden:true}
.chip.is-ready{background:var(--ok-bg);color:var(--ok)}
.chip.is-pending{background:var(--neutral-bg);color:var(--neutral)}
.chip.is-attention{background:var(--warn-bg);color:var(--warn)}
.chip.is-blocked{background:var(--bad-bg);color:var(--bad)}
.chip.is-failed{background:var(--bad-bg);color:var(--bad)}
.chip.is-review{background:var(--info-bg);color:var(--info)}
.chip.is-notstarted{background:var(--neutral-bg);color:var(--neutral)}
/* DP7: category/data pills (course codes, departments) that carry no state — no icon slot */
.chip--muted{background:var(--surface-2,#f1f5f9);color:var(--muted);font-weight:600}

/* legacy 4-state chip classes kept as aliases during migration */
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
.chip.unk{background:var(--neutral-bg);color:var(--neutral)}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:9px 18px;
  border-radius:var(--radius-control);border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:.875rem;font-weight:600;cursor:pointer;text-decoration:none}
.btn--primary,.btn.p{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.btn--secondary,.btn.nav{background:var(--surface);border-color:var(--primary);color:var(--primary)}
.btn--tertiary,.btn.text{border:0;background:transparent;padding:9px 4px;color:var(--primary);text-decoration:underline}
.btn--danger{background:var(--bad);border-color:var(--bad);color:#fff}
/* ── Interaction states (Design Pass 5, §6) ────────────────────────────── */
.btn:hover{filter:brightness(.96)}
.btn--secondary:hover,.btn--tertiary:hover{background:var(--surface-2)}
.btn:active{filter:brightness(.92);transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}
@media(prefers-reduced-motion:reduce){.btn:active{transform:none}}

/* ── Alert (4 kinds, left border) ──────────────────────────────────────── */
.alert{border-inline-start:3px solid var(--neutral);background:var(--neutral-bg);color:var(--ink);
  border-radius:var(--radius-control);padding:var(--s3) var(--s4);margin-block-end:var(--s4);font-size:.9rem}
.alert--info{border-color:var(--info);background:var(--info-bg)}
.alert--ok{border-color:var(--ok);background:var(--ok-bg)}
.alert--warn{border-color:var(--warn);background:var(--warn-bg)}
.alert--bad{border-color:var(--bad);background:var(--bad-bg)}
.alert--demo{border-color:var(--gold);background:#fff7d6;color:#8a6d00}

/* legacy banner alias */
.banner{background:var(--neutral-bg);color:var(--neutral);border-radius:8px;padding:10px 14px;font-size:.9rem;margin-bottom:14px;border-inline-start:3px solid var(--neutral)}
.banner.demo{background:#fff7d6;color:#8a6d00;border-color:var(--gold)}

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty{color:var(--muted);font-size:.92rem;padding:14px 0}
.empty-state{padding:var(--s5) 0;text-align:start}
.empty-state .es-title{font-weight:700;margin-block-end:4px}
.empty-state .es-body{color:var(--muted);margin-block-end:var(--s3)}

/* ── Table ──────────────────────────────────────────────────────────────── */
.table,table.kv{border-collapse:collapse;width:100%;font-size:.875rem}
.table th,table.kv th{text-align:start;padding:12px 16px;border-block-end:1px solid var(--line);color:var(--muted);font-size:.75rem;text-transform:uppercase;position:sticky;top:0;background:var(--surface)}
[lang=ar] .table th,[lang=ar] table.kv th{text-transform:none}
.table td,table.kv td{padding:12px 16px;border-block-end:1px solid var(--surface-2);vertical-align:top}
@media(max-width:640px){
  .table--stack{display:block;width:100%}
  .table--stack thead{display:none}
  .table--stack tr{display:block;border-block-end:1px solid var(--line);padding-block:var(--s2)}
  .table--stack td{display:flex;justify-content:space-between;gap:var(--s3);padding:6px 4px;border:0}
  .table--stack td::before{content:attr(data-label);font-weight:700;color:var(--muted);padding-inline-end:var(--s3)}
  /* Foundation safety net (DP4, §7 item 4): ANY table not already stacked gets a scrollable
     wrapper of itself — page markup never has to add an .table-wrap div for this to hold. A
     table's intrinsic min-content width can exceed the viewport even inside a flexible parent;
     display:block turns the table into a normal block box that clips/scrolls its own overflow
     instead of pushing document.documentElement.scrollWidth past the viewport. */
  table:not(.table--stack){display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
}
/* Several pages wrap tables in a div named .table-wrap or .tblwrap expecting it to scroll but
   never defined the rule themselves (gap_report.php, content_readiness*.php); make it real at
   every width, not just ≤640, since a very wide data table can overflow at 1024 too. */
.table-wrap,.tblwrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}

/* ── Segmented control ──────────────────────────────────────────────────── */
.segmented{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.segmented a,.segmented button{padding:9px 18px;text-decoration:none;color:var(--ink);background:transparent;border:0;font-size:.875rem;font-weight:600;min-height:40px;display:inline-flex;align-items:center;cursor:pointer}
.segmented a[aria-pressed=true],.segmented button[aria-pressed=true]{background:var(--primary);color:#fff}
.segmented a+a,.segmented button+button{border-inline-start:1px solid var(--line)}
/* pill variant used for role/persona chooser: wraps freely, no fixed track */
.segmented--pills{border:0;background:none;gap:var(--s2);display:flex;flex-wrap:wrap}
.segmented--pills a{border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface)}
.segmented--pills a[aria-pressed=true]{background:var(--primary);border-color:var(--primary);color:#fff}
.segmented--pills a+a{border-inline-start:1px solid var(--line)}

/* ── Timeline ───────────────────────────────────────────────────────────── */
.timeline{list-style:none;margin:0;padding:0;max-width:var(--container-reading)}
.timeline-item{position:relative;padding-inline-start:40px;padding-block-end:var(--s5)}
.timeline-item:last-child{padding-block-end:0}
.timeline-marker{position:absolute;inset-inline-start:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:800}
.timeline-item::before{content:"";position:absolute;inset-inline-start:14px;top:30px;bottom:0;width:2px;background:var(--line)}
.timeline-item:last-child::before{display:none}
.timeline-item h3{margin-block:2px 3px}
.marker{display:inline-flex;align-items:center;gap:5px;font-size:.82rem;font-weight:600;color:var(--ink);margin-block-end:4px}

/* ── Flow (architecture explorer) ──────────────────────────────────────── */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0;margin:0;list-style:none}
.flow li{display:flex;align-items:center;gap:6px}
.flow button{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:9px 14px;font-size:.86rem;font-weight:600;cursor:pointer;min-height:40px;color:var(--ink)}
.flow button[aria-pressed=true]{background:var(--primary);color:#fff;border-color:var(--primary)}
.flow .arrow{color:var(--muted);font-weight:700}
.archwrap{display:grid;grid-template-columns:1fr 300px;gap:var(--s5);margin-block-start:var(--s4)}
@media(max-width:800px){.archwrap{grid-template-columns:1fr}}
.archpanel{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--s4) var(--s5)}
.lc-node[aria-pressed=true]{background:var(--primary);color:#fff;border-color:var(--primary)}
.lc-active{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important}

/* ── Help popover ───────────────────────────────────────────────────────── */
.help-wrap{position:relative;display:inline-block;margin-inline-start:6px}
.help-btn{border:1px solid var(--line);background:var(--surface);color:var(--primary);border-radius:var(--radius-pill);width:26px;height:26px;line-height:1;font-size:.8rem;cursor:pointer;font-weight:700}
.help-pop{position:absolute;top:30px;inset-inline-start:0;z-index:10;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-pop);padding:10px 12px;width:min(320px,80vw);font-size:.85rem;font-weight:400}
.help-pop[hidden]{display:none}

/* ── Technical disclosure ──────────────────────────────────────────────── */
details.tech{margin-block-start:10px}
details.tech summary{cursor:pointer;color:var(--muted);font-size:.85rem;font-weight:600;padding:4px 0;min-height:32px}
details.tech .body{padding-block-start:8px;font-size:.88rem;color:var(--ink)}

/* ── Role/domain trim disclosures (RT1) ────────────────────────────────── */
details.roles-other summary{cursor:pointer;color:var(--muted);font-size:.85rem;font-weight:600;padding:4px 0;min-height:32px}

/* ── Tour panel ─────────────────────────────────────────────────────────── */
.tour-panel,.tourpanel{max-width:620px;margin-inline:auto}
.progressbar{height:6px;background:var(--line);border-radius:var(--radius-pill);overflow:hidden;margin-block-end:var(--s4)}
.progressbar > span{display:block;height:100%;background:var(--accent)}
.tournav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-block-start:var(--s5);flex-wrap:wrap}
.tournav .side{display:flex;gap:8px;flex-wrap:wrap}

/* ── "View as" banner (persona preview) ────────────────────────────────── */
.viewas-banner{background:var(--info-bg);color:var(--info);border-inline-start:3px solid var(--info);border-radius:var(--radius-control);padding:var(--s2) var(--s4);margin-block-end:var(--s4);font-size:.9rem}

/* ── Launch Center strip (used for compact status rows) ────────────────── */
.lc-strip{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) var(--s4);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-control);
  margin-block:var(--s3) var(--s5);font-size:.9rem;color:var(--primary)}
.lc-strip a{color:var(--accent);font-weight:700;text-decoration:none}
.lc-strip a:hover{text-decoration:underline}
.lc-strip-title{display:inline-flex;align-items:center;gap:var(--s2,6px)}
.lc-strip-tour{font-size:.82rem;color:var(--muted)}
.lc-strip-links{margin-inline-start:auto;display:flex;gap:var(--s4);flex-wrap:wrap}
@media(max-width:640px){.lc-strip{flex-direction:column;align-items:flex-start}.lc-strip-links{margin-inline-start:0;width:100%}}

/* ── View-As banner (index.php/cc.php shared "you are previewing" strip) ── */
.lc-viewas{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;background:#fff7d6;border:1px solid #e6c86b;
  border-radius:var(--radius-control);padding:var(--s2) var(--s4);margin-block:var(--s3);font-size:.86rem;color:#5a4600}
.lc-viewas a{color:#5a4600;font-weight:700}
.lc-viewas a:focus-visible{outline:3px solid #5a4600;outline-offset:2px}

/* ── Legend ─────────────────────────────────────────────────────────────── */
.legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:var(--s3) var(--s4);margin-block-end:var(--s4)}
.uc{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
[lang=ar] .uc{text-transform:none}

/* ── Small text / misc ──────────────────────────────────────────────────── */
.small{font-size:.85rem;color:var(--muted)}
.ext-link::after{content:" \2192";display:inline-block}
[dir=rtl] .ext-link::after{content:" \2190"}
.prose{max-width:var(--container-reading);color:var(--ink)}
.purpose{color:var(--muted);font-size:1rem;margin-block:4px 0}
.skip{position:absolute;inset-inline-start:-999px;top:auto;background:var(--primary);color:#fff;padding:8px 14px;border-radius:0 0 6px 0;z-index:100}
.skip:focus{inset-inline-start:0;top:0}

/* Promise list (Start Here numbered list) */
.promise-list{list-style:none;margin:0;padding:0;max-width:var(--container-reading)}
.promise-item{display:flex;align-items:baseline;gap:12px;padding:7px 0;border-block-end:1px solid var(--surface-2)}
.promise-item:last-child{border-block-end:0}
.promise-item b{color:#fff;background:var(--primary);border-radius:50%;width:22px;height:22px;min-width:22px;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem}

form.persona label{display:block;margin:8px 0;font-size:.92rem;min-height:32px}

/* Three-column "what do I need to do" */
.threecol{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.threecol .col h3{margin-block-start:0}
@media(max-width:720px){.threecol{grid-template-columns:1fr}}

/* Workflow list rows */
.wf-list{display:flex;flex-direction:column;gap:var(--s2)}
.wf-list .card{padding:0}
.wf-row{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;padding:13px 18px;text-decoration:none;color:inherit;min-height:40px}
.wf-row:hover{background:var(--bg)}
.wf-row-title{font-weight:700;color:var(--ink);flex:1;min-width:160px}
@media(max-width:560px){.wf-row{flex-direction:column;align-items:flex-start;gap:6px}}

/* ── Top header bar — the ONE product header (iiu_ui_header(), Design Pass 3a) ──────────── */
.top{position:sticky;top:0;z-index:30;background:var(--primary);color:#fff;padding:10px var(--s4);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.top a{color:#fff;text-decoration:none;opacity:.92;min-height:40px;display:inline-flex;align-items:center}
.top a:hover{opacity:1;text-decoration:underline}
.top .brand{font-weight:800;font-size:1.05rem;display:flex;align-items:center;gap:6px}
.top .sp{flex:1}
.top .who{font-size:.82rem;opacity:.85}

.top .top-brand{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.top .top-brand .wordmark{font-weight:800;font-size:1.05rem;color:#fff;white-space:nowrap}
.top .top-title{font-size:.92rem;font-weight:600;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.top .top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.top .who{white-space:nowrap}
.top select.pvsel,.top select.top-viewas{font:inherit;font-size:.8rem;padding:5px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.5);background:#fff;color:var(--ink);max-width:240px;min-height:32px}
/* DP4: a long "Signed in as <email>" must never force the header — or the page — wider than the
   viewport. It wraps like any other text instead of holding one unbreakable line. */
.top .who{white-space:normal;overflow-wrap:anywhere;max-width:100%}
@media(max-width:640px){
  .top{flex-direction:column;align-items:stretch;gap:8px}
  .top .top-brand,.top .top-actions{width:100%}
  .top .top-actions{justify-content:flex-start}
  .top select.pvsel,.top select.top-viewas{max-width:none;width:100%}
}

/* ── Tabs — secondary navigation row (iiu_ui_tabs(), Design Pass 3a) ───────────────────── */
.tabs{background:var(--surface);border-block-end:1px solid var(--line);padding:0 var(--s4);
  display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabs a{padding:10px 12px;text-decoration:none;color:var(--muted);border-block-end:3px solid transparent;
  white-space:nowrap;font-size:.875rem;font-weight:600;min-height:40px;display:inline-flex;align-items:center}
.tabs a:hover{color:var(--ink);border-color:var(--line)}
.tabs a:focus-visible{outline:3px solid var(--accent);outline-offset:-2px}
.tabs a[aria-current=page],.tabs a.on{color:var(--primary);border-color:var(--accent);font-weight:700}
@media(max-width:640px){.tabs{padding:0 var(--s4)}}

/* ── Form controls — consistent focus ring + invalid state (Design Pass 5, §6) ─────────── */
/* Foundation safety net (DP4 §7 item 4): a plain <select> can size to its widest <option> text
   in some engines; nothing on a hub page should ever be wider than its container because of it. */
input,textarea,select{font:inherit;color:var(--ink);max-width:100%}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],textarea,select{
  border:1px solid var(--line);border-radius:var(--radius-control);padding:8px 12px;background:var(--surface);min-height:40px}
textarea{min-height:80px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
input[aria-invalid=true],textarea[aria-invalid=true],select[aria-invalid=true]{border-color:var(--bad)}
.field-error{color:var(--bad);font-size:.82rem;margin-block-start:4px}
details>summary{cursor:pointer}
details>summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ── Stat — number + label (neutral unless the number itself carries meaning) ─────────── */
.stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.stat .stat-n{font-size:1.375rem;font-weight:700;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.stat .stat-l{font-size:.78125rem;color:var(--muted);font-weight:600}
.stat .stat-s{font-size:.78125rem;color:var(--muted)}
.stat--ok .stat-n{color:var(--ok)}
.stat--warn .stat-n{color:var(--warn)}
.stat--bad .stat-n{color:var(--bad)}

/* ── Section title — sentence case, no uppercase (replaces the old uppercase .sec-hdr pattern) ── */
.section-title{font-size:1.25rem;line-height:1.3;font-weight:650;color:var(--ink);margin:0 0 var(--s3)}

/* ── Highlight card — "Your next step" and similar single most-important card on a page ── */
.card--highlight{border-inline-start:4px solid var(--accent)}

/* ── Nav groups — Start · Learn · Do · Decide (DP4 item 3: one row at ≥1280) ────────────── */
.nav-groups{background:var(--surface);border-block-end:1px solid var(--line);padding:6px var(--s4)}
.nav-groups .ng-row{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;row-gap:2px}
.nav-groups .ng-group{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.nav-groups .ng-group-label{font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding-inline-end:2px}
[lang=ar] .nav-groups .ng-group-label{text-transform:none}
.nav-groups a{padding:6px 9px;text-decoration:none;color:var(--muted);border-radius:7px;white-space:nowrap;font-size:.8rem;font-weight:600;min-height:36px;display:inline-flex;align-items:center}
.nav-groups a:hover{background:var(--bg);color:var(--ink)}
.nav-groups a[aria-current=page]{color:#fff;background:var(--primary);font-weight:700}
.nav-groups select{display:none}
@media(max-width:1279px){
  /* two clean rows: Start+Learn+Do on row 1, Decide (and anything that doesn't fit) wraps to row 2 */
  .nav-groups .ng-row{gap:var(--s3)}
}
@media(max-width:768px){
  .nav-groups .ng-row{flex-direction:column;align-items:flex-start;gap:6px}
  .nav-groups .ng-group{width:100%}
}
@media(max-width:560px){
  .nav-groups .ng-row{display:none}
  .nav-groups select{display:block;width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-control);font-size:.9rem;background:var(--surface);color:var(--ink);min-height:40px}
}

/* ── Hero — full container width; two columns ≥1024 ────────────────────── */
.hero{margin-block-end:var(--s6)}
.hero h1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hero .hero-grid{display:grid;grid-template-columns:1fr;gap:var(--s6)}
@media(min-width:1024px){
  .hero .hero-grid{grid-template-columns:minmax(0,1fr) minmax(280px,360px);align-items:start}
}
.hero .hero-main{max-width:var(--container-reading)}
.hero .hero-side{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--s5)}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.hub-footer{margin-block-start:var(--s7);padding-block:var(--s5);border-block-start:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;color:var(--muted);font-size:.85rem}
.hub-footer a{color:var(--muted)}

.wrap{padding:20px var(--s4) 64px;max-width:var(--container-wide);margin-inline:auto}