/* GradRun — Material 3 Expressive design system.
   Colour roles follow Material 3 naming. Every subject category and career cluster owns one hue (the .hue-* classes),
   used the same way on chips, avatars, cards and bars across the site. Shapes come from the inline clipPath defs in layout.php. */

/* ---------- Tokens ---------- */
:root{
  /* primary ultraviolet, secondary coral, tertiary lime */
  --primary:#5B3DF5; --on-primary:#FFFFFF; --primary-c:#E5DEFF; --on-primary-c:#1B0066;
  --secondary:#D6285F; --on-secondary:#FFFFFF; --secondary-c:#FFD9E0; --on-secondary-c:#3F0017;
  --tertiary:#3E7D00; --on-tertiary:#FFFFFF; --tertiary-c:#CDFF9A; --on-tertiary-c:#0F2600;
  --mari:#FFB800; --on-mari:#2B1B00; --mari-c:#FFE8A6; --on-mari-c:#3A2500;
  --error:#BA1A1A; --on-error:#FFFFFF; --error-c:#FFDAD6; --on-error-c:#410002;
  --surface:#FBF8FF; --surface-dim:#DBD8E3; --surface-bright:#FBF8FF;
  --sc-lowest:#FFFFFF; --sc-low:#F5F2FB; --sc:#EFECF6; --sc-high:#E9E6F0; --sc-highest:#E3E0EA;
  --on-surface:#1B1B22; --on-surface-v:#47464F; --outline:#78767F; --outline-v:#C9C5D0;
  --inverse-surface:#302F37; --inverse-on:#F2EFF8; --inverse-primary:#C7BFFF;
  --scrim:rgba(0,0,0,.4); --shadow:0 1px 2px rgba(27,27,34,.18),0 2px 6px 2px rgba(27,27,34,.10);
  --shadow-lg:0 4px 8px 3px rgba(27,27,34,.12),0 1px 3px rgba(27,27,34,.22);
  /* hues: fg / container / on-container */
  --lime:#3E7D00; --lime-c:#CDFF9A; --lime-on:#0F2600;
  --sky:#0069A8; --sky-c:#C6EBFF; --sky-on:#00263A;
  --violet:#5B3DF5; --violet-c:#E5DEFF; --violet-on:#1B0066;
  --gold:#7A5200; --gold-c:#FFE8A6; --gold-on:#2B1B00;
  --coral:#C2185B; --coral-c:#FFD9E0; --coral-on:#3F0017;
  --teal:#00796B; --teal-c:#B2F2E6; --teal-on:#00332D;
  --orange:#C64B00; --orange-c:#FFDBC9; --orange-on:#381200;
  --magenta:#9B27AF; --magenta-c:#FBD7FF; --magenta-on:#33003D;
  --fuchsia:#B0208F; --fuchsia-c:#FFD7F3; --fuchsia-on:#3A0030;
  --green:#1B8A3E; --green-c:#C2F6CB; --green-on:#00210A;
  --indigo:#2F55D4; --indigo-c:#DCE3FF; --indigo-on:#001453;
  /* shape */
  --sh-xs:4px; --sh-sm:8px; --sh-md:12px; --sh-lg:16px; --sh-lg2:20px; --sh-xl:28px; --sh-xl2:32px; --sh-xxl:48px; --sh-full:999px;
  /* motion */
  --spring:cubic-bezier(.34,1.56,.64,1); --std:cubic-bezier(.2,0,0,1); --fast:150ms; --mid:300ms; --slow:500ms;
  /* type */
  --f-display:"Outfit",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --nav-h:0px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --primary:#C7BFFF; --on-primary:#2C00A6; --primary-c:#4322D8; --on-primary-c:#E5DEFF;
  --secondary:#FFB1C2; --on-secondary:#65002E; --secondary-c:#8E1A4A; --on-secondary-c:#FFD9E0;
  --tertiary:#A6EE5A; --on-tertiary:#1B3700; --tertiary-c:#2D5A00; --on-tertiary-c:#CDFF9A;
  --mari:#FFD15C; --on-mari:#3A2500; --mari-c:#5A3C00; --on-mari-c:#FFE8A6;
  --error:#FFB4AB; --on-error:#690005; --error-c:#93000A; --on-error-c:#FFDAD6;
  --surface:#131218; --surface-dim:#131218; --surface-bright:#39383F;
  --sc-lowest:#0E0D13; --sc-low:#1B1A21; --sc:#1F1E25; --sc-high:#2A292F; --sc-highest:#35343A;
  --on-surface:#E5E1EB; --on-surface-v:#C9C5D0; --outline:#928F99; --outline-v:#47464F;
  --inverse-surface:#E5E1EB; --inverse-on:#302F37; --inverse-primary:#5B3DF5;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 2px 6px 2px rgba(0,0,0,.3); --shadow-lg:0 4px 8px 3px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.5);
  --lime:#B1F26E; --lime-c:#2A5500; --lime-on:#CDFF9A;
  --sky:#8FD4FF; --sky-c:#004A70; --sky-on:#C6EBFF;
  --violet:#C7BFFF; --violet-c:#4322D8; --violet-on:#E5DEFF;
  --gold:#FFD15C; --gold-c:#5A3C00; --gold-on:#FFE8A6;
  --coral:#FFB1C2; --coral-c:#8E1A4A; --coral-on:#FFD9E0;
  --teal:#7EE0CF; --teal-c:#005048; --teal-on:#B2F2E6;
  --orange:#FFB68E; --orange-c:#8A3300; --orange-on:#FFDBC9;
  --magenta:#F0B0FF; --magenta-c:#6E0A80; --magenta-on:#FBD7FF;
  --fuchsia:#FFACE3; --fuchsia-c:#7E0063; --fuchsia-on:#FFD7F3;
  --green:#9EE8A8; --green-c:#0E5F2A; --green-on:#C2F6CB;
  --indigo:#B6C4FF; --indigo-c:#1D3FB0; --indigo-on:#DCE3FF;
  color-scheme:dark;
}
/* hue classes: one per subject category / career cluster / interest type */
.hue-lime{--hue:var(--lime);--hue-c:var(--lime-c);--hue-on:var(--lime-on)}
.hue-sky{--hue:var(--sky);--hue-c:var(--sky-c);--hue-on:var(--sky-on)}
.hue-violet{--hue:var(--violet);--hue-c:var(--violet-c);--hue-on:var(--violet-on)}
.hue-gold{--hue:var(--gold);--hue-c:var(--gold-c);--hue-on:var(--gold-on)}
.hue-coral{--hue:var(--coral);--hue-c:var(--coral-c);--hue-on:var(--coral-on)}
.hue-teal{--hue:var(--teal);--hue-c:var(--teal-c);--hue-on:var(--teal-on)}
.hue-orange{--hue:var(--orange);--hue-c:var(--orange-c);--hue-on:var(--orange-on)}
.hue-magenta{--hue:var(--magenta);--hue-c:var(--magenta-c);--hue-on:var(--magenta-on)}
.hue-fuchsia{--hue:var(--fuchsia);--hue-c:var(--fuchsia-c);--hue-on:var(--fuchsia-on)}
.hue-green{--hue:var(--green);--hue-c:var(--green-c);--hue-on:var(--green-on)}
.hue-indigo{--hue:var(--indigo);--hue-c:var(--indigo-c);--hue-on:var(--indigo-on)}
.hue-primary{--hue:var(--primary);--hue-c:var(--primary-c);--hue-on:var(--on-primary-c)}
.hue-secondary{--hue:var(--secondary);--hue-c:var(--secondary-c);--hue-on:var(--on-secondary-c)}
.hue-tertiary{--hue:var(--tertiary);--hue-c:var(--tertiary-c);--hue-on:var(--on-tertiary-c)}
.hue-mari{--hue:var(--mari);--hue-c:var(--mari-c);--hue-on:var(--on-mari-c)}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--surface);color:var(--on-surface);font-family:var(--f-body);font-size:17px;line-height:1.55;padding-bottom:var(--nav-h);
  transition:background-color var(--mid) var(--std),color var(--mid) var(--std)}
