/* ===========================================================
   Untangle — calm, premium, App-Store-grade design system
   Light "paper" Mind screen · deep twilight Capture screen
   =========================================================== */
:root{
  --paper:#f4f1ea;
  --paper-bloom:#efeaff;
  --surface:#fbfaf6;
  --surface-2:#f6f3ec;
  --ink:#221f2b;
  --ink-2:#56525f;
  --muted:#928d9c;
  --line:rgba(34,31,43,.08);
  --line-2:rgba(34,31,43,.05);
  --accent:#6c5cf0;
  --accent-deep:#5546d8;
  --accent-soft:#ece8ff;

  --c-todo:#d97c45;   --c-todo-bg:#f8ebe0;
  --c-idea:#7b66ef;   --c-idea-bg:#ebe7fe;
  --c-reminder:#2f97e0; --c-reminder-bg:#e2eefb;
  --c-plan:#1faa7e;   --c-plan-bg:#def3ec;
  --c-note:#8b8597;   --c-note-bg:#eeecf2;
  --c-feeling:#df6fa3; --c-feeling-bg:#fbe7f0;

  --shadow-sm:0 1px 2px rgba(28,20,55,.05), 0 4px 12px rgba(28,20,55,.05);
  --shadow-md:0 2px 6px rgba(28,20,55,.06), 0 14px 34px rgba(28,20,55,.09);
  --r:20px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.22,.8,.28,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--accent-soft)}

/* ---------- Mind (home) ---------- */
.mind{
  min-height:100dvh;
  max-width:560px;margin:0 auto;
  padding:0 18px;
  position:relative;
  background:
    radial-gradient(120% 60% at 80% -8%, var(--paper-bloom) 0%, rgba(239,234,255,0) 55%),
    radial-gradient(90% 40% at -10% 0%, #f0ece3 0%, rgba(240,236,227,0) 50%);
}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:max(18px,env(safe-area-inset-top)) 2px 6px;
}
.wordmark{
  font-family:Fraunces,serif;font-weight:500;font-size:21px;
  letter-spacing:-.01em;color:var(--ink);
}
.wordmark::first-letter{color:var(--accent)}
.icon-btn{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-2);
  transition:background .2s;
}
.icon-btn:active{background:var(--line)}

.hero{padding:14px 4px 18px}
.hero-eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);opacity:.85;margin-bottom:10px;
}
.hero-summary{
  font-family:Fraunces,serif;font-weight:430;
  font-size:25px;line-height:1.28;letter-spacing:-.012em;
  margin:0;color:var(--ink);
}
.hero-stats{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
.stat{
  font-size:12.5px;font-weight:550;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);
  padding:6px 11px;border-radius:999px;box-shadow:var(--shadow-sm);
}
.stat b{color:var(--ink);font-weight:700}
.stat.urgent{color:var(--c-todo);background:var(--c-todo-bg);border-color:transparent}
.stat.urgent b{color:var(--c-todo)}

/* ---------- board ---------- */
.board{display:flex;flex-direction:column;gap:26px;padding-top:4px}
.group{display:flex;flex-direction:column;gap:10px}
.group-head{display:flex;align-items:baseline;gap:9px;padding:0 4px 2px}
.group-title{
  font-family:Fraunces,serif;font-size:16.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink);
}
.group-count{font-size:12px;font-weight:600;color:var(--muted)}
.group-dot{width:7px;height:7px;border-radius:50%;align-self:center;margin-right:1px}

