/* Path.ai web client styles.
   Design: the Path kit. Near-black surfaces, a cyan accent and a warm orange second accent, hairline borders and
   almost-square corners; DM Sans for text, Space Grotesk for headings and numerals; uppercase letter-spaced eyebrows,
   big light numerals with small captions, "↗" on chips and calls to action.
   Dark is the default (index.html also sets data-theme="dark"). :root[data-theme="light"] swaps in a light palette
   built from the same hues; every text colour in both palettes meets WCAG AA (4.5:1) on the surfaces it sits on, and
   control borders (--line-strong, --check-line) meet 3:1.
   Contract with the JavaScript (keep these names and formats):
   - the orb canvas reads --fur (an "R,G,B" triplet), --accent, --violet, --muted, --ink-2, --bg, --sans, --display
     and the optional --orb-* colours below (plain hex or rgb(); no color-mix());
   - native.js reads --bg, which must stay a 6-digit hex colour (the Android status bar);
   - inline styles and SVG attributes in app.js use --accent, --violet, --warn, --good, --bad, --ink, --ink-2, --muted,
     --line, --surface, the *-soft and *-ink tokens, --sans and --k-*.
   --violet is kept as a name for the second accent (now the kit's warm orange): the sharpest edge, live mapping, the
   AI notice and the orb's scan. Production screens (age gate, consent, settings, report sheet, safety card) are grouped
   near the end. */

:root{
  color-scheme:dark;
  --bg:#080c11; --surface:#10171f; --surface-2:#132029; --sunken:#0c141d; --dialog:#0e1821; --aside:#101d27;
  --ink:#e9edf2; --ink-2:#b6cbd6; --muted:#96a9b8; --dim:#7f9aac;
  --line:#26333e; --line-2:#1c2a34; --line-3:#2b4353; --line-strong:#56778a; --rule:#426a7d;
  --accent:#8ae8ef; --accent-2:#b0f4f5; --accent-soft:rgba(138,232,239,.12); --accent-ink:#092730;
  --violet:#ffa679; --violet-2:#ffc19c; --violet-soft:rgba(255,166,121,.12); --violet-ink:#24150e;
  --good:#93e0bd; --good-soft:rgba(147,224,189,.12); --warn:#f2c76e; --warn-soft:rgba(242,199,110,.12);
  --bad:#ff8f86; --bad-soft:rgba(255,143,134,.12); --bad-ink:#2b0d0a;
  --fur:118,146,164; --core:#0a1219;
  --k-school:#1f2c36; --k-degree:#1a4251; --k-training:#276b77; --k-work:#35434f; --k-selection:#5a3526;
  --q0:#1c2a34; --q1:#213c48; --q2:#2f6b78; --q3:#5fbfc9; --q4:#8ae8ef;
  /* orb canvas overrides (plain colours; the orb code applies its own alpha): globe dots, grid lines, dotted rings,
     the second orbit band and the centre fade. --orb-accent and --orb-warm fall back to --accent and --violet. */
  --orb-dot:#87e8f2; --orb-grid:#65cfdb; --orb-ring:#5a8ea3; --orb-band-2:#b5bdff; --orb-fade:#08121b; --peri:#b5bdff;
  /* component colours */
  --hover:#162a35; --hover-line:#5b879b; --track:#243e4c; --dot-line:#5791a9; --dot-ring:#548197; --rail:#304c5c;
  --check-line:#597a8c; --index:#7d9fb3; --sector:#b2ccd8; --caption:#9cd5df; --caption-line:#244551;
  --pill-line:#365060; --pill-ink:#a4c0d0; --pill-on:#d0edf0; --pill-on-ink:#123540;
  --note-bg:#142732; --upload-line:#507286; --upload-bg:#122733; --dialog-line:#355569;
  --warm-line:#4d4140; --warm-ink:#c9bfbb; --warm-bg:radial-gradient(circle at 100% 20%,rgba(107,68,53,.36),transparent 65%),#151719;
  --grad-card:linear-gradient(120deg,#14232f,#0e1922); --grad-route:linear-gradient(130deg,#14232e,#0b151e); --grad-bar:linear-gradient(110deg,#121c22,#0b1117);
  --glow:rgba(20,58,72,.5); --halo:rgba(87,203,217,.085); --shade:#07141e; --glass:rgba(10,17,27,.78);
  --bar:rgba(8,12,17,.95); --scrim:rgba(3,8,13,.8); --sel:rgba(138,232,239,.28);
  --toast-bg:#c4f8f7; --toast-ink:#102d37;
  --shadow:0 30px 130px rgba(0,0,0,.55); --shadow-sm:0 10px 45px rgba(0,0,0,.35);
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23092730' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='%238ae8ef' stroke-width='1.4'/%3E%3C/svg%3E");
  /* type */
  --sans:"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display:"Space Grotesk", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gut:clamp(16px,4vw,56px);
}
/* Light: the same hues, darkened for AA contrast on white. Also used for printing (see the end of the file). */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f3f6f8; --surface:#ffffff; --surface-2:#eaf0f3; --sunken:#f8fafb; --dialog:#ffffff; --aside:#ffffff;
  --ink:#0c141b; --ink-2:#33444f; --muted:#4d6270; --dim:#566b79;
  --line:#c9d5dd; --line-2:#dde5ea; --line-3:#c3d2db; --line-strong:#748896; --rule:#9db4c1;
  --accent:#0a6a73; --accent-2:#07555c; --accent-soft:rgba(10,106,115,.09); --accent-ink:#ffffff;
  --violet:#a4461a; --violet-2:#8a3a14; --violet-soft:rgba(164,70,26,.09); --violet-ink:#ffffff;
  --good:#1b7348; --good-soft:rgba(27,115,72,.1); --warn:#855700; --warn-soft:rgba(176,122,0,.12);
  --bad:#b3261e; --bad-soft:rgba(179,38,30,.09); --bad-ink:#ffffff;
  --fur:86,107,121; --core:#ffffff;
  --k-school:#e3e9ed; --k-degree:#d2ecef; --k-training:#a8dce1; --k-work:#d6dee4; --k-selection:#fadccc;
  --q0:#e3e9ed; --q1:#c5e6e9; --q2:#8fd0d6; --q3:#3f9fa8; --q4:#0a6a73;
  --orb-dot:#0a6a73; --orb-grid:#0a6a73; --orb-ring:#6f8b99; --orb-band-2:#4b57b8; --orb-fade:#f3f6f8; --peri:#4b57b8;
  --hover:#e7eff3; --hover-line:#6a8595; --track:#d9e4ea; --dot-line:#6f8b99; --dot-ring:#6f8b99; --rail:#c3d2db;
  --check-line:#748896; --index:#56707f; --sector:#33444f; --caption:#0a5a62; --caption-line:#b9d3d9;
  --pill-line:#b5c7d1; --pill-ink:#33444f; --pill-on:#0a6a73; --pill-on-ink:#ffffff;
  --note-bg:#e3f1f3; --upload-line:#8fa9b6; --upload-bg:#eef5f8; --dialog-line:#c3d2db;
  --warm-line:#e5cbbd; --warm-ink:#4f3f38; --warm-bg:radial-gradient(circle at 100% 20%,rgba(164,70,26,.08),transparent 65%),#fffaf6;
  --grad-card:linear-gradient(120deg,#ffffff,#f1f6f8); --grad-route:linear-gradient(130deg,#ffffff,#eef4f6); --grad-bar:linear-gradient(110deg,#ffffff,#f0f5f7);
  --glow:rgba(10,106,115,.07); --halo:rgba(10,106,115,.06); --shade:rgba(255,255,255,.9); --glass:rgba(255,255,255,.84);
  --bar:rgba(243,246,248,.95); --scrim:rgba(12,20,27,.45); --sel:rgba(10,106,115,.2);
  --toast-bg:#0c2a30; --toast-ink:#e6fbfc;
  --shadow:0 30px 80px rgba(12,20,27,.18); --shadow-sm:0 10px 30px rgba(12,20,27,.14);
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='%230a6a73' stroke-width='1.4'/%3E%3C/svg%3E");
}

/* base */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:var(--line-3) transparent}
body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(ellipse 70% 60% at 55% 26%,var(--glow),transparent 70%) 50% 0/100% 1200px no-repeat,var(--bg);font-family:var(--sans);font-size:15px;line-height:1.55;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
button,a,input,select,textarea,label{-webkit-tap-highlight-color:transparent}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--accent-2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--sel);color:var(--ink)}
::placeholder{color:var(--dim);opacity:1}
h1,h2,h3,h4{text-wrap:balance;margin:0}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.015em;line-height:1.15}
b,strong{font-weight:600}
p{margin:0}
select option{background:var(--surface);color:var(--ink)}
.app{max-width:1440px;margin:0 auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px));padding-block:0 64px}
main{margin-top:var(--notice-h,0px)} /* room for the AI notice while it shows (app.js sets --notice-h) */
main:focus{outline:none}
.skip{position:fixed;left:max(12px,env(safe-area-inset-left,0px));top:-90px;z-index:100;background:var(--accent);color:var(--accent-ink);padding:12px 16px;border-radius:3px;font-size:14px;font-weight:650;text-decoration:none;transition:top .15s}
.skip:focus{top:calc(10px + env(safe-area-inset-top,0px));color:var(--accent-ink)}
.noscript{margin:24px;padding:24px;border:1px solid var(--violet);border-radius:4px;color:var(--violet)}

/* header (the kit's masthead): a hairline full-bleed bar, the nav underline sits on it. The bar colour extends to
   the viewport edges through border-image outset, which never causes horizontal scrolling. No backdrop-filter here:
   it would become the containing block of the fixed mobile tab bar inside it. */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:20px;min-height:calc(72px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);border-image:linear-gradient(0deg,var(--line) 1px,var(--bar) 1px) fill 0//0 100vmax}
