/* ============================================================
   Nelawa slice — deadline router, Held view, the amber "one lamp lit"
   deadline treatment, and the resurface "Back" marker.
   Loaded last so it can lean on the token layer in nudge.css.
   Amber (--nudge) is the ONLY fierce signal. No red anywhere.
   ============================================================ */

/* ---------- Deadline router (Clarify) ---------- */
.router-lead {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 18px 0 12px;
  letter-spacing: -0.01em;
}
.router-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 6px;
}
.router-opt {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  text-align: left;
  padding: 15px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .1s ease;
}
.router-opt:hover { transform: translateY(-1px); }
.router-opt:active { transform: translateY(0); }
.router-ic {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  margin-top: 1px;
}
.router-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.router-txt b { font-size: 15px; font-weight: 600; color: var(--ink); }
.router-txt span { font-size: 13px; color: var(--ink-soft); }

/* Deadline path = amber (fierce, kept in view) */
.router-opt.deadline:hover { border-color: var(--nudge); background: var(--nudge-bg); }
.router-opt.deadline .router-ic { background: var(--nudge-bg); color: var(--nudge-text); }
/* Defer path = calm dusk (set aside, no urgency) */
.router-opt.defer:hover { border-color: var(--action); background: var(--focus-wash); }
.router-opt.defer .router-ic { background: var(--focus-wash); color: var(--action-deep); }

.clarify-daterow .clarify-date { width: 100%; }

/* ---------- The amber "one lamp lit" — a task with a real deadline ----------
   Scarce by design: only hard deadlines get the amber edge. Everything else
   is calm dusk/ivory. This is the single warm point on the board. */
.task-card.has-deadline { border-left: 3px solid var(--nudge); }
.task-card.human-stakes { border-left: 3px solid var(--nudge); }
.stakes-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  color: var(--nudge-text); background: var(--nudge-bg);
  border-radius: 999px; padding: 3px 10px;
}
.stakes-chip svg { color: var(--nudge-text); }

/* Depended-on is now a small amber heart glyph, not a full pill (calmer cards).
   The pill copy still shows in the card's expanded detail / tooltip. */
.stakes-heart { display: inline-flex; align-items: center; line-height: 0; }
.stakes-heart svg { fill: var(--nudge); stroke: var(--nudge); }

/* Calm nav presence dots (Nav-Signals v0.3): present/absent only — never a count,
   never red, never the action amber. One soft sage hue that reads “here”, recedes
   when you’re not looking. Only on items whose count can reach zero. */
.nav-dot { flex: 0 0 auto; margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #6E8B7B; align-self: center; }
@media (prefers-reduced-motion: no-preference) { .nav-dot { animation: navDotIn 0.2s ease-out; } }
@keyframes navDotIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.due-chip.due-chip-btn {
  background: var(--nudge-bg);
  color: var(--nudge-text);
  border-color: transparent;
}
.due-chip.due-chip-btn:hover { background: var(--nudge); color: #3d2600; }
/* No shame for a passed deadline — same amber, never red. It's a lamp, not an alarm. */
.due-chip.due-chip-btn.overdue { background: var(--nudge); color: #3d2600; }

/* ---------- Resurfaced: the gentle "Back" marker ---------- */
.back-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--action-deep);
  background: var(--focus-wash);
  border-radius: 999px;
  padding: 3px 10px;
}
.task-card.is-back { border-left: 3px solid var(--action); }

/* ---------- Held view ---------- */
.held-list { display: flex; flex-direction: column; gap: 26px; margin-top: 8px; }
.held-group-h {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--serif);
  font-size: 15px; font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.held-group-n {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600;
  color: var(--ink-faint);
  background: var(--muted);
  border-radius: 999px;
  padding: 1px 8px;
}
.held-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 9px;
  box-shadow: var(--shadow);
}
.held-when {
  flex: 0 0 92px;
  display: flex; flex-direction: column; gap: 1px;
  padding-right: 15px;
  border-right: 1px solid var(--line);
}
.held-when-day { font-size: 13px; font-weight: 600; color: var(--action-deep); }
.held-when-rel { font-size: 11.5px; color: var(--ink-faint); }
.held-body { flex: 1 1 auto; min-width: 0; }
.held-text { margin: 0 0 5px; font-size: 15px; color: var(--ink); line-height: 1.35; }
.held-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.held-confirm-q { font-size: 13px; color: var(--ink-soft); margin-right: 2px; }
.held-menu-wrap { display: flex; align-items: center; gap: 6px; }

