/* =====================================================================
   app.css — the design system for the signed-in product (student portal
   and staff console). Self-contained: the marketing stylesheet is not
   loaded in the shell, so nothing here inherits a hero.

   Sections
     1. Tokens          colour, type, spacing, radius, elevation, motion
     2. Base            reset, typography, icons, flags, focus
     3. Shell           topbar, sidebar, navigation, content column
     4. Layout          page header, tabs, toolbar, two-column, sections
     5. Components      buttons, fields, badges, cards, facts, lists,
                        tables, menus, drawers, alerts, toasts, empty,
                        loading, stats, progress, steppers, timelines,
                        avatars, messages, pager, option cards
     6. Screens         the few compositions that are genuinely one-off:
                        catalogue search, programme detail, review desk,
                        pipeline board, document rows
     7. Responsive

   Rules of the house
     - Every colour, size, radius and shadow is a token. No literals in
       components; no literals in templates.
     - One component per purpose. A variant is a modifier class
       (.btn--danger), never a second component.
     - Spacing comes from the --s* scale only.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme:light;
  --font-display:"Plus Jakarta Sans",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --font-body:"Inter",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Surfaces and lines */
  --bg:#F5F6F8;
  --surface:#FFFFFF;
  --surface-2:#F1F3F6;
  --surface-3:#E8EBF0;
  --border:#E3E7ED;
  --border-strong:#C9D1DC;

  /* Text */
  --text:#101828;
  --text-2:#475467;
  --text-3:#8A94A6;
  --text-on-brand:#FFFFFF;

  /* Brand: the navy carries the structure, the gold is spent on one thing per screen */
  --brand:#0C1222;
  --brand-2:#1A2339;
  --brand-3:#2A3650;
  --brand-line:rgba(255,255,255,.10);
  --brand-line-2:rgba(255,255,255,.18);
  --brand-text:#E7EBF2;
  --brand-muted:#9AA4B6;
  --accent:#F59E0B;
  --accent-hover:#E08A0A;
  --accent-ink:#1A1204;
  --accent-soft:#FEF3C7;
  --accent-text:#B45309;

  /* Semantic */
  --success:#059669;      --success-soft:#ECFDF5; --success-text:#047857; --success-line:#A7F3D0;
  --warning:#D97706;      --warning-soft:#FFFBEB; --warning-text:#B45309; --warning-line:#FDE68A;
  --danger:#DC2626;       --danger-soft:#FEF2F2;  --danger-text:#B91C1C;  --danger-line:#FECACA;
  --info:#2563EB;         --info-soft:#EFF6FF;    --info-text:#1D4ED8;    --info-line:#BFDBFE;
  --ring:#2F6FED;

  /* Type scale */
  --fs-xs:.75rem;    /* 12 — metadata, uppercase labels */
  --fs-sm:.8125rem;  /* 13 — table cells, helper text */
  --fs-md:.875rem;   /* 14 — body */
  --fs-lg:1rem;      /* 16 — emphasised body, card titles */
  --fs-xl:1.125rem;  /* 18 — section titles */
  --fs-2xl:1.375rem; /* 22 — page titles */
  --fs-3xl:1.75rem;  /* 28 — page titles, wide */
  --lh:1.5;
  --lh-tight:1.25;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* Spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:48px;

  /* Radius */
  --r1:6px; --r2:10px; --r3:14px; --r-pill:999px;

  /* Elevation: three steps, used sparingly */
  --sh1:0 1px 2px rgba(16,24,40,.05);
  --sh2:0 4px 12px -4px rgba(16,24,40,.10),0 1px 2px rgba(16,24,40,.04);
  --sh3:0 20px 40px -16px rgba(16,24,40,.22),0 6px 14px -6px rgba(16,24,40,.08);

  /* Layout */
  --top-h:56px;
  --side-w:244px;
  --content-max:1480px;
  --rail-w:300px;
  --measure:64ch;

  /* Motion */
  --t:.15s;
  --t-med:.28s;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-md);line-height:var(--lh);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);margin:0;letter-spacing:-.015em;line-height:var(--lh-tight);color:inherit;text-wrap:balance}
h1{font-size:var(--fs-2xl);font-weight:var(--fw-bold)}
h2{font-size:var(--fs-xl);font-weight:var(--fw-semibold)}
h3{font-size:var(--fs-lg);font-weight:var(--fw-semibold)}
h4{font-size:var(--fs-md);font-weight:var(--fw-semibold)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd{margin:0}
code,kbd{font-family:var(--font-mono);font-size:.85em}
code{background:var(--surface-2);padding:1px 6px;border-radius:var(--r1)}
kbd{background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--r1);padding:0 5px}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
hr{border:0;border-top:1px solid var(--border);margin:var(--s4) 0}
.icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--r1)}
::selection{background:var(--accent-soft);color:var(--text)}
.muted{color:var(--text-2)}
.faint{color:var(--text-3)}
.num{font-variant-numeric:tabular-nums}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hide{display:none!important}
.t-success{color:var(--success-text)}
.t-danger{color:var(--danger-text)}
.t-warning{color:var(--warning-text)}
.mono{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.02em}

