/* =====================================================================
   The Lord Paul Boateng Student Excellence Scholarship — style.css
   "Midnight Editorial" design system (shared with the GEMS Global
   Scholarship site). Tokens can be overridden at runtime by index.php
   from the CMS `config` table (:root inline override).
   ===================================================================== */

:root {
  --bg: #190e26;            /* Deep Midnight Purple */
  --bg-2: #1f1330;          /* raised panel */
  --border: #2D1F47;        /* fine 1px container border */
  --gold: #f2ca50;          /* Champagne Gold (actions) */
  --gold-soft: #f6d97a;
  --cream: #E8D5B0;
  --white: #FFFFFF;
  --muted: #c3b9dd;
  --muted-soft: #a99ecb;
  --btn-ink: #0b0a0d;       /* near-black type on gold buttons */
  --line: rgba(255,255,255,0.08);
  --line-strong: var(--border);
  --card: rgba(255,255,255,0.035);
  --card-hi: rgba(255,255,255,0.06);
  --glass: rgba(255,255,255,0.04);
  --radius: 16px;
  --shadow: 0 30px 70px -34px rgba(0,0,0,0.75);
  --danger: #e5736f;
  --ok: #57c98b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  font-family: "Montserrat", system-ui, sans-serif;
  color: var(--white);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4 { font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
:where(a, button, summary, input, select, textarea, .btn):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px;
}
.wrap { width: min(1180px, 90vw); margin-inline: auto; position: relative; }
.gold { color: var(--gold); }

/* Collaboration lockup (Denning × Lord's College International).
   SIZING NOTE: the two marks are not comparable by box height. The Denning file carries
   heavy transparent padding — its ink is only ~43% of the box — so it needs a large CSS
   height to look right. The Lord's crest is trimmed to its ink and is near-square (1.31:1,
   where the old GEMS wordmark was 4.6:1), so its CSS height IS its visible height. Each
   pair below is set so the two marks look the same weight, not so they measure the same.
   Matching the two INK heights exactly still left the crest reading as the junior mark —
   a compact vertical crest carries less optical weight than a wide horizontal wordmark of
   the same height — so it is set ~15% taller than parity. */
.collab { display: inline-flex; align-items: center; }
.collab img { width: auto; display: block; }
.collab .x { color: var(--gold); font-weight: 600; opacity: .92; line-height: 0; }
.program-name { font-weight: 600; letter-spacing: 0.01em;
  color: var(--gold-soft); font-size: clamp(1.1rem, 2.1vw, 1.5rem); margin-top: 16px; }
.eyebrow { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--gold); margin-bottom: 16px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px;
  padding: 15px 30px; border-radius: 6px; font-weight: 700; font-family: inherit;
  font-size: 0.88rem; letter-spacing: 0.03em; cursor: pointer; border: 1.5px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-gold { background: var(--gold); color: var(--btn-ink); }
.btn-gold:hover { transform: translateY(-2px); background: var(--gold-soft); }
.btn-gold:disabled { opacity: .65; cursor: default; transform: none; }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--cream); }
.btn-ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,.06); border-color: var(--cream); }
.btn-danger { background: rgba(229,115,111,.12); border-color: rgba(229,115,111,.45); color: #f0a6a2; }
.btn-danger:hover { transform: translateY(-2px); background: rgba(229,115,111,.22); border-color: var(--danger); color: #fff; }

/* ---------- NAV ---------- */
nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; gap: 22px; }
.nav-collab { gap: 14px; }
.nav-collab img.dite { height: 96px; }
.nav-collab img.partner { height: 50px; }
.nav-collab .x { font-size: 1.6rem; margin: 0 6px; }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 0.85rem; font-weight: 600; }
.nav-links a:not(.nav-cta) { color: var(--muted); transition: color .2s; }
.nav-links a:not(.nav-cta):hover { color: var(--white); }
.nav-cta { padding: 11px 22px; }
@media (max-width: 1040px) { .nav-links a:not(.nav-cta) { display: none; } }   /* hide text nav on smaller screens */
@media (max-width: 540px) { .nav-collab img.dite { height: 54px; } .nav-collab img.partner { height: 30px; } }

/* ---------- HERO ---------- */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; padding: 70px 0; overflow: hidden; }
/* The scrim below darkens the LEFT (where the headline sits) and clears toward the right,
   so the framing is pushed right: what shows through is the Rawalpindi campus's glazed
   wing and red window bays, not the signage the scrim would swallow. */
.hero-bg { position: absolute; inset: 0; z-index: 0;
  background: url('../../assets/campus-hero.jpg') 74% 48% / cover no-repeat; }
/* Solid behind the headline, clearing toward the right. The right-hand stops are lighter
   than the GEMS original because this photo earns it — the Rawalpindi façade is a sunlit
   white-and-red elevation, and at the old 0.54 end-stop it read as a grey silhouette. */
.hero-overlay { position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(101deg, var(--bg) 0%, rgba(25,14,38,0.97) 50%, rgba(25,14,38,0.74) 72%, rgba(25,14,38,0.34) 100%),
    linear-gradient(to top, var(--bg) 4%, transparent 42%); }
.hero .wrap { z-index: 2; }
.hero-inner { max-width: 700px; }
.hero-photo-m { display: none; }
.hero-collab { display: flex; gap: 26px; margin: 0 0 26px; justify-content: flex-start; }
.hero-collab img.dite { height: 180px; }
.hero-collab img.partner { height: 88px; }
.hero-collab .x { font-size: 2.85rem; margin: 0 9px; }
/* Sized for the scholarship's full name, which is long ("The Lord Paul Boateng Student
   Excellence Scholarship"). At the previous 4.1rem it ran to five uppercase lines and
   swallowed the hero; this keeps it commanding without crowding out the lead and CTAs. */
