/* Component-level styles, grouped roughly by the component that owns them. */

/* ================================================================
   Today (Design Sprint 3). Hierarchy, top to bottom: the one execution
   surface, then capacity, then the rest of the day. The execution surface
   is the only raised card on the page; everything after it sits on the
   canvas and is separated by space and type, not by boxes.
   ================================================================ */

/* ---- Execution surface: Next / Start My Day / Active / nothing
   scheduled share this one shell. State lives in the small label (text
   first, dot second); the task title is the strongest line; time is
   secondary; one primary action. ---- */
.focus-surface {
  background: var(--color-surface); border-radius: var(--radius-xl);
  box-shadow: var(--ring-hairline), var(--shadow-sm);
  padding: var(--space-5) var(--space-6) var(--space-6);
  margin-bottom: var(--space-6);
}
.focus-surface__label {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: normal;
  color: var(--color-text-muted); margin-bottom: var(--space-4);
}
.focus-surface__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); flex-shrink: 0; }
.focus-surface__dot--active, .focus-surface__dot--recover { background: var(--color-accent); }
.focus-surface__dot--paused { background: var(--color-warning); }
.focus-surface__body { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); }
.focus-surface__info { min-width: 0; }
.focus-surface__context {
  font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--color-text-faint); margin-bottom: var(--space-1);
}
.focus-surface__title {
  font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display); overflow-wrap: anywhere;
}
.focus-surface__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-2);
  font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.focus-surface__body > .btn { flex-shrink: 0; }
/* Work already in motion: a faint accent edge says "live" without glow. */
.focus-surface--continue { box-shadow: inset 0 0 0 1px rgba(var(--color-accent-rgb), 0.28), var(--shadow-sm); }
/* Nothing to recommend: the same shell, stepped down to an outline so a
   clear day reads as finished, not as a missing card. */
.focus-surface--empty { background: transparent; box-shadow: inset 0 0 0 1px var(--color-border); }
.focus-surface--empty .focus-surface__title {
  font-size: var(--text-lg); line-height: var(--leading-snug); letter-spacing: var(--tracking-title);
}

/* ---- Capacity: one number leads, the rest is one quiet line, one bar. */
.capacity-bar { margin-bottom: var(--space-7); }
.capacity-bar__head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 0 var(--space-4); min-height: var(--control-sm);
}
.capacity-bar__label {
  font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--color-text-faint);
}
.capacity-bar__summary {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-1) var(--space-4); margin-bottom: var(--space-3);
}
.capacity-bar__available {
  font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-title);
  font-variant-numeric: tabular-nums;
}
.capacity-bar__breakdown {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
  font-size: var(--text-sm); color: var(--color-text-faint); font-variant-numeric: tabular-nums;
}
.capacity-bar__num { color: var(--color-text-muted); font-weight: var(--weight-medium); }
/* Over capacity is never hidden (PRODUCT_PRINCIPLES #5): the words and
   the bar both say it, in the calmer danger text tone. */
.capacity-bar__over, .capacity-bar__over .capacity-bar__num { color: var(--color-danger-text); }
.capacity-bar__track { height: 4px; border-radius: var(--radius-pill); background: var(--color-border); overflow: hidden; }
.capacity-bar__fill { height: 100%; background: var(--color-accent); border-radius: var(--radius-pill); transition: width var(--transition-slow); }
/* Over capacity the fill is simply full, in the calmer danger tone; the
   excess is stated in words beside it, never drawn past the track. */
.capacity-bar--over .capacity-bar__fill { background: var(--color-danger-text); }

/* ---- Overdue / Waiting: context links beside the capacity label, not
   pills. Semantic colour only on the overdue dot, which repeats the word. */
.today-signals { display: flex; gap: var(--space-4); }
.today-signal {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm);
  font-size: var(--text-sm); color: var(--color-text-muted); border-radius: var(--radius-xs);
  transition: color var(--transition-fast);
}
.today-signal:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }
.today-signal__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--color-danger); }

/* ---- Top outcomes: ranked rows on the canvas. The number is a quiet
   ordinal, the title leads, the project sits beneath it. ---- */
.outcomes { margin-bottom: var(--space-7); }
.outcomes__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.outcome {
  display: grid; grid-template-columns: var(--space-5) minmax(0, 1fr) auto; column-gap: var(--space-3);
  align-items: baseline; padding: var(--space-1) 0;
}
.outcome__rank { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.outcome__body { display: flex; flex-direction: column; min-width: 0; }
.outcome__title { font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-snug); overflow-wrap: anywhere; }
.outcome__context { font-size: var(--text-sm); color: var(--color-text-faint); }
.outcome__duration { font-size: var(--text-sm); color: var(--color-text-faint); font-variant-numeric: tabular-nums; }

/* ---- Timeline: a clock column (start, then end), one hairline with a
   node at each block, and task blocks on the canvas. Blocks only take a
   surface on hover/focus, so the day reads as one sequence, not a stack
   of cards. ---- */
.timeline { display: flex; flex-direction: column; }
.timeline__row { display: grid; grid-template-columns: 72px var(--space-5) minmax(0, 1fr); }
.timeline__time {
  display: flex; flex-direction: column; align-items: flex-end; padding-top: var(--space-4);
  font-size: var(--text-xs); line-height: 16px; color: var(--color-text-faint); font-variant-numeric: tabular-nums; text-align: right;
}
.timeline__start { color: var(--color-text-muted); font-weight: var(--weight-medium); }
.timeline__time--unset { font-style: normal; }
.timeline__connector { position: relative; }
.timeline__connector::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--color-border); }
.timeline__connector::after {
  content: ""; position: absolute; left: 50%; top: 20px; width: 8px; height: 8px; margin-left: -4px;
  border-radius: var(--radius-pill); background: var(--color-bg); box-shadow: inset 0 0 0 1.5px var(--color-border-strong);
}
/* The running task's node on the day's line fills with the accent (a
   paused one keeps a warning ring): the timeline shows what is live
   without another badge. */
.timeline__row:has(.task-card--active) .timeline__connector::after { background: var(--color-accent); box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18); }
.timeline__row:has(.task-card--paused) .timeline__connector::after { box-shadow: inset 0 0 0 1.5px var(--color-warning); }
.timeline__row:first-child .timeline__connector::before { top: 20px; }
.timeline__row:last-child .timeline__connector::before { bottom: calc(100% - 24px); }
.timeline__row .task-card, .timeline__row .batch-card { margin: var(--space-1) 0; }
/* On the canvas, a hovered or focused block lifts onto a surface. */
.timeline .task-card:hover, .timeline .task-card:focus-within, .timeline .task-card--menu-open { background-color: var(--color-surface); box-shadow: var(--ring-hairline); }
.timeline-empty { font-size: var(--text-sm); color: var(--color-text-faint); padding: var(--space-2) 0; }

/* ---- Task rows (Design Sprint 4). One row for every task list: title
   first, then a single meta line (context, time, status), then at most a
   note and a progress hairline. One primary action is always visible;
   complete/edit/more appear on hover or keyboard focus (always on touch
   devices without hover), and phones get one overflow button instead. ---- */