/* Flags: the destination marks used in search, cards and chips */
.flag{display:inline-block;width:18px;height:13px;border-radius:2px;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);flex:none;vertical-align:-2px}
.flag-sm{width:16px;height:12px}
.flag-gb{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23012169' d='M0 0h640v480H0z'/%3E%3Cpath fill='%23FFF' d='m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z'/%3E%3Cpath fill='%23C8102E' d='m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z'/%3E%3Cpath fill='%23FFF' d='M241 0v480h160V0zM0 160v160h640V160z'/%3E%3Cpath fill='%23C8102E' d='M0 193v96h640v-96zM273 0v480h96V0z'/%3E%3C/svg%3E")}
.flag-us{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23bd3d44' d='M0 0h640v480H0'/%3E%3Cpath stroke='%23fff' stroke-width='37' d='M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640'/%3E%3Cpath fill='%23192f5d' d='M0 0h364.8v258.5H0'/%3E%3C/svg%3E")}
.flag-ca{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23fff' d='M150.1 0h339.7v480H150z'/%3E%3Cpath fill='%23d52b1e' d='M-19.7 0h169.8v480H-19.7zm509.5 0h169.8v480H489.9zM201 232l-13.3 4.4 61.4 54c4.7 13.7-1.6 17.8-5.6 25l66.6-8.4-1.6 67 13.9-.3-3.1-66.6 66.7 8c-4.1-8.7-7.8-13.3-4-27.2l61.3-51-10.7-4c-8.8-6.8 3.8-32.6 5.6-48.9 0 0-35.7 12.3-38 5.8l-9.2-17.5-32.6 35.8c-3.5.9-5-.5-5.9-3.5l15-74.8-23.8 13.4q-3.2 1.3-5.2-2.2l-23-46-23.6 47.8q-2.8 2.5-5 .7L264 130.8l13.7 74.1c-1.1 3-3.7 3.8-6.7 2.2l-31.2-35.3c-4 6.5-6.8 17.1-12.2 19.5s-23.5-4.5-35.6-7c4.2 14.8 17 39.6 9 47.7'/%3E%3C/svg%3E")}
.flag-au{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%2300008B' d='M0 0h640v480H0z'/%3E%3Cpath fill='%23fff' d='m37.5 0 122 90.5L281 0h39v31l-120 89.5 120 89V240h-40l-120-89.5L40.5 240H0v-30l119.5-89L0 32V0z'/%3E%3Cpath fill='red' d='M212 140.5 320 220v20l-135.5-99.5zm-92 10 3 17.5-96 72H0zM320 0v1.5l-124.5 94 1-22L295 0zM0 0l119.5 88h-30L0 21z'/%3E%3Cpath fill='%23fff' d='M120.5 0v240h80V0zM0 80v80h320V80z'/%3E%3Cpath fill='red' d='M0 96.5v48h320v-48zM136.5 0v240h48V0z'/%3E%3C/svg%3E")}
.flag-de{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23fc0' d='M0 320h640v160H0z'/%3E%3Cpath fill='%23000001' d='M0 0h640v160H0z'/%3E%3Cpath fill='red' d='M0 160h640v160H0z'/%3E%3C/svg%3E")}
.flag-it{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23fff' d='M0 0h640v480H0z'/%3E%3Cpath fill='%23009246' d='M0 0h213.3v480H0z'/%3E%3Cpath fill='%23CE2B37' d='M426.7 0H640v480H426.7z'/%3E%3C/svg%3E")}
.flag-dk{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23c8102e' d='M0 0h640v480H0z'/%3E%3Cpath fill='%23fff' d='M0 205.7h640v68.6H0z'/%3E%3Cpath fill='%23fff' d='M171.4 0H240v480h-68.6z'/%3E%3C/svg%3E")}
.flag-fr{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23fff' d='M0 0h640v480H0z'/%3E%3Cpath fill='%23002654' d='M0 0h213.3v480H0z'/%3E%3Cpath fill='%23ce1126' d='M426.7 0H640v480H426.7z'/%3E%3C/svg%3E")}
.flag-nl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23ae1c28' d='M0 0h640v160H0z'/%3E%3Cpath fill='%23fff' d='M0 160h640v160H0z'/%3E%3Cpath fill='%2321468b' d='M0 320h640v160H0z'/%3E%3C/svg%3E")}
.flag-hu{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23ce2939' d='M0 0h640v160H0z'/%3E%3Cpath fill='%23fff' d='M0 160h640v160H0z'/%3E%3Cpath fill='%23477050' d='M0 320h640v160H0z'/%3E%3C/svg%3E")}
.flag-fi{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23fff' d='M0 0h640v480H0z'/%3E%3Cpath fill='%23002f6c' d='M0 174.5h640v131H0z'/%3E%3Cpath fill='%23002f6c' d='M175 0h130v480H175z'/%3E%3C/svg%3E")}
.flag-mt{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23fff' d='M0 0h320v480H0z'/%3E%3Cpath fill='%23cf142b' d='M320 0h320v480H320z'/%3E%3Cpath fill='%23999' d='M60 40h40v30h30v40H100v30H60v-30H30V70h30z'/%3E%3C/svg%3E")}
.flag-my{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23cc0001' d='M0 0h640v480H0z'/%3E%3Cpath fill='%23fff' d='M0 34.3h640v34.3H0zM0 102.9h640v34.3H0zM0 171.4h640v34.3H0zM0 240h640v34.3H0zM0 308.6h640v34.3H0zM0 377.1h640v34.3H0zM0 445.7h640V480H0z'/%3E%3Cpath fill='%23010066' d='M0 0h320v274.3H0z'/%3E%3Ccircle cx='140' cy='137' r='78' fill='%23fc0'/%3E%3Ccircle cx='165' cy='137' r='70' fill='%23010066'/%3E%3Cpolygon fill='%23fc0' points='228,137 240,106 254,133 283,124 266,149 290,169 260,167 258,197 240,173 218,194 222,165 192,161 218,148'/%3E%3C/svg%3E")}
.flag-bd{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23006a4e' d='M0 0h640v480H0z'/%3E%3Ccircle cx='280' cy='240' r='120' fill='%23f42a41'/%3E%3C/svg%3E")}
.flag-nz{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%2300247d' d='M0 0h640v480H0z'/%3E%3Cpath fill='%23012169' d='M0 0h320v240H0z'/%3E%3Cpath fill='%23fff' d='m37.5 0 122 90.5L281 0h39v31l-120 89.5 120 89V240h-40l-120-89.5L40.5 240H0v-30l119.5-89L0 32V0z'/%3E%3Cpath fill='%23c8102e' d='M212 140.5 320 220v20l-135.5-99.5zm-92 10 3 17.5-96 72H0zM320 0v1.5l-124.5 94 1-22L295 0zM0 0l119.5 88h-30L0 21z'/%3E%3Cpath fill='%23fff' d='M120.5 0v240h80V0zM0 80v80h320V80z'/%3E%3Cpath fill='%23c8102e' d='M0 96.5v48h320v-48zM136.5 0v240h48V0z'/%3E%3C/svg%3E")}
.flag-eu{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23039' d='M0 0h640v480H0z'/%3E%3Ccircle cx='320' cy='240' r='95' fill='none' stroke='%23fc0' stroke-width='14' stroke-dasharray='12 38'/%3E%3C/svg%3E")}
.flag-pk{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%230c590b' d='M0 0h640v480H0z'/%3E%3Cpath fill='%23fff' d='M0 0h160v480H0z'/%3E%3Ccircle cx='400' cy='240' r='110' fill='%23fff'/%3E%3Ccircle cx='430' cy='220' r='100' fill='%230c590b'/%3E%3C/svg%3E")}
.flag-ie{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23fff' d='M0 0h640v480H0z'/%3E%3Cpath fill='%23009A49' d='M0 0h213.3v480H0z'/%3E%3Cpath fill='%23FF7900' d='M426.7 0H640v480H426.7z'/%3E%3C/svg%3E")}

/* ---------- 3. Shell ---------- */
.sh-body{background:var(--bg)}
.sh-top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:var(--s3);height:var(--top-h);
  padding:0 var(--s4);background:var(--brand);color:var(--brand-text);border-bottom:1px solid var(--brand-line)}
.sh-logo{display:flex;align-items:center;gap:2px;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-lg);letter-spacing:-.02em;margin-right:var(--s2)}
.sh-logo b{color:#fff;font-weight:800}
.sh-logo span{color:var(--accent)}
.sh-burger{display:none;width:36px;height:36px;place-items:center;border-radius:var(--r1);color:var(--brand-text)}
.sh-burger:hover{background:var(--brand-line)}
.sh-where{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-md);color:var(--brand-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--s3);border-left:1px solid var(--brand-line-2)}
.sh-where:empty{display:none}
.sh-top-right{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
.sh-search{display:flex;align-items:center;gap:var(--s2);height:36px;padding:0 var(--s3);min-width:min(360px,36vw);
  background:var(--brand-line);border:1px solid var(--brand-line-2);border-radius:var(--r2);color:var(--brand-text)}
.sh-search:focus-within{border-color:var(--brand-muted)}
.sh-search .icon{width:15px;height:15px;color:var(--brand-muted)}
.sh-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:inherit;font-size:var(--fs-sm)}
.sh-search input::placeholder{color:var(--brand-muted)}
.sh-search kbd{margin-left:auto;background:none;border-color:var(--brand-line-2);color:var(--brand-muted);font-size:10px}
.sh-cta{flex:none}
.sh-signin{font-weight:var(--fw-semibold);font-size:var(--fs-sm);padding:7px 12px;border-radius:var(--r2);border:1px solid var(--brand-line-2)}
.sh-signin:hover{background:var(--brand-line)}
.sh-bell{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r2);color:var(--brand-text)}
.sh-bell:hover{background:var(--brand-line)}
.sh-bell b{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-ink);font-size:10px;font-weight:var(--fw-bold);display:grid;place-items:center}
.sh-user{position:relative}
.sh-user-btn{display:flex;align-items:center;gap:var(--s2);height:36px;padding:0 var(--s2) 0 var(--s1);border-radius:var(--r2);border:1px solid transparent}
.sh-user-btn:hover{background:var(--brand-line)}
.sh-user-btn .icon{width:12px;height:12px;color:var(--brand-muted)}
.sh-user-name{font-weight:var(--fw-medium);font-size:var(--fs-sm);max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-user-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:240px;background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:var(--r2);box-shadow:var(--sh3);overflow:hidden;z-index:70}
.sh-user-head{display:grid;gap:2px;padding:var(--s3) var(--s4);border-bottom:1px solid var(--border);background:var(--surface-2)}
.sh-user-head b{font-family:var(--font-display);font-size:var(--fs-md)}
.sh-user-head span{font-size:var(--fs-xs);color:var(--text-2);overflow:hidden;text-overflow:ellipsis}
.sh-user-items{display:grid;padding:var(--s1)}
.sh-user-items > a,.sh-user-items > button{text-align:left;padding:var(--s2) var(--s3);border-radius:var(--r1);font-size:var(--fs-md)}
.sh-user-items > a:hover,.sh-user-items > button:hover{background:var(--surface-2)}
.sh-user-items > .danger{color:var(--danger-text)}
.sh-scrim{position:fixed;inset:var(--top-h) 0 0;z-index:49;background:rgba(16,24,40,.45)}

.sh-frame{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);align-items:start;max-width:var(--content-max);margin:0 auto;min-height:calc(100vh - var(--top-h))}
.sh-side{position:sticky;top:var(--top-h);align-self:start;height:calc(100vh - var(--top-h));overflow-y:auto;
  padding:var(--s4) var(--s3);border-right:1px solid var(--border);background:var(--surface)}
.sh-main{min-width:0;padding:var(--s6) var(--s7) var(--s8)}
.sh-main--narrow > *{max-width:880px}
.sh-nav{display:grid;gap:var(--s4)}
.sh-nav-group{display:grid;gap:2px}
.sh-nav-label{padding:0 var(--s3) var(--s1);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.sh-nav-i{display:flex;align-items:center;gap:var(--s3);padding:7px var(--s3);border-radius:var(--r1);
  font-weight:var(--fw-medium);font-size:var(--fs-md);color:var(--text-2);transition:background var(--t),color var(--t)}
.sh-nav-i .icon{width:17px;height:17px;color:var(--text-3)}
.sh-nav-i:hover{background:var(--surface-2);color:var(--text)}
.sh-nav-i.is-on{background:var(--brand);color:#fff;font-weight:var(--fw-semibold)}
.sh-nav-i.is-on .icon{color:var(--accent)}
.sh-badge{margin-left:auto;min-width:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--text-2);font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-align:center;line-height:20px}
.sh-nav-i.is-on .sh-badge{background:var(--accent);color:var(--accent-ink)}

/* ---------- 4. Layout ---------- */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s3) var(--s4);margin-bottom:var(--s6)}
.page-head__main{min-width:0;display:grid;gap:var(--s1)}
.page-head h1{font-size:var(--fs-3xl)}
.page-head__desc{color:var(--text-2);max-width:var(--measure)}
.page-head__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);font-size:var(--fs-sm);color:var(--text-2);margin-top:var(--s1)}
.page-head__meta b{color:var(--text);font-weight:var(--fw-semibold)}
.page-head__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);flex:none}
.page-head__meta--dots>*+*::before{content:"\00b7";margin-right:var(--s3);color:var(--text-3)}
@media (max-width:640px){.page-head__meta--dots{display:grid;justify-items:start;gap:var(--s1)}.page-head__meta--dots>*+*::before{content:none}}
.page-head--tabs{margin-bottom:0}
.back{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-2);margin-bottom:var(--s3)}
.back:hover{color:var(--text)}
.back .icon{width:15px;height:15px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1);font-size:var(--fs-sm);color:var(--text-2);margin-bottom:var(--s3)}
.crumbs a:hover{color:var(--text)}
.crumbs .icon{width:14px;height:14px;color:var(--text-3)}
.crumbs > :last-child{color:var(--text);font-weight:var(--fw-medium)}

.tabs{display:flex;gap:var(--s1);border-bottom:1px solid var(--border);margin-bottom:var(--s6);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a,.tabs button{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s3);font-size:var(--fs-md);font-weight:var(--fw-medium);
  color:var(--text-2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color var(--t)}
.tabs a:hover,.tabs button:hover{color:var(--text)}
.tabs .is-on{color:var(--text);font-weight:var(--fw-semibold);border-bottom-color:var(--brand)}
.tabs .n{font-size:var(--fs-xs);background:var(--surface-3);color:var(--text-2);border-radius:var(--r-pill);padding:1px 7px;font-weight:var(--fw-semibold)}
.tabs .is-on .n{background:var(--brand);color:#fff}

.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-bottom:var(--s4)}
.toolbar__spacer{flex:1}
.toolbar__count{font-size:var(--fs-sm);color:var(--text-2);font-variant-numeric:tabular-nums;margin-left:auto}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 var(--s3);border-radius:var(--r-pill);border:1px solid var(--border-strong);
  background:var(--surface);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-2);transition:border-color var(--t),background var(--t),color var(--t)}
.chip:hover{border-color:var(--text-3);color:var(--text)}
.chip.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.chip b{font-variant-numeric:tabular-nums;font-weight:var(--fw-semibold);opacity:.7}
.chip .icon{width:12px;height:12px}
.chip--remove:hover{border-color:var(--danger-line);background:var(--danger-soft);color:var(--danger-text)}
.chip--dashed{border-style:dashed}
.chip__k{font-size:10px;font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.chip.is-on .chip__k{color:rgba(255,255,255,.7)}
.segment{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--r2);overflow:hidden;background:var(--surface)}
.segment a,.segment button{padding:6px var(--s4);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-2)}
.segment .is-on{background:var(--brand);color:#fff}

.layout{display:grid;grid-template-columns:minmax(0,1fr) var(--rail-w);gap:var(--s6);align-items:start}
.layout__main{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5)}
.layout__rail{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);position:sticky;top:calc(var(--top-h) + var(--s4))}
.stack{display:grid;gap:var(--s5)}
.stack--tight{gap:var(--s3)}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s4)}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s4)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.row--end{justify-content:flex-end}
.row--between{justify-content:space-between}

.section{display:grid;gap:var(--s3)}
.section__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s2) var(--s3)}
.section__head h2{font-size:var(--fs-lg)}
.section__head p{color:var(--text-2);font-size:var(--fs-sm)}
.section__count{font-size:var(--fs-sm);color:var(--text-2);font-variant-numeric:tabular-nums}
.measure{max-width:var(--measure)}

/* ---------- 5. Components ---------- */
/* Buttons: one primary per view; secondary for the rest; ghost for inline;
   danger for destructive; accent is the gold, for the one call to action
   the student's screen exists for. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:38px;padding:0 var(--s4);border-radius:var(--r2);
  font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--fs-md);line-height:1;white-space:nowrap;border:1px solid transparent;
  cursor:pointer;transition:background var(--t),border-color var(--t),color var(--t),box-shadow var(--t);text-decoration:none}
.btn .icon{width:16px;height:16px}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{background:var(--brand-2)}
.btn--secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn--secondary:hover{border-color:var(--text-3);background:var(--surface-2)}
.btn--ghost{background:transparent;color:var(--text-2)}
.btn--ghost:hover{background:var(--surface-2);color:var(--text)}
.btn--danger{background:var(--surface);color:var(--danger-text);border-color:var(--danger-line)}
.btn--danger:hover{background:var(--danger-soft);border-color:var(--danger)}
.btn--danger-solid{background:var(--danger);color:#fff}
.btn--danger-solid:hover{background:var(--danger-text)}
.btn--accent{background:var(--accent);color:var(--accent-ink)}
.btn--accent:hover{background:var(--accent-hover)}
.btn--sm{height:32px;padding:0 var(--s3);font-size:var(--fs-sm)}
.btn--xs{height:26px;padding:0 var(--s2);font-size:var(--fs-xs);border-radius:var(--r1)}
.btn--icon{width:36px;padding:0}
.btn--icon.btn--sm{width:32px}
.btn--block{width:100%}
.btn--link{height:auto;padding:0;background:none;border:0;color:var(--accent-text);font-weight:var(--fw-medium);text-decoration:underline;text-underline-offset:2px}
.btn--link:hover{color:var(--text)}
.btn-group{display:inline-flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.btn.is-busy{pointer-events:none;opacity:.7}

/* Form fields */
.form{display:grid;gap:var(--s4)}
.form--inline{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s3)}
.form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s3)}
.form__actions{display:flex;flex-wrap:wrap;gap:var(--s2);padding-top:var(--s3);border-top:1px solid var(--border)}
.form__section{display:grid;gap:var(--s3)}
.form__section > h3{font-size:var(--fs-md);padding-top:var(--s2)}
.field{display:grid;gap:6px;min-width:0;align-content:start}
.field__label,.field > span:first-child{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-2)}
.field__label b{color:var(--danger)}
.field__help{font-size:var(--fs-xs);color:var(--text-3)}
.field__error{font-size:var(--fs-xs);color:var(--danger-text);font-weight:var(--fw-medium)}
.field.is-invalid .input,.field.is-invalid .select,.field.is-invalid .textarea{border-color:var(--danger)}
.input,.select,.textarea{width:100%;height:38px;padding:0 var(--s3);border:1px solid var(--border-strong);border-radius:var(--r2);background:var(--surface);
  color:var(--text);font-size:var(--fs-md);transition:border-color var(--t),box-shadow var(--t)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--text-3)}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--ring);box-shadow:0 0 0 3px rgba(47,111,237,.18)}