/* Group headers now carry a title span + count (three return-trigger groups) */
.held-group-title { flex: 0 1 auto; }
.held-group-h svg { flex: 0 0 auto; color: var(--ink-faint); }
.held-group-sub { margin: -6px 0 12px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.45; }

/* "Why it's waiting" column — the Waiting / Someday twin of .held-when */
.held-why {
  flex: 0 0 92px;
  display: flex; flex-direction: column; gap: 3px;
  padding-right: 15px;
  border-right: 1px solid var(--line);
  color: var(--ink-faint);
}
.held-why svg { color: currentColor; }
.held-why-label { font-size: 12.5px; font-weight: 600; }
.held-why-waiting { color: var(--action-deep); }
.held-why-someday { color: var(--ink-faint); }
.held-letgo { font-size: 12.5px; color: var(--ink-faint); }
.held-letgo:hover { color: var(--action-deep); }

/* "Show all / show fewer" — a deliberate deeper tap, never the front door */
.held-more-link {
  appearance: none; border: none; background: none;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--action-deep); cursor: pointer;
  padding: 8px 2px 2px; margin-top: 2px;
}
.held-more-link:hover { text-decoration: underline; }

/* Someday collapses to a calm count — opened deliberately */
.held-group-toggle {
  appearance: none; width: 100%;
  display: flex; align-items: center; gap: 9px;
  border: none; background: none; cursor: pointer;
  font-family: var(--serif); font-size: 15px; font-weight: 600;
  color: var(--ink-soft); letter-spacing: -0.01em;
  margin: 0 0 12px; padding: 0;
  text-align: left;
}
.held-group-toggle:hover { color: var(--ink); }
.held-group-toggle svg { flex: 0 0 auto; color: var(--ink-faint); }
.held-toggle-hint { margin-left: auto; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink-faint); }
.held-chev { transition: transform .16s ease; }
.held-chev.up { transform: rotate(180deg); }

@media (max-width: 640px) {
  .held-item { flex-wrap: wrap; gap: 10px; }
  .held-when, .held-why {
    flex-basis: 100%;
    flex-direction: row; align-items: baseline; gap: 8px;
    padding-right: 0; border-right: none;
  }
  .held-actions { flex-basis: 100%; justify-content: flex-end; }
}

/* ---------- "That was enough" — the end-of-day close ---------- */
.enough-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 4px 0 0;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.enough-btn:hover { background: var(--nudge-bg); color: var(--nudge-text); border-color: var(--nudge); }

.enough-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 32, 43, 0.44);
  display: grid; place-items: center;
  padding: 24px;
  animation: enoughFade .2s ease;
}
@keyframes enoughFade { from { opacity: 0; } to { opacity: 1; } }
.enough-card {
  width: min(440px, 100%);
  background: var(--paper);
  border-radius: 22px;
  padding: 30px 28px 24px;
  box-shadow: 0 24px 60px -18px rgba(20,32,43,0.5);
  text-align: center;
  animation: enoughRise .26s cubic-bezier(.2,.8,.3,1);
}
@keyframes enoughRise { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.enough-glow {
  width: 60px; height: 60px; margin: 0 auto 16px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--nudge-text);
  background: radial-gradient(circle at 50% 45%, var(--nudge-bg), transparent 70%);
}
.enough-glow::before {
  content: ""; position: absolute;
  width: 60px; height: 60px; border-radius: 50%;
  box-shadow: 0 0 44px 8px rgba(242, 171, 61, 0.4);
}
.enough-title { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.015em; }
.enough-sub { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 20px; }
.enough-fierce {
  text-align: left;
  background: var(--nudge-bg);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 0 18px;
}
.enough-fierce-h { font-size: 13px; font-weight: 600; color: var(--nudge-text); margin: 0 0 10px; display: flex; align-items: center; gap: 7px; }
.enough-fierce-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.enough-fierce-row + .enough-fierce-row { border-top: 1px solid rgba(138,90,18,0.14); }
.enough-fierce-txt { flex: 1 1 auto; font-size: 14px; color: var(--ink); min-width: 0; }
.enough-fierce-acts { display: flex; gap: 6px; flex: 0 0 auto; }
.enough-mini {
  font-size: 12px; font-weight: 600;
  border-radius: 999px; padding: 4px 10px;
  border: 1px solid var(--line-strong); background: var(--paper);
  color: var(--ink-soft); cursor: pointer;
}
.enough-mini.keep:hover { border-color: var(--nudge); color: var(--nudge-text); background: var(--nudge-bg); }
.enough-mini.let:hover { border-color: var(--action); color: var(--action-deep); background: var(--focus-wash); }
.enough-actions { display: flex; flex-direction: column; gap: 9px; }
.enough-primary {
  width: 100%; padding: 12px; border-radius: 12px; border: none;
  background: var(--action); color: var(--on-action);
  font-family: var(--sans); font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .16s ease;
}
.enough-primary:hover { background: var(--action-hover); }
.enough-dismiss { background: none; border: none; color: var(--ink-faint); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px; }
.enough-dismiss:hover { color: var(--ink-soft); }

