/* KITEBud — shared styles. Friendly soft-blue look (cloud logo, kite-blue buttons, mascot stickers)
   with a boarding-pass identity. Sticky white top bar, content as rounded cards on a pale sky-blue ground, max 1080px.
   Sections: 1 tokens · 2 base · 3 type · 4 layout · 5 buttons · 6 navigation · 7 footer · 8 cookie banner ·
   9 boarding pass · 10 % tiles · 11 bars & progress · 12 cards & banners · 13 questions & forms ·
   14 FAQ, locked, tables, checklist, toast · 15 motion · 16 journey themes (airport, journal, library, destination) · 17 colour roles */

/* ============ 1. Design tokens (change the look here only) ============
   Colours follow the KITEBud reference design (soft blue, white, navy; the logo's kite blue for main actions).
   Every text pair passes WCAG AA (4.5:1) in light and dark mode; borders of controls, the focus ring and the
   progress fill pass 3:1. The reference grey and green were darkened slightly where they were just under 4.5:1. */
:root{
  /* ground and text */
  --paper:#F2F7FD;        /* page background (pale sky blue) */
  --card:#FFFFFF;
  --ink:#1B3556;          /* main text, headings, dark buttons (deep navy) */
  --muted:#4F6A89;        /* secondary text */
  --line:#D5E3F2;         /* thin dividers */
  --line-strong:#7391B4;  /* borders of answers, inputs and dropdowns (3:1) */
  /* blues */
  --sky:#2F67AE;          /* links, labels, bar fills (readable blue) */
  --sky-soft:#E8F1FB;     /* soft sky: info boxes, tracks, hover */
  --sky-mid:#BFD5EE;      /* decorative: dashed pass lines, button borders */
  /* main accent = the logo's kite blue: main actions, selected states */
  --accent:#669AD6;       /* decorative only (logo blue: dashes, highlights) */
  --accent-strong:#3B73B9;/* main buttons, selected borders */
  --accent-ink:#FFFFFF;   /* text on --accent-strong */
  --accent-soft:#E4EEFA;  /* selected answer, recommended stub, notes */
  --accent-hover:#2F64A6;
  --pink:#F28CA6; --pink-soft:#FDE8EE; /* the mascot's blush: small decorative touches only */
  --gold:#3B73B9; --gold-ink:#FFFFFF; --gold-soft:#E4EEFA; /* older name for the main accent (a few page styles) */
  /* status */
  --ok:#17734B; --ok-soft:#DDF2E7; --bad:#B53A33; --bad-soft:#F8E1DF;
  --focus:#3B73B9;        /* keyboard focus ring (stays blue: clearly different from the yellow borders) */
  --progress:var(--lime); /* progress bar fill */
  /* the dark "board" (footer, % tiles, home "Ready for take-off" box) */
  --board:#1F3D63; --board-fg:#BFDCFF;
  --board-text:#DCE8F6; --board-muted:#B2C6DD; --board-label:#9DB8D6; --board-strong:#FFFFFF; --board-line:rgba(220,232,246,.3); --final-fg:#DCE8F6;
  --flap-line:rgba(0,0,0,.45);
  --skin:#C98E62;         /* (unused since the mascot replaced the home illustration) */
  --logo-bg:#FFFFFF;      /* behind university logos (most are made for white), both modes */
  /* KITEBud accents (owner, 2026-11-05): warm yellow for every visible border, fresh lime as a sparing second accent */
  --bw:2px;               /* one border thickness for cards, controls and containers */
  --edge:#FFD166;         /* the main border colour: cards, inputs, answers, buttons, navigation */
  --edge-strong:#A87B12;  /* darker gold: the baseline of text fields (3.8:1, so an empty field is still visible) and button hover */
  --lime:#CEF26D;         /* selected states, progress, small highlights. Never behind body text except dark ink */
  --lime-soft:#F2FBD9;    /* selected answer fill */
  --lime-ink:#1B3556;     /* text on --lime */
  --sticker-paper:#FFFFFF; --sticker-ink:#1A1A1A; /* the stickers' white edge and caption ink (both modes) */
  /* depth: soft, never heavy */
  --shadow:0 1px 0 var(--line), 0 12px 30px -20px rgba(31,61,99,.45);
  --shadow-pop:0 18px 40px -16px rgba(31,61,99,.45);
  /* typography: Kantumruy Pro for all text (Khmer + Latin); Fredoka for English headings */
  --f-body:"Kantumruy Pro","Noto Sans Khmer",system-ui,sans-serif;
  --f-display:var(--f-body);
  --f-mono:"IBM Plex Mono","Kantumruy Pro",ui-monospace,SFMono-Regular,Menlo,monospace; /* Kantumruy Pro draws Khmer digits */
  --lh-km:1.8; --lh-en:1.6;
  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  /* radii */
  --r-sm:12px; --r:18px; --r-lg:22px; --r-pill:999px;
  --stub:136px;           /* width of a boarding-pass stub */
  --ease:.15s ease;
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
/* dark mode: navy ground, light text (the two blocks must stay the same) */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#0D1A2A; --card:#15263A; --ink:#E5EEF8; --muted:#9FB4CB; --line:#27405C; --line-strong:#5F80A6;
  --sky:#8DBDF2; --sky-soft:#1A3150; --sky-mid:#2C4A6E;
  --accent:#7FAFE6; --accent-strong:#7FB2EE; --accent-ink:#0D1A2A; --accent-soft:#1C3554; --accent-hover:#9CC4F2;
  --pink:#F49DB3; --pink-soft:#3A2230;
  --gold:#7FB2EE; --gold-ink:#0D1A2A; --gold-soft:#1C3554;
  --ok:#5CC896; --ok-soft:#143527; --bad:#EE8078; --bad-soft:#3B1C1A;
  --focus:#7FB2EE;
  --edge-strong:#FFD166; --lime-soft:#2C4A36; --lime-ink:#0D1A2A;
  --board:#0A1522;
  --shadow:0 1px 0 var(--line), 0 12px 30px -20px rgba(0,0,0,.85); --shadow-pop:0 18px 40px -16px rgba(0,0,0,.8);
  color-scheme:dark }}