.input:disabled,.select:disabled,.textarea:disabled,.input[readonly]{background:var(--surface-2);color:var(--text-2)}
.input--sm,.select--sm{height:32px;font-size:var(--fs-sm)}
.textarea{height:auto;min-height:96px;padding:var(--s2) var(--s3);resize:vertical;line-height:var(--lh)}
.select{appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475467' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
input[type=file].input{padding:7px var(--s3);height:auto}
.check{display:flex;align-items:flex-start;gap:var(--s2);font-size:var(--fs-md);color:var(--text);cursor:pointer}
.check input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--brand);flex:none}
.check span{min-width:0}
.check small{display:block;color:var(--text-3);font-size:var(--fs-xs)}
.switch{position:relative;display:inline-flex;align-items:center;gap:var(--s2);cursor:pointer;font-size:var(--fs-md)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch i{width:34px;height:20px;border-radius:var(--r-pill);background:var(--border-strong);position:relative;transition:background var(--t);flex:none}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--t)}
.switch input:checked + i{background:var(--brand)}
.switch input:checked + i::after{transform:translateX(14px)}
.switch input:focus-visible + i{outline:2px solid var(--ring);outline-offset:2px}
.search{display:flex;align-items:center;gap:var(--s2);height:38px;padding:0 var(--s3);border:1px solid var(--border-strong);border-radius:var(--r2);background:var(--surface);min-width:220px}
.search:focus-within{border-color:var(--ring);box-shadow:0 0 0 3px rgba(47,111,237,.18)}
.search .icon{width:15px;height:15px;color:var(--text-3)}
.search input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:var(--fs-md)}
.search--sm{height:32px}
.input-group{display:flex;align-items:center;gap:var(--s2)}
.input-group .input{min-width:0}
.input-group > span{color:var(--text-3);font-size:var(--fs-sm);white-space:nowrap}
.input--w-xs{width:88px}

/* Badges: one component, five tones, optional dot. */
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 var(--s2);border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  line-height:1;white-space:nowrap;background:var(--surface-3);color:var(--text-2);border:1px solid transparent}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75;display:none}
.badge--dot::before{display:block}
.badge--brand{background:var(--brand);color:#fff}
.badge--accent{background:var(--accent-soft);color:var(--accent-text)}
.badge--success{background:var(--success-soft);color:var(--success-text)}
.badge--warning{background:var(--warning-soft);color:var(--warning-text)}
.badge--danger{background:var(--danger-soft);color:var(--danger-text)}
.badge--info{background:var(--info-soft);color:var(--info-text)}
.badge--outline{background:transparent;border-color:var(--border-strong)}
.badge--lg{height:28px;padding:0 var(--s3);font-size:var(--fs-sm)}
.label{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}

/* Cards and sections: a card is for a thing that needs an edge. Most
   content sits directly on the page. */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r3)}
.card__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3);padding:var(--s4) var(--s5);border-bottom:1px solid var(--border)}
.card__head h2,.card__head h3{font-size:var(--fs-lg)}
.card__head p{color:var(--text-2);font-size:var(--fs-sm);width:100%}
.card__body{padding:var(--s5)}
.card__body--flush{padding:0}
.card__foot{padding:var(--s3) var(--s5);border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.card--pad{padding:var(--s5)}
.card--brand{background:var(--brand);color:var(--brand-text);border-color:var(--brand)}
.card--brand h2,.card--brand h3,.card--brand b{color:#fff}
.card--brand .muted{color:var(--brand-muted)}
.card--brand .btn--secondary{background:transparent;color:#fff;border-color:var(--brand-line-2)}
.card--brand .btn--secondary:hover{background:var(--brand-line)}
.card > .card__body + .card__body{border-top:1px solid var(--border)}
.card__body > h2,.card__body > h3{margin-bottom:var(--s3)}

/* Facts: label/value pairs in a grid (programme costs, submission record) */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s4) var(--s5)}
.facts div{min-width:0}
.facts dt{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text-3);margin-bottom:2px}
.facts dd{font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.facts dd.is-missing{color:var(--text-3);font-weight:var(--fw-regular)}
.facts--boxed{gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden}
.facts--boxed div{background:var(--surface);padding:var(--s3) var(--s4)}
/* Key/value rows, stacked (rail panels) */
.kv{display:grid;gap:var(--s3)}
.kv div{display:grid;gap:2px}
.kv dt{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text-3)}
.kv dd{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--text)}
.kv dd .btn--link{font-size:var(--fs-xs)}

/* Lists: the row with a title, a subtitle and things on the right.
   Used by the inbox, applications, documents, team, threads. */
.list{display:grid}
.list__item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2) var(--s4);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--border)}
.list__item:last-child{border-bottom:0}
.list__item--link:hover{background:var(--surface-2)}
.card .list__item{padding-left:var(--s5);padding-right:var(--s5)}
.list__main{min-width:0;display:grid;gap:2px}
.list__title{font-weight:var(--fw-semibold);color:var(--text);font-size:var(--fs-md)}
.list__title a:hover{color:var(--accent-text)}
.list__sub{font-size:var(--fs-sm);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--fs-xs);color:var(--text-3)}
.list__side{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}
.list__age{font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.list--lead .list__item{grid-template-columns:auto minmax(0,1fr) auto}
.list__lead{width:20px;display:grid;place-items:center;color:var(--text-3)}

/* Tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--surface);border:1px solid var(--border);border-radius:var(--r3)}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:560px}
.table th{text-align:left;font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--border);background:var(--surface-2);white-space:nowrap}
.table td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text)}
.table tbody tr:last-child td{border-bottom:0}
.table tr[data-href]{cursor:pointer}
.table tr[data-href]:hover td{background:var(--surface-2)}
.table tr.is-off td{opacity:.55}
.table tr.is-next td{background:var(--accent-soft)}
.table .num{text-align:right}
.table .sel{width:36px;padding-right:0}
.table input[type=checkbox]{width:15px;height:15px;accent-color:var(--brand);display:block}
.table .row-actions{text-align:right;white-space:nowrap;width:1%}
.table .row-actions .btn + .btn{margin-left:var(--s1)}
.table .cell-title{font-weight:var(--fw-semibold);color:var(--text)}
.table .cell-sub{display:block;font-size:var(--fs-xs);color:var(--text-3);margin-top:1px}
.table .cell-missing{color:var(--text-3)}
.table--compact th,.table--compact td{padding:var(--s2) var(--s3)}
.table--plain{min-width:0}
.table--plain th{background:none}
.table .input,.table .select{height:32px;font-size:var(--fs-sm)}
.table .check{font-size:var(--fs-sm)}
.table-wrap .empty{border:0}

/* Menus (a <details> popover) */
.menu{position:relative;display:inline-block}
.menu summary{list-style:none;cursor:pointer;display:inline-flex}
.menu summary::-webkit-details-marker{display:none}
.menu__body{position:absolute;right:0;top:calc(100% + 4px);z-index:40;min-width:220px;max-width:min(360px,90vw);padding:var(--s2);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);box-shadow:var(--sh3);display:grid;gap:2px;text-align:left}
.menu__body--wide{width:min(380px,90vw);padding:var(--s4);gap:var(--s4)}
.menu__item{display:flex;align-items:center;gap:var(--s2);width:100%;text-align:left;padding:var(--s2) var(--s3);border-radius:var(--r1);font-size:var(--fs-md);color:var(--text)}
.menu__item:hover{background:var(--surface-2)}
.menu__item--danger{color:var(--danger-text)}
.menu__sep{border-top:1px solid var(--border);margin:var(--s1) 0}
.menu__body form + form{padding-top:var(--s3);border-top:1px solid var(--border)}

/* Drawer: every write action's form */
.drawer{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;margin:0}
.drawer::backdrop{background:rgba(16,24,40,.5)}
.drawer__panel{position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);background:var(--surface);color:var(--text);box-shadow:var(--sh3);
  display:flex;flex-direction:column;animation:drawerIn var(--t-med) var(--ease)}
@keyframes drawerIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.drawer__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);padding:var(--s5) var(--s6) var(--s4);border-bottom:1px solid var(--border)}
.drawer__head h2{font-size:var(--fs-xl)}
.drawer__head p{margin-top:2px;font-size:var(--fs-sm);color:var(--text-2)}
.drawer__close{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r1);color:var(--text-2);flex:none}
.drawer__close:hover{background:var(--surface-2);color:var(--text)}
.drawer__close .icon{width:16px;height:16px}
.drawer__body{padding:var(--s5) var(--s6);overflow-y:auto;flex:1;display:grid;gap:var(--s4);align-content:start}
.drawer__foot{display:flex;gap:var(--s2);padding:var(--s4) var(--s6);border-top:1px solid var(--border);background:var(--surface)}
.drawer__loading{padding:var(--s6);color:var(--text-2)}
.drawer form{display:contents}