.task-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}
.task-card:hover, .task-card:focus-within, .task-card--menu-open { background-color: var(--color-surface-2); }
.task-card--compact { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.task-card--done { opacity: 0.6; }
.task-card--done:hover { opacity: 0.88; }
.task-card__main { flex: 1; min-width: 0; }
.task-card__title { font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-snug); overflow-wrap: anywhere; }
.task-card--compact .task-card__title { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.task-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); margin-top: 2px;
  font-size: var(--text-sm); line-height: 20px; color: var(--color-text-faint); font-variant-numeric: tabular-nums;
}
.task-card--compact .task-card__meta { font-size: var(--text-xs); line-height: 16px; }
/* The separator trails its item, so a wrapped line never starts with one. */
.task-card__meta > span:not(:last-child)::after { content: "·"; margin-left: var(--space-2); color: var(--color-text-faint); font-weight: var(--weight-regular); }
.task-card__context { color: var(--color-text-muted); }
.task-card__deadline--overdue { color: var(--color-danger-text); font-weight: var(--weight-medium); }
.task-card__state--live, .task-card__state--active { color: var(--color-accent-soft-text); font-weight: var(--weight-medium); }
/* Paused uses the same warning tone as the Active Task indicator; the
   word carries the state, the colour only repeats it. */
.task-card__state--paused { color: var(--color-warning); font-weight: var(--weight-medium); }
.task-card__priority { font-weight: var(--weight-medium); }
.task-card__priority--critical { color: var(--color-critical); }
.task-card__priority--high { color: var(--color-high); }
.task-card__recurring { display: inline-flex; align-items: center; color: var(--color-text-faint); }
.task-card__recurring svg { width: 12px; height: 12px; }
.task-card__note { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.task-card__progress { height: 4px; background: var(--color-border); border-radius: var(--radius-pill); margin-top: var(--space-2); overflow: hidden; }
.task-card__progress-fill { height: 100%; background: var(--color-accent); transition: width var(--transition-slow); }

.task-card__actions { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.task-card__secondary { display: flex; gap: 2px; }
.task-card .icon-btn:hover:not(:disabled) { background-color: var(--color-surface-3); }
/* ---- Execution marker: a glyph and a word at the row's end that read as
   the task's state and its next step (Plan, Start, Active, Resume,
   Follow Up, Done). Text, not a button: no fill, no border, no pill. Hover
   and focus change colour only, so nothing on the row moves. ---- */
.task-card__exec {
  display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0;
  min-height: var(--control-sm); padding: 0 var(--space-2); margin-right: calc(-1 * var(--space-2));
  border: 0; border-radius: var(--radius-xs); background: none; font: inherit;
  font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 20px; white-space: nowrap;
  color: var(--color-text-muted); cursor: pointer;
  transition: color var(--transition-fast);
}
span.task-card__exec { cursor: default; }
.task-card__exec-glyph { display: inline-flex; color: var(--color-text-faint); transition: color var(--transition-fast); }
.task-card__exec-glyph svg { width: 14px; height: 14px; }
.task-card:hover .task-card__exec, .task-card:focus-within .task-card__exec { color: var(--color-text); }
.task-card:hover .task-card__exec-glyph, .task-card:focus-within .task-card__exec-glyph { color: var(--color-accent); }
button.task-card__exec:hover { color: var(--color-accent-soft-text); }
/* The running task is alive without a badge: its marker keeps the accent
   and its dot breathes slowly (collapsed by reduced motion, globally). */
.task-card__exec--active, .task-card:hover .task-card__exec--active { color: var(--color-accent-soft-text); }
.task-card__exec--active .task-card__exec-glyph { color: var(--color-accent); animation: sync-pulse 2.4s ease-in-out infinite; }
.task-card__exec--resume .task-card__exec-glyph, .task-card:hover .task-card__exec--resume .task-card__exec-glyph { color: var(--color-warning); }
.task-card__exec--done, .task-card:hover .task-card__exec--done { color: var(--color-text-faint); }
.task-card__exec--done .task-card__exec-glyph, .task-card:hover .task-card__exec--done .task-card__exec-glyph { color: var(--color-success); }

/* The title is the row's way in: a real button, styled as the title. */
.task-card__open {
  display: block; max-width: 100%; padding: 0; border: 0; background: none; text-align: left;
  font: inherit; font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-snug);
  color: var(--color-text); cursor: pointer;
}
.task-card--compact .task-card__open { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.task-card__main { cursor: pointer; }
.eod-list .task-card__main, .eod-item .task-card__main { cursor: default; }
@media (hover: hover) {
  .task-card__secondary, .task-card__more { opacity: 0; transition: opacity var(--transition-fast); }
  .task-card:hover .task-card__secondary, .task-card:hover .task-card__more,
  .task-card:focus-within .task-card__secondary, .task-card:focus-within .task-card__more,
  .task-card--menu-open .task-card__secondary, .task-card--menu-open .task-card__more { opacity: 1; }
}
.task-card__more { position: relative; }
.task-card__menu {
  position: absolute; right: 0; top: calc(100% + 6px); background: var(--color-surface-raised);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; min-width: 168px; z-index: 30; overflow: hidden; padding: 4px;
  transform-origin: top right;
  animation: menu-pop var(--transition-fast) both;
}
.task-card__menu[hidden] { display: none; }
.task-card__menu button {
  background: none; border: none; text-align: left; padding: 8px 10px; font-size: var(--text-sm); cursor: pointer;
  color: var(--color-text); border-radius: var(--radius-xs); transition: background var(--transition-fast);
}
.task-card__menu button:hover { background: var(--color-surface-2); }
.task-card__menu .task-card__menu-danger { color: var(--color-danger-text); }

/* A list is one quiet surface holding its rows, not a stack of cards. */
.task-list {
  display: flex; flex-direction: column; gap: 2px; padding: var(--space-1);
  background: var(--color-surface); border-radius: var(--radius-lg);
  box-shadow: var(--ring-hairline), var(--shadow-xs);
}
/* The End-of-Day review lists read-only rows inside a dialog: each keeps
   its own hairline edge there. */
.eod-list .task-card, .eod-item > .task-card { background: var(--color-surface); box-shadow: var(--ring-hairline); }

/* ---- Phone overflow action sheet (opened from a row's More button). */
.action-sheet .modal__header { align-items: center; }
.action-sheet__title {
  font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-snug);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.action-sheet__list { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom)); }
.action-sheet__item {
  min-height: var(--control-lg); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm);
  background: none; text-align: left; font: inherit; font-size: var(--text-base); color: var(--color-text); cursor: pointer;
  transition: background-color var(--transition-fast);
}
.action-sheet__item:hover { background: var(--color-surface-2); }
.action-sheet__item--primary { color: var(--color-accent-soft-text); font-weight: var(--weight-semibold); }
.action-sheet__item--danger { color: var(--color-danger-text); margin-top: var(--space-2); }

