@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Playfair+Display:wght@500;600;700&display=swap');
/* ============================================================================
   THE GATE — REAL ESTATE INTELLIGENCE LIBRARY · DESIGN SYSTEM v3 (2026-09-18)
   Recovered from the oracle's "Premium Knowledge System": editorial, image-led,
   NAVY / GOLD / PAPER — never an ERP dashboard. Cairo (Arabic-first) + Playfair
   Display (Latin display). Logical properties → RTL/LTR automatic. This file
   styles the port's existing class vocabulary in the recovered identity and adds
   the premium hero/card classes the dashboard and profile pages need.
   ========================================================================== */

/* ---- 1. BRAND TOKENS --------------------------------------------------- */
:root{
  --navy-950:#0a1426; --navy-900:#0f1d38; --navy-800:#17284a; --navy-700:#25365c;
  --navy-600:#334874; --navy-500:#475e8f; --navy:#12203c;
  --gold:#c8a951; --gold-bright:#e2c874; --gold-deep:#a9812f; --gold-700:#8f6f2a;
  --paper:#faf8f3; --paper-2:#f3efe6; --paper-3:#efe9dc;
  --ink:#16203a; --ink-soft:#4a5468; --ink-faint:#8a8f9e;
  --line:#e7e2d6; --line-strong:#d8d0bf;
  --surface:#ffffff; --danger:#b3341f; --danger-050:#f7e6e2; --ok:#1f7a4d; --ok-050:#e5f2ea; --warn:#9a6a09; --warn-050:#f7efd9;
  --sh-1:0 1px 2px rgba(18,32,60,.05); --sh-2:0 12px 30px -14px rgba(18,32,60,.22);
  --sh-3:0 22px 48px -22px rgba(18,32,60,.34); --gold-ring:0 0 0 3px rgba(200,169,81,.18);
  --r-1:8px; --r-2:12px; --r-3:16px; --r-4:24px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:32px; --sp-7:48px; --sp-8:72px;
  --side-w:272px; --top-h:64px; --content-max:1320px;
  --font-sans:'Cairo','Segoe UI',Tahoma,'Helvetica Neue',Arial,sans-serif;
  --font-display:'Playfair Display','Cairo',Georgia,serif;
  --fs-11:.6875rem; --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem; --fs-15:.9375rem;
  --fs-16:1rem; --fs-18:1.125rem; --fs-20:1.25rem; --fs-24:1.5rem; --fs-30:1.875rem; --fs-36:2.25rem; --fs-48:3rem;
}
/* Arabic display headings use Cairo (Playfair has no Arabic); no Latin tracking on Arabic. */
[dir=rtl] .heading-display,[lang=ar] .heading-display{font-weight:700;letter-spacing:0}
[dir=rtl] .kicker,[dir=rtl] .stat-block .l,[dir=rtl] thead th,[dir=rtl] [class*=tracking]{letter-spacing:normal !important}

/* ---- 2. BASE ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--font-sans);font-size:var(--fs-16);line-height:1.65;
  background-color:var(--paper);
  background-image:radial-gradient(circle at 100% 0,rgba(200,169,81,.05),transparent 38%),
    radial-gradient(circle at 0 100%,rgba(18,32,60,.04),transparent 42%);
  background-attachment:fixed;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;line-height:1.3;color:var(--navy-900);font-weight:700}
.heading-display{font-family:var(--font-display);letter-spacing:-.01em;font-weight:600}
p{margin:0 0 var(--sp-3)}
a{color:var(--gold-deep);text-decoration:none} a:hover{color:var(--gold-700)}
small{font-size:var(--fs-12)}
hr,.hairline{border:0;border-top:1px solid var(--line);margin:var(--sp-5) 0}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
::selection{background:rgba(200,169,81,.22)}
img{max-width:100%;height:auto}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
.numeric,.numeric *{font-variant-numeric:tabular-nums}

/* ---- 3. EDITORIAL SIGNATURE ------------------------------------------- */
.kicker,.kicker{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-11);font-weight:800;
  text-transform:uppercase;letter-spacing:.2em;color:var(--gold-deep)}
.kicker::before{content:"";display:inline-block;height:1px;width:22px;background:var(--gold)}
[dir=rtl] .kicker::before{background:var(--gold)}
.gold-rule{background:linear-gradient(90deg,transparent,var(--gold),transparent);height:1px;border:0}

/* ---- 4. APP SHELL ----------------------------------------------------- */
.app{display:grid;grid-template-columns:var(--side-w) 1fr;grid-template-rows:var(--top-h) 1fr;
  grid-template-areas:"brand top" "side main";min-height:100vh}
.app-brand{grid-area:brand;display:flex;align-items:center;gap:var(--sp-3);padding-inline:var(--sp-5);
  background:linear-gradient(150deg,var(--navy-950),var(--navy) 60%,var(--navy-800));color:#fff}
.app-brand .logo{width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:var(--navy-950);font-weight:900;
  font-family:var(--font-display);font-size:var(--fs-18)}
.app-brand .brand-name{font-weight:800;font-size:var(--fs-15);letter-spacing:.005em;white-space:nowrap;line-height:1.2}
.app-brand .brand-sub{display:block;color:var(--gold-bright);font-size:var(--fs-11);font-weight:600}

header.site{grid-area:top;display:flex;align-items:center;gap:var(--sp-4);padding-inline:var(--sp-5);
  background:rgba(255,255,255,.82);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30}
header.site .top-search{flex:1 1 auto;max-width:520px;position:relative}
header.site .top-search input{width:100%;height:40px;padding-inline:40px var(--sp-4);border-radius:var(--r-pill);
  border:1px solid var(--line);background:#fff;font-size:var(--fs-14);font-family:var(--font-sans)}
header.site .top-search input:focus{border-color:var(--gold);box-shadow:var(--gold-ring);outline:none}
header.site .top-search::before{content:"⌕";position:absolute;inset-inline-start:15px;top:50%;transform:translateY(-50%);color:var(--ink-faint);font-size:var(--fs-18);pointer-events:none}
header.site .top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--sp-2)}