img,svg{max-width:100%}
a{color:var(--primary);text-decoration-thickness:1.5px;text-underline-offset:3px}
h1,h2,h3,h4{line-height:1.1;margin:0;text-wrap:balance;font-family:var(--f-display);color:var(--on-surface)}
h1{font-weight:800;font-size:clamp(2.3rem,5.4vw,4rem);letter-spacing:-.025em;line-height:1.02}
h2{font-weight:700;font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.02em}
h3{font-weight:700;font-size:1.25rem;letter-spacing:-.01em}
p{margin:0}
::selection{background:var(--primary-c);color:var(--on-primary-c)}
.skip{position:absolute;left:-999px;top:8px;background:var(--inverse-surface);color:var(--inverse-on);padding:10px 16px;border-radius:var(--sh-full);z-index:100;font-weight:600;text-decoration:none}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}

/* Material Symbols */
.ms{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";-webkit-font-smoothing:antialiased;
  font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 24;flex:none;user-select:none;overflow:hidden;width:1em;height:1em}
.ms.fill{font-variation-settings:"FILL" 1,"wght" 500,"GRAD" 0,"opsz" 24}
.ms.sm{font-size:20px}.ms.xs{font-size:18px}.ms.lg{font-size:32px}.ms.xl{font-size:40px}
html:not(.icons-ready) .ms{visibility:hidden}

/* ---------- Layout ---------- */
.inner,.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.wrap{padding-block:40px 72px;display:grid;gap:44px}
.narrow{max-width:800px}
.stack{display:grid;gap:14px;align-content:start}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.between{justify-content:space-between}
.muted{color:var(--on-surface-v)}
.small{font-size:.9rem}
.lede{color:var(--on-surface-v);font-size:1.15rem;max-width:62ch;line-height:1.5}
.label{font:600 .82rem/1.3 var(--f-body);color:var(--on-surface-v)}
.overline{font:700 .95rem/1.3 var(--f-display);color:var(--primary);letter-spacing:0}
.code{font-family:var(--f-mono);font-size:.78em;font-weight:600;color:var(--on-surface-v);letter-spacing:.02em;background:var(--sc-high);border-radius:6px;padding:1px 6px}
.divider{height:1px;background:var(--outline-v);border:0;margin:0}
.sh-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Top app bar ---------- */
.site-head{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.site-head .inner{display:flex;align-items:center;gap:8px;min-height:72px}
.brand{display:inline-flex;align-items:center;color:var(--on-surface);text-decoration:none;border-radius:8px;padding:6px 2px}
.brand .logo{display:block;height:26px;width:auto}
.site-nav{display:flex;gap:2px;margin-left:28px;flex:1}
.site-nav a{display:inline-flex;align-items:center;gap:6px;color:var(--on-surface-v);text-decoration:none;padding:10px 16px;border-radius:var(--sh-full);font-weight:600;font-size:.95rem;
  transition:background-color var(--fast) var(--std),color var(--fast) var(--std),border-radius var(--mid) var(--spring)}
.site-nav a:hover{background:var(--sc-high);color:var(--on-surface)}
.site-nav a:active{border-radius:var(--sh-md)}
.site-nav a[aria-current="page"]{background:var(--secondary-c);color:var(--on-secondary-c)}
.head-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
@media (max-width:900px){
  .site-nav,.site-head .head-cta{display:none}
  .site-head .inner{min-height:64px}
  .brand .logo{height:22px}
  :root{--nav-h:84px}
}

/* Navigation bar (mobile) */
.navbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--sc);padding:8px max(8px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right));
  grid-template-columns:repeat(5,1fr);box-shadow:0 -1px 0 var(--outline-v)}
.navbar a{display:grid;justify-items:center;gap:4px;text-decoration:none;color:var(--on-surface-v);font:600 .72rem/1 var(--f-body);padding:4px 0}
.navbar a .ms{padding:4px 18px;border-radius:var(--sh-full);transition:background-color var(--fast) var(--std),transform var(--mid) var(--spring);width:auto;height:auto}
.navbar a:active .ms{transform:scale(.92)}
.navbar a[aria-current="page"]{color:var(--on-surface)}
.navbar a[aria-current="page"] .ms{background:var(--secondary-c);color:var(--on-secondary-c);font-variation-settings:"FILL" 1,"wght" 500,"GRAD" 0,"opsz" 24}
@media (max-width:900px){.navbar{display:grid}}
@media print{.navbar{display:none}}