@keyframes menu-pop {
  from { opacity: 0; transform: scale(0.96) translateY(-2px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---- Small task batch (PRODUCT_PRINCIPLES #8): one compressed block.
   Items are 14px rows, not cards; each check keeps a 32px hit area around
   its 16px ring. ---- */
.batch-card { padding: var(--space-3); border-radius: var(--radius-md); }
.batch-card__header { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-1); }
.batch-card__title { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.batch-card__count { font-size: var(--text-xs); color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.batch-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.batch-card__list li {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-sm);
  padding: 0 var(--space-2); margin: 0 calc(-1 * var(--space-2)); border-radius: var(--radius-xs);
  transition: background-color var(--transition-fast);
}
.batch-card__list li:hover { background: var(--color-surface-2); }
.batch-check {
  position: relative; width: 16px; height: 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--color-border-strong); background: none;
  cursor: pointer; flex-shrink: 0; transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.batch-check::after { content: ""; position: absolute; inset: -8px; }
.batch-check:hover { border-color: var(--color-accent); }
.batch-check:active { transform: scale(0.92); }
.batch-card__item-title { flex: 1; min-width: 0; font-size: var(--text-sm); }
.batch-card__recurring { display: inline-flex; vertical-align: middle; margin-left: var(--space-2); color: var(--color-text-faint); }
.batch-card__recurring svg { width: 12px; height: 12px; }
.batch-card__item-duration { font-size: var(--text-xs); color: var(--color-text-faint); font-variant-numeric: tabular-nums; }

/* ================================================================
   Overlay / Modal — see task-modal.js for the DOM structure this
   styles. Three fixed regions (header / body / footer); only the body
   scrolls, and only when content genuinely exceeds the viewport.
   ================================================================ */
.overlay {
  position: fixed; inset: 0; background: rgba(20, 18, 28, 0.5); display: flex; align-items: center;
  justify-content: center; z-index: 80; padding: var(--space-5); backdrop-filter: blur(3px);
  animation: overlay-in var(--transition-base) both;
}
.overlay--closing { animation: overlay-out var(--transition-fast) both; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlay-out { from { opacity: 1; } to { opacity: 0; } }

.modal {
  background: var(--color-surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 480px; max-width: 100%; max-height: 85vh; display: flex; flex-direction: column;
  animation: modal-in var(--transition-base) both;
}
.overlay--closing .modal { animation: modal-out var(--transition-fast) both; }
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes modal-out {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to { opacity: 0; transform: scale(0.97) translateY(4px); }
}

.modal--compact { width: 420px; }
.modal--wide, .task-modal { width: 720px; }
.brain-dump-modal { width: 640px; }

.modal__header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-5); border-bottom: 1px solid var(--color-border); flex-shrink: 0;
}
.modal__header-text h2 { font-size: var(--text-xl); letter-spacing: -0.015em; }
.modal__header-desc { font-size: var(--text-sm); color: var(--color-text-faint); margin-top: 4px; max-width: 46ch; }
.modal--compact .modal__header, .modal--compact .modal__body { padding-left: var(--space-5); padding-right: var(--space-5); }

.modal__body { padding: var(--space-6); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-5); }
.modal__hint { font-size: var(--text-sm); color: var(--color-text-muted); }
.modal__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-6); border-top: 1px solid var(--color-border); flex-shrink: 0; gap: var(--space-3);
}
.modal__footer-right { display: flex; gap: var(--space-2); }

/* ---- Auth modal ---- */
.auth-form { gap: var(--space-4); }
.auth-form__error {
  font-size: var(--text-sm); color: var(--color-danger); background: var(--color-danger-soft);
  padding: 10px 12px; border-radius: var(--radius-sm); margin: 0;
}
.auth-modal__links { display: flex; flex-direction: column; gap: 4px; }
.auth-modal__links a { font-size: var(--text-sm); color: var(--color-text-faint); transition: color var(--transition-fast); }
.auth-modal__links a:hover { color: var(--color-accent); }

/* ---- Task form ---- */
.task-form__essentials { display: flex; flex-direction: column; gap: var(--space-5); }
.task-form input[name="title"] { font-size: var(--text-lg); font-weight: 550; padding: 12px 14px; }

/* Duration — an accessible segmented control (role="radiogroup") instead of
   loose pills, with a real selected state and a "Custom" segment that turns
   into the free-text input in place. */
.duration-field__label-row { display: flex; align-items: baseline; justify-content: space-between; }
/* Segmented control geometry (Design Sprint 1): a 4px-inset track whose
   total height equals --control-md, so it lines up with every input and
   button; each segment is exactly --control-sm inside it. */
.duration-segments {
  display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); background: var(--color-surface-2); border-radius: var(--radius-md);
}
.duration-segment {
  border: none; background: transparent; color: var(--color-text-muted);
  min-height: var(--control-sm); padding: 6px var(--space-3); line-height: var(--leading-control);
  border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.duration-segment:hover { color: var(--color-text); }
.duration-segment[aria-checked="true"] { background: var(--color-surface); color: var(--color-accent); box-shadow: var(--shadow-xs); }
.duration-segment--custom { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; padding-top: 0; padding-bottom: 0; }
/* Specificity note: base.css's `input[type="text"]` rule (0,1,1) sets
   width:100% globally and would otherwise beat a bare class selector
   (0,1,0) — qualifying with the element name matches it exactly and wins
   on source order (this file loads after base.css). */
input.duration-custom-input {
  width: 64px; flex: 0 0 auto; border: none; background: transparent; padding: 6px 2px 6px 0; font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--color-text); text-align: left; min-height: 0; /* sits inside a segment; must not inherit the standalone field height */
}
.duration-custom-input:focus { outline: none; }
.duration-segment--custom[aria-checked="true"] { background: var(--color-surface); box-shadow: var(--shadow-xs); }
.duration-segment--custom[aria-checked="true"] .duration-custom-input { color: var(--color-accent); }

.task-form__toggle-more {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: var(--space-3) 0; border: none; background: none; cursor: pointer;
  color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 550;
  border-top: 1px solid var(--color-border); transition: color var(--transition-fast);
}
.task-form__toggle-more:hover { color: var(--color-text); }
.task-form__toggle-more svg { width: 15px; height: 15px; transition: transform var(--transition-base); }
.task-form__toggle-more[aria-expanded="true"] svg { transform: rotate(180deg); }

.task-form__more-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--transition-slow); }
.task-form__more-wrap.is-open { grid-template-rows: 1fr; }
.task-form__more-inner { overflow: hidden; }
.task-form__more { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); }


/* ---- Brain dump ---- */
.brain-dump-modal textarea { width: 100%; min-height: 160px; }
.bd-preview-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; margin: var(--space-3) 0; }
.bd-row { display: flex; align-items: center; gap: var(--space-2); padding: 7px 6px; border-radius: var(--radius-xs); transition: background var(--transition-fast); }
.bd-row:hover { background: var(--color-surface-2); }
.bd-row__title { flex: 1; border: none; background: transparent; font-size: var(--text-sm); padding: 5px 7px; border-radius: var(--radius-xs); }
.bd-row__title:focus { background: var(--color-surface); box-shadow: var(--shadow-focus); outline: none; }
.bd-row__duration { font-size: var(--text-xs); color: var(--color-text-faint); min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Urgent conflict panel ---- */
.conflict-panel { border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-top: var(--space-3); }
.conflict-panel--ok { background: var(--color-success-soft); }
.conflict-panel--warn { background: var(--color-warning-soft); }
.conflict-panel__title { font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.05em; color: var(--color-high); margin-bottom: 6px; }
.conflict-panel__section-label { font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-faint); margin: var(--space-3) 0 4px; }
.conflict-list { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); }
.conflict-panel__shortfall { color: var(--color-danger); font-size: var(--text-sm); margin-top: var(--space-3); }
.conflict-panel__actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); justify-content: flex-end; }