/* ---------- Booking hand-off modal ---------- */
.book-card { text-align: left; }
.book-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--nudge-text);
  background: var(--nudge-bg);
  padding: 5px 11px; border-radius: 999px;
  margin: 0 0 14px;
}
.book-kicker svg { width: 14px; height: 14px; }
.book-card .enough-title { text-align: left; }
.book-sub { text-align: left; margin-bottom: 20px; }
.book-field { margin: 0 0 15px; }
.book-label {
  display: block; font-size: 12.5px; font-weight: 700;
  color: var(--ink-soft); margin: 0 0 6px; letter-spacing: .01em;
}
.book-input {
  width: 100%; box-sizing: border-box;
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: 11px;
  padding: 10px 13px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.book-input:focus {
  outline: none; border-color: var(--action);
  box-shadow: 0 0 0 3px var(--focus-wash);
}
.book-when { display: flex; gap: 9px; }
.book-date { flex: 1 1 auto; min-width: 0; }
.book-time { flex: 0 0 128px; }
.book-daynote { font-size: 12.5px; color: var(--ink-faint); margin: 7px 1px 0; font-weight: 600; }
.book-actions { margin-top: 22px; }


/* ---------- Release-a-fierce confirm (a conscious let-go, never shame) ---------- */
.let-go-confirm {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--nudge-bg);
  border-radius: 12px;
  padding: 11px 13px;
  margin-top: 8px;
}
.let-go-confirm p { margin: 0; flex: 1 1 160px; font-size: 13px; color: var(--nudge-text); }

/* Recurring tasks reuse dueDate as a NEXT-OCCURRENCE cadence, not a fierce
   deadline — so their date chip stays calm dusk, never amber. The repeat
   badge is the real signal. */
.due-chip.due-chip-btn.is-cadence {
  background: var(--focus-wash);
  color: var(--action-deep);
}
.due-chip.due-chip-btn.is-cadence:hover { background: var(--focus-wash); filter: brightness(0.97); color: var(--action-deep); }

/* ---------- Back-pill dismiss + set-aside panel (board task actions) ---------- */
.back-pill-x {
  display: inline-grid; place-items: center;
  margin-left: 3px; padding: 2px;
  border: none; background: none;
  color: var(--action-deep); opacity: .55;
  cursor: pointer; border-radius: 50%;
}
.back-pill-x:hover { opacity: 1; background: rgba(29,70,112,0.12); }
.aside-panel .aside-lead { margin: 0 0 9px; font-size: 14px; font-weight: 600; color: var(--ink); }
.aside-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 11px; }
.aside-note { margin: 9px 0 0; font-size: 12px; color: var(--ink-faint); line-height: 1.45; }
.aside-warn {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 12px;
  padding: 11px 13px;
  background: var(--nudge-bg);
  border-radius: 12px;
  font-size: 13px; line-height: 1.45;
  color: var(--nudge-text);
}
.aside-warn svg { flex: 0 0 auto; margin-top: 1px; }

/* ---------- Not-now panel: choose Waiting or Someday (Task-card "Later") ----------
   Waiting is a deliberate two-step so an item never lands in Waiting with no
   context by accident — the note is optional, but skipping it is an explicit choice. */
.notnow-choices { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 12px; }
.notnow-choice {
  display: flex; align-items: flex-start; gap: 12px;
  width: 100%; text-align: left;
  padding: 12px 14px;
  border-radius: 13px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .1s ease;
}
.notnow-choice:hover { transform: translateY(-1px); border-color: var(--action); background: var(--focus-wash); }
.notnow-choice svg { flex: 0 0 auto; margin-top: 2px; color: var(--action-deep); }
.nnc-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.nnc-txt b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.nnc-txt span { font-size: 12.5px; color: var(--ink-soft); }
.notnow-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.notnow-foot .linklike { font-size: 12.5px; color: var(--ink-faint); }
.notnow-foot .linklike:hover { color: var(--action-deep); }