/* ---------- Footer ---------- */
.site-foot{margin-top:56px;padding:0 0 24px}
.site-foot .inner{background:var(--sc-low);border-radius:var(--sh-xxl) var(--sh-xxl) var(--sh-lg) var(--sh-lg);padding:44px 40px 36px;display:grid;gap:28px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.site-foot .brand .logo{height:28px}
.site-foot p{color:var(--on-surface-v);font-size:.95rem;max-width:52ch;margin-top:12px}
.foot-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;align-content:start}
.foot-nav a{color:var(--on-surface);text-decoration:none;font-weight:600;padding:8px 12px;border-radius:var(--sh-full);display:inline-flex;align-items:center;gap:8px;font-size:.95rem}
.foot-nav a:hover{background:var(--sc-high)}
.foot-nav .ms{color:var(--primary);font-size:20px}
.site-foot .fine{grid-column:1/-1;font-size:.85rem;color:var(--on-surface-v);max-width:none;border-top:1px solid var(--outline-v);padding-top:18px;margin:0;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
.site-foot .fine .made{display:inline-flex;align-items:center;gap:6px;color:var(--on-surface);font-weight:600;white-space:nowrap}
.site-foot .fine .made i{display:inline-block;width:14px;height:10px;border-radius:2px;background:linear-gradient(#FF9933 33%,#fff 33% 66%,#138808 66%);box-shadow:0 0 0 1px var(--outline-v)}
@media (max-width:700px){.site-foot .inner{grid-template-columns:1fr;padding:32px 22px 28px;border-radius:var(--sh-xl2) var(--sh-xl2) var(--sh-lg) var(--sh-lg)}}

/* ---------- Buttons ---------- */
.btn{--bg:var(--primary);--fg:var(--on-primary);display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 24px;border-radius:var(--sh-full);border:0;
  background:var(--bg);color:var(--fg);font:600 .97rem var(--f-body);text-decoration:none;cursor:pointer;line-height:1;white-space:nowrap;position:relative;
  transition:border-radius var(--mid) var(--spring),transform var(--mid) var(--spring),background-color var(--fast) var(--std),box-shadow var(--fast) var(--std),filter var(--fast)}
.btn .ms{font-size:20px}
.btn:hover{filter:brightness(1.06)}
.btn:active{border-radius:var(--sh-md);transform:scale(.97)}
.btn-filled,.btn-primary{--bg:var(--primary);--fg:var(--on-primary)}
.btn-tonal,.btn-dark{--bg:var(--secondary-c);--fg:var(--on-secondary-c)}
.btn-tonal-primary{--bg:var(--primary-c);--fg:var(--on-primary-c)}
.btn-tonal-tertiary{--bg:var(--tertiary-c);--fg:var(--on-tertiary-c)}
.btn-mari{--bg:var(--mari);--fg:var(--on-mari)}
.btn-outlined,.btn-ghost{--bg:transparent;--fg:var(--primary);box-shadow:inset 0 0 0 1.5px var(--outline)}
.btn-outlined:hover,.btn-ghost:hover{background:color-mix(in srgb,var(--primary) 8%,transparent)}
.btn-text{--bg:transparent;--fg:var(--primary);padding:0 14px}
.btn-text:hover{background:color-mix(in srgb,var(--primary) 8%,transparent)}
.btn-elev{--bg:var(--sc-low);--fg:var(--primary);box-shadow:var(--shadow)}
.btn-elev:hover{box-shadow:var(--shadow-lg)}
.btn-hue{--bg:var(--hue-c);--fg:var(--hue-on)}
.btn-sm{height:36px;padding:0 16px;font-size:.88rem}.btn-sm .ms{font-size:18px}
.btn-lg{height:56px;padding:0 32px;font-size:1.08rem;gap:10px}.btn-lg .ms{font-size:24px}
.btn-xl{height:68px;padding:0 40px;font-size:1.2rem;font-family:var(--f-display);font-weight:700;border-radius:var(--sh-xl2)}.btn-xl .ms{font-size:28px}
.btn-xl:active{border-radius:var(--sh-lg)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.38;cursor:not-allowed;filter:none;transform:none}
.btn.wide{width:100%}

/* Icon buttons */
.ibtn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--sh-full);border:0;background:transparent;color:var(--on-surface-v);cursor:pointer;padding:0;
  transition:border-radius var(--mid) var(--spring),background-color var(--fast) var(--std),transform var(--mid) var(--spring)}
.ibtn:hover{background:var(--sc-high);color:var(--on-surface)}
.ibtn:active{border-radius:var(--sh-md);transform:scale(.94)}
.ibtn-tonal{background:var(--secondary-c);color:var(--on-secondary-c)}
.ibtn-tonal:hover{background:var(--secondary-c);filter:brightness(1.05)}
.ibtn-filled{background:var(--primary);color:var(--on-primary)}
.ibtn-filled:hover{background:var(--primary);filter:brightness(1.08)}
.ibtn-outlined{box-shadow:inset 0 0 0 1.5px var(--outline-v)}
.ibtn[aria-pressed="true"]{background:var(--primary);color:var(--on-primary);border-radius:var(--sh-md)}
.ibtn[aria-pressed="true"] .ms{font-variation-settings:"FILL" 1,"wght" 500,"GRAD" 0,"opsz" 24}
.ibtn.sm{width:36px;height:36px}.ibtn.sm .ms{font-size:20px}

/* FAB */
.fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(var(--nav-h) + 16px);z-index:25;display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 16px;border:0;
  border-radius:var(--sh-lg);background:var(--primary-c);color:var(--on-primary-c);font:600 1rem var(--f-body);text-decoration:none;box-shadow:var(--shadow-lg);cursor:pointer;
  transition:transform var(--mid) var(--spring),border-radius var(--mid) var(--spring),box-shadow var(--fast)}
.fab:hover{box-shadow:0 6px 12px 4px rgba(27,27,34,.15),0 2px 4px rgba(27,27,34,.3)}
.fab:active{transform:scale(.96);border-radius:var(--sh-xl)}
.fab.fab-primary{background:var(--primary);color:var(--on-primary)}
.fab.fab-tertiary{background:var(--tertiary-c);color:var(--on-tertiary-c)}
.fab .ms{font-size:24px}
@media (min-width:901px){.fab.mobile-only{display:none}}
@media print{.fab{display:none}}

/* Connected button group (segmented) */
.seg{display:inline-flex;gap:2px;padding:0;background:transparent}
.seg button,.seg a{appearance:none;border:0;cursor:pointer;height:40px;padding:0 18px;font:600 .9rem var(--f-body);text-decoration:none;display:inline-flex;align-items:center;gap:6px;
  background:var(--sc-high);color:var(--on-surface);border-radius:var(--sh-sm);
  transition:border-radius var(--mid) var(--spring),background-color var(--fast) var(--std),color var(--fast),flex-grow var(--mid) var(--spring)}
.seg>:first-child{border-top-left-radius:var(--sh-full);border-bottom-left-radius:var(--sh-full)}
.seg>:last-child{border-top-right-radius:var(--sh-full);border-bottom-right-radius:var(--sh-full)}
.seg button[aria-pressed="true"],.seg a[aria-current]{background:var(--primary);color:var(--on-primary);border-radius:var(--sh-full)}
.seg button:not([aria-pressed="true"]):hover{background:var(--sc-highest)}
.seg button:active{border-radius:var(--sh-full)}
.seg .ms{font-size:18px}

/* Split button */
.split{display:inline-flex;gap:2px}
.split>.btn{border-radius:var(--sh-full) var(--sh-sm) var(--sh-sm) var(--sh-full)}
.split-menu{position:relative}
.split-menu summary{list-style:none;border-radius:var(--sh-sm) var(--sh-full) var(--sh-full) var(--sh-sm);padding:0 12px}
.split-menu summary::-webkit-details-marker{display:none}
.split-menu summary .ms{transition:transform var(--mid) var(--spring)}
.split-menu[open] summary .ms{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 6px);right:0;min-width:220px;background:var(--sc);border-radius:var(--sh-lg);box-shadow:var(--shadow-lg);padding:8px;display:grid;z-index:40;
  animation:pop var(--mid) var(--spring)}
