/* =====================================================================
   XIM ADMISSIONS PORTAL — DESIGN SYSTEM v1.0
   Reuse these tokens and component classes on every portal page.
   ===================================================================== */
:root{
  /* Brand (institutional navy) */
  --brand-700:#132A47;
  --brand-600:#1B3A61;
  --brand-500:#234A7C;   /* primary: buttons, active nav, key numerals */
  --brand-400:#4F6E97;
  --brand-300:#A9BCD4;
  --brand-100:#DDE5F0;
  --brand-50:#F0F4F9;

  /* Neutrals */
  --ink-900:#1B1F27;     /* headings */
  --ink-700:#3B424E;     /* body */
  --ink-500:#5D6470;     /* secondary text */
  --ink-400:#888F9B;     /* eyebrows, captions */
  --ink-300:#C6CAD2;
  --line:#E3E5E9;
  --line-strong:#D2D6DC;
  --canvas:#F6F7F8;      /* page background */
  --surface:#FFFFFF;     /* cards */
  --surface-2:#F4F5F7;   /* rows inside cards */
  --night:#1C2B3F;       /* dark bands */

  /* Status (muted — used only where colour conveys genuine status) */
  --success:#2E7D4F; --success-bg:#E9F3ED; --success-line:#C5DFCF; --success-ink:#205C3A;
  --danger:#B4423A;  --danger-bg:#F8ECEA;  --danger-line:#E9C8C4;  --danger-ink:#8C322B;
  --warning:#A9761B; --warning-bg:#FAF4E4; --warning-line:#E7D6AE; --warning-chip:#F2E3C1; --warning-ink:#6E4E10;

  /* Type */
  --font:"Plus Jakarta Sans","Inter","Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --fs-eyebrow:11px;
  --fs-sm:13px;
  --fs-body:14.5px;
  --fs-lead:16px;
  --fs-h3:16px;
  --fs-h2:20px;
  --fs-h1:30px;
  --fs-stat:24px;

  /* Spacing — 8px scale */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:40px; --s-8:48px; --s-9:64px;

  /* Radius — restrained */
  --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:12px; --r-pill:999px;

  /* Elevation — near flat */
  --shadow-1:0 1px 2px rgba(16,24,40,.05);
  --shadow-2:0 2px 8px rgba(16,24,40,.07);
  --shadow-brand:0 1px 2px rgba(16,24,40,.08);

  --container:1280px;
  --gap:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--ink-700);
  font-family:var(--font);font-size:var(--fs-body);line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,p{margin:0}
h1,h2,h3{color:var(--ink-900);line-height:1.25;letter-spacing:0}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}
[hidden]{display:none!important}
.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(--brand-400);outline-offset:2px;border-radius:4px}

/* Icons (Material Symbols Outlined) */
.ms{
  font-family:"Material Symbols Outlined";font-weight:normal;font-style:normal;
  font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;direction:ltr;
  width:1em;height:1em;overflow:hidden;flex-shrink:0;
  font-feature-settings:"liga";-webkit-font-feature-settings:"liga";
  font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;
  -webkit-font-smoothing:antialiased;
}
.ms--fill{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}

/* ---------- Layout ---------- */
.page{width:min(100% - 48px, var(--container));margin-inline:auto;padding-block:var(--s-5) var(--s-7);display:grid;gap:var(--gap)}
.row[class*="row--"],
.row.contact-row,
.row.hero-row,
.row.stats,
.row.accred{
  display:grid;
  gap:var(--gap);
}

/* ---------- Core components ---------- */
.card{background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--line)}
.pad{padding:var(--s-6)}

.eyebrow{display:block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400)}

/* Icons are plain and functional — no decorative rounded-square chips */
.icon-chip{width:44px;height:44px;display:grid;place-items:center;background:transparent;color:var(--ink-400);flex-shrink:0}
.icon-chip .ms{font-size:22px}
.icon-chip--sm{width:36px;height:36px}
.icon-chip--sm .ms{font-size:19px}
.icon-chip--round{border-radius:0}

.pill{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 9px;border-radius:var(--r-sm);font-size:12px;font-weight:600;line-height:1.3;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-700);white-space:nowrap}
.pill .ms{font-size:15px}
.pill--brand{background:var(--brand-50);border-color:var(--brand-100);color:var(--brand-700)}
.pill--success{background:var(--success-bg);border-color:var(--success-line);color:var(--success-ink)}
.pill--danger{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger-ink)}
.pill--count{background:transparent;border-color:var(--line-strong);color:var(--ink-500);letter-spacing:.08em;font-size:11px;font-weight:700}

.tag{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line-strong);font-size:12px;font-weight:600;color:var(--ink-700);white-space:nowrap}
.tag .ms{font-size:15px;color:var(--ink-400)}
.tag--track{background:var(--brand-50);border-color:var(--brand-100);color:var(--brand-700)}
.tag--closed{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger-ink);white-space:normal;height:auto;min-height:26px;padding:3px 9px;line-height:1.35}
.tag--closed .ms{color:var(--danger)}

