/* ===========================================================================
   Sahi Nirnay — design system
   ---------------------------------------------------------------------------
   Priorities, in this order:
     1. Readable on a 5-inch screen in daylight, by someone who reads slowly.
     2. Small. No webfont by default, no framework, no icon font.
     3. Touchable. 48px minimum target, generous spacing, no hover-only UI.
     4. Honest. Costs, risks and uncertainty get as much visual weight as
        the appealing numbers.

   Written mobile-first; the few desktop rules are at the bottom.
   =========================================================================== */

/* ------------------------------------------------------------------- tokens */
:root {
    /* Brand. Deep green reads as growth and public service rather than as a
       coaching-centre red, and holds up on cheap LCD panels. */
    --brand-900: #052e22;
    --brand-800: #07412f;
    --brand-700: #0b6b4f;
    --brand-600: #0e8762;
    --brand-500: #14a575;
    --brand-100: #d7f2e7;
    --brand-50:  #eefaf5;

    /* A warm secondary for the child-facing and activity screens. */
    --accent-700: #a5560a;
    --accent-600: #c2690d;
    --accent-500: #e08320;
    --accent-100: #fdeedb;
    --accent-50:  #fff8f0;

    --ink-900: #0f1b24;
    --ink-800: #1b2733;
    --ink-700: #33434f;
    --ink-600: #4d5f6d;
    --ink-500: #6b7c8a;
    --ink-400: #93a3af;
    --ink-300: #c3ccd4;
    --ink-200: #e0e6eb;
    --ink-100: #eef2f5;
    --ink-50:  #f6f8fa;
    --white:   #ffffff;

    /* Status. Chosen to stay distinguishable for the common colour-vision
       deficiencies; every use is paired with text or an icon, never colour
       alone. */
    --ok-700:   #0a6b43;
    --ok-100:   #d6f5e3;
    --warn-700: #8a5a00;
    --warn-100: #fdf0cf;
    --risk-700: #a8301c;
    --risk-100: #fde5e0;
    --info-700: #1b5a8a;
    --info-100: #ddeefb;

    /* Affordability bands — used consistently everywhere money appears. */
    --afford:      var(--ok-700);
    --afford-bg:   var(--ok-100);
    --stretch:     var(--warn-700);
    --stretch-bg:  var(--warn-100);
    --aspire:      var(--info-700);
    --aspire-bg:   var(--info-100);
    --outofreach:    var(--ink-600);
    --outofreach-bg: var(--ink-100);

    /* Type. System stack only: zero font bytes, and the OS already has the
       right Devanagari and Odia faces installed. */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    --font-indic: "Noto Sans Devanagari", "Noto Sans Oriya", "Noto Sans Odia",
            "Kalinga", "Mangal", var(--font);

    --fs-xs:  0.8125rem;   /* 13px — captions, source dates only */
    --fs-sm:  0.9375rem;   /* 15px */
    --fs-base:1.0625rem;   /* 17px — body. Deliberately above the 16px norm. */
    --fs-md:  1.1875rem;
    --fs-lg:  1.375rem;
    --fs-xl:  1.625rem;
    --fs-2xl: 2rem;
    --fs-3xl: 2.375rem;

    --lh-tight: 1.25;
    --lh-base:  1.65;      /* generous: helps slow readers and Indic scripts */

    --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
    --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3.5rem;

    --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-full: 999px;

    --shadow-sm: 0 1px 2px rgba(15, 27, 36, .06);
    --shadow-md: 0 2px 8px rgba(15, 27, 36, .08);
    --shadow-lg: 0 8px 28px rgba(15, 27, 36, .12);

    --tap: 48px;            /* minimum touch target */
    --maxw: 72rem;
    --maxw-read: 42rem;     /* comfortable reading measure */
}

/* Indic scripts need a touch more leading and a slightly larger body size. */
html[lang^="hi"], html[lang^="or"] {
    --font: var(--font-indic);
    --fs-base: 1.125rem;
    --lh-base: 1.75;
}

/* --------------------------------------------------------------- reset-ish */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--ink-800);
    background: var(--ink-50);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* A user-toggled larger-text mode, remembered per device. */
body.big-text { --fs-base: 1.25rem; --fs-sm: 1.0625rem; --fs-lg: 1.5rem; }

img, svg, video { max-width: 100%; height: auto; }
img { background: var(--ink-100); }