.menu button,.menu a{display:flex;align-items:center;gap:12px;border:0;background:transparent;color:var(--on-surface);font:500 .95rem var(--f-body);padding:11px 14px;border-radius:var(--sh-md);cursor:pointer;text-decoration:none;text-align:left;width:100%}
.menu button:hover,.menu a:hover{background:var(--sc-highest)}
.menu .ms{color:var(--on-surface-v);font-size:20px}
@keyframes pop{from{opacity:0;transform:scale(.9) translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:var(--sh-sm);font:600 .86rem var(--f-body);color:var(--on-surface-v);
  box-shadow:inset 0 0 0 1px var(--outline-v);background:transparent;cursor:pointer;text-decoration:none;white-space:nowrap;border:0;
  transition:background-color var(--fast) var(--std),color var(--fast),border-radius var(--mid) var(--spring),box-shadow var(--fast)}
.chip .ms{font-size:18px}
.chip:hover{background:var(--sc-high)}
.chip:active{border-radius:var(--sh-full)}
.chip[aria-pressed="true"],.chip.on{background:var(--secondary-c);color:var(--on-secondary-c);box-shadow:none}
.chip[aria-pressed="true"]::before,.chip.on::before{content:"check";font-family:"Material Symbols Rounded";font-size:18px;line-height:1;font-variation-settings:"wght" 600}
html:not(.icons-ready) .chip[aria-pressed="true"]::before{display:none}
.chip-sugg{box-shadow:inset 0 0 0 1px var(--outline-v);color:var(--primary)}
.chip-sugg:hover{background:var(--primary-c);color:var(--on-primary-c);box-shadow:none}
.chip-hue{background:var(--hue-c);color:var(--hue-on);box-shadow:none}
.chip-hue:hover{background:var(--hue-c);filter:brightness(1.04)}
.chip-input{background:var(--sc-high);box-shadow:none;color:var(--on-surface);padding-right:6px}
.chip-input .x{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:0;background:transparent;color:inherit;cursor:pointer;padding:0}
.chip-input .x:hover{background:var(--sc-highest)}
.chip-input .x .ms{font-size:16px}
.chip.static{cursor:default}
.chips-row{display:flex;flex-wrap:wrap;gap:8px}
.chips-scroll{display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips-scroll::-webkit-scrollbar{display:none}
.chips-scroll .chip{flex:none}
/* status chip (open / partly / closed) */
.pill{display:inline-flex;align-items:center;gap:6px;font:600 .78rem/1 var(--f-body);padding:6px 10px;border-radius:var(--sh-full);white-space:nowrap;text-decoration:none;text-transform:none}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.pill.open{background:var(--tertiary-c);color:var(--on-tertiary-c)}
.pill.partial{background:var(--mari-c);color:var(--on-mari-c)}
.pill.closed{background:var(--error-c);color:var(--on-error-c)}
.pill.neutral{background:var(--sc-high);color:var(--on-surface-v)}
.pill.hue{background:var(--hue-c);color:var(--hue-on)}
.pill.nodot::before{display:none}
.badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--sh-full);background:var(--error);color:var(--on-error);font:700 .7rem/1 var(--f-body)}
.badge.primary{background:var(--primary);color:var(--on-primary)}

/* ---------- Cards ---------- */
.card{background:var(--sc-low);border-radius:var(--sh-xl);padding:24px;min-width:0;position:relative}
.card-elev{background:var(--sc-lowest);box-shadow:var(--shadow)}
.card-outl{background:var(--surface);box-shadow:inset 0 0 0 1px var(--outline-v)}
.card-tonal{background:var(--sc-high)}
.card-primary{background:var(--primary-c);color:var(--on-primary-c)}
.card-primary h2,.card-primary h3,.card-primary .muted{color:inherit}
.card-secondary{background:var(--secondary-c);color:var(--on-secondary-c)}
.card-secondary h2,.card-secondary h3,.card-secondary .muted{color:inherit}
.card-tertiary{background:var(--tertiary-c);color:var(--on-tertiary-c)}
.card-tertiary h2,.card-tertiary h3,.card-tertiary .muted{color:inherit}
.card-hue{background:var(--hue-c);color:var(--hue-on)}
.card-hue h2,.card-hue h3,.card-hue .muted,.card-hue p{color:inherit}
.card-hue .muted{opacity:.85}
a.card{display:block;text-decoration:none;color:inherit;transition:transform var(--mid) var(--spring),background-color var(--fast),box-shadow var(--fast)}
a.card:hover{background:var(--sc-high)}
a.card:active{transform:scale(.985)}
.card-hero{background:var(--sc-low);border-radius:var(--sh-xxl)}
@media (max-width:600px){.card{padding:20px;border-radius:var(--sh-lg2)}}

