/* styles.css — Take-Home Pay (Aurora Glass, consistent with the suite) */
:root {
  --bg-0:#0a0a1a; --bg-1:#0e0c24;
  --ink-0:#f5f3ff;
  --ink-1:rgba(245,243,255,.78);
  --ink-2:rgba(245,243,255,.55);
  --ink-3:rgba(245,243,255,.32);
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.04);
  --glass-2:rgba(255,255,255,.06);
  --glass-hi:rgba(255,255,255,.10);

  --c-take:oklch(.80 .18 145);   /* take-home — green */
  --c-tax:oklch(.74 .17 295);    /* income tax — violet */
  --c-ni:oklch(.74 .15 230);     /* NI — blue */
  --c-sl:oklch(.78 .16 60);      /* student loan — amber */
  --c-pension:oklch(.78 .12 200);/* pension — teal */
  --c-accent:oklch(.78 .18 175);
  --c-warn:oklch(.78 .18 30);

  --radius-sm:8px; --radius:14px; --radius-lg:22px; --radius-xl:28px;
  --global-nav-h:54px;
  --shadow-card:0 12px 40px -16px rgba(0,0,0,.55);
  --font-display:'Geist','Inter Tight',system-ui,sans-serif;
  --font-body:'Geist',system-ui,sans-serif;
  --font-mono:'Geist Mono','JetBrains Mono',ui-monospace,monospace;
}
[data-theme="light"] {
  --bg-0:#f4f2ee; --bg-1:#ebe7df;
  --ink-0:#131124; --ink-1:rgba(19,17,36,.78); --ink-2:rgba(19,17,36,.55); --ink-3:rgba(19,17,36,.32);
  --line:rgba(19,17,36,.10); --line-2:rgba(19,17,36,.18);
  --glass:rgba(255,255,255,.5); --glass-2:rgba(255,255,255,.65); --glass-hi:rgba(255,255,255,.9);
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--font-body); background:var(--bg-0); color:var(--ink-0);
  font-feature-settings:'ss01','cv11','tnum'; -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh;
}
.num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.label { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-2); }
.muted { color:var(--ink-2); }

/* aurora */
.aurora { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.aurora span { position:absolute; border-radius:50%; filter:blur(120px); opacity:.5; mix-blend-mode:screen; }
.aurora .a { width:60vw;height:60vw;left:-12vw;top:-22vw; background:radial-gradient(circle,oklch(.55 .26 175) 0%,transparent 65%); animation:d1 26s ease-in-out infinite alternate; }
.aurora .b { width:56vw;height:56vw;right:-16vw;top:4vh; background:radial-gradient(circle,oklch(.55 .24 295) 0%,transparent 65%); animation:d2 32s ease-in-out infinite alternate; }
.aurora .c { width:48vw;height:48vw;left:28vw;bottom:-24vw; background:radial-gradient(circle,oklch(.55 .2 60) 0%,transparent 65%); animation:d3 38s ease-in-out infinite alternate; }
[data-theme="light"] .aurora span { opacity:.28; mix-blend-mode:multiply; filter:blur(140px); }
@keyframes d1 { to { transform:translate(8vw,6vh); } }
@keyframes d2 { to { transform:translate(-6vw,8vh); } }
@keyframes d3 { to { transform:translate(4vw,-6vh); } }
@media (prefers-reduced-motion:reduce){ .aurora span{ animation:none; } }

/* app shell */
svg { max-width: 100%; }
.app { display:grid; grid-template-columns:240px minmax(0, 1fr); min-height:100vh; max-width:1500px; margin:0 auto; padding:24px; gap:24px; }

.sidebar {
  position:sticky; top:calc(var(--global-nav-h) + 14px); align-self:start;
  background:var(--glass); backdrop-filter:blur(28px) saturate(140%); -webkit-backdrop-filter:blur(28px) saturate(140%);
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px 14px;
  height:calc(100vh - var(--global-nav-h) - 52px); display:flex; flex-direction:column; box-shadow:var(--shadow-card);
}
.rail-nav { display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-height:0; overflow-y:auto; margin:0 -4px; padding:0 4px; }
.nav-group { display:flex; flex-direction:column; gap:1px; }
.nav-group-label { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:600; padding:14px 10px 6px; }
.nav-item { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--radius-sm); cursor:pointer;
  color:var(--ink-2); font-size:13.5px; font-weight:500; border:1px solid transparent; background:none; width:100%; text-align:left;
  font-family:inherit; text-decoration:none; transition:background .14s,color .14s,box-shadow .14s; }