h1, h2, h3, h4 {
    margin: 0 0 var(--sp-3);
    line-height: var(--lh-tight);
    color: var(--ink-900);
    font-weight: 700;
    text-wrap: balance;
}
h1 { font-size: var(--fs-2xl); letter-spacing: -.015em; }
h2 { font-size: var(--fs-xl); letter-spacing: -.01em; }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p  { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--brand-700);
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}
a:hover { color: var(--brand-800); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.4em; }
li { margin-bottom: var(--sp-2); }

hr { border: 0; border-top: 1px solid var(--ink-200); margin: var(--sp-6) 0; }

small { font-size: var(--fs-sm); }

code, kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9em;
    background: var(--ink-100);
    padding: .1em .35em;
    border-radius: var(--r-sm);
}

/* Visible focus everywhere. Never removed — many of our users navigate by
   keyboard or switch access. */
:focus-visible {
    outline: 3px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: var(--sp-3); top: -100px; z-index: 200;
    background: var(--brand-700); color: var(--white);
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
    font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--sp-3); color: var(--white); }

/* ------------------------------------------------------------------- layout */
.wrap    { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-4); }
.wrap-read { max-width: var(--maxw-read); }
.section { padding: var(--sp-6) 0; }
.section-lg { padding: var(--sp-7) 0; }
.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-5); }
.center { text-align: center; }
.muted  { color: var(--ink-600); }
.tiny   { font-size: var(--fs-xs); color: var(--ink-500); }
.lead   { font-size: var(--fs-md); color: var(--ink-700); }
.nowrap { white-space: nowrap; }
.hide   { display: none !important; }

.grid { display: grid; gap: var(--sp-4); }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

.row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.row-between { justify-content: space-between; }
.row-end { justify-content: flex-end; }
.spacer { flex: 1 1 auto; }

/* --------------------------------------------------------------- app shell */
.site-header {
    background: var(--white);
    border-bottom: 1px solid var(--ink-200);
    position: sticky; top: 0; z-index: 60;
}
.header-bar {
    display: flex; align-items: center; gap: var(--sp-3);
    min-height: 60px;
}
.logo {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-weight: 800; font-size: var(--fs-md);
    color: var(--brand-800); text-decoration: none; letter-spacing: -.02em;
}
.logo svg { width: 28px; height: 28px; flex: none; }
.logo-mark {
    width: 30px; height: 30px; flex: none;
    background: var(--brand-700); color: var(--white);
    border-radius: 8px; display: grid; place-items: center;
    font-size: var(--fs-sm); font-weight: 800;
}

.nav-toggle {
    margin-left: auto;
    min-width: var(--tap); min-height: var(--tap);
    display: grid; place-items: center;
    background: none; border: 1px solid var(--ink-200);
    border-radius: var(--r-md); cursor: pointer; color: var(--ink-800);
}
.nav-toggle svg { width: 22px; height: 22px; }

.site-nav { display: none; }
.site-nav.is-open {
    display: block;
    border-top: 1px solid var(--ink-200);
    padding: var(--sp-2) 0 var(--sp-4);
}
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a {
    display: block; padding: var(--sp-3) var(--sp-2);
    min-height: var(--tap);
    color: var(--ink-800); text-decoration: none; font-weight: 500;
    border-radius: var(--r-md);
}
.site-nav a:hover, .site-nav a.is-active {
    background: var(--brand-50); color: var(--brand-800);
}
.site-nav a.is-active { font-weight: 700; }

.site-main { min-height: 50vh; }