/* ---------- Shapes & avatars ---------- */
.shape{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;background:var(--hue-c,var(--primary-c));color:var(--hue-on,var(--on-primary-c))}
.shape .ms{font-size:22px}
.shape.lg{width:64px;height:64px}.shape.lg .ms{font-size:30px}
.shape.sm{width:36px;height:36px}.shape.sm .ms{font-size:18px}
.shape.solid{background:var(--hue,var(--primary));color:var(--on-primary)}
.sh-cookie4{clip-path:url(#sh-cookie4)}.sh-cookie6{clip-path:url(#sh-cookie6)}.sh-cookie7{clip-path:url(#sh-cookie7)}.sh-cookie9{clip-path:url(#sh-cookie9)}.sh-cookie12{clip-path:url(#sh-cookie12)}
.sh-clover4{clip-path:url(#sh-clover4)}.sh-clover8{clip-path:url(#sh-clover8)}.sh-burst{clip-path:url(#sh-burst)}.sh-sunny{clip-path:url(#sh-sunny)}.sh-pentagon{clip-path:url(#sh-pentagon)}.sh-gem{clip-path:url(#sh-gem)}
.sh-circle{border-radius:50%}.sh-square{border-radius:var(--sh-md)}.sh-pill{border-radius:var(--sh-full)}
.avatar-n{font:700 1.05rem var(--f-display)}

/* ---------- Lists ---------- */
.list{display:grid;gap:4px}
.li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:10px 12px;border-radius:var(--sh-lg);min-height:56px;background:transparent;color:inherit;text-decoration:none}
.li.flat{border-radius:0;padding-inline:0}
.li>.shape,.li>.ms{grid-row:span 2}
.li .hl,.li .sup{grid-column:2}
.li .hl{font-weight:600;line-height:1.3}
.li .sup{color:var(--on-surface-v);font-size:.86rem;line-height:1.35}
.li .trail{grid-column:3;grid-row:1/span 2;display:flex;align-items:center;gap:6px}
.li+.li{box-shadow:inset 0 1px 0 var(--outline-v)}
.li.tonal{background:var(--sc)}
.li.tonal+.li.tonal{box-shadow:none}
a.li:hover,button.li:hover{background:var(--sc-high)}
.list.gap .li{background:var(--sc);box-shadow:none}
.list.gap{gap:6px}

/* ---------- Progress ---------- */
.lin{--p:0;--c:var(--primary);position:relative;height:8px;display:flex;align-items:center;gap:4px}
.lin i{display:block;height:100%;width:calc(var(--p) * 1%);min-width:4px;background:var(--c);border-radius:var(--sh-full);transition:width var(--slow) var(--std)}
.lin::after{content:"";flex:1;height:100%;background:var(--sc-highest);border-radius:var(--sh-full)}
.lin b{position:absolute;right:0;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--c)}
.lin.thick{height:12px}.lin.thick b{width:5px;height:5px;margin-top:-2.5px}
.lin.hi{--c:var(--secondary)}
.lin.hue{--c:var(--hue)}
.ring{--p:0;--c:var(--primary);width:112px;height:112px;border-radius:50%;display:grid;place-items:center;position:relative;flex:none;
  background:conic-gradient(var(--c) calc(var(--p) * 1%),transparent 0)}
.ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from calc(var(--p) * 3.6deg + 8deg),var(--sc-highest) calc(360deg - var(--p) * 3.6deg - 16deg),transparent 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 11px),#000 calc(100% - 10px));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 11px),#000 calc(100% - 10px))}
.ring::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--sc-low);mask:radial-gradient(farthest-side,#000 calc(100% - 11px),transparent calc(100% - 10px));-webkit-mask:radial-gradient(farthest-side,#000 calc(100% - 11px),transparent calc(100% - 10px))}
.ring>*{position:relative;z-index:1;text-align:center;line-height:1}
.ring strong{display:block;font:800 2rem var(--f-display);color:var(--on-surface)}
.ring span{display:block;font-size:.72rem;color:var(--on-surface-v);font-weight:600;margin-top:2px}
.ring.secondary{--c:var(--secondary)}
.ring.tertiary{--c:var(--tertiary)}
/* wavy linear progress (test) */
.wavy{display:block;width:100%;height:16px;overflow:visible}
.wavy .wave{fill:none;stroke:var(--primary);stroke-width:4;stroke-linecap:round}
.wavy .track{stroke:var(--sc-highest);stroke-width:4;stroke-linecap:round}
.wavy .stop{fill:var(--primary)}
.wavy .wave{animation:wave 1.4s linear infinite}
@keyframes wave{to{transform:translateX(-24px)}}
/* loading indicator (shape morph) */
.loader{width:40px;height:40px;display:inline-block;vertical-align:middle;animation:spin 2.4s linear infinite;color:var(--primary)}
.loader.on-primary{color:var(--on-primary)}
.loader.sm{width:24px;height:24px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Form controls ---------- */
.field{display:grid;gap:4px;position:relative}
.field label{position:absolute;top:-8px;left:12px;padding:0 5px;background:var(--surface);font:600 .76rem/1 var(--f-body);color:var(--on-surface-v);z-index:1;border-radius:4px}
.card .field label{background:var(--sc-low)}
.card-elev .field label{background:var(--sc-lowest)}
.qcard .field label{background:var(--sc-low)}
.field input,.field select,.field textarea{padding:0 16px;height:56px;border:1.5px solid var(--outline);border-radius:var(--sh-md);background:transparent;color:var(--on-surface);font:inherit;width:100%;min-width:0;transition:border-color var(--fast),box-shadow var(--fast)}
.field textarea{height:auto;padding:14px 16px}
.field input:focus,.field select:focus{outline:0;border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.field input:focus+label,.field:focus-within label{color:var(--primary)}
.field .help{font-size:.8rem;color:var(--on-surface-v);padding-left:16px}
.search{appearance:none;height:56px;padding:0 20px 0 52px;border-radius:var(--sh-full);border:0;background:var(--sc-high);color:var(--on-surface);font:inherit;width:100%;min-width:0;
  transition:background-color var(--fast),box-shadow var(--fast)}
.search:focus{outline:0;background:var(--sc-highest);box-shadow:0 0 0 2px var(--primary)}
.search::placeholder{color:var(--on-surface-v)}
.searchbar{position:relative;flex:1 1 260px;min-width:0}
.searchbar>.ms{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--on-surface-v);pointer-events:none}
.searchbar .clear{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
select.search{padding-left:20px;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2378767F' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:22px}
/* checkbox + radio */
input[type="checkbox"].cb,input[type="radio"].rb{appearance:none;width:20px;height:20px;margin:0;border:2px solid var(--on-surface-v);border-radius:4px;display:inline-grid;place-items:center;flex:none;cursor:pointer;transition:background-color var(--fast),border-color var(--fast),border-radius var(--mid) var(--spring)}
input[type="radio"].rb{border-radius:50%}
input.cb:checked,input.rb:checked{background:var(--primary);border-color:var(--primary)}
input.cb:checked::after{content:"";width:11px;height:6px;border:2.5px solid var(--on-primary);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
input.rb:checked{background:transparent}
input.rb:checked::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--primary)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.93rem;color:var(--on-surface-v)}
.check input{margin-top:3px}
/* switch */
.switch{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-weight:600;font-size:.92rem;color:var(--on-surface)}
.switch input{appearance:none;width:52px;height:32px;margin:0;border-radius:var(--sh-full);background:var(--sc-highest);border:2px solid var(--outline);position:relative;cursor:pointer;flex:none;transition:background-color var(--fast),border-color var(--fast)}
.switch input::after{content:"";position:absolute;top:50%;left:6px;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--outline);transition:transform var(--mid) var(--spring),width var(--mid) var(--spring),height var(--mid) var(--spring),margin var(--mid) var(--spring),background-color var(--fast)}
.switch input:checked{background:var(--primary);border-color:var(--primary)}
.switch input:checked::after{transform:translateX(18px);width:24px;height:24px;margin-top:-12px;left:2px;background:var(--on-primary)}
.switch input:checked::before{content:"check";font-family:"Material Symbols Rounded";font-size:16px;line-height:1;color:var(--primary);position:absolute;z-index:1;left:24px;top:6px;font-variation-settings:"wght" 700;transition:transform var(--mid) var(--spring)}

/* ---------- Banners, messages, snackbar, dialog, tooltip ---------- */
.notice{display:flex;gap:12px;align-items:flex-start;background:var(--mari-c);color:var(--on-mari-c);padding:14px 18px;border-radius:var(--sh-lg)}
.notice::before{content:"info";font-family:"Material Symbols Rounded";font-size:22px;line-height:1.2;flex:none;font-variation-settings:"FILL" 1}
.msg{display:flex;gap:10px;align-items:flex-start;border-radius:var(--sh-md);padding:10px 14px;font-size:.92rem;line-height:1.4}
.msg::before{font-family:"Material Symbols Rounded";font-size:20px;line-height:1.3;flex:none;font-variation-settings:"FILL" 1}
.msg.err{background:var(--error-c);color:var(--on-error-c)}.msg.err::before{content:"error"}
.msg.warn{background:var(--mari-c);color:var(--on-mari-c)}.msg.warn::before{content:"warning"}
.msg.ok{background:var(--tertiary-c);color:var(--on-tertiary-c)}.msg.ok::before{content:"check_circle"}
.msg.info{background:var(--primary-c);color:var(--on-primary-c)}.msg.info::before{content:"info"}
html:not(.icons-ready) .msg::before,html:not(.icons-ready) .notice::before{display:none}
.snack{position:fixed;left:50%;bottom:calc(var(--nav-h) + 20px);transform:translate(-50%,20px);z-index:60;background:var(--inverse-surface);color:var(--inverse-on);padding:14px 18px;border-radius:var(--sh-sm);
  font-size:.95rem;font-weight:500;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity var(--fast),transform var(--mid) var(--spring);max-width:min(560px,calc(100vw - 32px));display:flex;gap:16px;align-items:center}
.snack.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.snack .btn-text{color:var(--inverse-primary);height:32px;padding:0 8px}
dialog.dlg{border:0;padding:0;background:transparent;max-width:min(560px,calc(100vw - 32px));width:100%}
dialog.dlg::backdrop{background:var(--scrim);backdrop-filter:blur(2px)}
dialog.dlg .box{background:var(--sc-high);color:var(--on-surface);border-radius:var(--sh-xl);padding:24px;display:grid;gap:16px;animation:pop var(--mid) var(--spring)}
dialog.dlg .box .ms.lg{color:var(--secondary);justify-self:center}
dialog.dlg h2{font-size:1.5rem;text-align:center}
dialog.dlg .actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);background:var(--inverse-surface);color:var(--inverse-on);padding:6px 10px;border-radius:var(--sh-xs);font:500 .76rem/1.2 var(--f-body);white-space:nowrap;z-index:20;pointer-events:none}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--sh-lg);background:var(--sc-lowest);box-shadow:inset 0 0 0 1px var(--outline-v)}
table{border-collapse:collapse;width:100%;font-size:.94rem}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--outline-v);vertical-align:top}
th{font-size:.82rem;font-weight:700;color:var(--on-surface-v);background:var(--sc);position:sticky;top:0}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--sc-low)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Floating toolbar ---------- */
.toolbar-float{position:sticky;bottom:calc(var(--nav-h) + 16px);z-index:20;display:flex;justify-content:center;pointer-events:none;margin-top:8px}
.toolbar-float>div{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;padding:8px;border-radius:var(--sh-full);background:var(--sc);box-shadow:var(--shadow-lg)}
.toolbar-float.vibrant>div{background:var(--primary-c);color:var(--on-primary-c)}