/* Alerts, notices, toasts */
.alert{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);border-radius:var(--r2);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:var(--fs-md);line-height:var(--lh)}
.alert .icon{width:18px;height:18px;flex:none;margin-top:1px}
.alert__body{min-width:0;flex:1}
.alert b{display:block;font-family:var(--font-display);font-weight:var(--fw-semibold)}
.alert p{font-size:var(--fs-sm)}
.alert--success{background:var(--success-soft);border-color:var(--success-line);color:var(--success-text)}
.alert--warning{background:var(--warning-soft);border-color:var(--warning-line);color:var(--warning-text)}
.alert--danger{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger-text)}
.alert--info{background:var(--info-soft);border-color:var(--info-line);color:var(--info-text)}
.alert--brand{background:var(--brand);border-color:var(--brand);color:#fff}
.alert--brand .icon{color:var(--accent)}
.alert__actions{display:flex;gap:var(--s2);flex:none}
.toast{position:fixed;left:50%;bottom:var(--s6);transform:translate(-50%,12px);opacity:0;pointer-events:none;z-index:200;
  display:flex;align-items:center;gap:var(--s3);max-width:min(560px,92vw);padding:var(--s3) var(--s4);border-radius:var(--r2);
  background:var(--text);color:#fff;font-size:var(--fs-md);font-weight:var(--fw-medium);box-shadow:var(--sh3);transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.toast.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast.is-bad{background:var(--danger)}
.toast__undo{color:var(--accent);font-weight:var(--fw-semibold);text-decoration:underline}

/* Empty, loading, error states */
.empty{display:grid;gap:var(--s2);justify-items:start;padding:var(--s7) var(--s6);background:var(--surface);border:1px dashed var(--border-strong);border-radius:var(--r3)}
.empty--center{justify-items:center;text-align:center}
.empty h3{font-size:var(--fs-lg)}
.empty p{color:var(--text-2);max-width:var(--measure)}
.empty .btn{margin-top:var(--s2)}
.empty--quiet{padding:var(--s4) 0;border:0;background:none;color:var(--text-3);font-size:var(--fs-sm)}
.skeleton{display:block;height:1em;border-radius:var(--r1);background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:shimmer 1.2s infinite}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.spinner{width:18px;height:18px;border:2px solid var(--border-strong);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
/* On a solid button the brand-on-brand spinner is invisible, so inside a
   button it is drawn in the button's own text colour and sits on the text
   baseline beside the label. */
.btn .spinner{width:1em;height:1em;border-color:currentColor;border-top-color:transparent;
  opacity:.9;vertical-align:-0.125em;margin-right:.5em}
.btn:disabled .spinner{opacity:.75}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s3)}
.stat{display:grid;gap:2px;padding:var(--s4) var(--s5);background:var(--surface);border:1px solid var(--border);border-radius:var(--r3)}
.stat b{font-family:var(--font-display);font-size:var(--fs-3xl);line-height:1;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.stat span{font-size:var(--fs-sm);color:var(--text-2);font-weight:var(--fw-medium)}
.stat small{font-size:var(--fs-xs);color:var(--text-3)}
.stat.is-hot b{color:var(--danger-text)}
.stat.is-quiet b{color:var(--text-3)}
.counter{display:flex;align-items:baseline;gap:var(--s2)}
.counter b{font-family:var(--font-display);font-size:var(--fs-xl);font-variant-numeric:tabular-nums;min-width:1.4em}
.counter span{font-weight:var(--fw-semibold);font-size:var(--fs-md)}

/* Progress, steppers */
.progress{height:6px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.progress i{display:block;height:100%;border-radius:var(--r-pill);background:var(--brand);width:var(--pct,0%)}
.progress--success i{background:var(--success)}
.progress--danger i{background:var(--danger)}
.progress--accent i{background:var(--accent)}
.stepper{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s1)}
.stepper li{position:relative;padding-top:var(--s3);font-size:var(--fs-xs);color:var(--text-3);display:grid;gap:var(--s1)}
.stepper li i{position:absolute;top:0;left:0;right:0;height:4px;border-radius:var(--r-pill);background:var(--surface-3)}
.stepper li.is-done{color:var(--text-2)}
.stepper li.is-done i{background:var(--success)}
.stepper li.is-now{color:var(--text);font-weight:var(--fw-semibold)}
.stepper li.is-now i{background:var(--accent)}
.stepper--numbered{grid-auto-flow:row;gap:var(--s3)}
.stepper--numbered li{padding:0 0 0 var(--s7);min-height:28px}
.stepper--numbered li i{top:0;left:0;right:auto;width:26px;height:26px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;font-style:normal;font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-2)}
.stepper--numbered li.is-done i{background:var(--success);color:#fff}
.stepper--numbered li.is-now i{background:var(--brand);color:#fff}
.stepper--numbered b{display:block;color:var(--text);font-weight:var(--fw-semibold);font-size:var(--fs-md)}
.stepper--numbered p{font-size:var(--fs-sm);color:var(--text-2)}
/* What you will need, and when: a stage strip, then one dense list */
.needs{display:grid;gap:var(--s4)}
.needs__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s4)}
.needs__sub{font-size:var(--fs-sm);color:var(--text-2);margin-top:2px}
.needs__all{font-size:var(--fs-sm);color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.needs__all b{color:var(--text);font-weight:var(--fw-semibold)}
.needs__strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);list-style:none;margin:0;padding:0}
.needs__strip li{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:var(--r2);background:var(--surface-2);min-width:0}
.needs__strip li.is-done{background:var(--success-soft);border-color:var(--success-line)}
.needs__strip li.is-part{border-color:var(--accent)}
.needs__strip i{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--brand);color:var(--accent);font-style:normal;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-xs)}
.needs__strip li.is-done i{background:var(--success);color:#fff}
.needs__strip i .icon{width:13px;height:13px}
.needs__strip span{display:grid;min-width:0}
.needs__strip b{font-size:var(--fs-xs);font-weight:var(--fw-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.needs__strip small{font-size:var(--fs-xs);color:var(--text-3)}
.needs__list{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:var(--r2);overflow:hidden}
.needs__row{display:grid;grid-template-columns:28px minmax(0,1fr) 56px auto;gap:var(--s3);align-items:center;padding:var(--s2) var(--s3);border-bottom:1px solid var(--border);background:var(--surface)}
.needs__row:last-child{border-bottom:0}
.needs__row.is-have{background:var(--success-soft)}
.needs__row.is-bad{background:var(--warning-soft)}
.needs__ico{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r1);background:var(--surface-2);color:var(--brand)}
.needs__row.is-have .needs__ico{background:#fff;color:var(--success-text)}
.needs__ico .icon{width:15px;height:15px}
.needs__name{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s2);min-width:0}
.needs__name b{font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.needs__name span{font-size:var(--fs-xs);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.needs__when{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.needs__state{justify-self:end}
@media (max-width:720px){.needs__strip{grid-template-columns:repeat(2,minmax(0,1fr))}.needs__row{grid-template-columns:28px minmax(0,1fr) auto}.needs__when{display:none}.needs__name span{white-space:normal}}
.ring{--pct:0;width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--pct)*1%),var(--surface-3) 0)}
.ring span{width:40px;height:40px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-family:var(--font-display);font-size:var(--fs-xs);font-weight:var(--fw-bold)}

/* Timeline */
.timeline{display:grid}
.timeline li{display:grid;grid-template-columns:12px 1fr;gap:var(--s3);padding:var(--s2) 0 var(--s3);position:relative}
.timeline li::before{content:"";position:absolute;left:5px;top:18px;bottom:-4px;width:2px;background:var(--border)}
.timeline li:last-child::before{display:none}
.timeline__dot{width:12px;height:12px;border-radius:50%;background:var(--surface);border:3px solid var(--brand);margin-top:5px;flex:none;position:relative;z-index:1}
.timeline__dot--internal{border-color:var(--text-3)}
.timeline__dot--success{border-color:var(--success)}
.timeline p{font-size:var(--fs-md)}
.timeline small{display:block;color:var(--text-3);font-size:var(--fs-xs);margin-top:2px}

/* Avatars, people */
.avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--brand);color:var(--accent);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-sm);flex:none}
.avatar--sm{width:28px;height:28px;font-size:var(--fs-xs)}
.avatar--lg{width:48px;height:48px;font-size:var(--fs-lg)}
.person{display:flex;align-items:center;gap:var(--s3);min-width:0}
.person b{display:block;font-weight:var(--fw-semibold)}
.person > div > b + span{display:block;font-size:var(--fs-sm);color:var(--text-2)}
.person .avatar{display:grid;flex:none}

/* Messages */
.thread{display:grid;gap:var(--s3)}
.bubble{display:grid;gap:var(--s1);padding:var(--s3) var(--s4);border-radius:var(--r3);max-width:min(76ch,100%);background:var(--surface-2)}
.bubble--mine{background:var(--brand);color:var(--brand-text);justify-self:end}
.bubble--mine small{color:var(--brand-muted)}
.bubble--other{background:var(--surface);border:1px solid var(--border)}
.bubble small{font-size:var(--fs-xs);color:var(--text-3)}
.bubble p{white-space:pre-wrap;font-size:var(--fs-md)}
.compose{display:grid;gap:var(--s3)}
.compose__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3)}
.compose__row .field{display:flex;align-items:center;gap:var(--s2)}
.compose__hint{font-size:var(--fs-sm);color:var(--text-3)}

/* Pager */
.pager{display:flex;justify-content:center;gap:var(--s2);margin-top:var(--s5)}

/* Option cards: a choice presented as a tappable card (intake, chips in editors) */
.options{display:flex;flex-wrap:wrap;gap:var(--s2)}
.options--stack{flex-direction:column}
.option{position:relative;display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r2);border:1px solid var(--border-strong);background:var(--surface);
  text-align:left;font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--text);cursor:pointer;transition:border-color var(--t),background var(--t)}
.options--stack .option{width:100%}
.option:hover{border-color:var(--text-3)}
.option.is-on{border-color:var(--brand);background:var(--surface-2)}
.option small{display:block;font-size:var(--fs-xs);color:var(--text-2);font-weight:var(--fw-regular)}
.option__tick{margin-left:auto;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-size:11px;opacity:0;transform:scale(.6);transition:opacity var(--t),transform var(--t)}
.option.is-on .option__tick{opacity:1;transform:scale(1)}
.option input{position:absolute;opacity:0;inset:0;cursor:pointer}

/* Requirement / document rows */
.req{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:var(--s3);align-items:start;padding:var(--s3) 0;border-bottom:1px solid var(--border)}
.req:last-child{border-bottom:0}
.req__mark{display:grid;place-items:center;width:18px;height:18px;margin-top:2px;border:1.5px solid var(--border-strong);border-radius:var(--r1);color:#fff}
.req__mark .icon{width:11px;height:11px}
.req--accepted .req__mark,.req--waived .req__mark{background:var(--success);border-color:var(--success)}
.req--received .req__mark{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.req--rejected .req__mark{border-color:var(--danger)}
.req__body{min-width:0;display:grid;gap:2px}
.req__body b{font-weight:var(--fw-semibold);font-size:var(--fs-md)}
.req__gate{font-size:var(--fs-xs);color:var(--text-3)}
.req__file{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--fs-sm)}
.req__file:empty{display:none}
.req__file a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;overflow:hidden;text-overflow:ellipsis;max-width:36ch;white-space:nowrap}
.req__side{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}
.upload{cursor:pointer}
.upload.is-busy{opacity:.6;pointer-events:none}
.fine{font-size:var(--fs-xs);color:var(--text-3);line-height:var(--lh)}
.fine--rule{padding-left:var(--s3);border-left:2px solid var(--border-strong)}

/* ---------- 6. Screens ---------- */
/* Inbox (Today) */
.inbox{display:grid;gap:var(--s4)}
.inbox__group{background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);overflow:hidden}
.inbox__group--empty{opacity:.65}
.inbox__head{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);border-bottom:1px solid var(--border)}
.inbox__head .counter b{font-size:var(--fs-lg)}
.inbox__group .list__item{padding-left:var(--s5);padding-right:var(--s5)}
.inbox__empty{padding:var(--s3) var(--s5);color:var(--text-3);font-size:var(--fs-sm)}

/* Pipeline board */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:var(--s3);overflow-x:auto;padding-bottom:var(--s3);align-items:start}
.board__col{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r3);padding:var(--s3)}
.board__col h3{font-size:var(--fs-sm);display:flex;justify-content:space-between;margin-bottom:var(--s3);padding:0 var(--s1)}
.board__col h3 span{color:var(--text-3);font-variant-numeric:tabular-nums}
.board__cards{display:grid;gap:var(--s2)}
.board__card{display:grid;gap:2px;padding:var(--s3);background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);transition:border-color var(--t)}
.board__card:hover{border-color:var(--text-3)}
.board__card b{font-size:var(--fs-sm);line-height:var(--lh-tight)}
.board__card span{font-size:var(--fs-xs);color:var(--text-2)}
.board__empty{color:var(--text-3);text-align:center;padding:var(--s3) 0;font-size:var(--fs-sm)}