.hero h1 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.015em; line-height: 1.06; }
.hero h1 .l1 { margin-bottom: 2px; }
.hero h1 .l1 { color: var(--white); display: block; }
.hero h1 .l2 { color: var(--gold); display: block; }
.hero p.lead { font-size: 1.06rem; color: #efeaf9; margin: 24px 0 34px; max-width: 56ch; font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start; }
.hero-props { display: flex; flex-wrap: wrap; margin-top: 40px; border-top: 1px solid var(--line); padding-top: 26px; }
.hero-props div { padding-right: 24px; margin-right: 24px; border-right: 1px solid var(--line); }
.hero-props div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero-props strong { font-size: 1.25rem; font-weight: 900; display: block; color: var(--gold); letter-spacing: 0; white-space: nowrap; }
.hero-props span { font-size: 0.78rem; color: var(--muted); font-weight: 500; white-space: nowrap; }

/* ---------- UNIVERSITY LOCKUP SIZING ----------
   The two supplied logos are white artwork (no filtering needed on the dark ground)
   but they are NOT interchangeable at a single height: UoL is a compact shield above
   four lines of small type (2.6:1), Greenwich is a wide, heavy wordmark (5.3:1).
   Capping both at the same height makes UoL read as the junior partner. So each
   context declares the pair of heights that look equal there, and the two logo
   classes read them — one place to retune, and they can never drift apart. */
img.lg-uol { height: var(--uol-h, 46px); width: auto; display: block; }
img.lg-uog { height: var(--uog-h, 34px); width: auto; display: block; }

/* ---------- AWARDED BY (university logo strip) ----------
   Sits directly under the hero as the page's credibility line. */
.uni-strip { background: var(--bg-2); border-block: 1px solid var(--line); padding: 30px 0; }
.uni-strip-inner { display: flex; align-items: center; justify-content: center; gap: 20px 42px; flex-wrap: wrap; text-align: center; }
.uni-strip-label, .uni-strip-note { font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--muted-soft); }
.uni-strip-logos { display: flex; align-items: center; gap: 44px; flex-wrap: wrap; justify-content: center;
  --uol-h: 58px; --uog-h: 40px; }
.uni-strip-logos img { opacity: .96; }
@media (max-width: 700px) {
  .uni-strip { padding: 24px 0; }
  .uni-strip-logos { gap: 26px; --uol-h: 44px; --uog-h: 30px; }
  .uni-strip-note { display: none; }   /* the campus line repeats in the band below */
}

/* ---------- SECTION ---------- */
section.block { padding: 100px 0; position: relative; }
.section-head { max-width: 66ch; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); font-weight: 800; text-transform: uppercase; margin-bottom: 18px; }
.section-head p { color: var(--muted); font-size: 1.05rem; font-weight: 500; }
.section-head p strong { color: var(--cream); font-weight: 700; }
.alt { background: var(--bg-2); border-block: 1px solid var(--line); }

/* ---------- ENTRY ROUTES (the 200 / 100 split) ----------
   The whole proposition of this page is that there are two doors in, so the two
   cards are given equal weight and the allocation number is the loudest element
   in each — it is the fact a visitor is scanning for. */
.routes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 900px) { .routes { grid-template-columns: 1fr; } }
.route-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 38px 34px; display: flex; flex-direction: column;
  transition: transform .3s ease, border-color .3s ease, background .3s ease; }
.route-card:hover { transform: translateY(-5px); border-color: rgba(242,202,80,.45); background: var(--card-hi); }
/* Fixed head height so both cards' body copy starts on the same line — one route's
   "for" line wraps to two lines and the other's doesn't, which otherwise knocks the
   two cards a row out of step with each other. */
.route-head { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; min-height: 82px; }
.route-n { font-size: clamp(3rem, 6vw, 4.2rem); font-weight: 900; color: var(--gold); line-height: .9;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; flex: none; }
.route-card h3 { font-size: 1.18rem; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
.route-for { font-size: 0.82rem; color: var(--muted-soft); font-weight: 600; margin-top: 5px; }
.route-blurb { color: var(--cream); font-size: 0.98rem; font-weight: 600; padding-bottom: 20px;
  margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.route-list { list-style: none; display: grid; gap: 15px; margin-bottom: 28px; }
.route-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 0.93rem; color: var(--muted); font-weight: 500; }
.route-list li svg { width: 18px; height: 18px; flex: none; stroke: var(--gold); fill: none; stroke-width: 2.2; margin-top: 3px; }
.btn-route { margin-top: auto; align-self: flex-start; }
@media (max-width: 520px) { .btn-route { align-self: stretch; } }

/* benefits */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 34px 30px; transition: transform .3s ease, border-color .3s ease, background .3s ease; }
.card:hover { transform: translateY(-5px); border-color: rgba(242,202,80,.45); background: var(--card-hi); }
.card h3 { font-size: 1.12rem; font-weight: 800; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .01em; }
.card h3::before { content: ""; display: block; width: 30px; height: 2px; background: var(--gold); margin-bottom: 18px; }
.card p { color: var(--muted); font-size: 0.93rem; font-weight: 500; }

/* aerial band */
.band { position: relative; height: 420px; overflow: hidden; border-block: 1px solid var(--line); }
.band img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
/* The aerial is a bright, high-key daytime shot, so the left of the scrim is pushed
   harder than a generic image would need — the caption line sits over the sunlit
   buildings, and at a lighter scrim it loses contrast against cream text. */