:root[data-theme="dark"]{
  --paper:#0D1A2A; --card:#15263A; --ink:#E5EEF8; --muted:#9FB4CB; --line:#27405C; --line-strong:#5F80A6;
  --sky:#8DBDF2; --sky-soft:#1A3150; --sky-mid:#2C4A6E;
  --accent:#7FAFE6; --accent-strong:#7FB2EE; --accent-ink:#0D1A2A; --accent-soft:#1C3554; --accent-hover:#9CC4F2;
  --pink:#F49DB3; --pink-soft:#3A2230;
  --gold:#7FB2EE; --gold-ink:#0D1A2A; --gold-soft:#1C3554;
  --ok:#5CC896; --ok-soft:#143527; --bad:#EE8078; --bad-soft:#3B1C1A;
  --focus:#7FB2EE;
  --edge-strong:#FFD166; --lime-soft:#2C4A36; --lime-ink:#0D1A2A;
  --board:#0A1522;
  --shadow:0 1px 0 var(--line), 0 12px 30px -20px rgba(0,0,0,.85); --shadow-pop:0 18px 40px -16px rgba(0,0,0,.8);
  color-scheme:dark }

/* ============ 2. Base ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(84px + env(safe-area-inset-top,0px))}
[hidden]{display:none!important}
img,svg{max-width:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:var(--lh-km);-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
html[lang="en"] body{line-height:var(--lh-en)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--card)}
a{color:var(--sky);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
main{min-height:60vh}

/* ============ 3. Typography ============ */
/* Khmer needs room above and below for stacked vowels and subscripts: headings never go below 1.5 */
h1,h2,h3{margin:0;text-wrap:balance;line-height:1.5;font-weight:700}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{line-height:1.25;letter-spacing:-.01em}
h1{font-size:clamp(1.6rem,4.4vw,2.5rem)}
h2{font-size:clamp(1.3rem,3vw,1.8rem)}
h3{font-size:1.15rem}
.display{font-family:var(--f-display);font-weight:700}
html[lang="en"]{--f-display:"Fredoka","Kantumruy Pro",system-ui,sans-serif}
html[lang="en"] :is(h1,h2,h3){font-family:var(--f-display);font-weight:600;letter-spacing:0}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
/* small ticket-style labels */
.label{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
/* Khmer small labels: no letter-spacing (it pulls stacked letters apart), Khmer font, a bit larger */
html[lang="km"] :is(.label,.pass__band,.tag,th,.gate){font-family:var(--f-body);letter-spacing:0;text-transform:none;font-size:.8rem}

/* ============ 4. Layout ============ */
.wrap{max-width:1080px;margin:0 auto;padding-left:max(var(--s4),env(safe-area-inset-left,0px));padding-right:max(var(--s4),env(safe-area-inset-right,0px))}
.narrow{max-width:720px}
.stack{display:flex;flex-direction:column;gap:var(--s4)}
.stack-lg{display:flex;flex-direction:column;gap:var(--s6)}
.row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.section{padding-block:var(--s8)}
.section-head{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s6);max-width:640px}
.prose{max-width:65ch;display:flex;flex-direction:column;gap:14px}
.prose > h2{padding-left:14px;border-left:5px solid var(--lime)}
.section-head .label{display:inline-flex;align-items:center;gap:8px}
.section-head .label::before{content:"";flex:none;width:18px;height:4px;border-radius:2px;background:var(--lime)}
.prose ul,.prose ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:6px}
@media (max-width:560px){.section{padding-block:var(--s7)}}

/* ============ 5. Buttons ============ */
.btn{--bg:var(--card);--fg:var(--ink);--bd:var(--edge);display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:10px 22px;border-radius:var(--r-pill);border:var(--bw) solid var(--bd);background:var(--bg);color:var(--fg);font:inherit;font-weight:600;line-height:1.5;text-decoration:none;text-align:center;cursor:pointer;transition:background var(--ease),border-color var(--ease),color var(--ease),box-shadow var(--ease)}
.btn:hover{--bg:var(--sky-soft);--bd:var(--edge-strong)}
.btn:active{box-shadow:inset 0 2px 0 rgba(0,0,0,.08)}
/* the main action (class name kept from the first design): green */
.btn--gold{--bg:var(--accent-strong);--fg:var(--accent-ink);--bd:var(--accent-strong)}
.btn--gold:hover{--bg:var(--accent-hover);--bd:var(--accent-hover)}
.btn--ink{--bg:var(--ink);--fg:var(--paper);--bd:var(--ink)}
.btn--ink:hover{--bg:var(--sky);--bd:var(--sky)}
.btn--ghost{--bg:transparent}
.btn--lg{min-height:56px;padding:12px 30px;font-size:1.06rem}
.btn__ico{flex:none;width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn--sm{min-height:40px;padding:6px 16px;font-size:.9rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;box-shadow:none;border-style:dashed} /* disabled: faded and dashed, not colour alone */
.btn[disabled]:hover,.btn[aria-disabled="true"]:hover{--bg:var(--card);--bd:var(--edge)}
.btn--ink[disabled]:hover{--bg:var(--ink);--bd:var(--ink)}
.btn--gold[disabled]:hover{--bg:var(--accent-strong);--bd:var(--accent-strong)}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--sky);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ============ 6. Navigation ============ */
/* the header stays at the top while scrolling: #kite-header (on every page, filled by js/app.js) is the sticky element */
#kite-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50}
.topbar{position:relative;background:var(--card);border-bottom:var(--bw) solid var(--edge)}
.topbar__in{display:flex;align-items:center;gap:var(--s4);min-height:64px}
/* the cloud logo (images/kitebud-logo.png, 759×364). The link text "KITEBud" stays for screen readers; it is just not drawn. */
.logo{display:inline-flex;flex:none;width:96px;height:46px;background:url(../images/kitebud-logo.png) left center/contain no-repeat;text-decoration:none;font-size:0;color:transparent;overflow:hidden}
.logo__mark{display:none}
.nav{display:flex;align-items:center;gap:var(--s1);margin-left:auto}
.nav a{color:var(--ink);text-decoration:none;padding:8px 14px;border-radius:var(--r-pill);font-weight:500;transition:background var(--ease)}
.nav a:hover{background:var(--sky-soft)}
/* active page: tinted pill + bold + underline bar, so it isn't shown by colour alone */
.nav a[aria-current="page"]{background:var(--sky-soft);color:var(--sky);font-weight:700;box-shadow:inset 0 -3px 0 var(--lime)}
.nav .btn{margin-left:6px;min-height:42px;color:var(--fg)} /* keep the button text colour (the .nav a rule would change it) */
.nav .btn:hover{background:var(--bg)}
.langbtn{display:inline-flex;align-items:center;gap:2px;min-height:44px;border:var(--bw) solid var(--edge);border-radius:var(--r-pill);background:transparent;padding:3px 5px;cursor:pointer;font:inherit;color:var(--ink)} /* 44px: a comfortable touch target */
.langbtn span{padding:2px 10px;border-radius:var(--r-pill);font-size:.85rem;font-weight:600;line-height:1.6}
.langbtn span.on{background:var(--ink);color:var(--paper)}
.menubtn{display:none;margin-left:auto;min-height:44px;white-space:nowrap;min-width:44px;border:var(--bw) solid var(--edge);border-radius:var(--r-sm);background:transparent;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;padding:0 12px}
.mobilenav{border-top:var(--bw) solid var(--edge);padding-block:var(--s3)}
.mobilenav a{display:block;padding:12px 4px;color:var(--ink);text-decoration:none;font-weight:500;border-bottom:1px solid var(--line)}
.mobilenav a[aria-current="page"]{font-weight:700}
.mobilenav .btn{margin-top:14px;width:100%;color:var(--fg);display:flex;padding:10px 20px;border-bottom:var(--bw) solid var(--bd)} /* a button, not a menu link: centred text, full border */
/* narrow phones: "KITEBud" + language switch + menu must fit on one row */
@media (max-width:400px){.topbar__in{gap:10px}.logo{width:83px;height:40px}.menubtn{padding:0 10px}}
@media (max-width:820px){
  .nav{display:none}
  .menubtn{display:inline-flex;align-items:center}
  .topbar .langbtn{margin-left:auto}
  .topbar .menubtn{margin-left:0}
}