/* Review desk */
.desk{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--s4);align-items:start}
.desk__queue{position:sticky;top:calc(var(--top-h) + var(--s4));max-height:calc(100vh - var(--top-h) - var(--s7));overflow-y:auto}
.desk__queue .list__item{padding-left:var(--s4);padding-right:var(--s4)}
.desk__queue .list__item.is-on{background:var(--brand);color:#fff}
.desk__queue .list__item.is-on .list__title,.desk__queue .list__item.is-on .list__title a{color:#fff}
.desk__queue .list__item.is-on .list__sub{color:var(--brand-muted)}
.desk__viewer{display:grid}
.desk__frame{width:100%;height:min(70vh,760px);border:0;background:var(--surface-2);display:block}
.desk__img{max-height:70vh;margin:0 auto}
.desk__meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);padding:var(--s3) var(--s5);border-top:1px solid var(--border);font-size:var(--fs-sm);color:var(--text-2)}
.desk__meta b{color:var(--text)}
.desk__kbd{font-size:var(--fs-xs);color:var(--text-3);display:flex;gap:var(--s2);align-items:center}

/* Workspace header (application) */
.ws-head{display:grid;gap:var(--s3);padding-bottom:var(--s4);margin-bottom:var(--s4);border-bottom:1px solid var(--border)}
.ws-head__top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--s2) var(--s4)}
.ws-head h1{font-size:var(--fs-2xl)}
.ws-head__badges{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.ws-head__meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);font-size:var(--fs-sm);color:var(--text-2)}
.ws-head__meta b{color:var(--text);font-weight:var(--fw-medium)}
.ws-head__meta a:hover{color:var(--accent-text)}

/* Catalogue search */
.srch{display:grid;grid-template-columns:264px minmax(0,1fr);gap:var(--s6);align-items:start}
.srch__main{min-width:0;display:grid;gap:var(--s4)}
.facets{position:sticky;top:calc(var(--top-h) + var(--s4));max-height:calc(100vh - var(--top-h) - var(--s7));overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r3)}
.facets__head{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);border-bottom:1px solid var(--border)}
.facets__head h2{font-size:var(--fs-md);flex:1}
.facets__close{display:none;width:30px;height:30px;place-items:center;border-radius:var(--r1);color:var(--text-2)}
.facet{padding:var(--s3) var(--s4);border-bottom:1px solid var(--border);display:grid;gap:var(--s2)}
.facet:last-of-type{border-bottom:0}
.facet h3{font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);font-weight:var(--fw-semibold)}
.facet ul{display:grid;gap:1px}
.facet__opt{display:flex;align-items:center;gap:var(--s2);padding:5px var(--s2);margin:0 calc(-1 * var(--s2));border-radius:var(--r1);font-size:var(--fs-sm);color:var(--text-2)}
.facet__opt:hover{background:var(--surface-2)}
.facet__opt.is-on{color:var(--text);font-weight:var(--fw-medium)}
.facet__box{display:grid;place-items:center;width:16px;height:16px;flex:none;border:1.5px solid var(--border-strong);border-radius:4px;background:var(--surface);color:#fff}
.facet__box--round{border-radius:50%}
.facet__opt.is-on .facet__box{background:var(--brand);border-color:var(--brand)}
.facet__box .icon{width:11px;height:11px}
.facet__l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.facet__n{font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.facet__n.is-zero{color:var(--danger-text);opacity:.7}
.facet__results{display:grid;gap:1px;max-height:210px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r1)}
.facet__results li a{display:flex;justify-content:space-between;gap:var(--s2);padding:7px var(--s2);font-size:var(--fs-sm)}
.facet__results li a:hover{background:var(--surface-2)}
.facets__apply{display:flex;flex-wrap:wrap;gap:var(--s2);padding:var(--s3) var(--s4);border-top:1px solid var(--border);position:sticky;bottom:0;background:var(--surface)}
.srch__bar{display:flex;flex-wrap:wrap;gap:var(--s2)}
.srch__bar .search{flex:1;min-width:220px}
.srch__filter-btn{display:none}
.srch__count{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);font-size:var(--fs-sm);color:var(--text-2)}
.srch__count b{color:var(--text);font-size:var(--fs-lg);font-variant-numeric:tabular-nums}
.srch__sort{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
.srch__sort label{font-size:var(--fs-xs);color:var(--text-3)}
.srch__scrim{position:fixed;inset:0;z-index:69;background:rgba(16,24,40,.45)}
.results{display:grid;gap:var(--s3)}
.result{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:center;padding:var(--s4) var(--s5);background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);transition:border-color var(--t),box-shadow var(--t)}
.result:hover{border-color:var(--border-strong);box-shadow:var(--sh2)}
.result__main{min-width:0;display:grid;gap:var(--s2)}
.result__where{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--fs-sm)}
.result__uni{font-weight:var(--fw-semibold);color:var(--text)}
.result__sep{color:var(--text-3)}
.result__place{color:var(--text-2)}
.result__last{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin-top:var(--s1)}
.result__deadline{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-sm);color:var(--text-2)}
.result__deadline .icon{width:13px;height:13px;color:var(--text-3)}
.result__deadline b{font-weight:var(--fw-semibold);color:var(--text)}
.result__deadline.is-soon,.result__deadline.is-soon .icon,.result__deadline.is-soon b{color:var(--warning-text)}
.result__name{font-size:var(--fs-lg);line-height:var(--lh-tight)}
.result__name a:hover{color:var(--accent-text)}
.result__facts{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);font-size:var(--fs-sm);color:var(--text-2)}
.result__facts li{display:flex;align-items:center;gap:5px}
.result__facts .icon{width:13px;height:13px;color:var(--text-3)}
.result__facts b{font-weight:var(--fw-semibold);color:var(--text)}
.result__side{display:grid;gap:var(--s2);justify-items:end;text-align:right}
.result__price b{display:block;font-family:var(--font-display);font-size:var(--fs-lg);font-variant-numeric:tabular-nums}
.result__price span{font-size:var(--fs-xs);color:var(--text-3)}
.result__price--none b{color:var(--text-2);font-weight:var(--fw-medium);font-size:var(--fs-md)}
.save.is-on{background:var(--brand);color:#fff;border-color:var(--brand)}
.save.is-on .icon{color:var(--accent)}

/* Programme detail */
.prog__where{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--fs-sm);color:var(--text-2)}
.prog__tags{display:flex;flex-wrap:wrap;gap:var(--s2)}
.prog__notes{padding-left:var(--s3);border-left:2px solid var(--accent);display:grid;gap:var(--s1);font-size:var(--fs-sm)}
.prog__intakes{display:flex;flex-wrap:wrap;gap:var(--s2)}
.prog__rating{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:var(--fw-bold)}
.prog__steps{display:grid;gap:var(--s2);padding-left:1.2em;list-style:decimal;font-size:var(--fs-sm);color:var(--brand-muted)}
.prog__steps b{color:#fff;font-weight:var(--fw-semibold)}

/* Profile completion panel */
.sections li{display:flex;justify-content:space-between;gap:var(--s2);padding:7px 0;border-bottom:1px solid var(--border);font-size:var(--fs-sm)}
.sections li:last-child{border-bottom:0}
.sections li.is-done{color:var(--text-2)}
.sections li.is-done .num{color:var(--success-text)}

/* Impersonation frame */
.imp-banner{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5);padding:var(--s3) var(--s4);border-radius:var(--r2);background:var(--warning-soft);border:1px solid var(--warning-line);color:var(--warning-text);font-size:var(--fs-sm)}
.imp-banner form{margin-left:auto}

/* ---------- 7. Responsive ---------- */
@media (max-width:1100px){
  .sh-main{padding:var(--s5) var(--s5) var(--s8)}
  .layout{grid-template-columns:minmax(0,1fr)}
  .layout__rail{position:static}
  .srch{grid-template-columns:minmax(0,1fr)}
  .srch__filter-btn{display:inline-flex}
  .facets{position:fixed;z-index:70;inset:0 auto 0 0;width:min(320px,88vw);border-radius:0;max-height:none;transform:translateX(-100%);transition:transform var(--t-med) var(--ease)}
  .facets.is-open{transform:none}
  .facets__close{display:grid}
  .desk{grid-template-columns:minmax(0,1fr)}
  .desk__queue{position:static;max-height:260px}
}
@media (max-width:900px){
  :root{--top-h:52px}
  .sh-burger{display:grid}
  .sh-where{display:none}
  .sh-frame{grid-template-columns:minmax(0,1fr)}
  /* The drawer starts at the very top and pads itself past the topbar, so
     its first item is visible whatever the browser reports for a sticky
     header's height. */
  .sh-side{position:fixed;z-index:50;left:0;top:0;bottom:0;width:min(280px,86vw);height:auto;padding-top:calc(var(--top-h) + var(--s4));transform:translateX(-100%);transition:transform var(--t-med) var(--ease);box-shadow:var(--sh3)}
  .sh-side.is-open{transform:none}
  .sh-user-name{display:none}
  .sh-search{min-width:0;width:36px;padding:0 10px;justify-content:center}
  .sh-search input,.sh-search kbd{display:none}
  .sh-main{padding:var(--s4) var(--s4) var(--s8)}
  .page-head h1{font-size:var(--fs-2xl)}
  .page-head__actions{width:100%}
  .page-head__actions .btn{flex:1}
  .result{grid-template-columns:minmax(0,1fr)}
  .result__side{justify-items:start;text-align:left}
  .stepper{grid-auto-flow:row;gap:var(--s2)}
  .stepper li{padding:0 0 0 var(--s4)}
  .stepper li i{top:0;bottom:0;right:auto;width:4px;height:auto}
  .drawer__panel{width:100vw}
  .drawer__head,.drawer__body,.drawer__foot{padding-left:var(--s4);padding-right:var(--s4)}
  .list__item{grid-template-columns:minmax(0,1fr)}
  .list__side{justify-content:flex-start}
  .req{grid-template-columns:20px minmax(0,1fr)}
  .req__side{grid-column:2;justify-content:flex-start}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board{grid-auto-columns:minmax(220px,80vw)}
}
@media (max-width:560px){
  .sh-cta{display:none}
  .table{min-width:0}
  .facts{grid-template-columns:1fr}
  .toolbar .search{width:100%}
  .form__actions .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .sh-side,.facets,.drawer__panel,.toast,.option__tick{transition:none;animation:none}
  .skeleton{animation:none}
}
@media print{
  .sh-top,.sh-side,.page-head__actions,.btn,.toast{display:none!important}
  .sh-frame{display:block}
  .sh-main{padding:0}
}

/* Bulk action bar (list pages) */
.bulk{position:sticky;bottom:var(--s4);z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s4);padding:var(--s3) var(--s4);
  background:var(--brand);color:#fff;border-radius:var(--r2);box-shadow:var(--sh3);font-size:var(--fs-sm)}