/* ================================================================
   Planning surfaces (Design Sprint 5): Week, Projects, Project Detail.
   Built only from UI v1 parts — the list panel, the capacity-style
   readout, task rows, marker-style glyph + word — so they read as the
   same product as Today.
   ================================================================ */

/* ---- Week: the verdict, then one panel of day rows. ---- */
.week-summary { margin-bottom: var(--space-6); }
.week-summary__label, .project-health__label {
  font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--color-text-faint);
}
.week-summary__headline { margin-top: var(--space-1); font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-title); font-variant-numeric: tabular-nums; }
.week-summary--over .week-summary__headline { color: var(--color-danger-text); }
.week-summary__sentence { margin-top: 2px; font-size: var(--text-sm); color: var(--color-text-muted); }

.week-days, .project-list, .milestone-list {
  list-style: none; margin: 0; display: flex; flex-direction: column; gap: 2px; padding: var(--space-1);
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--ring-hairline), var(--shadow-xs);
}
.week-day__toggle {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 136px; grid-template-areas: "name bar numbers status";
  align-items: center; column-gap: var(--space-4); width: 100%; min-height: var(--control-lg);
  padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: none;
  font: inherit; text-align: left; color: var(--color-text); cursor: pointer;
  transition: background-color var(--transition-fast);
}
.week-day__toggle:hover, .week-day--open > .week-day__toggle { background-color: var(--color-surface-2); }
.week-day__name { grid-area: name; display: flex; flex-direction: column; }
.week-day__dow { font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 20px; }
.week-day__date { font-size: var(--text-xs); line-height: 16px; color: var(--color-text-faint); }
.week-day--today .week-day__date { color: var(--color-accent-soft-text); font-weight: var(--weight-medium); }
/* The track's length is the day's capacity against the week's largest, so
   a light day looks light; the fill is what's planned; the rest is free. */
.week-day__bar { grid-area: bar; display: block; }
.week-day__track { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--color-border); overflow: hidden; }
.week-day__fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--color-accent); }
.week-day--over .week-day__fill { background: var(--color-danger-text); }
.week-day__numbers { grid-area: numbers; font-size: var(--text-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.week-day__of { color: var(--color-text-faint); }
.week-day__status { grid-area: status; font-size: var(--text-sm); text-align: right; white-space: nowrap; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.week-day--over .week-day__status { color: var(--color-danger-text); font-weight: var(--weight-medium); }
.week-day--off .week-day__status { color: var(--color-text-faint); }
.week-day--past > .week-day__toggle { color: var(--color-text-muted); }
.week-day--past .week-day__track { opacity: 0.5; }
.week-day__panel { padding: var(--space-2) var(--space-3) var(--space-4); }
.week-day__why { margin-bottom: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.week-day--over .week-day__why { color: var(--color-text); }
.week-day__empty { font-size: var(--text-sm); color: var(--color-text-faint); }
/* Rows inside an open day sit in the week's panel, not a second one. */
.week-day__panel .task-list, .milestone .task-list { padding: 0; background: none; box-shadow: none; }
/* The task Plan or Reschedule just placed ("View in Week"): marked, not animated. */
.task-card--focus { background-color: var(--color-accent-soft); }

/* ---- Projects: ordered by health; each row explains itself. ---- */
.projects-verdict { margin-bottom: var(--space-6); font-size: var(--text-base); color: var(--color-text-muted); }
.projects-group { margin-bottom: var(--space-7); }
.project-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3); border-radius: var(--radius-md); color: inherit;
  transition: background-color var(--transition-fast);
}
.project-row:hover { background-color: var(--color-surface-2); }
.project-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.project-row__name { font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-snug); overflow-wrap: anywhere; }
.project-row__context { color: var(--color-text-muted); }
.project-row__next { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text); overflow-wrap: anywhere; }
.project-row__when { color: var(--color-text-faint); }
.project-row__why { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Health: a dot and the risk word, the same shape as an execution marker.
   The word carries the state; the dot only repeats it. */
.health { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 20px; white-space: nowrap; color: var(--color-text-faint); }
.health__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-success); }
.health--risk { color: var(--color-text); }
.health--risk .health__dot { background: var(--color-warning); }
.health--critical { color: var(--color-danger-text); }
.health--critical .health__dot { background: var(--color-danger); }

/* ---- Project Detail: health, next, milestones. ---- */
.project-health { margin-bottom: var(--space-6); }
.project-health__summary { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-1) 0 var(--space-2); }
.project-health__headline .health { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.project-health--ok .project-health__headline .health { color: var(--color-text); }
.project-health__why { margin-bottom: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.project-health__track { height: 4px; border-radius: var(--radius-pill); background: var(--color-border); overflow: hidden; }
.project-health__fill { height: 100%; border-radius: var(--radius-pill); background: var(--color-accent); }
.project-next { margin-bottom: var(--space-7); }
.project-next__when { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-faint); }
.milestones, .project-other { margin-bottom: var(--space-7); }
.milestone__head {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-lg);
  padding: 0 var(--space-3); border-radius: var(--radius-md); list-style: none; cursor: pointer;
  transition: background-color var(--transition-fast);
}
.milestone__head::-webkit-details-marker { display: none; }
details.milestone > summary:hover { background-color: var(--color-surface-2); }
.milestone--empty .milestone__head { cursor: default; }
/* A static chevron says the line folds; it points down when open. */
details.milestone > summary::after {
  content: ""; width: 6px; height: 6px; margin: 0 2px 0 var(--space-1); flex-shrink: 0;
  border-right: 1.5px solid var(--color-text-faint); border-bottom: 1.5px solid var(--color-text-faint); transform: rotate(-45deg);
}
details.milestone[open] > summary::after { transform: rotate(45deg); }
.milestone__glyph { width: 10px; height: 10px; border-radius: var(--radius-pill); flex-shrink: 0; box-shadow: inset 0 0 0 1.5px var(--color-border-strong); }
.milestone__glyph--current { background: var(--color-accent); box-shadow: none; }
.milestone__glyph--done { background: var(--color-success); box-shadow: none; }
.milestone__name { flex: 1; min-width: 0; font-size: var(--text-base); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.milestone--done .milestone__name, .milestone--empty .milestone__name { color: var(--color-text-muted); }
.milestone__state { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-faint); }
.milestone--current .milestone__state { color: var(--color-accent-soft-text); }
.milestone__count { font-size: var(--text-sm); color: var(--color-text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.milestone > .task-list { padding: 0 0 var(--space-2) var(--space-5); }
.milestone-group { padding: 0 0 var(--space-1) var(--space-5); }
.project-notes { margin-bottom: var(--space-6); max-width: 65ch; font-size: var(--text-sm); color: var(--color-text-muted); }
.project-people { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-xs); color: var(--color-text-faint); }
.retainer-block { display: flex; justify-content: space-between; background: var(--color-accent-soft); color: var(--color-accent-soft-text); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-6); font-weight: 600; font-size: var(--text-sm); }