/* needs-you band */
.needs .group-title{color:var(--c-todo)}
.needs{
  background:linear-gradient(180deg,#fbf0e7,#faf3ec);
  border:1px solid #f0ddcb;border-radius:24px;padding:16px 14px;
  box-shadow:var(--shadow-sm);
}
.needs .group-head{padding-left:2px}

/* ---------- card ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:14px 15px 13px;
  box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
  transition:box-shadow .25s var(--ease), transform .2s var(--ease), border-color .25s;
  will-change:transform;
}
.card:active{transform:scale(.987)}
.card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--cc,var(--c-note));opacity:.9;
}
.card.open{box-shadow:var(--shadow-md);border-color:var(--line)}
.card-top{display:flex;align-items:flex-start;gap:11px}
.card-body{flex:1;min-width:0}
.card-title{
  font-size:15.5px;font-weight:600;line-height:1.34;letter-spacing:-.006em;color:var(--ink);
  margin:1px 0 0;
}
.card-detail{font-size:13px;line-height:1.45;color:var(--ink-2);margin:5px 0 0}
.card-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px}
.chip{
  font-size:11px;font-weight:650;letter-spacing:.01em;
  padding:3.5px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;
  color:var(--cc);background:var(--ccbg);
}
.chip .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.due{
  font-size:11px;font-weight:600;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);
  padding:3.5px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;
}
.due svg{opacity:.6}
.due.soon{color:var(--c-todo);background:var(--c-todo-bg);border-color:transparent}
.merged{font-size:11px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:4px}

.card-check{
  flex:none;width:23px;height:23px;border-radius:50%;
  border:1.8px solid var(--line);background:var(--surface-2);
  display:grid;place-items:center;margin-top:1px;color:#fff;transition:.2s var(--ease);
}
.card-check svg{opacity:0;transform:scale(.5);transition:.2s var(--ease)}
.card.done .card-check{background:var(--c-plan);border-color:var(--c-plan)}
.card.done .card-check svg{opacity:1;transform:scale(1)}
.card.done .card-title{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)}
.card.done .card-detail,.card.done .card-meta{opacity:.5}
.card.done::before{opacity:.3}

/* expand */
.card-more{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .38s var(--ease), opacity .3s var(--ease), margin .3s var(--ease);
}
.card.open .card-more{max-height:240px;opacity:1;margin-top:13px}
.card-said{
  font-size:12.5px;line-height:1.5;color:var(--ink-2);
  background:var(--surface-2);border-radius:13px;padding:10px 12px;
  border:1px solid var(--line-2);
}
.card-said b{color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;display:block;margin-bottom:4px}
.card-actions{display:flex;gap:8px;margin-top:11px}
.act{
  flex:1;font-size:13px;font-weight:600;padding:9px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--surface-2);color:var(--ink);border:1px solid var(--line);
}
.act.primary{background:var(--accent);color:#fff;border-color:transparent}
.act.danger{color:var(--c-feeling);flex:0 0 46px}
.suggest{
  margin-top:11px;font-size:12.5px;color:var(--ink-2);
  display:flex;align-items:center;gap:7px;
}
.suggest .lbl{font-weight:600;color:var(--accent)}

/* done group collapsed */
.done-group{margin-top:6px}
.done-toggle{
  width:100%;text-align:left;font-size:13px;font-weight:600;color:var(--muted);
  padding:10px 4px;display:flex;align-items:center;gap:8px;
}
.done-toggle svg{transition:transform .3s var(--ease)}
.done-group.collapsed .done-list{display:none}
.done-group.collapsed .done-toggle svg{transform:rotate(-90deg)}
.done-list{display:flex;flex-direction:column;gap:10px;padding-top:6px}

/* enter / new animations */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card-enter{animation:rise .5s var(--ease) backwards}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(108,92,240,.0)}30%{box-shadow:0 0 0 3px rgba(108,92,240,.18),var(--shadow-md)}100%{box-shadow:var(--shadow-sm)}}
.card-new{animation:glow 1.8s var(--ease)}
.card-new::after{
  content:"new";position:absolute;top:11px;right:12px;
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);padding:2px 7px;border-radius:999px;
  animation:fadeOut .6s var(--ease) 2.6s forwards;
}
@keyframes fadeOut{to{opacity:0}}