/* ============ 7. Footer ============ */
.footer{background:var(--board);color:var(--board-text);margin-top:var(--s7)}
.footer .wrap{padding-block:var(--s7)}
.footer a{color:var(--board-fg)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.footer__links{display:flex;flex-direction:column;gap:6px}
.footer__links a,.footer__links button{color:var(--board-fg);text-align:left}
.footer .linkbtn{color:var(--board-fg)}
.footer__disc{margin-top:28px;padding-top:18px;border-top:1px dashed var(--board-line);font-size:.875rem;color:var(--board-muted)}
.footer .logo{width:133px;height:64px}
@media (max-width:720px){.footer__grid{grid-template-columns:1fr}}

/* ============ 8. Cookie banner ============ */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:70;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));padding-top:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));pointer-events:none}
.cookie__card{pointer-events:auto;max-width:720px;margin:0 auto;background:var(--card);border:var(--bw) solid var(--edge);border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:var(--s3);box-shadow:var(--shadow-pop)}
.cookie__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}  /* Allow and Decline: same size, same style */
.cookie__btns .btn{width:100%}
.ck-short{display:none}
/* Phones: shorter text and tighter card, so the banner doesn't cover the test's Next button */
@media (max-width:560px){
  .ck-long{display:none} .ck-short{display:inline}
  .cookie{padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
  .cookie__card{padding:12px 14px;gap:8px}
  .cookie__card h3{font-size:1rem}
  .cookie__btns .btn{min-height:44px}
  body:has(#kite-cookie:not([hidden])){padding-bottom:230px} /* room to scroll everything above the banner */
}

/* ============ 9. Boarding pass (packages, results, majors) ============ */
.pass{--notch:var(--paper);position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--stub);background:var(--card);border-radius:var(--r-lg);border:var(--bw) solid var(--edge);box-shadow:var(--shadow);color:var(--ink)}
/* the two perforation notches where main part and stub meet */
.pass::before,.pass::after{content:"";position:absolute;right:calc(var(--stub) - 10px);width:20px;height:20px;border-radius:50%;background:var(--notch);border:var(--bw) solid var(--edge)}
.pass::before{top:-11px;clip-path:inset(50% 0 0 0)}.pass::after{bottom:-11px;clip-path:inset(0 0 50% 0)}
.pass__main{padding:22px 24px;min-width:0;display:flex;flex-direction:column;gap:10px}
.pass__stub{padding:22px 16px;border-left:var(--bw) dashed var(--edge);display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-width:0}
.pass__band{display:flex;justify-content:space-between;gap:10px;align-items:center;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-bottom:var(--s2);border-bottom:1px dashed var(--line)}
/* the highlighted pass (top match / recommended package): green frame + green stub */
.pass--gold{border:2px solid var(--accent-strong)}
.pass--gold .pass__stub{background:var(--accent-soft);border-radius:0 calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px) 0;border-left-color:var(--accent)}
.pass.single{grid-template-columns:1fr}
.pass.single::before,.pass.single::after{display:none}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:var(--r-pill);background:var(--sky-soft);color:var(--sky);font-weight:600;white-space:nowrap;line-height:1.6}
.tag--gold{background:var(--accent-strong);color:var(--accent-ink)}
.tag--ok{background:var(--ok-soft);color:var(--ok)}
.tag--ok::before{content:"✓"}  /* "Unlocked": shown by a sign, not only by colour */
.tag--bad{background:var(--bad-soft);color:var(--bad)}
@media (max-width:560px){
  .pass{grid-template-columns:1fr}
  .pass::before,.pass::after{display:none}
  .pass__stub{border-left:0;border-top:var(--bw) dashed var(--edge);flex-direction:row;align-items:center;flex-wrap:wrap}
  .pass--gold .pass__stub{border-radius:0 0 calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px);border-top-color:var(--accent)}
}

/* ============ 10. Split-flap % tiles ============ */
.flap{display:inline-flex;gap:3px;font-family:var(--f-mono);font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.flap span{position:relative;display:grid;place-items:center;min-width:1.05em;padding:.24em .12em;background:var(--board);color:var(--board-fg);border-radius:6px;font-size:1em}
.flap span::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--flap-line)}
.flap--lg{font-size:2rem}
.flap--md{font-size:1.35rem}
@media (prefers-reduced-motion:no-preference){
  .flap.anim span{animation:flip .5s cubic-bezier(.3,.7,.4,1) both}
  .flap.anim span:nth-child(2){animation-delay:.08s}.flap.anim span:nth-child(3){animation-delay:.16s}.flap.anim span:nth-child(4){animation-delay:.24s}
}
@keyframes flip{from{transform:rotateX(80deg);opacity:.4}to{transform:none;opacity:1}}