.app-side{grid-area:side;background:rgba(255,255,255,.6);border-inline-end:1px solid var(--line);
  padding:var(--sp-5) var(--sp-3);overflow-y:auto;position:sticky;top:var(--top-h);height:calc(100vh - var(--top-h))}
.app-main{grid-area:main;min-width:0;padding:var(--sp-6) var(--sp-7) var(--sp-8)}
.app-main > .page{max-width:var(--content-max);margin-inline:auto}
footer.site{margin-top:var(--sp-8);padding-top:var(--sp-4);border-top:1px solid var(--line);color:var(--ink-faint);font-size:var(--fs-12)}

/* ---- 5. SIDEBAR NAVIGATION (grouped, editorial) ----------------------- */
nav.site ul,.app-side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.nav-group{margin-bottom:var(--sp-5)}
.nav-group > .nav-title{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-11);text-transform:uppercase;
  letter-spacing:.16em;color:var(--ink-faint);font-weight:800;padding:var(--sp-1) var(--sp-3) var(--sp-2)}
.app-side a,nav.site a{display:flex;align-items:center;gap:var(--sp-3);padding:9px var(--sp-3);border-radius:var(--r-2);
  color:var(--ink-soft);font-weight:600;font-size:var(--fs-14);transition:background .12s,color .12s}
.app-side a:hover,nav.site a:hover{background:rgba(200,169,81,.1);color:var(--navy-900)}
.app-side a[aria-current=page],nav.site a[aria-current=page]{background:var(--navy-900);color:#fff}
.app-side a[aria-current=page] .ico{color:var(--gold-bright)}
.app-side a .ico,nav.site a .ico{width:20px;text-align:center;flex:0 0 auto;opacity:.9;font-size:var(--fs-15)}
details.nav-admin{border-top:1px solid var(--line);padding-top:var(--sp-3);margin-top:var(--sp-2)}
details.nav-admin > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r-2);color:var(--ink-faint);font-weight:800;
  font-size:var(--fs-11);text-transform:uppercase;letter-spacing:.16em}
details.nav-admin > summary::-webkit-details-marker{display:none}
details.nav-admin > summary:hover{background:rgba(18,32,60,.05);color:var(--ink-soft)}
details.nav-admin .nav-caret{margin-inline-start:auto;transition:transform .18s;font-size:var(--fs-12)}
details.nav-admin[open] .nav-caret{transform:rotate(180deg)}
details.nav-admin ul{margin-top:var(--sp-1)} details.nav-admin a{font-size:var(--fs-13);padding-block:7px}

/* ---- 6. PAGE HEAD ----------------------------------------------------- */
.page-head{display:flex;align-items:flex-start;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-6);
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.page-head .page-title{display:flex;flex-direction:column;gap:4px;min-width:0}
.page-head h1{font-family:var(--font-display);font-size:var(--fs-30);letter-spacing:-.01em}
[dir=rtl] .page-head h1{font-weight:800}
.kicker,.page-head .kicker{margin:0}
.page-subtitle,.page-head .subtitle{color:var(--ink-soft);font-size:var(--fs-15);margin:0}
.page-head .page-actions{margin-inline-start:auto;display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}

/* ---- 7. BUTTONS (pill; navy / gold) ----------------------------------- */
.button,.btn,button:not(.unstyled),input[type=submit],a.button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);border-radius:var(--r-pill);
  padding:10px 20px;font:600 var(--fs-14)/1 var(--font-sans);cursor:pointer;text-decoration:none;white-space:nowrap;
  border:1px solid var(--line);background:#fff;color:var(--navy-800);transition:background .14s,border-color .14s,box-shadow .14s,transform .05s,color .14s}
.button:hover,.btn:hover,button:not(.unstyled):hover{border-color:var(--gold);color:var(--navy-900);text-decoration:none}
.button:active,button:not(.unstyled):active{transform:translateY(1px)}
.button-primary,.button.primary,.btn-primary,button[type=submit].primary,form.search-box button{
  background:linear-gradient(135deg,var(--navy-900),var(--navy-800));color:#fff;border-color:transparent}
.button-primary:hover,.btn-primary:hover{box-shadow:0 10px 24px -10px rgba(18,32,60,.5);color:#fff}
.btn-gold,.button.gold{background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:var(--navy-950);border-color:transparent}
.btn-gold:hover{box-shadow:0 10px 24px -10px rgba(200,169,81,.7);color:var(--navy-950)}
.button.ghost,.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-soft)}
.button.ghost:hover{background:rgba(18,32,60,.05);color:var(--navy-900)}
.button.danger,.btn-danger,button.danger,.danger-zone button{background:#fff;color:var(--danger);border-color:var(--danger-050)}
.button.danger:hover{background:var(--danger-050);color:var(--danger)}
.button.sm,.btn.sm{padding:7px 14px;font-size:var(--fs-13)}
.button[disabled],button[disabled]{opacity:.5;cursor:not-allowed}
a.cancel,.cancel{color:var(--ink-faint);font-weight:600;align-self:center}
.actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.on-dark .button,.on-dark .btn-outline{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25);color:#fff}
.on-dark .button:hover{border-color:var(--gold-bright);color:var(--gold-bright)}

/* ---- 8. FORMS --------------------------------------------------------- */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),select,textarea{
  width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-2);background:#fff;color:var(--ink);
  font:var(--fs-14)/1.5 var(--font-sans);transition:border-color .14s,box-shadow .14s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:var(--gold-ring)}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
  background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px;background-size:5px 5px;background-repeat:no-repeat;padding-inline-end:34px}