.site-footer {
    background: var(--brand-900); color: #c8dbd3;
    padding: var(--sp-6) 0 var(--sp-5); margin-top: var(--sp-7);
    font-size: var(--fs-sm);
}
.site-footer h4 { color: var(--white); font-size: var(--fs-sm);
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sp-3); }
.site-footer a { color: #a9ccc0; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-bottom: var(--sp-2); }
.footer-note {
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: var(--sp-5); padding-top: var(--sp-4);
    font-size: var(--fs-xs); color: #8fb3a7;
}
.footer-independence {
    background: rgba(255,255,255,.06);
    border-left: 3px solid var(--brand-500);
    padding: var(--sp-3); border-radius: var(--r-sm);
    margin-bottom: var(--sp-4); color: #d9eae4;
}

/* ------------------------------------------------------- language switcher */
.lang-switch { display: flex; gap: 2px; background: var(--ink-100);
    padding: 3px; border-radius: var(--r-full); }
.lang-switch a {
    padding: var(--sp-2) var(--sp-3); border-radius: var(--r-full);
    font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
    color: var(--ink-700); min-height: 40px; display: inline-flex;
    align-items: center;
}
.lang-switch a[aria-current="true"] {
    background: var(--white); color: var(--brand-800); box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------------ buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--sp-2);
    min-height: var(--tap); padding: var(--sp-3) var(--sp-5);
    font-family: inherit; font-size: var(--fs-base); font-weight: 600;
    line-height: 1.2; text-align: center; text-decoration: none;
    border: 1.5px solid transparent; border-radius: var(--r-md);
    cursor: pointer; transition: background .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn svg { width: 20px; height: 20px; flex: none; }

.btn-primary { background: var(--brand-700); color: var(--white); }
.btn-primary:hover { background: var(--brand-800); color: var(--white); }

.btn-secondary {
    background: var(--white); color: var(--brand-800); border-color: var(--ink-300);
}
.btn-secondary:hover { background: var(--brand-50); border-color: var(--brand-500); }

.btn-accent { background: var(--accent-600); color: var(--white); }
.btn-accent:hover { background: var(--accent-700); color: var(--white); }

.btn-ghost { background: transparent; color: var(--brand-800); }
.btn-ghost:hover { background: var(--brand-50); }

.btn-danger { background: var(--risk-700); color: var(--white); }

.btn-lg { font-size: var(--fs-md); padding: var(--sp-4) var(--sp-6); min-height: 56px; }
.btn-sm { font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3); min-height: 40px; }
.btn-block { display: flex; width: 100%; }

