/* Radar. Quiet by default, loud only where it has earned it.
   Built phone-first: everything here assumes a thumb, not a mouse. */

:root{
  --bg:#0e1116; --panel:#161b23; --panel-2:#1a2029; --line:#252d3a;
  --ink:#e8edf5; --dim:#a3b0c2; --faint:#8a97ab;
  /* --faint was #66738a = 3.61:1 on panel, under WCAG AA. Measured, not eyeballed. */
  --hot:#ff6b4a; --go:#3ddc97; --warn:#ffc857;

  /* one spacing scale, used everywhere, so nothing is arbitrary */
  --s1:6px; --s2:10px; --s3:16px; --s4:24px; --s5:36px;
  --tap:44px;                 /* smallest thing a thumb should have to hit */
  --radius:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:660px;margin:0 auto;padding:var(--s4) var(--s3) 120px}

/* ---------------------------------------------------------------- header ---- */
.hero{margin:0 0 var(--s4)}
.hero h1{margin:0;font-size:28px;line-height:1.15;letter-spacing:-.02em;font-weight:700}
.hero.small h1{font-size:24px}
.hero.small{margin-bottom:var(--s5)}
.kicker{margin:0;color:var(--faint);font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.sub{color:var(--dim);font-size:14px;line-height:1.5;margin:var(--s2) 0 0;max-width:44ch}

/* --------------------------------------------------------------- capture ---- */
.capture{display:block;margin:0 0 var(--s5)}
.capture textarea,
.capture input[type=password]{width:100%;display:block;background:var(--panel);
  border:1px solid var(--line);color:var(--ink);border-radius:var(--radius);
  padding:var(--s3);font:inherit;line-height:1.55;outline:none;resize:vertical}
.capture textarea{min-height:96px;transition:min-height .18s ease}
/* Tap it and it opens up, so you can see the whole brain dump at once. */
.capture textarea:focus{min-height:220px}
.capture textarea::placeholder{color:var(--faint);line-height:1.7}
.capture textarea:focus,
.capture input[type=password]:focus{border-color:var(--dim);background:var(--panel-2)}
.capture-row{display:flex;align-items:stretch;gap:var(--s2);margin:0 0 var(--s2)}
.capture .hint{color:var(--dim);font-size:13px;line-height:1.45;margin:0 0 var(--s2)}
.capture .hint:empty{display:none}

.catch{flex:1 1 0;background:var(--ink);color:var(--bg);border:0;
  border-radius:11px;padding:0 var(--s3);min-height:50px;
  font:600 15.5px/1 inherit;cursor:pointer}
.mic{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s2);min-height:50px;padding:0 var(--s3);background:transparent;color:var(--dim);
  border:1px solid var(--line);border-radius:11px;font:500 15.5px/1 inherit;cursor:pointer}
.mic:hover:not(:disabled){color:var(--ink);border-color:var(--faint)}
.mic:disabled{opacity:.4;cursor:not-allowed}
.mic-dot{width:9px;height:9px;border-radius:50%;background:var(--faint);flex:0 0 auto}
.mic.recording{color:var(--hot);border-color:var(--hot)}
.mic.recording .mic-dot{background:var(--hot);animation:pulse 1.1s ease-in-out infinite}
.mic.thinking{color:var(--warn);border-color:var(--warn)}
.mic.thinking .mic-dot{background:var(--warn);animation:pulse .7s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ------------------------------------------------- the three things (Now) --- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s3) var(--s3) var(--s3);margin-bottom:var(--s3)}
.card.urgent{border-color:var(--hot);box-shadow:0 0 0 1px rgba(255,107,74,.22)}
.card-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s2);font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.proj{color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.why{color:var(--warn);white-space:nowrap;flex:0 0 auto}
.card.urgent .why{color:var(--hot)}
.card h2{margin:var(--s2) 0 4px;font-size:17px;line-height:1.35;
  font-weight:600;letter-spacing:-.01em;overflow-wrap:break-word}

/* action rows wrap onto their own lines instead of squashing */
.row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.row form{margin:0}
button{font:inherit;cursor:pointer}
.go{background:var(--go);color:#08130d;border:0;border-radius:10px;
  padding:0 var(--s3);height:38px;font-weight:600}
.ghost{background:transparent;color:var(--dim);border:1px solid var(--line);
  border-radius:10px;padding:0 var(--s3);height:38px}
.ghost:hover{color:var(--ink);border-color:var(--faint)}
.go.sm,.ghost.sm{height:38px;padding:0 15px;font-size:13.5px;border-radius:10px}

/* ----------------------------------------------------------------- dial ----- */
.dial{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:var(--s2);margin:var(--s5) 0 var(--s3)}
.dial a{text-decoration:none;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:var(--s3) var(--s2);text-align:center;color:var(--dim)}
.dial b{display:block;font-size:21px;color:var(--ink);font-weight:600;line-height:1.2}
.dial span{display:block;font-size:11px;letter-spacing:.03em;margin-top:5px;line-height:1.3}
.dial a.warn b{color:var(--warn)}
.foot{color:var(--faint);font-size:13px;line-height:1.5;margin:var(--s3) 0 0}
.empty{color:var(--dim);font-size:15px;line-height:1.55;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:var(--s3)}

/* -------------------------------------------------------------- the list ---- */
.group{margin-bottom:var(--s5)}
.group h3{display:flex;align-items:center;gap:var(--s2);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--faint);
  margin:0 0 var(--s3);font-weight:700}