/* ---------- Capture → Clarify hand-off (calm summary + a choice, never a nag) ---------- */
.handoff {
  margin: 6px 0 16px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow);
  animation: handoffRise .28s cubic-bezier(.2,.8,.3,1);
}
@keyframes handoffRise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.handoff-head { display: flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.handoff-head svg { color: var(--action-deep); flex: 0 0 auto; }
.handoff-body { margin: 8px 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.handoff-body b { color: var(--ink); font-weight: 700; }
.handoff-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   Calendar "room" view — up-next hero + open-time windows.
   The calendar shows appointments only; the OPEN TIME between
   them is the first-class element. Dusk-blue throughout (amber
   is reserved for deadlines, which are NOT on the calendar).
   ============================================================ */

/* Up next — the single next appointment */
.cald-upnext {
  border-radius: 16px;
  padding: 14px 17px;
  margin: 2px 0 18px;
  background: var(--focus-wash);
  border: 1px solid rgba(29, 70, 112, 0.16);
}
.cald-upnext.is-event { background: rgba(91, 123, 176, 0.12); }
.cald-upnext.is-none { background: var(--muted); border-color: transparent; }
.cun-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--action-deep);
}
.cald-upnext.is-none .cun-label { color: var(--ink-faint); }
.cun-row { display: flex; align-items: baseline; gap: 11px; margin-top: 7px; }
.cun-time {
  font-family: var(--serif); font-weight: 700; font-size: 20px;
  color: var(--action-deep); font-variant-numeric: tabular-nums;
}
.cun-title { font-size: 17px; font-weight: 600; color: var(--ink); }
.cun-rel { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.cun-none { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-soft); }

/* Open window — breathing room, not a slot to fill */
.cald-window {
  margin: 4px 0 4px 82px;
  padding: 12px 15px;
  border-radius: 12px;
  border: 1.5px dashed rgba(24, 62, 98, 0.18);
  background: transparent;
}
.cald-window.is-now {
  border-style: solid;
  border-color: rgba(29, 70, 112, 0.38);
  background: var(--focus-wash);
}
.cw-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.cw-open { font-family: var(--serif); font-weight: 700; font-size: 15.5px; color: var(--action-deep); }
.cw-span { font-size: 12px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cw-now {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--action-deep);
  background: rgba(29, 70, 112, 0.13);
  padding: 2px 8px; border-radius: 999px;
}
.cw-breathe { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ink-faint); font-style: italic; }
.cald-window.is-now .cw-breathe { color: var(--action-deep); font-style: normal; font-weight: 600; }

@media (max-width: 640px) {
  .cald-window { margin-left: 0; }
}

/* ============================================================
   Clarify — batched review (a few cards at once, per-card chat)
   ============================================================ */
.clarify-stage-batch { max-width: 620px; }

.clarify-batch { display: flex; flex-direction: column; gap: 14px; }

.clarify-batch-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 18px;
}
.clarify-foot-count { font-size: 13px; font-weight: 600; color: var(--ink-faint); }

/* "Talk it through" — the per-card chat opt-in (replaces the global mode toggle) */
.clarify-actions-left { display: flex; align-items: center; gap: 4px; }
.clarify-talk {
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--focus-deep);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 8px; border-radius: 9px;
  transition: background .14s ease, color .14s ease;
}
.clarify-talk:hover { background: var(--focus-wash); }
.clarify-talk:disabled { opacity: 0.5; cursor: default; }
.clarify-talk svg { flex: 0 0 auto; }
.clarify-talk-back { margin: 0 0 12px; padding: 5px 8px 5px 5px; color: var(--ink-faint); }
.clarify-talk-back:hover { color: var(--ink-soft); background: var(--nudge-bg); }

/* Embedded chat sits inside a card — drop the standalone animation/spacing */
.clarify-chat.embedded { animation: none; margin: 0; }
.clarify-chat.embedded .chat-thread { gap: 10px; }
.clarify-chat.embedded .chat-compose { margin-top: 10px; }

/* ============================================================
   Connect — Google Calendar appointment-sync toggle
   ============================================================ */