.code{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:4px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-700);font-size:11px;font-weight:700;letter-spacing:.04em;vertical-align:middle;white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:var(--r-sm);border:1px solid transparent;font:700 14px/1 var(--font);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.btn .ms{font-size:18px}
.btn--primary{background:var(--brand-500);color:#fff}
.btn--primary:hover{background:var(--brand-600)}
.btn--open{background:var(--success-bg);color:var(--success-ink);border-color:var(--success-line)}
.btn--open:hover{background:#DCEBE1}
.btn--closed{background:var(--surface-2);color:var(--ink-400);border-color:var(--line-strong);cursor:not-allowed}
.btn--lg{height:48px;padding:0 22px;font-size:15px}
.btn--block{width:100%}
.btn--ghost{background:#fff;color:var(--ink-900);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--brand-400);color:var(--brand-600)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--success)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,125,79,.4)}70%{box-shadow:0 0 0 6px rgba(46,125,79,0)}100%{box-shadow:0 0 0 0 rgba(46,125,79,0)}}
.live-dot{animation:pulse 2.4s infinite}

.section-title{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.section-title h2{font-size:var(--fs-h2);font-weight:800}
.caps-title{font-size:15px!important;font-weight:800;letter-spacing:.05em}

/* ---------- 1 + 2. Full-width sticky header + announcement ---------- */
.site-top{position:sticky;top:0;z-index:50;pointer-events:none}
.site-top > *{pointer-events:auto}
.topbar{background:#fff;border-bottom:1px solid var(--line)}
.topbar-inner{width:min(100% - 48px, var(--container));margin-inline:auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s-5);padding-block:12px}
.brand{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;min-width:0}
.logo-slot{width:48px;height:48px;display:grid;place-items:center;flex-shrink:0}
.logo-slot img{width:48px;height:48px;object-fit:contain}
.logo-slot--placeholder{border-radius:14px;background:var(--brand-50);color:var(--brand-600);font-weight:800;font-size:15px;letter-spacing:.02em}
.brand-text{display:grid;line-height:1.25;min-width:0}
.brand-text strong{color:var(--ink-900);font-family:var(--font-serif);font-size:16px;font-weight:700;white-space:nowrap}
.brand-text span{color:var(--ink-500);font-size:12px;font-weight:500;white-space:nowrap}
.topnav{display:flex;justify-content:flex-end;gap:2px}
.topnav a{display:inline-flex;align-items:center;height:38px;padding:0 13px;border-radius:var(--r-sm);font-size:14px;font-weight:600;color:var(--ink-500);text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}
.topnav a:hover{background:var(--surface-2);color:var(--ink-900)}
.topnav a.is-active{background:var(--brand-600);color:#fff}
.account{display:flex;align-items:center;gap:var(--s-3);padding-left:var(--s-5);border-left:1px solid var(--line)}
.account-text{display:grid;text-align:right;line-height:1.3;min-width:0;max-width:240px}
.account-text strong{font-size:14px;color:var(--ink-900);font-weight:700;white-space:nowrap}
.account-text a{font-size:12px;color:var(--ink-500);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-text a.account-login{font-size:14px;font-weight:700;color:var(--ink-900)}
.account-text a:hover{color:var(--brand-600)}
.avatar-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink-700);text-decoration:none;border:1px solid var(--line-strong);cursor:pointer;padding:0;font:inherit}
.avatar-btn:hover,.account-menu.is-open .avatar-btn{border-color:var(--brand-400);color:var(--brand-600)}
.account-menu{position:relative}
.account-drop{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:220px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-2)}
.account-drop[hidden]{display:none}
.account-drop a,.account-drop button{display:flex;align-items:center;gap:10px;width:100%;height:40px;padding:0 12px;border:0;background:transparent;border-radius:var(--r-sm);font-size:14px;font-weight:600;color:var(--ink-700);text-decoration:none;cursor:pointer;text-align:left}
.account-drop a:hover,.account-drop button:hover{background:var(--surface-2);color:var(--ink-900)}
.account-drop .ms{font-size:18px;color:var(--ink-400)}

.notice-wrap{width:min(100% - 48px, var(--container));margin-inline:auto;padding-top:12px;pointer-events:none}
.notice{pointer-events:auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-4);min-height:56px;padding:10px 12px 10px 16px;border-radius:var(--r-md);background:var(--brand-700);border:0}
.notice-icon{color:rgba(255,255,255,.85)}
.notice-icon .ms{font-size:21px}
.notice-title{font-size:13.5px;font-weight:500;line-height:1.5;color:rgba(255,255,255,.92)}
.notice-help{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 10px;border-radius:var(--r-sm);background:#fff;color:var(--ink-900);text-decoration:none;white-space:nowrap}
.notice-help:hover{background:var(--brand-50)}
.notice-help-icon{color:var(--success-ink)}
.notice-help-icon .ms{font-size:18px}
.notice-help-text{display:grid;line-height:1.2}
.notice-help-text .k{display:none}
.notice-help-text strong{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.notice-help-text .t{font-size:11.5px;font-weight:600;color:var(--ink-500)}

[id]{scroll-margin-top:calc(var(--top-h, 150px) + 16px)}

/* ---------- 3/4. Hero + advisory ---------- */
.hero-row{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.hero{position:relative;padding:var(--s-6) var(--s-7);display:flex;flex-direction:column}
.hero-copy{min-width:0}
.hero .pill{margin-bottom:var(--s-3)}
.hero h1{font-family:var(--font-serif);font-size:var(--fs-h1);font-weight:600;line-height:1.25;text-wrap:balance}
.hero h1 em{font-style:italic;color:inherit}
.hero-sub{margin-top:var(--s-2);font-size:15px;font-weight:500;color:var(--ink-500)}
.hero-sub b{color:var(--ink-900);font-weight:700;white-space:nowrap}
.hero-top{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:var(--s-7);align-items:stretch}

/* Offering counts — compact informational data, not an analytics widget */
.offer-panel{display:grid;gap:10px;align-content:start;padding:2px 0 0 var(--s-5);border-left:1px solid var(--line)}
.offer-figure{display:flex;align-items:baseline;gap:10px}
.offer-figure strong{font-size:30px;font-weight:700;line-height:1;color:var(--ink-900);font-variant-numeric:tabular-nums}
.offer-figure span{font-size:12.5px;font-weight:500;line-height:1.4;color:var(--ink-500)}
.offer-bar{display:flex;gap:2px;height:5px}
.seg{position:relative}
.seg--1{background:var(--brand-600)}
.seg--2{background:var(--brand-300)}
.seg:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:5px 9px;border-radius:4px;background:var(--ink-900);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;pointer-events:none}
.offer-legend{display:grid}
.offer-legend a{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid var(--line);text-decoration:none;font-size:13px;font-weight:500;color:var(--ink-700)}
.offer-legend a:hover{color:var(--brand-600)}
.offer-legend b{margin-left:auto;font-size:14px;font-weight:700;color:var(--ink-900);font-variant-numeric:tabular-nums}
.sw{width:9px;height:9px;border-radius:2px;flex-shrink:0}
.sw--1{background:var(--brand-600)}
.sw--2{background:var(--brand-300)}
.offer-status{display:grid;gap:5px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;font-weight:500;color:var(--ink-500)}
.offer-status span{display:flex;align-items:center;gap:6px}
.offer-status b{color:var(--ink-900);font-weight:700}
.offer-status .ms{font-size:16px}
.st-open{color:var(--success)}
.st-closed{color:var(--danger)}

/* Documents & resources — one coherent list, not four feature cards */
.quick-actions{position:relative;z-index:1;display:block;margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line)}
.qa-caption{margin-bottom:4px}
.qa{display:flex;align-items:center;gap:var(--s-3);padding:9px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink-900);font-size:14px;font-weight:600;line-height:1.35;transition:color .15s}
.qa .icon-chip{width:auto;height:auto;color:var(--ink-400)}
.qa .icon-chip .ms{font-size:19px}
.qa-label{flex:1;min-width:0}
.qa-arrow{color:var(--ink-300);font-size:18px!important;transition:color .15s}
.qa:hover{color:var(--brand-600)}
.qa:hover .qa-arrow{color:var(--brand-600)}

/* Advisory — restrained institutional notice panel */
.advisory{position:relative;display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-5) var(--s-6);border-radius:var(--r-md);background:var(--warning-bg);border:1px solid var(--warning-line)}
.advisory .icon-chip{width:auto;height:auto;color:#A9761B}
.advisory-head{display:flex;align-items:center;gap:var(--s-2)}
.advisory .eyebrow{color:var(--warning-ink)}
.advisory h2{font-size:17px;font-weight:700;color:#4A300B;margin-top:2px}
.advisory p{color:#5E4A2E;font-size:14px;line-height:1.65}
.advisory p strong{color:#3E2A0C;font-weight:700}
.advisory-links{display:grid;border-top:1px solid var(--warning-line)}
.advisory-links a{display:flex;align-items:center;gap:9px;padding:10px 2px;border-bottom:1px solid var(--warning-line);font-size:13.5px;font-weight:600;color:#4A300B;text-decoration:none;transition:color .15s}
.advisory-links a:hover{color:#8A5A00}
.advisory-links a:hover .ms:last-child{color:#8A5A00}
.advisory-links .ms{font-size:18px;color:#A9761B}
.advisory-links .ms:last-child{margin-left:auto;color:#C9A36A}
.advisory-foot{display:flex;gap:9px;margin-top:auto;padding-top:var(--s-3);border-top:1px dashed var(--warning-line);font-size:13px;line-height:1.5;color:#5E4A2E}
.advisory-foot .ms{color:#A9761B;font-size:19px;margin-top:1px}

/* ---------- 5. Active enrolment cycles ---------- */
.cycles{padding:var(--s-6)}
.cycles-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4) var(--s-5);flex-wrap:wrap;padding-bottom:var(--s-5);border-bottom:1px solid var(--line)}
.search{flex:1 1 520px;min-width:0;max-width:640px;display:flex;align-items:center;gap:6px;padding:4px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line-strong);transition:border-color .15s,box-shadow .15s}
.search:focus-within{border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100)}
.search-field{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding-left:10px;cursor:text}
.search-glass{font-size:20px!important;color:var(--ink-400)}
.search input{flex:1;min-width:0;height:40px;border:0;outline:0;background:transparent;font:500 14.5px var(--font);color:var(--ink-900)}
.search input::placeholder{color:var(--ink-400)}
.search input::-webkit-search-cancel-button{cursor:pointer}
.search-btn{height:40px}
.search-suggest{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px;margin-top:10px;font-size:12px;font-weight:500;color:var(--ink-400)}
.search-suggest button{height:26px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:#fff;font:600 12px var(--font);color:var(--ink-700);cursor:pointer;transition:border-color .15s,color .15s,background-color .15s}
.search-suggest button:hover,.search-suggest button.is-on{border-color:var(--brand-400);background:var(--brand-50);color:var(--brand-700)}
.search-empty{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-5);padding:var(--s-5);border-radius:var(--r-md);border:1px dashed var(--line-strong);background:var(--surface-2)}
.search-empty div{flex:1;min-width:220px;display:grid;gap:2px}
.search-empty strong{color:var(--ink-900);font-size:15px}
.search-empty span{font-size:13.5px;color:var(--ink-500)}
.cluster + .cluster{margin-top:var(--s-6)}
.js-item.is-hit{animation:hit 1.4s ease-out}
@keyframes hit{0%{box-shadow:0 0 0 0 rgba(35,74,124,.35)}100%{box-shadow:0 0 0 14px rgba(35,74,124,0)}}
.cluster-head{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-6);padding-bottom:10px;border-bottom:2px solid var(--ink-900)}
.cluster-head .ms{color:var(--ink-400);font-size:19px;align-self:center}
.cluster-head h3{color:var(--ink-900)}
.cluster-head .pill{background:transparent;border:0;padding:0;color:var(--ink-500);font-weight:500;letter-spacing:0;font-size:12.5px;margin-left:auto}


/* ---------- 6. Existing applicant CTA — the one strong band on the page ---------- */
.cta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-6);padding:var(--s-6);border-radius:var(--r-md);background:var(--brand-700)}
.cta-icon{color:#B9C9DE}
.cta-icon .ms{font-size:28px}
.cta h2{color:#fff;font-family:var(--font-serif);font-size:21px;font-weight:600}
.cta p{margin-top:4px;color:rgba(255,255,255,.75);font-size:14px;max-width:560px}
.cta-actions{display:grid;gap:10px;justify-items:end}
.cta .btn--primary{background:#fff;color:var(--brand-700)}
.cta .btn--primary:hover{background:var(--brand-100)}
.cta-link{display:inline-flex;align-items:center;gap:4px;color:rgba(255,255,255,.75);font-size:13px;font-weight:500;text-decoration:none}
.cta-link b{color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.4)}
.cta-link:hover b{border-color:#fff}

/* ---------- 7. Milestones — one shared panel with divided columns ---------- */
.stats{grid-template-columns:repeat(3,minmax(0,1fr));background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
.row.stats{gap:0}
.stat{position:relative;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5) var(--s-6);border:0;background:transparent;border-radius:0}
.stat + .stat{border-left:1px solid var(--line)}
.stat-top{display:flex;align-items:center;justify-content:space-between}
.stat-top .icon-chip{width:auto;height:auto}
.stat-step{font-size:11.5px;font-weight:700;color:var(--ink-400);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.stat-label{font-size:13.5px;font-weight:500;color:var(--ink-500);margin-top:3px}
.stat-value{font-size:var(--fs-stat);font-weight:700;color:var(--ink-900);line-height:1.15;font-variant-numeric:tabular-nums}
.stat-bar{height:3px;background:var(--line);overflow:hidden;margin-top:auto}
.stat-bar i{display:block;height:100%;background:var(--brand-500)}
.stat--featured{background:var(--brand-50)}
.stat--featured .stat-value{color:var(--brand-700)}

/* ---------- 8. Other PG programmes ---------- */
.pg{padding:var(--s-6)}
.pg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-4)}
.pg-card{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4) 18px 18px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line);transition:border-color .15s}
.pg-card:hover{border-color:var(--brand-300)}
.pg-school{display:flex;align-items:center;gap:8px;min-height:24px;font-size:12px;font-weight:600;line-height:1.35;color:var(--ink-500)}
.pg-school .icon-chip{width:auto;height:auto;min-width:0}
.pg-school .icon-chip .ms{font-size:17px}
.pg-card h3{font-size:var(--fs-h3);font-weight:700;line-height:1.35}
.pg-title{display:grid;gap:6px;justify-items:start;margin-top:2px}
.pg-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-meta li > span:last-child{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px}
.pill--xs{min-height:20px;padding:1px 8px;font-size:11px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.pg-card.is-closed{background:var(--surface-2)}
.pg-card.is-closed:hover{border-color:var(--line)}
.pg-card.is-closed .pg-school,.pg-card.is-closed .pg-title,.pg-card.is-closed .pg-meta{opacity:.6}
.pg-card.is-closed .pg-meta .ms{color:var(--ink-400)}
.pg-meta{display:grid;gap:6px;padding-top:var(--s-3);border-top:1px solid var(--line);font-size:13px;font-weight:500;color:var(--ink-500)}
.pg-meta li{display:flex;align-items:center;gap:8px}
.pg-meta .ms{font-size:16px;color:var(--ink-400)}
.pg-card .btn{margin-top:auto}
.pg-card .spacer{flex:1}
.pg-card--phd{grid-column:span 2;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:center;gap:var(--s-3) var(--s-5);padding:var(--s-5) var(--s-6);background:#fff;border-color:var(--line)}
.pg-card--phd .phd-mark{color:var(--brand-600)}
.pg-card--phd .phd-mark .ms{font-size:28px}
.pg-card--phd .phd-body{display:grid;gap:6px;justify-items:start;min-width:0}
.pg-card--phd h3{font-size:18px;margin:0}
.pg-card--phd .pg-meta{border:0;padding:0}
.pg-card--phd .btn{grid-column:2;justify-self:start;margin:0}

/* ---------- 9. Merit statement ---------- */
.merit{display:flex;align-items:center;gap:var(--s-5);padding:var(--s-5) var(--s-6);border-radius:var(--r-md);background:#fff;border:1px solid var(--line)}
.merit .icon-chip{width:auto;height:auto;color:var(--brand-600)}
.merit .icon-chip .ms{font-size:24px}
.merit-body p{margin-top:4px;font-family:var(--font-serif);font-size:17px;font-weight:500;line-height:1.55;color:var(--ink-900);max-width:900px}
.merit-body p strong{font-weight:700}

/* ---------- 10. Contact / dossier ---------- */
.contact-row{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.dossier h2,.campuses h2{font-size:var(--fs-h2);font-weight:600;font-family:var(--font-serif)}
.dossier > p{margin-top:var(--s-3);color:var(--ink-500)}
.contact-list{display:grid;margin-top:var(--s-4);border-top:1px solid var(--line)}
.contact-list li{display:flex;gap:var(--s-3);align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.contact-list li .icon-chip{width:auto;height:auto}
.contact-list .k{display:block;font-size:12px;font-weight:600;color:var(--ink-400)}
.contact-list .v{display:block;font-size:14.5px;font-weight:600;color:var(--ink-900);line-height:1.45}
.contact-list .v a{text-decoration:none}
.contact-list .v a:hover{color:var(--brand-600)}
.contact-list .v b{font-weight:700;font-variant-numeric:tabular-nums}
.contact-list .v small{white-space:nowrap;font-size:13px;font-weight:500;color:var(--ink-500)}
.campuses{display:flex;flex-direction:column}
.campus-grid{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-5)}
.campus-card{display:flex;flex-direction:column;border-radius:var(--r-md);border:1px solid var(--line);overflow:hidden;background:#fff}
.map{position:relative;flex:1;min-height:112px;background-color:#EFF1F3;
  background-image:linear-gradient(rgba(27,31,39,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(27,31,39,.05) 1px,transparent 1px);background-size:22px 22px}
.map::before{content:"";position:absolute;inset:0;background:
  linear-gradient(28deg,transparent 46%,rgba(255,255,255,.95) 46%,rgba(255,255,255,.95) 52%,transparent 52%),
  linear-gradient(-12deg,transparent 60%,rgba(255,255,255,.9) 60%,rgba(255,255,255,.9) 64%,transparent 64%)}
.map--alt::before{background:
  linear-gradient(-32deg,transparent 40%,rgba(255,255,255,.95) 40%,rgba(255,255,255,.95) 46%,transparent 46%),
  linear-gradient(80deg,transparent 55%,rgba(255,255,255,.9) 55%,rgba(255,255,255,.9) 59%,transparent 59%)}
.pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--brand-600);color:#fff;border:2px solid #fff}
.pin .ms{font-size:18px}
.campus-body{padding:var(--s-4) 20px 20px}
.campus-body h3{font-size:15px;font-weight:700}
.campus-body p{margin-top:5px;font-size:13.5px;color:var(--ink-500);line-height:1.6}

/* ---------- 11. Accreditation — one divided strip ---------- */
.accred{grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
.row.accred{gap:0}
.badge{display:flex;align-items:center;gap:var(--s-3);padding:14px 20px;font-size:13.5px;font-weight:600;color:var(--ink-900)}
.badge + .badge{border-left:1px solid var(--line)}
.badge .icon-chip{width:auto;height:auto;color:var(--brand-600)}

/* ---------- 12. Footer ---------- */
.footer{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;padding:20px 4px 0;font-size:13px;color:var(--ink-500);background:transparent;border:0;border-radius:0;box-shadow:none;border-top:1px solid var(--line)}
.footer-left{display:flex;align-items:center;gap:var(--s-3)}
.footer-left .logo-slot,.footer-left .logo-slot img{width:36px;height:36px}
.footer nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.footer nav a{color:var(--ink-700);font-weight:600;text-decoration:none}
.footer nav a:hover{color:var(--brand-600)}
.footer nav i{width:4px;height:4px;border-radius:50%;background:var(--ink-300)}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .topbar-inner{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand account" "nav nav";row-gap:10px;padding-block:10px}
  .brand{grid-area:brand}.account{grid-area:account;justify-self:end}
  .topnav{grid-area:nav;justify-content:flex-start;overflow-x:auto;padding-top:10px;border-top:1px solid var(--line);scrollbar-width:none}
  .topnav::-webkit-scrollbar{display:none}
}
@media (max-width:1080px){
  :root{--fs-h1:28px;--fs-stat:22px}
  .hero-row,.contact-row{grid-template-columns:1fr}
  .pg-grid,.pg-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .notice-title{font-size:13px}
  .accred{grid-template-columns:repeat(2,minmax(0,1fr))}
  .badge:nth-child(odd){border-left:0}
  .badge:nth-child(n+3){border-top:1px solid var(--line)}
  .cta{grid-template-columns:auto minmax(0,1fr);padding:var(--s-5)}
  .cta-actions{grid-column:1 / -1;grid-template-columns:auto 1fr;justify-items:start;align-items:center;gap:var(--s-5)}
}
@media (max-width:860px){
  .notice-help-text .t{display:none}
  .hero-top{grid-template-columns:1fr}
  .offer-panel{border-left:0;padding-left:0;padding-top:var(--s-4);border-top:1px solid var(--line)}
  .search{flex-basis:100%;max-width:none}
  .search-suggest{justify-content:flex-start}
  .stats{grid-template-columns:1fr}
  .stat{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:var(--s-4);row-gap:8px}
  .stat + .stat{border-left:0;border-top:1px solid var(--line)}
  .stat-top{grid-row:1 / span 2;flex-direction:column;gap:4px}
  .stat-bar{grid-column:1 / -1}
}
@media (max-width:640px){
  :root{--fs-h1:26px;--fs-h2:19px;--gap:16px}
  .page{width:min(100% - 32px, var(--container));padding-top:var(--s-4)}
  .pad,.cycles,.hero{padding:var(--s-5) 20px}
  .topbar-inner,.notice-wrap{width:min(100% - 32px, var(--container))}
  .brand-text strong{font-size:15px}
  .brand-text span{white-space:normal}
  .site-top{position:static}
  .notice{grid-template-columns:auto minmax(0,1fr);padding:12px;gap:12px}
  .notice-title{font-size:13px}
  .notice-help{grid-column:1 / -1;justify-self:start}
  .notice-help-text .t{display:block}
  .search-btn{padding:0 14px}
  .search-btn .ms{display:none}
  .cluster-head{gap:6px 10px}
  .cluster-head h3{flex:1 1 180px}
  .cluster-head .pill{margin-left:0}
  .account-text{display:none}
  .account{padding-left:0;border-left:0}
  .pg-grid,.pg-grid--3,.campus-grid,.accred{grid-template-columns:1fr}
  .badge{border-left:0!important}
  .badge + .badge{border-top:1px solid var(--line)}
  .pg-card--phd{grid-column:auto;grid-template-columns:1fr;padding:var(--s-5) 20px}
  .pg-card--phd .btn{grid-column:1;width:100%}
  .cta{grid-template-columns:1fr;padding:var(--s-5) 20px}
  .cta-actions{grid-template-columns:1fr;justify-items:stretch;text-align:center}
  .cta-link{justify-content:center}
  .merit{flex-direction:column;align-items:flex-start;padding:var(--s-5) 20px}
  .merit-body p{font-size:16px}
  .footer{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ============ UI KIT ADDITIONS (define the rest of the portal's components) ============ */

/* swatches */

/* type specimens */

/* spacing / radius / shadow */

/* forms */
.field{display:grid;gap:6px}
.field > label{font-size:12.5px;font-weight:700;color:var(--ink-700)}
.field .req{color:var(--danger)}
.control{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line-strong);transition:border-color .15s,box-shadow .15s}
.control .ms{font-size:20px;color:var(--ink-400)}
.control select{appearance:none;-webkit-appearance:none}
.control input,.control select{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 14.5px var(--font);color:var(--ink-900)}
.control input::placeholder{color:var(--ink-400)}
.control.is-focus{border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100)}
.control.is-error{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}
.control.is-disabled{background:var(--surface-2);border-color:var(--line);color:var(--ink-400)}
.control.is-filled .ms{color:var(--brand-500)}
textarea.control{height:96px;align-items:flex-start;padding:12px 14px;resize:vertical;font:500 14.5px var(--font);color:var(--ink-900)}
.help{font-size:12px;color:var(--ink-500)}
.help.err{color:var(--danger-ink);display:flex;align-items:center;gap:6px}
.help.err .ms{font-size:16px}
.choice{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:#fff;font-size:14px;font-weight:600;color:var(--ink-700);cursor:pointer}
.choice.is-on{border-color:var(--brand-500);background:var(--brand-50);color:var(--brand-700)}
.box{width:20px;height:20px;border-radius:4px;border:1.5px solid var(--line-strong);display:grid;place-items:center;background:#fff;flex-shrink:0}
.box.is-on{background:var(--brand-500);border-color:var(--brand-500);color:#fff}
.box.rd{border-radius:50%}
.box .ms{font-size:15px}
.switch{width:44px;height:26px;border-radius:999px;background:var(--line-strong);position:relative;flex-shrink:0}
.switch.is-on{background:var(--brand-500)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch.is-on::after{left:21px}
.dropzone{display:grid;justify-items:center;gap:6px;padding:28px;border-radius:var(--r-md);border:1.5px dashed var(--brand-300);background:var(--brand-50);text-align:center}
.dropzone strong{font-size:14.5px;color:var(--ink-900)}
.dropzone span{font-size:12.5px;color:var(--ink-500)}
.file-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line)}
.file-row .nm{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--ink-900)}
.file-row .sz{font-size:12px;color:var(--ink-400)}

/* nav */
.tabs{display:flex;gap:4px;padding:4px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line);width:max-content}
.tabs a{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;border-radius:var(--r-sm);font-size:14px;font-weight:700;color:var(--ink-500);text-decoration:none}
.tabs a.is-on{background:#fff;color:var(--brand-700);box-shadow:var(--shadow-1)}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:13px;font-weight:600;color:var(--ink-400)}
.crumbs a{color:var(--ink-500);text-decoration:none}
.crumbs .ms{font-size:16px}
.crumbs b{color:var(--ink-900)}
.sidenav{display:grid;gap:4px;width:260px;padding:12px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.sidenav a{display:flex;align-items:center;gap:12px;height:42px;padding:0 13px;border-radius:var(--r-sm);font-size:14px;font-weight:600;color:var(--ink-500);text-decoration:none}
.sidenav a .ms{font-size:20px}
.sidenav a.is-on{background:var(--brand-600);color:#fff}
.sidenav a .count{margin-left:auto;font-size:12px;font-weight:700}
.pager{display:flex;align-items:center;gap:6px}
.pager a{display:grid;place-items:center;min-width:36px;height:36px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:#fff;font-size:13.5px;font-weight:700;color:var(--ink-700);text-decoration:none}
.pager a.is-on{background:var(--brand-600);border-color:var(--brand-600);color:#fff}

/* stepper */
.stepper{display:flex;align-items:center;gap:0;width:100%}
.step{display:flex;align-items:center;gap:10px}
.step .dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;background:#fff;border:1.5px solid var(--line-strong);color:var(--ink-400)}
.step.done .dot{background:var(--success-bg);border-color:var(--success-line);color:var(--success-ink)}
.step.now .dot{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.step span{font-size:13px;font-weight:700;color:var(--ink-400)}
.step.done span,.step.now span{color:var(--ink-900)}
.step-line{flex:1;height:2px;background:var(--line);margin:0 14px;border-radius:2px}
.step-line.done{background:var(--success)}

/* table */
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400);padding:0 16px 6px}
.table td{background:var(--surface-2);padding:14px 16px;font-size:14px;color:var(--ink-700);border-block:1px solid transparent}
.table tr td:first-child{border-radius:var(--r-md) 0 0 var(--r-md);border-left:1px solid transparent;font-weight:700;color:var(--ink-900)}
.table tr td:last-child{border-radius:0 var(--r-md) var(--r-md) 0;border-right:1px solid transparent;text-align:right}
.table tr:hover td{background:#fff;border-color:var(--brand-100)}

/* feedback */
.alert{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md);border:1px solid;font-size:14px;line-height:1.55}
.alert strong{display:block;font-size:14.5px;margin-bottom:2px}
.alert .ms{font-size:22px;margin-top:1px}
.alert--info{background:var(--brand-50);border-color:var(--brand-100);color:#2C3163}
.alert--info .ms{color:var(--brand-500)}
.alert--ok{background:var(--success-bg);border-color:var(--success-line);color:#14532D}
.alert--ok .ms{color:var(--success-ink)}
.alert--warn{background:var(--warning-bg);border-color:var(--warning-line);color:#5E4A2E}
.alert--warn .ms{color:#B45309}
.alert--err{background:var(--danger-bg);border-color:var(--danger-line);color:#7F1D1D}
.alert--err .ms{color:var(--danger-ink)}
.toast{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:var(--r-md);background:var(--night);color:#fff;font-size:14px;font-weight:600;box-shadow:var(--shadow-2);width:max-content}
.toast .ms{color:#8FD0A8}
.modal:not(.fade){width:460px;max-width:100%;border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-2);border:1px solid var(--line);overflow:hidden}
.modal:not(.fade) .modal-body,.modal-overlay .modal-body{padding:28px;display:grid;gap:12px;justify-items:start}
.modal h3{font-size:20px;font-weight:800}
.modal p{font-size:14.5px;color:var(--ink-500)}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 28px;background:var(--surface-2);border-top:1px solid var(--line)}
.empty{display:grid;justify-items:center;gap:6px;text-align:center;padding:36px;border-radius:var(--r-md);border:1px dashed var(--line-strong);background:var(--surface-2)}
.empty strong{font-size:16px;color:var(--ink-900)}
.empty span{font-size:13.5px;color:var(--ink-500)}
.progress{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.progress i{display:block;height:100%;border-radius:inherit;background:var(--brand-500)}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--brand-50);color:var(--brand-600);font-weight:800;font-size:14px}
.skeleton{height:14px;border-radius:7px;background:linear-gradient(90deg,#EEF0F6,#F7F8FC,#EEF0F6)}
@media (max-width:640px){.sw-grid,.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.kit{width:min(100% - 32px,1280px)}.sec{padding:20px}}


/* ============ PORTAL-WIDE PAGE PATTERNS (shared by every screen) ============ */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
.row-wrap{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.stack{display:grid;gap:var(--s-5)}
.stack-sm{display:grid;gap:var(--s-3)}
.mt-4{margin-top:var(--s-4)}.mt-5{margin-top:var(--s-5)}.mt-6{margin-top:var(--s-6)}
.right{margin-left:auto}
.muted{color:var(--ink-500)}
.nums{font-variant-numeric:tabular-nums}

/* candidate identity strip */
.idstrip{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding:14px 20px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-1)}
.idstrip .who{display:grid;line-height:1.3;min-width:0}
.idstrip .who strong{font-size:14.5px;font-weight:800;color:var(--ink-900)}
.idstrip .who span{font-size:12.5px;color:var(--ink-500)}
.idstrip .sep{width:1px;height:28px;background:var(--line)}

/* page head card (dossier title block) */
.page-head{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap;padding:var(--s-6);border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.page-head h1{font-family:var(--font-serif);font-size:var(--fs-h1);font-weight:600;line-height:1.25}
.page-head .lead{margin-top:6px;font-size:var(--fs-lead);font-weight:500;color:var(--ink-500)}
.page-head .meta{margin-top:8px;font-size:13px;color:var(--ink-500);display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* grey inner panel + key/value rows */
.panel{padding:var(--s-4) var(--s-5);border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line)}
.panel--plain{border-color:transparent}
.kv{display:grid;gap:10px}
.kv .k,.panel .k,.kv-row .k{font-size:12px;font-weight:600;color:var(--ink-400);display:block}
.kv .v,.panel .v,.kv-row .v{font-size:14.5px;font-weight:700;color:var(--ink-900);display:block;line-height:1.45;margin-top:2px}
.kv .v small,.panel .v small,.kv-row .v small{font-size:13px;font-weight:500;color:var(--ink-500)}
.kv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-4)}
.kv-row{display:flex;gap:var(--s-3);align-items:flex-start;padding:12px 14px;border-radius:var(--r-sm);background:var(--surface-2)}

/* section heads inside cards */
.sec-head{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding-bottom:var(--s-4);border-bottom:1px solid var(--line);margin-bottom:var(--s-5)}
.sec-head h2{font-size:var(--fs-h2);font-weight:800}
.sec-head .sub{width:100%;font-size:13.5px;color:var(--ink-500);margin-top:-4px}
.subsec{margin-top:var(--s-6)}
.subsec:first-child{margin-top:0}
.subsec-head{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-4)}
.subsec-head .eyebrow{color:var(--brand-500)}
.subsec-head h3{font-size:var(--fs-h3);font-weight:700}
.letter{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--brand-600);color:#fff;font-size:12.5px;font-weight:700;flex-shrink:0}

/* form grids + action bar */
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.form-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid .span-2{grid-column:span 2}
.form-grid .span-3{grid-column:span 3}
.actionbar{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line)}
.actionbar .save-note{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-500)}
.actionbar .save-note .ms{font-size:18px;color:var(--success)}
.actionbar .grow{flex:1}

/* misc */
.meta-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-500)}
.meta-row .ms{font-size:17px;color:var(--brand-500)}
.divider{height:1px;background:var(--line);margin:var(--s-5) 0}
.dashed-add{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:var(--r-sm);border:1px dashed var(--line-strong);background:#fff;font-size:13.5px;font-weight:700;color:var(--brand-600);cursor:pointer;width:100%}
.dashed-add:hover{border-color:var(--brand-400);background:var(--brand-50)}
.count-pill{margin-left:auto}
@media (max-width:1080px){
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid .span-3{grid-column:span 2}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .form-grid,.form-grid--2,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .form-grid .span-2,.form-grid .span-3{grid-column:auto}
  .page-head{padding:20px}
  .actionbar .btn{width:100%}
}

/* stepper — wide variant with status pills (dashboard + form headers) */
.stepper--wide{flex-wrap:wrap;gap:var(--s-3)}
.stepper--wide .step{flex:1 1 150px;align-items:flex-start;padding:12px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line)}
.stepper--wide .step.done{background:#fff;border-color:var(--line)}
.stepper--wide .step.now{background:var(--brand-50);border-color:var(--brand-100)}
.stepper--wide .s-label{display:grid;gap:5px;font-size:13px;font-weight:700;color:var(--ink-900);line-height:1.3}
.stepper--wide .s-label em{font-style:normal;justify-self:start}
.stepper--wide .step-line{display:none}
/* file rows list */
.file-list{display:grid;gap:var(--s-2)}
.file-row .btn{flex-shrink:0}
/* preference number badge */
.pref{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--brand-600);color:#fff;font-size:12px;font-weight:700;flex-shrink:0}

/* two-column page rows (collapse on tablet) */
.row--8-4{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.row--7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.row--6-6{grid-template-columns:repeat(2,minmax(0,1fr))}
.row--5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (max-width:1080px){
  .row--8-4,.row--7-5,.row--6-6,.row--5-7{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
}

/* grid/flex children must be allowed to shrink below their content width */
.page > *{min-width:0}
.card,.idstrip,.advisory,.notice,.cta,.merit,.panel,.kv-row,.file-row,.sec-head,.row-wrap,.stat,.pg-card{min-width:0}
.sec-head h2,.page-head h1,.file-row .nm,.kv .v,.idstrip .who{min-width:0;overflow-wrap:anywhere}

@media (max-width:640px){
  .right{margin-left:0!important}
  .advisory-head,.sec-head,.idstrip{flex-wrap:wrap}
}

/* ---- system fixes learned from building the full portal ---- */
.field,.control,.choice,.file-row .nm{min-width:0}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:-4px;padding-inline:4px}
.table-wrap .table{min-width:640px}
.btn--wrap,.pill--wrap{white-space:normal}
.btn--wrap{height:auto;min-height:44px;padding-block:10px;line-height:1.35}
@media (max-width:640px){
  .btn{white-space:normal;height:auto;min-height:44px;padding-block:10px;line-height:1.3}
  .pill{white-space:normal}
}

/* ============ COMPACT MOBILE LAYOUT ============ */
@media (max-width:640px){
  :root{
    --fs-h1:24px;
    --fs-h2:18px;
    --fs-lead:14.5px;
    --fs-body:14px;
    --gap:12px;
  }

  body{font-size:var(--fs-body)}
  .page{
    width:min(100% - 24px,var(--container));
    padding-block:12px 24px;
    gap:12px;
  }
  .card{border-radius:8px}
  .pad,.cycles,.hero{padding:16px}

  /* Header stays recognisable without consuming the first screen. */
  .topbar-inner{
    width:min(100% - 24px,var(--container));
    grid-template-columns:minmax(0,1fr) 36px;
    row-gap:8px;
    column-gap:10px;
    padding-block:8px 0;
  }
  .brand{gap:8px}
  .logo-slot,.logo-slot img{width:40px;height:40px}
  .brand-text{line-height:1.15}
  .brand-text strong{
    min-width:0;
    font-size:13px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .brand-text span{
    margin-top:2px;
    font-size:10.5px;
    line-height:1.2;
  }
  .avatar-btn{width:36px;height:36px}
  .avatar-btn .ms{font-size:19px}
  .topnav{
    width:calc(100% + 24px);
    margin-inline:-12px;
    gap:0;
    padding:0 12px;
    border-top:1px solid var(--line);
    scroll-snap-type:x proximity;
  }
  .topnav a{
    height:42px;
    padding:0 12px;
    border-radius:0;
    font-size:12.5px;
    scroll-snap-align:start;
  }
  .topnav a.is-active{
    height:34px;
    margin-block:4px;
    border-radius:var(--r-sm);
  }

  /* Announcement becomes a compact two-row service banner. */
  .notice-wrap{
    width:min(100% - 24px,var(--container));
    padding-top:10px;
  }
  .notice{
    grid-template-columns:20px minmax(0,1fr);
    gap:8px 10px;
    min-height:0;
    padding:12px;
  }
  .notice-icon .ms{font-size:18px}
  .notice-title{font-size:12px;line-height:1.45}
  .notice-help{
    grid-column:2;
    min-height:38px;
    padding:5px 10px;
  }
  .notice-help-text strong{font-size:12.5px}
  .notice-help-text .t{font-size:10px}

  /* Landing content. */
  .hero h1{font-size:24px;line-height:1.18}
  .hero-sub{font-size:13.5px}
  .hero-top{gap:18px}
  .quick-actions{margin-top:18px}
  .qa{padding-block:8px;font-size:13px}
  .offer-panel{padding-top:14px}
  .offer-figure strong{font-size:26px}
  .cycles-head{gap:12px;padding-bottom:16px}
  .section-title{gap:8px}
  .section-title h2{font-size:18px}
  .search{flex-basis:100%;width:100%;min-width:0}
  .search input{font-size:13px}
  .search-suggest{margin-top:8px;gap:5px}
  .cluster-head{margin-top:20px}
  .pg-grid,.pg-grid--3{gap:12px;margin-top:12px}
  .pg-card{padding:14px;gap:10px}
  .cta{gap:12px;padding:16px}
  .cta-icon{display:none}
  .cta h2{font-size:19px}
  .cta p{font-size:12.5px}
  .stat{padding:16px}
  .merit{gap:10px;padding:16px}
  .contact-list li{align-items:flex-start;padding:10px 0}
  .contact-list .v{font-size:13.5px;overflow-wrap:anywhere}
  .contact-list .v small{white-space:normal}
  .campus-body{padding:14px 16px 16px}
  .badge{padding:11px 14px}
  .footer{gap:12px;padding-top:16px;font-size:12px}
  .footer-left{align-items:flex-start}
  .footer-left .logo-slot,.footer-left .logo-slot img{width:30px;height:30px}

  /* Auth and other content pages. */
  .page-head{flex-direction:column;align-items:stretch;padding:16px;gap:12px}
  .page-head > div{min-width:0!important}
  .page-head > .right{align-self:flex-start}
  .page-head h1{margin-top:12px;font-size:24px}
  .page-head .lead{font-size:14px;line-height:1.5}
  .page-head .meta{display:grid;justify-items:start;margin-top:10px;gap:6px}
  .crumbs{gap:3px 6px;font-size:11.5px;line-height:1.4}
  .crumbs .ms{font-size:14px}
  .advisory{gap:12px;padding:16px}
  .advisory h2{font-size:16px}
  .advisory p{font-size:13px;line-height:1.55}
  .sec-head{
    gap:8px;
    margin-bottom:16px;
    padding-bottom:12px;
  }
  .sec-head .icon-chip{width:32px;height:32px}
  .sec-head h2{flex:1;font-size:18px;overflow-wrap:normal}
  .sec-head .count-pill{margin-left:40px!important}
  .sec-head .sub{margin-top:0;font-size:12.5px}
  #register .sec-head h2{flex-basis:calc(100% - 40px)}
  .stack{gap:16px}
  .stack-sm{gap:10px}
  .tabs{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%!important;
    gap:3px;
  }
  .tabs a{
    justify-content:center;
    min-width:0;
    height:auto;
    min-height:40px;
    padding:6px 8px;
    font-size:12px;
    line-height:1.25;
    text-align:center;
    white-space:normal;
  }
  .tabs a .ms{font-size:17px}
  .field{gap:5px}
  .field > label{font-size:12px;line-height:1.4}
  .control{height:44px;padding-inline:12px}
  .control input,.control select{font-size:13.5px}
  .help{font-size:11.5px;line-height:1.45}
  .choice{padding:11px 12px;font-size:12.5px;line-height:1.45}
  .panel{padding:14px}
  .alert{gap:10px;padding:12px;font-size:12.5px}
  .meta-row{font-size:11.5px}
  .code{font-size:10px;white-space:normal}

  .modal-overlay{padding:12px}
  .modal-overlay .modal{max-height:calc(100dvh - 24px)}
  .modal:not(.fade) .modal-body,.modal-overlay .modal-body{padding:18px}
  .modal-foot{padding:12px 18px}
  .modal-foot .choice{flex-basis:100%!important;min-width:0!important}
  .modal-foot .row-wrap{width:100%;display:grid;grid-template-columns:auto 1fr}
  .modal-foot .btn:last-child{width:100%}
}

@media (max-width:360px){
  .brand-text strong{font-size:12px}
  .brand-text span{font-size:10px}
  .topnav a{padding-inline:10px;font-size:12px}
  .notice-title{font-size:11.5px}
  .tabs a{padding-inline:5px;font-size:11.5px}
  .tabs a .ms{display:none}
}