/* ============================================================
   ABIA STATE LEADERSHIP ACADEMY - design system
   Palette: Abia crest red & black, certificate gold accent
   Type:    Zilla Slab (display) / Public Sans (body)
   Rule:    border-radius never exceeds 6px. Badges are square.
   ============================================================ */

:root {
    --red: #0B3B78;
    --red-deep: #072A57;
    --red-soft: #E7F0FB;
    --black: #101922;
    --ink: #16202E;
    --muted: #5D6B7D;
    --gold: #4FA3E3;
    --gold-soft: #E8F3FC;
    --paper: #F2F7FD;
    --hero-bg: #0A3169;
    --card: #FFFFFF;
    --line: #DCE6F2;
    --ok: #2E7D46;
    --ok-soft: #E7F2EA;
    --warn: #9A6B0B;
    --warn-soft: #FBF3DE;
    --danger: #B3261E;
    --danger-soft: #F9E7E5;
    --r: 6px;
    --shadow: 0 1px 2px rgba(11,26,45,.06), 0 6px 18px rgba(11,26,45,.07);
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; color: var(--black); margin: 0 0 .4rem; line-height: 1.15; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-deep); }
img { max-width: 100%; }

/* ---------- signature: certificate ribbon ---------- */
.ala-ribbon { height: 10px; display: flex; background: var(--red-deep); }
.ala-ribbon span:first-child { flex: 1; background: var(--red-deep); }
.ala-ribbon span:last-child { width: 34%; background: var(--red-deep); }

/* guilloche-style security print for heroes */
.ala-guilloche {
}

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
/* Content columns line up with the header: same 1120px track as .wrap, so a page
   body starts under the logo and ends level with the SignIn button. Below that
   width nothing binds and the mobile layout is untouched. */
.wrap-narrow { max-width: 940px; }

/* Public header now matches the register masthead: dark blue rather than white,
   so the whole app reads as one piece. The ribbon above it is the same colour,
   which makes the two merge into a single band. */
.topbar {
    background: var(--hero-bg);
    border-bottom: 1px solid rgba(255,255,255,.10);
    position: sticky; top: 0; z-index: 900;
}
.topbar-inner { display: flex; align-items: center; gap: 12px; min-height: 60px; }
/* The brand is a link, so the generic "a:hover { color: var(--red-deep) }" above
   applied to it - and --red-deep is #072A57, a near-black navy sitting on a navy
   bar. The wordmark effectively vanished on hover. It has a colour of its own, so
   it needs a hover of its own; :focus too, or the same thing happens to anyone
   tabbing through. */