.band .overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(25,14,38,0.93) 0%, rgba(25,14,38,0.86) 28%, rgba(25,14,38,0.45) 62%, rgba(25,14,38,0.66)); display: flex; align-items: center; }
.band .overlay .wrap { color: #fff; }
.band .overlay h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; text-transform: uppercase; max-width: 18ch; }
.band .overlay p { color: var(--cream); margin-top: 12px; font-weight: 500; max-width: 40ch; }
@media (max-width: 600px) { .band { height: 360px; } }

/* ---------- DEGREES COVERED ----------
   One column per awarding university, each headed by that university's own
   lockup rather than a text label — the logo IS the column header, which is
   what makes the two lists legible at a glance. */
.degree-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 860px) { .degree-cols { grid-template-columns: 1fr; } }
.degree-col { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 32px; }
/* Fixed head height so the two columns' first degree sits on the same line, even though
   the logos themselves are different heights. */
.degree-col-head { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line);
  height: 84px; display: flex; align-items: center; --uol-h: 56px; --uog-h: 38px; }
@media (max-width: 520px) { .degree-col-head { height: 70px; --uol-h: 44px; --uog-h: 28px; } .degree-col-head img { max-width: 100%; } }
.degree-list { list-style: none; display: grid; gap: 14px; }
.degree-list li { position: relative; padding-left: 24px; font-size: 0.97rem; color: #efeaf9; font-weight: 600; }
.degree-list li::before { content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 2px; background: var(--gold); opacity: .85; }
.degree-note { margin-top: 24px; font-size: 0.86rem; color: var(--muted-soft); font-weight: 500; }

/* ---------- WHAT THE SCHOLARSHIP DOES NOT COVER ----------
   Given real visual weight on purpose. An applicant who only discovers the
   awarding university's fees after being offered a place has been misled by
   omission, so this reads as a peer of the benefit cards above it — not as
   small print tucked under them. Warm amber rather than alarm red: it is a
   clarification, not a warning. */
.scope-note { margin-top: 22px; padding: 30px 32px; border-radius: var(--radius);
  background: rgba(242,202,80,.07); border: 1px solid rgba(242,202,80,.34); }
.scope-note h3 { font-size: 1.02rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .02em; color: var(--gold); margin-bottom: 14px; }
.scope-note h3 em { font-style: normal; text-decoration: underline; text-underline-offset: 3px; }
.scope-note p { color: #efeaf9; font-size: 0.96rem; font-weight: 500; margin-bottom: 12px; max-width: 82ch; }
.scope-note p strong { color: var(--gold-soft); font-weight: 800; }
.scope-note p:last-child { margin-bottom: 0; }
.scope-note .scope-ask { color: var(--muted); font-size: 0.9rem; padding-top: 12px;
  margin-top: 4px; border-top: 1px solid rgba(242,202,80,.2); }
@media (max-width: 760px) { .scope-note { padding: 24px 22px; } }

/* eligibility split */
.split { display: grid; grid-template-columns: 1fr 0.85fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } }
.split-h { font-size: clamp(2rem, 3.8vw, 2.7rem); text-transform: uppercase; font-weight: 800; margin-bottom: 16px; }
.split-lead { color: var(--muted); font-weight: 500; margin-bottom: 30px; max-width: 48ch; }
.check-list { list-style: none; display: grid; gap: 22px; }
.check-list li { display: flex; gap: 16px; align-items: flex-start; }
.check-list .mark { flex: none; width: 30px; height: 30px; border-radius: 7px; background: rgba(242,202,80,.14);
  color: var(--gold); display: grid; place-items: center; font-size: 0.9rem; font-weight: 800; margin-top: 1px; border: 1px solid rgba(242,202,80,.3); }
.check-list li strong { display: block; font-weight: 700; font-size: 1.02rem; margin-bottom: 2px; }
.check-list li span { color: var(--muted); font-size: 0.93rem; font-weight: 500; }
.photo-card { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); }
.photo-card img { display: block; width: 100%; height: 100%; object-fit: cover; min-height: 440px; }
.photo-card .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px;
  background: linear-gradient(to top, rgba(25,14,38,0.92), transparent); font-size: 0.82rem; color: var(--cream); font-weight: 600; }

/* ---------- CAMPUS CARDS ----------
   Both campuses shown at equal weight — the scholarship is worth the same at either,
   so neither photo may read as the primary one. The two source photographs have
   different aspect ratios (1.04:1 and 1.46:1), so the frame is fixed and the image
   is cropped into it; a shared explicit height is what keeps the pair level, since
   letting each photo set its own would tilt the row. */
.campus-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 860px) { .campus-cards { grid-template-columns: 1fr; } }
.campus-card { position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow); background: var(--card); }
.campus-card img { display: block; width: 100%; height: 340px; object-fit: cover; object-position: center 42%; }
@media (max-width: 520px) { .campus-card img { height: 240px; } }
.campus-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 26px 22px;
  background: linear-gradient(to top, rgba(25,14,38,0.96) 18%, rgba(25,14,38,0.72) 58%, transparent); }
.campus-card figcaption strong { display: block; color: var(--gold); font-size: 1.05rem; font-weight: 800; letter-spacing: 0.01em; }
.campus-card figcaption span { display: block; margin-top: 5px; color: var(--cream); font-size: 0.84rem; font-weight: 500; line-height: 1.5; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 34px 30px; border-right: 1px solid var(--line); background: var(--card); }
.step:last-child { border-right: 0; }
@media (max-width: 900px) { .step:nth-child(2) { border-right: 0; } .step:nth-child(1), .step:nth-child(2) { border-bottom: 1px solid var(--line); } }
.step .num { font-size: 1.5rem; font-weight: 900; color: var(--gold); display: block; margin-bottom: 16px; }
.step h3 { font-size: 1rem; font-weight: 800; margin-bottom: 8px; text-transform: uppercase; }
.step p { font-size: 0.9rem; color: var(--muted); font-weight: 500; }