[dir=rtl] select{background-position:18px 18px,13px 18px}
label{display:block;font-size:var(--fs-14)}
label > span,.label{display:block;font-weight:700;color:var(--ink-soft);margin-bottom:6px;font-size:var(--fs-12)}
form label + label,.form-row{margin-top:var(--sp-3)}
fieldset{border:1px solid var(--line);border-radius:var(--r-2);padding:var(--sp-4);margin:0 0 var(--sp-4)}
legend{font-weight:700;font-size:var(--fs-12);padding-inline:var(--sp-2);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}
.hint{color:var(--ink-faint);font-size:var(--fs-12);margin-top:4px}
.field-error{color:var(--danger);font-size:var(--fs-12);margin-top:4px;font-weight:700;display:block}
.form-errors{background:var(--danger-050);border:1px solid var(--danger-050);color:var(--danger);border-radius:var(--r-2);
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-14);margin-bottom:var(--sp-4);font-weight:600}
label input[type=checkbox],label input[type=radio]{width:auto;margin-inline-end:8px;accent-color:var(--gold-deep)}
.auth-form{max-width:400px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-4);padding:var(--sp-6);box-shadow:var(--sh-2)}
.auth-form label{margin-top:var(--sp-4)} .auth-form button{width:100%;margin-top:var(--sp-5)}
.auth-form button[type=submit]{background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:var(--navy-950);border-color:transparent}

/* ---- 9. SURFACES / CARDS ---------------------------------------------- */
.card,.panel,.record,.section-block,.panel-intel{background:#fff;border:1px solid var(--line);border-radius:var(--r-3);
  padding:var(--sp-5);box-shadow:var(--sh-1)}
.panel-intel{background:linear-gradient(180deg,#fff,var(--paper))}
.card{padding:var(--sp-4);transition:box-shadow .3s,transform .12s,border-color .2s}
a.card,.card.link,.card-hover{display:block;color:inherit}
a.card:hover,.card.link:hover,.card-hover:hover{box-shadow:var(--sh-2);border-color:rgba(200,169,81,.5);transform:translateY(-2px);text-decoration:none}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:var(--sp-4)}
.section-block,.section{margin-bottom:var(--sp-6)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-4);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.section-title{font-family:var(--font-display);font-size:var(--fs-20);font-weight:600;color:var(--navy-900)}
.panel-disabled{opacity:.6}

/* image-led card (developers, projects, featured) */
.image-card{position:relative;overflow:hidden;border-radius:var(--r-3);border:1px solid var(--line);background:#fff;
  box-shadow:var(--sh-1);transition:box-shadow .3s,transform .12s,border-color .2s;display:block;color:inherit}
.image-card:hover{box-shadow:var(--sh-3);transform:translateY(-3px);border-color:rgba(200,169,81,.5);text-decoration:none}
.image-card .media{position:relative;aspect-ratio:16/10;overflow:hidden;
  background:radial-gradient(120% 120% at 100% 0,rgba(200,169,81,.14),transparent 45%),linear-gradient(150deg,var(--navy-950),var(--navy) 55%,var(--navy-800))}
.image-card .media img{height:100%;width:100%;object-fit:cover;transition:transform .5s}
.image-card:hover .media img{transform:scale(1.05)}
.image-card .media .initial{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);font-size:var(--fs-48);font-weight:700;color:rgba(226,200,116,.6)}
.media-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,20,38,.85),transparent 60%)}
.image-card .cap{position:absolute;inset-inline:0;bottom:0;padding:var(--sp-4);color:#fff}
.image-card .cap h3{color:#fff;font-family:var(--font-display);font-size:var(--fs-16);font-weight:600}

/* ---- 10. STATS -------------------------------------------------------- */
dl.stats,.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3);margin:0 0 var(--sp-6);padding:0}
dl.stats > div,.stats > div{background:#fff;border:1px solid var(--line);border-radius:var(--r-3);padding:var(--sp-4);box-shadow:var(--sh-1)}
dl.stats dt,.stats dt{font-size:var(--fs-11);color:var(--ink-faint);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
dl.stats dd,.stats dd{margin:6px 0 0;font-family:var(--font-display);font-size:var(--fs-30);font-weight:700;color:var(--navy-900);font-variant-numeric:tabular-nums;line-height:1}
.stat-block{display:flex;flex-direction:column}
.stat-block .n{font-family:var(--font-display);font-size:var(--fs-24);font-weight:700;line-height:1;color:#fff}
.stat-block .l{margin-top:6px;font-size:var(--fs-11);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.6)}

/* ---- 11. TABLES (editorial) ------------------------------------------- */
table,.data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-14);background:#fff;border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden}
thead th{background:var(--paper);color:var(--ink-faint);font-weight:800;font-size:var(--fs-11);text-transform:uppercase;
  letter-spacing:.12em;text-align:start;padding:12px var(--sp-4);white-space:nowrap;border-bottom:1px solid var(--line)}
tbody td{padding:12px var(--sp-4);border-top:1px solid var(--line);vertical-align:middle}
tbody tr{transition:background .12s} tbody tr:hover td{background:rgba(200,169,81,.05)}
td.numeric,th.numeric{text-align:end;font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto;border-radius:var(--r-3)}

/* ---- 12. BADGES / CHIPS ----------------------------------------------- */
.badge,.status,.tier,.tag,.type-badge,.role,.flag{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-12);
  font-weight:700;padding:3px 11px;border-radius:var(--r-pill);background:var(--paper-2);color:var(--ink-soft);line-height:1.5;white-space:nowrap}