.brand{display:flex;align-items:center;gap:10px;flex:none;color:var(--ink);text-decoration:none}
.brand svg{width:26px;height:26px;display:block}
.word{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:-.055em;line-height:1;text-transform:lowercase;color:var(--ink)}
.word i{font-style:normal;color:var(--accent)}
.live{display:none;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--violet)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--violet);box-shadow:0 0 12px var(--violet);animation:blink 1.2s ease-in-out infinite}
body.running .live{display:inline-flex}
@keyframes blink{50%{opacity:.3}}
.tabs{display:flex;align-self:stretch;gap:2px;margin-left:auto}
.tab{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;background:none;border:0;padding:0 12px;font-size:14px;font-weight:500;letter-spacing:.005em;color:var(--muted);white-space:nowrap}
.tab::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .2s ease-out}
.tab:hover{color:var(--ink)}
.tab[aria-current="page"]{color:var(--ink)}
.tab[aria-current="page"]::after{transform:none}
.tab:focus-visible{outline-offset:-3px}
.tab-i{display:none;width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.who{display:flex;gap:10px;align-items:center;flex:none;min-width:0}
.sel{appearance:none;-webkit-appearance:none;height:40px;min-width:0;max-width:230px;padding:0 34px 0 12px;background:var(--surface-2) var(--chev) no-repeat right 12px center/12px;border:1px solid var(--line-strong);border-radius:3px;font-size:14px;color:var(--ink);text-overflow:ellipsis}
.sel:hover{border-color:var(--hover-line)}
.sel:disabled{opacity:.55}
.mot{display:inline-flex;align-items:center;gap:6px;height:40px;background:none;border:1px solid var(--line-3);border-radius:3px;padding:0 12px;font-size:13px;color:var(--ink-2);white-space:nowrap}
.mot:hover{border-color:var(--accent);color:var(--accent)}
.who .btn.sm{min-height:40px}

/* shared */
.eyebrow{font-family:var(--sans);font-size:12px;font-weight:550;letter-spacing:.16em;line-height:1.6;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.micro{font-size:12px;letter-spacing:.04em;color:var(--muted)}
.inline-unit{font-family:var(--sans);font-size:.4em;letter-spacing:0;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:11px 18px;font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.005em;line-height:1.2;text-transform:none;text-decoration:none;white-space:nowrap;color:var(--ink);background:transparent;border:1px solid var(--line-strong);border-radius:3px;transition:background-color .2s,border-color .2s,color .2s}
.btn:hover{background:var(--hover);border-color:var(--hover-line);color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:650}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--accent-ink)}
.btn.violet{background:var(--violet);border-color:var(--violet);color:var(--violet-ink);font-weight:650}
.btn.violet:hover{background:var(--violet-2);border-color:var(--violet-2);color:var(--violet-ink)}
.btn.ghost{border-color:var(--line-3);color:var(--ink-2)}
.btn.ghost:hover{border-color:var(--hover-line);background:var(--hover);color:var(--ink)}
.btn.sm{min-height:36px;padding:7px 13px;font-size:13px;gap:8px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn.ghost:disabled:hover{border-color:var(--line-3);color:var(--ink-2)}
.btn.primary:disabled:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.violet:disabled:hover{background:var(--violet);border-color:var(--violet);color:var(--violet-ink)}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:11px;font-weight:550;letter-spacing:.1em;line-height:1.6;text-transform:uppercase;padding:2px 8px;border:1px solid var(--line-3);border-radius:2px;color:var(--ink-2);background:transparent;white-space:nowrap}
.chip.violet{color:var(--violet);border-color:var(--violet);background:var(--violet-soft)}
.chip.accent{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.chip.good{color:var(--good);border-color:var(--good);background:var(--good-soft)}
a.src{display:inline-block;max-width:100%;padding:1px 7px;font-size:11.5px;font-weight:500;letter-spacing:.03em;line-height:1.6;color:var(--good);text-decoration:none;border:1px solid var(--good);border-radius:2px;white-space:normal;overflow-wrap:anywhere}
a.src:hover{background:var(--good-soft);color:var(--good)}
span.est{display:inline-block;padding:1px 7px;font-size:11.5px;letter-spacing:.03em;line-height:1.6;color:var(--muted);border:1px dashed var(--line-strong);border-radius:2px;white-space:nowrap}
.pill{display:inline-block;font-size:11px;font-weight:550;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:3px;white-space:nowrap}
.st-met{background:var(--good-soft);color:var(--good)}
.st-on-track{background:var(--accent-soft);color:var(--accent)}
.st-gap{background:var(--bad-soft);color:var(--bad)}
.st-later{background:var(--line-2);color:var(--muted)}
.st-check{background:var(--warn-soft);color:var(--warn)}
.card,.panel{background:var(--surface);border:1px solid var(--line-3);border-radius:5px;padding:22px}
.muted{color:var(--muted)}
.mono{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.03em}
.num{font-family:var(--display);font-variant-numeric:tabular-nums}
.view{padding-block:34px 0}
.vh{display:grid;gap:12px;margin-bottom:32px;max-width:880px}
.vh h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.9vw,50px);line-height:1.06;letter-spacing:-.035em}
.vh .lede{color:var(--muted);font-size:16px;line-height:1.65;max-width:68ch}
/* Section labels in the kit's "01 / YOUR STARTING POINT" style (app.js writes the numbers as .num spans). */
h3.sec{font-family:var(--sans);font-size:12px;font-weight:550;letter-spacing:.14em;line-height:1.5;text-transform:uppercase;color:var(--dim);margin:48px 0 18px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
h3.sec::before{content:"";flex:none;width:24px;height:1px;background:var(--rule)}
h3.sec .num,legend .num{margin-right:-5px}
.empty{padding:40px 24px;text-align:center;border:1px solid var(--line-3);border-radius:5px;background:var(--surface);display:grid;gap:14px;justify-items:center;color:var(--ink-2)}
.empty::before{content:"↗";content:"↗" / "";font-size:30px;line-height:1;color:var(--violet)}
.skel{height:14px;border-radius:2px;background:linear-gradient(90deg,var(--line-2),var(--surface-2),var(--line-2));background-size:200% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* ORB VIEW */
.orb-view{display:grid;grid-template-columns:310px minmax(0,1fr);gap:32px;align-items:start}
.rail{display:grid;gap:24px}
#railMain{display:grid;gap:24px}
.subj{display:grid;gap:6px}
.subj-name{font-family:var(--display);font-size:32px;font-weight:400;letter-spacing:-.035em;line-height:1.08;margin-top:2px}
.subj-meta{color:var(--muted);font-size:14px}
.subj-goal{font-size:15px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:4px}
.subj-goal b{font-weight:500}
.subj-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.dimlist{display:grid}
.dimrow{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px;width:100%;min-height:44px;text-align:left;background:none;border:0;border-top:1px solid var(--line-2);padding:12px 0;color:var(--ink)}
.dimrow:last-child{border-bottom:1px solid var(--line-2)}
.dimrow .lbl{font-size:14px;font-weight:500;color:var(--ink-2)}
.dimrow .lbl .num{color:var(--dim);font-size:13px}
.dimrow .val{font-family:var(--display);font-size:18px;font-variant-numeric:tabular-nums}
.dimrow .bar{grid-column:1/-1;height:3px;margin-top:4px;border-radius:2px;background:var(--track);position:relative;overflow:hidden}
.dimrow .bar i{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:2px;transition:width .5s}
.dimrow.low .bar i{background:var(--warn)}
.dimrow .met{grid-column:1/-1;font-size:12.5px;color:var(--muted);line-height:1.4}
.dimrow[aria-pressed="true"] .lbl,.dimrow[aria-pressed="true"] .val,.dimrow.hot .lbl{color:var(--accent)}
.dimrow[aria-pressed="true"] .lbl .num,.dimrow.hot .lbl .num,.dimrow:hover .lbl .num{color:inherit}
.dimrow:hover .lbl{color:var(--accent)}
.tuner{border:1px solid var(--accent);background:var(--surface);border-radius:5px;padding:18px;display:grid;gap:14px}
.tuner-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.slide{display:grid;gap:2px}
.slide-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px;color:var(--ink-2)}
.slide-top b{font-family:var(--display);font-weight:400;font-size:18px;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
input[type=range]{width:100%;height:28px;margin:0;accent-color:var(--accent);background:transparent;cursor:pointer}
.routepick{display:grid;gap:8px}
.routepick button{min-height:44px;text-align:left;background:var(--surface-2);border:1px solid var(--line-3);border-radius:3px;padding:10px 12px;font-size:14px;color:var(--ink)}
.routepick button:hover{border-color:var(--hover-line)}
.routepick button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.tuner-odds{font-size:13px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:10px}
.tuner-odds b{font-family:var(--display);font-weight:400;font-size:16px;color:var(--violet)}

/* intake (the kit's ambition bar) */
.intake{display:grid;gap:16px;padding:22px;border:1px solid var(--line-3);border-radius:4px;background:var(--grad-bar)}
.intake h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,2.4vw,34px);line-height:1.08;letter-spacing:-.035em}
.goalin{width:100%;font-family:var(--display);font-size:22px;letter-spacing:-.01em;border:0;border-bottom:1px solid var(--line-strong);background:transparent;padding:10px 0;color:var(--ink);border-radius:0}
.goalin:focus{outline:2px solid var(--accent);outline-offset:5px;border-bottom-color:var(--accent)}
.ichips{display:flex;flex-wrap:wrap;gap:8px}
.ichips button{display:inline-flex;align-items:center;gap:6px;min-height:34px;background:transparent;border:1px solid var(--line-3);border-radius:2px;padding:6px 10px;font-size:12.5px;color:var(--ink-2)}
.ichips button::after{content:"↗";content:"↗" / "";color:var(--accent)}
.ichips button:hover{border-color:var(--accent);color:var(--ink)}
.irow{display:grid;grid-template-columns:1fr 90px;gap:12px}
.fld{display:grid;gap:8px;min-width:0}
.fl{font-size:13.5px;font-weight:500;line-height:1.4;color:var(--ink-2)}
.fh{font-size:13px;line-height:1.5;color:var(--muted)}
.fld input,.fld textarea,.fld select{width:100%;min-height:44px;border:1px solid var(--line-strong);background:var(--sunken);border-radius:3px;padding:10px 12px;font-size:16px;color:var(--ink)}
.fld select{appearance:none;-webkit-appearance:none;padding-right:36px;background:var(--sunken) var(--chev) no-repeat right 12px center/12px}
.fld input[type=range]{min-height:0;height:28px;padding:0;border:0;background:transparent}
.fld textarea{min-height:84px;resize:vertical;line-height:1.55}
.fld input:hover,.fld textarea:hover,.fld select:hover{border-color:var(--hover-line)}
.fld input:focus,.fld textarea:focus,.fld select:focus,.chatf input:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}
.fld input[type=range]:focus{outline:none}
.fld input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.kbnote{font-size:12.5px;color:var(--good);display:flex;gap:6px;align-items:flex-start;line-height:1.45}
.kbnote.none{color:var(--muted)}
.kbnote:empty{display:none}
.go{width:100%;min-height:50px;padding:14px 18px;font-size:15px}
.btn.go[data-go],#gateGo{justify-content:space-between}
.btn.go[data-go]::after,#gateGo::after{content:"↗";content:"↗" / "";font-size:18px;line-height:1;font-weight:400}
.examples{display:grid;border-top:1px solid var(--line);padding-top:14px}
.examples .eyebrow{color:var(--dim);margin-bottom:4px}
.examples button{display:block;width:100%;min-height:44px;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-2);padding:11px 0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.examples button:last-child{border-bottom:0}
.examples button:hover{color:var(--accent)}
.examples button b{font-weight:500;color:var(--ink)}

