@font-face{font-family:"Space Grotesk";src:url(fonts/space-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");font-weight:100 800;font-display:swap}
/* Chit for adults has its own stylesheet and tokens. It speaks the web app's language (dark glass, mono micro-labels, HUD corners, floating bar,
   Classic or Spectrum) but imports nothing from it, like the child's app. */
:root{
  --bg-void:#05070d; --bg-deep:#090d18; --glass:rgb(16 22 40/.62); --glass-strong:rgb(20 28 52/.82);
  --line:rgb(120 150 255/.16); --line-strong:rgb(120 190 255/.38);
  --text:#e8eeff; --text-dim:#8d9bc2; --text-faint:#5b6890;
  --cyan:#4df0ff; --violet:#8b7bff; --magenta:#ff5fd2; --lime:#8dffb0; --amber:#ffc857; --red:#ff6b7d;
  --accent:var(--cyan); --on-accent:#04101a; --glow:0 0 24px rgb(77 240 255/.22);
  --accent-soft:color-mix(in srgb,var(--accent) 11%,transparent); --accent-ring:color-mix(in srgb,var(--accent) 20%,transparent);
  --grad:linear-gradient(135deg,var(--cyan),var(--violet)); --grad-btn:var(--grad);
  --bar-bg:rgb(14 20 38/.94); --inset:rgb(5 7 13/.5); --shadow:0 10px 40px rgb(0 0 0/.35);
  --pool-a:rgb(139 123 255/.18); --pool-b:rgb(77 240 255/.12);
  --surface2:color-mix(in srgb,var(--text) 9%,transparent);
  --r:18px; --nav-h:84px;
  --font:"Space Grotesk",ui-rounded,"SF Pro Rounded",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg-void:#eef2fb; --bg-deep:#e4eaf8; --glass:rgb(255 255 255/.7); --glass-strong:rgb(255 255 255/.9);
  --line:rgb(40 70 160/.14); --line-strong:rgb(30 90 200/.4);
  --text:#0b1430; --text-dim:#4a5a86; --text-faint:#7b88ad;
  --cyan:#0a8fb0; --violet:#5b4bd6; --magenta:#c0268f; --lime:#12915a; --amber:#a86d00; --red:#c4233d;
  --on-accent:#fff; --glow:0 0 24px rgb(10 143 176/.12); --bar-bg:rgb(255 255 255/.95); --inset:rgb(255 255 255/.65);
  --shadow:0 10px 30px rgb(30 50 110/.12); --pool-a:rgb(91 75 214/.14); --pool-b:rgb(10 143 176/.12);
  color-scheme:light;
}
:root[data-palette=spectrum]{
  --grad:linear-gradient(120deg,var(--cyan),var(--violet) 35%,var(--magenta) 68%,var(--amber));
  --grad-btn:linear-gradient(120deg,var(--cyan),var(--violet) 55%,var(--magenta));
  --pool-a:color-mix(in srgb,var(--magenta) 20%,transparent); --pool-b:color-mix(in srgb,var(--amber) 14%,transparent);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg-void);color:var(--text);font-family:var(--font);-webkit-text-size-adjust:100%;overscroll-behavior:none}
body{display:flex;justify-content:center}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60vmax 40vmax at 85% -10%,var(--pool-a),transparent 60%),radial-gradient(50vmax 40vmax at -10% 110%,var(--pool-b),transparent 60%),
    linear-gradient(var(--line) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/56px 56px,var(--bg-void);
  mask-image:radial-gradient(120% 100% at 50% 0%,#000 55%,rgb(0 0 0/.55))}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
#app{position:relative;width:100%;max-width:560px;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
#view{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 28px)}
.screen{animation:in .28s ease both}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:12px}
.mono{font-family:var(--mono);letter-spacing:.06em}

/* header */
.top{padding:calc(env(safe-area-inset-top) + 16px) 18px 8px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.top small{display:block;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.top h1{margin:2px 0 0;font-size:26px;letter-spacing:-.02em;font-weight:700}
.top h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.avatar{width:44px;height:44px;border-radius:50%;border:2.5px solid var(--ac,var(--accent));background:var(--glass-strong);display:grid;place-items:center;font-weight:700;font-size:18px;flex:none;box-shadow:var(--glow)}

/* sections and cards */
.sec{padding:0 16px;margin-top:20px}
.sec>h2{margin:0 4px 10px;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);display:flex;justify-content:space-between;align-items:baseline}
.card{position:relative;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.card::before{content:"";position:absolute;top:7px;left:7px;width:11px;height:11px;border-top:1.5px solid var(--accent);border-left:1.5px solid var(--accent);border-top-left-radius:5px;opacity:.5;pointer-events:none}
.stack{display:flex;flex-direction:column;gap:10px}
.list{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow)}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:52px;width:100%;text-align:left}
.list .row+.row{border-top:1px solid var(--line)}
.row .g{flex:1;min-width:0}
.row .t{font-weight:600;font-size:16px;overflow-wrap:anywhere}
.row .s{color:var(--text-dim);font-size:13px;margin-top:2px}
.row .time{width:48px;font:600 13px var(--mono);color:var(--accent);flex:none;font-variant-numeric:tabular-nums}
.row.nextrow{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.row.done .t{text-decoration:line-through;color:var(--text-dim)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--ac,var(--accent));flex:none}
.grp{margin:14px 6px 6px;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:99px;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-strong);color:var(--accent);background:var(--accent-soft)}
.pill.manual{color:var(--violet);border-color:color-mix(in srgb,var(--violet) 45%,transparent);background:color-mix(in srgb,var(--violet) 12%,transparent)}
.pill.ok{color:var(--lime);border-color:color-mix(in srgb,var(--lime) 45%,transparent);background:color-mix(in srgb,var(--lime) 10%,transparent)}
.pill.warn{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent);background:color-mix(in srgb,var(--amber) 10%,transparent)}
.pill.bad{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,transparent);background:color-mix(in srgb,var(--red) 8%,transparent)}
.chk{width:28px;height:28px;border-radius:50%;border:2px solid var(--accent);display:grid;place-items:center;flex:none;color:var(--on-accent)}
.chk svg{width:16px;height:16px;stroke-width:3;opacity:0}
.chk.done{background:var(--accent)}.chk.done svg{opacity:1}
.empty{padding:22px 16px;text-align:center;color:var(--text-dim);font-weight:500}
.empty b{display:block;color:var(--text);margin-bottom:4px}