/* ------------------------------------------------------------------- cards */
.card {
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
}
.card-tight { padding: var(--sp-4); }
.card-hover { transition: border-color .15s, box-shadow .15s; }
.card-hover:hover { border-color: var(--brand-500); box-shadow: var(--shadow-md); }
.card-head {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.card-title { margin: 0; font-size: var(--fs-md); }

/* The big three entry choices on the home page. */
.choice-card {
    display: flex; align-items: center; gap: var(--sp-4);
    background: var(--white); border: 2px solid var(--ink-200);
    border-radius: var(--r-lg); padding: var(--sp-5);
    text-decoration: none; color: var(--ink-900);
    min-height: 92px; transition: border-color .15s, transform .1s;
}
.choice-card:hover { border-color: var(--brand-600); color: var(--ink-900); }
.choice-card:active { transform: scale(.995); }
.choice-icon {
    width: 56px; height: 56px; flex: none; border-radius: var(--r-md);
    display: grid; place-items: center;
    background: var(--brand-100); color: var(--brand-800);
}
.choice-icon svg { width: 30px; height: 30px; }
.choice-card:nth-child(2) .choice-icon { background: var(--accent-100); color: var(--accent-700); }
.choice-card:nth-child(3) .choice-icon { background: var(--info-100); color: var(--info-700); }
.choice-title { font-size: var(--fs-md); font-weight: 700; display: block; }
.choice-desc  { font-size: var(--fs-sm); color: var(--ink-600); display: block; }
.choice-arrow { margin-left: auto; color: var(--ink-400); flex: none; }

/* -------------------------------------------------------------------- hero */
.hero {
    background: linear-gradient(170deg, var(--brand-800) 0%, var(--brand-700) 62%, var(--brand-600) 100%);
    color: var(--white);
    padding: var(--sp-7) 0 var(--sp-8);
}
.hero h1 { color: var(--white); font-size: var(--fs-2xl); max-width: 22ch; }
.hero p  { color: #d5ece3; font-size: var(--fs-md); max-width: 46ch; }
.hero-badges { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.hero-badge {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--r-full); padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-sm); color: var(--white);
}
.hero-badge svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ badges */
.badge {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: 3px var(--sp-3); border-radius: var(--r-full);
    font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: .02em; line-height: 1.5;
}
.badge svg { width: 14px; height: 14px; }
.badge-ok      { background: var(--ok-100);    color: var(--ok-700); }
.badge-warn    { background: var(--warn-100);  color: var(--warn-700); }
.badge-risk    { background: var(--risk-100);  color: var(--risk-700); }
.badge-info    { background: var(--info-100);  color: var(--info-700); }
.badge-neutral { background: var(--ink-100);   color: var(--ink-700); }
.badge-brand   { background: var(--brand-100); color: var(--brand-800); }
.badge-free    { background: var(--ok-100);    color: var(--ok-700); }
.badge-govt    { background: var(--info-100);  color: var(--info-700); }

.badge-afford  { background: var(--afford-bg);     color: var(--afford); }
.badge-stretch { background: var(--stretch-bg);    color: var(--stretch); }
.badge-aspire  { background: var(--aspire-bg);     color: var(--aspire); }
.badge-unreach { background: var(--outofreach-bg); color: var(--outofreach); }

/* ------------------------------------------------------------------ notices */
.notice {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    padding: var(--sp-4); border-radius: var(--r-md);
    border-left: 4px solid; font-size: var(--fs-sm);
}
.notice svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.notice p:last-child { margin-bottom: 0; }
.notice-info { background: var(--info-100); border-color: var(--info-700); color: #11425f; }
.notice-ok   { background: var(--ok-100);   border-color: var(--ok-700);   color: #074c30; }
.notice-warn { background: var(--warn-100); border-color: var(--warn-700); color: #5e3d00; }
.notice-risk { background: var(--risk-100); border-color: var(--risk-700); color: #7a2114; }
.notice-quiet{ background: var(--ink-100);  border-color: var(--ink-400);  color: var(--ink-700); }

/* The honesty callout. Used wherever we have to tell the user something
   inconvenient — a limitation, an uncertainty, a risk. Styled to be noticed,
   not tucked away in small print. */
.honesty {
    background: var(--accent-50);
    border: 1px solid var(--accent-100);
    border-left: 4px solid var(--accent-500);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    font-size: var(--fs-sm);
}
.honesty-title {
    font-weight: 700; color: var(--accent-700);
    display: flex; align-items: center; gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

/* Flash messages */
.flashes { margin: var(--sp-4) 0; }
.flashes .notice + .notice { margin-top: var(--sp-2); }

/* -------------------------------------------------------------------- forms */
.field { margin-bottom: var(--sp-5); }
.field:last-child { margin-bottom: 0; }

label, .label {
    display: block; font-weight: 600; color: var(--ink-900);
    margin-bottom: var(--sp-2); font-size: var(--fs-base);
}
.label-hint {
    display: block; font-weight: 400; font-size: var(--fs-sm);
    color: var(--ink-600); margin-top: 2px;
}
.label-optional { font-weight: 400; color: var(--ink-500); font-size: var(--fs-sm); }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], input[type="date"], select, textarea {
    width: 100%; min-height: var(--tap);
    padding: var(--sp-3) var(--sp-4);
    font-family: inherit; font-size: var(--fs-base); color: var(--ink-900);
    background: var(--white);
    border: 1.5px solid var(--ink-300); border-radius: var(--r-md);
    appearance: none;
}
textarea { min-height: 110px; resize: vertical; line-height: var(--lh-base); }

input:focus, select:focus, textarea:focus {
    border-color: var(--brand-600);
    outline: 3px solid var(--brand-100); outline-offset: 0;
}
input::placeholder, textarea::placeholder { color: var(--ink-400); }

/* 16px+ on inputs stops iOS zooming in on focus. */
@media (max-width: 480px) {
    input, select, textarea { font-size: 1.0625rem; }
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%234d5f6d' stroke-width='2' stroke-linecap='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-4) center;
    padding-right: var(--sp-7);
}

.field-error input, .field-error select, .field-error textarea { border-color: var(--risk-700); }
.error-text {
    display: flex; align-items: flex-start; gap: var(--sp-1);
    color: var(--risk-700); font-size: var(--fs-sm); font-weight: 500;
    margin-top: var(--sp-2);
}
.error-text svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }

/* Big tappable choice list — the core input of the whole questionnaire.
   One option per row, full width, no tiny radio dots to aim at. */
.choices { display: grid; gap: var(--sp-3); }
.choice {
    position: relative; display: flex; align-items: center; gap: var(--sp-3);
    min-height: 60px; padding: var(--sp-4);
    background: var(--white); border: 2px solid var(--ink-200);
    border-radius: var(--r-md); cursor: pointer;
    font-size: var(--fs-base); line-height: 1.4;
}
.choice:hover { border-color: var(--brand-400, var(--brand-500)); background: var(--brand-50); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-box {
    width: 26px; height: 26px; flex: none;
    border: 2px solid var(--ink-400); border-radius: var(--r-sm);
    display: grid; place-items: center; background: var(--white);
}
.choice-box.round { border-radius: 50%; }
.choice-box svg { width: 16px; height: 16px; color: var(--white); opacity: 0; }
.choice input:checked ~ .choice-box { background: var(--brand-700); border-color: var(--brand-700); }
.choice input:checked ~ .choice-box svg { opacity: 1; }
.choice:has(input:checked) { border-color: var(--brand-700); background: var(--brand-50); }
.choice input:focus-visible ~ .choice-box { outline: 3px solid var(--brand-500); outline-offset: 2px; }
.choice-label { flex: 1; }
.choice-sub { display: block; font-size: var(--fs-sm); color: var(--ink-600); }

/* A 1-5 scale rendered as five big buttons rather than a slider. */
.scale { display: flex; gap: var(--sp-2); }
.scale label {
    flex: 1; margin: 0; text-align: center; cursor: pointer;
    border: 2px solid var(--ink-200); border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-1); background: var(--white);
    min-height: 64px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700);
}
.scale input { position: absolute; opacity: 0; }
.scale label:has(input:checked) {
    border-color: var(--brand-700); background: var(--brand-50); color: var(--brand-800);
}
.scale-emoji { font-size: 1.5rem; line-height: 1; }

.form-actions {
    display: flex; flex-wrap: wrap; gap: var(--sp-3);
    margin-top: var(--sp-6); padding-top: var(--sp-5);
    border-top: 1px solid var(--ink-200);
}
.form-actions .btn { flex: 1 1 auto; }

fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-5); }
legend { padding: 0; margin-bottom: var(--sp-3); font-weight: 700; font-size: var(--fs-md); }