.brand,
.brand:hover,
.brand:focus,
.brand:active { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
/* The children carry their own colours and must not be dragged along either. */
.brand:hover .brand-sub,
.brand:focus .brand-sub { color: #A8C4E4; }
.brand img { height: 40px; width: auto; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; line-height: 1.1; }
.brand-sub { display: block; font-family: var(--font-body); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #A8C4E4; }

/* ---------- buttons ---------- */
.btn-ala, .btn-ala-outline, .btn-ala-dark, .btn-ala-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-body); font-weight: 600; font-size: .92rem;
    border-radius: var(--r); border: 1px solid transparent;
    padding: 11px 20px; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
    text-decoration: none; line-height: 1.2;
}
.btn-ala { background: var(--red); color: #fff; }
.btn-ala:hover { background: var(--red-deep); color: #fff; }
.btn-ala-dark { background: var(--black); color: #fff; }
.btn-ala-dark:hover { background: #000; color: var(--gold); }
.btn-ala-outline { background: transparent; color: var(--red); border-color: var(--red); }
.btn-ala-outline:hover { background: var(--red-soft); }
.btn-ala-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ala-ghost:hover { border-color: var(--ink); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 14px; font-size: .84rem; }
button:disabled, .btn-ala[disabled] { opacity: .55; pointer-events: none; }

/* ---------- forms ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--ink); margin-bottom: 3px; }
.field label .req { color: var(--red); }
.form-control, .form-select, textarea.form-control {
    border: 1px solid var(--line); border-radius: var(--r);
    padding: 10px 12px; font-size: .95rem; font-family: var(--font-body);
    background: #fff; color: var(--ink); width: 100%;
}
.form-control:focus, .form-select:focus {
    outline: none; border-color: #8FB0D8;
    box-shadow: 0 0 0 3px rgba(11,59,120,.09);
}
.hint { font-size: .76rem; color: var(--muted); margin-top: 4px; }
.field.invalid .form-control, .field.invalid .form-select { border-color: var(--danger); }
.field .err { display: none; font-size: .76rem; color: var(--danger); margin-top: 4px; }
.field.invalid .err { display: block; }

/* ---------- cards ---------- */
.card-ala {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--shadow);
}
.card-ala .card-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-ala .card-body { padding: 18px; }
.card-title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; margin: 0; }

/* ---------- badges: SQUARE, never pills ---------- */
.tag {
    display: inline-block; padding: 3px 9px; font-size: .72rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; border-radius: 0;
    border: 1px solid transparent;
}
.tag-red { background: var(--red-soft); color: var(--red-deep); border-color: #C2D6EC; }
.tag-dark { background: var(--black); color: #fff; }
.tag-gold { background: var(--gold-soft); color: var(--warn); border-color: #BBDCF5; }
/* application-number badge in the header - reads as portal identity, not a status */
.tag-appno { background: var(--red-soft); color: var(--red-deep); border-color: #BFD5EE; }
.tag-ok { background: var(--ok-soft); color: var(--ok); border-color: #C4DFCC; }
.tag-warn { background: var(--warn-soft); color: var(--warn); border-color: #C3E0F6; }
.tag-danger { background: var(--danger-soft); color: var(--danger); border-color: #C6D9EE; }
.tag-muted { background: #E6EEF8; color: var(--muted); border-color: var(--line); }

/* ---------- toast ---------- */
#alaToastHost { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 4000; width: min(94vw, 420px); display: flex; flex-direction: column; gap: 8px; }
.ala-toast {
    background: var(--black); color: #fff; border: 1px solid transparent;
    border-radius: var(--r); padding: 12px 16px; font-size: .88rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    animation: alaToastIn .22s ease-out;
}
/* The whole toast carries the outcome, not a 4px stripe on a dark slab -
   a thin coloured edge is easy to miss and reads as decoration. Light
   background with dark text of the same hue stays legible and does not
   shout. */
.ala-toast.ok  { background: #E7F7EE; border: 1px solid #9BDCBB; border-left: 1px solid #9BDCBB;
                 color: #0E5132; box-shadow: 0 8px 22px rgba(14, 81, 50, .16); }
.ala-toast.err { background: #FDECEC; border: 1px solid #F2B5B5; border-left: 1px solid #F2B5B5;
                 color: #8B1F1F; box-shadow: 0 8px 22px rgba(139, 31, 31, .16); }

@keyframes alaToastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- modal (custom, no native dialogs) ---------- */
.ala-modal-backdrop {
    position: fixed; inset: 0; background: rgba(11,26,45,.55); z-index: 3000;
    display: none; align-items: flex-end; justify-content: center; padding: 0;
}
.ala-modal-backdrop.open { display: flex; }
.ala-modal {
    background: #fff; width: 100%; max-width: 560px; border-radius: 6px 6px 0 0;
    max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
    animation: alaSheetUp .22s ease-out;
}
@keyframes alaSheetUp { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.ala-modal-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.ala-modal-head h3 { margin: 0; font-size: 1.05rem; }
.ala-modal-x { background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 6px; }
.ala-modal-body { padding: 18px; overflow-y: auto; }
.ala-modal-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }
@media (min-width: 640px) {
    .ala-modal-backdrop { align-items: center; padding: 20px; }
    .ala-modal { border-radius: var(--r); }
}

/* ---------- loading overlay ---------- */
#alaBusy { position: fixed; inset: 0; background: rgba(250,247,241,.72); z-index: 5000; display: none; align-items: center; justify-content: center; }
#alaBusy.open { display: flex; }
.ala-spin { width: 42px; height: 42px; border: 4px solid var(--line); border-top-color: var(--red); border-radius: 50%; animation: alaSpin .8s linear infinite; }
@keyframes alaSpin { to { transform: rotate(360deg); } }

/* ---------- wizard ---------- */
.wizard-steps { display: flex; gap: 6px; margin: 18px 0 6px; }
.wstep {
    flex: 1; text-align: center; padding: 8px 2px 10px; position: relative;
    border-top: 4px solid var(--line); color: var(--muted); font-size: .68rem;
    font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.wstep .n {
    display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--line); font-family: var(--font-display);
    font-size: .82rem; margin-bottom: 3px; border-radius: 0;
}
.wstep.active { border-top-color: var(--red); color: var(--red-deep); }
.wstep.active .n { background: var(--red); border-color: var(--red); color: #fff; }
.wstep.done { border-top-color: var(--black); color: var(--black); }
.wstep.done .n { background: var(--black); border-color: var(--black); color: var(--gold); }
.wstep .lbl { display: none; }
@media (min-width: 720px) { .wstep .lbl { display: block; } }

.wizard-pane { display: none; }
.wizard-pane.active { display: block; animation: alaFade .2s ease-out; }
@keyframes alaFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.wizard-nav {
    position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--line);
    padding: 12px 16px; display: flex; gap: 10px; z-index: 800;
    margin: 24px -16px 0;
}
.wizard-nav .btn-ala { flex: 1; }
@media (min-width: 720px) {
    .wizard-nav { position: static; margin: 24px 0 0; padding: 16px 0 0; background: transparent; }
    .wizard-nav .btn-ala { flex: 0 0 auto; min-width: 170px; margin-left: auto; }
}

.section-label {
    font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--red-deep); border-bottom: 2px solid var(--red); display: inline-block;
    padding-bottom: 3px; margin: 8px 0 14px;
}

/* passport uploader */
.passport-box {
    width: 132px; height: 158px; border: 2px dashed #B9C8DB; border-radius: var(--r);
    background: #fff; display: flex; align-items: center; justify-content: center;
    text-align: center; color: var(--muted); font-size: .74rem; cursor: pointer;
    overflow: hidden; position: relative;
}
.passport-box img { width: 100%; height: 100%; object-fit: cover; }
.passport-box.has { border-style: solid; border-color: var(--red); }

/* school level blocks */
.level-block { border: 1px solid var(--line); border-radius: var(--r); background: #fff; margin-bottom: 14px; }
.level-block .lb-head {
    padding: 11px 14px; background: var(--paper); border-bottom: 1px solid var(--line);
    font-family: var(--font-display); font-weight: 600; display: flex; justify-content: space-between; align-items: center;
}
.level-block .lb-body { padding: 14px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    border: 1px solid var(--line); background: #fff; border-radius: var(--r);
    padding: 8px 12px; font-size: .84rem; cursor: pointer; user-select: none;
}
.chip.on { background: var(--black); border-color: var(--black); color: #fff; }

/* subject/grade rows */
.subj-row { display: grid; grid-template-columns: 1fr 86px 34px; gap: 8px; margin-bottom: 8px; }
.subj-remove { border: 1px solid var(--line); background: #fff; color: var(--danger); border-radius: var(--r); cursor: pointer; font-weight: 700; }

/* review list */
.review-dl { margin: 0; }
.review-dl > div { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: .88rem; }
.review-dl dt { flex: 0 0 44%; color: var(--muted); margin: 0; font-weight: 600; }
.review-dl dd { flex: 1; margin: 0; color: var(--black); }

/* ---------- applicant dashboard ---------- */
.dash-hero {
    background: var(--hero-bg); color: #fff; border-radius: var(--r);
    padding: 22px 20px; position: relative; overflow: hidden;
}
.dash-hero h2 { color: #fff; }
.dash-appno { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .06em; color: var(--gold); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 12px; padding: 0 0 20px; position: relative; }
.timeline li::before {
    content: ""; position: absolute; left: 11px; top: 26px; bottom: 0; width: 2px; background: var(--line);
}
.timeline li:last-child::before { display: none; }
.tl-dot {
    flex: 0 0 24px; height: 24px; border: 2px solid var(--line); background: #fff;
    display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700;
    z-index: 1; border-radius: 0;
}
.timeline li.done .tl-dot { background: var(--black); border-color: var(--black); color: var(--gold); }
.timeline li.now .tl-dot { background: var(--red); border-color: var(--red); color: #fff; }
.tl-txt strong { display: block; font-size: .92rem; }
.tl-txt span { font-size: .78rem; color: var(--muted); }

/* ---------- admin shell ---------- */
.admin-body { background: #EAF1FA; }
.admin-shell { display: flex; min-height: 100vh; }
.admin-side {
    width: 244px; background: var(--black); color: #C3D3E6; flex-shrink: 0;
    position: fixed; inset: 0 auto 0 0; transform: translateX(-100%);
    transition: transform .2s ease-out; z-index: 2000; display: flex; flex-direction: column;
}
.admin-side.open { transform: none; }
.admin-side .as-brand { padding: 18px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.09); display: flex; gap: 10px; align-items: center; }
.admin-side .as-brand img { height: 36px; }
.admin-side .as-brand b { font-family: var(--font-display); color: #fff; font-size: .95rem; line-height: 1.15; display: block; }
.admin-side .as-brand small { color: var(--gold); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; }
/* flex:1 lets the nav take the free space; min-height:0 + overflow-y let it SCROLL
   internally instead of growing past the viewport and pushing the footer (and the
   Sign out link) off-screen. */
.admin-nav { padding: 12px 10px; flex: 1; min-height: 0; overflow-y: auto; }
.admin-nav a {
    display: flex; align-items: center; gap: 10px; color: #B9C8DB; padding: 11px 12px;
    border-radius: var(--r); font-size: .9rem; font-weight: 500; margin-bottom: 2px;
}
.admin-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-nav a.on { background: var(--red); color: #fff; }
.admin-nav a .ic { width: 20px; text-align: center; }

/* Impersonation banner: shown only when an admin is viewing an applicant's portal
   ("view as"). Deliberately loud and unlike the applicant palette so it can never be
   mistaken for part of the portal, and sticky so the way back is always in reach. */
.imp-bar { position: sticky; top: 0; z-index: 3000; background: #92400E; color: #fff; }
.imp-inner {
    max-width: 1120px; margin: 0 auto; padding: 8px 16px;
    display: flex; align-items: center; gap: 10px; font-size: .84rem;
}
.imp-dot { width: 8px; height: 8px; border-radius: 50%; background: #FCD34D; flex-shrink: 0; }
.imp-txt { flex: 1; }
.imp-exit {
    background: #fff; color: #92400E; border: 0; border-radius: 6px;
    padding: 5px 12px; font-weight: 700; font-size: .8rem; cursor: pointer; flex-shrink: 0;
}
.imp-exit:hover { background: #FEF3C7; }
@media screen and (max-width: 640px) {
    .imp-inner { flex-wrap: wrap; }
    .imp-txt { flex: 1 1 100%; order: 2; }
}

/* Collapsible nav group (e.g. CBT). Keeps the sidebar short enough that the
   footer - and the Sign out link - stays visible without scrolling. */
.nav-group { margin-bottom: 2px; }
.nav-group-head {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: 0; cursor: pointer; text-align: left;
    color: #B9C8DB; padding: 11px 12px; border-radius: var(--r);
    font-size: .9rem; font-weight: 500; font-family: inherit;
}
.nav-group-head:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-group-head .ic { width: 20px; text-align: center; }
.nav-group-head .ngh-label { flex: 1; }
.nav-group-head .ngh-caret { font-size: .7rem; transition: transform .15s ease; opacity: .8; }
.nav-group.open .nav-group-head .ngh-caret { transform: rotate(90deg); }
/* A group holding the current page reads as active even while collapsed. */
.nav-group.has-active .nav-group-head { color: #fff; }
.nav-group-body { display: none; margin: 2px 0 4px; }
.nav-group.open .nav-group-body { display: block; }
/* Indent children so the hierarchy is obvious. */
.nav-group-body a { padding-left: 30px; font-size: .86rem; }
.admin-side .as-foot { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.09); font-size: .78rem; flex-shrink: 0; }
.admin-side .as-foot a { color: var(--gold); }

.admin-scrim { position: fixed; inset: 0; background: rgba(11,26,45,.5); z-index: 1900; display: none; }
.admin-scrim.open { display: block; }

.admin-main { flex: 1; min-width: 0; }
.admin-top {
    background: #fff; border-bottom: 1px solid var(--line); padding: 0 16px;
    min-height: 58px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 850;
}
.admin-top h1 { font-size: 1.15rem; margin: 0; flex: 1; }
.burger { background: none; border: 1px solid var(--line); border-radius: var(--r); width: 40px; height: 40px; font-size: 1.1rem; cursor: pointer; }
.admin-user { font-size: .8rem; color: var(--muted); text-align: right; }
.admin-user b { display: block; color: var(--black); }
.admin-content { padding: 18px 16px 40px; }

@media (min-width: 992px) {
    .admin-side { position: sticky; top: 0; height: 100vh; transform: none; }
    .burger { display: none; }
    .admin-content { padding: 24px 28px 48px; }
}

/* stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 992px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    padding: 16px; border-top: 0px solid var(--black);
}
.stat-card.c-red { border-top-color: var(--red); }
.stat-card.c-gold { border-top-color: var(--gold); }
.stat-card.c-ok { border-top-color: var(--ok); }
.stat-card .sc-num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: var(--black); line-height: 1; }
.stat-card .sc-lbl { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 6px; font-weight: 700; }

/* CSS bar charts */
.bar-list { display: flex; flex-direction: column; gap: 9px; }
.bar-item { font-size: .8rem; }
.bar-item .bi-top { display: flex; justify-content: space-between; margin-bottom: 3px; }
.bar-item .bi-track { height: 9px; background: #E3ECF7; border-radius: 0; overflow: hidden; }
.bar-item .bi-fill { height: 100%; background: var(--red); }
.bar-item:nth-child(even) .bi-fill { background: var(--black); }

.spark { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.spark .sp-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.spark .sp-bar { width: 100%; background: var(--red); min-height: 2px; }
.spark .sp-lbl { font-size: .58rem; color: var(--muted); white-space: nowrap; }

/* data tables (mobile-first cards -> table) */
.dt-wrap { overflow-x: auto; }
.dt { width: 100%; border-collapse: collapse; font-size: .86rem; background: #fff; }
.dt th {
    text-align: left; padding: 10px 12px; background: var(--black); color: #fff;
    font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.dt td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dt tbody tr:hover { background: var(--paper); cursor: pointer; }

/* pagination - required on all lists */
.pager { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.pager button {
    min-width: 36px; height: 36px; border: 1px solid var(--line); background: #fff;
    border-radius: var(--r); font-size: .84rem; cursor: pointer; padding: 0 10px;
}
.pager button.on { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }
.pager button:disabled { opacity: .4; cursor: default; }
.pager .pinfo { font-size: .78rem; color: var(--muted); width: 100%; text-align: center; margin-top: 4px; }
@media (min-width: 720px) { .pager .pinfo { width: auto; margin: 0 8px 0 0; } }

/* filter bar */
.filter-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
@media (min-width: 992px) { .filter-bar { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } }

/* empty state */
.empty { text-align: center; padding: 42px 16px; color: var(--muted); }
.empty .e-ic { font-size: 2rem; margin-bottom: 8px; }

/* auth screens */
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 28px 16px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card .card-body { padding: 26px 22px; }
.auth-crest { text-align: center; margin-bottom: 14px; }
.auth-crest img { height: 74px; }

/* landing */
.hero {
    background: var(--hero-bg); color: #DDE8F5; position: relative; overflow: hidden;
    padding: 52px 0 58px;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-inner { display: flex; flex-direction: column; gap: 28px; align-items: center; }
.hero-copy { width: 100%; }
.hero-media { width: 100%; }

/* --- hero image slider (crossfade, 3s) --- */
.hero-slider {
    position: relative; width: 100%; border-radius: 10px; overflow: hidden;
    border: 1px solid rgba(255,255,255,.22); box-shadow: 0 18px 40px rgba(4,20,45,.45);
    background: #0E1B2B;
}
.hero-slider .hs-frame { display: block; width: 100%; height: auto; opacity: 0; }
.hero-slider .hs-slide {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; transition: opacity 900ms ease-in-out; will-change: opacity;
}
.hero-slider .hs-slide.is-active { opacity: 1; }
.hero-slider .hs-dots {
    position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2;
    display: flex; gap: 7px; justify-content: center;
}
.hero-slider .hs-dots button {
    width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 0; background: rgba(255,255,255,.45); transition: background 200ms ease, width 200ms ease;
}
.hero-slider .hs-dots button.on { background: var(--gold); width: 18px; border-radius: 4px; }

.hero .eyebrow { color: var(--gold); font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 12px; }
.hero h1 { color: #fff; font-size: 2.1rem; font-weight: 700; max-width: 640px; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero p { max-width: 520px; color: #AFC0D6; font-size: .98rem; }
.hero-cta { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
@media (min-width: 768px) {
    .hero h1 { font-size: 2.9rem; }
    .hero { padding: 76px 0 84px; }
    .hero-inner { flex-direction: row; gap: 40px; align-items: center; }
    .hero-copy { flex: 1 1 52%; min-width: 0; }
    .hero-media { flex: 1 1 48%; min-width: 0; }
}

.land-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin: -30px 0 40px; position: relative; z-index: 2; }
@media (min-width: 768px) { .land-grid { grid-template-columns: repeat(3, 1fr); } }
.land-card { background: #fff; border: 1px solid var(--line); border-top: 0px solid var(--red); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); }
.land-card:nth-child(2) { border-top-color: var(--black); }
.land-card:nth-child(3) { border-top-color: var(--gold); }
.land-card .lc-step { font-family: var(--font-display); font-size: .8rem; font-weight: 700; color: var(--muted); letter-spacing: .1em; }
.land-card h3 { font-size: 1.05rem; margin: 4px 0 6px; }
.land-card p { font-size: .86rem; color: var(--muted); margin: 0; }

.footer { background: var(--black); color: #A79F92; padding: 26px 0; font-size: .8rem; margin-top: auto; }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.footer b { color: var(--gold); font-family: var(--font-display); }

/* utility */
.mt-2x { margin-top: 18px; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
.grid-2 > * { min-width: 0; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* Grid/flex children default to min-width:auto, which refuses to shrink below their
   content's intrinsic width. On narrow screens that lets long <select> option text and
   <textarea> intrinsic width push cards past the viewport. Clamp the common containers. */
.card-ala { min-width: 0; }
.card-ala .card-body { min-width: 0; }
.filter-bar > * { min-width: 0; }
.inline-fields > * { min-width: 0; }
.form-select { max-width: 100%; }
select.form-select option { max-width: 100%; }
.txt-muted { color: var(--muted); }
.d-none-i { display: none !important; }

/* ============ uppercase name/text inputs ============ */
/* Visual only. app.js also uppercases the actual .value on input so the posted
   data is stored uppercase (CSS text-transform never changes the submitted value). */
.uc { text-transform: uppercase; }
input.uc::placeholder { text-transform: none; }

/* ============ password visibility toggle ============ */
.pwd-wrap { position: relative; }
.pwd-wrap .form-control { padding-right: 44px; }
.pwd-eye {
    position: absolute; top: 0; right: 0; height: 100%; width: 42px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer; color: var(--muted); padding: 0;
}
.pwd-eye:hover { color: var(--black); }
.pwd-eye svg { width: 19px; height: 19px; display: block; }
.pwd-eye .i-off { display: none; }
.pwd-eye.showing .i-on { display: none; }
.pwd-eye.showing .i-off { display: block; }

/* ============ back-to-home link ============ */
.back-home {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .82rem; font-weight: 700; color: var(--muted); text-decoration: none;
    padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r); background: #fff;
}
.back-home:hover { color: var(--red-deep); border-color: var(--red); }

/* ============================================================
   PREVENT MOBILE INPUT ZOOM (iOS Safari / Android Chrome)
   Root cause: iOS Safari force-zooms the viewport when a focused
   form control has a computed font-size < 16px. Our controls use
   .95rem (~15.2px) on desktop, which trips this. Raising every
   focusable control to 16px on small screens stops the zoom while
   keeping the tighter desktop sizing. 16px is the exact iOS
   threshold; anything >=16px is safe.
   ============================================================ */
@media screen and (max-width: 768px) {
    .form-control,
    .form-select,
    textarea.form-control,
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea {
        font-size: 16px !important;
        /* iOS also zooms if the line-height makes the box feel < 16px in some
           engines; keep a comfortable line-height so the 16px is respected. */
        line-height: 1.35;
    }
}

/* ============ legal pages (privacy / terms) ============ */
.legal-hero { background: var(--black); color: #fff; padding: 30px 0; }
.legal-hero h1 { color: #fff; font-size: 1.6rem; margin: 0; }
.legal-hero .sub { color: #AFC0D6; font-size: .9rem; margin-top: 6px; }
.legal-body { padding: 26px 16px 56px; }
/* keep a comfortable reading measure for running prose now that the column is
   wider - lists, tables, cards and form rows still use the full width. */
.legal-body > p, .legal-body .legal-sec > p { max-width: 78ch; }
.legal-doc { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px 26px 30px; min-width: 0; }
.legal-doc h2 { font-size: 1.05rem; color: var(--red-deep); margin: 26px 0 8px; padding-top: 4px; }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc h3 { font-size: .92rem; color: var(--black); margin: 16px 0 6px; }
.legal-doc p { font-size: .92rem; line-height: 1.7; color: var(--ink); margin: 0 0 12px; }
.legal-doc ul { margin: 0 0 12px; padding-left: 20px; }
.legal-doc li { font-size: .92rem; line-height: 1.65; color: var(--ink); margin-bottom: 6px; }
.legal-doc a { color: var(--red-deep); font-weight: 600; }
.legal-updated { font-size: .8rem; color: var(--muted); margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.legal-toc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 22px; }
.legal-toc strong { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.legal-toc ol { margin: 0; padding-left: 18px; }
.legal-toc li { font-size: .86rem; margin-bottom: 4px; }
.legal-note { background: var(--gold-soft); border: 1px solid #BBDCF5; border-radius: var(--r); padding: 12px 14px; font-size: .86rem; color: #6b5320; margin: 0 0 16px; }

/* ============ FAQ accordion ============ */
.faq-hero { background: var(--black); color: #fff; padding: 30px 0; }
.faq-hero h1 { color: #fff; font-size: 1.6rem; margin: 0; }
.faq-hero .sub { color: #AFC0D6; font-size: .9rem; margin-top: 6px; }
.faq-body { padding: 26px 16px 56px; }
.faq-group-title { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--red-deep); font-weight: 800; margin: 24px 0 10px; }
.faq-group-title:first-child { margin-top: 0; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r); background: #fff; margin-bottom: 10px; min-width: 0; overflow: hidden; }
.faq-q { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
         padding: 15px 16px; background: #fff; border: 0; font-family: inherit; font-size: .96rem; font-weight: 600; color: var(--black); }
.faq-q:hover { background: var(--paper); }
.faq-q .faq-ico { flex: 0 0 auto; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
                  color: var(--red); transition: transform 200ms ease; font-size: 1.1rem; line-height: 1; }
.faq-item.open .faq-q .faq-ico { transform: rotate(45deg); }
.faq-q .faq-qt { flex: 1; min-width: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 260ms ease; }
.faq-item.open .faq-a { max-height: 600px; }
.faq-a-inner { padding: 0 16px 16px; font-size: .9rem; line-height: 1.65; color: var(--ink); }
.faq-a-inner p { margin: 0 0 10px; }
.faq-a-inner p:last-child { margin-bottom: 0; }
.faq-a-inner a { color: var(--red-deep); font-weight: 600; }
.faq-cta { margin-top: 26px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; text-align: center; }
.faq-cta p { margin: 0 0 12px; font-size: .92rem; color: var(--ink); }

/* ============ gallery ============ */
.gal-hero { background: var(--black); color: #fff; padding: 30px 0; }
.gal-hero h1 { color: #fff; font-size: 1.6rem; margin: 0; }
.gal-hero .sub { color: #AFC0D6; font-size: .9rem; margin-top: 6px; }
.gal-body { padding: 26px 16px 56px; }
.gal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 620px) { .gal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 920px) { .gal-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.gal-cell {
    position: relative; display: block; border: 0; padding: 0; cursor: pointer; min-width: 0;
    border-radius: var(--r); overflow: hidden; background: #0E1B2B; aspect-ratio: 3 / 2;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.gal-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 350ms ease, opacity 300ms ease; opacity: 0; }
.gal-cell img.loaded { opacity: 1; }
.gal-cell:hover img { transform: scale(1.05); }
.gal-cell::after {
    content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,26,45,.28), rgba(11,26,45,0) 45%);
    opacity: 0; transition: opacity 250ms ease;
}
.gal-cell:hover::after { opacity: 1; }
.gal-empty { padding: 40px; text-align: center; color: var(--muted); font-size: .92rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }

/* lightbox */
.lb-back {
    position: fixed; inset: 0; z-index: 4000; background: rgba(12,10,9,.92);
    display: none; align-items: center; justify-content: center; padding: 20px;
}
.lb-back.open { display: flex; }
.lb-stage { position: relative; max-width: 96vw; max-height: 90vh; }
.lb-stage img { max-width: 96vw; max-height: 82vh; display: block; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lb-cap { color: #D4E1F0; font-size: .82rem; text-align: center; margin-top: 10px; letter-spacing: .02em; }
.lb-btn {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.12); color: #fff; font-size: 1.5rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.lb-btn:hover { background: rgba(255,255,255,.22); }
.lb-prev { left: -8px; }
.lb-next { right: -8px; }
@media (min-width: 720px) { .lb-prev { left: -64px; } .lb-next { right: -64px; } }
.lb-close {
    position: fixed; top: 16px; right: 18px; z-index: 3; width: 42px; height: 42px; border-radius: 50%;
    border: 0; cursor: pointer; background: rgba(255,255,255,.12); color: #fff; font-size: 1.4rem; line-height: 1;
}
.lb-close:hover { background: rgba(255,255,255,.22); }
.lb-count { position: fixed; top: 20px; left: 20px; z-index: 3; color: #AFC0D6; font-size: .84rem; font-weight: 600; }


/* ---------- white working surface for long form / document pages ----------
   The register wizard and the legal pages are dense; lifting them onto a white
   card with a hairline border separates the work area from the page tint and
   keeps the reading column aligned with the header. */
.page-shell {
    background: var(--card);
    background-color: #FFFFFF;
    isolation: isolate;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 26px 26px 34px;
    margin: 20px auto 44px;
}
@media screen and (max-width: 640px) {
    /* stay a card, just tighter - controls must never touch the screen edge */
    .page-shell {
        width: auto;
        padding: 18px 16px 24px;
        margin: 14px 12px 24px;
    }
}


/* ---------- mobile header stacking ----------
   On a phone the brand, Home and the application number fight for one row.
   Let the row wrap and push the number onto its own line, right-aligned so it
   sits directly under the Home button. */
@media screen and (max-width: 640px) {
    .topbar-inner { flex-wrap: wrap; padding-bottom: 8px; }
    .topbar-inner .brand { flex: 1 1 auto; min-width: 0; }
    .topbar-inner .back-home { flex: 0 0 auto; }
    #hdrAppNo {
        order: 99;
        flex: 0 0 auto;
        margin-left: auto;
        margin-top: 2px;
    }
}

/* ================= alternative register masthead (evaluation) =================
   Photographic hero behind a dark blue wash that fades out at the base, so the
   image merges into the page instead of stopping at a hard edge. The step card
   overlaps the join and hides the seam entirely. */
/* the wash: opaque navy at the top, easing to the exact page colour at the base */

.reg-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.30);
    color: #DCEAFB; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; padding: 7px 14px; border-radius: 4px;
}
.reg-mast h1 {
    color: #fff; font-size: 2.45rem; line-height: 1.14; font-weight: 700;
    margin: 18px auto 0; max-width: 780px; letter-spacing: -.01em;
}
.reg-mast h1 em { font-style: normal; color: #57B4EE; }
.reg-mast p {
    color: #C3D8EF; font-size: .95rem; margin: 14px auto 0; max-width: 560px;
}
/* step card lifts over the fade */
.reg-steps {
    position: relative; z-index: 2; margin: -58px auto 26px;
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 18px 40px rgba(10,49,105,.16);
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 16px 14px;
}
.reg-step { display: flex; align-items: center; gap: 10px; padding: 4px 6px; }
.reg-step .n {
    width: 30px; height: 30px; flex: none; border-radius: 6px;
    display: grid; place-items: center; font-weight: 700; font-size: .84rem;
    background: #EDF2F9; color: #7C8CA1;
}
.reg-step.on .n,
.reg-step.active .n { background: var(--red); color: #fff; }
.reg-step.done .n { background: var(--ok); color: #fff; }
.reg-step.wstep { cursor: pointer; }
.reg-step b { display: block; font-size: .86rem; color: var(--ink); font-weight: 700; }
.reg-step span { display: block; font-size: .74rem; color: var(--muted); }
.reg-step.on b, .reg-step.active b { color: var(--red); }
.reg-step.on span, .reg-step.active span { color: var(--red); opacity: .8; }
.reg-step.done b { color: var(--ok); }

@media screen and (max-width: 420px) {
    .reg-mast h1 { font-size: 1.42rem; }
}

/* compact mobile masthead bar: crest + name + menu button */
/* NOTE: this z-index creates a stacking context. The off-canvas drawer and its
   scrim must therefore live OUTSIDE this header in the markup - nested inside,
   their z-index only ranks them within this layer and the form card (also
   z-index 3, but later in the DOM) paints over them. */
.mast-bar { background: var(--hero-bg); position: sticky; top: 0; z-index: 60; }
.mast-bar .wrap { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.mast-bar .brand-name { color: #fff; font-weight: 700; font-size: 1rem; }
.mast-bar .brand-sub { display: block; color: #A8C4E4; font-size: .75rem; font-weight: 500; }
.mast-bar img { width: 38px; height: 38px; border-radius: 50%; background: #fff; }
.mast-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.mast-signin { color: #DCEAFB; font-weight: 600; font-size: .88rem; text-decoration: none; }
.mast-apply {
    background: #1E7FD4; color: #fff; font-weight: 700; font-size: .88rem;
    padding: 10px 18px; border-radius: 6px; text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
}
.mast-apply:hover { background: #1569B4; }
.mast-burger {
    display: none; background: transparent; border: 1px solid rgba(255,255,255,.35);
    border-radius: 6px; color: #fff; font-size: 1.1rem; padding: 7px 11px; cursor: pointer;
}
@media screen and (max-width: 720px) {
    .mast-bar .brand-sub { display: none; }
    .mast-signin, .mast-apply { display: none; }
    .mast-burger { display: inline-block; margin-left: auto; }
}


/* masthead brand + mobile menu + form surface under the hero */
.mast-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
/* off-canvas panel: enters from the right edge, not from the top */
.mast-menu {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(280px, 82vw);
    background: var(--hero-bg); z-index: 70;
    transform: translateX(100%);
    padding: 68px 0 20px;
    overflow-y: auto;

    /* The shadow is cast to the LEFT (-14px offset, 34px blur). While the panel
       is parked off-screen its left edge sits on the viewport edge, so that
       shadow spilled ~48px back into view as a blue haze down the right side.
       It only looked like a stacking problem: the form used to paint over it.
       Keep the panel fully inert while closed - no shadow, no visibility. */
    visibility: hidden;
    box-shadow: none;
    transition: transform .26s ease, box-shadow .26s ease, visibility 0s linear .26s;
}
.mast-menu.open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: -14px 0 34px rgba(4,20,45,.34);
    transition: transform .26s ease, box-shadow .26s ease, visibility 0s linear 0s;
}
.mast-menu a {
    display: block; padding: 13px 22px; color: #DCEAFB;
    text-decoration: none; font-weight: 600; font-size: .94rem;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.mast-menu a:hover { background: rgba(255,255,255,.08); }
.mast-menu-close {
    position: absolute; top: 16px; right: 16px;
    background: transparent; border: 1px solid rgba(255,255,255,.34);
    color: #fff; border-radius: 6px; font-size: 1.05rem;
    padding: 5px 11px; cursor: pointer; line-height: 1;
}
.mast-scrim {
    position: fixed; inset: 0; background: rgba(6,24,52,.52);
    opacity: 0; visibility: hidden; transition: opacity .26s ease, visibility .26s ease;
    z-index: 69;
}
.mast-scrim.open { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
    .mast-menu, .mast-scrim { transition: none; }
}

/* step card straddles the hero fade; form surface follows immediately */
.reg-steps-wrap { position: relative; z-index: 2; }


@media screen and (max-width: 640px) {
    /* application number keeps its own line, right-aligned under the actions */
    .mast-actions { flex-wrap: wrap; justify-content: flex-end; }
    .mast-actions #hdrAppNo { order: 99; flex-basis: 100%; text-align: right; margin-top: 4px; }
}


/* application number sits at the top right of the form card, above the tabs */
.shell-topline { display: flex; justify-content: flex-end; min-height: 4px; margin: -6px 0 2px; }
.shell-topline .tag { font-size: .82rem; letter-spacing: .05em; padding: 5px 12px; }

/* the alternative step card is no longer used - the wizard keeps its own bar */
.reg-steps, .reg-steps-wrap { display: none !important; }


/* ===========================================================================
   REGISTER MASTHEAD  -  tune everything here
   ---------------------------------------------------------------------------
   The fade is anchored to the BOTTOM EDGE IN PIXELS, not in percentages, so it
   looks identical whether the hero is tall (full headline + paragraph) or short
   (badge only). Percentages were the old bug: shorten the hero and the whole
   ramp squeezed into fewer pixels, which reads as a hard edge.

   Three dials:
     --fade      how many pixels the taper runs over   (bigger = softer)
     --mast-min  shortest the hero may ever get        (must exceed --fade)
     --lift      how far the form rides up onto the photo (desktop only)
   =========================================================================== */
/* Defined on :root, NOT on .reg-mast - the form (.reg-shell) is a SIBLING of
   the hero, and custom properties only inherit downward. Scoping them to the
   hero left var(--lift) undefined on the form, so its calc() was invalid and
   margin-top silently fell back to 0: the lift never applied at any value. */
:root {
    --fade: 300px;
    --mast-min: 380px;
    --lift: 170px;
}

.reg-mast {
    position: relative;
    overflow: hidden;
    min-height: var(--mast-min);
    background: #0A3169;
}

/* the photograph, thinning out over the bottom --fade pixels */
.reg-mast-media {
    position: absolute; inset: 0;
    background-image: url('../Images/hero-academy-2.jpg');
    background-size: cover;
    background-position: center 38%;
    -webkit-mask-image: linear-gradient(to top,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,.18) calc(var(--fade) * .22),
        rgba(0,0,0,.48) calc(var(--fade) * .48),
        rgba(0,0,0,.78) calc(var(--fade) * .74),
        rgba(0,0,0,1)   var(--fade));
            mask-image: linear-gradient(to top,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,.18) calc(var(--fade) * .22),
        rgba(0,0,0,.48) calc(var(--fade) * .48),
        rgba(0,0,0,.78) calc(var(--fade) * .74),
        rgba(0,0,0,1)   var(--fade));
}

/* even navy tint over the photo - constant, so it never causes a step */
.reg-mast-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,49,105,.74), rgba(10,49,105,.44));
}

/* colour ramp navy -> page colour, also pinned to the bottom --fade pixels */
.reg-mast::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: var(--fade); pointer-events: none; z-index: 1;
    background: linear-gradient(to top,
        var(--paper) 0px,
        rgba(198,217,238,.88) calc(var(--fade) * .18),
        rgba(134,170,210,.70) calc(var(--fade) * .40),
        rgba(45,95,160,.42)  calc(var(--fade) * .62),
        rgba(16,62,128,.18)  calc(var(--fade) * .82),
        rgba(10,49,105,0)    var(--fade));
}

.reg-mast-inner {
    position: relative; z-index: 2;
    padding: 46px 0 200px;
    text-align: center;
}

/* form lifts onto the photograph - desktop only, where the picture has room
   to sit either side of the card */
.reg-shell { position: relative; z-index: 3; margin-top: calc(var(--lift) * -1); }

@media screen and (max-width: 860px) {
    :root { --fade: 170px; --mast-min: 240px; }
    .reg-mast h1 { font-size: 1.7rem; }
    /* gap under the text = padding-bottom - lift = 56 - 26 = 30px, matching desktop.
       The card lifts only 26px, and 26px up from the hero's base the photo mask is
       already down to roughly 15% alpha - so the slivers either side of the inset
       card are effectively invisible rather than the hard strips seen before. */
    .reg-mast-inner { padding: 28px 0 56px; }
    .reg-shell { margin-top: -26px; }
}

/* The off-canvas drawer is parked past the right edge. Use `clip`, NOT `hidden`:
   overflow-x:hidden on html/body turns them into a scroll container, which
   silently kills `position: sticky` on the header. `clip` trims the same
   overflow without creating that container, so sticky keeps working. */
html, body { overflow-x: clip; }


/* ===========================================================================
   WIZARD FIELDS - 12-column grid, passport row, competency cards,
   document list, review table.
   =========================================================================== */
/* Two columns everywhere. The former platform mixed 2-, 3- and 4-across rows,
   which made the eye jump; a single pair of columns reads straight down and
   keeps every control the same width. Only full-width items (addresses, the
   condition note) span both. */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; }
.grid .col2,
.grid .col3,
.grid .col4,
.grid .col6,
.grid .col8  { grid-column: span 1; }
.grid .col12 { grid-column: span 2; }
.field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 5px; color: var(--ink); }
.field .rq { color: var(--danger); }
.field .opt { font-weight: 400; color: var(--muted); font-size: .78rem; }
.field .err { display: none; font-size: .76rem; color: var(--danger); margin-top: 4px; }
.field.invalid .err { display: block; }
textarea.form-control { resize: vertical; min-height: 62px; }

.chk-line { display: flex; align-items: flex-start; gap: 9px; font-size: .86rem; font-weight: 500; cursor: pointer; }
.chk-line input { margin-top: 3px; flex: none; }

/* passport */
.pp-row { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.pp-col { flex: none; width: 132px; text-align: center; }
.pp-col .hint { margin-top: 7px; line-height: 1.45; }
.pp-fields { flex: 1; min-width: 240px; }
.pp-fields.grid { grid-template-columns: 1fr; }
.passport-box { cursor: pointer; transition: border-color .15s, background .15s; }
.passport-box:hover { border-color: var(--red); background: #F4F8FD; }
.passport-box {
    width: 132px; height: 158px; flex: none; border: 2px dashed #B9C8DB;
    border-radius: var(--r); display: grid; place-items: center; overflow: hidden;
    background: #FBFCFE; color: var(--muted); font-size: .78rem; position: relative;
}
.passport-box img { display: none; width: 100%; height: 100%; object-fit: cover; }
.passport-box.has { border-style: solid; border-color: var(--red); }
.passport-box.has span { display: none; }
.passport-box.has img { display: block; }

/* competency cards */
.chk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.chk-card {
    display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px;
    border: 1px solid var(--line); border-radius: var(--r); background: #fff;
    font-size: .86rem; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s;
}
.chk-card:hover { border-color: var(--red); }
.chk-card input { margin-top: 2px; flex: none; }
.chk-card input:checked ~ span { color: var(--red-deep); }
.chk-card:has(input:checked) { border-color: var(--red); background: var(--red-soft); }

/* documents */
.doc-list { display: flex; flex-direction: column; gap: 10px; }
.doc-row {
    display: grid; grid-template-columns: 1fr 260px 96px; gap: 12px; align-items: center;
    padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r); background: #fff;
}
.doc-meta b { display: block; font-size: .86rem; }
.doc-meta .hint { margin-top: 2px; }
.doc-status { font-size: .76rem; font-weight: 700; text-align: right; }
.doc-status.ok { color: var(--ok); }
.doc-status.bad { color: var(--danger); }

/* review */
.rev-row { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: .86rem; }
.rev-row:last-child { border-bottom: 0; }
.rev-k { flex: none; width: 190px; font-weight: 700; color: var(--muted);
         font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; padding-top: 2px; }
.rev-v { flex: 1; }

@media screen and (max-width: 860px) {
    .chk-grid { grid-template-columns: repeat(2, 1fr); }
    .doc-row { grid-template-columns: 1fr; gap: 8px; }
    .doc-status { text-align: left; }
}
@media screen and (max-width: 560px) {
    /* one column on phones - two would leave each control too narrow to label */
    .grid { grid-template-columns: 1fr; }
    .grid .col12 { grid-column: span 1; }
    .chk-grid { grid-template-columns: 1fr; }
    .rev-row { flex-direction: column; gap: 3px; }
    .rev-k { width: auto; }
    .pp-row { justify-content: center; }
}


/* ===========================================================================
   APPLICANT DASHBOARD - identity band over the hero blue, then a two-column
   working area. Every id the existing render() targets is preserved, so this
   is presentation only.
   =========================================================================== */
.dash-band { background: var(--hero-bg); color: #fff; padding: 26px 0 30px; }
.dash-band-in { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dash-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.dash-photo {
    width: 76px; height: 76px; flex: none; border-radius: 12px; overflow: hidden;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.30);
}
.dash-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dash-who h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 7px; color: #fff; line-height: 1.15; }
.dash-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-appno {
    font-size: .82rem; font-weight: 700; letter-spacing: .05em; color: #DCEAFB;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.30);
    padding: 4px 11px; border-radius: 4px;
}
.dash-next { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; }
.dash-next .btn { white-space: nowrap; }

.dash-main { padding: 22px 16px 48px; }
.dash-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; }
.dash-col-side { display: flex; flex-direction: column; gap: 16px; }
.dash-links { display: flex; flex-direction: column; gap: 2px; }
.dash-links a {
    display: block; padding: 9px 0; font-size: .87rem; font-weight: 600;
    color: var(--red-deep); text-decoration: none; border-bottom: 1px solid var(--line);
}
.dash-links a:last-child { border-bottom: 0; }
.dash-links a:hover { color: var(--red); }

@media screen and (max-width: 900px) {
    .dash-grid { grid-template-columns: 1fr; }
    .dash-next { margin-left: 0; width: 100%; }
    .dash-next .btn { flex: 1; }
    .dash-who h1 { font-size: 1.25rem; }
    .dash-photo { width: 62px; height: 62px; }
}


/* The applicant dashboard is styled by Content/regal.css, which is a complete
   self-contained stylesheet (its own body, .wrap, .main, .panel, .card and
   variables). Porting fragments of it in here fought these base rules and lost
   its palette, so Dashboard.aspx loads regal.css directly instead. */


/* ---------- controls sitting on the dark public header ---------- */
.topbar .btn-ala-ghost {
    color: #E6F0FB;
    border-color: rgba(255,255,255,.32);
    background: rgba(255,255,255,.06);
}
.topbar .btn-ala-ghost:hover {
    color: #fff;
    border-color: rgba(255,255,255,.60);
    background: rgba(255,255,255,.14);
}
.topbar .btn-ala { background: var(--gold); border-color: var(--gold); color: #06233F; }
.topbar .btn-ala:hover { background: #63B2EA; border-color: #63B2EA; }
.topbar .back-home { color: #E6F0FB; border-color: rgba(255,255,255,.32); }
.topbar .back-home:hover { color: #fff; border-color: rgba(255,255,255,.60); }
.topbar .tag-appno {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.32);
    color: #EAF3FD;
}
/* the ribbon is the same navy, so header and strip read as one band */
.ala-ribbon { background: var(--hero-bg); }
.ala-ribbon span:first-child,
.ala-ribbon span:last-child { background: var(--hero-bg); }


/* every header pins to the top of the viewport */
.topbar, .mast-bar { position: sticky; top: 0; }

/* printout: tabular sections (qualifications, documents) */
.kv.tbl thead th { background: #F3F7FC; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }
.kv.tbl td, .kv.tbl th { border: 1px solid var(--line); padding: 6px 9px; font-size: .8rem; }

/* admin: inline share bar in the progress table */
.bar-mini { display: inline-block; width: 90px; height: 7px; background: #E7EEF7;
            border-radius: 2px; overflow: hidden; vertical-align: middle; margin-right: 7px; }
.bar-mini i { display: block; height: 100%; background: var(--red); }

/* WebForms wizard: inline status message above the step panels */
.notice { padding: 11px 14px; border-radius: var(--r); font-size: .86rem; font-weight: 600; margin-bottom: 14px; }
.notice-ok  { background: var(--ok-soft); color: var(--ok); border: 1px solid #BFE3CD; }
.notice-err { background: #FBEAEA; color: var(--danger); border: 1px solid #EFC9C9; }

/* WebForms account pane heading */
.pane-title { font-size: 1.15rem; font-weight: 700; color: var(--red-deep); margin: 0 0 4px; }


/* ===========================================================================
   INPUT NORMALISATION

   Two problems this solves:

   1. Some Android keyboards insert styled or full-width characters, which then
      sit in the database looking like ordinary text but failing every filter
      and export. Forcing the font family and normalising on the server strips
      that back to plain characters.

   2. Names are stored uppercase throughout, so the form shows uppercase as it
      is typed rather than surprising the applicant at the review step.
   =========================================================================== */
.form-control,
.form-select,
textarea.form-control {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
    font-variant: normal !important;
    font-feature-settings: normal !important;
    -webkit-text-size-adjust: 100%;
}

/* Typed in caps, stored in caps. Applied per-field via the upper class so that
   email and password are left alone. */
.form-control.upper { text-transform: uppercase; }
.form-control.upper::placeholder { text-transform: none; }

/* tighter vertical rhythm between stacked fields */
.field { margin-bottom: 8px; }
.field .err { margin-top: 2px; }
.pp-fields.grid { gap: 4px 16px; }

/* CheckBoxList renders its items as <li>. .chk-card is applied by hand elsewhere;
   inside a .chk-grid list there is nowhere to hang that class, so the same look is
   applied to the list items directly. */
.chk-grid { list-style: none; padding-left: 0; margin: 0; }
.chk-grid li {
    display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px;
    border: 1px solid var(--line); border-radius: var(--r); background: #fff;
    font-size: .86rem; font-weight: 500;
}
.chk-grid li input { margin-top: 3px; flex: none; }
.chk-grid li label { cursor: pointer; }
@media screen and (max-width: 720px) {
    .chk-grid { grid-template-columns: 1fr; }
}

/* Two documents per row on desktop, one per row on mobile. Applied as a modifier
   so the single-column .doc-list on the legacy wizard keeps its own layout.
   In a half-width card the original "1fr 260px 96px" track list no longer fits,
   so the row restacks: label across the top, button and status beneath it. */
.doc-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.doc-2col .doc-row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "meta meta" "btn status";
    gap: 8px 12px;
    align-items: center;
}
.doc-2col .doc-meta { grid-area: meta; min-width: 0; }
.doc-2col .doc-meta b { overflow-wrap: anywhere; }
.doc-2col .doc-pick { grid-area: btn; justify-self: start; }
.doc-2col .doc-status { grid-area: status; justify-self: end; overflow-wrap: anywhere; }
.doc-2col .rq { font-style: normal; }
@media screen and (max-width: 720px) {
    .doc-2col { grid-template-columns: 1fr; }
}