.badge.ok,.status.active,.status.ACTIVE,.notice-ok{background:var(--ok-050);color:var(--ok)}
.badge.warn,.status.pending,.notice-warning{background:var(--warn-050);color:var(--warn)}
.badge.danger,.status.inactive,.status.SUSPENDED,.notice-danger{background:var(--danger-050);color:var(--danger)}
.tier,.chip-gold,.featured{background:rgba(200,169,81,.12);color:var(--gold-deep);border:1px solid rgba(200,169,81,.35)}
.badge-snapshot{background:rgba(71,94,143,.12);color:var(--navy-600)} .badge-dormant{background:var(--paper-2);color:var(--ink-faint)}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;padding:0;margin:var(--sp-2) 0}
.chip{background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:0}
.chip a,a.chip{display:inline-block;padding:6px 15px;color:var(--ink-soft);font-weight:600;font-size:var(--fs-13)}
.chip:hover{border-color:var(--gold);background:rgba(200,169,81,.08)} .chip:hover a{color:var(--gold-deep)}
.chips-label{font-size:var(--fs-13);color:var(--ink-faint);font-weight:700;margin-bottom:var(--sp-1)}

/* ---- 13. NOTICES / FLASH / STATES ------------------------------------ */
.notice{background:rgba(200,169,81,.1);color:var(--gold-deep);border-radius:var(--r-2);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-13);font-weight:600;display:inline-block}
.notice-warning{background:var(--warn-050);color:var(--warn)} .notice-danger{background:var(--danger-050);color:var(--danger)} .notice-ok{background:var(--ok-050);color:var(--ok)}
.flash,[class*=flash-]{border-radius:var(--r-2);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4);font-weight:600;font-size:var(--fs-14);box-shadow:var(--sh-1);background:var(--ok-050);color:var(--ok);border:1px solid transparent}
.flash-warning{background:var(--warn-050);color:var(--warn)} .flash-danger{background:var(--danger-050);color:var(--danger)}
.empty{text-align:center;color:var(--navy-900);font-family:var(--font-display);font-size:var(--fs-20);font-weight:600;margin:var(--sp-7) 0 var(--sp-2)}
.empty::before{content:"";display:block;width:56px;height:56px;margin:0 auto var(--sp-3);border-radius:var(--r-3);background:var(--paper-2);border:1px solid var(--line)}
.empty-description{text-align:center;color:var(--ink-faint);font-size:var(--fs-14);max-width:46ch;margin:0 auto var(--sp-4)}
.danger-zone{border:1px solid var(--danger-050);background:var(--danger-050);border-radius:var(--r-3);padding:var(--sp-4);margin-top:var(--sp-5)}
.danger-zone h2,.danger-zone h3{color:var(--danger)}

/* ---- 14. UTILITIES ---------------------------------------------------- */
.muted,.meta{color:var(--ink-faint)} .text-faint{color:var(--ink-faint)} .danger{color:var(--danger)} .warning{color:var(--warn)}
.spacer{margin-inline-start:auto} .count{font-variant-numeric:tabular-nums}
.crumbs,.breadcrumbs{display:flex;gap:var(--sp-2);flex-wrap:wrap;list-style:none;padding:0;margin:0 0 var(--sp-4);color:var(--ink-faint);font-size:var(--fs-13)}
.crumbs a,.breadcrumbs a{color:var(--ink-faint)} .crumbs li+li::before,.breadcrumbs li+li::before{content:"/";margin-inline-end:var(--sp-2);color:var(--line-strong)}
.list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-2)}

/* ---- 15. PROFILE HERO (developer / project) --------------------------- */
.profile-hero{position:relative;overflow:hidden;border-radius:var(--r-4);color:#fff;
  background:radial-gradient(130% 130% at 100% 0,rgba(200,169,81,.18),transparent 45%),linear-gradient(150deg,var(--navy-950),var(--navy) 55%,var(--navy-800))}
.profile-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px;opacity:.5}
.profile-hero > *{position:relative;z-index:1}
.profile-hero h1,.profile-hero h2,.profile-hero h3{color:#fff}
.profile-hero .heading-display,.profile-hero h1{font-family:var(--font-display)}
.profile-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-5);
  flex-wrap:wrap;padding:var(--sp-7) var(--sp-6);margin-bottom:var(--sp-6)}