/* ============ 11. Bars and progress ============ */
.bars{display:flex;flex-direction:column;gap:10px}
.bar{display:grid;grid-template-columns:minmax(84px,140px) 1fr minmax(3.2em,auto);gap:10px;align-items:center;font-size:.9rem}
.bar__track{height:10px;border-radius:var(--r-pill);background:var(--sky-soft);overflow:hidden}
.bar__fill{height:100%;border-radius:var(--r-pill);background:var(--sky)}
.bar__val{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right}
.progress{height:12px;border-radius:var(--r-pill);background:var(--sky-soft);overflow:hidden;position:relative;box-shadow:inset 0 0 0 1px var(--edge)}
.progress__fill{height:100%;background:var(--progress);border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px rgba(27,53,86,.35);transition:width .25s ease} /* navy rim: the lime fill stays visible on the pale track */

/* ============ 12. Cards, grids, banners ============ */
.panel{background:var(--card);border-radius:var(--r);padding:var(--s5);box-shadow:var(--shadow);border:var(--bw) solid var(--edge)}
.panel--flat{box-shadow:none}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:1fr}}
@media (max-width:620px){.g2,.g4{grid-template-columns:1fr}}
/* notes: one quiet style (yellow frame, lime edge on the left), so they read as side information, not alerts */
.banner{display:flex;gap:var(--s3);align-items:flex-start;padding:12px 16px;border-radius:var(--r-sm);background:var(--sky-soft);border:var(--bw) solid var(--edge);border-left:5px solid var(--lime);color:var(--ink)}
.banner--info{background:var(--sky-soft)}
.banner--bad{background:var(--bad-soft);border-color:var(--bad);border-left-color:var(--bad)}

/* ============ 13. Questions and forms ============ */
.field{display:flex;flex-direction:column;gap:6px}
.input,select.input{min-height:48px;border:var(--bw) solid var(--edge);border-radius:var(--r-sm);background:var(--card);color:var(--ink);font:inherit;padding:8px 14px;width:100%;box-shadow:inset 0 -2px 0 var(--edge-strong);transition:border-color var(--ease),box-shadow var(--ease)}
.input:focus{border-color:var(--sky);outline:none;box-shadow:0 0 0 3px var(--sky-soft)}
.input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.choices{display:grid;gap:var(--s3)}
.choice{display:flex;align-items:center;gap:14px;min-height:56px;width:100%;text-align:left;padding:12px 18px;border-radius:var(--r);border:var(--bw) solid var(--edge);background:var(--card);color:var(--ink);font:inherit;font-size:1.02rem;line-height:1.6;cursor:pointer;transition:border-color var(--ease),background var(--ease)}
.choice:hover{border-color:var(--edge-strong);background:var(--paper)}
/* selected: blue frame, lime fill, bold text and a filled lime key, so it isn't shown by colour alone */
.choice[aria-pressed="true"],.choice[aria-checked="true"]{border-color:var(--accent-strong);background:var(--lime-soft);font-weight:600}
.choice__key{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-sm);background:var(--sky-soft);color:var(--ink);font-family:var(--f-mono);font-size:.85rem;border:1px solid var(--edge)}
.choice[aria-pressed="true"] .choice__key,.choice[aria-checked="true"] .choice__key{background:var(--lime);color:var(--lime-ink);border-color:var(--accent-strong);font-weight:700}

/* ============ 14. FAQ, locked content, tables, checklist, toast ============ */
details.qa{background:var(--card);border-radius:var(--r-sm);border:var(--bw) solid var(--edge)}
details.qa[open]{box-shadow:inset 5px 0 0 var(--lime)} /* the open answer gets a lime edge on the left, easy to find when scanning */
details.qa summary{cursor:pointer;padding:16px 18px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:var(--s3)}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"+";font-family:var(--f-mono);font-size:1.2rem;color:var(--sky)}
details.qa[open] summary::after{content:"−"}
details.qa .qa__a{padding:0 18px 18px;color:var(--muted)}
.locked{filter:blur(7px);user-select:none;pointer-events:none}
.lockchip{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--muted);padding:2px 10px;border-radius:var(--r-pill);background:var(--sky-soft)}
.tablewrap{overflow-x:auto;border-radius:var(--r-sm);border:var(--bw) solid var(--edge)}
table{border-collapse:collapse;width:100%;font-size:.92rem;background:var(--card)}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;background:var(--paper)}
.check{display:flex;gap:var(--s3);align-items:flex-start;padding:10px 0;border-bottom:1px dashed var(--line);cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--accent-strong);flex:none;margin-top:4px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:var(--r-pill);z-index:80;font-weight:600;max-width:calc(100% - 32px)}

/* ============ 14b. Mascot stickers (images/sticker-*.webp): decorative, always alt="" ============ */
.sticker{display:block;height:auto;max-width:100%;filter:drop-shadow(0 10px 16px rgba(31,61,99,.18))}
/* dark mode: a thin white die-cut edge so the mascot reads on navy */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sticker{filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 10px 16px rgba(0,0,0,.5))} }
:root[data-theme="dark"] .sticker{filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 10px 16px rgba(0,0,0,.5))}
@media (prefers-reduced-motion:no-preference){ .sticker--bob{animation:bob 4s ease-in-out infinite} }
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
/* Stickers with words drawn into the image (the hello bubble; the captions "Major Match!", "Which Way?", "Future Ready!"):
   a real text label is laid over those words, so they follow the chosen language. Nothing is cut out of the image. */
.mascot{position:relative;container-type:inline-size}
.mascot > .sticker{width:100%}
/* the speech bubble (sticker-hello): covers the image's English bubble in the top-right */
.mascot__bubble{position:absolute;top:-1.5%;right:-1.5%;width:53%;min-height:48%;display:grid;place-items:center;margin:0;padding:.6em .8em;
  background:var(--card);color:var(--ink);border:2px solid var(--edge);border-radius:1.4em;box-shadow:var(--shadow);
  font-family:var(--f-display);font-weight:700;font-size:clamp(.78rem,5cqw,1.1rem);line-height:1.45;text-align:center;text-wrap:balance}