/* ---------- Carousel ---------- */
.carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -20px;padding-inline:20px}
.carousel::-webkit-scrollbar{display:none}
.carousel>*{flex:0 0 min(78vw,340px);scroll-snap-align:start}
.carousel>*:first-child{flex-basis:min(86vw,420px)}
@media (min-width:900px){.carousel{margin:0;padding-inline:0}.carousel>*{flex-basis:360px}.carousel>*:first-child{flex-basis:440px}}

/* ---------- Page: Home ---------- */
.hero{overflow:hidden}
.hero .inner{padding-block:40px 24px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center;min-height:min(72vh,640px)}
.hero .kicker{display:inline-flex;align-items:center;gap:8px;background:var(--mari-c);color:var(--on-mari-c);font:600 .88rem var(--f-body);padding:8px 14px 8px 10px;border-radius:var(--sh-full);margin-bottom:22px}
.hero .kicker .ms{font-size:18px}
.hero h1{max-width:12ch}
.hero .lede{margin-top:20px}
.hero .row{margin-top:30px;gap:12px}
.hero .shape-cluster{position:relative;aspect-ratio:1/1;max-width:520px;width:100%;justify-self:center}
.tile{position:absolute;display:grid;place-items:center;gap:6px;color:var(--hue-on);background:var(--hue-c);text-align:center;
  --s:30%;width:var(--s);aspect-ratio:1;left:var(--x);top:var(--y);transform:rotate(var(--r,0deg));
  animation:tile-in .7s var(--spring) both;animation-delay:var(--d,0s)}
.tile .ms{font-size:clamp(28px,5vw,44px)}
.tile b{font:700 clamp(.66rem,1.3vw,.9rem)/1.1 var(--f-display);max-width:60%;overflow-wrap:anywhere}
.tile.solid{background:var(--hue);color:#fff}
@keyframes tile-in{from{opacity:0;transform:rotate(var(--r,0deg)) scale(.5)}to{opacity:1;transform:rotate(var(--r,0deg)) scale(1)}}
@media (max-width:860px){
  .hero .inner{grid-template-columns:1fr;gap:28px;padding-top:28px}
  .hero .shape-cluster{max-width:360px}
}
.stats{display:flex;flex-wrap:wrap;gap:10px}
.stats .stat{display:inline-flex;align-items:center;gap:12px;background:var(--hue-c);color:var(--hue-on);padding:10px 18px 10px 10px;border-radius:var(--sh-full)}
.stats .stat>div{display:grid;gap:2px}
.stats .stat .num{font:800 1.5rem/1 var(--f-display)}
.stats .stat .lbl{font-size:.88rem;font-weight:600;line-height:1.2}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.steps .card{display:grid;gap:14px;align-content:start}
.steps .card .shape{margin-bottom:4px}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.split-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
@media (max-width:760px){.split-2{grid-template-columns:1fr}}
.myth{display:grid;gap:12px;align-content:start}
.myth .chip{align-self:start;justify-self:start}
.myth b{font:700 1.12rem/1.3 var(--f-display)}
.qlist{display:grid;gap:4px;margin:0;padding:0;list-style:none;counter-reset:q}
.qlist li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:12px 0}
.qlist li+li{box-shadow:inset 0 1px 0 var(--outline-v)}
.qlist li::before{counter-increment:q;content:counter(q);display:grid;place-items:center;width:36px;height:36px;font:700 1rem var(--f-display);background:var(--primary-c);color:var(--on-primary-c);clip-path:url(#sh-cookie7)}

/* ---------- Page: Planner ---------- */
.planner{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:960px){.planner{grid-template-columns:1fr}}
.planner-side{display:grid;gap:20px;position:sticky;top:88px}
@media (max-width:960px){.planner-side{position:static}}
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.group-h{display:flex;align-items:center;gap:10px;font:700 1rem var(--f-display);color:var(--on-surface);margin:8px 0 2px}
.group-h::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--hue,var(--primary))}
.bubbles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.sub{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:start;text-align:left;background:var(--sc);border:0;border-radius:var(--sh-lg);padding:12px 14px;cursor:pointer;color:var(--on-surface);font:inherit;min-width:0;
  transition:background-color var(--fast) var(--std),transform var(--mid) var(--spring),border-radius var(--mid) var(--spring)}