.nav-item .ni-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--ink-3); transition:.15s; }
.nav-item .ni-label { flex:1; min-width:0; }
.nav-item:hover { background:var(--glass-2); color:var(--ink-0); }
.nav-item:hover .ni-dot { background:var(--ink-2); }
.nav-item.active { background:var(--glass-hi); color:var(--ink-0); font-weight:600; box-shadow:inset 0 0 0 1px var(--c-tax); }
.nav-item.active .ni-dot { background:var(--c-take); box-shadow:0 0 9px var(--c-take); transform:scale(1.1); }
.nav-item .ni-tag { margin-left:auto; font-size:9.5px; font-weight:600; letter-spacing:.04em; padding:2px 6px; border-radius:999px; background:var(--glass-hi); color:var(--ink-2); text-transform:uppercase; }

.rail-foot { margin-top:auto; padding:13px 14px; border-radius:var(--radius); background:var(--glass-2); border:1px solid var(--line); }
.rail-foot-label { font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); font-weight:600; margin-bottom:9px; }
.rail-foot-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:3px 0; font-size:12px; }
.rail-foot-row span { color:var(--ink-2); }
.rail-foot-row b { font-weight:600; color:var(--ink-0); font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.rail-foot-row.hero { margin-top:5px; padding-top:8px; border-top:1px solid var(--line); }
.rail-foot-row.hero b { font-size:16px; color:var(--c-take); }
.rail-foot-note { font-size:9.5px; color:var(--ink-3); margin-top:9px; }

/* main */
.main { min-width:0; }
.topbar { display:flex; align-items:baseline; justify-content:space-between; padding:6px 8px 22px; gap:16px; }
.topbar h1 { font-family:var(--font-display); font-weight:600; font-size:32px; letter-spacing:-0.025em; margin:0; }
.topbar h1 .accent { background:linear-gradient(120deg,oklch(.85 .18 145),oklch(.85 .18 175)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.topbar .sub { color:var(--ink-2); font-size:14px; }
.seg { display:inline-flex; padding:3px; background:var(--glass-2); border:1px solid var(--line); border-radius:12px; gap:2px; }
.seg button { background:none; border:none; color:var(--ink-2); font-family:inherit; font-size:12px; padding:7px 13px; border-radius:9px; cursor:pointer; transition:all .15s; white-space:nowrap; }
.seg button:hover { color:var(--ink-0); }
.seg button.active { background:var(--glass-hi); color:var(--ink-0); box-shadow:inset 0 0 0 1px var(--line-2); }

/* cards */
.card { background:var(--glass); backdrop-filter:blur(28px) saturate(140%); -webkit-backdrop-filter:blur(28px) saturate(140%);
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-card); }
.card-title { font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:-0.01em; margin:0 0 4px; }
.card-sub { font-size:13px; color:var(--ink-2); margin:0 0 18px; }
.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.grid-main { grid-template-columns:360px minmax(0,1fr); gap:16px; }
.stack { display:flex; flex-direction:column; gap:16px; }

/* inputs */
.input-row { display:flex; flex-direction:column; gap:6px; }
.input-row > label { font-size:12px; color:var(--ink-2); }
.input { background:var(--glass-2); border:1px solid var(--line); color:var(--ink-0); padding:11px 12px; border-radius:10px;
  font-family:var(--font-mono); font-size:15px; width:100%; transition:border-color .15s, background .15s; }
.input:focus { outline:none; border-color:var(--c-tax); background:var(--glass-hi); }
.slider-row { display:flex; flex-direction:column; gap:8px; }
.slider-row .head { display:flex; justify-content:space-between; align-items:baseline; }
.slider-row .head label { font-size:12px; color:var(--ink-2); }
.slider-row .head .val { font-family:var(--font-mono); font-size:14px; color:var(--ink-0); }
input[type="range"] { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:2px; background:var(--line-2); outline:none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg,oklch(.85 .18 145),oklch(.85 .18 175)); cursor:pointer;
  box-shadow:0 0 0 4px rgba(255,255,255,.05), 0 4px 12px -2px oklch(.55 .2 160); border:none; }
input[type="range"]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:oklch(.85 .18 160); cursor:pointer; border:none; }