/* run panel */
.run{display:grid;gap:14px;border:1px solid var(--violet);border-radius:4px;padding:18px;background:radial-gradient(ellipse at 0% 100%,var(--violet-soft),transparent 65%),var(--surface)}
.run-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.run-h .eyebrow{color:var(--violet)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.step{display:grid;grid-template-columns:16px 1fr auto;gap:10px;align-items:center;font-size:14px;color:var(--muted)}
.step i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line-strong);display:block}
.step.running{color:var(--ink)}
.step.running i{border-color:var(--violet);border-top-color:transparent;animation:spin .7s linear infinite}
.step.done{color:var(--ink)}
.step.done i{background:var(--accent);border-color:var(--accent)}
.step.error i,.step.stopped i{background:var(--bad);border-color:var(--bad)}
.step small{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.step .step-why{grid-column:2/-1;font-size:13px;color:var(--ink-2);line-height:1.4}
.step button{grid-column:2/-1;justify-self:start;min-height:32px;background:none;border:0;padding:6px 0;font-size:13px;color:var(--accent);text-decoration:underline;text-underline-offset:.2em}
@keyframes spin{to{transform:rotate(360deg)}}
.feed{list-style:none;margin:0;padding:12px 0 0;display:grid;gap:6px;font-size:12.5px;color:var(--ink-2);border-top:1px solid var(--line)}
.feed li{animation:feedIn .5s ease-out both;line-height:1.4}
.feed li b{color:var(--violet);font-weight:500}
@keyframes feedIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* stage: the orb canvas with its readout, orbiting labels and prediction pager */
.stagecol{display:grid;gap:16px;min-width:0}
.stage{position:relative;width:100%;height:clamp(440px,62vw,740px);touch-action:pan-y;user-select:none;-webkit-user-select:none;isolation:isolate}
.stage::before{content:"";position:absolute;inset:10%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,var(--halo),transparent 65%);pointer-events:none}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.readout{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;text-align:center;gap:8px;pointer-events:none}
.readout > *{pointer-events:auto}
.rv{font-family:var(--display);font-weight:400;color:var(--ink);line-height:1;letter-spacing:-.04em;font-size:var(--rv,48px);font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 1px 18px var(--shade)}
.rv.swap{animation:rvIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes rvIn{from{opacity:0;transform:translateY(10px) scale(.94);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.ru{font-size:12px;font-weight:550;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);text-shadow:0 2px 10px var(--shade)}
.rl{max-width:100%;padding:6px 12px;font-size:12.5px;letter-spacing:.02em;line-height:1.4;color:var(--caption);background:var(--glass);border:1px solid var(--caption-line);border-radius:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.rl:hover{border-color:var(--accent)}
.stage.compact .rl{-webkit-line-clamp:2;font-size:11.5px;padding:5px 10px}
.stage.compact .ru{font-size:11px;letter-spacing:.18em}
.stage.compact .readout .btn{min-height:36px;font-size:12px;padding:6px 10px}
.readout .btn{margin-top:4px;min-height:36px;font-size:12.5px;padding:7px 12px;background:var(--core);border-color:var(--line-3);color:var(--ink-2)}
.readout .btn:hover{background:var(--hover);border-color:var(--accent);color:var(--accent)}
.stage.scanning .rv{color:var(--violet)}
.stage.scanning .ru,.stage.scanning .rl{color:var(--violet);border-color:var(--violet)}
.tag{position:absolute;display:grid;gap:4px;justify-items:start;background:none;border:0;padding:0;max-width:190px;text-align:left;color:inherit;transition:opacity .25s,transform .25s}
.tag.l{justify-items:end;text-align:right;transform:translate(-100%,-50%)}
.tag.r{transform:translate(0,-50%)}
.tag.b{justify-items:center;text-align:center;transform:translate(-50%,0)}
.tag b{display:inline-flex;align-items:center;gap:8px;background:var(--glass);color:var(--sector);font-weight:500;font-size:13px;letter-spacing:.01em;padding:7px 11px;border-radius:2px;white-space:nowrap;transition:color .2s}
.tag b::before{content:"";flex:none;width:5px;height:5px;border:1px solid var(--dot-line);border-radius:50%;transition:background-color .2s,box-shadow .2s}
.tag span{font-size:12px;color:var(--muted);background:var(--glass);padding:1px 6px;border-radius:2px;line-height:1.45}
.tag.dim{opacity:.35}
.tag:hover b{color:var(--accent)}
.tag:hover b::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px var(--accent)}
.tag.hot b{color:var(--accent)}
.tag.hot b::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px var(--accent)}
.tag.globe-label{z-index:4}
/* Orbiting dimension labels (the kit's Education, Skills, Experience … around the globe). The orb's own labels are
   .tag.globe-label (styled on their <b> above); a bare .globe-label is the same pill on the element itself. */
.globe-label:not(.tag){display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:8px 12px;background:var(--glass);border:0;border-radius:2px;font-size:13.5px;font-weight:500;line-height:1.2;color:var(--sector);white-space:nowrap;transition:color .2s}
.globe-label:not(.tag)::before{content:"";flex:none;width:5px;height:5px;border:1px solid var(--dot-line);border-radius:50%;transition:background-color .2s,box-shadow .2s}
.stage .globe-label:not(.tag){position:absolute;z-index:4}
.globe-label:not(.tag):hover,.globe-label.active:not(.tag),.globe-label.hot:not(.tag),.globe-label[aria-pressed="true"]:not(.tag){color:var(--accent)}
.globe-label.active:not(.tag)::before,.globe-label.hot:not(.tag)::before,.globe-label[aria-pressed="true"]:not(.tag)::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px var(--accent)}
.globe-label.dim:not(.tag){opacity:.4}
.counter{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px}
.cnt{position:relative;width:48px;height:48px;border-radius:50%;border:1px solid var(--accent);display:grid;place-items:center;font-family:var(--display);font-size:12px;letter-spacing:.02em;color:var(--accent);background:var(--core);font-variant-numeric:tabular-nums}
.cnt::after{content:"";position:absolute;right:-1px;top:-1px;width:10px;height:10px;border-radius:50%;background:var(--violet);box-shadow:0 0 10px var(--violet)}
.arrow{width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--line-3);background:var(--core);color:var(--accent);font-size:17px;line-height:1;display:grid;place-items:center}
.arrow:hover{border-color:var(--accent);background:var(--hover)}
.under-stage{display:grid;justify-items:center;gap:6px;text-align:center;min-height:52px}
.pred-note{max-width:64ch;color:var(--ink-2);font-size:15px;line-height:1.55}
.pred-src{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;min-height:18px}
.swipe-hint{font-size:12px;letter-spacing:.06em;color:var(--dim)}
.under{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:20px;margin-top:14px}
.under .card{display:grid;gap:12px;align-content:start;background:var(--grad-card)}
.edge-name{font-family:var(--display);font-size:22px;font-weight:400;letter-spacing:-.02em;line-height:1.2}
.kv{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--muted)}
.kv b{font-family:var(--display);font-weight:400;font-size:15px;color:var(--ink)}
.one{font-size:17px;line-height:1.45;font-weight:500}
.obars{display:grid;gap:4px}
.obar{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:6px 12px;min-height:44px;padding:6px 0;font-size:14px;background:none;border:0;text-align:left;color:var(--ink)}
.obar .tr{grid-column:1/-1;height:3px;background:var(--track);border-radius:2px;overflow:hidden}
.obar .tr i{display:block;height:100%;background:var(--accent);border-radius:2px;transition:width .6s}
.obar.sharp .tr i{background:var(--violet)}
.obar b{font-family:var(--display);font-weight:400;font-size:16px;font-variant-numeric:tabular-nums}
.obar.mine span:first-child,.obar:hover span:first-child{color:var(--accent)}
.how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 24px;counter-reset:how}
.how li{display:grid;grid-template-columns:34px 1fr;gap:10px;font-size:14px;line-height:1.55;color:var(--muted);counter-increment:how}
.how li::before{content:counter(how,decimal-leading-zero);font-family:var(--display);font-size:20px;line-height:1.1;color:var(--index)}
.how b{color:var(--ink);font-weight:500}