.bulk b{font-variant-numeric:tabular-nums;margin-right:var(--s1)}
.bulk button{padding:6px var(--s3);border-radius:var(--r1);background:var(--brand-line);color:#fff;font-weight:var(--fw-medium)}
.bulk button:hover{background:var(--accent);color:var(--accent-ink)}

/* ---------- Utilities: the only spacing a template may apply itself ---------- */
.mt-1{margin-top:var(--s1)}.mt-2{margin-top:var(--s2)}.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}.mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)}
.mb-1{margin-bottom:var(--s1)}.mb-2{margin-bottom:var(--s2)}.mb-3{margin-bottom:var(--s3)}.mb-4{margin-bottom:var(--s4)}.mb-5{margin-bottom:var(--s5)}.mb-6{margin-bottom:var(--s6)}
.w-form{max-width:760px}
.w-read{max-width:880px}
.card__body--tight{padding-top:0;padding-bottom:0}
.table-wrap--flush{border:0;border-radius:0}
.span-all{grid-column:1/-1}
.end{justify-items:end;text-align:right}
.card__title{margin-bottom:var(--s3)}
.wrap-text{white-space:normal}
.small{font-size:var(--fs-sm)}
.ml-auto{margin-left:auto}
.ml-1{margin-left:var(--s1)}
.mr-2{margin-right:var(--s2)}
.badge .icon{width:12px;height:12px}
.textarea--short{min-height:72px}
.is-closed{opacity:.75}
.strike{text-decoration:line-through}
.h-section{margin:var(--s6) 0 var(--s3);color:var(--text-2);font-size:var(--fs-lg)}
.list__item--tight{padding-top:var(--s2);padding-bottom:var(--s2)}
.nowrap{white-space:nowrap}
/* Modifiers that replaced the last one-off inline styles */
.card__body--split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:center}
.card__foot--stack{display:grid}
.stack--xs{gap:var(--s2)}
.stack--end{justify-items:end;text-align:right}
.chip--on-brand{background:var(--brand-line);border-color:var(--brand-line-2);color:#fff}
.chip--sm{height:26px}
.counter--hero b{font-size:var(--fs-3xl)}
.counter--accent b{color:var(--accent)}
.measure-title{max-width:34ch}
.w-xs{width:200px}.w-sm{max-width:240px}.w-md{max-width:460px}
.sh-role{justify-self:start;margin-top:var(--s1)}
.grow{flex:1;min-width:0}
.desk__frame--placeholder{display:grid;place-items:center}
.list__title--plain{font-weight:var(--fw-regular)}
.list__sub--strong{color:var(--text)}
.block{display:block}
.pb-0{padding-bottom:0}
.menu__form{padding:var(--s2) var(--s3)}
.table__caption{text-align:left;padding-bottom:var(--s2)}
.table--kv th{background:none;text-transform:none;letter-spacing:0;font-size:var(--fs-sm);color:var(--text-2)}
.check--center{align-items:center}
.text{color:var(--text)}
.text-strong{color:var(--text);font-weight:var(--fw-medium)}
.progress--w{width:110px;margin-top:var(--s1)}
.progress--spaced{margin:var(--s3) 0 var(--s2)}
.h-card{font-size:var(--fs-lg)}
@media (max-width:900px){.card__body--split{grid-template-columns:minmax(0,1fr)}.stack--end{justify-items:start;text-align:left}}

/* ---------- Programme profile ---------- */
.prof__where{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--fs-sm);color:var(--text-2)}
.prof__head h1{font-size:var(--fs-3xl);margin:var(--s1) 0 var(--s2)}
.prof__cost{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,46%);gap:var(--s5);align-items:start}
.prof__cost-main{display:grid;gap:var(--s2);align-content:start}
.prof__big{font-family:var(--font-display);font-size:2.25rem;line-height:1;font-weight:var(--fw-bold);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.prof__after{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--fs-md);font-weight:var(--fw-medium)}
.prof__amount{font-family:var(--font-display);font-size:var(--fs-lg);color:var(--success-text);white-space:nowrap}
.prof__rail dd{font-weight:var(--fw-semibold)}
.prof__toc{display:grid;gap:var(--s1)}
.prof__toc a{font-size:var(--fs-sm);color:var(--text-2);padding:4px 0}
.prof__toc a:hover{color:var(--text)}
.prof__steps{display:grid;gap:var(--s2);padding-left:1.2em;list-style:decimal;font-size:var(--fs-sm);color:var(--brand-muted)}
.prof__steps b{color:#fff;font-weight:var(--fw-semibold)}
.prof__next h2{margin-bottom:var(--s3)}
.prof .section__count{font-weight:var(--fw-semibold);color:var(--text)}
@media (max-width:900px){.prof__cost{grid-template-columns:minmax(0,1fr)}.prof__toc{display:none}}

/* ---------- Onboarding ---------- */
.ob-body{background:var(--bg)}
.ob{display:grid;grid-template-columns:380px minmax(0,1fr);min-height:100vh}
.ob-panel{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;align-content:start;gap:var(--s5);padding:var(--s5) var(--s6) var(--s6);
  background:linear-gradient(170deg,var(--brand) 0%,var(--brand-2) 60%,#1E2A48 100%);color:var(--brand-text)}
.ob-panel__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.ob-panel__intro{display:grid;gap:var(--s2)}
.ob-panel__intro h1{font-size:var(--fs-2xl);color:#fff}
.ob-panel__intro p{color:var(--brand-muted);font-size:var(--fs-sm)}
.ob-eyebrow{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.ob-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ob-panel__label{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--brand-muted)}
.ob-steps{display:grid;gap:2px}
.ob-steps li button{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;padding:7px var(--s2);border-radius:var(--r2);color:var(--brand-muted);font-size:var(--fs-md);transition:background var(--t),color var(--t)}
.ob-steps li button:disabled{cursor:default;opacity:.55}
.ob-steps li button:not(:disabled):hover{background:var(--brand-line);color:#fff}
.ob-steps li i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:var(--fs-xs);font-weight:var(--fw-semibold);background:var(--brand-line);color:var(--brand-text);flex:none;transition:background var(--t-med)}
.ob-steps li.is-done button{color:var(--brand-text)}
.ob-steps li.is-done i{background:var(--success);color:#fff}
.ob-steps li.is-skipped i{background:transparent;border:1px dashed var(--brand-line-2)}
.ob-steps li.is-now button{background:rgba(255,255,255,.08);color:#fff;font-weight:var(--fw-semibold)}
.ob-steps li.is-now i{background:var(--accent);color:var(--accent-ink)}
.ob-steps li small{margin-left:auto;font-size:var(--fs-xs);color:var(--brand-muted)}
.ob-count{display:grid;gap:2px;padding:var(--s4);background:rgba(255,255,255,.06);border:1px solid var(--brand-line-2);border-radius:var(--r3)}
.ob-count b{font-family:var(--font-display);font-size:2.4rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--accent);letter-spacing:-.02em}
.ob-count span{font-size:var(--fs-sm);color:var(--brand-text)}
.ob-count small{font-size:var(--fs-xs);min-height:1.2em}
.ob-count .t-success{color:#86EFAC}.ob-count .t-warning{color:#FCD34D}
.ob-answers{display:grid;gap:var(--s2)}
.ob-signin{margin-top:auto;text-align:left;font-size:var(--fs-sm);color:var(--brand-muted);padding:var(--s2) 0}
.ob-signin b{color:#fff;font-weight:var(--fw-semibold);text-decoration:underline;text-underline-offset:3px}
.ob-signin:hover b{color:var(--accent)}
.ob-save{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-xs);color:var(--brand-muted);min-height:20px}
.ob-save--saved{color:#86EFAC}.ob-save--error{color:#FCA5A5}
.ob-save .icon{width:14px;height:14px}.ob-save .btn--link{color:#fff}
.ob-save .spinner{width:14px;height:14px;border-color:var(--brand-line-2);border-top-color:#fff}
.ob-main{min-width:0;display:grid;gap:var(--s5);align-content:start;padding:var(--s8) clamp(var(--s5),5vw,72px) var(--s8)}
.ob-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s7);align-items:start;max-width:1160px}
.ob-col{min-width:0;display:grid;gap:var(--s5)}
.ob-side{display:grid;gap:var(--s4);position:sticky;top:var(--s8)}
.ob-mobile{display:none;align-items:center;gap:var(--s3)}
.sh-logo--dark b{color:var(--brand)}
.ob-mobile__progress{flex:1;display:grid;gap:var(--s1)}
.ob-mobile__progress span{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text-2)}
.ob-step{display:grid;gap:var(--s3);align-content:start;min-height:360px}
.ob-step.is-enter{animation:obIn .32s var(--ease)}
@keyframes obIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ob-step > .label{color:var(--accent-text)}
.ob-q{font-size:2rem;letter-spacing:-.02em;max-width:22ch}
.ob-hint{color:var(--text-2);max-width:var(--measure);font-size:var(--fs-lg)}
.ob-body{margin-top:var(--s4)}
.ob-skeleton{display:grid;gap:var(--s3)}
.ob-options{gap:var(--s3)}
.ob .option{min-height:56px;padding:var(--s3) var(--s4);font-size:var(--fs-lg);background:var(--surface);transition:border-color var(--t),background var(--t),transform var(--t)}
.ob .option:hover{transform:translateY(-1px)}
.ob .option.is-on{border-color:var(--brand);background:var(--surface);box-shadow:inset 0 0 0 1px var(--brand)}
.ob .option.is-pressed{transform:scale(.98)}
.ob .option .flag{width:24px;height:18px}
.option__key{width:22px;height:22px;display:grid;place-items:center;border-radius:var(--r1);border:1px solid var(--border-strong);background:var(--surface-2);font-size:11px;color:var(--text-3);flex:none}
.ob .option.is-on .option__key{border-color:var(--brand);color:var(--brand)}
.ob-keyhint{display:none}
@media (hover:hover) and (min-width:901px){.ob-keyhint{display:block}}
.ob .field__label{font-size:var(--fs-md)}
.ob .select,.ob .input{height:48px;font-size:var(--fs-lg)}
.ob-actions{display:flex;align-items:center;gap:var(--s2);position:sticky;bottom:0;padding:var(--s3) 0;background:linear-gradient(to top,var(--bg) 70%,transparent)}
.ob-actions__spacer{flex:1}
.btn--lg{height:48px;padding:0 var(--s6);font-size:var(--fs-lg)}
.ob-kbd{margin-left:var(--s2);font-size:11px;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.25);color:#fff}
.ob-result{display:grid;gap:var(--s3)}
/* The results and the form that keeps them share one screen: the count is
   the headline, so what follows it is a step down, with a rule to separate
   the reading from the doing. */
.ob-keep{font-family:var(--font-display);font-size:1.35rem;font-weight:var(--fw-semibold);
  letter-spacing:-.01em;margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--border)}
.ob-result__n{font-family:var(--font-display);font-size:4.5rem;line-height:1;font-weight:var(--fw-bold);letter-spacing:-.04em;color:var(--brand);font-variant-numeric:tabular-nums}
.ob-breakdown{display:grid;gap:var(--s2);margin:var(--s3) 0}
.ob-breakdown li{display:grid;grid-template-columns:24px 150px minmax(0,1fr) auto;gap:var(--s3);align-items:center;font-size:var(--fs-md)}
.ob-breakdown__bar{height:10px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.ob-breakdown__bar i{display:block;height:100%;width:var(--pct,0%);background:var(--accent);border-radius:var(--r-pill);animation:obBar .8s var(--ease)}
@keyframes obBar{from{width:0}}
@media (max-width:1200px){
  .ob-cols{grid-template-columns:minmax(0,1fr)}
  .ob-side{position:static}
}
@media (max-width:900px){
  .ob{grid-template-columns:minmax(0,1fr)}
  .ob-panel{display:none}
  .ob-mobile{display:flex;position:sticky;top:0;z-index:20;background:var(--bg);padding:var(--s3) 0}
  .ob-main{padding:0 var(--s4) 110px;gap:var(--s4)}
  .ob-step{min-height:0}
  .ob-q{font-size:var(--fs-2xl)}
  .ob-hint{font-size:var(--fs-md)}
  .ob .option{min-height:52px;font-size:var(--fs-md)}
  .option__key{display:none}
  .ob-actions{position:fixed;left:0;right:0;bottom:0;padding:var(--s3) var(--s4);background:var(--surface);border-top:1px solid var(--border);z-index:20}
  .ob-actions .btn--primary{flex:1}
  .ob-kbd{display:none}
  .ob-breakdown li{grid-template-columns:24px minmax(0,1fr) auto}
  .ob-breakdown__bar{display:none}
  .ob-result__n{font-size:3.2rem}
}
@media (prefers-reduced-motion:reduce){.ob-step.is-enter{animation:none}.ob-breakdown__bar i{animation:none}}
/* Onboarding panel: a scene, a ring and a word of encouragement instead of a list of tabs */
.ob-scene{margin:calc(-1 * var(--s3)) 0}
.ob-scene__svg{width:100%;max-height:150px;height:auto;display:block}
.ob-scene__path{stroke-dashoffset:0;animation:obDash 6s linear infinite}
@keyframes obDash{to{stroke-dashoffset:-110}}
.ob-scene__dots circle:last-child{animation:obPulse 2.4s ease-in-out infinite}
@keyframes obPulse{0%,100%{r:7;opacity:1}50%{r:9;opacity:.7}}
.ob-progress{display:flex;align-items:center;gap:var(--s4)}
.ring--lg{width:64px;height:64px;background:conic-gradient(var(--accent) calc(var(--pct)*1%),rgba(255,255,255,.12) 0);transition:background .4s}
.ring--lg span{width:50px;height:50px;background:var(--brand-2);color:#fff;font-size:var(--fs-sm)}
.ob-progress__text{display:grid;gap:2px}
.ob-progress__text b{color:#fff;font-family:var(--font-display);font-size:var(--fs-lg)}
.ob-progress__text span{color:var(--brand-muted);font-size:var(--fs-sm)}
.ob-cheer{font-family:var(--font-display);font-size:var(--fs-lg);line-height:1.35;color:#fff;padding-left:var(--s3);border-left:3px solid var(--accent)}
.ob-cheer.is-in{animation:obIn .4s var(--ease)}
@media (prefers-reduced-motion:reduce){.ob-scene__path,.ob-scene__dots circle:last-child,.ob-cheer.is-in{animation:none}}
/* The study plan card */
.ob-plan{background:linear-gradient(160deg,var(--brand) 0%,var(--brand-2) 100%);color:var(--brand-text);border-radius:var(--r3);padding:var(--s4) var(--s5);box-shadow:var(--sh3);position:relative;overflow:hidden}
.ob-plan::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(245,158,11,.28),transparent 70%)}
.ob-plan__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s3)}
.ob-plan__eyebrow{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.ob-plan__badge{font-size:var(--fs-xs);font-weight:var(--fw-semibold);padding:2px 8px;border-radius:var(--r-pill);background:var(--brand-line);color:#fff}
.ob-plan__badge.is-complete{background:var(--success);color:#fff}
.ob-plan__rows{display:grid}
.ob-plan__rows li button{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s3);align-items:center;width:100%;text-align:left;padding:7px 0;border-bottom:1px dashed var(--brand-line-2);font-size:var(--fs-sm);transition:background var(--t)}
.ob-plan__rows li:last-child button{border-bottom:0}
.ob-plan__rows li button:not(:disabled):hover .ob-plan__value{color:var(--accent)}
.ob-plan__rows li button:disabled{cursor:default}
.ob-plan__label{color:var(--brand-muted);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.04em;text-transform:uppercase}
.ob-plan__value{display:flex;align-items:center;gap:6px;color:#fff;font-weight:var(--fw-medium);min-width:0}
.ob-plan__value > span:not(.flag){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-plan__value .flag{width:18px;height:13px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.ob-plan__dots{display:block;height:8px;width:72%;border-radius:var(--r-pill);background:repeating-linear-gradient(90deg,var(--brand-line-2) 0 6px,transparent 6px 10px)}
.ob-plan__muted{color:var(--brand-muted);font-weight:var(--fw-regular);font-size:var(--fs-xs)}
.ob-plan__rows li.is-now .ob-plan__label{color:var(--accent)}
.ob-plan__rows li.is-now .ob-plan__dots{background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 10px);animation:obDots 1.2s linear infinite}
@keyframes obDots{to{background-position:10px 0}}
.ob-plan__rows li.is-done .ob-plan__value{animation:obIn .35s var(--ease)}
.ob-plan__foot{display:flex;justify-content:space-between;gap:var(--s2);margin-top:var(--s3);font-size:var(--fs-xs);color:var(--brand-muted)}
.ob-plan__id{font-family:var(--font-mono);letter-spacing:.04em}
.ob-why{display:grid;gap:var(--s2);padding:var(--s4) var(--s5);background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);box-shadow:var(--sh1);border-left:3px solid var(--accent)}
.ob-why__eyebrow{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.ob-why__eyebrow .icon{width:14px;height:14px}
.ob-why__title{font-family:var(--font-display);font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--text)}
.ob-why__body{font-size:var(--fs-sm);line-height:1.5;color:var(--text-2);margin:0}
.ob-why__body+.ob-why__body{margin-top:var(--s1)}
.ob-unlocks{display:grid;gap:var(--s2);padding:0 var(--s2)}
.ob-unlocks li{display:flex;align-items:flex-start;gap:var(--s2);font-size:var(--fs-sm);color:var(--text-3);transition:color var(--t-med)}
.ob-unlocks li i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-strong);display:grid;place-items:center;font-style:normal;font-size:11px;flex:none;margin-top:1px;transition:background var(--t-med),border-color var(--t-med)}
.ob-unlocks li.is-on{color:var(--text)}
.ob-unlocks li.is-on i{background:var(--success);border-color:var(--success);color:#fff}

/* The student's counsellor, with every way to reach them */
.ccard{display:grid;gap:var(--s4);padding:var(--s5);border-top:3px solid var(--accent)}
.ccard__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.ccard__who{display:flex;align-items:center;gap:var(--s3);min-width:0}
.ccard__who .avatar{flex:none}
.ccard__who b{display:block;font-size:var(--fs-lg);font-weight:var(--fw-semibold);line-height:1.2}
.ccard__who div span{display:block;font-size:var(--fs-sm);color:var(--text-2)}
.ccard__who .avatar{display:grid}
.ccard__state{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r2);background:var(--surface-2);font-size:var(--fs-sm);color:var(--text-2)}
.ccard__state.is-on{background:var(--success-soft);color:var(--success-text)}
.ccard__state .dot{margin-top:4px}
.ccard__state b{display:block;color:var(--text);font-weight:var(--fw-semibold)}
.ccard__state.is-on b{color:var(--success-text)}
.ccard__state span{display:block}
.dot{width:10px;height:10px;border-radius:50%;background:var(--text-3);flex:none;box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.dot--on{background:var(--success);box-shadow:0 0 0 3px rgba(22,163,74,.2)}
.ccard__phone{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) var(--s4);border:1px solid var(--border);border-radius:var(--r2)}
.ccard__phone .icon{width:18px;height:18px;color:var(--accent-text);flex:none;margin-top:3px}
.ccard__phone div{display:grid;gap:2px;min-width:0}
.ccard__number{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;color:var(--text)}
.ccard__number:hover{color:var(--accent-text)}
.ccard__phone span{font-size:var(--fs-xs);color:var(--text-3)}
.ccard__phone span a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.ccard__phone--none{background:var(--surface-2);border-style:dashed}
.ccard__phone--none b{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text)}
.hours-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s2)}
.hours-grid label{display:grid;gap:2px;font-size:var(--fs-xs);color:var(--text-3)}

/* Documents: the vault */
.vault{list-style:none;margin:0;padding:0}
.vault__row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--s3) var(--s4);align-items:start;padding:var(--s4) var(--s5);border-bottom:1px solid var(--border)}
.vault__row:last-child{border-bottom:0}
.vault__row.is-have{background:var(--success-soft)}
.vault__icon{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r2);background:var(--accent-soft);color:var(--brand)}
.vault__row.is-have .vault__icon{background:#fff;color:var(--success-text)}
.vault__icon .icon{width:20px;height:20px}
.vault__main{min-width:0;display:grid;gap:var(--s1)}
.vault__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3)}
.vault__title b{font-size:var(--fs-md);font-weight:var(--fw-semibold)}
.vault__step{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.vault__help{font-size:var(--fs-sm);color:var(--text-2)}
.vault__file{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--fs-sm)}
.vault__file .icon{width:14px;height:14px;color:var(--text-3)}
.vault__file a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.vault__note{display:block;width:100%;font-size:var(--fs-xs);color:var(--warning-text)}
.vault__apps{font-size:var(--fs-xs);color:var(--text-3)}
.vault__apps a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.vault__side{display:grid;gap:var(--s2);justify-items:end}
@media (max-width:640px){.vault__row{grid-template-columns:40px minmax(0,1fr)}.vault__side{grid-column:1/-1;justify-items:start;grid-auto-flow:column;align-items:center;justify-content:space-between}}