/* ---- Reschedule: the coming days with their free time. ---- */
.reschedule-note { font-size: var(--text-sm); color: var(--color-text); }
.reschedule-days { display: flex; flex-direction: column; gap: 2px; }
.reschedule-day {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--control-lg); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm);
  background: none; font: inherit; text-align: left; color: var(--color-text); cursor: pointer;
  transition: background-color var(--transition-fast);
}
.reschedule-day:hover { background-color: var(--color-surface-2); }
.reschedule-day__name { font-size: var(--text-base); font-weight: var(--weight-medium); }
.reschedule-day__note { font-size: var(--text-sm); color: var(--color-text-faint); text-align: right; font-variant-numeric: tabular-nums; }
.reschedule-day--earliest .reschedule-day__note { color: var(--color-accent-soft-text); font-weight: var(--weight-medium); }
.reschedule-day--over .reschedule-day__note { color: var(--color-danger-text); }
.reschedule-day--off .reschedule-day__name { color: var(--color-text-muted); }

/* ---- Waiting ---- */

/* ---- Completed ---- */
.completed-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.completed-table th { text-align: left; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-faint); font-weight: 650; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }
.completed-table td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); }
.completed-table tr:last-child td { border-bottom: none; }
.completed-table tr { transition: background var(--transition-fast); }
.completed-table tr:hover td { background: var(--color-surface-2); }

/* ---- Settings ---- */
.settings-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-xs); }
.settings-section--danger { border-color: var(--color-danger); }
.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); }
.workdays-picker { display: flex; gap: var(--space-2); }
.workday-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--color-text-muted); cursor: pointer; }
.workday-chip input { width: 16px; height: 16px; }
.routine-editor { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); }
.routine-row { display: grid; grid-template-columns: 1fr 128px 128px 120px 32px; gap: 6px; /* widened in Design Sprint 1: 14px text + the select chevron no longer fit 110/100px (times already clipped "06:00 A" before) */ align-items: center; padding: 3px; border-radius: var(--radius-xs); transition: background var(--transition-fast); }
.routine-row:hover { background: var(--color-surface-2); }
.weights-editor { display: flex; flex-direction: column; gap: var(--space-3); }
.weights-row { display: grid; grid-template-columns: 1fr 2fr 32px; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.weights-row input[type="range"] { accent-color: var(--color-accent); }
.weights-row__value { text-align: right; color: var(--color-text-faint); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.profiles-editor { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); }
.profiles-row { display: grid; grid-template-columns: 1.2fr 1fr 120px; gap: 6px; padding: 3px; border-radius: var(--radius-xs); transition: background var(--transition-fast); }
.profiles-row:hover { background: var(--color-surface-2); }
#s-theme { padding: 10px 13px; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--color-surface-2); }

/* ---- Toast ---- */
.toast {
  display: flex; align-items: center; gap: var(--space-3); background: var(--color-text); color: var(--color-bg);
  padding: 12px 18px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  font-size: var(--text-sm); opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity var(--transition-base), transform var(--transition-base);
}
.toast--visible { opacity: 1; transform: translateY(0) scale(1); }
.toast--error { background: var(--color-danger); color: #fff; }
.toast__action { background: none; border: none; color: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }

/* ---- Focus Mode ---- */
.focus-view { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-6); position: relative; background: var(--color-bg); }
.focus-exit {
  position: absolute; top: var(--space-5); left: var(--space-5); display: flex; align-items: center; gap: 6px;
  background: none; border: none; color: var(--color-text-faint); cursor: pointer; font-size: var(--text-sm);
  padding: 6px 10px; border-radius: var(--radius-sm); transition: background var(--transition-fast), color var(--transition-fast);
}
.focus-exit:hover { color: var(--color-text); background: var(--color-surface-2); }
.focus-exit svg { width: 16px; height: 16px; }
.focus-view__content { width: 100%; max-width: 540px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.focus-view__project { font-size: var(--text-xs); font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent); }
.focus-view__title { font-size: var(--text-3xl); }
.focus-view__description { color: var(--color-text-muted); font-size: var(--text-base); }
.focus-view__subtasks { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 6px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.subtask-row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.focus-view__timer { margin: var(--space-5) 0; }
.focus-view__timer-main { font-size: var(--text-hero); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.focus-view__timer-sub { display: flex; gap: var(--space-4); justify-content: center; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); font-variant-numeric: tabular-nums; }
/* Non-destructive overrun state (PDR-001 Phase 5) -- calm, not alarming:
   a warning tone, not danger red, matching this codebase's existing
   .badge--waiting treatment for "worth noticing, not a failure." */
.focus-view__timer-overrun { color: var(--color-warning); font-weight: 600; }
.focus-view__actions { display: flex; gap: var(--space-3); }
.focus-view__actions--secondary { margin-top: var(--space-2); }
/* Secondary lifecycle actions stay a size down from Pause/Complete, so the
   primary pair keeps its weight (Design Sprint 1: --control-sm). */
.focus-view__actions--secondary .btn { font-size: var(--text-sm); min-height: var(--control-sm); padding: 5px var(--space-3); }

/* ---- End-of-Day Review (PDR-001 Phase 8) ----
   A short, calm closing ritual -- no charts, no scores, just a plain
   label/value pairing rather than an invented "stats" look. */
.eod-summary { display: flex; gap: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.eod-stat { display: flex; flex-direction: column; gap: 4px; }
.eod-stat__value { font-size: var(--text-xl); font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.eod-stat__label { font-size: var(--text-2xs); font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-faint); }

.eod-section + .eod-section { margin-top: var(--space-2); }
.eod-list { display: flex; flex-direction: column; gap: var(--space-2); }
.eod-empty { color: var(--color-text-faint); font-size: var(--text-sm); padding: var(--space-2) 0; }

/* Each unresolved item: its read-only card, then a row of three intentional
   outcomes, then whichever one reveal is currently open beneath it. */
.eod-item { display: flex; flex-direction: column; gap: var(--space-2); }
.eod-item__actions { display: flex; gap: var(--space-2); }
.eod-item__reveal {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface-2); border-radius: var(--radius-md); padding: var(--space-3);
}
/* Matches the fix already established for Recover Momentum's own
   adjust-amount reveal (PDR-001 Phase 6) -- the plain `display: flex`
   above otherwise wins over the `hidden` attribute's own UA rule. */
.eod-item__reveal[hidden] { display: none; }
.eod-item__reveal .eod-item__date, .eod-item__reveal .eod-item__reason { flex: 1; width: auto; }
.eod-item__confirm-text { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Closing line -- the whole point is that it's quiet: no confetti, no
   score, just a plain, centered statement and one way out. */
.eod-closing { align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-4) 0; }
.eod-closing__line { font-size: var(--text-xl); font-weight: 650; }
.eod-closing__sub { color: var(--color-text-muted); margin-bottom: var(--space-2); }

/* ================================================================
   Auth screen (P0). The only surface a signed-out visitor sees: one calm,
   compact card centred on the canvas (full width on phones), the brand
   lockup, a title, the form, and quiet links. Built from existing tokens,
   fields and button tiers.
   ================================================================ */
.auth-screen {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-6) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom)); background: var(--color-bg);
}
.auth-screen--loading { gap: var(--space-4); }
.auth-card {
  width: 100%; max-width: 400px; padding: var(--space-6);
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--ring-hairline), var(--shadow-sm);
}
.auth-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.auth-brand .brand-logo { height: var(--icon-md); }
.auth-title { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-title); line-height: var(--leading-snug); }
.auth-desc { margin-top: var(--space-1); margin-bottom: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); }
.auth-notice { margin-bottom: var(--space-4); font-size: var(--text-sm); color: var(--color-text); }
.auth-form { display: flex; flex-direction: column; gap: var(--space-4); }
.auth-form .btn--block { margin-top: var(--space-1); }
.auth-error { font-size: var(--text-sm); color: var(--color-danger-text); }
.auth-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.auth-links .btn--text { padding: var(--space-2) 0; min-height: var(--touch-min); }
.auth-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.auth-status { font-size: var(--text-sm); color: var(--color-text-faint); }
.auth-actions .btn--text { align-self: center; min-height: var(--touch-min); }