/* EDGE */
.verdict{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;padding:28px;border:1px solid var(--warm-line);background:var(--warm-bg);border-radius:5px}
.verdict h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.6vw,34px);line-height:1.18;letter-spacing:-.03em;margin:10px 0 12px}
.verdict p{color:var(--warm-ink);max-width:66ch;line-height:1.7}
.verdict .counter-arg{margin-top:14px;padding-top:14px;border-top:1px solid var(--warm-line);font-size:14.5px}
.verdict .counter-arg b{color:var(--ink);font-weight:500}
.onething{margin-top:24px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;padding:22px;border-left:2px solid var(--accent);border-radius:0 4px 4px 0;background:var(--note-bg)}
.onething .big{font-size:12px;font-weight:550;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);writing-mode:vertical-rl;transform:rotate(180deg)}
.onething h4{font-family:var(--display);font-size:22px;font-weight:400;letter-spacing:-.02em;line-height:1.3;margin-bottom:8px}
.edge-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.matrix{border:1px solid var(--line-3);border-radius:5px;background:var(--surface);padding:12px}
.matrix svg{display:block;width:100%;height:auto}
.matrix text{font-family:var(--sans)}
.mv-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.mv{display:grid;grid-template-columns:28px 1fr;gap:12px}
.mv .n{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-size:12px;display:grid;place-items:center}
.mv.quick .n{background:var(--violet);color:var(--violet-ink)}
.mv b{font-weight:600;font-size:15px}
.mv p{font-size:14px;line-height:1.55;color:var(--ink-2)}
.mv .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;align-items:center}
.levers{display:grid;gap:4px}
.lever{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:14px;align-items:center;min-height:44px;font-size:14px}
.lever .tr{height:6px;background:var(--track);border-radius:3px;overflow:hidden}
.lever .tr i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .6s}
.lever.lead .tr i{background:var(--violet)}
.lever .lv{font-size:13px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.lever button{min-height:44px;background:none;border:0;padding:8px 0;text-align:left;font-size:14px;font-weight:500;color:var(--ink)}
.lever button:hover{color:var(--accent)}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.door{display:grid;gap:8px;padding:18px;border:1px solid var(--line-3);border-left:2px solid var(--violet);border-radius:0 5px 5px 0;background:var(--surface);align-content:start}
.door b{font-weight:600;font-size:15px}
.door p{font-size:14px;line-height:1.55;color:var(--ink-2)}
.wins{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.win{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:16px 18px;border:1px solid var(--line-3);border-radius:5px;background:var(--surface)}
.win .cd{font-family:var(--display);font-size:26px;font-weight:400;letter-spacing:-.02em;color:var(--accent);line-height:1.1}
.win .cd small{display:block;margin-top:4px;font-family:var(--sans);font-size:11px;font-weight:550;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.win.open .cd{color:var(--good)}
.win b{font-weight:600;font-size:15px}
.win p{font-size:14px;color:var(--ink-2)}
.bench{display:grid;gap:14px}
.bm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:8px 18px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.bm b{font-weight:600;font-size:15px}
.bm p{font-size:14px;color:var(--ink-2)}
.bm .gap{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.bm .gap .tr{height:4px;background:var(--track);border-radius:2px;overflow:hidden}
.bm .gap .tr i{display:block;height:100%;background:var(--warn)}
.bm .gap.ok .tr i{background:var(--good)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
table.tbl th{font-size:11px;font-weight:550;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line-3);background:var(--surface-2)}
table.tbl td{padding:12px 16px;border-bottom:1px solid var(--line-2);vertical-align:top}
table.tbl tr:last-child td{border-bottom:0}
table.tbl td.you{font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;border:1px solid var(--line-3);border-radius:5px;background:var(--surface)}
.srcs{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px;color:var(--ink-2)}
.srcs li{display:grid;grid-template-columns:38px 1fr;gap:8px}
.srcs .fid{font-size:12px;color:var(--good);font-variant-numeric:tabular-nums}

/* ROUTES */
.chartbox{overflow-x:auto;border:1px solid var(--line-3);border-radius:5px;background:var(--surface);padding:16px 12px 10px}
.chartbox svg{display:block;width:100%;min-width:680px;height:auto}
.chartbox text{font-family:var(--sans)}
.lanes .rname{font-size:12.5px;fill:var(--ink)}
.lanes .rname.sharp{font-weight:600}
.lanes .rtag{font-size:9.5px;letter-spacing:.1em;fill:var(--violet)}
.lanes .rtag.mine{fill:var(--accent)}
.lanes .ph{stroke:var(--surface);stroke-width:1.5}
.ph-school{fill:var(--k-school)} .ph-degree{fill:var(--k-degree)} .ph-training{fill:var(--k-training)} .ph-work{fill:var(--k-work)} .ph-selection{fill:var(--k-selection)}
.lanes .phl{font-size:10.5px;fill:var(--ink)}
.goalmark{fill:var(--violet)}
.goalt{font-size:12px;fill:var(--violet);font-weight:600}
.tick{stroke:var(--line);stroke-width:1}
.tickt{font-size:10.5px;fill:var(--muted)}
.nowl{stroke:var(--accent);stroke-width:1;stroke-dasharray:3 3}
.nowt{font-size:10px;fill:var(--accent);letter-spacing:.1em}
.oline{fill:none;stroke-width:1.8}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 2px 0;font-size:12.5px;color:var(--ink-2)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:2px;vertical-align:-2px;margin-right:7px}
.route-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:28px}
.route{display:grid;gap:14px;align-content:start;position:relative;padding:26px;background:var(--grad-route)}
.route.sharp{border-color:var(--violet)}
.route.mine{box-shadow:inset 0 0 0 1px var(--accent)}
.route-h{display:flex;justify-content:space-between;align-items:start;gap:14px}
.route-h h4{font-family:var(--display);font-weight:400;font-size:23px;line-height:1.2;letter-spacing:-.025em;margin:10px 0 0}
.route .odds{text-align:right;flex:none}
.route .odds b{display:block;font-family:var(--display);font-weight:400;font-size:38px;line-height:1;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.route.sharp .odds b{color:var(--violet)}
.route .odds span{font-size:11px;font-weight:550;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.funnel{display:grid;gap:10px;padding-block:16px;border-block:1px solid var(--line-3)}
.fst{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:13.5px}
.fst .tr{grid-column:1/-1;height:3px;background:var(--track);border-radius:2px;overflow:hidden}
.fst .tr i{display:block;height:100%;background:var(--accent)}
.fst .nm{font-weight:500}
.fst .pv{font-size:12.5px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.fst small{grid-column:1/-1;color:var(--muted);font-size:12.5px;line-height:1.4}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:13.5px}
.pc ul{margin:6px 0 0;padding-left:16px;display:grid;gap:4px;color:var(--ink-2)}
.route-f{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line-3);padding-top:14px}
.excluded{display:grid;gap:10px;margin-top:20px}
.excluded .x{font-size:14px;color:var(--ink-2);padding:12px 16px;border:1px dashed var(--line-3);border-radius:4px}

/* TRAJECTORY (the kit's milestone rail). .tl::before sits at 52px + 10px gap + half of the 20px dot column. */
.traj-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px;align-items:start}
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:71.5px;top:10px;bottom:10px;width:1px;background:var(--rail)}
.ms{display:grid;grid-template-columns:52px 20px 1fr;gap:0 10px;padding-block:10px}
.ms .ag{font-family:var(--display);font-size:22px;font-weight:400;letter-spacing:-.02em;color:var(--accent);text-align:right;line-height:1.15;font-variant-numeric:tabular-nums}
.ms .dot{width:20px;display:grid;justify-items:center;padding-top:7px}
.ms .dot i{width:12px;height:12px;border-radius:50%;border:1px solid var(--dot-ring);background:var(--bg);position:relative;z-index:1}
.ms.done .dot i{background:var(--accent);border-color:var(--accent)}
.ms.goalm .dot i{width:14px;height:14px;background:var(--violet);border-color:var(--violet);box-shadow:0 0 12px var(--violet)}
.ms .body{display:grid;gap:4px}
.ms .when{font-size:12.5px;letter-spacing:.04em;color:var(--dim);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ms .ttl label{display:flex;gap:12px;align-items:flex-start;min-height:32px;cursor:pointer;font-size:15.5px;font-weight:500}
.ms.done .ttl span{text-decoration:line-through;text-decoration-color:var(--muted);color:var(--ink-2)}
.ms .det{font-size:14px;line-height:1.55;color:var(--ink-2)}
.schools{display:grid;gap:12px}
.school{display:grid;gap:6px;padding:16px 18px;border:1px solid var(--line-3);border-radius:5px;background:var(--grad-card)}
.school-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.school-h b{font-weight:600;font-size:15px}
.school .dist{font-size:12px;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.school .pl{font-size:12.5px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.school p{font-size:14px;color:var(--ink-2)}
.skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.skillcol{display:grid;gap:12px;align-content:start}
.skillcol h4{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:-.02em;color:var(--accent);margin:0;display:flex;align-items:baseline;gap:10px}
.skillcol h4 span{font-family:var(--sans);font-size:11px;font-weight:550;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.skill{border-top:1px solid var(--line-3);padding-top:10px}
.skill b{font-weight:600;font-size:15px}
.skill p{font-size:14px;color:var(--ink-2)}

/* TODAY (the kit's action plan: big numerals, an energy-style switch, round task checks) */
.today-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.stats{display:flex;gap:32px;flex-wrap:wrap;padding-block:14px;border-block:1px solid var(--line-3)}
.stat b{display:block;font-family:var(--display);font-weight:400;font-size:38px;line-height:1.05;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:6px;font-size:12.5px;color:var(--dim)}
.today-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:start}
.daytoggle{display:inline-flex;gap:8px;margin-bottom:16px}
.daytoggle button{min-height:44px;min-width:112px;background:transparent;border:1px solid var(--line-strong);border-radius:3px;padding:10px 16px;font-size:14px;color:var(--ink-2)}
.daytoggle button:hover{border-color:var(--hover-line);color:var(--ink)}
.daytoggle button[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.sched{list-style:none;margin:0;padding:0;display:grid}
.blk{display:grid;grid-template-columns:62px 1fr auto;gap:14px;padding:14px 12px;border-top:1px solid var(--line-2);align-items:baseline}
.blk:last-child{border-bottom:1px solid var(--line-2)}
.blk .tm{font-family:var(--display);font-size:15px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.blk .bt{font-size:15px;line-height:1.45}
.blk .bt small{display:block;margin-bottom:2px;font-size:11px;font-weight:550;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.blk .mn{font-size:12.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.blk.nowb{background:linear-gradient(90deg,var(--accent-soft),transparent 75%);box-shadow:inset 2px 0 0 var(--accent)}
.blk.nowb .tm{color:var(--accent)}
.habits{display:grid;gap:8px}
.habit{display:flex;align-items:center;gap:14px;min-height:52px;padding:12px 14px;border:1px solid var(--line-3);border-radius:5px;background:var(--surface);cursor:pointer;font-size:15px;transition:border-color .2s,background-color .2s}
.habit:hover{border-color:var(--hover-line)}
.habit .hd{margin-left:auto}
.habit.on{border-color:var(--accent);background:var(--accent-soft)}
/* round task checks (habits, milestones): native checkboxes restyled, still keyboard and screen-reader checkboxes */
.habit input,.ms .ttl input{-webkit-appearance:none;appearance:none;flex:none;width:24px;height:24px;margin:0;border:1px solid var(--check-line);border-radius:50%;background:transparent;cursor:pointer;transition:background-color .15s,border-color .15s}
.habit input:hover,.ms .ttl input:hover{border-color:var(--accent);background-color:var(--hover)}
.habit input:checked,.ms .ttl input:checked{border-color:var(--accent);background:var(--accent) var(--check) no-repeat 50% 50%/14px}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;margin-top:8px}
.strip i{aspect-ratio:1;max-width:100%;border-radius:2px}
.strip .q0{background:var(--q0)} .strip .q1{background:var(--q1)} .strip .q2{background:var(--q2)} .strip .q3{background:var(--q3)} .strip .q4{background:var(--q4)}
.strip-l{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:var(--dim)}
.twin{display:grid;gap:14px}
.chat{display:grid;gap:12px;max-height:380px;overflow-y:auto;overscroll-behavior:contain}
.msg{font-size:15px;line-height:1.55;padding:11px 14px;border-radius:5px;white-space:pre-wrap}
.msg.me{background:var(--surface-2);border:1px solid var(--line-3);justify-self:end;max-width:88%}
.msg.tw{border-left:2px solid var(--violet);border-radius:0;padding-left:14px;background:transparent}
.msg.err{color:var(--bad);font-size:13.5px}
.chatf{display:flex;gap:8px}
.chatf input{flex:1;min-width:0;min-height:44px;border:1px solid var(--line-strong);background:var(--sunken);border-radius:3px;padding:10px 12px;font-size:16px}
.sugg{display:flex;flex-wrap:wrap;gap:8px}
.sugg button{display:inline-flex;align-items:center;gap:6px;min-height:34px;background:transparent;border:1px solid var(--line-3);border-radius:2px;padding:6px 10px;font-size:13px;color:var(--ink-2);text-align:left}
.sugg button::after{content:"↗";content:"↗" / "";color:var(--accent)}
.sugg button:hover{border-color:var(--accent);color:var(--ink)}

/* CALIBRATE: legends are section labels too */
.data-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:36px;align-items:start}
form.dataf{display:grid;gap:36px}
fieldset{border:0;margin:0;padding:0;display:grid;gap:16px;min-width:0}
legend{font-size:12px;font-weight:550;letter-spacing:.14em;line-height:1.5;text-transform:uppercase;color:var(--dim);padding:0;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;width:100%}
legend::before{content:"";flex:none;width:24px;height:1px;background:var(--rule)}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.presets button{min-height:34px;background:transparent;border:1px solid var(--line-3);border-radius:2px;padding:6px 11px;font-size:13px;color:var(--ink-2)}
.presets button:hover{border-color:var(--accent);color:var(--ink)}
.subjects{display:grid;gap:8px}
.subj-row{display:grid;grid-template-columns:1fr 96px 44px;gap:8px}
.subj-row input{min-width:0;min-height:44px;border:1px solid var(--line-strong);background:var(--sunken);border-radius:3px;padding:9px 11px;font-size:16px}
.subj-row button,.exp-row button{min-height:44px;border:1px solid var(--line-3);background:none;border-radius:3px;font-size:18px;line-height:1;color:var(--muted)}
.subj-row button:hover,.exp-row button:hover{border-color:var(--bad);color:var(--bad)}
.uploader{display:grid;gap:10px;padding:18px;border:1px dashed var(--upload-line);border-radius:4px;background:var(--upload-bg)}
.uploader input[type=file]{max-width:100%;font-size:14px;color:var(--ink-2)}
.uploader input[type=file]::file-selector-button{min-height:40px;margin-right:12px;padding:8px 13px;border:1px solid var(--line-strong);border-radius:3px;background:var(--surface-2);color:var(--ink);font:inherit;cursor:pointer}
.trait{display:grid;grid-template-columns:160px 1fr 40px;gap:12px;align-items:center;font-size:14.5px;color:var(--ink-2)}
.trait output{font-family:var(--display);font-size:17px;color:var(--accent);text-align:right;font-variant-numeric:tabular-nums}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;position:sticky;bottom:0;z-index:5;background:var(--bg);padding-block:14px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.side{display:grid;gap:18px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 92px)}
.side .card{display:grid;gap:12px;padding:24px;font-size:14px;line-height:1.6;color:var(--muted);background:var(--aside)}
.side .card h4{margin:0;font-size:12px;font-weight:550;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.weights{display:grid;gap:6px;font-size:13px;font-variant-numeric:tabular-nums}
.weights div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line-2);padding-bottom:5px;color:var(--ink-2)}
.sync{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.sync i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--muted)}
.sync.cloud i{background:var(--good);box-shadow:0 0 10px var(--good)}

/* DISCOVER */
.disc-grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:32px;align-items:start}
.disc-in{display:grid;gap:20px}
.exp-row{display:grid;grid-template-columns:1.2fr 1fr 64px 44px;gap:8px}
.exp-row input{min-width:0;min-height:44px;border:1px solid var(--line-strong);background:var(--sunken);border-radius:3px;padding:9px 11px;font-size:16px}
.vchips{display:flex;flex-wrap:wrap;gap:8px}
.vchips button{min-height:38px;background:transparent;border:1px solid var(--pill-line);border-radius:3px;padding:8px 14px;font-size:13.5px;color:var(--pill-ink)}
.vchips button:hover{border-color:var(--accent)}
.vchips button[aria-pressed="true"]{background:var(--pill-on);border-color:var(--pill-on);color:var(--pill-on-ink)}
.disc-out{display:grid;gap:18px;min-width:0}
.cmap{border:1px solid var(--line-3);border-radius:5px;background:var(--surface);overflow:hidden}
.cmap svg{display:block;width:100%;height:auto}
.cmap text{font-family:var(--sans)}
.cn{cursor:pointer}
.cn:focus{outline:none}
.cn:focus-visible .nd,.cn:hover .nd{stroke:var(--violet);stroke-width:2.5}
.cn .selring{opacity:0;transition:opacity .25s}
.cn.sel .selring{opacity:1}
.pop{animation:nodeIn .7s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes nodeIn{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
.edge-in{stroke-dasharray:700;stroke-dashoffset:700;animation:draw 1.3s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.identity{font-family:var(--display);font-weight:400;font-size:clamp(18px,1.9vw,24px);line-height:1.4;letter-spacing:-.015em;color:var(--ink)}
.disc-2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;align-items:start}
.skills-inv{display:flex;flex-wrap:wrap;gap:6px}
.skills-inv .chip{font-size:12.5px;font-weight:500;letter-spacing:.01em;text-transform:none}
.sk{display:inline-flex;gap:8px;align-items:center;padding:5px 10px;border-radius:3px;border:1px solid var(--line-3);font-size:13.5px;background:var(--surface-2)}
.sk .lv{display:inline-flex;gap:3px}
.sk .lv b{width:5px;height:5px;border-radius:50%;background:var(--line-strong)}
.sk .lv b.on{background:var(--accent)}
.rolecard{display:grid;gap:14px;align-content:start}
.rolecard h4{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.2;letter-spacing:-.025em}
.fitm{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.fitm .tr{height:4px;background:var(--track);border-radius:2px;overflow:hidden}
.fitm .tr i{display:block;height:100%;background:var(--accent);border-radius:2px}
.chip.have{color:var(--good);border-color:var(--good)}
.chip.need{color:var(--warn);border-color:var(--warn)}
.chip.hi{color:var(--bad);border-color:var(--bad)}
.firststep{padding:14px 16px;border-left:2px solid var(--violet);background:var(--violet-soft);font-size:14.5px;line-height:1.55}
.pitch{display:grid;gap:12px;border-top:1px solid var(--line-3);padding-top:14px}
.pitch .blk2{display:grid;gap:8px}
.pitch .txt{white-space:pre-wrap;font-size:14.5px;line-height:1.6;padding:12px 14px;background:var(--sunken);border:1px solid var(--line-2);border-radius:3px}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:90;max-width:calc(100% - 32px);transform:translate(-50%,20px);padding:13px 20px;border-radius:4px;background:var(--toast-bg);color:var(--toast-ink);font-size:14px;font-weight:500;box-shadow:var(--shadow-sm);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* footer (the kit's "PATH / PLANNED TRAJECTORY" line, then the disclaimer and legal links) */
.foot{margin-top:72px;padding-top:22px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 24px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.foot-mark{margin:0;font-size:12px;font-weight:550;letter-spacing:.16em;color:var(--dim);white-space:nowrap}
.foot-mark i{font-style:normal;padding:0 9px;color:var(--rule)}
.foot > .sync{grid-column:2;grid-row:1;justify-self:end}
.foot-note{grid-column:1/-1;max-width:96ch}
.foot-links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0 22px;font-size:12.5px}
.foot-links a{display:inline-flex;align-items:center;min-height:36px;color:var(--ink-2);text-decoration:none}
.foot-links a:hover{color:var(--accent);text-decoration:underline}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--ink-2);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.foot-links .linkish{display:inline-flex;align-items:center;min-height:36px;text-decoration:none}
.foot-links a:hover,.linkish:hover{color:var(--accent)}


/* settings button, age gate, settings sheet, safety card, real-data chips */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.icon-btn{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;padding:0;background:none;border:1px solid var(--line-strong);border-radius:50%;color:var(--accent)}
.icon-btn:hover{border-color:var(--accent);background:var(--accent-soft)}
.icon-btn svg{width:18px;height:18px;display:block}
.sync.warn i{background:var(--warn);box-shadow:none}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.btn.danger:hover{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.btn.danger.solid{background:var(--bad);color:var(--bad-ink);font-weight:650}
.btn.danger.solid:hover{filter:brightness(1.08);background:var(--bad);color:var(--bad-ink)}
.btn.danger:disabled:hover{background:transparent;border-color:var(--bad);color:var(--bad)}
.btn.danger.solid:disabled:hover{background:var(--bad);color:var(--bad-ink);filter:none}
/* Full-screen steps (age, consent, break): calm and centred. Auto margins keep a tall card scrollable from its top. */
.gate{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(ellipse 80% 55% at 50% 22%,var(--glow),transparent 70%),var(--bg);padding:calc(32px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
.gate-card{width:100%;max-width:480px;margin-block:auto;display:grid;gap:32px}
.gate-step{display:grid;gap:16px}
.gate h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,8vw,46px);line-height:1.06;letter-spacing:-.04em}
.gate-sub{color:var(--ink-2);font-size:16px;line-height:1.6}
.gate-note{font-size:13.5px;line-height:1.5;color:var(--violet);border-left:2px solid var(--violet);padding:4px 0 4px 12px}
.gate .fld input{max-width:200px;min-height:60px;padding:10px 14px;font-family:var(--display);font-size:30px;letter-spacing:-.02em}
.gate .fld select{max-width:360px}
.gate-err{min-height:1.4em;color:var(--bad);font-size:14px}
.gate .fh{line-height:1.55}
body.gated{overflow:hidden}
.sheet{position:fixed;inset:0;z-index:70;display:flex;justify-content:flex-end}
.sheet-back{position:absolute;inset:0;background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet-card{position:relative;width:min(460px,100%);height:100%;overflow-y:auto;overscroll-behavior:contain;background:var(--dialog);border-left:1px solid var(--dialog-line);box-shadow:var(--shadow);padding:calc(24px + env(safe-area-inset-top,0px)) max(26px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) 26px;display:grid;gap:22px;align-content:start;animation:sheetIn .22s ease-out}
@keyframes sheetIn{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
@keyframes sheetUp{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
.sheet-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sheet-h h2{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.1;letter-spacing:-.03em}
.sheet-sec{display:grid;gap:12px;padding-top:20px;border-top:1px solid var(--line-3);font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.sheet-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.confirm{display:grid;gap:12px;padding:14px 16px;border:1px solid var(--bad);border-radius:4px;background:var(--bad-soft);color:var(--ink)}
.msg.safety{white-space:normal;display:grid;gap:8px;border:1px solid var(--warn);border-left-width:2px;border-radius:0 5px 5px 0;background:var(--warn-soft);color:var(--ink)}
.msg.safety .eyebrow{color:var(--warn)}
.msg.safety ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14.5px}
.msg.safety .crisis-actions{display:inline-flex;flex-wrap:wrap;gap:6px;margin-left:6px;vertical-align:middle}
.msg.safety .crisis-actions .btn{min-height:36px;padding:5px 14px;text-decoration:none}
.twin-note{font-size:13px;margin:2px 0 8px}
.realdata{display:flex;flex-wrap:wrap;gap:6px}
.realdata:empty{display:none}

/* compliance: AI notice, AI-generated labels, report sheet, consent and break screens, reminders, legal links */
.ai-notice{position:absolute;left:0;right:0;top:calc(100% + 8px);display:flex;align-items:center;gap:12px;padding:4px 4px 4px 14px;border:1px solid var(--line-3);border-left:2px solid var(--violet);border-radius:0 4px 4px 0;background:var(--dialog);box-shadow:var(--shadow-sm);font-size:13.5px;line-height:1.45;color:var(--ink-2);animation:noticeIn .3s ease-out}
.ai-notice p{flex:1;min-width:0}
.ai-notice b{color:var(--ink);font-weight:600}
.ai-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--violet);box-shadow:0 0 10px var(--violet)}
.ai-notice .x{flex:none;width:44px;height:44px;border:0;background:none;color:var(--muted);font-size:22px;line-height:1;border-radius:3px}
.ai-notice .x:hover{color:var(--ink);background:var(--hover)}
@keyframes noticeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ai-tag{display:inline-block;padding:0 6px;font-size:10.5px;font-weight:550;letter-spacing:.12em;line-height:1.7;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-3);border-radius:2px;white-space:nowrap}
h3.sec .ai-tag{flex:none}
.aimeta{display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap}
.aimeta.mt{margin-top:10px}
/* The report flag stays small; ::after widens its hit area to 44px without moving anything. */
.rep{position:relative;display:inline-flex;align-items:center;gap:5px;min-height:28px;background:none;border:0;padding:3px 5px;margin-left:-5px;border-radius:2px;font-size:11px;font-weight:550;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.rep::after{content:"";position:absolute;inset:-8px -2px}
.rep svg{width:11px;height:11px;flex:none}
.rep:hover{color:var(--bad);background:var(--bad-soft)}
.rep:disabled{cursor:default;color:var(--good);background:none}
.msg .aimeta{margin-top:8px;white-space:normal}
.pred-src .aimeta{justify-content:center}
.gate-links a,.consent-links a{color:var(--ink-2)}
.consent,.brk{z-index:84}
.brk{z-index:86}
.consent-pts{margin:0;padding:0;list-style:none;display:grid;gap:14px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.consent-pts li{padding-left:14px;border-left:2px solid var(--line-3)}
.consent-pts b{color:var(--ink);font-weight:600}
#consentTeen{border-left-color:var(--violet)}
.gate-card:focus{outline:none}
.brk-clock{min-height:1.1em;font-family:var(--display);font-size:52px;font-weight:400;line-height:1.1;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.legal-list{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:0 18px;font-size:14px}
.legal-list a{display:inline-flex;align-items:center;min-height:36px}
.rform{display:grid;gap:18px}
.rquote{margin:0;padding:12px 14px;border-left:2px solid var(--line-strong);background:var(--sunken);border-radius:0 3px 3px 0;font-size:14px;color:var(--ink-2);white-space:pre-wrap;max-height:9.5em;overflow:hidden;position:relative}
.rchips{display:flex;flex-wrap:wrap;gap:8px}
.rchip{position:relative;cursor:pointer}
.rchip input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;min-height:0}
.rchip span{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1px solid var(--pill-line);border-radius:3px;font-size:14px;color:var(--pill-ink);background:transparent}
.rchip:hover span{border-color:var(--accent);color:var(--ink)}
.rchip input:checked + span{background:var(--pill-on);border-color:var(--pill-on);color:var(--pill-on-ink)}
.rchip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.remind{display:grid;gap:10px}
.remind-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:14.5px}
.remind-row label{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.remind-row input[type=checkbox]{width:20px;height:20px;margin:0;accent-color:var(--accent)}
.remind-row input[type=time]{min-height:44px;border:1px solid var(--line-strong);background:var(--sunken);border-radius:3px;padding:8px 10px;font-size:16px;font-variant-numeric:tabular-nums}
.side .card .credits{font-size:12.5px;color:var(--muted)}

@media (max-width:1180px){
  .top{flex-wrap:wrap;column-gap:12px;row-gap:0;padding-top:calc(8px + env(safe-area-inset-top,0px))}
  .brand,.who{min-height:52px}
  .tabs{order:3;width:100%;height:48px;margin-left:0;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab:first-child{padding-left:2px}
  .tab:first-child::after{left:2px}
  .who{margin-left:auto}
  .mot span:not([aria-hidden]){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .side{top:calc(env(safe-area-inset-top,0px) + 124px)}
}
@media (max-width:1100px){
  .orb-view{grid-template-columns:1fr}
  .rail{order:2}
  #railMain{grid-template-columns:1fr 1fr;align-items:start}
  #railMain > .run,#railMain > .intake{grid-column:1/-1}
  .stagecol{order:1}
  .under{grid-template-columns:1fr 1fr}
  .under .card:first-child{grid-column:1/-1}
  .data-grid{grid-template-columns:1fr}
  .side{position:static}
  .verdict{grid-template-columns:1fr}
  .disc-grid{grid-template-columns:1fr}
  .disc-grid .disc-out{order:-1}
}
.t-s{display:none}
@media (max-width:900px){
  .traj-grid,.today-grid,.edge-grid,.disc-2{grid-template-columns:minmax(0,1fr)}
  .route-grid{grid-template-columns:1fr}
  .skills{grid-template-columns:1fr}
}
/* Phones: the tabs become the kit-style bottom bar (icon over label, a cyan bar on the active tab). */
@media (max-width:760px){
  body{font-size:15px}
  .app{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .top{min-height:calc(60px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);gap:8px}
  .brand,.who{min-height:0}
  .brand svg{width:24px;height:24px}
  .word{font-size:23px}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;height:auto;margin:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;overflow:visible;padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:var(--bar);border-top:1px solid var(--line);-webkit-backdrop-filter:saturate(1.3) blur(16px);backdrop-filter:saturate(1.3) blur(16px)}
  .tab,.tab:first-child{flex-direction:column;gap:4px;min-height:58px;padding:8px 0 7px;font-size:clamp(10px,2.9vw,11.5px);letter-spacing:.01em}
  .tab::after,.tab:first-child::after{top:0;bottom:auto;left:24%;right:24%}
  .tab[aria-current="page"]{color:var(--accent)}
  .tab-i{display:block}
  .t-l{display:none}
  .t-s{display:inline}
  .view{padding-top:26px}
  .vh{margin-bottom:26px}
  .vh h2{font-size:clamp(28px,8.4vw,36px);letter-spacing:-.03em}
  .card,.panel{padding:18px}
  .intake{padding:18px}
  .verdict{padding:22px}
  .route{padding:20px}
  .exp-row{grid-template-columns:1fr 1fr 56px 44px}
  .cmap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmap svg{min-width:720px}
  .who{margin-left:auto;gap:8px}
  .sel{max-width:150px}
  #newBtn{width:44px;padding:0}
  #railMain{grid-template-columns:1fr}
  .under{grid-template-columns:1fr}
  .stage{height:auto;aspect-ratio:1/1.06;max-width:100%}
  .pc,.bm{grid-template-columns:1fr}
  .trait{grid-template-columns:120px 1fr 36px}
  .lever{grid-template-columns:104px minmax(0,1fr)}
  .lever .lv{grid-column:1/-1}
  .onething{grid-template-columns:1fr}
  .onething .big{writing-mode:horizontal-tb;transform:none}
  .win{grid-template-columns:84px 1fr;gap:12px}
  .stats{gap:24px;width:100%}
  .stat b{font-size:32px}
  .daytoggle{display:flex}
  .daytoggle button{flex:1;min-width:0}
  #newBtnLabel{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .actions{bottom:calc(59px + env(safe-area-inset-bottom,0px));padding-bottom:14px}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .foot{grid-template-columns:1fr;margin-top:56px}
  .foot > .sync{grid-column:1;grid-row:auto;justify-self:start}
}
@media (max-width:760px){
  .sheet{align-items:flex-end}
  .sheet-card{width:100%;height:auto;max-height:92vh;max-height:92dvh;border-left:0;border-top:1px solid var(--dialog-line);border-radius:10px 10px 0 0;padding:22px max(20px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));animation-name:sheetUp}
  .sheet-h h2{font-size:26px}
}
/* Touch: every control at least 44px tall (the kit's small chips and links grow; the report flag uses its ::after). */
@media (max-width:760px),(pointer:coarse){
  .btn.sm,.who .btn.sm,.readout .btn,.stage.compact .readout .btn,.msg.safety .crisis-actions .btn{min-height:44px}
  .ichips button,.sugg button,.presets button,.vchips button,.rchip span{min-height:44px}
  .arrow{width:44px;height:44px}
  .step button,.foot-links a,.foot-links .linkish,.legal-list a{min-height:44px}
  .uploader input[type=file]::file-selector-button{min-height:44px}
  .sel,.mot{height:44px}
  .icon-btn{width:44px;height:44px}
  .ms .ttl label{min-height:44px}
  input[type=range],.fld input[type=range]{height:44px}
}
@media (max-width:400px){
  .who{gap:6px}
  .sel{max-width:118px;padding-left:10px;padding-right:30px;background-position:right 10px center}
  #motBtn{display:none}
  .brand{gap:8px}
  .brand svg{width:22px;height:22px}
  .word{font-size:21px}
  .live{gap:0;font-size:0}
}
@media (max-width:760px){
  .ai-notice{font-size:13px;padding-left:12px}
}
@media (forced-colors:active){
  .habit input,.ms .ttl input{-webkit-appearance:auto;appearance:auto}
  .tab[aria-current="page"]::after{background:Highlight}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* Printing (mostly the legal pages): the light palette on white. */
@media print{
  :root,:root[data-theme]{
    color-scheme:light;
    --bg:#ffffff; --surface:#ffffff; --surface-2:#f1f4f6; --sunken:#ffffff; --dialog:#ffffff; --aside:#ffffff;
    --ink:#000000; --ink-2:#26323b; --muted:#44545f; --dim:#44545f;
    --line:#c9d5dd; --line-2:#dde5ea; --line-3:#c3d2db; --line-strong:#748896; --rule:#9db4c1;
    --accent:#0a6a73; --accent-soft:rgba(10,106,115,.09); --accent-ink:#ffffff;
    --violet:#a4461a; --violet-soft:rgba(164,70,26,.09); --violet-ink:#ffffff;
    --good:#1b7348; --good-soft:rgba(27,115,72,.1); --warn:#855700; --warn-soft:rgba(176,122,0,.12);
    --bad:#b3261e; --bad-soft:rgba(179,38,30,.09); --bad-ink:#ffffff;
    --grad-card:#ffffff; --grad-route:#ffffff; --grad-bar:#ffffff; --warm-bg:#ffffff; --warm-line:#e5cbbd; --warm-ink:#26323b;
    --note-bg:#ffffff; --upload-bg:#ffffff; --glow:transparent; --bar:#ffffff;
  }
  body{background:#fff}
  .tabs,.skip,.toast{display:none!important}
}

/* ---- home ---- */
/* The Orb home: plan age (N8), "Next up" and "The long view" (N10), and the "How Path works" sheet (N4). Colours are
   the tokens above, so both themes keep AA contrast. */
.plan-age{display:grid;gap:4px;margin-top:4px}
.plan-stale{padding:8px 10px;border-left:2px solid var(--warn);background:var(--warn-soft);border-radius:2px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.under .nextup{grid-column:span 1}
.under .longview{grid-column:span 2;min-width:0}
@media (max-width:1100px){
  .under .nextup,.under .longview{grid-column:1/-1}
}
/* Next up: the next three things on today's plan */
.nextlist{list-style:none;margin:0;padding:0;display:grid}
.nx{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line-3)}
.nx:first-child{border-top:0;padding-top:2px}
.nx-t{font-family:var(--display);font-size:16px;color:var(--accent);font-variant-numeric:tabular-nums}
.nx.hab .nx-t{font-family:var(--sans);font-size:11px;font-weight:550;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.nx.nowb .nx-t{color:var(--violet)}
.nx-b{display:grid;gap:2px;font-size:14.5px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.nx-b small{font-size:12px;letter-spacing:.04em;color:var(--dim)}
/* The long view: milestones as one sideways strip */
.lv-scroll{position:relative;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;margin:0 -4px;padding:4px 4px 8px;border-radius:3px}
.lv-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.lv-strip{list-style:none;margin:0;padding:0;display:flex}
.lv-ms{flex:0 0 172px;display:flex;flex-direction:column;gap:4px;padding-right:18px;scroll-snap-align:start}
.lv-age{font-family:var(--display);font-size:28px;font-weight:400;line-height:1.05;letter-spacing:-.02em;color:var(--accent)}
.lv-dot{position:relative;display:block;height:14px;margin:4px -18px 6px 0}
.lv-dot::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rail)}
.lv-ms:last-child .lv-dot::before{display:none}
.lv-dot i{position:relative;z-index:1;display:block;width:12px;height:12px;margin-top:1px;border-radius:50%;border:1px solid var(--dot-ring);background:var(--bg)}
.lv-ms.done .lv-dot i{background:var(--accent);border-color:var(--accent)}
.lv-ms.next .lv-dot i{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.lv-ms.goalm .lv-dot i{width:14px;height:14px;margin-top:0;background:var(--violet);border-color:var(--violet);box-shadow:0 0 12px var(--violet)}
.lv-when{font-size:12px;letter-spacing:.04em;color:var(--dim)}
.lv-ttl{font-size:14px;line-height:1.4;color:var(--ink);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.lv-ms.done .lv-ttl{color:var(--ink-2)}
.lv-flag{margin-top:auto;padding-top:4px;font-size:11px;font-weight:550;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lv-ms.done .lv-flag{color:var(--good)}
.lv-ms.next .lv-flag{color:var(--accent)}
.lv-flag.goal{color:var(--violet)}
@media (max-width:760px){
  .lv-ms{flex-basis:148px}
}
/* How Path works */
#hsheet .sheet-card{width:min(640px,100%)}
.how-body{display:grid;gap:22px}
.how-lede{font-size:15px;line-height:1.6;color:var(--ink-2)}
.how-sec p,.how-sec ul,.how-sec ol{margin:0}
.hw{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line-2)}
.hw-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.hw-h b{font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.hw-bar{display:flex;gap:2px;height:6px;border-radius:2px;overflow:hidden}
.hw-bar i{display:block;flex-basis:0;min-width:2px}
.hw .c0{background:var(--accent)}
.hw .c1{background:var(--violet)}
.hw .c2{background:var(--good)}
.hw .c3{background:var(--peri)}
.hw .c4{background:var(--warn)}
.hw .c5{background:var(--bad)}
.hw-parts{list-style:none;padding:0;display:grid;gap:6px}
.hw-parts li{display:grid;grid-template-columns:10px 42px minmax(0,1fr);gap:10px;align-items:baseline;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.hw-parts .sw{display:block;width:10px;height:10px;border-radius:2px;align-self:center}
.hw-parts b{font-family:var(--display);font-weight:400;font-size:16px;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.how-steps,.how-list{padding-left:20px;display:grid;gap:8px}
.how-labels{list-style:none;padding:0;display:grid;gap:14px}
.how-labels li{display:grid;gap:6px;justify-items:start}
.how-tag span.src{display:inline-block;padding:1px 7px;font-size:11.5px;font-weight:500;letter-spacing:.03em;line-height:1.6;color:var(--good);border:1px solid var(--good);border-radius:2px}
.how-fields{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.how-fields li{padding:2px 8px;border:1px solid var(--line-3);border-radius:2px;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.how-links{display:flex;flex-wrap:wrap;gap:0 22px;padding-top:12px;border-top:1px solid var(--line-3);font-size:14px}
.how-links a{display:inline-flex;align-items:center;min-height:44px}

/* ---- today ---- (the Today view's week strip, the gentler-day check-in and "Not today"; also the caveat lines that
   say what the numbers are not: Edge moves, milestones, school cards and the requirements table) */
.today-stats{display:grid;gap:10px;max-width:560px}
.today-week{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(58px,1fr);gap:6px;padding:2px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.today-week::-webkit-scrollbar{display:none}
.today-wk{scroll-snap-align:start;-webkit-user-select:none;user-select:none;display:grid;justify-items:center;align-content:center;gap:2px;min-width:58px;min-height:44px;padding:10px 4px;background:var(--surface);border:1px solid var(--line-3);border-radius:4px;color:var(--ink-2);line-height:1.2;transition:border-color .2s,background-color .2s}
.today-wk:hover{border-color:var(--hover-line)}
.today-wk:focus-visible{outline-offset:-3px}
.today-wk .wd{font-size:11px;font-weight:550;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.today-wk .dn{font-family:var(--display);font-size:22px;font-weight:400;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.today-wk .wm{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.today-wk[aria-current="date"] .wd{color:var(--accent)}
.today-wk[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.today-wk[aria-pressed="true"] .dn{color:var(--accent)}
.today-gap{margin-top:10px}
.today-pace{display:grid;gap:10px;margin-top:20px;padding:16px;border:1px solid var(--line-3);border-radius:5px;background:var(--surface)}
.today-pace .daytoggle{display:flex;flex-wrap:wrap;margin:0}
.today-pace .daytoggle button{flex:1 1 150px;min-width:0}
.today-sec{margin:22px 0 10px}
.today-lock{margin:0 0 10px}
.today-empty{padding:18px 12px;border-block:1px solid var(--line-2);font-size:15px;color:var(--ink-2)}
.today-later{margin-top:14px;border:1px solid var(--line-2);border-radius:5px}
.today-later > summary{-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;cursor:pointer;list-style:none;font-size:14px;color:var(--ink-2)}
.today-later > summary::-webkit-details-marker{display:none}
.today-later > summary::before{content:"";flex:none;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.today-later[open] > summary::before{transform:rotate(45deg)}
.today-later > summary:hover{color:var(--ink)}
.today-later > .sched,.today-later > .habits{padding:0 10px 10px}
.habit.off{cursor:default;border-style:dashed;background:transparent;color:var(--ink-2)}
.habit.off:hover{border-color:var(--line-3)}
.habit.off input,.habit.off input:hover{cursor:default;opacity:.55;border-color:var(--check-line);background-color:transparent}
.strip .gentle{box-shadow:inset 0 0 0 2px var(--violet)}
.caveat{margin:-8px 0 14px;max-width:70ch}
.req-caveat{margin-top:10px;max-width:70ch}
.school .school-caveat{font-size:12.5px;color:var(--muted)}
@media (forced-colors:active){
  .today-wk[aria-pressed="true"],.today-pace .daytoggle button[aria-pressed="true"]{outline:2px solid Highlight;outline-offset:1px}
}

/* ---- consistency ---- */
/* App-computed notes next to AI text (app.js driftNote, renderTrajectory): the live simulation has moved since a verdict
   was written, or the milestones and the simulated median age at the goal are a year or more apart. Muted text with a
   warn rule; computed by the app, so no AI label. --muted passes AA on every surface they sit on (card, warm verdict
   block, page), in dark and light. */
.drift-note,.verdict p.drift-note,.traj-note{margin:8px 0 0;padding-left:10px;border-left:2px solid var(--warn);font-size:13px;line-height:1.5;color:var(--muted);max-width:66ch}
.vh .traj-note{margin:0}

/* ---- share ---- */
/* Sharing, export and shell: 16px form text, the tuner's what-if with undo, the footer's share and print buttons, the
   runtime error panel (js/guard.js) and the print stylesheet with the printable plan summary (app.js printPlan).
   Kept together at the end of the file. */

/* Form text is at least 16px, so iPhones don't zoom in when a field gets focus. Rules above that set a size of their
   own stay in charge (all 16px or more); this covers the path picker, the file picker and fields that inherit the
   15px body text. */
input,select,textarea{font-size:16px}
.sel,.uploader input[type=file]{font-size:16px}

/* tuner: "Was 12% → now 15%", Keep changes / Undo */
.tuner-odds b.was{color:var(--ink-2)}
.tuner-keep{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.tuner-keep-b{display:flex;gap:8px;flex-wrap:wrap}

/* footer: Share my plan, Print or save as PDF */
.foot-share{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.foot-share .fh{flex-basis:100%;margin:0}

/* runtime error panel: outside #app, above the full-screen steps and the phone tab bar */
.rt-err{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:95;width:min(560px,calc(100% - 32px));transform:translateX(-50%)}
.rt-err:empty{display:none}
.rt-err-in{display:grid;gap:12px;padding:16px 18px;border:1px solid var(--bad);border-left-width:3px;border-radius:0 5px 5px 0;background:var(--dialog);box-shadow:var(--shadow);color:var(--ink-2);font-size:14.5px;line-height:1.55;animation:noticeIn .3s ease-out}
.rt-err-in b{color:var(--ink);font-weight:600}
.rt-err-b{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:760px){
  .rt-err{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}

/* the printable plan summary exists only on paper */
.print-plan{display:none}

@media print{
  /* Any view: no header or nav, no orb, no controls that do nothing on paper. AI labels, Report flags and the footer
     note stay. (The light palette for paper is set in the print block above.) */
  .top,.foot-mark,.foot > .sync,.foot-share,.foot-links,.stage,.swipe-hint,.tuner,.subj-act,.actions,.chatf,.sugg,.remind,.daytoggle,.examples,.ichips,.presets,.uploader,.skel,.sheet,.gate,.rt-err,[data-go],[data-noai]{display:none!important}
  .app{max-width:none;padding:0}
  main{margin-top:0}
  .view{padding-top:0}
  a{color:inherit}
  h2,h3,h4,h3.sec,legend{break-after:avoid}
  .card,.panel,.route,.school,.win,.door,.verdict,.onething,.ms,.blk,.habit,.bm,.skill,.fst,.mv,.tablewrap,.chartbox,.matrix,.excluded .x{break-inside:avoid}
  .chartbox,.tablewrap{overflow:visible}
  .chartbox svg{min-width:0}
  table.tbl{min-width:0}
  /* the sideways strips (home's long view, Today's week) wrap on paper instead of clipping */
  .lv-scroll,.today-week{overflow:visible}
  .lv-strip{flex-wrap:wrap;row-gap:12px}
  /* "Print or save as PDF": the plan summary alone */
  body.printing-plan > :not(.print-plan){display:none!important}
  body.printing-plan .print-plan{display:block}
  .print-plan{color:var(--ink);font-size:12pt;line-height:1.5}
  .pp-h{display:grid;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--line-strong)}
  .pp-h h1{font-family:var(--display);font-weight:400;font-size:24pt;line-height:1.15;letter-spacing:-.02em}
  .pp-ai{padding:8px 12px;border:1px solid var(--line-strong);border-left:3px solid var(--violet);font-weight:600}
  .pp-sec{display:grid;gap:6px;padding-block:14px;border-bottom:1px solid var(--line);break-inside:avoid}
  .pp-sec h2{font-family:var(--sans);font-size:10pt;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .pp-sec h3{font-family:var(--sans);font-size:11pt;font-weight:600;margin-top:6px}
  .pp-sec ul{margin:0;padding-left:18px;display:grid;gap:3px}
  .pp-f{display:grid;gap:6px;padding-top:14px;font-size:10pt;color:var(--muted)}
  .print-plan .rep{min-height:0;padding:0;margin:0}
}