.conn-sync { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-strong); }
.conn-sync-toggle { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.conn-sync-hint { margin: 8px 0 0; font-size: 12px; color: var(--ink-faint); line-height: 1.5; }

/* ============================================================
   Capture hand-off — inline clarify for a single new question
   ============================================================ */
.handoff-inline-clarify { margin-top: 6px; }
.handoff-inline-clarify .clarify-card {
  box-shadow: none;
  border: 1px solid var(--line-strong);
  animation: none;
}
.handoff-earlier {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  margin-top: 12px; padding: 4px 0;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  color: var(--ink-faint);
}
.handoff-earlier:hover { color: var(--focus-deep); text-decoration: underline; }

/* Calendar detail — remove-appointment confirm */
.cal-detail-confirm-q {
  margin: 6px 0 12px; font-size: 13.5px; line-height: 1.5;
  color: var(--ink-soft); text-wrap: pretty;
}

/* Board 2-minute quick-jobs popup */
.twomin-card { text-align: left; }
.twomin-card .enough-title, .twomin-card .enough-sub { text-align: left; }
.twomin-list { display: flex; flex-direction: column; gap: 0; margin: 6px 0 18px; }
.twomin-row { display: flex; align-items: center; gap: 11px; padding: 10px 4px; border-top: 1px solid var(--line); }
.twomin-row:first-child { border-top: none; }
.twomin-txt { flex: 1; font-size: 14.5px; color: var(--ink); min-width: 0; }
.twomin-row .task-check { flex: 0 0 auto; }

/* ============================================================
   @Talk to · person  +  Partner sharing  (slice 2)
   Dusk (--focus-*) marks the "people" dimension — calm, not fierce.
   ============================================================ */

/* the context chip when a task is @Talk to — interactive */
.talk-chip {
  appearance: none; cursor: pointer; font-family: var(--sans);
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--focus-deep);
  background: var(--focus-wash); border: 1px solid transparent;
  border-radius: 99px; padding: 2px 10px 2px 8px;
  transition: border-color .13s ease, background .13s ease;
}
.talk-chip svg { color: var(--focus-deep); flex: 0 0 auto; opacity: .85; }
.talk-chip:hover { border-color: var(--focus); }
.talk-chip.empty { color: var(--ink-soft); background: transparent; border: 1px dashed var(--line-strong); }
.talk-chip.empty svg { color: var(--ink-faint); }
.talk-chip.empty:hover { color: var(--focus-deep); border-color: var(--focus); border-style: solid; }

/* "shared to their board" marker on the owner's card */
.shared-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  color: var(--focus-deep); background: var(--focus-wash);
  border-radius: 99px; padding: 2px 9px 2px 7px;
}
.shared-pill svg { flex: 0 0 auto; opacity: .9; }

/* shared ↗ folded into the @Talk to chip (one person, one name) */
.talk-shared { display: inline-flex; align-items: center; margin-left: 1px; opacity: .85; }
.talk-shared svg { color: var(--focus-deep); }

/* D5·B — inline "share to their board?" prompt shown right after picking partner */
.talk-share-ask { width: 100%; }
.talk-share-ask p { font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 0 0 10px; text-wrap: pretty; }
.tsa-actions { display: flex; align-items: center; gap: 9px; }

/* inline editor in the card-actions row */
.talk-edit { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.talk-edit-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.talk-edit-row .step-input { flex: 1 1 160px; min-width: 0; }

.talk-partner-pick {
  align-self: flex-start;
  appearance: none; cursor: pointer; font-family: var(--sans);
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--focus-deep);
  background: var(--focus-wash); border: 1px solid transparent;
  border-radius: 99px; padding: 6px 13px 6px 11px;
  transition: border-color .13s ease;
}
.talk-partner-pick:hover { border-color: var(--focus); }
.talk-partner-pick svg { flex: 0 0 auto; }
.tpp-tag { font-size: 11px; font-weight: 600; color: var(--ink-faint); }

.talk-share-btn {
  align-self: flex-start;
  appearance: none; cursor: pointer; font-family: var(--sans);
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; color: var(--bg, #FEF8EB);
  background: var(--action); border: none;
  border-radius: 10px; padding: 9px 15px;
  box-shadow: var(--shadow);
  transition: background .13s ease, transform .1s ease;
}
.talk-share-btn:hover { background: var(--action-hover); }
.talk-share-btn:active { transform: scale(.98); }
.talk-share-btn svg { flex: 0 0 auto; }

.talk-share-row.shared {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 13px; font-weight: 600; color: var(--focus-deep);
}
.talk-share-row.shared svg { color: var(--focus-deep); flex: 0 0 auto; }

.talk-share-hint {
  align-self: flex-start;
  appearance: none; border: none; background: none; cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  color: var(--ink-faint); padding: 2px 0; text-align: left;
}
.talk-share-hint:hover { color: var(--focus-deep); text-decoration: underline; }

/* Settings — Partner section */
.partner-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 4px;
}
.partner-av {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--focus-wash); color: var(--focus-deep);
}
.partner-meta { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.partner-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.partner-email { font-size: 12.5px; color: var(--ink-soft); }
.partner-status { font-size: 11.5px; font-weight: 600; color: var(--ink-faint); margin-top: 2px; }
.partner-status.on { color: var(--focus-deep); }
.partner-card .x {
  flex: 0 0 auto; appearance: none; border: none; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--ink-faint); padding: 2px 6px; border-radius: 8px;
}
.partner-card .x:hover { color: var(--ink); background: var(--soft-06); }
.partner-add { flex-wrap: wrap; }