.profile-hero .hero-body{display:flex;align-items:center;gap:var(--sp-5);min-width:0}
.profile-hero .hero-mark{flex:0 0 auto;width:76px;height:76px;border-radius:var(--r-3);display:grid;place-items:center;
  font-family:var(--font-display);font-size:var(--fs-36);font-weight:700;color:var(--navy-950);
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));box-shadow:0 10px 26px -12px rgba(200,169,81,.6)}
.profile-hero .page-title{min-width:0}
.profile-hero .kicker{color:var(--gold-bright)} .profile-hero .kicker::before{background:var(--gold-bright)}
.profile-hero h1{font-size:var(--fs-30);margin-top:6px}
.profile-hero .legal,.profile-hero .subtitle{color:rgba(255,255,255,.72);margin:6px 0 0;font-size:var(--fs-15)}
.profile-hero .meta{margin-top:var(--sp-3);display:flex;gap:var(--sp-2);flex-wrap:wrap}
.profile-hero .meta .status,.profile-hero .meta .tag{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18)}
.profile-hero .page-actions{margin-inline-start:auto}

/* ---- 16. PAGINATION / DENIAL ------------------------------------------ */
.pagination{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-5)}
.pagination-summary{margin:0;color:var(--ink-faint);font-size:var(--fs-13)}
.pagination ul{display:flex;gap:var(--sp-1);list-style:none;margin:0;padding:0}
.pagination li a,.pagination li span{display:inline-grid;place-items:center;min-width:38px;height:38px;padding-inline:8px;border:1px solid var(--line);border-radius:var(--r-2);color:var(--ink-soft);font-weight:600;font-size:var(--fs-13);background:#fff}
.pagination li a:hover{border-color:var(--gold);color:var(--gold-deep)}
.pagination li span[aria-current=page]{background:var(--navy-900);color:#fff;border-color:var(--navy-900)}
.denial{max-width:520px;margin:var(--sp-8) auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-4);padding:var(--sp-8) var(--sp-6);box-shadow:var(--sh-1)}
.denial-icon{font-size:2.5rem;margin:0 0 var(--sp-3)} .denial h2{font-family:var(--font-display);font-size:var(--fs-20)}

/* ---- 17. structural containers tests pin by exact literal ------------- */
.developer-projects,.link-project,.rate,.analysis,.report-filters,.orphans,.settings-section,.official-links,
.activity-filters,.updates-state,.settings-state,.transfer-project{background:#fff;border:1px solid var(--line);border-radius:var(--r-3);padding:var(--sp-5);box-shadow:var(--sh-1);margin-bottom:var(--sp-5)}
.report-filters,.activity-filters{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:end}
.reports-index,.reports-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-4)}
.retired{opacity:.62} .search-query{font-weight:700} .report-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-2);background:rgba(200,169,81,.12);color:var(--gold-deep);font-size:var(--fs-18);flex:0 0 auto}