html[lang="en"] .mascot__bubble{line-height:1.25}
.mascot__bubble--short{font-size:clamp(.8rem,8cqw,1.15rem)} /* one-word greeting on small stickers */
/* the tail, pointing down-left to the mascot */
.mascot__bubble::after{content:"";position:absolute;left:16%;bottom:-9px;width:16px;height:16px;background:var(--card);
  border-right:2px solid var(--edge);border-bottom:2px solid var(--edge);transform:rotate(45deg);border-bottom-right-radius:4px}
/* a tiny lime sparkle */
.mascot__bubble::before{content:"";position:absolute;top:-5px;right:16%;width:10px;height:10px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 2px var(--card)}
/* the caption at the bottom of a sticker: covers the drawn English caption on the sticker's own white */
.mascot__caption{position:absolute;display:grid;place-items:center;margin:0;padding:0 .2em;background:var(--sticker-paper);color:var(--sticker-ink);
  border-radius:.4em;font-family:var(--f-display);font-weight:700;font-size:8cqw;line-height:1.1;text-align:center;white-space:nowrap}
html[lang="km"] .mascot__caption{font-size:7cqw;line-height:1.5}
.mascot--major-match .mascot__caption{left:14%;right:14%;top:86%;bottom:1.5%}
.mascot--which-way   .mascot__caption{left:20%;right:20%;top:83%;bottom:1.5%}
.mascot--future-ready .mascot__caption{left:10%;right:10%;top:84%;bottom:2%}
/* page header with a sticker on the right (about, FAQ, results, report) */
.with-sticker{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center}
.with-sticker > .sticker,.with-sticker > .mascot{width:clamp(96px,16vw,160px)}
@media (max-width:560px){.with-sticker > .sticker,.with-sticker > .mascot{width:84px}}
/* the soft-blue band behind page headers, as in the reference */
.page-band{background:linear-gradient(180deg,var(--sky-soft),var(--paper));border-radius:var(--r-lg);padding:22px 22px 18px}

/* ============ 15. Motion ============ */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============ 16. Journey themes (owner, 2026-11-05) ============
   KITEBud is one trip in four stages. Each stage re-colours the shared components through tokens, plus a few rules of its own:
   · home                        = the AIRPORT: sky gradient inside an airplane window, boarding passes, yellow CTA, Fredoka
   · test, FAQ, about, privacy,
     checkout                    = the STUDY JOURNAL: periwinkle grid paper, paper cards, binder tabs, Playfair + Nunito (English)
   · report                      = the KNOWLEDGE LIBRARY: the journal, with binder-tab navigation and pill tags
   · results                     = the DESTINATION: journal paper with a sky "arrival" header and a featured top match
   Khmer text always uses Kantumruy Pro (Playfair, Nunito and Caveat have no Khmer letters).
   Every token is set for light AND dark mode (the dark blocks must mirror the light ones). */