/* "Who's it for?" — child chooser (tags to a defined child, always removable) */
.who-edit { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.who-edit-lead { font-size: 13px; font-weight: 700; color: var(--ink); }
.who-edit-hint { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.who-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.who-chip {
  appearance: none; cursor: pointer; font-family: var(--sans);
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: 99px; padding: 6px 14px;
  transition: border-color .13s ease, color .13s ease, background .13s ease;
}
.who-chip:hover { border-color: var(--ink-faint); color: var(--ink); }
.who-chip.on { background: var(--focus-wash); border-color: var(--focus); color: var(--focus-deep); }
.who-else { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.who-else .step-input { flex: 1 1 160px; min-width: 0; }
.who-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ============================================================
   Today — Place & Energy lenses, surface two-minute wins,
   Out & about bundle, persistent capture bar (2026-07-08).
   Palette stays within Nelawa: dusk-blue workhorse, scarce amber.
   ============================================================ */

/* the two lens controls */
.td-lenses { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 18px; flex-wrap: wrap; }
.td-place { display: inline-flex; gap: 3px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 12px; padding: 4px; }
.td-place-btn { appearance: none; border: none; background: transparent; cursor: pointer; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink-soft); padding: 8px 14px; border-radius: 9px; display: inline-flex; align-items: center; gap: 7px; transition: background .14s ease, color .14s ease; }
.td-place-btn svg { flex: 0 0 auto; }
.td-place-btn:hover { color: var(--ink); }
.td-place-btn.on { background: var(--focus-wash); color: var(--focus-deep); }
.td-place-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nudge); flex: 0 0 auto; margin-left: 1px; }
.td-quiet-btn { appearance: none; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 99px; padding: 8px 14px; display: inline-flex; align-items: center; gap: 7px; transition: background .14s ease, color .14s ease, border-color .14s ease; }
.td-quiet-btn svg { flex: 0 0 auto; }
.td-quiet-btn:hover { color: var(--ink); }
.td-quiet-btn.on { background: color-mix(in srgb, var(--focus) 12%, var(--paper)); border-color: color-mix(in srgb, var(--focus) 34%, var(--line-strong)); color: var(--focus-deep); }

/* two-minute wins — a calm surface card */
.td-qwins { background: var(--paper); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); padding: 5px 15px 6px; margin: 0 0 18px; }
.td-qwins-lbl { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); margin: 11px 0 2px; }
.td-qwins-lbl svg { color: var(--done); flex: 0 0 auto; }
.td-qwins-lbl .dim { font-weight: 600; letter-spacing: 0.01em; text-transform: none; color: var(--ink-faint); }
.td-qwins .qw-row { padding: 12px 0; }

/* a time-sensitive errand kept visible on Home */
.td-outhint { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: var(--nudge-bg); border: 1px solid color-mix(in srgb, var(--nudge) 34%, var(--line)); border-radius: 14px; padding: 13px 15px; margin: 0 0 18px; cursor: pointer; transition: border-color .14s ease, transform .1s ease; }
.td-outhint:hover { border-color: var(--nudge); transform: translateY(-1px); }
.td-outhint-ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--nudge) 20%, var(--paper)); color: var(--nudge-text); display: inline-flex; align-items: center; justify-content: center; }
.td-outhint-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.td-outhint-txt b { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.td-outhint-txt span { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-outhint-go { flex: 0 0 auto; color: var(--nudge-text); }

/* Out & about bundle */
.td-out { margin: 2px 0 6px; }
.td-out-lead { font-size: 14px; color: var(--ink-soft); margin: 0 0 16px; text-wrap: pretty; }
.td-out-grp { background: var(--paper); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.td-out-h { display: flex; align-items: center; gap: 9px; padding: 13px 16px; background: var(--soft-05); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-soft); }
.td-out-h svg { color: var(--ink-soft); flex: 0 0 auto; }
.td-out-row { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: none; border: none; padding: 15px 16px; cursor: pointer; font-family: var(--sans); }
.td-out-row + .td-out-row { border-top: 1px solid var(--line); }
.td-out-row.leaving { animation: qw-out 0.4s ease forwards; }
.td-out-ring { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--paper); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: border-color .14s ease, background .14s ease; padding: 0; }
.td-out-ring:hover { border-color: var(--done); }
.td-out-ring.on { background: var(--done); border-color: var(--done); }
.td-out-ring.groc { border-style: none; background: color-mix(in srgb, var(--done) 14%, var(--paper)); color: var(--done-deep); }
.td-out-txt { flex: 1; min-width: 0; font-size: 15px; color: var(--ink); }
.td-out-due { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--nudge-text); background: var(--nudge-bg); border-radius: 99px; padding: 3px 10px; }
.td-out-groc .td-out-txt { font-weight: 600; }
.td-out-go { flex: 0 0 auto; color: var(--ink-faint); }
.td-out-empty { text-align: center; padding: 34px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.td-out-empty .mk { display: inline-flex; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--done) 15%, var(--paper)); color: var(--done); align-items: center; justify-content: center; margin-bottom: 10px; }
.td-out-empty .t { font-family: var(--serif); font-size: 19px; color: var(--ink); margin: 0 0 4px; }
.td-out-empty .s { font-size: 13.5px; color: var(--ink-soft); margin: 0; }