/* Inline field errors (auth forms): the same danger text as .auth-error,
   sitting directly under the field it belongs to. */
.field__error { font-size: var(--text-sm); color: var(--color-danger-text); line-height: 1.45; }

/* Password with a show/hide control. The input reserves the control's
   width on the right at all times, so toggling never shifts the layout. */
.password-control { position: relative; }
.password-control input { padding-right: calc(var(--touch-min) + var(--space-1)); }
.password-toggle {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  width: var(--touch-min); height: var(--touch-min);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: var(--radius-sm);
  color: var(--color-text-faint); cursor: pointer;
  transition: color var(--transition-fast);
}
.password-toggle:hover { color: var(--color-text); }
.password-toggle:focus-visible { outline: none; color: var(--color-text); box-shadow: var(--shadow-focus); }
.password-toggle svg { width: var(--icon-md); height: var(--icon-md); }
@media (max-width: 560px) {
  .auth-screen { justify-content: flex-start; padding-top: var(--space-7); }
  .auth-card { padding: var(--space-5); box-shadow: none; background: transparent; }
}

/* ---- Onboarding (#/onboarding) — one question per screen on the open
   page (no wrapping card): a 640px column sitting a little above the middle
   of the screen, a thin progress bar, the question, its controls, and the
   actions right below them in the same place on every step. The first
   plan is the only raised surface. ---- */
.onboarding { max-width: 640px; margin: 0 auto; padding-top: clamp(0px, 6vh, var(--space-8)); }
.onboarding__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.onboarding__progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-1); width: 168px; }
.onboarding__segment { height: 3px; border-radius: var(--radius-pill); background: var(--color-border-strong); }
.onboarding__segment.is-done { background: var(--color-accent); }
.onboarding__top-actions { display: flex; align-items: center; gap: var(--space-4); }
.onboarding__top .btn--text { min-height: var(--touch-min); padding: 0; color: var(--color-text-muted); }
.onboarding__top .btn--text:hover { color: var(--color-text); }
.onboarding__form { display: flex; flex-direction: column; }
.onboarding__body { display: flex; flex-direction: column; gap: var(--space-5); }
.onboarding__body > * { flex: 0 0 auto; } /* .field is flex: 1 elsewhere; here fields keep their own height */
.onboarding__title {
  font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display); outline: none; text-wrap: balance;
}
/* The heading takes focus so each question is announced; it isn't a
   control, so it never shows a focus ring. */
.onboarding__title:focus, .onboarding__title:focus-visible { outline: none; box-shadow: none; }
.onboarding__lede { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--color-text-muted); margin-top: calc(-1 * var(--space-3)); max-width: 52ch; }
.onboarding__context { font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.onboarding__helper { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text-muted); max-width: 56ch; }
.onboarding__note { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text-muted); }
.onboarding__question { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-title); margin-bottom: var(--space-3); padding: 0; }
.onboarding__group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.onboarding__group > legend.field__label { margin-bottom: var(--space-2); padding: 0; }
.onboarding__group--second { margin-top: var(--space-4); }
.onboarding__actions {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--space-6);
}
.onboarding__actions .btn--text { min-height: var(--touch-min); padding: 0 var(--space-2); margin-left: calc(-1 * var(--space-2)); }
.onboarding__primary { min-width: 200px; margin-left: auto; } /* always on the right, Back or not */
.field__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.field__optional { font-size: var(--text-xs); color: var(--color-text-faint); }

/* Selected days and choices: a soft filled shape with an accent ring and
   heavier text — clearly selected, never louder than the primary button,
   and not colour alone (filled vs outlined, weight). */
.onboarding__days, .day-toggles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
.day-toggle, .choice-chip { position: relative; display: block; }
.day-toggle input, .choice-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.day-toggle > span[aria-hidden], .choice-chip span {
  display: flex; align-items: center; justify-content: center; min-height: var(--touch-min);
  box-shadow: inset 0 0 0 1px var(--color-border-strong); background: transparent;
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); font-variant-numeric: tabular-nums;
  transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.day-toggle > span[aria-hidden] { border-radius: var(--radius-sm); }
.choice-chip span { display: inline-flex; padding: 0 var(--space-4); border-radius: var(--radius-pill); }
.day-toggle input:checked + span, .choice-chip input:checked + span {
  background: var(--color-accent-soft); color: var(--color-accent-soft-text); font-weight: var(--weight-semibold);
  box-shadow: inset 0 0 0 1.5px var(--color-accent);
}
.day-toggle input:hover + span, .choice-chip input:hover + span { color: var(--color-text); }
.day-toggle input:checked:hover + span, .choice-chip input:checked:hover + span { color: var(--color-accent-soft-text); }
.day-toggle input:focus-visible + span, .choice-chip input:focus-visible + span { box-shadow: inset 0 0 0 1.5px var(--color-accent), var(--shadow-focus); }
.choice-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.onboarding__custom { max-width: 220px; }

.onboarding__times { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); max-width: 420px; }
.onboarding__times + .field__error { margin-top: calc(-1 * var(--space-3)); }

/* Things already in the day: add buttons, then each added item as a block
   of time with its own Edit. */