.sub:hover{background:var(--sc-high)}
.sub:active{transform:scale(.98);border-radius:var(--sh-xl)}
.sub .dot{grid-row:span 2;width:22px;height:22px;border-radius:6px;border:2px solid var(--on-surface-v);margin-top:1px;display:grid;place-items:center;transition:background-color var(--fast),border-color var(--fast),border-radius var(--mid) var(--spring)}
.sub[aria-pressed="true"]{background:var(--hue-c);color:var(--hue-on)}
.sub[aria-pressed="true"] .dot{background:var(--hue);border-color:var(--hue);border-radius:50%}
.sub[aria-pressed="true"] .dot::after{content:"";width:10px;height:5px;border:2.5px solid var(--hue-c);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.sub[aria-pressed="true"] .cd,.sub[aria-pressed="true"] .code{color:inherit;background:color-mix(in srgb,currentColor 12%,transparent)}
.sub.blocked{opacity:.45}
.sub .nm{font-weight:700;font-size:.97rem;line-height:1.25}
.sub .cd{font-size:.8rem;color:var(--on-surface-v);line-height:1.35}
.slots{display:grid;gap:6px}
.slot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;border-radius:var(--sh-lg);padding:8px 8px 8px 10px;min-height:56px;background:var(--sc)}
.slot .n{width:36px;height:36px;display:grid;place-items:center;font:700 .95rem var(--f-display);color:var(--on-surface-v);background:var(--sc-highest);clip-path:url(#sh-cookie7)}
.slot.filled{background:var(--hue-c);color:var(--hue-on)}
.slot.filled .n{background:var(--hue);color:#fff}
.slot.sixth{box-shadow:inset 0 0 0 1.5px var(--outline-v);background:transparent}
.slot.sixth.filled{box-shadow:none;background:var(--hue-c)}
.slot .t{font-weight:700;line-height:1.25}
.slot .t small{display:block;font-weight:500;opacity:.8;font-size:.78rem;margin-top:2px}
.slot.filled .t .code{background:color-mix(in srgb,currentColor 12%,transparent);color:inherit}
.slot.empty .t{color:var(--on-surface-v);font-weight:500}
.slot .ibtn{color:inherit}
.slot .ibtn:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.routes{display:grid;gap:4px;max-height:520px;overflow:auto;padding-right:4px;scrollbar-width:thin}
.route{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 12px;border-radius:var(--sh-md);background:var(--sc-low)}
.route .pill{grid-column:2;grid-row:1/span 2;align-self:center}
.route b{font-size:.95rem;line-height:1.3}
.route span{color:var(--on-surface-v);font-size:.84rem;line-height:1.35}
.route.closed b{color:var(--on-surface-v)}
.score-line{display:flex;align-items:center;gap:18px}
.score-line .ring{--c:var(--tertiary)}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.share-box{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--sc);padding:8px 8px 8px 16px;border-radius:var(--sh-lg)}
.share-box input{flex:1 1 180px;min-width:0;border:0;background:transparent;color:var(--on-surface);font:500 .9rem var(--f-mono);padding:8px 0}
.share-box input:focus{outline:0}

/* ---------- Page: Test ---------- */
.test-shell{display:grid;gap:18px;max-width:760px;margin:0 auto;width:100%}
.mode-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.mode-pick{grid-template-columns:1fr}}
.mode-pick .card{display:grid;gap:12px;align-content:start;padding:28px}
.mode-pick .card ul{margin:0;padding-left:0;list-style:none;display:grid;gap:8px;font-size:.95rem}
.mode-pick .card ul li{display:flex;gap:10px;align-items:flex-start}
.mode-pick .card ul li::before{content:"check_circle";font-family:"Material Symbols Rounded";font-size:20px;line-height:1.2;font-variation-settings:"FILL" 1;opacity:.8}
.mode-pick .time{display:inline-flex;align-items:center;gap:6px;font:600 .85rem var(--f-body);justify-self:start;background:color-mix(in srgb,currentColor 10%,transparent);padding:6px 12px 6px 8px;border-radius:var(--sh-full)}
.mode-pick .time .ms{font-size:18px}
.mode-pick h2{font-size:1.7rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:.95rem;margin:0}
.kv dt{color:var(--on-surface-v);font-weight:600}
.kv dd{margin:0;font-weight:700}
.types{display:grid;gap:8px}
.types .li{padding:6px 8px;min-height:48px}
.progress{position:sticky;top:72px;z-index:5;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);padding:12px 0 8px;display:grid;gap:6px}
.progress .meta{display:flex;justify-content:space-between;font-size:.88rem;color:var(--on-surface-v);font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:900px){.progress{top:64px}}
.qcard{background:var(--sc-low);border-radius:var(--sh-xl);padding:28px;display:grid;gap:18px;animation:qin .45s var(--std) both}
@keyframes qin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qcard .sec{display:inline-flex;align-items:center;gap:6px;font:600 .82rem var(--f-body);color:var(--hue-on);background:var(--hue-c);padding:6px 12px 6px 8px;border-radius:var(--sh-full);justify-self:start}
.qcard .sec .ms{font-size:18px}
.qcard .qt{font:700 clamp(1.25rem,2.4vw,1.55rem)/1.3 var(--f-display);letter-spacing:-.01em}
.qcard .hint{color:var(--on-surface-v);font-size:.93rem}
.likert{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.likert label,.opts label,.chips label{cursor:pointer;position:relative}
.likert input,.opts input,.chips input{position:absolute;opacity:0;pointer-events:none}
.likert span{display:grid;place-items:center;text-align:center;min-height:64px;padding:8px;border-radius:var(--sh-sm);font-size:.84rem;font-weight:600;line-height:1.2;background:var(--sc-high);color:var(--on-surface);
  transition:background-color var(--fast),color var(--fast),border-radius var(--mid) var(--spring),transform var(--mid) var(--spring)}
.likert label:first-child span{border-radius:var(--sh-lg2) var(--sh-sm) var(--sh-sm) var(--sh-lg2)}
.likert label:last-child span{border-radius:var(--sh-sm) var(--sh-lg2) var(--sh-lg2) var(--sh-sm)}
.likert span:hover{background:var(--sc-highest)}
.likert input:checked+span{background:var(--primary);color:var(--on-primary);border-radius:var(--sh-lg2);transform:scale(1.04)}
.likert input:focus-visible+span,.opts input:focus-visible+span,.chips input:focus-visible+span{outline:3px solid var(--primary);outline-offset:2px}
@media (max-width:520px){.likert{grid-template-columns:1fr;gap:6px}.likert span{min-height:48px;border-radius:var(--sh-md)!important}.likert input:checked+span{border-radius:var(--sh-full)!important;transform:none}}
.opts{display:grid;gap:8px}
.opts span{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--sh-lg);font-weight:600;background:var(--sc-high);color:var(--on-surface);transition:background-color var(--fast),color var(--fast),border-radius var(--mid) var(--spring)}
.opts span::before{content:"";width:20px;height:20px;border-radius:50%;border:2px solid var(--on-surface-v);flex:none;transition:all var(--fast)}
.opts input:checked+span{background:var(--primary-c);color:var(--on-primary-c);border-radius:var(--sh-xl)}
.opts input:checked+span::before{border-color:var(--primary);background:radial-gradient(circle,var(--primary) 45%,transparent 50%)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:var(--sh-sm);box-shadow:inset 0 0 0 1px var(--outline-v);font-weight:600;font-size:.92rem;color:var(--on-surface-v);transition:background-color var(--fast),color var(--fast),border-radius var(--mid) var(--spring),box-shadow var(--fast)}
.chips input:checked+span{background:var(--secondary-c);color:var(--on-secondary-c);box-shadow:none;border-radius:var(--sh-full)}
.chips input:checked+span::before{content:"check";font-family:"Material Symbols Rounded";font-size:18px;line-height:1}
.qnav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;padding-top:6px}
@media (max-width:600px){.form-grid{grid-template-columns:1fr}}