/* big result */
.result-hero { display:flex; flex-direction:column; gap:4px; }
.result-hero .num-xl { font-size:54px; font-weight:500; line-height:1; }
.result-hero .grad { background:linear-gradient(120deg,oklch(.85 .18 145),oklch(.85 .18 175)); -webkit-background-clip:text; background-clip:text; color:transparent; }
[data-theme="light"] .result-hero .grad { background:linear-gradient(120deg,oklch(.5 .18 145),oklch(.5 .18 175)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.period-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.period { padding:14px 12px; background:var(--glass-2); border:1px solid var(--line); border-radius:12px; }
.period .label { margin-bottom:4px; }
.period .num { font-size:18px; }

/* deduction stacked bar */
.stackbar { display:flex; height:18px; border-radius:999px; overflow:hidden; margin:4px 0 14px; }
.stackbar i { display:block; transition:flex-grow .4s cubic-bezier(.2,.8,.2,1); }
.legend { display:flex; flex-wrap:wrap; gap:14px; font-size:12px; }
.legend span { display:inline-flex; align-items:center; gap:7px; color:var(--ink-1); }
.legend i { width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.legend b { font-family:var(--font-mono); color:var(--ink-0); font-weight:500; }

/* breakdown rows */
.bd-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.bd-row:first-child { border-top:none; }
.bd-dot { width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.bd-name { flex:1; font-size:14px; }
.bd-sub { font-size:11px; color:var(--ink-3); }
.bd-amt { font-family:var(--font-mono); font-size:15px; font-variant-numeric:tabular-nums; }
.bd-pct { font-family:var(--font-mono); font-size:12px; color:var(--ink-2); width:52px; text-align:right; }

.pill-stat { display:flex; flex-direction:column; gap:4px; padding:14px 16px; background:var(--glass-2); border-radius:12px; border:1px solid var(--line); }
.pill-stat .num { font-size:24px; }
.pill-stat .delta { font-size:12px; color:var(--ink-2); font-family:var(--font-mono); }

.plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.chipbtn { padding:10px 8px; border-radius:10px; cursor:pointer; border:1px solid var(--line); background:var(--glass-2);
  color:var(--ink-1); font-family:inherit; font-size:12.5px; text-align:center; transition:all .15s; }
.chipbtn:hover { background:var(--glass-hi); color:var(--ink-0); }
.chipbtn.active { background:var(--glass-hi); color:var(--ink-0); border-color:var(--c-tax); box-shadow:0 0 0 1px var(--c-tax); }

.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; }
.toggle-row .t-label { font-size:13.5px; color:var(--ink-1); }
.tgl { width:42px; height:24px; border-radius:999px; background:var(--glass-hi); border:1px solid var(--line-2); position:relative; cursor:pointer; transition:background .15s; flex-shrink:0; }
.tgl::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--ink-2); transition:transform .18s, background .18s; }
.tgl.on { background:linear-gradient(135deg,oklch(.6 .2 145),oklch(.6 .18 175)); border-color:transparent; }
.tgl.on::after { transform:translateX(18px); background:#fff; }

.div-h { height:1px; background:var(--line); margin:14px 0; }

@media (max-width:980px) {
  .app { grid-template-columns:minmax(0,1fr); padding:12px; gap:14px; }
  .sidebar { position:sticky; top:calc(var(--global-nav-h) + 6px); z-index:60; height:auto; flex-direction:column; gap:10px; padding:10px 12px; border-radius:var(--radius); }
  .rail-nav { flex-direction:row; align-items:center; gap:4px; overflow-x:auto; scrollbar-width:none; margin:0; padding:0; }
  .rail-nav::-webkit-scrollbar { display:none; }
  .nav-group { flex-direction:row; align-items:center; gap:4px; }
  .nav-group-label, .rail-foot { display:none; }
  .nav-item { width:auto; white-space:nowrap; flex:0 0 auto; }
  .grid-main, .grid-2 { grid-template-columns:minmax(0,1fr); }
  .topbar { flex-direction:column; align-items:flex-start; gap:10px; }
}
@media (max-width:560px) {
  .period-grid { grid-template-columns:repeat(2,1fr); }
  .result-hero .num-xl { font-size:42px; }
}