/* --------------------------------------------------------------- progress */
.progress {
    height: 10px; background: var(--ink-200);
    border-radius: var(--r-full); overflow: hidden;
}
.progress-bar {
    height: 100%; background: var(--brand-600);
    border-radius: var(--r-full); transition: width .3s ease;
}
.progress-label {
    display: flex; justify-content: space-between;
    font-size: var(--fs-sm); color: var(--ink-600); margin-bottom: var(--sp-2);
}

/* The 5-step journey indicator in the dashboard. */
.journey { display: flex; gap: var(--sp-1); list-style: none; padding: 0; margin: 0; }
.journey li {
    flex: 1; text-align: center; font-size: var(--fs-xs);
    color: var(--ink-500); margin: 0;
}
.journey-dot {
    width: 30px; height: 30px; margin: 0 auto var(--sp-1);
    border-radius: 50%; background: var(--ink-200); color: var(--ink-600);
    display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm);
}
.journey li.is-done .journey-dot { background: var(--brand-700); color: var(--white); }
.journey li.is-current .journey-dot {
    background: var(--white); color: var(--brand-800);
    box-shadow: 0 0 0 3px var(--brand-600);
}
.journey li.is-done, .journey li.is-current { color: var(--ink-800); font-weight: 600; }

/* --------------------------------------------------- pathway comparison */
.pathway {
    background: var(--white); border: 1px solid var(--ink-200);
    border-radius: var(--r-lg); overflow: hidden;
}
.pathway.is-shortlisted { border: 2px solid var(--brand-600); }
.pathway-top { padding: var(--sp-4); }
.pathway-rank {
    display: inline-grid; place-items: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--ink-100); color: var(--ink-700);
    font-weight: 800; font-size: var(--fs-sm); flex: none;
}
.pathway.is-shortlisted .pathway-rank { background: var(--brand-700); color: var(--white); }
.pathway-name { font-size: var(--fs-md); font-weight: 700; margin: 0; }
.pathway-career { font-size: var(--fs-sm); color: var(--ink-600); }

/* Key figures laid out as a definition grid — scans better than a table on
   a narrow screen, and reads correctly to a screen reader. */
.facts {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--sp-3) var(--sp-4);
    padding: var(--sp-4); background: var(--ink-50);
    border-top: 1px solid var(--ink-200); margin: 0;
}
.facts dt {
    font-size: var(--fs-xs); color: var(--ink-600);
    text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
}
.facts dd { margin: 2px 0 0; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-900); }
.facts .fact-wide { grid-column: 1 / -1; }
.fact-note { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--ink-500); }