/* persistent capture bar — pinned above the mobile tab bar, floats on desktop */
.td-dash { padding-bottom: 116px; }
.td-capbar { position: fixed; left: 220px; right: 0; bottom: 0; z-index: 45; padding: 14px 40px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 72%, transparent); pointer-events: none; }
.td-capbar-inner { max-width: 760px; margin: 0 auto; pointer-events: auto; }
.td-capbar .td-capture { margin-bottom: 0; box-shadow: 0 10px 30px -10px rgba(24,62,98,0.32); }
.td-capbar-msg { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--done-deep); background: color-mix(in srgb, var(--done) 13%, var(--paper)); border: 1px solid color-mix(in srgb, var(--done) 26%, var(--line)); border-radius: 11px; padding: 8px 13px; margin-bottom: 9px; box-shadow: var(--shadow); }
.td-capbar-msg svg { color: var(--done); flex: 0 0 auto; }
.pomodoro-active .td-capbar { display: none; }

@media (max-width: 767px) {
  .td-capbar { left: 0; right: 0; padding: 12px 18px calc(64px + env(safe-area-inset-bottom)); }
  .td-dash { padding-bottom: 150px; }
}

/* ---------- Quiet mode: a calmer, lighter view (no background box) ---------- */
.td-quiet .td-greet { color: color-mix(in srgb, var(--ink) 88%, var(--focus)); }
.td-quiet .td-hero { box-shadow: none; border-color: color-mix(in srgb, var(--focus) 20%, var(--line)); }
.td-quiet .td-hero.fierce { border-left-color: color-mix(in srgb, var(--nudge) 60%, var(--focus)); }
.td-quiet .td-hero-scape { opacity: 0.22; }
.td-quiet .td-hero-eyebrow:not(.fierce) { color: var(--focus-deep); }
.td-quiet .td-hero-eyebrow:not(.fierce) .td-hero-dot { background: var(--focus); }
.td-quiet .td-qwins { box-shadow: none; }

/* up-next line sits between hero and quick wins — equal breathing room each side */
.td-shape { margin: 18px 0; }
.td-hero { margin-bottom: 18px; }

/* hero: openable title (keeps the big serif; opens the detail sheet) */
.td-hero-open { display: flex; align-items: baseline; gap: 10px; width: 100%; background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: inherit; }
.td-hero-open .td-hero-title-txt { flex: 0 1 auto; }
.td-hero-open .td-hero-info { flex: 0 0 auto; align-self: flex-start; margin-top: 7px; color: var(--ink-faint); opacity: 0; transition: opacity .15s ease, color .15s ease; }
.td-hero-open:hover .td-hero-info, .td-hero-open:focus-visible .td-hero-info { opacity: 1; color: var(--focus); }
.td-hero-open:hover .td-hero-title-txt { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

/* the "what's this about?" sheet */
.hero-sheet { position: fixed; z-index: 71; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 40px)); max-height: calc(100vh - 60px); overflow: auto; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: 0 24px 60px -18px rgba(24,62,98,0.4); padding: 22px 24px 24px; }
.hero-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hs-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.hs-eyebrow svg { color: var(--focus); }
.hero-sheet-title { font-family: var(--serif); font-size: 25px; line-height: 1.2; color: var(--ink); margin: 0 0 18px; text-wrap: pretty; }
.hero-sheet-facts { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 0; margin-bottom: 16px; }
.hsf-row { display: flex; gap: 16px; align-items: baseline; padding: 9px 0; }
.hsf-row + .hsf-row { border-top: 1px solid var(--line); }
.hsf-k { flex: 0 0 64px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.hsf-v { flex: 1; font-size: 15px; color: var(--ink); }
.hsf-v em { color: var(--ink-faint); font-style: normal; }
.hsf-v.overdue { color: var(--nudge-text); font-weight: 600; }
.hero-sheet-notes { background: var(--soft-05); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; }
.hsn-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }
.hero-sheet-notes p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; }
.hero-sheet-nonote { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 18px; }
.hero-sheet-acts { display: flex; align-items: center; gap: 10px; }
.hero-sheet-acts .td-hero-sp { flex: 1; }