/* attention (the web app's Now panel, on a phone) */
.attn{display:flex;flex-direction:column;gap:6px;border-color:color-mix(in srgb,var(--amber) 50%,transparent)}
.attn .k{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.attn h3{margin:0;font-size:17px;line-height:1.25}
.attn p{margin:0;color:var(--text-dim);font-size:14px;line-height:1.4}
.attn .acts{display:flex;gap:8px;margin-top:4px}

/* next up */
.next{border-color:var(--line-strong);background:var(--glass-strong);box-shadow:var(--glow)}
.next .lab{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.next h3{margin:6px 0 2px;font-size:21px;line-height:1.2}
.next p{margin:0;color:var(--text-dim);font-size:14px}

/* buttons, forms, sheet */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:12px;border-radius:99px;background:var(--grad-btn);color:var(--on-accent);font-weight:700;font-size:16px;margin-top:12px;box-shadow:var(--glow)}
.btn.t{background:var(--surface2);color:var(--text);box-shadow:none;border:1px solid var(--line)}
.btn.sm{width:auto;min-height:44px;margin:0;padding:8px 16px;font-size:14px}
.btn.danger{background:transparent;color:var(--red);border:1px solid color-mix(in srgb,var(--red) 45%,transparent);box-shadow:none}
.btn:disabled{opacity:.55}
.chipset{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.chipset button{min-height:44px;padding:8px 14px;border-radius:99px;background:var(--glass);font-weight:600;font-size:14.5px;border:1px solid var(--line)}
.chipset button.on{border-color:var(--accent);background:var(--accent-soft)}
.flabel{display:block;margin:14px 2px 4px;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.finput{width:100%;min-height:48px;font:600 17px var(--font);padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--inset);color:var(--text);outline:none}
.finput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.sw{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 0}
.sw .g{flex:1}.sw small{display:block;color:var(--text-dim);font-size:12.5px;font-weight:500}
.tog{width:50px;height:30px;border-radius:99px;background:var(--surface2);border:1px solid var(--line);position:relative;flex:none}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--text-dim);transition:.2s}
.tog[aria-checked=true]{background:var(--accent)}.tog[aria-checked=true]::after{left:23px;background:var(--on-accent)}
#back{position:absolute;inset:0;background:rgb(2 4 10/.6);opacity:0;pointer-events:none;transition:.25s;z-index:20}
#back.on{opacity:1;pointer-events:auto}
#sheet{position:absolute;left:0;right:0;bottom:0;max-height:88%;overflow:auto;background:var(--bg-deep);border:1px solid var(--line-strong);border-bottom:0;border-radius:28px 28px 0 0;padding:10px 20px calc(env(safe-area-inset-bottom) + 24px);
  transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.8,.2,1);z-index:21;box-shadow:0 -10px 40px rgba(0,0,0,.35)}
#sheet.on{transform:none}
#sheet .grab{width:42px;height:5px;border-radius:9px;background:var(--line-strong);margin:0 auto 14px}
#sheet h2{margin:0 0 4px;font-size:23px;letter-spacing:-.01em}
.sub2{color:var(--text-dim);margin:0 0 14px;font-size:14.5px;line-height:1.45}
.steps{counter-reset:s;padding:0;list-style:none;margin:0}
.steps li{counter-increment:s;display:flex;gap:12px;align-items:center;padding:9px 0;font-size:15px}
.steps li::before{content:counter(s);width:28px;height:28px;border-radius:50%;background:var(--accent-soft);border:1px solid var(--line-strong);color:var(--accent);display:grid;place-items:center;font:600 13px var(--mono);flex:none}
.perm{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--glass);border:1px solid var(--line);border-radius:16px;margin-bottom:8px}
.perm .g{flex:1;font-weight:600}.perm small{display:block;color:var(--text-dim);font-weight:500;font-size:12.5px}
.ribbon{margin:calc(env(safe-area-inset-top) + 8px) 16px 0;padding:8px 12px;border-radius:14px;background:color-mix(in srgb,var(--amber) 14%,var(--glass));border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);color:var(--amber);font-size:13px;font-weight:600;display:flex;gap:8px;align-items:center}
.ribbon+.top{padding-top:8px}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 100px);transform:translateX(-50%);background:var(--text);color:var(--bg-void);padding:10px 16px;border-radius:99px;font-weight:600;font-size:14px;z-index:60;max-width:90%}