/* ---------- APPLY / FORM ---------- */
.apply-wrap { max-width: 760px; margin-inline: auto; }
.apply-intro { text-align: center; margin-bottom: 40px; }
.apply-intro h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); text-transform: uppercase; font-weight: 800; }
.apply-intro p { color: var(--muted); margin: 16px auto 0; font-weight: 500; max-width: 56ch; }
.apply-mini { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-top: 22px; }
.apply-mini span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: #efeaf9; font-weight: 500; }
.apply-mini svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; stroke-width: 2.2; flex: none; }

/* stepper */
.steps-nav { display: flex; align-items: center; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.sn { display: flex; align-items: center; gap: 10px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-soft); white-space: nowrap; }
.sn-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-strong); font-size: 0.82rem; font-weight: 800; flex: none; transition: color .25s, border-color .25s, background .25s; }
.sn.active { color: var(--gold); }
.sn.active .sn-num { border-color: var(--gold); color: var(--btn-ink); background: var(--gold); }
.sn.done { color: var(--gold); }
.sn.done .sn-num { border-color: var(--gold); color: var(--gold); background: rgba(242,202,80,.14); }
.steps-line { flex: 1; height: 2px; min-width: 14px; background: var(--line-strong); margin: 0 10px; border-radius: 2px; transition: background .3s; }
.steps-line.filled { background: var(--gold); }

.form-step { display: grid; gap: 18px; }
/* The conditional blocks are plain wrappers, so `.form-step`'s row gap doesn't reach the
   fields nested inside them — without this, a revealed branch (Matric marks, transfer
   details) butts straight up against the select that revealed it. `[hidden]`'s
   `display:none !important` still wins when the block is closed. */
#condSecondary, #condTransfer, #condMatric, #condOlevel, #condAlevel, #condScore { display: grid; gap: 18px; }
.form-actions { display: flex; gap: 12px; margin-top: 6px; }
.form-actions .btn-gold { flex: 1; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .row3 { grid-template-columns: 1fr; } }

/* ---------- ENTRY-ROUTE PICKER (step 1) ----------
   A radio group styled as two selectable cards. It sits FIRST in the form because
   the route decides which academic fields step 2 will ask for — asking it last
   would mean re-rendering half the form after the applicant had already filled it. */
.route-pick { border: 0; display: grid; gap: 12px; }
.route-pick legend { font-size: 0.72rem; font-weight: 700; color: var(--muted); letter-spacing: 0.09em;
  text-transform: uppercase; margin-bottom: 4px; padding: 0; }
.route-opt { display: block; cursor: pointer; border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 16px 18px; background: rgba(255,255,255,.03); transition: border-color .2s, background .2s, box-shadow .2s; }
.route-opt:hover { border-color: rgba(242,202,80,.45); background: rgba(255,255,255,.055); }
.route-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.route-opt-body { display: block; padding-left: 32px; position: relative; }
/* custom radio dot */
.route-opt-body::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px;
  border-radius: 50%; border: 1.5px solid var(--line-strong); background: rgba(255,255,255,.04); transition: border-color .2s; }
.route-opt-body::after { content: ""; position: absolute; left: 6px; top: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform .18s ease; }
.route-opt:has(input:checked) { border-color: var(--gold); background: rgba(242,202,80,.09); box-shadow: 0 0 0 3px rgba(242,202,80,.12); }
.route-opt:has(input:checked) .route-opt-body::before { border-color: var(--gold); }
.route-opt:has(input:checked) .route-opt-body::after { transform: scale(1); }
.route-opt:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.route-opt-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 0.95rem; font-weight: 800; color: var(--white); }
.route-opt-count { font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 9px; border-radius: 100px; background: rgba(242,202,80,.16); color: var(--gold); border: 1px solid rgba(242,202,80,.3); }
.route-opt-desc { display: block; font-size: 0.85rem; color: var(--muted); font-weight: 500; margin-top: 4px; }
/* Fallback for browsers without :has() — the dot still fills, the card just doesn't tint. */
@supports not selector(:has(*)) {
  .route-opt input:checked ~ .route-opt-body::before { border-color: var(--gold); }
  .route-opt input:checked ~ .route-opt-body::after { transform: scale(1); }
}

/* duplicate email/phone → OTP reclaim flow */
.dup-notice { display: grid; gap: 12px; padding: 18px; border-radius: 14px;
  background: rgba(229,115,111,.08); border: 1px solid rgba(229,115,111,.32); }
.dup-msg { font-size: 0.88rem; font-weight: 600; color: #f5b0ac; margin: 0; }
.otp-box { display: grid; gap: 10px; padding-top: 4px; border-top: 1px solid rgba(229,115,111,.24); }
.otp-hint { font-size: 0.8rem; color: var(--muted); margin: 0; }
.otp-row { display: flex; gap: 10px; }
.otp-row input { flex: 1; min-width: 0; height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--border);
  background: rgba(255,255,255,.05); color: var(--white); font-size: 1.1rem; letter-spacing: 0.3em; text-align: center; }