.onboarding__suggestions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.suggestion-chip {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-min); padding: 0 var(--space-4);
  border: 0; border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-text);
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer;
  transition: background-color var(--transition-fast);
}
.suggestion-chip:hover { background: var(--color-surface-3); }
.suggestion-chip > span { color: var(--color-accent); font-weight: var(--weight-semibold); }
.routine-blocks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.routine-blocks:empty { display: none; }
.routine-block { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--ring-hairline); }
.routine-block__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); min-height: 56px; }
.routine-block__text { min-width: 0; }
.routine-block__name { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-snug); overflow-wrap: anywhere; }
.routine-block__time { font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.routine-block__toggle { min-height: var(--touch-min); padding: 0 var(--space-3); flex-shrink: 0; }
.routine-block__editor { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-1) var(--space-4) var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.routine-block__editor[hidden] { display: none; }
.routine-block__times { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.routine-block__remove { align-self: flex-start; min-height: var(--touch-min); padding: 0; color: var(--color-danger-text); }
.routine-block__remove:hover { color: var(--color-danger-text); text-decoration: underline; }

/* The first plan: the one raised surface in onboarding. */
.first-plan {
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--ring-hairline), var(--shadow-xs);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1);
}
.first-plan__task { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-title); overflow-wrap: anywhere; }
.first-plan__day { margin-top: var(--space-3); font-size: var(--text-md); color: var(--color-text-muted); }
.first-plan__time { font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); font-variant-numeric: tabular-nums; color: var(--color-accent-soft-text); }
.first-plan__days { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.first-plan__days li { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-md); color: var(--color-text-muted); }
.first-plan__minutes { color: var(--color-accent-soft-text); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.first-plan--unplaced .first-plan__why { margin-top: var(--space-2); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--color-text-muted); }

/* The shared duration control at the touch minimum inside onboarding
   (mobile-first; the Task Modal keeps its frozen v1.1 sizing). The Custom
   slot reads as an option ("Custom") until a time is typed into it. */
.onboarding .duration-segment { min-height: var(--touch-min); min-width: var(--touch-min); display: inline-flex; align-items: center; justify-content: center; }
.onboarding .duration-segment.duration-segment--custom { padding-top: 0; padding-bottom: 0; }
.onboarding input.duration-custom-input { min-height: var(--touch-min); padding-top: 0; padding-bottom: 0; }
.onboarding input.duration-custom-input::placeholder { color: var(--color-text-muted); opacity: 1; }
.onboarding .duration-segment--custom[aria-checked="false"] input.duration-custom-input:not(:focus) { cursor: pointer; }

/* Seven days only fit at the touch minimum from ~420px; below that they
   sit in two rows (Mon–Thu, Fri–Sun) rather than shrinking. */
@media (max-width: 419px) {
  .onboarding__days, .day-toggles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .onboarding { padding-top: 0; }
  .onboarding__top { margin-bottom: var(--space-5); }
  .onboarding__progress { width: 132px; }
  .onboarding__primary { flex: 1; min-width: 0; }
  .onboarding__times { max-width: none; }
}

/* ---- Help (#/help, #/help/:article) — Design Sprint 6B. Part of the app,
   not a documentation site: the same page title, section labels, list rows
   and dialog as everywhere else. Learn Flow is the only set of raised
   surfaces; answers are plain rows; articles read at ~700px. ---- */
.view--help { max-width: 760px; }
.help-header { margin-bottom: var(--space-5); }
.help-lede { margin-top: var(--space-2); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--color-text-muted); max-width: 56ch; }

.help-search { position: relative; margin-bottom: var(--space-7); }
.help-search__icon { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); width: var(--icon-md); height: var(--icon-md); color: var(--color-text-faint); pointer-events: none; }
input[type="search"].help-search__input {
  min-height: var(--control-lg); padding-left: calc(var(--space-4) + var(--icon-md) + var(--space-3)); padding-right: var(--space-4);
  font-size: var(--text-md); border-radius: var(--radius-md);
}
.help-search__input::-webkit-search-cancel-button { cursor: pointer; }

.help-section + .help-section { margin-top: var(--space-7); }
.help-results { margin-bottom: var(--space-6); }
.help-icon { width: var(--icon-md); height: var(--icon-md); }
.help-chevron { width: var(--icon-sm); height: var(--icon-sm); flex-shrink: 0; color: var(--color-text-faint); transition: color var(--transition-fast); }

/* Learn Flow: one lightweight tile per guide-to-be. */
.help-learn { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); }
.help-card {
  display: flex; align-items: center; gap: var(--space-4); min-height: 76px; height: 100%;
  padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--color-surface); box-shadow: var(--ring-hairline);
  color: var(--color-text); text-decoration: none;
  transition: box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.help-card:hover { box-shadow: var(--ring-hairline), var(--shadow-hover); }
.help-card:hover .help-chevron, .help-row:hover .help-chevron { color: var(--color-text-muted); }
.help-card__icon {
  flex-shrink: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); background: var(--color-accent-soft); color: var(--color-accent-soft-text);
}
.help-card__text, .help-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.help-card__title, .help-row__title { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-title); }
.help-card__summary, .help-row__summary { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-text-muted); }

/* Understand Flow, Get help, results and related: plain rows. */
.help-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.help-list > li { border-bottom: 1px solid var(--color-border); }
.help-row {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 60px;
  padding: var(--space-3) var(--space-2); margin: 0; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--color-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--transition-fast);
}
.help-row:hover { background: var(--color-surface-2); }
.help-row__icon { flex-shrink: 0; display: inline-flex; color: var(--color-text-muted); }
.help-row__tag { flex-shrink: 0; font-size: var(--text-xs); color: var(--color-text-faint); }

.help-empty { padding: var(--space-6) 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.help-empty__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-title); }
.help-empty__body { font-size: var(--text-md); color: var(--color-text-muted); margin-bottom: var(--space-2); }