/* ============================================================
   Projects: one live next action (GTD Flow Review G1/G2/G7, 2026-07-12)
   The project is a container on the Projects tab; its current step is a
   real task on the (context-grouped) Next-actions board, marked ↳.
   ============================================================ */

/* Tasks tabs (Next actions · Projects) */
.tasks-tabs { margin: 2px 0 12px; }

/* Context group headers — quiet, scannable, never shouty */
.ctx-group { margin-bottom: 20px; }
.ctx-group + .ctx-group { margin-top: 4px; }
.ctx-group-h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  margin: 0 0 8px 2px;
}
.ctx-group-n { font-family: var(--sans, inherit); font-size: 11.5px; font-weight: 600; color: var(--ink-faint); }
.ctx-group .task-card { margin-bottom: 10px; }

/* ↳ project link on a live action's card */
.proj-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--focus-text, var(--ink-soft));
  background: var(--focus-soft, var(--soft-05));
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 2px 9px;
  cursor: pointer;
}
.proj-link:hover { border-color: var(--ink-faint); }

/* Live-action state on the project card's "Now" row */
.live-note {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
}
.live-note.on-board { color: var(--focus-text, var(--ink-soft)); }

/* "Is the project done?" prompt (reuses the enough-card shell) */
.pdp-card .enough-sub { margin-bottom: 14px; }
.pdp-actions { margin-bottom: 16px; }
.pdp-or { font-size: 13px; color: var(--ink-soft); margin: 0 0 8px; }
.pdp-addrow { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.pdp-addrow .step-input { flex: 1; }
.pdp-leave { font-size: 13px; color: var(--ink-faint); }

/* Weekly Sweep — stuck-project inline step input */
.sweep-steprow { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.sweep-steprow .step-input { flex: 1; }

/* Clarify — the Toss escape hatch (rubbish happens; never a trap) */
.clarify-actions .btn.danger,
.clarify-actions-left .btn.danger {
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.clarify-actions .btn.danger:hover,
.clarify-actions-left .btn.danger:hover { color: var(--destructive, var(--ink-soft)); }

/* Project plan — reorder + the "needs another step" panel */
.step-move {
  appearance: none;
  border: none;
  background: none;
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 6px;
}
.step-move:hover { color: var(--ink); background: var(--soft-05, rgba(0,0,0,.04)); }
.prereq-row.needs-step { display: block; }
.prereq-row.needs-step .aside-lead { margin: 0 0 8px; }
.prereq-row.needs-step .step-input { width: 100%; margin-bottom: 8px; }
.prereq-row.needs-step .edit-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Reference (G3): the drawer + Support pockets ---------- */
.ref-addrow, .ref-searchrow { display: flex; gap: 8px; margin: 4px 0 14px; }
.ref-addrow .step-input, .ref-searchrow .step-input { flex: 1; }
.ref-list { display: flex; flex-direction: column; gap: 10px; }
.ref-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px 14px;
}
.ref-ic { flex: 0 0 auto; color: var(--ink-faint); margin-top: 2px; }
.ref-body { flex: 1; min-width: 0; }
.ref-text { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); word-break: break-word; }
.ref-text a { color: var(--focus-text, var(--ink)); font-weight: 600; }
.ref-linked {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--soft-05, rgba(0,0,0,.04));
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 2px 9px;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ref-acts { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 12.5px; }

/* Paperclip chip on a task/project card */
.ref-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--soft-05, rgba(0,0,0,.04));
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 2px 8px;
  cursor: pointer;
}
.ref-chip:hover { color: var(--ink); }

/* Support pocket panel on the card */
.support-panel { padding: 10px 2px 4px; width: 100%; }
.support-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.support-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.support-text { flex: 1; min-width: 0; word-break: break-word; }
.support-text a { font-weight: 600; }

/* Onboarding — "Who's in your life?" step */
.onb-people-fields { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 22px; width: 100%; max-width: 420px; }
.onb-field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.onb-field-lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.onb-field input {
  font: inherit;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--card, #fff);
  color: var(--ink);
}
.onb-field input:focus { outline: none; border-color: var(--focus, var(--ink-soft)); }