.otp-row input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242,202,80,.16); }
.otp-error { font-size: 0.8rem; color: #f5b0ac; font-weight: 600; margin: 0; }
.otp-error:empty { display: none; }
.btn-link { background: none; border: none; padding: 0; color: var(--gold); font-size: 0.8rem; font-weight: 700; text-decoration: underline;
  cursor: pointer; text-align: left; width: fit-content; }
.btn-link:hover { color: var(--white); }
.prev-academics { font-size: 0.82rem; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 16px; margin: 0; }

form#applyForm { display: grid; gap: 18px; padding: clamp(24px, 4vw, 38px); border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  border: 1px solid var(--border); box-shadow: var(--shadow); }
form#applyForm > * { min-width: 0; }   /* stop any child (e.g. the stepper) from forcing horizontal overflow */
.steps-nav { min-width: 0; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label { font-size: 0.72rem; font-weight: 700; color: var(--muted); letter-spacing: 0.09em; text-transform: uppercase; }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; padding: 13px 16px; border-radius: 10px; border: 1px solid var(--line-strong);
  background-color: rgba(255,255,255,.045); color: var(--white); font-family: inherit; font-size: 0.95rem; font-weight: 500; outline: none;
  transition: border-color .2s, background-color .2s, box-shadow .2s; }
.field input, .field select { height: 50px; padding-block: 0; }
.field textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2ca50' stroke-width='2.4' 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 15px center; background-size: 15px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-soft); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); background-color: rgba(255,255,255,.08); box-shadow: 0 0 0 3px rgba(242,202,80,.16); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { box-shadow: 0 0 0 3px rgba(229,115,111,.22); border-color: var(--danger); }
/* Native dropdown popups render on the OS's own surface, so options and optgroup
   labels need explicit dark-on-light colours or they can come out white-on-white. */
.field select option { color: #1b0835; background: #fff; }
.field select optgroup { color: #1b0835; background: #fff; font-weight: 700; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Set when one of the pair is removed (province with no city list to offer), so the
   survivor takes the full width instead of sitting beside a dead half-row. */
.row2--single { grid-template-columns: 1fr; }
@media (max-width: 480px) { .row2 { grid-template-columns: 1fr; } }

/* Small explanatory line under an input — the CNIC mask and the passport format both
   need one sentence of instruction that isn't a placeholder (placeholders vanish the
   moment you start typing, which is exactly when the format rule matters). */
.field-hint { font-size: 0.74rem; color: var(--muted-soft); font-weight: 500; margin: 0; line-height: 1.5; }

/* "I don't have a CNIC number" — a checkbox that reads as a sentence, not a form control
   bolted onto one. Sized to the 44px touch target the buttons use. */
.checkline { display: flex; align-items: center; gap: 11px; cursor: pointer;
  font-size: 0.88rem; font-weight: 600; color: var(--cream); min-height: 44px;
  user-select: none; margin-top: -4px; }
.checkline input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkline span { position: relative; padding-left: 30px; }
.checkline span::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--line-strong);
  background: rgba(255,255,255,.04); transition: border-color .2s, background .2s; }
/* Tick drawn as a rotated L so it needs no icon font or SVG. */
.checkline span::after { content: ""; position: absolute; left: 7px; top: 50%;
  width: 5px; height: 10px; margin-top: -6px; border: solid var(--btn-ink);
  border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transform-origin: center;
  transition: transform .16s ease; }
.checkline:hover span::before { border-color: rgba(242,202,80,.55); }
.checkline input:checked ~ span::before { background: var(--gold); border-color: var(--gold); }
.checkline input:checked ~ span::after { transform: rotate(45deg) scale(1); }
.checkline input:focus-visible ~ span::before { outline: 2px solid var(--gold); outline-offset: 3px; }

/* CNIC reads as a number, so give it tabular figures and a little tracking — it makes a
   13-digit string scannable and the mask's dashes land in a predictable place. */
#cnic, #passportNo { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
form#applyForm .btn { margin-top: 4px; }
.form-note { font-size: 0.74rem; color: var(--muted-soft); text-align: center; font-weight: 500; }
.form-error { font-size: 0.82rem; color: #f5b0ac; text-align: center; font-weight: 600; }
.form-error:empty { display: none; }
.form-success { display: none; padding: 30px 24px; border-radius: 16px; background: rgba(242,202,80,.12); border: 1px solid rgba(242,202,80,.4); color: var(--cream); font-size: 0.98rem; text-align: center; font-weight: 600; line-height: 1.6; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 10px; max-width: 860px; margin-inline: auto; }
details { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 4px 28px; transition: border-color .25s, background .25s; }
details[open] { border-color: rgba(242,202,80,.35); background: var(--card-hi); }
summary { list-style: none; cursor: pointer; padding: 22px 0; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 1.5rem; color: var(--gold); transition: transform .25s; font-weight: 300; line-height: 1; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 0 22px; color: var(--muted); font-size: 0.94rem; font-weight: 500; }
details p a { color: var(--gold); text-decoration: underline; }

/* ---------- FOOTER ---------- */
footer { background: #120a1c; border-top: 1px solid var(--line); padding: 60px 0 32px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 44px; padding-bottom: 38px; border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; gap: 30px; } }
.foot-logos { gap: 16px; margin-bottom: 20px; }
.foot-logos img.dite { height: 144px; }
.foot-logos img.partner { height: 66px; }
.foot-logos .x { font-size: 1.8rem; margin: 0 5px; }
.foot-unis { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; margin-top: 24px;
  padding-top: 22px; border-top: 1px solid var(--line); --uol-h: 42px; --uog-h: 28px; }
.foot-unis img { opacity: .8; }
footer h4 { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; font-weight: 700; }
footer ul { list-style: none; display: grid; gap: 11px; font-size: 0.9rem; color: var(--muted); }
footer ul a { color: var(--muted); font-weight: 500; }
footer ul a:hover { color: var(--white); }
footer p.tagline { color: var(--muted); font-size: 0.92rem; font-weight: 500; max-width: 44ch; }
.foot-bottom { display: flex; justify-content: space-between; padding-top: 26px; font-size: 0.8rem; color: var(--muted-soft); flex-wrap: wrap; gap: 12px; font-weight: 500; }

/* gentle entrance */
@keyframes riseIn { from { transform: translateY(20px); } to { transform: none; } }
.reveal { opacity: 1; transform: none; }
.reveal.in { animation: riseIn .7s ease both; }
@media (prefers-reduced-motion: reduce) { .reveal.in { animation: none; } }

/* ---------- MOBILE / TABLET (landing) ---------- */
@media (max-width: 760px) {
  .hero { display: block; min-height: auto; padding: 0; background: var(--bg); }
  .hero-bg, .hero-overlay { display: none; }
  .hero-inner { max-width: 100%; }
  .hero .wrap { padding-top: 46px; padding-bottom: 34px; }
  .hero-photo-m { display: block; width: 100%; height: 300px; object-fit: cover; object-position: center 56%; }
  .hero-collab { gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
  .hero-collab img.dite { height: 81px; }
  .hero-collab img.partner { height: 46px; }
  .hero-collab .x { font-size: 1.8rem; margin: 0 5px; }
  .hero-actions { gap: 12px; }
  .hero-actions .btn { width: 100%; }
  section.block { padding: 64px 0; }
  .section-head { margin-bottom: 34px; }
  .route-card { padding: 30px 26px; }
  .degree-col { padding: 28px 24px; }
  .band { height: 300px; }
  .foot-logos { flex-wrap: wrap; }
  .foot-logos img.dite { height: 84px; }
  .foot-logos img.partner { height: 44px; }
  .foot-unis img { height: 26px; }
  footer p.tagline { max-width: 100%; }
  /* Metric row stays a tidy grid on mobile (never a tall vertical stack) */
  .hero-props { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; border-top: 1px solid var(--line); margin-top: 32px; padding-top: 24px; }
  .hero-props div { border-right: 0; margin-right: 0; padding-right: 0; }
}
@media (max-width: 540px) {
  .nav-inner { gap: 12px; }
  .nav-collab { gap: 10px; }
  .nav-collab .x { font-size: 1.15rem; margin: 0 1px; }
  .nav-cta { white-space: nowrap; padding: 8px 10px; font-size: 0.74rem; }
  .route-head { gap: 14px; }
  .form-actions { flex-wrap: wrap; }
  .form-actions .btn-ghost, .form-actions .btn-gold { flex: 1 1 100%; }
  /* Safety padding so the primary CTA never hugs the browser's bottom chrome */
  #apply { padding-bottom: 96px; }
  /* Compact "dot" stepper on phones (3 full labels don't fit → they force overflow) */
  .sn { font-size: 0; gap: 0; }
  .sn-num { font-size: 0.82rem; }
  .steps-line { margin: 0 8px; }
}

/* =====================================================================
   ADMIN DASHBOARD
   ===================================================================== */
.dash-body { min-height: 100vh; }

/* login gate */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(420px, 100%); background: var(--glass); border: 1px solid var(--border);
  border-radius: 18px; padding: 38px 34px; box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.login-card .lock { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(242,202,80,.14); border: 1px solid rgba(242,202,80,.3); color: var(--gold); margin-bottom: 20px; font-size: 1.2rem; }
.login-card h1 { font-size: 1.4rem; text-transform: uppercase; margin-bottom: 6px; }
.login-card p.sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 26px; }
.login-card .field { margin-bottom: 16px; }
.login-card .btn { width: 100%; margin-top: 8px; }
.login-hint { margin-top: 18px; font-size: 0.76rem; color: var(--muted-soft); text-align: center; }

/* top bar */
.dash-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px clamp(16px, 4vw, 40px); background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.dash-top .brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .02em; }
.dash-top .brand .dot { width: 30px; height: 30px; border-radius: 8px; background: var(--gold); color: var(--btn-ink); display: grid; place-items: center; font-weight: 900; font-size: .78rem; }
.dash-user { display: flex; align-items: center; gap: 14px; font-size: 0.84rem; color: var(--muted); }
.role-chip { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 100px; background: rgba(242,202,80,.14); color: var(--gold); border: 1px solid rgba(242,202,80,.3); }

/* tabs */
.dash-tabs { display: flex; gap: 4px; padding: 0 clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--border);
  background: var(--bg); position: sticky; top: 59px; z-index: 30; overflow-x: auto; }
.dash-tabs a { padding: 16px 18px; font-size: 0.82rem; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; }
.dash-tabs a:hover { color: var(--white); }
.dash-tabs a.active { color: var(--gold); border-bottom-color: var(--gold); }

.dash-main { padding: clamp(20px, 4vw, 40px); max-width: 1280px; margin-inline: auto; }
.dash-h { font-size: 1.5rem; text-transform: uppercase; margin-bottom: 4px; }
.dash-sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 28px; }