/* ---- 18. SEARCH workspace + discovery --------------------------------- */
.search{display:block}
.search-hero{max-width:780px;margin:var(--sp-3) auto var(--sp-6);text-align:center}
.search-hero-title{font-family:var(--font-display);font-size:var(--fs-36);letter-spacing:-.01em;margin-bottom:var(--sp-2);color:var(--navy-900)}
[dir=rtl] .search-hero-title{font-weight:800}
.search-hero-sub{font-size:var(--fs-16);margin:0 auto var(--sp-5);max-width:54ch;color:var(--ink-soft)}
.search .search-box{display:flex;gap:var(--sp-2);background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:7px;box-shadow:var(--sh-2);max-width:720px;margin:0 auto;transition:box-shadow .15s,border-color .15s}
.search .search-box:focus-within{border-color:var(--gold);box-shadow:var(--gold-ring),var(--sh-2)}
.search .search-box input[type=search]{flex:1;border:none;background:transparent;font-size:var(--fs-18);height:48px;padding-inline:var(--sp-5)}
.search .search-box input[type=search]:focus{box-shadow:none;outline:none}
.search .search-box button{border-radius:var(--r-pill);padding-inline:var(--sp-6);font-size:var(--fs-15);background:linear-gradient(135deg,var(--navy-900),var(--navy-800));color:#fff;border-color:transparent}
.search-filters-drawer{max-width:720px;margin:var(--sp-3) auto 0;text-align:start}
.search-filters-drawer > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:8px 17px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;font-weight:600;font-size:var(--fs-13);color:var(--ink-soft)}
.search-filters-drawer > summary::-webkit-details-marker{display:none}
.search-filters-drawer[open] > summary{border-color:var(--gold);color:var(--gold-deep)}
.search-filters-drawer .search-filters{margin-top:var(--sp-3);background:#fff;border:1px solid var(--line);border-radius:var(--r-3);padding:var(--sp-4);box-shadow:var(--sh-1);display:grid;gap:var(--sp-4)}
.search-filters .filter-checks{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4)}
.search-filters .filter-checks label{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-13);font-weight:500;margin:0}
.search-filters .filter-selects{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-3)}
.search-filters fieldset{border:none;padding:0;margin:0} .search-filters legend{padding:0;margin-bottom:var(--sp-2)}
.search-results-region{max-width:var(--content-max);margin-inline:auto}
.discover{display:flex;flex-direction:column;gap:var(--sp-6);margin-top:var(--sp-2)}
.discover-lead{text-align:center;margin-bottom:var(--sp-4)}
.discover-lead-title{font-family:var(--font-display);font-size:var(--fs-18);font-weight:600;color:var(--navy-900);margin:0 0 4px}
.discover-lead-sub{color:var(--ink-faint);font-size:var(--fs-14);max-width:56ch;margin:0 auto}
.discover-block > .discover-title{font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);font-weight:800;margin-bottom:var(--sp-3)}
[dir=rtl] .discover-block > .discover-title{letter-spacing:normal}
.discover-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp-3)}
.discover-card{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);background:#fff;border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--sh-1);color:var(--ink);transition:transform .12s,box-shadow .2s,border-color .2s}
.discover-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:rgba(200,169,81,.5);text-decoration:none}
.discover-ico{width:46px;height:46px;display:grid;place-items:center;border-radius:var(--r-3);background:linear-gradient(135deg,rgba(200,169,81,.16),rgba(18,32,60,.06));color:var(--gold-deep);font-size:var(--fs-20)}
.discover-label{font-weight:700;font-size:var(--fs-15);color:var(--navy-900)}
.search-state{max-width:520px;margin:var(--sp-7) auto;text-align:center}
.results-header{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-5);flex-wrap:wrap}
.results-header h2{font-family:var(--font-display);font-size:var(--fs-24)}
.results-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:var(--sp-5);align-items:start}
.result-group{margin:0 0 var(--sp-5);background:#fff;border:1px solid var(--line);border-radius:var(--r-3);padding:var(--sp-4);box-shadow:var(--sh-1)}
.result-group > h2{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-display);font-size:var(--fs-15);color:var(--navy-900);padding-bottom:var(--sp-2);border-bottom:1px solid var(--line);margin-bottom:var(--sp-2)}
.result-group > h2 small{background:var(--paper-2);color:var(--ink-faint);border-radius:var(--r-pill);padding:1px 9px;font-size:var(--fs-11);font-weight:700}
.results{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.results li{display:flex;align-items:center;gap:var(--sp-3);padding:11px var(--sp-3);border-radius:var(--r-2);border:1px solid transparent;transition:background .1s,border-color .1s}
.results li:hover{background:var(--paper);border-color:var(--line)}
.results li > a,.results li > span:not(.result-icon):not(.badge){font-weight:600;color:var(--navy-900)}
.results li small{color:var(--ink-faint)} .results li small.context{margin-inline-start:auto;text-align:end;color:var(--ink-faint)}
.result-icon{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;border-radius:var(--r-2);background:rgba(200,169,81,.12);color:var(--gold-deep);font-size:var(--fs-16)}

/* ---- 19. DASHBOARD ---------------------------------------------------- */
.dash-hero{position:relative;overflow:hidden;border-radius:var(--r-4);color:#fff;padding:var(--sp-8) var(--sp-6);text-align:center;
  background:radial-gradient(130% 130% at 100% 0,rgba(200,169,81,.18),transparent 45%),linear-gradient(150deg,var(--navy-950),var(--navy) 55%,var(--navy-800))}
.dash-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px;opacity:.5}
.dash-hero > *{position:relative;z-index:1}
.dash-hero .kicker{color:var(--gold-bright);justify-content:center}
.dash-hero .kicker::before{background:var(--gold-bright)}
.dash-hero h1{font-family:var(--font-display);font-size:var(--fs-36);color:#fff;margin:var(--sp-3) 0 0}
[dir=rtl] .dash-hero h1{font-weight:800}
.dash-hero h1 .name{color:var(--gold-bright)}
.dash-hero .tagline{color:rgba(255,255,255,.72);font-size:var(--fs-16);margin:var(--sp-2) auto 0;max-width:44ch}
.dash-hero .dash-search{max-width:620px;margin:var(--sp-6) auto 0}
.dash-hero .search-box{display:flex;gap:var(--sp-2);background:rgba(255,255,255,.97);border-radius:var(--r-pill);padding:7px;box-shadow:var(--sh-3)}
.dash-hero .search-box input{flex:1;border:none;background:transparent;font-size:var(--fs-16);height:46px;padding-inline:var(--sp-5)}
.dash-hero .search-box input:focus{outline:none}
.dash-hero .search-box button{border-radius:var(--r-pill);padding-inline:var(--sp-6);background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:var(--navy-950);border:none;font-weight:700}
.dash-hero .quick{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center;margin-top:var(--sp-5)}
.dash-hero .statbar{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-7);margin:var(--sp-7) auto 0;padding-top:var(--sp-5);border-top:1px solid rgba(255,255,255,.12);max-width:820px}
.dash-section{margin-top:var(--sp-7)}
.dash-section .section-head .view-all{color:var(--gold-deep);font-weight:700;font-size:var(--fs-13)}

/* ---- 20. RESPONSIVE --------------------------------------------------- */
@media (max-width:1080px){.search-filters-drawer,.search-hero{max-width:none} .results-groups{grid-template-columns:1fr}}
/* The checkbox that drives the mobile drawer. Visually hidden but still FOCUSABLE and still
   announced, because it is the real control — the ☰ label is only its affordance. Never
   `display:none`, which would take it out of the tab order. */