/* Fit score shown as a labelled bar, never as a bare number out of 100. */
.fit { display: flex; align-items: center; gap: var(--sp-3); }
.fit-track {
    flex: 1; height: 8px; background: var(--ink-200);
    border-radius: var(--r-full); overflow: hidden;
}
.fit-fill { height: 100%; border-radius: var(--r-full); background: var(--brand-600); }
.fit-high .fit-fill { background: var(--brand-600); }
.fit-medium .fit-fill { background: var(--accent-500); }
.fit-low .fit-fill { background: var(--ink-400); }
.fit-text { font-size: var(--fs-sm); font-weight: 700; min-width: 8ch; }

/* The "why" breakdown table. */
.breakdown { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.breakdown th, .breakdown td {
    padding: var(--sp-3) var(--sp-2); text-align: left;
    border-bottom: 1px solid var(--ink-200);
}
.breakdown th { font-weight: 600; color: var(--ink-700); }
.breakdown td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.breakdown tfoot td { border-bottom: 0; border-top: 2px solid var(--ink-300); font-size: var(--fs-base); }

/* --------------------------------------------------------------- roadmap */
.week {
    background: var(--white); border: 1px solid var(--ink-200);
    border-radius: var(--r-lg); margin-bottom: var(--sp-4); overflow: hidden;
}
.week-head {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4); background: var(--ink-50);
    border-bottom: 1px solid var(--ink-200);
}
.week-num {
    width: 44px; height: 44px; flex: none; border-radius: var(--r-md);
    background: var(--brand-100); color: var(--brand-800);
    display: grid; place-items: center; font-weight: 800;
    font-size: var(--fs-sm); line-height: 1.1; text-align: center;
}
.week.is-current .week-num { background: var(--brand-700); color: var(--white); }
.week.is-review { border-color: var(--accent-500); }
.week.is-review .week-num { background: var(--accent-100); color: var(--accent-700); }

.task {
    display: flex; gap: var(--sp-3); padding: var(--sp-4);
    border-bottom: 1px solid var(--ink-100);
}
.task:last-child { border-bottom: 0; }
.task.is-done { background: var(--brand-50); }
.task.is-done .task-title { text-decoration: line-through; color: var(--ink-600); }
.task-check {
    width: 30px; height: 30px; flex: none; margin-top: 2px;
    border: 2px solid var(--ink-300); border-radius: var(--r-sm);
    background: var(--white); display: grid; place-items: center; cursor: pointer;
}
.task.is-done .task-check { background: var(--brand-700); border-color: var(--brand-700); }
.task-check svg { width: 18px; height: 18px; color: var(--white); }
.task-title { font-weight: 600; margin: 0 0 var(--sp-1); }
.task-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-600); }
.task-body { font-size: var(--fs-sm); color: var(--ink-700); margin-top: var(--sp-2); }
.task-domain {
    font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--brand-700);
}
.materials {
    display: flex; flex-wrap: wrap; gap: var(--sp-1);
    margin-top: var(--sp-2); list-style: none; padding: 0;
}
.materials li {
    background: var(--ink-100); border-radius: var(--r-sm);
    padding: 2px var(--sp-2); font-size: var(--fs-xs); margin: 0;
}

/* --------------------------------------------------------------- source cite */
.cite {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    font-size: var(--fs-xs); color: var(--ink-500);
}
.cite a { color: var(--ink-600); }
.source-list { list-style: none; padding: 0; font-size: var(--fs-sm); }
.source-list li {
    padding: var(--sp-3) 0; border-bottom: 1px solid var(--ink-200);
}
.source-list li:last-child { border-bottom: 0; }
.source-pub { color: var(--ink-600); font-size: var(--fs-xs); }

/* --------------------------------------------------------------- data table */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--sp-4) * -1); padding: 0 var(--sp-4); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--white); }
table.data th, table.data td { padding: var(--sp-3); text-align: left; border-bottom: 1px solid var(--ink-200); }
table.data th { background: var(--ink-50); font-weight: 700; white-space: nowrap; }
table.data tbody tr:hover { background: var(--brand-50); }