/* Applications: one card per application */
.appcard{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--s5);padding:var(--s5)}
.appcard__main{min-width:0;display:grid;gap:var(--s2);align-content:start}
.appcard__top{display:flex;flex-wrap:wrap;gap:var(--s2)}
.appcard__title{font-size:var(--fs-lg);line-height:var(--lh-tight)}
.appcard__title a:hover{color:var(--accent-text)}
.appcard__where{font-size:var(--fs-sm);color:var(--text-2)}
.appcard__rail{margin-top:var(--s2)}
.appcard__line{font-size:var(--fs-sm);color:var(--text-2)}
.appcard__side{display:grid;gap:var(--s3);align-content:start;padding-left:var(--s5);border-left:1px solid var(--border)}
.appcard__fact{display:grid;gap:1px}
.appcard__fact span{font-size:var(--fs-xs);color:var(--text-3)}
.appcard__fact b{font-size:var(--fs-md);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.appcard__fact em{font-style:normal;font-size:var(--fs-xs);color:var(--warning-text);margin-left:var(--s1)}
.appcard__code{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-3)}
@media (max-width:800px){.appcard{grid-template-columns:minmax(0,1fr)}.appcard__side{padding-left:0;border-left:0;padding-top:var(--s4);border-top:1px solid var(--border)}}

/* Documents: add-another-file box */
.upbox{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);padding:var(--s4);border:1.5px dashed var(--border-strong);border-radius:var(--r2);background:var(--surface-2)}
.upbox__icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--accent-text);flex:none}
.upbox__icon .icon{width:18px;height:18px}
.upbox__text{display:grid;gap:1px;flex:1 1 200px;min-width:0}
.upbox__text b{font-weight:var(--fw-semibold)}
.upbox__text span{font-size:var(--fs-xs);color:var(--text-3)}
.upbox__controls{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.upbox__controls .select{width:auto;min-width:150px}

/* Home: do next */
.todo{list-style:none;margin:0;padding:0}
.todo__item{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:var(--s3) var(--s4);align-items:center;padding:var(--s3) var(--s5);border-bottom:1px solid var(--border)}
.todo__item:last-child{border-bottom:0}
.todo__icon{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r2);background:var(--surface-2);color:var(--text-2)}
.todo__item--accent .todo__icon{background:var(--accent-soft);color:var(--accent-text)}
.todo__item--warning .todo__icon{background:var(--warning-soft);color:var(--warning-text)}
.todo__icon .icon{width:18px;height:18px}
.todo__main{display:grid;gap:1px;min-width:0}
.todo__main b{font-weight:var(--fw-semibold)}
.todo__main span{font-size:var(--fs-sm);color:var(--text-2)}
.text-warning{color:var(--warning-text)}
@media (max-width:640px){.todo__item{grid-template-columns:36px minmax(0,1fr)}.todo__item .btn{grid-column:2}}

/* Offer: the one card that needs an answer */
.card--brand-line{border-top:3px solid var(--accent)}
.options--stack .option > span:first-of-type{display:grid;gap:2px}
.options--stack .option b{font-weight:var(--fw-semibold)}

/* Review desk: file on the left, the review guide on the right */
.desk__body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0;align-items:start}
.desk__file{min-width:0}
.desk__guide{display:grid;gap:var(--s4);padding:var(--s4) var(--s5);border-left:1px solid var(--border);align-self:stretch}
.desk__block{display:grid;gap:var(--s1)}
.desk__block b{font-weight:var(--fw-semibold)}
.desk__block p{font-size:var(--fs-sm);color:var(--text-2)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.checks .check{font-size:var(--fs-sm)}
.list--tight .list__item{padding-left:0;padding-right:0}
@media (max-width:1000px){.desk__body{grid-template-columns:minmax(0,1fr)}.desk__guide{border-left:0;border-top:1px solid var(--border)}}

/* Grouped tables: a stage header row */
.table__group td{background:var(--surface-2);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);padding:var(--s2) var(--s4)}
.chip.is-dim{opacity:.55}