/* ---------- Page: Results ---------- */
.result-head{padding-top:28px}
.result-head .inner>div{background:var(--primary-c);color:var(--on-primary-c);border-radius:var(--sh-xxl);padding:40px;display:grid;gap:18px;position:relative;overflow:hidden}
.result-head h1{color:inherit;max-width:16ch}
.result-head .lede{color:inherit;opacity:.85}
.result-head .kicker{display:inline-flex;align-items:center;gap:8px;font:600 .88rem var(--f-body);background:color-mix(in srgb,currentColor 12%,transparent);padding:6px 12px 6px 8px;border-radius:var(--sh-full);justify-self:start}
.result-head .kicker .ms{font-size:18px}
.holland{display:flex;gap:12px;flex-wrap:wrap}
.holland .ht{display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:center;background:var(--sc-lowest);color:var(--on-surface);padding:8px 18px 8px 8px;border-radius:var(--sh-xl);max-width:330px}
.holland .ht .shape{width:48px;height:48px;font:800 1.4rem var(--f-display)}
.holland .ht b{font:700 1rem var(--f-display);line-height:1.1}
.holland .ht small{color:var(--on-surface-v);font-size:.78rem;line-height:1.2}
.bars{display:grid;gap:12px}
.bar-row{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr) 40px;gap:12px;align-items:center;font-size:.93rem}
.bar-row b{font-variant-numeric:tabular-nums;text-align:right;font-family:var(--f-display);font-size:1.05rem}
.bar-row small{display:block;color:var(--on-surface-v);font-size:.78rem;line-height:1.2}
.bar-row a{color:inherit;font-weight:600}
@media (max-width:480px){.bar-row{grid-template-columns:1fr 36px}.bar-row .lin{grid-column:1/-1;order:3}}
.combo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.combo{display:grid;gap:14px;align-content:start}
.combo ol{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.combo ol li{display:flex;gap:10px;align-items:center;font-weight:600}
.combo ol li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--hue,var(--primary));flex:none}
.combo li.six{color:var(--on-surface-v);font-weight:500}
.combo li.six::before{background:transparent;box-shadow:inset 0 0 0 2px var(--outline)}
.combo .fit{display:inline-flex;align-items:center;gap:6px;font:600 .85rem var(--f-body);justify-self:start;background:var(--sc-high);padding:6px 12px 6px 8px;border-radius:var(--sh-full)}
.combo .fit .ms{font-size:18px}
.combo.best{background:var(--mari-c);color:var(--on-mari-c)}
.combo.best .fit{background:var(--mari);color:var(--on-mari)}
.combo.best h3,.combo.best li.six{color:inherit}
.combo.best .code{background:color-mix(in srgb,currentColor 12%,transparent);color:inherit}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
@media (max-width:820px){.two-col{grid-template-columns:1fr}}
.career-list{display:grid;gap:4px}
.career-list .it{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 12px;align-items:center;border-radius:var(--sh-md);background:var(--sc)}
.career-list .it span{color:var(--on-surface-v);font-size:.85rem}
.career-list .it .mt{font-weight:700;font-family:var(--f-display)}

/* ---------- Page: Subjects ---------- */
.sub-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.sub-card{display:grid;gap:8px;grid-template-columns:auto minmax(0,1fr);align-items:start;padding:18px;background:var(--sc-low)}
.sub-card .shape{grid-row:span 3}
.sub-card h3{font-size:1.08rem;line-height:1.25}
.sub-card p{color:var(--on-surface-v);font-size:.9rem;line-height:1.4}
.sub-card .meta-row{grid-column:2}
.sub-card:hover{background:var(--hue-c);color:var(--hue-on)}
.sub-card:hover h3,.sub-card:hover p{color:inherit}
.meta-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.diff{display:inline-flex;gap:3px;align-items:center}
.diff i{width:8px;height:8px;border-radius:50%;background:var(--outline-v)}
.diff i.on{background:var(--hue,var(--primary))}
.cat-head{display:flex;align-items:center;gap:14px}
.cat-head .count{font:700 .9rem var(--f-body);color:var(--hue-on);background:var(--hue-c);padding:6px 12px;border-radius:var(--sh-full)}
.detail{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:820px){.detail{grid-template-columns:1fr}}
.page-head{display:grid;gap:14px;align-content:start}
.page-head .back{display:inline-flex;align-items:center;gap:4px;text-decoration:none;font-weight:600;font-size:.92rem;color:var(--on-surface-v);justify-self:start;padding:6px 12px 6px 6px;border-radius:var(--sh-full)}
.page-head .back:hover{background:var(--sc-high);color:var(--on-surface)}
.page-head .back .ms{font-size:20px}
.subject-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center}
.subject-hero .shape{width:88px;height:88px}
.subject-hero .shape .ms{font-size:40px}
@media (max-width:600px){.subject-hero{grid-template-columns:1fr}}

/* ---------- Page: Career routes ---------- */
.route-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.route-card{display:grid;gap:12px;align-content:start}
.route-card ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:.92rem}
.route-card ul li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.req-must,.req-often{display:inline-flex;align-items:center;font:600 .74rem/1 var(--f-body);padding:5px 9px;border-radius:var(--sh-full);white-space:nowrap;margin-top:2px}
.req-must{background:var(--error-c);color:var(--on-error-c)}
.req-often{background:var(--mari-c);color:var(--on-mari-c)}
.route-card .exam{display:flex;gap:8px;align-items:flex-start;color:var(--on-surface-v);font-size:.9rem}
.route-card .exam .ms{font-size:20px;flex:none;margin-top:1px}

/* ---------- Page: FAQ ---------- */
.faq{display:grid;gap:6px}
.faq details{background:var(--sc-low);border-radius:var(--sh-lg);transition:border-radius var(--mid) var(--spring),background-color var(--fast)}
.faq details[open]{background:var(--sc);border-radius:var(--sh-xl)}
.faq summary{cursor:pointer;font:700 1.08rem/1.35 var(--f-display);padding:16px 20px;display:flex;justify-content:space-between;gap:14px;align-items:center;list-style:none;border-radius:inherit}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"expand_more";font-family:"Material Symbols Rounded";font-size:24px;line-height:1;color:var(--on-surface-v);transition:transform var(--mid) var(--spring);flex:none}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq details p,.faq details ul{margin:0;padding:0 20px 20px;color:var(--on-surface-v)}

/* ---------- Page: Admin ---------- */
.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.admin-stats .card{display:grid;gap:4px;padding:20px}
.admin-stats .card b{display:block;font:800 2rem/1 var(--f-display);font-variant-numeric:tabular-nums}

/* ---------- Print, motion ---------- */
@media print{
  .site-head,.site-foot,.no-print,.progress,.navbar,.fab,.snack{display:none!important}
  body{background:#fff;color:#000;padding:0}
  .result-head .inner>div{background:#fff;color:#000;border:2px solid #000}
  .card,.combo{break-inside:avoid;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .tile{opacity:1}
}