.group h3 .n{color:var(--faint);opacity:.55;font-weight:600}

/* Each task is a block, not a cramped row: title on its own line, actions
   underneath. On a phone there is no room for both side by side. */
.line{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:var(--s3);margin-bottom:var(--s2);overflow:hidden}
.line.slip{border-left:3px solid var(--warn)}
.line-top{display:flex;align-items:flex-start;gap:var(--s2)}
.line .t{flex:1;min-width:0;font-size:15.5px;line-height:1.4;overflow-wrap:break-word}
.line .meta{display:block;font-size:12px;color:var(--faint);margin-top:var(--s1);line-height:1.5}
.line.wait .t,.line.dropped .t{color:var(--dim)}
.line.dropped .t{text-decoration:line-through}
.acts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3);align-items:center}
.acts form{margin:0}
.tick{flex:0 0 auto;width:26px;height:26px;background:transparent;border:1.5px solid var(--faint);
  border-radius:50%;color:transparent;font-size:14px;line-height:1;padding:0;margin-top:2px}
.tick:hover{border-color:var(--go);color:var(--go)}

/* ------------------------------------------------------------ scheduling ---- */
.schedwrap{display:inline-block}
.schedwrap summary{list-style:none;display:inline-flex;align-items:center;height:38px;
  padding:0 15px;background:transparent;color:var(--dim);border:1px solid var(--line);
  border-radius:10px;cursor:pointer;font-size:13.5px}
.schedwrap summary::-webkit-details-marker{display:none}
.schedwrap summary:hover{color:var(--ink);border-color:var(--faint)}
.schedform{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s2);align-items:center}
.schedform input,.schedform select{background:var(--bg);border:1px solid var(--line);
  color:var(--ink);border-radius:9px;padding:8px 10px;font:inherit;font-size:14px}
.sched{color:var(--go);font-size:12.5px}

/* ----------------------------------------------------------------- tabs ----- */
.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:var(--s1);
  background:rgba(14,17,22,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:var(--s2) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom))}
.tabs a{color:var(--faint);text-decoration:none;font-size:14px;line-height:1;
  padding:12px 16px;border-radius:10px}
.tabs a.on{color:var(--ink);background:var(--panel)}

@media (max-width:380px){
  .hero h1{font-size:29px}
  .capture-row{flex-direction:column}
  .tabs a{padding:12px 11px;font-size:13.5px}
}

/* ================= the week ahead ================= */
/* A workload glance, not a chart: seven days, how heavy each one is.
   Colour repeats the project identity that is always spelled out in words
   further down the page, so nothing here is carried by colour alone. */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s1);
  margin:0 0 var(--s2)}
.day{background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:var(--s2) 4px;text-align:center;min-height:74px;
  display:flex;flex-direction:column;align-items:center;gap:3px}
.day.is-today{border-color:var(--dim);background:var(--panel-2)}
.day.busy{border-color:#3a4454}
.dow{font-size:10px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase}
.dnum{font-size:16px;font-weight:600;line-height:1.1}
.day.is-today .dnum{color:var(--ink)}
.dots{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;align-items:center;
  margin-top:2px;min-height:8px}
.dots i{width:6px;height:6px;border-radius:50%;display:block}
.dots i.none{background:transparent;border:1px solid var(--line)}
.dots .more{font-size:9px;color:var(--faint);line-height:1}
.overdue-note{color:var(--hot);font-size:12.5px;margin:0 0 var(--s5)}

/* ================= status pills ================= */
/* Every pill carries its own word. Colour is the second signal, never the only one. */
.pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:var(--s2)}
.pill{font-size:11.5px;line-height:1;padding:5px 9px;border-radius:999px;
  border:1px solid transparent;white-space:nowrap;font-weight:500}