/* ---------- dock + dump button ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:14px 18px calc(16px + var(--safe-b));
  display:flex;justify-content:center;pointer-events:none;
  background:linear-gradient(180deg,rgba(244,241,234,0),var(--paper) 58%);
}
.dump-btn{
  pointer-events:auto;
  display:inline-flex;align-items:center;gap:11px;
  background:var(--ink);color:#fff;
  font-size:15.5px;font-weight:600;letter-spacing:-.005em;
  padding:15px 26px 15px 20px;border-radius:999px;
  box-shadow:0 8px 28px rgba(28,20,55,.28), 0 2px 6px rgba(28,20,55,.18);
  transition:transform .18s var(--ease), box-shadow .18s;
}
.dump-btn:active{transform:scale(.96)}
.dump-mic{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--accent),#8b78ff);color:#fff;
}

/* ---------- Capture (input) ---------- */
.capture{
  position:fixed;inset:0;z-index:60;
  background:radial-gradient(120% 90% at 50% 0%, #2b2440 0%, #1a1626 60%, #14111e 100%);
  color:#efeafc;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.capture.show{opacity:1;visibility:visible;transform:none}
.capture-glow{
  position:absolute;left:50%;top:34%;width:380px;height:380px;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(124,102,239,.34), rgba(124,102,239,0) 68%);
  filter:blur(8px);pointer-events:none;transition:opacity .4s, transform .6s var(--ease);
}
.capture.live .capture-glow{opacity:1;transform:translate(-50%,-50%) scale(1.18)}
.capture-close{
  position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;z-index:2;
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  color:#cfc7e8;background:rgba(255,255,255,.06);
}
.capture-inner{
  flex:1;display:flex;flex-direction:column;align-items:center;
  padding:0 24px calc(22px + var(--safe-b));
  max-width:520px;margin:0 auto;width:100%;
  justify-content:flex-start;
}
.capture-hint{
  margin:max(64px,11vh) 0 0;text-align:center;
  font-family:Fraunces,serif;font-weight:430;font-size:21px;line-height:1.45;
  color:#d9d2f0;letter-spacing:-.01em;
}
.capture.live .capture-hint{opacity:.0;height:0;margin-top:7vh;transition:.3s}

.orb{
  position:relative;width:128px;height:128px;border-radius:50%;
  margin:38px 0 0;display:grid;place-items:center;
}
.orb-core{
  position:relative;z-index:2;width:96px;height:96px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 35% 30%, #9c8bff, #6c5cf0 70%);
  box-shadow:0 10px 40px rgba(108,92,240,.5), inset 0 2px 8px rgba(255,255,255,.25);
  transition:transform .3s var(--ease);
}
.orb:active .orb-core{transform:scale(.93)}
.orb-ring{
  position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(156,139,255,.5);
  opacity:0;
}
.capture.live .orb-ring{animation:ripple 2.4s var(--ease) infinite}
.capture.live .orb-ring.r2{animation-delay:1.2s}
@keyframes ripple{0%{opacity:.6;transform:scale(.8)}80%{opacity:0;transform:scale(1.7)}100%{opacity:0}}
.capture.live .orb-core{animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.capture.busy .orb-core{animation:breathe 1s ease-in-out infinite}
.capture.busy .orb{opacity:.85}
.orb-label{margin-top:20px;font-size:14px;font-weight:550;color:#b6abdf;letter-spacing:.01em;transition:.25s}
.capture.live .orb-label{color:#efeafc}

.transcript{
  width:100%;margin-top:26px;min-height:54px;flex:1;
  font-size:18px;line-height:1.6;color:#f3eeff;font-weight:430;
  text-align:center;overflow-y:auto;letter-spacing:-.005em;
  display:flex;align-items:flex-start;justify-content:center;
  -webkit-overflow-scrolling:touch;
}
.transcript:empty::before{content:""}
.transcript .interim{color:#9b91c4}

.type-row{
  width:100%;display:flex;gap:9px;align-items:center;margin-top:8px;
}
.type-input{
  flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:#f3eeff;font-size:15px;padding:14px 16px;border-radius:15px;outline:none;
}
.type-input::placeholder{color:#8a80ad}
.type-input:focus{border-color:rgba(156,139,255,.6);background:rgba(255,255,255,.1)}
.type-send{
  width:48px;height:48px;flex:none;border-radius:15px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#cfc7e8;transition:.2s;
}
.type-send.on{background:var(--accent);color:#fff}

.add-btn{
  width:100%;margin-top:14px;
  background:#fff;color:#221f2b;font-size:16px;font-weight:650;letter-spacing:-.01em;
  padding:16px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .18s var(--ease), opacity .25s;
}
.add-btn:active{transform:scale(.98)}
.add-btn:disabled{opacity:.32;box-shadow:none}
.capture-foot{margin-top:14px;font-size:11.5px;color:#7e749f;text-align:center;line-height:1.5}

/* ---------- thinking overlay ---------- */
.thinking{
  position:fixed;inset:0;z-index:80;
  background:radial-gradient(120% 90% at 50% 30%, #241f38, #16121f 70%);
  color:#efeafc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.thinking.show{opacity:1;visibility:visible}
.thinking-orb{display:flex;gap:12px}
.thinking-orb span{
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #9c8bff, #6c5cf0);
  animation:bob 1.2s ease-in-out infinite;
}
.thinking-orb span:nth-child(2){animation-delay:.18s}
.thinking-orb span:nth-child(3){animation-delay:.36s}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-12px);opacity:1}}
.thinking-line{
  font-family:Fraunces,serif;font-size:19px;font-weight:430;color:#d9d2f0;
  letter-spacing:-.01em;transition:opacity .3s;text-align:center;padding:0 30px;
}

/* ---------- about sheet ---------- */
.sheet{
  position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(20,15,30,.4);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
.sheet.show{opacity:1;visibility:visible}
.sheet-card{
  width:100%;max-width:560px;background:var(--surface);
  border-radius:26px 26px 0 0;padding:14px 22px calc(26px + var(--safe-b));
  transform:translateY(20px);transition:transform .4s var(--ease);
  box-shadow:0 -10px 50px rgba(28,20,55,.25);
}
.sheet.show .sheet-card{transform:none}
.sheet-handle{width:38px;height:4px;border-radius:99px;background:var(--line);margin:0 auto 16px}
.sheet-card h2{font-family:Fraunces,serif;font-weight:500;font-size:22px;margin:0 0 12px;letter-spacing:-.01em}
.sheet-card p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 13px}
.sheet-muted{font-size:13px !important;color:var(--muted) !important}
.sheet-reset{
  width:100%;padding:13px;border-radius:14px;background:var(--surface-2);
  border:1px solid var(--line);color:var(--ink-2);font-weight:600;font-size:14px;margin-top:4px;
}
.sheet-done{
  width:100%;padding:14px;border-radius:14px;background:var(--ink);color:#fff;
  font-weight:650;font-size:15px;margin-top:10px;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.08s !important}
}