/* ---- 16a. Airport (home) ---- */
body[data-page="home"]{
  --sky-top:#0294E1; --sky-bottom:#76D1FF; --frame:#E2E6E9; --frame-lo:#C9D0D6; --frame-hi:#F7F9FA;
  --spark:#FFF100; --cta:#FFF100; --cta-ink:#12202B; --cloud:rgba(255,255,255,.92); --final-bg:#0077C8;
  --paper:#F3FAFF; --card:#FFFFFF; --ink:#12202B; --muted:#4A6176; --line:#E2E6E9; --line-strong:#7A93A8;
  --sky:#006BB4; --sky-soft:#E6F5FD; --sky-mid:#A9DDF6; --label-ink:#005E99; /* links: #0077C8 is just under 4.5:1 on this paper */
  --accent:#009FE3; --accent-strong:#0077C8; --accent-ink:#FFFFFF; --accent-soft:#E6F5FD; --accent-hover:#00629F;
  --gold:#0077C8; --gold-soft:#E6F5FD; --focus:#0077C8;
  --edge:#E2E6E9; --edge-strong:#7A93A8; --lime:#009FE3; --lime-soft:#E6F5FD; --lime-ink:#12202B;
  --board:#0B3A5E;
  --shadow:0 1px 0 rgba(18,32,43,.04), 0 14px 30px -18px rgba(0,80,140,.35);
}
/* ---- 16b. Study journal (test, FAQ, about, privacy, checkout) + library (report) + destination (results) ---- */
body:is([data-page="assessment"],[data-page="results"],[data-page="report"],[data-page="faq"],[data-page="about"],[data-page="privacy"],[data-page="checkout"]){
  --grid:#CDE0F9; --spark:#709AD9; --option:#FFFFFF; --arrive:#009FE3; --arrive-soft:#E6F5FD; --band-top:#BFE9FF;
  --paper:#DCE7F7; --card:#FAFCFF; --ink:#2B3E6B; --muted:#4A5C86; --line:#CDE0F9; --line-strong:#7C98C8;
  --sky:#3763A7; --sky-soft:#E9F0FB; --sky-mid:#B8CCEE; --label-ink:#3763A7;
  --accent:#709AD9; --accent-strong:#3763A7; --accent-ink:#FFFFFF; --accent-soft:#DCE7F7; --accent-hover:#2C548F;
  --gold:#3763A7; --gold-soft:#DCE7F7; --focus:#3763A7;
  --edge:#9BB8EA; --edge-strong:#3763A7; --lime:#698CC7; --lime-soft:#DCE7F7; --lime-ink:#FFFFFF;
  --board:#2B3E6B;
  --shadow:0 4px 15px rgba(105,140,199,.15); --shadow-pop:0 18px 40px -16px rgba(43,62,107,.35);
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
}
/* dark mode: night flight (home) and the journal by lamplight (the two blocks must stay the same) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body[data-page="home"]{
    --sky-top:#0C4677; --sky-bottom:#2B7DB5; --frame:#4A5560; --frame-lo:#2B333B; --frame-hi:#66727D;
    --cta-ink:#12202B; --cloud:rgba(220,236,250,.22); --final-bg:#0B3A5E;
    --paper:#0B1A2B; --card:#13263B; --ink:#E6F1FA; --muted:#A3B8CB; --line:#24405C; --line-strong:#5F80A6;
    --sky:#7CC8F2; --sky-soft:#173451; --sky-mid:#245178; --label-ink:#9AD6F7;
    --accent:#4FB8EC; --accent-strong:#5CC0F0; --accent-ink:#0B1A2B; --accent-soft:#173451; --accent-hover:#86D1F5;
    --gold:#5CC0F0; --gold-soft:#173451; --focus:#7CC8F2;
    --edge:#3A4C5E; --edge-strong:#7CC8F2; --lime:#4FB8EC; --lime-soft:#173451; --lime-ink:#0B1A2B;
    --board:#081422; --shadow:0 1px 0 rgba(0,0,0,.3), 0 14px 30px -18px rgba(0,0,0,.8);
  }
  :root:not([data-theme="light"]) body:is([data-page="assessment"],[data-page="results"],[data-page="report"],[data-page="faq"],[data-page="about"],[data-page="privacy"],[data-page="checkout"]){
    --grid:rgba(155,184,234,.07); --spark:#9BB8EA; --option:#1F2C4B; --arrive:#4FB8EC; --arrive-soft:#173451; --band-top:#173D63;
    --paper:#111A2E; --card:#1A2540; --ink:#E3EAF8; --muted:#A9B8D6; --line:#2A3A60; --line-strong:#6F86B8;
    --sky:#9BB8EA; --sky-soft:#22305A; --sky-mid:#34477A; --label-ink:#B8CCF0;
    --accent:#9BB8EA; --accent-strong:#9BB8EA; --accent-ink:#111A2E; --accent-soft:#22305A; --accent-hover:#B8CCF0;
    --gold:#9BB8EA; --gold-soft:#22305A; --focus:#9BB8EA;
    --edge:#34477A; --edge-strong:#9BB8EA; --lime:#9BB8EA; --lime-soft:#2A3A66; --lime-ink:#111A2E;
    --board:#0B1222; --shadow:0 4px 15px rgba(0,0,0,.35); --shadow-pop:0 18px 40px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] body[data-page="home"]{
  --sky-top:#0C4677; --sky-bottom:#2B7DB5; --frame:#4A5560; --frame-lo:#2B333B; --frame-hi:#66727D;
  --cta-ink:#12202B; --cloud:rgba(220,236,250,.22); --final-bg:#0B3A5E;
  --paper:#0B1A2B; --card:#13263B; --ink:#E6F1FA; --muted:#A3B8CB; --line:#24405C; --line-strong:#5F80A6;
  --sky:#7CC8F2; --sky-soft:#173451; --sky-mid:#245178; --label-ink:#9AD6F7;
  --accent:#4FB8EC; --accent-strong:#5CC0F0; --accent-ink:#0B1A2B; --accent-soft:#173451; --accent-hover:#86D1F5;
  --gold:#5CC0F0; --gold-soft:#173451; --focus:#7CC8F2;
  --edge:#3A4C5E; --edge-strong:#7CC8F2; --lime:#4FB8EC; --lime-soft:#173451; --lime-ink:#0B1A2B;
  --board:#081422; --shadow:0 1px 0 rgba(0,0,0,.3), 0 14px 30px -18px rgba(0,0,0,.8);
}
:root[data-theme="dark"] body:is([data-page="assessment"],[data-page="results"],[data-page="report"],[data-page="faq"],[data-page="about"],[data-page="privacy"],[data-page="checkout"]){
  --grid:rgba(155,184,234,.07); --spark:#9BB8EA; --option:#1F2C4B; --arrive:#4FB8EC; --arrive-soft:#173451; --band-top:#173D63;
  --paper:#111A2E; --card:#1A2540; --ink:#E3EAF8; --muted:#A9B8D6; --line:#2A3A60; --line-strong:#6F86B8;
  --sky:#9BB8EA; --sky-soft:#22305A; --sky-mid:#34477A; --label-ink:#B8CCF0;
  --accent:#9BB8EA; --accent-strong:#9BB8EA; --accent-ink:#111A2E; --accent-soft:#22305A; --accent-hover:#B8CCF0;
  --gold:#9BB8EA; --gold-soft:#22305A; --focus:#9BB8EA;
  --edge:#34477A; --edge-strong:#9BB8EA; --lime:#9BB8EA; --lime-soft:#2A3A66; --lime-ink:#111A2E;
  --board:#0B1222; --shadow:0 4px 15px rgba(0,0,0,.35); --shadow-pop:0 18px 40px -16px rgba(0,0,0,.8);
}

/* tokens defined from other tokens must be set again here, or they keep the values from :root */
body[data-page]{--progress:var(--lime)}

/* ---- 16c. Typography per stage (English only; Khmer keeps Kantumruy Pro everywhere) ---- */
html[lang="en"] body[data-page="home"] :is(h1,h2,h3){font-weight:700;letter-spacing:-.02em}
html[lang="en"] body:is([data-page="assessment"],[data-page="results"],[data-page="report"],[data-page="faq"],[data-page="about"],[data-page="privacy"],[data-page="checkout"]){
  --f-body:"Nunito","Kantumruy Pro",system-ui,sans-serif;
  --f-display:"Playfair Display","Kantumruy Pro",Georgia,serif;
}
html[lang="en"] body:is([data-page="assessment"],[data-page="results"],[data-page="report"],[data-page="faq"],[data-page="about"],[data-page="privacy"],[data-page="checkout"]) :is(h1,h2,h3){font-weight:600;letter-spacing:-.01em}
html[lang="en"] body:is([data-page="assessment"],[data-page="results"],[data-page="report"],[data-page="faq"],[data-page="about"],[data-page="privacy"],[data-page="checkout"]){font-weight:500}
/* small handwritten labels (Caveat): only the decorative kicker above a page title, English only.
   Not on the report: its kicker carries the visitor code, and data is never handwritten. */
html[lang="en"] body:is([data-page="assessment"],[data-page="results"],[data-page="faq"],[data-page="about"],[data-page="privacy"],[data-page="checkout"]) :is(.page-band .label,.kicker){
  font-family:"Caveat",var(--f-body);font-size:1.35rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--label-ink);line-height:1.1}

/* the mascot always speaks in the playful KITEBud voice (Fredoka; Khmer letters fall back to Kantumruy Pro) */
:is(.mascot__bubble,.mascot__caption){font-family:"Fredoka","Kantumruy Pro",system-ui,sans-serif}

/* ---- 16d. Shared micro-interactions (all stages; switched off by prefers-reduced-motion in section 15) ---- */
.btn{transition:background var(--ease),border-color var(--ease),color var(--ease),box-shadow var(--ease),transform var(--ease)}
.btn:hover:not([disabled]):not([aria-disabled="true"]){transform:translateY(-1px)}

