/* deckcast design system — drawn from the Ministry workbook: deep teal, terracotta, gold rule, warm paper.
   One token set for the four surfaces (pocket · stage · cockpit · studio). Fonts are served locally (no internet in the hall). */
@import url(fonts/IBM_Plex_Sans_Arabic.css);
@import url(fonts/Amiri.css);
@import url(fonts/Noto_Naskh_Arabic.css);
@import url(fonts/Noto_Nastaliq_Urdu.css);
:root{
  --teal:#0f4f49; --teal-2:#176a5f; --teal-soft:#dcebe6; --terra:#8c3b1a; --gold:#c9a35b; --gold-ink:#7d5f1c; --gold-soft:#f1e6cc;
  --paper:#f7f3ec; --card:#fffdf9; --beige:#efe9df; --ink:#1d2a27; --muted:#5f6b67; --line:#ddd5c7;
  --ok:#1f6b45; --ok-soft:#dff0e6; --bad:#9b2c2c; --bad-soft:#f6e1e1; --warn:#8a5a0b; --warn-soft:#f5e9d2;
  --display:"Amiri","Noto Naskh Arabic",serif;
  --body:"IBM Plex Sans Arabic","Noto Naskh Arabic",system-ui,sans-serif;
  --urdu:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif;
  --r:12px; --shadow:0 1px 2px rgba(29,42,39,.08),0 8px 24px rgba(29,42,39,.06);
  /* system v2 (10-14): one scale for every page — type 1.25 (major third) on 16px, spacing on 4px, radii, layered shadows, motion */
  --fs-xs:.8rem; --fs-sm:.9rem; --fs-md:1rem; --fs-lg:1.25rem; --fs-xl:1.563rem; --fs-2xl:1.953rem; --fs-3xl:2.441rem; --fs-4xl:3.052rem;
  --fs-hero:clamp(2.4rem,5.2vw,4.4rem);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:28px;
  --shadow-sm:0 1px 2px rgba(15,79,73,.08);
  --shadow-md:0 1px 2px rgba(15,79,73,.06),0 10px 30px -8px rgba(15,79,73,.14);
  --shadow-lg:0 2px 4px rgba(15,79,73,.06),0 30px 60px -20px rgba(15,79,73,.30);
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --dur-1:160ms; --dur-2:280ms; --dur-3:520ms; --dur-4:900ms;
  --teal-deep:#0b3d38; --teal-ink:#08302c; --gold-rule:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent);
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.dark{ --paper:#0f1817; --card:#17221f; --beige:#1d2a27; --ink:#efe9dd; --muted:#a3ada8; --line:#2b3a36; --teal-soft:#1b3330; --gold-soft:#3a2f16;
  --ok-soft:#163528; --bad-soft:#3a1d1d; --warn-soft:#3a2d12; --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35); color-scheme:dark }
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
body.ur,.ur,:lang(ur){font-family:var(--urdu);line-height:2.05}
:lang(fa),:lang(ps){font-family:"Noto Naskh Arabic",var(--body)}
body.ur h1,body.ur h2,body.ur h3,.ur h1,.ur h2,.ur h3{font-family:var(--urdu);line-height:1.9}
h1,h2,h3{font-family:var(--display);color:var(--teal);margin:0;line-height:1.35;text-wrap:balance;font-weight:700}
[dir=ltr] h1,[dir=ltr] h2,[dir=ltr] h3{font-family:var(--body);letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum","lnum";direction:ltr;unicode-bidi:isolate}
.hide{display:none!important}
/* icons: single-stroke, inherit color */
.ic{width:1.15em;height:1.15em;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;background:var(--teal);color:#fff;border:0;border-radius:10px;padding:10px 18px;font:inherit;font-weight:600;cursor:pointer;line-height:1.3;text-decoration:none;transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),background var(--dur-2)}
.btn:hover{box-shadow:var(--shadow-md)}.btn:active{transform:translateY(1px)}
.btn:focus-visible,.opt:focus-visible,.pill:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--gold);outline-offset:2px}   /* every control shows where the keyboard is */
.btn[disabled]{opacity:.5;cursor:default}
.btn.ghost{background:transparent;color:var(--teal);border:1.5px solid var(--teal)}
.btn.soft{background:var(--teal-soft);color:var(--teal)}
.btn.danger{background:transparent;color:var(--terra);border:1.5px solid var(--terra)}
.btn.big{font-size:1.15em;padding:14px 26px}
.btn.icon{padding:8px;border-radius:50%;width:40px;height:40px;justify-content:center}
.pill{display:inline-flex;align-items:center;gap:.4em;border-radius:999px;padding:3px 12px;font-size:.85em;font-weight:600;background:var(--teal-soft);color:var(--teal);border:0;font-family:inherit}
.pill.gold{background:var(--gold-soft);color:var(--warn)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.dim{background:var(--beige);color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.rule{height:3px;background:linear-gradient(90deg,var(--gold),transparent);border:0;margin:0}
.eyebrow{font-size:.78em;letter-spacing:.06em;color:var(--gold-ink);font-weight:700}
.dark .eyebrow{color:var(--gold)}
.muted{color:var(--muted)}
/* quiz options: never colour-only */
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:start;background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;font:inherit;cursor:pointer;color:var(--ink);position:relative}
.opt .k{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--beige);color:var(--teal);font-weight:700}
.opt .txt{flex:1;min-width:0}
.opt .pct{flex:none;color:var(--muted);font-weight:600}
.opt.sel{border-color:var(--teal);background:var(--teal-soft)}
.opt.sel .k{background:var(--teal);color:#fff}
.opt.ok{border-color:var(--ok);background:var(--ok-soft)}
.opt.ok .k{background:var(--ok);color:#fff}
.opt.bad{border-color:var(--bad);background:var(--bad-soft)}
.opt.bad .k{background:var(--bad);color:#fff}
.opt.dim{opacity:.78}
.opt .bar{position:absolute;inset-inline-start:0;bottom:0;height:5px;background:var(--line);border-radius:0 0 12px 12px;transition:width .5s}
.opt.ok .bar{background:var(--ok)}
.opt.sel.bad .bar{background:var(--bad)}
.verdict{font-weight:700;margin-top:10px;display:flex;align-items:center;gap:8px}
.verdict.ok{color:var(--ok)} .verdict.bad{color:var(--bad)}
/* form */
input,textarea,select{width:100%;font:inherit;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card);color:var(--ink)}
input:focus,textarea:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--teal)}
label{display:block;font-weight:600;margin:12px 0 6px;color:var(--teal)}
/* stage card (shared by pocket and stage) */
.stage{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stage .hd{padding:14px 18px 10px;border-bottom:3px solid var(--gold)}
.stage .hd h2{font-size:1.35em}
.stage .body{padding:14px 18px;display:grid;gap:12px}
.stage ul{margin:0;padding-inline-start:1.2em;display:grid;gap:8px;font-size:1.05em;line-height:1.7}
.stage li::marker{color:var(--gold)}
.stage figure{margin:0}
.stage figure img{display:block;width:100%;height:auto;border-radius:8px;background:#fff}
.stage figcaption{font-size:.9em;color:var(--muted);margin-top:6px}
.stage table{border-collapse:collapse;width:100%;font-size:.92em}
.stage td,.stage th{border:1px solid var(--line);padding:6px 8px;vertical-align:top}
.stage tr:first-child td{background:var(--teal-soft);font-weight:700}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}