.nav-open-state{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nav-scrim{display:none}

@media (max-width:860px){
  :root{--side-w:0px}
  .app{grid-template-columns:1fr;grid-template-areas:"brand" "top" "main"}
  .app-side{position:fixed;inset-block:0;inset-inline-start:0;width:min(84vw,300px);z-index:60;transform:translateX(-102%);
    transition:transform .22s ease;box-shadow:var(--sh-3);height:100vh;top:0;background:#fff}
  [dir=rtl] .app-side{transform:translateX(102%)}
  /* Open. `!important` is deliberate and is the simplest honest way to beat the two DIRECTIONAL
     defaults above (`.app-side` and `[dir=rtl] .app-side`), which set the closed transform per
     writing direction. Specificity alone was measured NOT to settle this reliably here, and an
     open drawer that silently stays off-screen is the whole bug this replaced — so the open state
     is stated unconditionally rather than left to the cascade. */
  .nav-open-state:checked ~ .app-side{transform:translateX(0) !important}
  .nav-open-state:checked ~ .nav-scrim{display:block;position:fixed;inset:0;background:rgba(10,20,38,.5);z-index:50}
  /* Keyboard users land on the checkbox, so the ring has to appear on the label they can see. */
  .nav-open-state:focus-visible ~ header.site .nav-toggle{outline:2px solid var(--gold);outline-offset:2px}
  .app-brand{position:sticky;top:0;z-index:40} .nav-toggle{display:inline-flex!important} .app-main{padding:var(--sp-5) var(--sp-4)}
  header.site .top-search{max-width:none}
}
@media (min-width:861px){.nav-toggle{display:none}}
@media (max-width:560px){
  .page-head h1,.search-hero-title,.dash-hero h1{font-size:var(--fs-24)} .app-main{padding:var(--sp-4) var(--sp-3)}
  dl.stats,.stats{grid-template-columns:repeat(2,1fr)} .page-head .page-actions{margin-inline-start:0;width:100%}
}
.nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-2);border:1px solid var(--line);background:#fff;cursor:pointer;font-size:var(--fs-18)}
.skip-link{position:absolute;inset-inline-start:-999px;top:8px;background:var(--navy-900);color:#fff;padding:8px 14px;border-radius:var(--r-2);z-index:99}
.skip-link:focus{inset-inline-start:8px}
.flip-rtl{display:inline-block}[dir=rtl] .flip-rtl{transform:scaleX(-1)}

/* ---- 21. QUIZZES — employee player, results, admin generator ------------
   The quiz surfaces reuse the editorial vocabulary above (.kicker, .card,
   .badge, .button/.btn-gold, .empty, .data-table). Only the attempt player,
   the result screen and the generator's provenance need their own classes. */
.quiz-meta{display:flex;flex-wrap:wrap;gap:4px var(--sp-4);font-size:var(--fs-12);color:var(--ink-soft);margin-top:var(--sp-3)}
.quiz-meta .best{font-weight:700;color:var(--navy-900)}
.quiz-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.quiz-card-title{font-weight:700;color:var(--navy-900);font-size:var(--fs-15)}
a.quiz-card-title:hover{color:var(--gold-deep)}

/* player shell: question column + a sticky palette rail */
.quiz-player{display:grid;grid-template-columns:1fr 240px;gap:var(--sp-5);align-items:start}
.quiz-main{min-width:0}
.quiz-rail{position:sticky;top:calc(var(--top-h) + var(--sp-4));background:#fff;border:1px solid var(--line);
  border-radius:var(--r-3);padding:var(--sp-4);box-shadow:var(--sh-1)}

/* progress + timer */
.quiz-bar{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.quiz-progress{flex:1 1 220px;height:8px;border-radius:var(--r-pill);background:var(--paper-2);overflow:hidden}
.quiz-progress > span{display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));transition:width .25s}
.quiz-count{font-size:var(--fs-13);font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.quiz-timer{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:var(--r-pill);
  background:var(--navy-900);color:#fff;font-weight:700;font-size:var(--fs-13);font-variant-numeric:tabular-nums}
.quiz-timer.is-warning{background:var(--danger);animation:quiz-pulse 1.4s ease-in-out infinite}
@keyframes quiz-pulse{50%{opacity:.62}}

/* the question */
.quiz-question{background:#fff;border:1px solid var(--line);border-radius:var(--r-3);padding:var(--sp-6);box-shadow:var(--sh-1)}
.quiz-qnum{font-size:var(--fs-11);font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-deep)}
[dir=rtl] .quiz-qnum{letter-spacing:normal}
.quiz-qtext{font-family:var(--font-display);font-size:var(--fs-20);color:var(--navy-900);margin:var(--sp-2) 0 var(--sp-5);line-height:1.5}
[dir=rtl] .quiz-qtext{font-weight:700}
.quiz-options{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.quiz-option{display:flex;align-items:center;gap:var(--sp-3);padding:13px var(--sp-4);border:1px solid var(--line);
  border-radius:var(--r-2);background:#fff;cursor:pointer;font-size:var(--fs-15);transition:border-color .12s,background .12s,box-shadow .12s}
.quiz-option:hover{border-color:var(--gold);background:rgba(200,169,81,.05)}
.quiz-option input{width:auto;margin:0;accent-color:var(--gold-deep);flex:0 0 auto}
.quiz-option.is-selected{border-color:var(--gold);background:rgba(200,169,81,.1);box-shadow:var(--gold-ring)}
.quiz-option.is-correct{border-color:var(--ok);background:var(--ok-050)}
.quiz-option.is-incorrect{border-color:var(--danger);background:var(--danger-050)}
.quiz-option .mark{margin-inline-start:auto;font-weight:800}
.quiz-option.is-correct .mark{color:var(--ok)} .quiz-option.is-incorrect .mark{color:var(--danger)}
.quiz-text-answer{margin-top:var(--sp-2)}

/* navigation + palette */
.quiz-nav{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-5)}
.quiz-nav .spacer{margin-inline-start:auto}
.quiz-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:6px;margin-top:var(--sp-3)}
.quiz-palette a,.quiz-palette span{display:grid;place-items:center;height:38px;border-radius:var(--r-2);
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);font-weight:700;font-size:var(--fs-13);
  font-variant-numeric:tabular-nums;text-decoration:none}
.quiz-palette .is-answered{background:rgba(200,169,81,.14);border-color:rgba(200,169,81,.5);color:var(--gold-deep)}
.quiz-palette .is-current{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.quiz-rail-title{font-size:var(--fs-11);font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-faint)}
[dir=rtl] .quiz-rail-title{letter-spacing:normal}

/* result / review */
.quiz-verdict{position:relative;overflow:hidden;border-radius:var(--r-4);color:#fff;padding:var(--sp-7) var(--sp-6);
  text-align:center;margin-bottom:var(--sp-6);
  background:radial-gradient(130% 130% at 100% 0,rgba(200,169,81,.18),transparent 45%),linear-gradient(150deg,var(--navy-950),var(--navy) 55%,var(--navy-800))}
.quiz-verdict h1{color:#fff;font-family:var(--font-display);font-size:var(--fs-30);margin:var(--sp-2) 0 0}
.quiz-score{font-family:var(--font-display);font-size:var(--fs-48);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.quiz-verdict.is-pass .quiz-score{color:var(--gold-bright)}
.quiz-verdict.is-fail .quiz-score{color:#f0b2a4}
.quiz-verdict .label{font-size:var(--fs-11);font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.62)}
[dir=rtl] .quiz-verdict .label{letter-spacing:normal}
.quiz-verdict .quiz-meta{justify-content:center;color:rgba(255,255,255,.72)}
.quiz-review{display:grid;gap:var(--sp-4)}
.quiz-review-item{background:#fff;border:1px solid var(--line);border-inline-start:3px solid var(--line);
  border-radius:var(--r-3);padding:var(--sp-5);box-shadow:var(--sh-1)}
.quiz-review-item.is-correct{border-inline-start-color:var(--ok)}
.quiz-review-item.is-incorrect{border-inline-start-color:var(--danger)}
.quiz-review-item.is-pending{border-inline-start-color:var(--warn)}
.quiz-explanation{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-2);
  background:var(--paper);color:var(--ink-soft);font-size:var(--fs-14)}

/* generator (admin): scope picker + provenance */
.quiz-scope{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-3) 0}
.quiz-scope label{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border:1px solid var(--line);
  border-radius:var(--r-pill);background:#fff;font-size:var(--fs-13);font-weight:600;cursor:pointer;margin:0}
.quiz-scope label:hover{border-color:var(--gold)}
.quiz-scope input:checked + span{color:var(--gold-deep)}
.quiz-gen-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:var(--sp-2);margin-top:var(--sp-4)}
.quiz-gen-stats > div{background:#fff;border:1px solid var(--line);border-radius:var(--r-2);padding:var(--sp-3);text-align:center}
.quiz-gen-stats dt{font-size:var(--fs-11);color:var(--ink-faint);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.quiz-gen-stats dd{margin:4px 0 0;font-family:var(--font-display);font-size:var(--fs-24);font-weight:700;color:var(--navy-900);font-variant-numeric:tabular-nums}
.quiz-provenance{font-size:var(--fs-12);color:var(--ink-faint);margin-top:var(--sp-2);word-break:break-word}
.quiz-provenance code{background:var(--paper-2);border-radius:4px;padding:1px 6px;font-size:var(--fs-11)}
.badge-generated{background:rgba(71,94,143,.12);color:var(--navy-600)}
.badge-stale{background:var(--warn-050);color:var(--warn)}
.badge-verified{background:var(--ok-050);color:var(--ok)}

@media (max-width:900px){
  .quiz-player{grid-template-columns:1fr}
  .quiz-rail{position:static;order:-1}
  .quiz-palette{grid-template-columns:repeat(auto-fill,minmax(34px,1fr))}
}
@media (max-width:560px){
  .quiz-question{padding:var(--sp-4)} .quiz-qtext{font-size:var(--fs-18)}
  .quiz-nav .button{flex:1 1 auto;justify-content:center}
}

/* ---- 22. QUIZ STATUS / VERDICT BADGES ---------------------------------
   One class per enum value, so a template renders state without deciding
   colour. Bases on .badge; each modifier only re-tints. */
.badge--quiz-status-in-progress,.badge--exam-status-scheduled{background:var(--warn-050);color:var(--warn)}
.badge--quiz-status-submitted,.badge--exam-status-published{background:var(--ok-050);color:var(--ok)}
.badge--quiz-status-expired,.badge--exam-status-closed{background:var(--danger-050);color:var(--danger)}
.badge--quiz-status-under-review,.badge--exam-status-paused{background:rgba(200,169,81,.14);color:var(--gold-deep);border:1px solid rgba(200,169,81,.35)}
.badge--quiz-status-graded{background:rgba(71,94,143,.12);color:var(--navy-600)}
.badge--exam-status-draft{background:var(--paper-2);color:var(--ink-soft)}
.badge--exam-status-archived{background:var(--paper-2);color:var(--ink-faint)}
.badge--quiz-verdict-correct{background:var(--ok-050);color:var(--ok)}
.badge--quiz-verdict-incorrect{background:var(--danger-050);color:var(--danger)}
.badge--quiz-verdict-pending-review{background:var(--warn-050);color:var(--warn)}
/* An assignment whose referent (user/role/department/tier) no longer exists. */
.is-target-missing{opacity:.62;text-decoration:line-through dotted var(--ink-faint)}
.is-target-missing::after{content:"⚠";margin-inline-start:6px;color:var(--warn);text-decoration:none;display:inline-block}