/* Article: one reading column. */
.help-article { max-width: 700px; }
.help-back { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-min); margin-left: calc(-1 * var(--space-1)); margin-bottom: var(--space-4); padding: 0 var(--space-1); color: var(--color-text-muted); }
.help-back:hover { color: var(--color-text); }
.help-back__icon { width: var(--icon-sm); height: var(--icon-sm); }
.help-article h1 { outline: none; }
.help-article__summary { margin-top: var(--space-2); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--color-text-muted); }
.help-article__body { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--text-md); line-height: var(--leading-normal); max-width: 68ch; }
.help-article__subhead { margin-top: var(--space-3); font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-title); }
.help-article__list { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.help-related { margin-top: var(--space-7); }
.help-helpful {
  margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-border);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4);
}
.help-helpful__title { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.help-helpful__actions { display: flex; gap: var(--space-2); }
.help-helpful__actions[hidden] { display: none; }
.help-helpful__actions .btn { min-height: var(--touch-min); }
.help-helpful__thanks { flex-basis: 100%; font-size: var(--text-sm); color: var(--color-text-muted); outline: none; }
.help-helpful__thanks:empty { display: none; }
.help-helpful__feedback { min-height: var(--touch-min); padding: 0 var(--space-1); }
.help-close__icon { width: var(--icon-sm); height: var(--icon-sm); }

@media (max-width: 639px) {
  .help-learn { grid-template-columns: 1fr; gap: var(--space-2); }
  .help-search { margin-bottom: var(--space-6); }
  .help-section + .help-section { margin-top: var(--space-6); }
  .help-article__summary { font-size: var(--text-md); }
}

/* ---- Interactive guides (Sprint 6C). The real app stays in view and
   usable: a spotlight ring around the real control (the rest of the page
   dimmed around it, never blocked), and one calm tooltip. Above dialogs
   (80), below toasts (100). Inside an open dialog they are placed within
   it, so the dialog's own focus trap includes the tooltip. ---- */
.guide-spotlight {
  position: fixed; z-index: 94; pointer-events: none;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 2px var(--color-accent), 0 0 0 9999px rgba(20, 18, 28, 0.42);
  transition: left var(--transition-base), top var(--transition-base), width var(--transition-base), height var(--transition-base);
}
.guide-spotlight[hidden] { display: none; }
.guide-tip {
  position: fixed; z-index: 95; width: min(340px, calc(100vw - 2 * var(--space-4)));
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: var(--color-surface-raised); color: var(--color-text);
  border-radius: var(--radius-lg); box-shadow: var(--ring-hairline), var(--shadow-lg);
}
.guide-tip--centered { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.guide-tip--docked { left: var(--space-4); right: var(--space-4); width: auto; }
.guide-tip__content { display: flex; flex-direction: column; gap: var(--space-2); }
/* On a short phone a docked tooltip is capped so its target stays in view:
   the text scrolls, the progress and buttons stay put. */
.guide-tip__head, .guide-tip__actions { flex-shrink: 0; }
.guide-tip--docked .guide-tip__content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.guide-tip__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.guide-tip__progress { display: flex; gap: 3px; flex: 1; max-width: 120px; }
.guide-tip__segment { flex: 1; height: 3px; border-radius: var(--radius-pill); background: var(--color-border-strong); }
.guide-tip__segment.is-done { background: var(--color-accent); }
.guide-tip__count { font-size: var(--text-xs); color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.guide-tip__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-title); outline: none; }
.guide-tip__body { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text-muted); }
.guide-tip__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-1); }
.guide-tip__nav { display: flex; align-items: center; gap: var(--space-2); }
.guide-tip__exit, .guide-tip__nav .btn--text { min-height: var(--touch-min); padding: 0 var(--space-2); color: var(--color-text-muted); }
.guide-tip__exit { margin-left: calc(-1 * var(--space-2)); }
.guide-tip .btn--primary { min-height: var(--touch-min); }
.guide-tip .btn--primary:disabled { opacity: 0.45; }

/* The one-time suggestion on Today: quiet, below capacity, never louder
   than the Next card above it. */
.guide-suggestion {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  margin: var(--space-5) 0; padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg); background: var(--color-surface-2);
}
.guide-suggestion__text { min-width: 0; flex: 1 1 260px; }
.guide-suggestion__eyebrow { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-faint); }
.guide-suggestion__title { margin-top: 2px; font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-title); }
.guide-suggestion__body { font-size: var(--text-sm); color: var(--color-text-muted); }
.guide-suggestion__actions { display: flex; align-items: center; gap: var(--space-2); }
.guide-suggestion__actions .btn { min-height: var(--touch-min); }

/* Help: where a guide exists, the article offers it first. */
.help-guide {
  margin-top: var(--space-5); padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  border-radius: var(--radius-lg); background: var(--color-accent-soft);
}
.help-guide__text { flex: 1 1 240px; }
.help-guide__title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-accent-soft-text); }
.help-guide__body { font-size: var(--text-sm); color: var(--color-text-muted); }
.help-guide .btn { min-height: var(--touch-min); }
.help-card__tag { flex-shrink: 0; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-accent-soft-text); background: var(--color-accent-soft); padding: 2px var(--space-2); border-radius: var(--radius-pill); }

@media (prefers-reduced-motion: reduce) {
  .guide-spotlight { transition: none; }
}

/* ---- Settings: work schedule (Sprint 6C.2) — the same day buttons and
   time blocks as onboarding, so there is one way to describe a day. ---- */
.settings-section .day-toggles { max-width: 520px; }
.settings-hours { display: grid; grid-template-columns: repeat(2, minmax(0, 180px)); gap: var(--space-4); margin-top: var(--space-3); }
.settings-section .routine-blocks { margin-top: var(--space-4); }
.settings-add-block { margin-top: var(--space-3); min-height: var(--touch-min); }
.routine-block__kind { color: var(--color-text-faint); }
.routine-block__type select { max-width: 220px; }
@media (max-width: 560px) {
  .settings-hours { grid-template-columns: 1fr 1fr; }
  .routine-block__type select { max-width: none; }
}
/* A reference example inside a guide step (never saved). */
.guide-tip__example { margin: var(--space-1) 0 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); }
.guide-tip__example-title { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); margin-bottom: var(--space-1); }
.guide-tip__example-rows { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.guide-tip__example-rows > div { display: flex; gap: var(--space-3); font-size: var(--text-sm); }
.guide-tip__example-rows dt { min-width: 128px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.guide-tip__example-rows dd { margin: 0; color: var(--color-text); }

/* ---- Routine block names: suggestions (combobox). A quiet list under
   the field in the app's own input styling — text only, compact rows. ---- */
.combobox-popup {
  position: fixed; z-index: 97; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-1) 0;
  background: var(--color-surface-raised); border-radius: var(--radius-sm);
  box-shadow: var(--ring-hairline), var(--shadow-md);
}
.combobox-popup__heading { padding: var(--space-1) var(--space-3) 2px; font-size: var(--text-xs); color: var(--color-text-faint); }
.combobox-popup__list { list-style: none; margin: 0; padding: 0; }
.combobox-option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 36px; padding: 0 var(--space-3);
  font-size: var(--text-sm); color: var(--color-text); cursor: pointer;
}
.combobox-option.is-active { background: var(--color-accent-soft); }
.combobox-option__label { min-width: 0; overflow-wrap: anywhere; }
.combobox-option__detail { flex-shrink: 0; font-size: var(--text-xs); color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .combobox-option { min-height: var(--touch-min); } }

/* ---- Quick start: starting schedules, one click each, above an empty
   routine. Rows in the same style as routine blocks; no icons. ---- */
.routine-quickstart { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.routine-quickstart[hidden] { display: none; }
.routine-quickstart__title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text); }
.routine-quickstart__lede { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: calc(-1 * var(--space-1)); }
.routine-starts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.routine-start {
  width: 100%; min-height: var(--touch-min); display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-md);
  background: var(--color-surface); box-shadow: var(--ring-hairline);
  font: inherit; color: var(--color-text); text-align: left; cursor: pointer;
  transition: box-shadow var(--transition-base), background-color var(--transition-base);
}
.routine-start:hover { box-shadow: 0 0 0 1px var(--color-border-strong); }
.routine-start:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.routine-start__name { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.routine-start__desc { font-size: var(--text-sm); color: var(--color-text-muted); }
.routine-start__detail { font-size: var(--text-xs); color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.routine-quickstart__note { font-size: var(--text-xs); color: var(--color-text-faint); }
.onboarding .routine-quickstart { margin-top: 0; }