.pill.bad{color:#ffb3a3;background:rgba(255,107,74,.13);border-color:rgba(255,107,74,.32)}
.pill.warn{color:#ffd98a;background:rgba(255,200,87,.11);border-color:rgba(255,200,87,.28)}
.pill.good{color:#8ff0c4;background:rgba(61,220,151,.11);border-color:rgba(61,220,151,.26)}
.pill.soft{color:var(--dim);background:rgba(255,255,255,.04);border-color:var(--line)}
.pill.wait{color:var(--faint);background:transparent;border-color:var(--line)}

/* ================= project identity ================= */
.pdot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto}
.group h3{color:var(--dim)}
/* the project's colour as a spine down the left of each of its tasks */
.line{border-left:3px solid var(--proj,transparent)}
.line.slip{border-left-color:var(--warn)}

@media (max-width:380px){
  .day{min-height:66px;padding:7px 2px}
  .dnum{font-size:15px}
}

/* the Now cards get the project spine too, and nothing else: this screen
   stays deliberately plain so the decision is easy */
.card{border-left:3px solid var(--proj,var(--line))}
.card.urgent{border-left-color:var(--hot)}
.proj{display:inline-flex;align-items:center;gap:6px}

/* ================= one task, folded ================= */
/* Actions stay hidden until you tap the task. A row of buttons on every line
   is what made the list feel cluttered. */
details.line{padding:0;overflow:hidden}
details.line summary{list-style:none;cursor:pointer;padding:var(--s3);display:block}
details.line summary::-webkit-details-marker{display:none}
details.line summary:hover{background:var(--panel-2)}
details.line[open] summary{border-bottom:1px solid var(--line)}
details.line .t{display:block;font-size:15.5px;line-height:1.4;overflow-wrap:break-word}
details.line .pills{margin-top:7px}
details.line .acts{padding:var(--s3);margin-top:0}
.pill.time{color:var(--ink);background:rgba(255,255,255,.07);border-color:var(--line);
  font-variant-numeric:tabular-nums;font-weight:600}

/* ================= day groups on the Week page ================= */
.daygroup{margin-bottom:var(--s4)}
.dayhead{font-size:12px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--faint);margin:0 0 var(--s2);font-weight:700}
.dayhead.is-today{color:var(--ink)}
.dayhead.late{color:var(--hot)}
.week{margin-bottom:var(--s4)}

/* the Add tab is the one loud thing in the bar, because it is the one you
   reach for without thinking */
.tabs a.add{color:var(--ink);background:var(--panel);border:1px solid var(--line)}
.tabs a.add.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.recent h3{margin-top:var(--s4)}

/* ================= the card, rebuilt ================= */
/* Overdue must read differently before a single word is processed. */
.card{position:relative;transition:border-color .15s ease}
.card .when{margin:0 0 var(--s3);font-size:14px;color:var(--dim);
  font-variant-numeric:tabular-nums}
.card .why{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.card.u-upcoming .why{color:var(--dim)}
.card.u-today{border-left-color:var(--warn)}
.card.u-today .why{color:var(--warn)}
.card.u-overdue{border-color:rgba(255,107,74,.45);border-left-color:var(--hot);
  background:linear-gradient(180deg,rgba(255,107,74,.07),transparent 60%),var(--panel)}
.card.u-overdue .why{color:var(--hot)}
.card.u-overdue .when{color:#ffb3a3}

/* one filled action, one quiet one, everything else behind the dots */
.go{min-height:42px;padding:0 var(--s4);font-size:15px}
.ghost.quiet{border-color:transparent;color:var(--dim);min-height:42px}
.ghost.quiet:hover{border-color:var(--line);color:var(--ink)}
.more{margin-left:auto}
.more summary{list-style:none;cursor:pointer;color:var(--faint);
  padding:0 12px;min-height:42px;display:inline-flex;align-items:center;
  border-radius:10px;letter-spacing:.08em}
.more summary::-webkit-details-marker{display:none}
.more summary:hover{color:var(--ink);background:var(--panel-2)}
.morerow{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2);
  padding-top:var(--s2);border-top:1px solid var(--line);width:100%}

/* ================= the two missing states ================= */
.done-moment,.first-run{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s5) var(--s3);text-align:center}
.tickmark{width:52px;height:52px;border-radius:50%;background:var(--go);color:#08130d;
  font-size:26px;line-height:52px;margin:0 auto var(--s3);font-weight:700}
.done-moment .big,.first-run .big{margin:0 0 var(--s2);font-size:18px;font-weight:600}
.done-moment .small,.first-run .small{margin:0;color:var(--dim);font-size:14px;
  line-height:1.55;max-width:38ch;margin-inline:auto}
.first-run em{color:var(--ink);font-style:normal}
.big-go{display:inline-block;margin-top:var(--s4);text-decoration:none;
  line-height:42px;border-radius:11px}

/* ================= All, as a project browser ================= */
.projrow{background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--proj);border-radius:12px;margin-bottom:var(--s2);
  overflow:hidden}