/* ---- 16e. Airport components (home) ---- */
body[data-page="home"] .section-head .label{background:var(--sky-soft);color:var(--label-ink);padding:4px 12px;border-radius:var(--r-pill);width:max-content}
body[data-page="home"] .section-head .label::before{width:14px;height:14px;border-radius:0;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12 22 3l-6 18-4-7-10-2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12 22 3l-6 18-4-7-10-2z'/%3E%3C/svg%3E") center/contain no-repeat}
body[data-page="home"] :is(.pass,.panel,details.qa){border-width:1px;border-color:var(--line)}
body[data-page="home"] .mascot__bubble{border-color:var(--ink)}
body[data-page="home"] .mascot__bubble::before{background:var(--spark);box-shadow:0 0 0 2px var(--ink)}

/* ---- 16f. Journal components ---- */
/* paper surfaces: a hairline instead of a heavy frame, soft periwinkle shadow */
body:is([data-page="assessment"],[data-page="results"],[data-page="report"],[data-page="faq"],[data-page="about"],[data-page="privacy"],[data-page="checkout"]) :is(.panel,.pass,details.qa,.tablewrap,.cookie__card){border-width:1px;border-color:var(--line)}
/* page headers = a journal cover with binder rings down the left */
body:is([data-page="assessment"],[data-page="report"],[data-page="faq"],[data-page="about"],[data-page="privacy"],[data-page="checkout"]) .page-band{
  position:relative;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);padding:22px 22px 20px 48px;border-radius:20px}
body:is([data-page="assessment"],[data-page="report"],[data-page="faq"],[data-page="about"],[data-page="privacy"],[data-page="checkout"]) .page-band::before{
  content:"";position:absolute;left:16px;top:16px;bottom:16px;width:14px;
  background:radial-gradient(circle at 7px 7px,var(--paper) 0 4px,var(--edge) 4.5px 6px,transparent 6.5px) 0 0/14px 26px repeat-y}
/* answers: journal options on white paper; selected = periwinkle fill, steel frame, filled key and a small sparkle */
body:is([data-page="assessment"],[data-page="results"],[data-page="report"],[data-page="faq"],[data-page="about"],[data-page="privacy"],[data-page="checkout"]) .choice{
  background:var(--option);border-color:var(--edge);box-shadow:0 1px 0 var(--line)}
body:is([data-page="assessment"],[data-page="results"],[data-page="report"],[data-page="faq"],[data-page="about"],[data-page="privacy"],[data-page="checkout"]) .choice:hover{
  border-color:var(--accent-strong);background:var(--option);transform:translateY(-1px)}
body:is([data-page="assessment"],[data-page="results"],[data-page="report"],[data-page="faq"],[data-page="about"],[data-page="privacy"],[data-page="checkout"]) :is(.choice[aria-pressed="true"],.choice[aria-checked="true"]){
  background:var(--lime-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23709AD9' d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z'/%3E%3C/svg%3E") right 16px center/16px no-repeat;
  border-color:var(--accent-strong);padding-right:42px}
body:is([data-page="assessment"],[data-page="results"],[data-page="report"],[data-page="faq"],[data-page="about"],[data-page="privacy"],[data-page="checkout"]) :is(.choice[aria-pressed="true"],.choice[aria-checked="true"]) .choice__key{
  background:var(--accent-strong);color:var(--accent-ink);border-color:var(--accent-strong)}
body:is([data-page="assessment"],[data-page="results"],[data-page="report"],[data-page="faq"],[data-page="about"],[data-page="privacy"],[data-page="checkout"]) .choice__key{background:var(--sky-soft);border-color:var(--line)}
body:is([data-page="assessment"],[data-page="results"],[data-page="report"],[data-page="faq"],[data-page="about"],[data-page="privacy"],[data-page="checkout"]) .input{box-shadow:inset 0 -2px 0 var(--edge-strong)}
/* binder tabs (the test's four parts; the report's three majors) */
.binder{display:flex;gap:6px;margin-bottom:2px}
.binder__tab{min-width:44px;padding:5px 12px 4px;border-radius:12px 12px 4px 4px;background:var(--sky-mid);color:var(--ink);font-family:var(--f-mono);font-size:.85rem;font-weight:600;text-align:center;line-height:1.5}
.binder__tab.is-done{background:var(--accent-soft);color:var(--muted)}
.binder__tab.is-done::after{content:" ✓"}
.binder__tab.is-on{background:var(--accent-strong);color:var(--accent-ink);transform:translateY(-3px);box-shadow:0 3px 0 var(--accent-strong)}
/* the test: each screen is one journal page */
body[data-page="assessment"] .qwrap{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:26px clamp(18px,4vw,36px) 30px;margin-block:28px 44px}
@media (max-width:560px){ body[data-page="assessment"] .qwrap{margin-block:16px 28px;border-radius:16px} }
@media (prefers-reduced-motion:no-preference){ body[data-page="assessment"] #app > *{animation:page-in .22s ease both} }
@keyframes page-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- 16g. Library (report) ---- */
body[data-page="report"] .jump a{border:0;border-radius:12px 12px 4px 4px;background:var(--sky-mid);color:var(--ink);box-shadow:0 2px 0 var(--edge)}
body[data-page="report"] .jump a:hover{background:var(--accent-strong);color:var(--accent-ink)}
body[data-page="report"] .careers span{background:var(--sky-soft);border-radius:var(--r-pill)}
body[data-page="report"] .reasons li{border:1px solid var(--line);background:var(--card);box-shadow:0 1px 0 var(--line)}
body[data-page="report"] .sub h3 .label{font-family:var(--f-mono)}

/* ---- 16h. Destination (results) ---- */
/* arrival header: from sky to journal, with a dotted flight path that lands at the mascot */
body[data-page="results"] .page-band{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--band-top),var(--paper) 78%);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:24px}
body[data-page="results"] .page-band::after{content:"";position:absolute;left:22px;right:28%;bottom:14px;height:22px;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23009FE3' d='M2 12 22 3l-6 18-4-7-10-2z'/%3E%3C/svg%3E") right center/20px no-repeat,
    radial-gradient(circle,var(--arrive) 0 1.6px,transparent 2px) left center/12px 12px repeat-x;
  opacity:.8}