.panel { background: var(--glass); border: 1px solid var(--border); border-radius: 16px; padding: 22px; }
.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 26px; }
.stat { background: var(--glass); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; }
.stat b { display: block; font-size: 2rem; font-weight: 900; color: var(--gold); line-height: 1.1; }
.stat span { font-size: 0.74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
/* A stat whose value is a fraction of a fixed allocation (e.g. 12 / 200 awards) */
.stat b small { font-size: 0.9rem; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .charts { grid-template-columns: 1fr; } }
.charts .panel.wide { grid-column: 1 / -1; }
.charts h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 16px; font-weight: 800; }
.chart-holder { position: relative; height: 260px; }

/* filters + table */
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 20px; }
.filters .field { min-width: 150px; }
.filters .field label { margin-bottom: 6px; }
.filters input, .filters select { height: 44px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; }
/* Ten columns (the GEMS table had eight — route and university are added here), so the
   floor is raised to stop name/degree cells squeezing into four-line wraps. The wrapper
   scrolls horizontally below this. */
table.leads { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 1180px; }
table.leads td:nth-child(4) { min-width: 150px; }   /* name — keep it off two lines */
table.leads th { text-align: left; padding: 14px 16px; background: var(--bg-2); color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.leads td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: #ece7f6; vertical-align: middle; }
table.leads tbody tr { cursor: pointer; transition: background .15s; }
table.leads tbody tr:hover { background: rgba(255,255,255,.035); }
table.leads tr:last-child td { border-bottom: 0; }

/* Overview's daily-count table — informational only, rows aren't clickable */
table.daily-table { min-width: 0; max-width: 420px; }
table.daily-table tbody tr { cursor: default; }
table.daily-table td:last-child, table.daily-table th:last-child { text-align: right; }
table.daily-table tfoot td { padding: 13px 16px; font-weight: 800; color: var(--gold); border-top: 2px solid var(--border); }
.badge { display: inline-block; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: 100px; }
.badge.Incomplete { background: rgba(229,115,111,.16); color: #f0a6a2; border: 1px solid rgba(229,115,111,.3); }
.badge.Screening { background: rgba(242,202,80,.16); color: var(--gold); border: 1px solid rgba(242,202,80,.32); }
.badge.Accepted, .badge.Interview { background: rgba(87,201,139,.16); color: #79d8a5; border: 1px solid rgba(87,201,139,.3); }
/* entry-route chip in the records table — the split that matters most to staff here */
.route-chip { display: inline-block; font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 4px 10px; border-radius: 100px; white-space: nowrap;
  background: rgba(255,255,255,.06); color: var(--muted); border: 1px solid var(--border); }
.route-chip.rc-first-year-entry { background: rgba(138,109,240,.16); color: #b3a0f7; border-color: rgba(138,109,240,.32); }
.route-chip.rc-transfer-entry   { background: rgba(77,182,216,.16);  color: #7fd2ec; border-color: rgba(77,182,216,.32); }

/* communications team — per-lead outreach status (separate from the admissions pipeline) */
.contact-cell form { display: contents; }
.contact-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font-family: inherit; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 6px 26px 6px 12px; border-radius: 100px; min-height: 0;
  background-repeat: no-repeat; background-position: right 10px center; background-size: 9px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a89bc4' stroke-width='1.5'/%3E%3C/svg%3E");
}
.contact-select:disabled { cursor: default; opacity: .8; }
.contact-select:focus { outline: none; box-shadow: 0 0 0 3px rgba(242,202,80,.22); }
/* Colour language shared by the editable per-row selects and the read-only summary
   pills (Overview) — one rule per status so the two can never drift apart. */
.contact-select.cs-not-contacted,  .cs-pill.cs-not-contacted  { background-color: rgba(255,255,255,.06); color: var(--muted); border: 1px solid var(--border); }
.contact-select.cs-call-done,      .cs-pill.cs-call-done      { background-color: rgba(77,182,216,.16);  color: #7fd2ec;  border: 1px solid rgba(77,182,216,.3); }
.contact-select.cs-follow-up,      .cs-pill.cs-follow-up      { background-color: rgba(242,202,80,.16);  color: var(--gold); border: 1px solid rgba(242,202,80,.32); }
.contact-select.cs-not-interested, .cs-pill.cs-not-interested { background-color: rgba(229,115,111,.16); color: #f0a6a2;  border: 1px solid rgba(229,115,111,.3); }
.contact-select.cs-no-response,    .cs-pill.cs-no-response    { background-color: rgba(215,138,208,.16); color: #e3aede;  border: 1px solid rgba(215,138,208,.3); }
.contact-select.cs-converted,      .cs-pill.cs-converted      { background-color: rgba(87,201,139,.16);  color: #79d8a5;  border: 1px solid rgba(87,201,139,.3); }
.contact-select option { background: var(--bg); color: #fff; text-transform: none; }

/* Contact-status summary (Overview, admin only) — static pills + a counts table.
   The .cs-pill base carries a readable neutral fallback, so an unrecognised status
   (only reachable via a direct DB write) still renders legibly instead of invisibly. */
.cs-pill { display: inline-block; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
           padding: 5px 12px; border-radius: 100px; white-space: nowrap;
           background-color: rgba(255,255,255,.06); color: var(--muted); border: 1px solid var(--border); }
table.cs-summary { min-width: 0; max-width: 560px; }
table.cs-summary tbody tr { cursor: default; }
table.cs-summary th:not(:first-child), table.cs-summary td:not(:first-child) { text-align: right; }
table.cs-summary tfoot td { padding: 13px 16px; font-weight: 800; color: var(--gold); border-top: 2px solid var(--border); }

/* Applicants by City — searchable/sortable table with inline count bars (Overview, admin) */
.city-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.city-controls input { flex: 1; min-width: 200px; height: 42px; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px; color: #fff; padding: 0 14px; font-family: inherit; font-size: 0.9rem; }
.city-controls input::placeholder { color: var(--muted); }
.city-controls input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242,202,80,.2); }
table.city-table { min-width: 560px; }
table.city-table tbody tr { cursor: default; }
table.city-table th { cursor: pointer; user-select: none; }
table.city-table th.num, table.city-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.city-table th[aria-sort] { color: var(--gold); }
table.city-table td.rank { color: var(--muted); }
table.city-table td.city-name { font-weight: 600; color: #ece7f6; }
table.city-table tbody tr:first-child td.city-name { color: var(--gold); }
.app-cell { position: relative; min-width: 150px; }
.app-bar { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); height: 20px;
  border-radius: 5px; background: rgba(242,202,80,.20); z-index: 0; }
.app-val { position: relative; z-index: 1; font-weight: 700; }
table.city-table tfoot td { padding: 13px 16px; font-weight: 800; color: var(--gold); border-top: 2px solid var(--border); }

/* Marketing QR panel — the code itself sits on white because a QR needs a real
   light module colour to scan reliably; the surrounding chrome stays dark. */
.qr-panel { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.qr-code { background: #fff; padding: 10px; border-radius: 12px; line-height: 0; flex: none; }
.qr-code svg { display: block; width: 190px; height: 190px; }
.qr-meta { flex: 1; min-width: 260px; }
.qr-meta code { background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 6px; font-size: .78rem; word-break: break-all; }
.qr-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (max-width: 560px) { .qr-panel { gap: 18px; } .qr-code svg { width: 150px; height: 150px; } }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.pager .pages { display: flex; gap: 6px; flex-wrap: wrap; }
.pager a, .pager span.cur { padding: 8px 13px; border-radius: 8px; border: 1px solid var(--border); font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.pager a:hover { color: var(--white); border-color: var(--gold); }
.pager span.cur { background: var(--gold); color: var(--btn-ink); border-color: var(--gold); }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }

/* compact inline password-change disclosure (per user row) — reuses <details> but
   without the FAQ section's bulky padding/border/plus-icon treatment */
.pw-change { background: none; border: none; padding: 0; margin-top: 6px; transition: none; }
.pw-change[open] { background: none; border: none; }
.pw-change summary { padding: 0; font-size: 0.74rem; font-weight: 700; color: var(--muted); display: inline-flex; }
.pw-change summary::after { content: none; }
.pw-change summary:hover { color: var(--gold); }
.pw-change form { margin-top: 8px; display: flex; gap: 6px; }
.pw-change input[type="password"] { height: 36px; padding: 0 10px; font-size: 0.8rem; width: 150px; }

/* activity / audit log */
.log-table td { vertical-align: top; }
.log-when b { display: block; font-weight: 700; white-space: nowrap; }
.log-when span { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.log-user { font-weight: 700; }
.log-details b { display: block; font-weight: 700; }
.log-details span { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.log-ip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.log-tag { display: inline-block; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: 100px; white-space: nowrap; }
.log-tag.log-ok      { background: rgba(87,201,139,.16);  color: #79d8a5; border: 1px solid rgba(87,201,139,.3); }
.log-tag.log-info    { background: rgba(77,182,216,.16);  color: #7fd2ec; border: 1px solid rgba(77,182,216,.3); }
.log-tag.log-warn    { background: rgba(242,202,80,.16);  color: var(--gold); border: 1px solid rgba(242,202,80,.32); }
.log-tag.log-danger  { background: rgba(229,115,111,.16); color: #f0a6a2; border: 1px solid rgba(229,115,111,.3); }
.log-tag.log-neutral { background: rgba(255,255,255,.06); color: var(--muted); border: 1px solid var(--border); }

.btn-sm { min-height: 40px; padding: 10px 18px; font-size: 0.8rem; }
.muted-note { color: var(--muted-soft); font-size: 0.82rem; }
.empty { padding: 40px; text-align: center; color: var(--muted); }

/* user + cms forms */
.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.stack { display: grid; gap: 16px; }
.flash { padding: 13px 16px; border-radius: 10px; font-size: 0.86rem; font-weight: 600; margin-bottom: 20px; }
.flash.ok { background: rgba(87,201,139,.14); color: #83ddab; border: 1px solid rgba(87,201,139,.3); }
.flash.err { background: rgba(229,115,111,.14); color: #f0a6a2; border: 1px solid rgba(229,115,111,.3); }
.cms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .cms-grid { grid-template-columns: 1fr; } }
.color-row { display: flex; align-items: center; gap: 10px; }
.color-row input[type="color"] { width: 48px; height: 44px; padding: 4px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.05); cursor: pointer; }
.color-row input[type="text"] { flex: 1; }

/* modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(10,5,18,0.6); backdrop-filter: blur(6px); }
.modal-backdrop.open { display: flex; }
.modal { width: min(640px, 100%); max-height: 90vh; overflow-y: auto; background: #1c1230; border: 1px solid var(--border);
  border-radius: 18px; padding: 30px; box-shadow: var(--shadow); }
.modal-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.modal-head h3 { font-size: 1.2rem; text-transform: uppercase; }
.modal-close { background: none; border: 1px solid var(--border); color: var(--muted); width: 36px; height: 36px; border-radius: 9px; cursor: pointer; font-size: 1.1rem; }
.modal-close:hover { color: var(--white); border-color: var(--gold); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
@media (max-width: 560px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-grid .full { grid-column: 1 / -1; }
.dt { font-size: 0.66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-soft); font-weight: 800; margin-bottom: 5px; }
.dd { font-size: 0.94rem; color: #ece7f6; word-break: break-word; }

/* Modal header actions — the Edit toggle sits beside the close button so switching
   between the summary and the editor never moves the dialog's controls around. */
.modal-head-actions { display: flex; align-items: center; gap: 10px; flex: none; }
/* The admin editor is now the place CNIC, marks and the personal statement are entered
   (the public form no longer asks for them), so mark that group visually. */
.admin-fill { border: 1px dashed rgba(242,202,80,.4); border-radius: 12px; padding: 18px 18px 20px;
  background: rgba(242,202,80,.045); display: grid; gap: 16px; }
.admin-fill-head { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--gold); }
.admin-fill-head span { display: block; text-transform: none; letter-spacing: 0; font-weight: 500;
  font-size: .78rem; color: var(--muted); margin-top: 5px; }

/* The scholarship is named after a person, so the credit line sits directly under the
   hero title where the name is introduced — quieter than the subtitle above it. */
.honouree { font-size: 0.86rem; color: var(--muted); font-weight: 500; margin-top: 10px; max-width: 52ch; }