.projrow summary{list-style:none;cursor:pointer;padding:var(--s3);
  display:flex;align-items:center;gap:var(--s2)}
.projrow summary::-webkit-details-marker{display:none}
.projrow summary:hover{background:var(--panel-2)}
.pname{display:flex;align-items:center;gap:var(--s2);font-size:15.5px;font-weight:600;
  flex:0 0 auto}
.pmeta{flex:1;min-width:0;color:var(--faint);font-size:12px;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcount{flex:0 0 auto;min-width:26px;height:26px;border-radius:13px;background:var(--panel-2);
  border:1px solid var(--line);color:var(--dim);font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;padding:0 7px}
.projbody{padding:0 var(--s2) var(--s2)}
.projbody details.line{background:transparent;border:0;border-left:0;
  border-top:1px solid var(--line);border-radius:0;margin:0}
.h-sub{display:block;font-size:13px;font-weight:400;color:var(--faint);margin-top:5px;
  letter-spacing:0;text-transform:none}

/* ================= the floating add button ================= */
.fab{position:fixed;right:16px;bottom:calc(74px + env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:50%;background:var(--go);color:#08130d;
  font-size:30px;font-weight:400;line-height:54px;text-align:center;text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.45);z-index:40}
.fab:active{transform:scale(.94)}

/* week day tiles are links now */
a.day{text-decoration:none;color:inherit}
a.day.has{border-color:#3a4454}
a.day:active{background:var(--panel-2)}

/* ================= Add: the field is the screen ================= */
.cap{margin:0 0 var(--s5)}
.cap-top{display:flex;gap:var(--s2);align-items:flex-start}
.cap textarea{flex:1;min-height:56px;background:var(--panel);border:1px solid var(--dim);
  color:var(--ink);border-radius:var(--radius);padding:var(--s3);font:inherit;
  font-size:16px;line-height:1.5;outline:none;resize:none}
.cap textarea::placeholder{color:var(--faint)}
.cap textarea:focus{border-color:var(--go);background:var(--panel-2)}
/* a voice note is a one-handed action on the move: give it a real target */
.micball{flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:var(--go);
  border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.micball .mic-dot{width:16px;height:16px;border-radius:50%;background:#08130d}
.micball.recording{background:var(--hot)}
.micball.recording .mic-dot{border-radius:3px;animation:pulse 1.1s ease-in-out infinite}
.micball.thinking{background:var(--warn)}
.micball.thinking .mic-dot{animation:pulse .7s ease-in-out infinite}
.micball:disabled{opacity:.35;cursor:not-allowed}
.catch.wide{width:100%;margin-top:var(--s3);min-height:50px}

.parsed{margin:var(--s3) 0 0;font-size:13.5px;color:var(--faint);line-height:1.6;min-height:1px}
.parsed.on{color:var(--dim)}
.pline{display:block}
.pline b{color:var(--ink);font-weight:600}
.pline span{color:var(--dim)}
.pline .books{color:var(--go)}

.line.just .line-top{align-items:flex-start}
.binbtn{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:transparent;
  border:1px solid var(--line);color:var(--faint);font-size:17px;line-height:1;padding:0}
.binbtn:hover{color:var(--hot);border-color:var(--hot)}

/* ------------------------------------------------------- background line ----
   Commitments announce themselves ONCE, quietly, as a line rather than a card.
   Deliberately the lowest-contrast interactive thing on the screen: it is
   reassurance that Radar is holding them, not a decision asking to be made. */
.background-line{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2);margin:var(--s4) 0 0;padding:var(--s3);min-height:var(--tap);
  background:transparent;border:1px dashed var(--line);border-radius:var(--radius);
  color:var(--faint);font-size:14px;text-decoration:none}
.background-line:active{background:var(--panel)}
.background-line .chev{color:var(--dim);font-size:18px;line-height:1}

/* The purpose line: every screen says what it is for, in one sentence. */
.purpose{margin:0 0 var(--s4);color:var(--dim);font-size:14px;line-height:1.55;
  max-width:52ch}

/* A commitment is shown in a lower key than a task. It is not competing. */
.line.commit{opacity:.92}
.line.commit .t{font-weight:500}