/* --------------------------------------------------------------- list items */
.opp-item {
    background: var(--white); border: 1px solid var(--ink-200);
    border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-3);
}
.opp-item h3 { font-size: var(--fs-base); margin-bottom: var(--sp-1); }
.opp-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }

/* --------------------------------------------------------------- voice ctrl */
.speak-btn {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: 40px; padding: var(--sp-2) var(--sp-3);
    background: var(--brand-50); color: var(--brand-800);
    border: 1px solid var(--brand-100); border-radius: var(--r-full);
    font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.speak-btn[aria-pressed="true"] { background: var(--brand-700); color: var(--white); }
.speak-btn svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------- ad container */
/* Reserved space so the layout does not jump when an ad loads, and a visible
   label so nobody mistakes an advert for our recommendation. */
.ad-slot { margin: var(--sp-6) 0; text-align: center; }
.ad-label {
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-400); margin-bottom: var(--sp-1);
}
.ad-box { min-height: 100px; background: var(--ink-100); border-radius: var(--r-md); }

/* -------------------------------------------------------------- offline bar */
.offline-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    background: var(--warn-700); color: var(--white);
    padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm);
    text-align: center; transform: translateY(100%); transition: transform .25s;
}
.offline-bar.is-visible { transform: translateY(0); }

/* ----------------------------------------------------------------- tabs */
.tabs {
    display: flex; gap: var(--sp-1); overflow-x: auto;
    border-bottom: 1px solid var(--ink-200); margin-bottom: var(--sp-5);
    -webkit-overflow-scrolling: touch;
}
.tabs a {
    padding: var(--sp-3) var(--sp-4); white-space: nowrap;
    color: var(--ink-600); text-decoration: none; font-weight: 600;
    border-bottom: 3px solid transparent; min-height: var(--tap);
    display: inline-flex; align-items: center;
}
.tabs a.is-active { color: var(--brand-800); border-bottom-color: var(--brand-700); }

/* --------------------------------------------------------------- accordion */
details.acc {
    background: var(--white); border: 1px solid var(--ink-200);
    border-radius: var(--r-md); margin-bottom: var(--sp-3);
}
details.acc > summary {
    padding: var(--sp-4); font-weight: 600; cursor: pointer;
    min-height: var(--tap); display: flex; align-items: center;
    justify-content: space-between; gap: var(--sp-3); list-style: none;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::after {
    content: ""; width: 10px; height: 10px; flex: none;
    border-right: 2px solid var(--ink-500); border-bottom: 2px solid var(--ink-500);
    transform: rotate(45deg); transition: transform .2s;
}
details.acc[open] > summary::after { transform: rotate(-135deg); }
details.acc > .acc-body { padding: 0 var(--sp-4) var(--sp-4); }

/* ----------------------------------------------------------------- empty */
.empty {
    text-align: center; padding: var(--sp-7) var(--sp-4);
    background: var(--white); border: 1px dashed var(--ink-300);
    border-radius: var(--r-lg);
}
.empty svg { width: 48px; height: 48px; color: var(--ink-300); margin-bottom: var(--sp-3); }

/* ================================================================ desktop */
@media (min-width: 640px) {
    :root { --fs-2xl: 2.25rem; }
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .facts  { grid-template-columns: repeat(4, 1fr); }
    .form-actions .btn { flex: 0 0 auto; }
}

@media (min-width: 900px) {
    :root { --fs-2xl: 2.625rem; --fs-xl: 1.875rem; }
    .wrap { padding: 0 var(--sp-5); }
    .section { padding: var(--sp-7) 0; }
    .section-lg { padding: var(--sp-8) 0; }

    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }

    .nav-toggle { display: none; }
    .site-nav { display: block !important; margin-left: auto; }
    .site-nav ul { display: flex; align-items: center; gap: var(--sp-1); }
    .site-nav a { padding: var(--sp-2) var(--sp-3); }

    .hero { padding: var(--sp-8) 0; }
    .hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-7); align-items: center; }

    .choices-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
    .choice-card { flex-direction: column; text-align: center; min-height: 190px; justify-content: center; }
    .choice-card .choice-arrow { display: none; }

    .dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-5); align-items: start; }
    .admin-grid { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-5); align-items: start; }

    .table-scroll { margin: 0; padding: 0; }
}