body[data-page="results"] .page-band > .stack{padding-bottom:22px}
/* the three matches: #1 is the featured arrival ticket across the full width; #2 and #3 side by side */
.matches{display:grid;gap:18px}
@media (min-width:821px){ .matches{grid-template-columns:1fr 1fr} .matches > :first-child{grid-column:1/-1} }
body[data-page="results"] .matches > .pass{border:1px solid var(--line)}
body[data-page="results"] .matches > .pass--gold{border:2px solid var(--arrive);border-top-width:8px;box-shadow:var(--shadow-pop)}
body[data-page="results"] .matches > .pass--gold .pass__stub{background:var(--arrive-soft);border-left-color:var(--arrive);border-top-color:var(--arrive)}
body[data-page="results"] .matches > .pass--gold .mname{font-size:clamp(1.4rem,3vw,1.8rem)}
/* #2 and #3 are half width on wide screens: the stub goes along the bottom, so the bars keep their room */
@media (min-width:821px){
  body[data-page="results"] .matches > :not(:first-child){grid-template-columns:1fr}
  body[data-page="results"] .matches > :not(:first-child)::before,body[data-page="results"] .matches > :not(:first-child)::after{display:none}
  body[data-page="results"] .matches > :not(:first-child) .pass__stub{border-left:0;border-top:2px dashed var(--edge);flex-direction:row;align-items:center;flex-wrap:wrap}
}
@media (prefers-reduced-motion:no-preference){
  .matches > *{animation:arrive .5s cubic-bezier(.2,.7,.3,1) both}
  .matches > :nth-child(2){animation-delay:.08s} .matches > :nth-child(3){animation-delay:.16s}
}
@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ============ 17. Colour roles (owner, 2026-11-05): more colour from the SAME two palettes ============
   Two colour systems with a meaning, used the same way on every page:
   · the four test parts:  A future jobs = sky · B interests = periwinkle · C personality = yellow · D strengths = steel
     (the test's binder tabs and progress bar, the start screen, home "What we measure", the About weights)
   · the three matches:   #1 = sky · #2 = periwinkle · #3 = steel (results cards, report tabs and report sections)
   · yellow = "your choice / the next step": the selected answer's key, the main buttons on home, a highlighter stroke
   Every value below already belongs to the airport or the journal palette. Light swatches always carry dark ink. */
body[data-page]{
  --part-a:#009FE3; --part-a-soft:#76D1FF; --part-b:#698CC7; --part-b-soft:#9BB8EA;
  --part-c:#FFF100; --part-c-soft:#FFF100; --part-d:#3763A7; --part-d-soft:#CDE0F9;
  --rank-1:#009FE3; --rank-1-soft:#76D1FF; --rank-2:#698CC7; --rank-2-soft:#9BB8EA; --rank-3:#3763A7; --rank-3-soft:#CDE0F9;
  --swatch-ink:#2B3E6B; --highlight:#FFF100;
  --band-1:#FFFFFF; --band-2:#DCE7F7;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body[data-page]{--rank-3:#709AD9; --highlight:#34477A; --band-1:#13263B; --band-2:#173451} }
:root[data-theme="dark"] body[data-page]{--rank-3:#709AD9; --highlight:#34477A; --band-1:#13263B; --band-2:#173451}
[data-part="A"],[data-k="A"]{--part:var(--part-a);--part-soft:var(--part-a-soft)}
[data-part="B"],[data-k="B"]{--part:var(--part-b);--part-soft:var(--part-b-soft)}
[data-part="C"],[data-k="C"]{--part:var(--part-c);--part-soft:var(--part-c-soft)}
[data-part="D"],[data-k="D"]{--part:var(--part-d);--part-soft:var(--part-d-soft)}
[data-rank="1"]{--rank:var(--rank-1);--rank-soft:var(--rank-1-soft)}
[data-rank="2"]{--rank:var(--rank-2);--rank-soft:var(--rank-2-soft)}
[data-rank="3"]{--rank:var(--rank-3);--rank-soft:var(--rank-3-soft)}

/* the test: binder tabs in their part colour — ahead = outlined, done = filled + ✓, current = filled, raised, inked */
.binder__tab[data-k]{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 2px var(--part-soft)}
.binder__tab[data-k].is-done{background:var(--part-soft);color:var(--swatch-ink);box-shadow:none}
.binder__tab[data-k].is-on{background:var(--part-soft);color:var(--swatch-ink);transform:translateY(-4px);box-shadow:0 0 0 2px var(--swatch-ink),0 4px 0 var(--swatch-ink)}
[data-part] .progress__fill{background:var(--part)}
.parts [data-k]{border-top:6px solid var(--part)}
/* the selected answer: a yellow key ("your choice") on the periwinkle fill */
body:is([data-page="assessment"],[data-page="results"],[data-page="report"],[data-page="faq"],[data-page="about"],[data-page="privacy"],[data-page="checkout"]) :is(.choice[aria-pressed="true"],.choice[aria-checked="true"]) .choice__key{
  background:var(--part-c);color:var(--swatch-ink);border-color:var(--swatch-ink)}
/* About: the four weights in their part colours (job = A, interest = B, strength = D, personality = C) */
.weights div:has([data-weight="job"]){border-top:6px solid var(--part-a)}
.weights div:has([data-weight="interest"]){border-top:6px solid var(--part-b)}
.weights div:has([data-weight="pers"]){border-top:6px solid var(--part-c)}
.weights div:has([data-weight="strength"]){border-top:6px solid var(--part-d)}
/* results and report: each match keeps its rank colour */
body[data-page="results"] .matches > [data-rank]:not(:first-child){border-top:6px solid var(--rank)}
body[data-page="report"] .major[data-rank] > .pass{border-top:6px solid var(--rank)}
body[data-page="report"] .jump a[data-rank]{background:var(--rank-soft);color:var(--swatch-ink);box-shadow:0 2px 0 var(--rank)}
body[data-page="report"] .jump a[data-rank]:hover{background:var(--rank);color:var(--accent-ink)}
/* journal kickers: a yellow highlighter stroke under the words */
body:is([data-page="assessment"],[data-page="results"],[data-page="report"],[data-page="faq"],[data-page="about"],[data-page="privacy"],[data-page="checkout"]) :is(.page-band .label,.kicker){
  width:max-content;max-width:100%;padding-inline:3px;background:linear-gradient(transparent 58%,var(--highlight) 58%,var(--highlight) 94%,transparent 94%)}