/* Filter bar above a list */
.filterbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s2) var(--s3);padding:var(--s3) var(--s4);margin-bottom:var(--s3);background:var(--surface);border:1px solid var(--border);border-radius:var(--r2)}
.filterbar__field{display:grid;gap:2px}
.filterbar__field>span{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text-3)}
.filterbar__field .select{width:auto;min-width:150px;max-width:260px}
.filterbar__flags{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.chip--toggle{cursor:pointer}
.chip--toggle input{position:absolute;opacity:0;width:0;height:0}
.chip--toggle{position:relative}
.filterbar__search{margin-left:auto;min-width:220px}
.filterbar__active{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-bottom:var(--s4);min-height:32px}
.filterbar__active .toolbar__count{margin-left:auto}
@media (max-width:720px){.filterbar__search{margin-left:0;width:100%}}
.table__group-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3)}
.table__group-name{text-transform:none;letter-spacing:0;font-size:var(--fs-sm);color:var(--text)}
.table__group-meta{font-weight:var(--fw-regular);text-transform:none;letter-spacing:0;color:var(--text-3)}
.table__group-meta a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}

/* Today: the tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3);margin-bottom:var(--s5)}
.tile{display:grid;gap:2px;padding:var(--s4) var(--s4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);transition:border-color var(--t),box-shadow var(--t)}
.tile:hover{border-color:var(--border-strong);box-shadow:var(--sh1)}
.tile b{font-family:var(--font-display);font-size:var(--fs-2xl);line-height:1.1;font-variant-numeric:tabular-nums}
.tile span{font-size:var(--fs-sm);color:var(--text-2)}
.tile small{font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.tile--warn{border-color:var(--warning-line);background:var(--warning-soft)}
.tile--warn small{color:var(--warning-text)}
.tile--bad{border-color:var(--danger-line);background:var(--danger-soft)}
.tile--bad small,.tile--bad b{color:var(--danger-text)}
.tile--accent{border-color:var(--accent);}
.tile--accent b{color:var(--accent-text)}
.inbox__head{justify-content:space-between}

/* Roles: a list on the left, one role's permissions on the right */
.roles-page{grid-template-columns:300px minmax(0,1fr)}
.roles-page .layout__rail{position:sticky;top:calc(var(--top-h) + var(--s4))}
.roles-page .list__item.is-on{background:var(--brand)}
.roles-page .list__item.is-on .list__title,.roles-page .list__item.is-on .list__sub,.roles-page .list__item.is-on .list__meta{color:#fff}
.roles-page .list__item.is-on .badge--accent{background:var(--accent);color:var(--brand)}
.perm-group h3{font-size:var(--fs-sm);font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s2)}
.perms{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:var(--r2);overflow:hidden}
.perm+.perm{border-top:1px solid var(--border)}
.perm.is-on{background:var(--success-soft)}
.perm__row{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--s3);align-items:start;padding:var(--s3) var(--s4);cursor:pointer}
.perm__row input{margin-top:3px;width:16px;height:16px}
.perm__text{display:grid;gap:1px}
.perm__text b{font-weight:var(--fw-semibold)}
.perm__text small{font-size:var(--fs-xs);color:var(--text-3)}
.input--static{display:flex;align-items:center;background:var(--surface-2)}
@media (max-width:1100px){.roles-page{grid-template-columns:minmax(0,1fr)}.roles-page .layout__rail{position:static}}

/* Payments: one card per charge */
.pay{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s5);padding:var(--s5)}
.pay__main{min-width:0;display:grid;gap:var(--s2);align-content:start}
.pay__top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.pay__title{font-size:var(--fs-lg);line-height:var(--lh-tight)}
.pay__why{font-size:var(--fs-sm);color:var(--text-2)}
.pay__for{font-size:var(--fs-sm);color:var(--text-2)}
.pay__for a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.pay__gate{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);color:var(--warning-text)}
.pay__gate .icon{width:14px;height:14px}
.pay__side{display:grid;gap:var(--s3);align-content:start;padding-left:var(--s5);border-left:1px solid var(--border)}
.pay__amount{display:grid;gap:1px}
.pay__amount b{font-family:var(--font-display);font-size:var(--fs-2xl);font-variant-numeric:tabular-nums}
.pay__amount small{font-size:var(--fs-xs);color:var(--text-3)}
.pay__how summary{list-style:none;cursor:pointer;width:100%;justify-content:center}
.pay__how summary::-webkit-details-marker{display:none}
.pay__how[open] summary{display:none}
.pay__form{display:grid;gap:var(--s3)}
.pay__bank{display:grid;gap:var(--s2);padding:var(--s3) var(--s4);background:var(--surface-2);border-radius:var(--r2)}
.appcard__fact--warn span{color:var(--warning-text)}
.receipt__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.receipt__head h1{font-family:var(--font-mono);font-size:var(--fs-xl)}
@media print{.sh-top,.sh-side,.back,.receipt__actions{display:none!important}.sh-main{padding:0}.receipt{border:0;box-shadow:none}}
@media (max-width:800px){.pay{grid-template-columns:minmax(0,1fr)}.pay__side{padding-left:0;border-left:0;padding-top:var(--s4);border-top:1px solid var(--border)}}

/* Payments list rows */
.payrow{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;gap:var(--s4);align-items:center;padding:var(--s4) var(--s5);transition:border-color var(--t),box-shadow var(--t)}
.payrow:hover{border-color:var(--border-strong);box-shadow:var(--sh1)}
.payrow--late{border-color:var(--danger-line)}
.payrow__icon{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r2);background:var(--accent-soft);color:var(--accent-text)}
.payrow__icon--wait{background:var(--info-soft);color:var(--info-text)}
.payrow__icon .icon{width:18px;height:18px}
.payrow__main{display:grid;gap:2px;min-width:0}
.payrow__main b{font-weight:var(--fw-semibold)}
.payrow__main span{font-size:var(--fs-sm);color:var(--text-2)}
.payrow__main em{font-style:normal;color:var(--danger-text)}
.payrow__amount{display:grid;text-align:right}
.payrow__amount b{font-family:var(--font-display);font-size:var(--fs-lg);font-variant-numeric:tabular-nums}
.payrow__amount small{font-size:var(--fs-xs);color:var(--text-3)}
@media (max-width:640px){.payrow{grid-template-columns:40px minmax(0,1fr)}.payrow__amount{text-align:left;grid-column:2}.payrow>.btn,.payrow>.badge{grid-column:2;justify-self:start}}

/* The pay page */
.payhero{display:grid;text-align:right;gap:1px}
.payhero span{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.payhero b{font-family:var(--font-display);font-size:var(--fs-3xl);line-height:1;font-variant-numeric:tabular-nums}
.payhero small{font-size:var(--fs-xs);color:var(--text-3)}
.trail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);list-style:none;margin:0 0 var(--s5);padding:0}
.trail li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--s1) var(--s2);align-items:center;padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:var(--r2);background:var(--surface-2);font-size:var(--fs-xs);color:var(--text-3)}
.trail li b{font-weight:var(--fw-semibold);color:var(--text-2);font-size:var(--fs-sm)}
.trail li span{grid-column:2}
.trail i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface-3);font-style:normal;font-weight:var(--fw-bold);font-size:var(--fs-xs);color:var(--text-2)}
.trail i .icon{width:13px;height:13px}
.trail li.is-done{background:var(--success-soft);border-color:var(--success-line)}
.trail li.is-done i{background:var(--success);color:#fff}
.trail li.is-done b{color:var(--success-text)}
.trail li.is-now{background:var(--surface);border-color:var(--accent)}
.trail li.is-now i{background:var(--accent);color:var(--brand)}
.trail li.is-now b{color:var(--text)}
.copy{display:grid;gap:0;margin:0;border:1px solid var(--border);border-radius:var(--r2);overflow:hidden}
.copy div{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:var(--s2) var(--s4);border-bottom:1px solid var(--border)}
.copy div:last-child{border-bottom:0}
.copy dt{font-size:var(--fs-xs);color:var(--text-3)}
.copy dd{margin:0;font-weight:var(--fw-medium);overflow-wrap:anywhere}
.copy .is-key{background:var(--accent-soft)}
.copy .is-key dd{font-weight:var(--fw-semibold)}
@media (max-width:720px){.trail{grid-template-columns:repeat(2,minmax(0,1fr))}.copy div{grid-template-columns:minmax(0,1fr) auto}.copy dt{grid-column:1/-1}}

/* ---- Partner Program additions: horizontal bars, numbered steps ---- */
.bars{display:grid;gap:var(--s2)}
.bars__row{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr) 3rem;align-items:center;gap:var(--s3);font-size:var(--fs-sm)}
.bars__label{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bars__bar{display:block;height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.bars__bar i{display:block;height:100%;background:var(--brand);border-radius:999px;min-width:2px}
.bars__n{text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}
.steps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:var(--s3)}
.steps li{position:relative;padding-left:2.2rem;line-height:var(--lh)}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:1.6rem;height:1.6rem;border-radius:999px;background:var(--surface-2);color:var(--text);font-size:var(--fs-xs);font-weight:var(--fw-semibold);display:grid;place-items:center}
.steps--small li{font-size:var(--fs-sm)}
.sh-body--partner .sh-cta{display:inline-flex}
.list--plain{list-style:disc;padding-left:1.2rem;display:grid;gap:2px}
.code{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r2);padding:var(--s3) var(--s4);overflow-x:auto;font-size:var(--fs-sm);line-height:1.5}

/* --- closing an account --------------------------------------------------
 *
 * The one destructive thing a student can do to their own file, so it
 * sits apart from the rest of the page and behind a dialog that counts
 * what is about to go.
 */
.danger-zone{border-color:var(--danger-line);background:var(--danger-soft)}
.danger-zone .card__title{color:var(--danger-text)}

.modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  padding:16px;background:rgba(16,24,40,.55);overflow:auto}
.modal__panel{width:100%;max-width:560px;background:var(--surface);
  border-radius:var(--r3);padding:28px;box-shadow:0 30px 80px -20px rgba(16,24,40,.45);
  /* The list of what is about to go can be long. The panel scrolls so
     the password field and the buttons stay reachable. */
  max-height:calc(100svh - 32px);overflow:auto}
.modal__panel h2{margin:0 0 4px;font-size:22px}
.modal__panel label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.modal__panel input[type=password]{width:100%;padding:10px 12px;
  border:1px solid var(--border-strong);border-radius:var(--r2);font:inherit}

.section-label{margin:0 0 8px;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3)}

.delete-list{list-style:none;margin:0;padding:0;border:1px solid var(--border);
  border-radius:var(--r2);overflow:hidden}
.delete-list li{display:block;padding:12px 14px;border-top:1px solid var(--border)}
.delete-list li:first-child{border-top:0}
.delete-list b{display:block;font-size:14px}
.delete-list span{display:block}

.note-block{border:1px solid var(--warning-line);background:var(--warning-soft);
  border-radius:var(--r2);padding:14px}
.note-block p{margin:0 0 10px}
.note-block p:last-child{margin-bottom:0}

.error-note{margin:12px 0 0;padding:10px 12px;border-radius:var(--r2);
  border:1px solid var(--danger-line);background:var(--danger-soft);
  color:var(--danger-text);font-size:14px}
.hint{display:block;margin-top:6px;font-size:12px;color:var(--text-3)}

/* The same supplied SVG as the marketing site; --dark is the ink version
   for the one place the bar behind it is light (the discover header). */
.sh-logo img{display:block;height:25px;width:auto}