/* =============================================================== printing
   The report has to be genuinely usable printed on a cheap inkjet, or read
   on a phone after "Save as PDF". Backgrounds and navigation are dropped;
   links print their destination so a paper copy is still actionable. */
@media print {
    @page { size: A4; margin: 14mm 12mm; }

    :root { --fs-base: 10.5pt; --fs-sm: 9.5pt; --fs-xs: 8pt;
            --fs-lg: 13pt; --fs-xl: 15pt; --fs-2xl: 19pt; --lh-base: 1.45; }

    body { background: #fff !important; color: #000; font-size: var(--fs-base); }

    .site-header, .site-footer, .site-nav, .nav-toggle, .lang-switch,
    .no-print, .ad-slot, .speak-btn, .offline-bar, .flashes,
    .form-actions, .tabs, .skip-link, button { display: none !important; }

    .wrap { max-width: none; padding: 0; }
    .card, .pathway, .week, .notice, .honesty {
        border: 1px solid #999 !important; box-shadow: none !important;
        background: #fff !important; break-inside: avoid;
        padding: 6pt 8pt; border-radius: 0;
    }
    .facts { background: #fff !important; border-top: 1px solid #ccc; }
    .hero { background: #fff !important; color: #000; padding: 0 0 8pt; border-bottom: 2pt solid #000; }
    .hero h1, .hero p { color: #000 !important; }

    h1, h2, h3 { break-after: avoid; color: #000; }
    h2 { border-bottom: 1pt solid #000; padding-bottom: 3pt; margin-top: 14pt; }
    table, figure, dl, .task { break-inside: avoid; }

    /* A printed report is often read by someone who cannot click. */
    .report-body a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 7.5pt; color: #444; word-break: break-all;
    }

    .badge { border: 0.5pt solid #666; background: #fff !important; color: #000 !important; }
    .print-only { display: block !important; }

    /* Page furniture for a document a family may carry to a college. */
    .report-page-break { break-before: page; }
    .report-footer-note { font-size: 8pt; color: #444; border-top: .5pt solid #999; padding-top: 4pt; }
}

.print-only { display: none; }

/* ======================================================== dark mode
   Only applied when the device asks for it. Kept conservative: the report
   must stay legible, and many of our users have cheap panels where a true
   black background smears text. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ink-900: #f2f6f8; --ink-800: #e4eaee; --ink-700: #c6d0d7;
        --ink-600: #a3b0ba; --ink-500: #8795a1; --ink-400: #6b7a86;
        --ink-300: #44525d; --ink-200: #2c3842; --ink-100: #1f2a33;
        --ink-50:  #151e25; --white:   #1b252d;

        --brand-50: #10261f; --brand-100: #16392e;
        --accent-50: #251a0f; --accent-100: #3a2914;

        --ok-100: #10311f; --warn-100: #322611; --risk-100: #3a1a14; --info-100: #112838;
        --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
        --shadow-md: 0 2px 8px rgba(0,0,0,.5);
    }
    :root:not([data-theme="light"]) body { background: #0f1620; }
    :root:not([data-theme="light"]) img { background: var(--ink-200); }
}

:root[data-theme="dark"] {
    --ink-900: #f2f6f8; --ink-800: #e4eaee; --ink-700: #c6d0d7;
    --ink-600: #a3b0ba; --ink-500: #8795a1; --ink-400: #6b7a86;
    --ink-300: #44525d; --ink-200: #2c3842; --ink-100: #1f2a33;
    --ink-50:  #151e25; --white:   #1b252d;
    --brand-50: #10261f; --brand-100: #16392e;
    --accent-50: #251a0f; --accent-100: #3a2914;
    --ok-100: #10311f; --warn-100: #322611; --risk-100: #3a1a14; --info-100: #112838;
}
:root[data-theme="dark"] body { background: #0f1620; }

/* ====================================================== reduced data mode
   Some Android browsers advertise a data-saving preference. Honour it by
   dropping the gradient and the shadows — both cost nothing visually here
   but do cost paint time on a weak device. */
@media (prefers-reduced-data: reduce) {
    .hero { background: var(--brand-700); }
    .card, .pathway, .week { box-shadow: none; }
}

/* High-contrast preference: thicken every border. */
@media (prefers-contrast: more) {
    .card, .choice, .pathway, input, select, textarea, .btn { border-width: 2px; }
    a { text-decoration: underline; }
}