/* pairing and welcome */
.screen.center{min-height:100%;padding:calc(env(safe-area-inset-top) + 56px) 24px 24px;text-align:center;display:flex;flex-direction:column;align-items:stretch}
.screen.center h1{margin:14px 0 6px;font-size:30px;letter-spacing:-.02em;font-weight:700}
.logo{width:72px;height:72px;border-radius:22px;margin:0 auto;display:grid;place-items:center;background:var(--grad);color:var(--on-accent);box-shadow:var(--glow)}
.logo svg{width:44px;height:44px}
.beta{display:inline-block;vertical-align:middle;margin-left:8px;padding:2px 9px;border-radius:99px;font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 55%,transparent);background:color-mix(in srgb,var(--amber) 12%,transparent)}
.lead{color:var(--text-dim);font-size:16px;line-height:1.45;margin:0}
#code,#link{width:100%;margin-top:20px;text-align:center;font:700 36px/1.2 var(--mono);letter-spacing:.16em;padding:14px 8px;border-radius:20px;border:1px solid var(--line);background:var(--inset);color:var(--text);outline:none}
#link{font-size:26px;text-transform:uppercase}#link+#code{margin-top:10px}
#code:focus,#link:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.err{min-height:22px;margin-top:10px;color:var(--red);font-weight:600;font-size:14.5px}

/* calendar */
.cal-bar{display:flex;align-items:center;gap:8px;padding:6px 16px 0;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--inset);border:1px solid var(--line);border-radius:99px;padding:3px;flex:1;min-width:0}
.seg button{flex:1;min-height:40px;padding:0 10px;border-radius:99px;font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}
.seg button.on{background:var(--accent);color:var(--on-accent);box-shadow:var(--glow)}
.cal-nav{display:flex;align-items:center;gap:6px;padding:10px 16px 0}
.cal-nav .title{flex:1;min-width:0;text-align:center;font-weight:600;font-size:16px}
.cal-nav .title small{display:block;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-top:2px}
.ib{width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:var(--glass);display:grid;place-items:center;flex:none}
.ib:active{background:var(--accent-soft)}
.ib.txt{width:auto;padding:0 14px;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.cols{display:grid;gap:6px;padding:12px 10px 0}
.cols.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.dcol{min-width:0;display:flex;flex-direction:column;gap:5px}
.dh{text-align:center;padding:7px 2px;border-radius:12px;border:1px solid var(--line);background:var(--glass);font-weight:700;font-size:15px;line-height:1.1}
.dh small{display:block;font:600 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:2px}
.dh.today{background:var(--accent);color:var(--on-accent);border-color:transparent;box-shadow:var(--glow)}
.dh.today small{color:inherit;opacity:.85}
.ev{display:block;width:100%;text-align:left;border-radius:10px;padding:5px 5px 5px 7px;min-height:44px;font-size:11.5px;line-height:1.2;overflow:hidden;
  background:color-mix(in srgb,var(--ac,var(--accent)) 17%,var(--glass-strong));border:1px solid color-mix(in srgb,var(--ac,var(--accent)) 35%,transparent);border-left:4px solid var(--ac,var(--accent))}
.ev b{display:block;font:600 10px var(--mono);letter-spacing:.02em;color:var(--text-dim);margin-bottom:1px}
.ev span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;overflow-wrap:anywhere}
.ev.allday{min-height:30px}
.dnone{text-align:center;color:var(--text-faint);font:600 10px var(--mono);padding:8px 0}
.dayrows .row .time small{display:block;font-size:11px;color:var(--text-faint);font-weight:500}

/* bottom bar: floating glass, one colour per tab in Spectrum */
nav{position:absolute;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));padding:5px;gap:2px;display:flex;border-radius:22px;background:var(--bar-bg);border:1px solid var(--line-strong);box-shadow:var(--shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
nav[hidden]{display:none}
nav button{--nav:var(--accent);flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;font:600 10.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);padding:4px 0}
:root[data-palette=spectrum] nav button{--nav:var(--mod)}
:root[data-palette=spectrum] nav button .pl svg{color:var(--mod)}
nav button .pl{width:100%;max-width:64px;height:34px;display:grid;place-items:center;border:1px solid transparent;border-radius:14px}
nav button.on{color:var(--nav)}
nav button.on .pl{background:color-mix(in srgb,var(--nav) 13%,transparent);color:var(--nav);border-color:color-mix(in srgb,var(--nav) 45%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--nav) 18%,transparent)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (min-width:760px){#app{max-width:760px}}