/* Brain — "Calm Focus" design system. Premium but low-stimulation: a confident
   violet identity, layered indigo depth, generous rounding, friendly self-hosted type.
   ADHD principles intact: no guilt/streaks, gentle colour, one focus at a time. */

@font-face{
  font-family:'Jakarta';
  src:url('/static/fonts/plus-jakarta-sans.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
}

:root{
  /* surfaces — deep indigo ink, layered elevation */
  --bg:#0e0e16; --surface:#191a25; --surface2:#22232f; --surface3:#2b2c3a;
  --line:#272938; --line2:#363849;
  /* text */
  --text:#f4f3fb; --muted:#a6a7bd; --muted2:#6d6e85;
  /* signature violet + warm secondary */
  --accent:#7d6bff; --accent2:#a99cff; --accent-deep:#5a49d6;
  --grad:linear-gradient(135deg,#8b7bff 0%,#b69dff 100%);
  --warm:#ff9a6b;
  /* category + semantic */
  --todo:#5b9dff; --reminder:#ffb24d; --idea:#c08bff; --list:#37d39f; --inbox:#8a8fa8;
  --danger:#ff6f87; --ok:#37d39f;
  /* shape + depth */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --radius:18px;
  --shadow:0 10px 34px rgba(0,0,0,.45); --shadow-sm:0 2px 12px rgba(0,0,0,.3);
  --glow:0 12px 40px rgba(125,107,255,.4);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box}
/* The HTML `hidden` attribute MUST win — overlays set display:grid which would
   otherwise override `hidden` and leave a sheet permanently covering the app. */
[hidden]{display:none!important}
html,body{margin:0}
body{
  font:400 16px/1.55 'Jakarta',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  letter-spacing:-.011em;
  background:
    radial-gradient(115% 70% at 50% -12%, rgba(125,107,255,.17) 0%, transparent 56%),
    radial-gradient(90% 55% at 90% 4%, rgba(255,154,107,.06) 0%, transparent 50%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text); -webkit-tap-highlight-color:transparent;
  min-height:100dvh;
  padding-bottom:calc(96px + var(--safe-b));
}
button{font:inherit;cursor:pointer;color:inherit;border:none;background:none;letter-spacing:inherit}
input{font:inherit;letter-spacing:inherit}
a{color:var(--accent2)}
h1,h2,h3{letter-spacing:-.025em}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;backdrop-filter:blur(10px);
  background:linear-gradient(rgba(14,14,22,.82),rgba(14,14,22,.58));border-bottom:1px solid var(--line);
}
.brand{font-weight:700;letter-spacing:.2px;display:flex;align-items:center;gap:8px}
.logo{font-size:20px}
.topbar-actions{display:flex;align-items:center;gap:10px}
.ghost{background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:7px 11px;font-size:14px;color:var(--text)}
.ghost:hover{color:var(--text)}
.sync-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.sync-dot.off{background:var(--muted2);box-shadow:none}
.sync-dot.busy{background:var(--reminder);box-shadow:0 0 8px var(--reminder)}

/* ---------- views ---------- */
.view{max-width:680px;margin:0 auto;padding:18px 16px 30px}
.view-title{font-size:20px;margin:6px 4px 16px}

/* ---------- capture stage ---------- */
.capture-stage{display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 0 10px}
.mic{
  position:relative;width:150px;height:150px;border-radius:50%;
  background:linear-gradient(145deg, var(--accent), var(--accent2));
  border:none;box-shadow:0 12px 44px rgba(125,107,255,.55);
  display:grid;place-items:center;transition:transform .12s ease;
}
.mic:active{transform:scale(.96)}
.mic-icon{width:60px;height:60px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;z-index:2}
.mic-ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid #fff;opacity:0}
.mic.listening{background:linear-gradient(145deg,#ff6f6f,#ff9d7a);box-shadow:0 12px 44px rgba(255,111,111,.55)}
.mic.listening .mic-icon{stroke:#fff}
.mic.listening .mic-ring{animation:pulse 1.4s ease-out infinite;opacity:1}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.mic-hint{color:var(--text);margin:2px;font-size:15px;font-weight:500}
.interim{min-height:24px;color:var(--accent2);text-align:center;font-size:15px;margin:0;padding:0 10px}

.textbar{display:flex;gap:8px;margin:18px auto 4px;max-width:560px}
.textbar input{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 15px;color:var(--text)}
.textbar input:focus{outline:none;border-color:var(--accent)}
.send{width:48px;border-radius:12px;background:var(--accent);color:#fff;font-size:20px;font-weight:700}
.send:active{filter:brightness(.92)}

/* last-filed confirmation card */
.last-card{max-width:560px;margin:18px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);animation:rise .25s ease}
@keyframes rise{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.last-card .lc-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.last-card .lc-text{font-size:16px}
.last-card .lc-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.lc-tag{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent2);font-weight:700;margin-right:2px}
.lc-act{font-size:13px;padding:8px 12px;border-radius:10px;background:var(--surface2);border:1px solid var(--line);color:var(--text);min-height:38px}
.lc-act:active{transform:scale(.97)}
.lc-act.ghostbtn{color:var(--muted)}
.lc-edit{font-size:16px}

/* recent strip under capture */
.recent{list-style:none;margin:22px auto 0;padding:0;max-width:560px;display:flex;flex-direction:column;gap:8px}

/* ---------- chips & pills ---------- */
.chip{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);color:var(--muted)}
.chip[data-cat]{cursor:pointer}
.pill{font-size:11px;font-weight:700;letter-spacing:.01em;padding:3px 9px;border-radius:999px;text-transform:capitalize}
.pill.todo{background:rgba(91,157,255,.15);color:var(--todo)}
.pill.reminder{background:rgba(255,178,77,.15);color:var(--reminder)}
.pill.idea{background:rgba(192,139,255,.15);color:var(--idea)}
.pill.list{background:rgba(55,211,159,.15);color:var(--list)}
.pill.inbox{background:rgba(138,143,168,.16);color:var(--inbox)}
.pill.sorting{background:#23272f;color:var(--muted);animation:fsPulse 1.4s ease-in-out infinite}
.pill.softkind,.chip.softkind{background:#1d2a2f;color:#9ad6d6}
/* gentle framing for a worry / decision — calm, never a task */
.soft-note{margin-top:9px;padding:10px 12px;border-radius:12px;background:#1a2329;border:1px solid #26333a;color:#b8c4c4;font-size:13.5px;line-height:1.45}
/* Wave 4: related-thoughts peek under an item */
.related-peek{margin-top:9px;padding:9px 11px;border-radius:11px;background:var(--surface2);border:1px solid var(--line);animation:rise .2s ease}
.related-h{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent2);font-weight:700;margin-bottom:7px}
.related-item{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--text);padding:3px 0}
.related-item .dot-cat{margin-top:6px;flex:none}
/* Wave 4: themes (clusters) in Stats */
.themes{display:flex;flex-direction:column;gap:11px}
.theme{background:var(--surface2);border:1px solid var(--line);border-radius:13px;padding:12px 13px}
.theme:active{transform:scale(.995)}
.theme-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.theme-name{font-weight:600;font-size:14.5px;text-transform:capitalize}
.theme-items{display:flex;flex-direction:column;gap:5px}
.theme-item{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--muted)}
.theme-item .dot-cat{margin-top:5px;flex:none}
.theme-more{font-size:12px;color:var(--accent2);margin-top:2px}
.map-btn{display:block;width:100%;margin-bottom:14px;padding:12px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;font-weight:600;font-size:14.5px}
.map-btn:active{transform:scale(.99)}
/* Wave 5: mind-map canvas */
.graphview{position:fixed;inset:0;z-index:60;background:radial-gradient(120% 100% at 50% -5%,#1a1832,#0a0a12);display:flex;flex-direction:column;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.graph-top{display:flex;align-items:center;justify-content:space-between;padding:calc(10px + var(--safe-t,0)) 14px 8px;flex:none}
.graph-title{font-weight:700;font-size:15px}
.graph-ctrls{display:flex;gap:6px}
.graph-ctrls .ghost{width:38px;height:38px;display:grid;place-items:center;font-size:18px;padding:0}
.graph-svg{flex:1;width:100%;touch-action:none;cursor:grab;display:block}
.graph-svg:active{cursor:grabbing}
.gedge{stroke:#3a4150;opacity:.55}
.gedge.dim{opacity:.08}
.gnode{cursor:pointer;stroke:#0e0e16;stroke-width:1.5;transition:opacity .2s ease}
.gnode.sel{stroke:#fff;stroke-width:2.5}
.gnode.dim{opacity:.15}
.gnode.gpop{animation:gpop .4s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes gpop{from{transform:scale(0);opacity:0;transform-box:fill-box;transform-origin:center}to{transform:scale(1);opacity:1}}
.graph-info{position:absolute;left:12px;right:12px;bottom:calc(14px + var(--safe-b));background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 15px;box-shadow:var(--shadow);animation:up .2s ease}
.gi-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.gi-x{margin-left:auto;background:var(--surface2);border:1px solid var(--line);color:var(--muted);width:28px;height:28px;border-radius:8px}
.gi-text{font-size:16px;line-height:1.3;margin-bottom:12px;word-wrap:break-word}
.gi-acts{display:flex;gap:8px}
.gi-go{flex:1;background:var(--accent);color:#fff;border:none;border-radius:11px;padding:11px;font-weight:600}
.gi-rel{background:var(--surface2);color:var(--text);border:1px solid var(--line);border-radius:11px;padding:11px 14px;font-weight:600}
body.lowstim .gnode.gpop{animation:none}
body.lowstim .graphview{animation:none}
.dot-cat{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot-cat.todo{background:var(--todo)} .dot-cat.reminder{background:var(--reminder)}
.dot-cat.idea{background:var(--idea)} .dot-cat.list{background:var(--list)} .dot-cat.inbox{background:var(--inbox)}

/* ---------- item rows ---------- */
.item{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;gap:12px;align-items:flex-start}
.item.done .it-text{text-decoration:line-through;color:var(--muted2)}
.item.overdue{border-color:#5a3a1a}
.it-check{flex:none;width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line);background:var(--surface2);display:grid;place-items:center;margin-top:2px;font-size:14px;color:var(--ok)}
.it-check.on{background:var(--ok);color:#0c1410;border-color:var(--ok)}
.it-main{flex:1;min-width:0}
.it-text{font-size:15.5px;word-wrap:break-word}
.it-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:5px;color:var(--muted);font-size:12px}
.it-due{color:var(--reminder)} .it-due.over{color:var(--danger);font-weight:600}
.it-actions{display:flex;gap:4px;flex:none}
.iconbtn{width:30px;height:30px;border-radius:8px;background:var(--surface2);border:1px solid var(--line);color:var(--muted);font-size:14px;display:grid;place-items:center}
.iconbtn:hover{color:var(--text)}
/* swipe-to-act: foreground slides, colour reveal underneath (→ done, ← delete) */
.item.swipeable{display:block;position:relative;overflow:hidden;padding:0;touch-action:pan-y}
.item.swipeable>.it-fg{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;background:var(--surface);will-change:transform}
.swipe-bg{position:absolute;inset:0;z-index:0;display:none;align-items:center;padding:0 22px;font-size:20px;color:#fff}
.swipe-bg.left,.swipe-bg.right{display:flex}
.swipe-bg.right{justify-content:flex-start;background:var(--ok)}
.swipe-bg.left{justify-content:flex-end;background:#c0392b}
.swipe-bg.past{filter:brightness(1.14)}
/* gentle stagger-in on navigation */
.item.stg{animation:rise .26s ease backwards;animation-delay:calc(var(--i,0)*28ms)}
.it-edit{width:100%;margin-top:8px;background:var(--surface2);border:1px solid var(--accent);border-radius:10px;padding:9px 11px;color:var(--text)}
.recat{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}

.empty{color:var(--muted);text-align:center;padding:46px 16px}
.empty .big{font-size:38px;display:block;margin-bottom:10px;opacity:.7}

/* group headers in lists */
.group-h{display:flex;align-items:center;gap:9px;margin:22px 4px 10px;font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.group-h .count{margin-left:auto;font-size:12px}
.stack{display:flex;flex-direction:column;gap:9px}

/* today buckets */
.bucket-h{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin:20px 4px 9px}
.bucket-h.over{color:var(--danger)}
.snooze-row{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}

/* ---------- lists head ---------- */
.lists-head{position:sticky;top:53px;z-index:10;background:linear-gradient(var(--bg),rgba(14,14,22,.92) 70%,rgba(14,14,22,.75));margin:0 -16px;padding:12px 16px 8px}
.cat-tabs{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px}
.cat-tab{white-space:nowrap;padding:7px 13px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:13px}
.cat-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.search{width:100%;margin-top:9px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:10px 13px;color:var(--text)}
.search:focus{outline:none;border-color:var(--accent)}

/* ---------- stats ---------- */
.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center}
.stat-card .num{font-size:28px;font-weight:700}
.stat-card .lbl{font-size:12px;color:var(--muted);margin-top:2px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:16px}
.panel h3{margin:0 0 12px;font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:13px}
.legend span{display:flex;align-items:center;gap:6px;color:var(--muted)}
svg .bar{transition:height .4s ease}
.donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}

/* ---------- bottom tab bar ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  background:var(--surface);
  border-top:1px solid var(--line);padding-bottom:var(--safe-b);
}
.tabbar button{flex:1;padding:9px 0 8px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--muted);position:relative}
.tabbar button span{font-size:20px}
.tabbar button.active{color:var(--accent2)}
.badge{position:absolute;top:5px;right:calc(50% - 22px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--danger);color:#fff;font-size:10px;font-style:normal;display:grid;place-items:center}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(86px + var(--safe-b));transform:translateX(-50%);
  background:var(--surface2);border:1px solid var(--line);color:var(--text);
  padding:11px 16px;border-radius:12px;box-shadow:var(--shadow);z-index:40;font-size:14px;max-width:90vw;text-align:center}
.toast.ok{border-color:#2a4a38}
.toast.err{border-color:#5a2a2a}

/* ---------- settings sheet ---------- */
.sheet{position:fixed;inset:0;z-index:50;background:#0009;display:grid;align-items:end;backdrop-filter:blur(3px)}
.sheet-card{background:var(--surface);border-top-left-radius:22px;border-top-right-radius:22px;border:1px solid var(--line);padding:22px 20px calc(26px + var(--safe-b));max-width:680px;margin:0 auto;width:100%;animation:up .25s ease}
@keyframes up{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
.sheet-card h3{margin:0 0 16px}
.field{display:block;margin-bottom:16px}
.field span{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field input{width:100%;background:var(--surface2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;color:var(--text)}
.block{display:block;width:100%;padding:13px;border-radius:12px;background:var(--accent);color:#fff;font-weight:600;text-align:center;margin-bottom:12px}
.block.ghost{background:var(--surface2);border:1px solid var(--line);color:var(--text);font-weight:500}
.links{display:flex;gap:16px;flex-wrap:wrap;margin:6px 2px 14px;font-size:14px}
.muted{color:var(--muted)} .small{font-size:12px}
.btn-sm{font-size:12px;padding:5px 10px;border-radius:9px;background:var(--surface2);border:1px solid var(--line);color:var(--muted)}
.btn-sm:hover{color:var(--text)}
.btn-sm.warn:hover{color:var(--danger);border-color:#5a2a2a}

/* ---------- touch category picker (last card + triage) ---------- */
.catpick{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.catbtn{display:flex;align-items:center;gap:5px;min-height:40px;padding:8px 13px;border-radius:11px;
  background:var(--surface2);border:1px solid var(--line);color:var(--text);font-size:14px;text-transform:capitalize}
.catbtn.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.catbtn.ghostbtn{color:var(--muted)}
.catbtn:active{transform:scale(.97)}
.lc-nudge{margin-top:8px;font-size:13px;color:var(--reminder)}

/* ---------- P1: first step + split subtasks ---------- */
.firststep{display:flex;align-items:flex-start;gap:7px;margin-top:8px;padding:8px 10px;
  background:linear-gradient(90deg,rgba(125,107,255,.16),rgba(169,156,255,.05));
  border-left:2px solid var(--accent);border-radius:8px;font-size:14px;color:var(--text);line-height:1.35}
.firststep .fs-ic{color:var(--accent2);font-size:11px;line-height:1.7;flex:none}
.firststep.finding{color:var(--muted);font-style:italic;animation:fsPulse 1.4s ease-in-out infinite}
@keyframes fsPulse{0%,100%{opacity:.5}50%{opacity:1}}
.subtasks{margin:6px 0 2px;padding:0 0 0 16px;list-style:none}
.subtasks li{position:relative;font-size:13px;color:var(--muted);padding:2px 0}
.subtasks li::before{content:"";position:absolute;left:-12px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* ---------- recur chip + datetime ---------- */
.chip.recur{cursor:pointer;background:#2a1c3d;color:var(--idea);border-color:#3a2a55}
.dt{background:var(--surface2);border:1px solid var(--line);border-radius:9px;padding:7px 9px;color:var(--text);font-size:13px;color-scheme:dark}

/* ---------- today banners / buckets ---------- */
.banner{display:block;width:100%;text-align:left;margin:4px 0 14px;padding:13px 15px;border-radius:13px;
  background:linear-gradient(90deg,#23203a,#1c2030);border:1px solid #322c52;color:var(--text);font-size:15px;font-weight:600}
.banner:active{transform:scale(.99)}
.bucket-h.soft{color:var(--reminder)}
.bucket-h.soft #reschedAll,.bucket-h .btn-sm{margin-left:10px;font-weight:500}
.bucket-h.resurf{color:var(--idea)}
.bucket-h{display:flex;align-items:center}

/* ---------- inbox triage overlay ---------- */
.triage{position:fixed;inset:0;z-index:55;background:#08080fee;display:grid;place-items:center;padding:24px;backdrop-filter:blur(4px)}
.triage-card{width:100%;max-width:460px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px 20px;box-shadow:var(--shadow);text-align:center;animation:rise .2s ease}
.triage-progress{font-size:13px;color:var(--muted);margin-bottom:14px}
.triage-text{font-size:20px;line-height:1.4;margin-bottom:22px;min-height:56px;display:flex;align-items:center;justify-content:center}
.triage-cats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.triage-cats .catbtn{justify-content:center;min-height:52px;font-size:15px}
.triage-skip{margin-top:16px;color:var(--muted2);font-size:13px}

/* ---------- toast action button ---------- */
.toast{display:flex;align-items:center;gap:14px}
.toast-act{color:var(--accent2);font-weight:700;font-size:14px;padding:2px 4px}

.linkbtn{background:none;color:var(--accent2);padding:0;font-size:14px;text-decoration:underline}

@media(min-width:680px){ body{padding-bottom:0} .tabbar{position:sticky;bottom:0;border-radius:0} }

/* ---------- time-blindness aids: countdown + draining runway bar ---------- */
.it-due{display:inline-flex;align-items:center;gap:6px}
.it-due.over .due-txt{color:var(--muted2)}            /* overdue is neutral — never a wall of red */
.due-bar{display:inline-block;width:42px;height:4px;border-radius:3px;background:var(--line);overflow:hidden}
.due-bar i{display:block;height:100%;width:100%;background:var(--muted);border-radius:3px;transition:width .8s linear}
.due-bar.urgent i{background:var(--reminder)}         /* grey → amber as it drains, never red */

/* ---------- focus launcher (Today) ---------- */
.focus-launch{display:block;width:100%;text-align:center;margin:2px 0 14px;padding:14px;border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:16px;font-weight:700;
  box-shadow:0 8px 26px rgba(125,107,255,.4)}
.focus-launch:active{transform:scale(.99)}

/* ---------- focus / body-double full-screen ---------- */
.focus{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:26px;
  background:radial-gradient(125% 90% at 50% -5%,#1d1a3c 0%,#0a0a12 72%);backdrop-filter:blur(6px)}
.focus-card{width:100%;max-width:480px;text-align:center;position:relative;animation:rise .22s ease}
.focus-x{position:absolute;top:-6px;right:-2px;font-size:18px;color:var(--muted2);padding:6px}
.focus-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);margin-bottom:14px}
.focus-steplabel{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent2);margin:-4px 0 12px;font-weight:700}
.focus-task{font-size:24px;line-height:1.34;font-weight:600;margin-bottom:18px}
.focus-step{display:inline-flex;align-items:flex-start;gap:8px;text-align:left;font-size:17px;line-height:1.4;
  padding:14px 16px;border-radius:13px;background:rgba(125,107,255,.16);border-left:3px solid var(--accent);margin-bottom:12px}
.focus-step .fs-ic{color:var(--accent2);font-size:13px;line-height:1.6;flex:none}
.focus-note{font-size:13px;color:var(--muted);margin-bottom:22px}
.focus-note em{color:var(--accent2);font-style:normal;font-weight:700}
.focus-timer{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.ft-bar{flex:1;height:6px;border-radius:4px;background:var(--surface2);overflow:hidden}
.ft-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:4px;transition:width 1s linear}
.ft-time{font-variant-numeric:tabular-nums;font-size:15px;color:var(--muted);min-width:42px;text-align:right}
.focus-acts{display:flex;flex-direction:column;gap:10px}
.focus-btn{padding:14px;border-radius:13px;font-size:16px;font-weight:600}
.focus-btn.ok{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.focus-btn.ghost{background:var(--surface2);border:1px solid var(--line);color:var(--text)}
.focus-btn:active{transform:scale(.99)}
body.focusing{overflow:hidden}

/* ---------- ask your brain ---------- */
.ask-card{text-align:left}
.ask-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.ask-chip{background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:13px;color:var(--muted)}
.ask-chip:active{transform:scale(.97)}
.ask-answer{margin:6px 0 14px;min-height:24px}
.ask-a{background:var(--surface2);border:1px solid var(--line);border-radius:13px;padding:14px 15px;line-height:1.5;margin-bottom:6px}

/* ---------- "What can I do right now?" picker ---------- */
.wn-launch{display:block;width:100%;text-align:center;margin:0 0 14px;padding:13px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);color:var(--text);font-size:15px;font-weight:600}
.wn-launch:active{transform:scale(.99)}
/* Today hero card — one task, big, with a gentle energy glow */
.hero-slot:empty{display:none}
.hero{position:relative;border-radius:20px;padding:22px 18px 18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px;animation:rise .28s ease}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(130% 90% at 50% -10%,var(--hero-glow,transparent),transparent 68%);pointer-events:none}
.hero-cool{--hero-glow:rgba(90,170,255,.26)}
.hero-mid{--hero-glow:rgba(125,107,255,.24)}
.hero-warm{--hero-glow:rgba(255,176,90,.24)}
.hero>*{position:relative}
.hero-label{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent2);font-weight:700;margin-bottom:11px}
.hero-text{font-size:23px;line-height:1.26;font-weight:600;margin-bottom:13px;word-wrap:break-word}
.hero-step{display:flex;gap:8px;align-items:flex-start;background:var(--surface2);border-radius:12px;padding:11px 13px;margin-bottom:13px;font-size:14.5px}
.hero-step .fs-ic{color:var(--accent2);flex:none;line-height:1.5}
.hero-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:17px;color:var(--muted);font-size:13px}
.hero-why{font-style:italic;color:var(--muted)}
.hero-actions{display:flex;gap:9px;align-items:stretch}
.hero-go{flex:1;background:var(--accent);color:#fff;border:none;border-radius:13px;padding:14px;font-weight:600;font-size:15.5px}
.hero-go:active{transform:scale(.99)}
.hero-done{width:52px;background:var(--surface2);color:var(--ok);border:1px solid var(--line);border-radius:13px;font-size:18px;font-weight:700}
.hero-skip{background:none;border:none;color:var(--muted);padding:0 6px;font-size:14px}
.hero-more{margin-top:11px;text-align:center;color:var(--muted);font-size:12px}
.hero-clear{text-align:center;color:var(--muted);padding:18px 8px;font-size:14px;animation:rise .25s ease}
.hero.hero-out{animation:heroOut .24s ease forwards}
@keyframes heroOut{to{transform:translateX(-16px) scale(.97);opacity:0}}
body.lowstim .hero::before{display:none}
/* Morning brief sheet */
.brief-greet{margin:0 0 4px;font-size:20px}
.brief-line{margin:0 0 16px;font-size:14px}
.brief-items{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.brief-item{display:flex;gap:12px;align-items:flex-start;background:var(--surface2);border:1px solid var(--line);border-left:3px solid var(--brief-edge,var(--accent));border-radius:12px;padding:12px 13px;animation:rise .24s ease backwards}
.brief-item:nth-child(2){animation-delay:.05s}.brief-item:nth-child(3){animation-delay:.1s}
.brief-cool{--brief-edge:#5aaaff}.brief-mid{--brief-edge:#9685ff}.brief-warm{--brief-edge:#ffb05a}
.brief-n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--brief-edge,var(--accent));color:#0c0f17;font-weight:700;font-size:12px;display:grid;place-items:center;margin-top:2px}
.brief-body{flex:1;min-width:0}
.brief-text{font-size:15.5px;font-weight:600;word-wrap:break-word}
.brief-meta{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:6px;color:var(--muted);font-size:12px}
.brief-go{flex:none;align-self:center;background:var(--accent);color:#fff;border:none;border-radius:10px;padding:9px 12px;font-weight:600;font-size:13px}
.wn-controls{display:flex;flex-direction:column;gap:10px;margin:8px 0 16px}
.wn-row{display:flex;flex-wrap:wrap;gap:8px}
.wn-chip{padding:9px 14px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);color:var(--muted);font-size:14px}
.wn-chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.wn-chip:active{transform:scale(.97)}
.wn-results{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.wn-task{background:var(--surface2);border:1px solid var(--line);border-radius:13px;padding:12px 14px;display:flex;gap:10px;align-items:center}
.wn-task-main{flex:1;min-width:0}
.wn-go{flex:none;align-self:center;padding:10px 14px;border-radius:11px;background:var(--accent);color:#fff;font-weight:600;font-size:14px;white-space:nowrap}
.wn-go:active{transform:scale(.97)}
body.lowstim .wn-launch{background:var(--surface2)}

/* ---------- completion bloom (asymmetric: only ever on a win) ---------- */
.bloom{position:fixed;left:50%;top:42%;z-index:90;width:88px;height:88px;border-radius:50%;
  display:grid;place-items:center;font-size:40px;color:#fff;pointer-events:none;
  background:radial-gradient(circle,rgba(55,211,159,.95),rgba(55,211,159,0) 70%);animation:bloom .9s ease-out forwards}
@keyframes bloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}30%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}

/* ---------- settings rows ---------- */
.field.row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.field.row > span{font-size:14px}

/* ---------- calm / low-stimulation mode ---------- */
body.lowstim{background:var(--bg)}
body.lowstim .mic{background:var(--accent);box-shadow:none}
body.lowstim .focus-launch,body.lowstim .focus-btn.ok{background:var(--surface2);color:var(--text);box-shadow:none}
body.lowstim .focus{background:#0a0a12}
body.lowstim .firststep,body.lowstim .focus-step{background:var(--surface2)}
body.lowstim *{animation:none!important;transition:none!important}

/* respect OS-level reduced-motion everywhere */
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ---------- login gate (multi-user) ---------- */
.authgate{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;
  background:radial-gradient(115% 70% at 50% -12%,rgba(125,107,255,.17) 0%,transparent 56%),var(--bg)}
.auth-card{width:100%;max-width:360px;text-align:center}
.auth-brand{font-size:26px;font-weight:800;display:flex;gap:10px;align-items:center;justify-content:center;margin-bottom:8px}
.authgate .muted{margin:0 0 20px}
.authgate input{display:block;width:100%;margin:0 0 11px;padding:13px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface2);color:var(--text);font-size:16px}
.authgate input:focus{outline:none;border-color:var(--accent)}
.auth-go{margin-top:4px}
.auth-err{color:var(--danger);font-size:13px;margin:2px 0 10px;text-align:left}
#acctRow{margin:4px 0 8px}

/* ---------- narrow phones: don't let the action icons crush the item text ----------
   the no-wrap 6-icon cluster (~184px) left a sliver for the text on a ~390px screen.
   on phones, drop the whole action row onto its own full-width line BENEATH the text —
   the text gets the full width, the row reads calmer, and every action stays reachable. */
@media (max-width:480px){
  .item,.item.swipeable>.it-fg{flex-wrap:wrap}
  .it-actions{flex-basis:100%;justify-content:flex-end;gap:10px;margin-top:4px}
  .it-text{font-size:15px}
}
@media (max-width:360px){
  .item{padding:11px 12px;gap:9px}
  .item.swipeable{padding:0}
  .item.swipeable>.it-fg{padding:11px 12px;gap:9px}
  .it-actions{gap:8px}
}

/* ============ premium polish (overrides — loaded last so they win) ============ */
/* primary CTAs: one confident gradient + soft glow */
.send,.block:not(.ghost),.auth-go,.hero-go,.focus-btn.ok,.gi-go,.brief-go,.wn-go,.map-btn,.focus-launch{
  background:var(--grad);color:#fff;border:none}
.send,.block:not(.ghost),.hero-go,.focus-btn.ok,.map-btn,.focus-launch{box-shadow:0 8px 24px rgba(125,107,255,.30)}
.block:not(.ghost){font-weight:700}
.send{box-shadow:0 6px 18px rgba(125,107,255,.34)}

/* inputs: calm focus glow */
.textbar input:focus,.search:focus,.authgate input:focus,.field input:focus,.dt:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(125,107,255,.16)}

/* cards: a hair of top-lit depth */
.last-card,.item,.item.swipeable>.it-fg,.panel,.stat-card,.hero,.triage-card,.sheet-card{
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.035)}
.last-card,.hero,.triage-card{box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.045)}

/* ghost / icon buttons cleaner */
.ghost{border-radius:11px}
.iconbtn{border-radius:9px;transition:color .15s,background .15s}
.iconbtn:active{background:var(--surface3)}

/* tab bar: glassy + a crisp active indicator */
.tabbar{background:rgba(18,18,27,.82);backdrop-filter:blur(18px) saturate(1.2);border-top:1px solid var(--line)}
.tabbar button{transition:color .16s;font-weight:600}
.tabbar button.active{color:var(--accent2)}
.tabbar button.active::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:30px;height:3px;border-radius:0 0 4px 4px;background:var(--grad);box-shadow:0 1px 8px rgba(125,107,255,.6)}

/* category tabs / chips active → gradient */
.cat-tab.active,.catbtn.on,.wn-chip.on{background:var(--grad);border-color:transparent;color:#fff}
.wn-launch{background:linear-gradient(135deg,var(--surface2),var(--surface));border-color:var(--line2)}

/* Calm mode: strip gradients + glows back to flat */
body.lowstim .send,body.lowstim .block:not(.ghost),body.lowstim .hero-go,body.lowstim .focus-btn.ok,
body.lowstim .map-btn,body.lowstim .focus-launch,body.lowstim .cat-tab.active,body.lowstim .catbtn.on,
body.lowstim .wn-chip.on,body.lowstim .gi-go,body.lowstim .brief-go,body.lowstim .wn-go,body.lowstim .auth-go{
  background:var(--accent);box-shadow:none}
body.lowstim .tabbar button.active::after{display:none}
body.lowstim .tabbar{background:var(--surface);backdrop-filter:none}