/* Rufus — component styles */

/* ---------------------------------------------------------------- *
 * Typography utility classes — the Claude Design heuristic is:
 *
 *   "If the text is a sentence, it's Inter Tight.
 *    If the text is an ALL-CAPS LABEL, a number, a timestamp, a tag,
 *    or inside a <kbd>, it's JetBrains Mono."
 *
 * Use these utilities for one-off text. Component-specific styles
 * already encode the right treatment per element; reach for these
 * only when adding new markup.
 * ---------------------------------------------------------------- */

/* Mono numerics, tabular-nums — KPIs, row meta chips, inline numbers. */
.num-mono,
.num-mono * {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "lnum";
}

/* Hero / KPI display number (e.g. 47/100, 6/6 today, 9h 30m). */
.num-display {
  font-family: var(--ff-mono);
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--fg-0);
}

/* Mono meta — timestamps, chip contents, inline 15m / Apr 24 etc. */
.mono-meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--fg-2);
}

/* Mono caps — section labels above fields, KPI captions. */
.mono-caps {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Compact body — Inter Tight 13 for tight prose contexts (rows,
 * list cells, dense tables). */
.body-sm { font-size: 13px; line-height: 1.4; color: var(--fg-1); }

/* ---------------------------------------------------------------- *
 * Canonical button classes (Claude Design — gap doc §8.1).
 *
 * Every primary action across the app should resolve to one of these
 * three variants. New surfaces should reach for these classes
 * directly; existing per-component button styles get migrated to
 * them under GAP-12 (per-page polish pass).
 *
 *   .btn-primary       — filled accent. Save / Create / Auto-schedule.
 *   .btn-ghost         — neutral outline. Cancel / secondary actions.
 *   .btn-accent-ghost  — copper outline. Run / + Use / PLACE / soft
 *                        accent CTAs that are page-secondary but want
 *                        the accent identity (NOT solid copper).
 *
 * Sizing matches the design's 36px primary form height. The
 * accent-ghost variant runs slightly tighter (32px) to fit the
 * card-row contexts where it's used.
 * ---------------------------------------------------------------- */
.btn-primary,
.btn-ghost,
.btn-accent-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 6px;
  font-family: var(--ff-sans);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn-primary:disabled,
.btn-ghost:disabled,
.btn-accent-ghost:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  height: 36px;
  padding: 0 14px;
  font-size: 14px;
}
.btn-primary:hover:not(:disabled) {
  background: color-mix(in oklch, var(--accent) 88%, var(--fg-0));
}

.btn-ghost {
  background: transparent;
  color: var(--fg-1);
  border: 1px solid var(--line);
  height: 36px;
  padding: 0 14px;
  font-size: 14px;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--ink-3);
  color: var(--fg-0);
}

.btn-accent-ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}
.btn-accent-ghost:hover:not(:disabled) {
  background: var(--accent-soft);
}

/* ---------------------------------------------------------------- *
 * Canonical status chips (Claude Design — gap doc §8.2).
 *
 * State chips (CRIT / HIGH / AHEAD / PLANNING / ACTIVE / ON-TRACK /
 * STALLED / WATCH / AT-RISK / GOOD / GREAT / RECURRING) ship as
 * OUTLINED, never solid-filled. Background stays --ink-2 so the chip
 * sits flush on cards; the state color carries via 1px border + text.
 *
 * Use the base .chip class with one modifier (.chip--crit etc.).
 * Per-page reclassification of existing solid-filled chips happens
 * under GAP-12 (per-page polish pass).
 * ---------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--fg-2);
  white-space: nowrap;
}

.chip--crit   { color: var(--danger); border-color: color-mix(in oklch, var(--danger) 50%, var(--line)); }
.chip--high   { color: var(--warn);   border-color: color-mix(in oklch, var(--warn)   50%, var(--line)); }
.chip--ok     { color: var(--ok);     border-color: color-mix(in oklch, var(--ok)     50%, var(--line)); }
.chip--info   { color: var(--info);   border-color: color-mix(in oklch, var(--info)   50%, var(--line)); }

/* Accent variant — for "selected this week" / "current" / "RECURRING" tags. */
.chip--accent { color: var(--accent); border-color: color-mix(in oklch, var(--accent) 50%, var(--line)); }

/* ---------------------------------------------------------------- *
 * Canonical segmented toggle (Claude Design — gap doc §8.3).
 *
 * One reusable view-mode switcher: Day/Week/Month, List/Garden/Backburner,
 * Light/Medium/Deep, Timeline/Heatmap/By-role, Edit/Preview, etc.
 * Active state is --accent-soft + --accent text (NOT solid copper),
 * inactive is --fg-2 on transparent. Hover is --fg-0.
 *
 * Markup:
 *   <div class="seg">
 *     <button class="on">Day</button>
 *     <button>Week</button>
 *     <button>Month</button>
 *   </div>
 * ---------------------------------------------------------------- */
.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px;
  background: var(--ink-2);
  gap: 0;
}
.seg > button,
.seg > .seg__item {
  height: 26px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  color: var(--fg-2);
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background .12s ease, color .12s ease;
}
.seg > button:hover:not(.on):not(:disabled),
.seg > .seg__item:hover:not(.on):not(:disabled) {
  color: var(--fg-0);
}
.seg > .on,
.seg > .seg__item.on,
.seg > button.on {
  background: var(--accent-soft);
  color: var(--accent);
}
.seg > button:disabled,
.seg > .seg__item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------- *
 * Auth pages (Login / Register) — gap doc §7.24.
 *
 * Warm-paper bg (--ink-0) hosting a centered two-pane card. Left:
 * abstract-art SVG (AuthArt.razor) + brand-mark + wordmark + tagline.
 * Right: form (email / password / submit) and footer links.
 *
 * The card collapses to a single column on viewports under 720px;
 * the art panel hides and the form takes the full card width.
 * ---------------------------------------------------------------- */
.auth-page {
  min-height: 100vh;
  background: var(--ink-0);
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--fg-0);
}
.auth-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 920px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}
.auth-card__art {
  position: relative;
  background: var(--ink-1);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 480px;
}
.auth-card__art-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
.auth-card__art-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-card__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.auth-card__brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-family: var(--ff-mono);
  font-size: 18px;
  font-weight: 700;
  flex: 0 0 auto;
}
.auth-card__brand-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-0);
}
.auth-card__tagline {
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-1);
  max-width: 320px;
  margin: 0;
}
.auth-card__form {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-card__form-inner { width: 100%; max-width: 360px; margin: 0 auto; }
.auth-card__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-0);
  margin: 0 0 4px;
}
.auth-card__subtitle {
  font-size: 13px;
  color: var(--fg-2);
  margin: 0 0 20px;
}
.auth-card__footer {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  font-size: 12.5px;
  color: var(--fg-2);
}
.auth-card__footer a { color: var(--accent); text-decoration: none; }
.auth-card__footer a:hover { text-decoration: underline; }
.auth-card__footer-links {
  display: flex;
  gap: 14px;
  font-size: 11.5px;
  color: var(--fg-3);
}

@media (max-width: 720px) {
  .auth-card { grid-template-columns: 1fr; max-width: 480px; }
  .auth-card__art { display: none; }
  .auth-card__form { padding: 28px 24px; }
}

/* Shell ------------------------------------------------------------ */
.shell {
  display: grid;
  grid-template-columns: var(--rail-w, 56px) 1fr;
  grid-template-rows: 100vh;
  height: 100vh;
  background: var(--ink-0);
}
.shell.rail-expanded { --rail-w: 220px; }

/* Rail ------------------------------------------------------------- */
.rail {
  background: var(--ink-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width .18s ease;
}
.rail__brand {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--fg-0);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 15px;
  white-space: nowrap;
}
.rail__brand .brand-mark {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid; place-items: center;
  font-family: var(--ff-mono);
  font-size: 12px; font-weight: 700;
  flex: 0 0 auto;
}
.rail__sections { padding: 8px 6px; flex: 1; overflow-y: auto; }
.rail__section-label {
  padding: 10px 10px 4px;
  font-family: var(--ff-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .12s ease;
}
.shell.rail-expanded .rail__section-label { opacity: 1; }
.rail__item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--fg-1);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.rail__item:hover { background: var(--ink-3); color: var(--fg-0); }
.rail__item.active { background: var(--ink-3); color: var(--fg-0); }
.rail__item.active::before {
  content: ""; position: absolute; left: -6px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 2px; background: var(--accent);
}
.rail__item .glyph { flex: 0 0 20px; color: var(--fg-2); }
.rail__item.active .glyph { color: var(--accent); }
.rail__item .label {
  opacity: 0;
  transition: opacity .12s ease;
  font-size: 13px;
}
.shell.rail-expanded .rail__item .label { opacity: 1; }
.rail__item .count {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  opacity: 0;
  transition: opacity .12s ease;
}
.shell.rail-expanded .rail__item .count { opacity: 1; }

.rail__toggle {
  border-top: 1px solid var(--line-soft);
  height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-3);
  cursor: pointer;
}
.rail__toggle:hover { color: var(--fg-0); background: var(--ink-3); }

/* Main ------------------------------------------------------------- */
.main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.topbar {
  /* Default is a 44px row; on edge-to-edge mobile WebViews (iOS notch /
   * Android 15+) padding-top + extended height absorb the system status
   * bar so the bar's background paints behind it and controls sit in the
   * safe 44px row below. env() resolves to 0 on platforms with no inset. */
  height: calc(44px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  padding: env(safe-area-inset-top, 0px) 14px 0;
  gap: 14px;
  background: var(--ink-0);
}
.topbar__breadcrumb {
  display: flex; align-items: center; gap: 8px;
  color: var(--fg-2);
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.topbar__breadcrumb .active { color: var(--fg-0); }
.topbar__spacer { flex: 1; }
.topbar__kbd {
  /* Centered ⌘K palette pill. Capped at the design's ~280px target so it
   * doesn't stretch with the topbar; flex-shrink keeps it from
   * overflowing on narrow viewports. */
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  height: 28px;
  width: 280px;
  max-width: 280px;
  flex-shrink: 1;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.topbar__kbd .label { flex: 1; text-align: left; }
.topbar__kbd:hover { color: var(--fg-0); border-color: var(--ink-4); }
.topbar__kbd .k { color: var(--fg-3); }
.topbar__icon-btn {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  display: grid; place-items: center;
}
.topbar__icon-btn:hover { background: var(--ink-2); color: var(--fg-0); }
.topbar__divider { width: 1px; height: 18px; background: var(--line); }

.content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 64px;
}

/* Role strip (cockpit) -------------------------------------------- */
.rolestrip {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink-1);
  align-items: stretch;
  overflow: hidden;
}
.rolechip {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  min-width: 0;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.rolechip:hover { background: var(--ink-2); }
.rolechip__mark {
  /* Per gap doc §7.1 — letter in full-strength role color on a soft
   * tint of the same color (background ~16% opacity), 6px radius
   * square. Consumers set the role color via the --role-color
   * custom property on the mark element; we color-mix it down for
   * the bg here so the saturated swatch never shouts on screen. */
  width: 28px; height: 28px;
  border-radius: 6px;
  display: grid; place-items: center;
  background: color-mix(in oklch, var(--role-color, var(--accent)) 16%, transparent);
  color: var(--role-color, var(--fg-0));
  font-weight: 700;
  font-family: var(--ff-mono);
  font-size: 12px;
  flex: 0 0 auto;
}
.rolechip__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rolechip__name {
  font-size: 12.5px; font-weight: 600; color: var(--fg-0);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rolechip__stats {
  display: flex; gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rolechip__stats .n { color: var(--fg-0); }
.rolechip__bar {
  height: 2px;
  background: var(--ink-4);
  border-radius: 2px;
  margin-top: 3px;
  overflow: hidden;
}
.rolechip__bar > span {
  display: block; height: 100%;
  border-radius: 2px;
}

/* Cockpit header -------------------------------------------------- */
.cockpit {
  /* Per LOG-1/LOG-2 — distinct cards with visible gaps replace the old
   * hairline-divided block. Each cell now owns its border + radius;
   * the outer container is just a layout grid. */
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 12px;
  margin-bottom: var(--gap);
}
.cockpit__cell {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
}
.cockpit__greet {
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--fg-0);
}
.cockpit__greet .time {
  color: var(--fg-2);
  font-weight: 400;
  display: block;
  font-size: 13px;
  letter-spacing: 0;
  margin-top: 4px;
  font-family: var(--ff-mono);
}
.cockpit__kpi { display: flex; align-items: baseline; gap: 10px; }
.cockpit__kpi-num {
  font-size: 36px; font-weight: 600; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cockpit__kpi-suffix {
  font-size: 13px;
  color: var(--fg-3);
  font-family: var(--ff-mono);
  margin-left: 4px;
  font-weight: 400;
  align-self: baseline;
}
.cockpit__kpi-label {
  font-family: var(--ff-mono);
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-2);
}
/* Stat-card flavor (CockpitCell with Caption set). Eyebrow → number →
 * caption. The cell already supplies vertical flex; tighten gaps so the
 * three lines read as a unit. */
.cockpit__cell:has(> .cockpit__kpi-caption) { gap: 4px; }
.cockpit__cell .cockpit__kpi-caption {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.cockpit__meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
  display: flex; gap: 6px; flex-wrap: wrap;
}
.cockpit__meta .pill {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 8px;
}

/* Section header -------------------------------------------------- */
.sec {
  margin-top: calc(var(--gap) * 1.5);
}
.sec__head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 8px;
  margin-bottom: var(--gap);
  border-bottom: 1px solid var(--line);
}
.sec__head .glyph { color: var(--fg-2); }
.sec__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-0);
}
.sec__count {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.sec__spacer { flex: 1; }
.sec__action {
  border: 0; background: transparent; color: var(--fg-2);
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 6px;
  /* MUX-6.3 — keep secondary section-head actions ("+ New note",
   * "Help for this page", etc.) on one line. Without these, "+ New note"
   * wrapped mid-label on narrow phones. */
  white-space: nowrap;
  min-width: max-content;
}
.sec__action:hover { color: var(--fg-0); background: var(--ink-2); }

/* MFB-6 — desktop default: .sec__actions wrapper is transparent so its
 * children participate directly in the .sec__head flex layout (no visual
 * change vs. the pre-wrapper markup). Mobile rules below override this to
 * give the actions their own row beneath the title. */
.sec__actions { display: contents; }

/* List row (tasks) ------------------------------------------------ */
.row {
  display: grid;
  grid-template-columns: 3px 20px 1fr auto;
  align-items: center;
  gap: 12px;
  height: var(--row-h);
  padding: 0 12px 0 0;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  max-width: 100%;
  overflow: hidden;
}
.row:hover { background: var(--ink-2); }
.row__ribbon {
  height: 100%;
  border-radius: 0 2px 2px 0;
}
.row__check {
  width: 16px; height: 16px;
  border: 1.5px solid var(--fg-3);
  border-radius: 5px;
  cursor: pointer;
  flex: 0 0 auto;
  display: grid; place-items: center;
  color: transparent;
}
.row__check:hover { border-color: var(--fg-1); }
.row__check.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.row__select {
  width: 16px; height: 16px;
  border: 1.5px solid var(--fg-3);
  border-radius: 4px;
  cursor: pointer;
  flex: 0 0 auto;
  display: grid; place-items: center;
  color: transparent;
}
.row__select:hover { border-color: var(--fg-1); }
.row__select.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.row.row--multi { grid-template-columns: 3px 20px 20px 1fr auto; }
.row.row--selected { background: color-mix(in oklch, var(--accent) 8%, transparent); }
.row__body { min-width: 0; display: flex; align-items: center; gap: 10px; }
.row__glyph { color: var(--fg-2); flex: 0 0 auto; }
.row__title {
  font-size: var(--fs-body);
  color: var(--fg-0);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row.done .row__title { color: var(--fg-3); text-decoration: line-through; text-decoration-color: var(--fg-3); }
.row__meta {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-2);
}
.row__meta .tag {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.row__meta .prio-high { color: oklch(0.76 0.14 75); border-color: oklch(0.76 0.14 75 / 0.4); }
.row__meta .prio-crit { color: oklch(0.72 0.16 27); border-color: oklch(0.72 0.16 27 / 0.4); }
.row__meta .due-overdue { color: oklch(0.72 0.16 27); }
.row__meta .chip {
  display: inline-flex; align-items: center; gap: 4px;
}
.row__waiting {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg-3);
  flex: 0 0 auto;
}
.row__star {
  border: 0;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.12s;
}
.row:hover .row__star { opacity: 0.7; }
.row__star.on { color: oklch(0.76 0.14 75); opacity: 1; }
.row__star.on svg { fill: currentColor; }
.row__star:hover { opacity: 1; }

/* Habit row -------------------------------------------------------- */
.habit {
  display: grid;
  grid-template-columns: 3px 28px 1fr auto;
  align-items: center;
  gap: 12px;
  height: calc(var(--row-h) + 4px);
  padding: 0 12px 0 0;
  border-bottom: 1px solid var(--line-soft);
}
.habit:hover { background: var(--ink-2); }
.habit__ring {
  width: 22px; height: 22px;
  position: relative;
}
.habit__ring svg { transform: rotate(-90deg); }
.habit__ring svg circle { fill: none; stroke-width: 2.5; }
.habit__ring .track { stroke: var(--ink-4); }
.habit__name { font-size: var(--fs-body); color: var(--fg-0); }
.habit__name .dim { color: var(--fg-2); margin-left: 8px; font-size: 11px; font-family: var(--ff-mono); }
.habit__week {
  /* Per gap doc §7.4 — 10×10 squares with 2px gap. */
  display: flex; gap: 2px;
}
.habit__dot {
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--ink-3);
}
.habit__dot.on { background: currentColor; }
.habit__dot.today { outline: 1px solid var(--fg-2); outline-offset: 1px; }
.habit__streak {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
  display: inline-flex; align-items: center; gap: 4px;
  min-width: 32px;
  justify-content: flex-end;
}

/* Card / panel ---------------------------------------------------- */
.panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink-1);
  overflow: hidden;
}
.panel__head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-2);
}
.panel__body { padding: 0; }

/* Priority callout ------------------------------------------------- */
.callout {
  border: 1px solid oklch(0.76 0.14 75 / 0.3);
  background: oklch(0.76 0.14 75 / 0.06);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.callout .glyph { color: oklch(0.76 0.14 75); flex: 0 0 auto; margin-top: 2px; }
.callout__title { font-weight: 600; font-size: 14px; color: var(--fg-0); margin-bottom: 4px; }
.callout__sub { color: var(--fg-1); font-size: 12.5px; line-height: 1.5; }

/* Stats row -------------------------------------------------------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.stat { background: var(--ink-1); padding: 14px 16px; }
.stat__num {
  font-size: 28px; font-weight: 600; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-0);
}
.stat__label {
  font-family: var(--ff-mono);
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-2);
}
.stat__delta { font-size: 11px; color: var(--ok); font-family: var(--ff-mono); }
.stat__delta.down { color: var(--danger); }

/* Radar mini ------------------------------------------------------ */
.radar { width: 100%; height: 120px; }
.radar .grid { stroke: var(--ink-4); fill: none; }
.radar .axis { stroke: var(--ink-4); }
.radar .shape-target { stroke: var(--fg-3); stroke-dasharray: 3 3; fill: none; }
.radar .shape-actual { stroke: var(--accent); fill: var(--accent); fill-opacity: 0.14; stroke-width: 1.5; }
.radar .label { fill: var(--fg-2); font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; }

/* Energy sliders (cockpit) --------------------------------------- */
.energy { display: flex; flex-direction: column; gap: 8px; }
.energy__row { display: grid; grid-template-columns: 80px 1fr 36px; gap: 10px; align-items: center; }
.energy__label { font-size: 11.5px; color: var(--fg-1); display: flex; align-items: center; gap: 6px; }
.energy__label .sq { width: 8px; height: 8px; border-radius: 2px; }
.energy__track { height: 4px; background: var(--ink-4); border-radius: 2px; overflow: hidden; }
.energy__track > span { display: block; height: 100%; }
.energy__pct { font-family: var(--ff-mono); font-size: 11px; text-align: right; color: var(--fg-1); }

/* Command palette ------------------------------------------------- */
.palette-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  display: grid; place-items: start center;
  padding-top: 72px;
  z-index: 200;
  animation: pal-scrim-in 140ms ease-out;
}
@keyframes pal-scrim-in { from { opacity: 0; } to { opacity: 1; } }
.palette {
  width: min(680px, 94%);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 72px rgba(0,0,0,0.55), 0 2px 0 rgba(255,255,255,0.02) inset;
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: min(72vh, 640px);
  animation: pal-pop-in 180ms cubic-bezier(.2,.8,.2,1);
  position: relative;
}
@keyframes pal-pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.985); } to { opacity: 1; transform: none; } }
.palette--v2 { }

.palette__input {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--fg-1);
  flex: 0 0 auto;
}
.palette__input input {
  flex: 1;
  background: transparent; border: 0; outline: none;
  color: var(--fg-0);
  font-family: var(--ff-sans);
  font-size: 15px;
}
.palette__input input::placeholder { color: var(--fg-3); }
.palette__input .k {
  font-family: var(--ff-mono); font-size: 10px; color: var(--fg-3);
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px;
}
.palette__ctx {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--ff-mono); font-size: 10.5px; color: var(--fg-2);
  background: var(--ink-3); border: 1px solid var(--line);
  border-radius: 5px; padding: 3px 8px;
  letter-spacing: 0.04em;
}

.palette__list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 0;
  scroll-behavior: auto;
}

.palette__group { padding: 4px 0; }
.palette__group + .palette__group { border-top: 1px solid var(--line-soft); margin-top: 2px; padding-top: 6px; }
.palette__group-label {
  padding: 8px 18px 4px;
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-3);
}

.palette__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  font-size: 13px;
  color: var(--fg-1);
  cursor: pointer;
  position: relative;
  transition: background 80ms ease;
}
.palette__item:hover { background: color-mix(in oklch, var(--ink-3), transparent 40%); }
.palette__item.on {
  background: var(--ink-3);
  color: var(--fg-0);
  box-shadow: inset 2px 0 0 var(--accent);
}
.palette__item.expanded { background: var(--ink-3); }
.palette__glyph { color: var(--fg-2); display: inline-flex; flex-shrink: 0; }
.palette__item.on .palette__glyph { color: var(--accent); }
.palette__title {
  color: inherit;
  flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.palette__title mark {
  background: color-mix(in oklch, var(--accent), transparent 70%);
  color: var(--fg-0); font-weight: 600;
  padding: 0 1px; border-radius: 2px;
}
.palette__sub {
  color: var(--fg-3); font-family: var(--ff-mono); font-size: 10.5px;
  margin-left: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 0 1 auto;
  max-width: 40%;
  text-align: right;
}
.palette__item .k {
  font-family: var(--ff-mono); font-size: 9.5px; color: var(--fg-3);
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px;
  background: var(--ink-1);
  flex-shrink: 0;
}
.palette-kind {
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.1em; font-weight: 700;
  padding: 3px 6px; border-radius: 4px;
  border: 1px solid var(--fg-3);
  width: 44px; text-align: center;
  flex-shrink: 0;
  background: transparent;
}

.palette__tab {
  margin-left: 4px;
  border: 0; background: transparent;
  cursor: pointer; padding: 0;
  opacity: 0; transition: opacity 100ms ease;
}
.palette__item.on .palette__tab,
.palette__item:hover .palette__tab,
.palette__tab.on { opacity: 1; }
.palette__tab.on .k { color: var(--accent); border-color: var(--accent); }

/* Inline actions row (expanded) */
.palette-inline {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 6px 18px 10px 18px;
  background: var(--ink-1);
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
.palette-inline__label {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-3);
  margin-right: 4px;
}
.palette-inline__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--ink-2);
  color: var(--fg-1);
  font-size: 11.5px; font-family: var(--ff-sans);
  cursor: pointer;
  transition: all 80ms;
}
.palette-inline__btn:hover {
  border-color: var(--accent);
  color: var(--fg-0);
}
.palette-inline__kbd {
  font-family: var(--ff-mono); font-size: 9.5px; color: var(--fg-3);
  margin-left: 2px;
}

/* Empty state */
.palette__empty {
  padding: 34px 24px;
  text-align: center;
  color: var(--fg-2);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 13px;
}
.palette__empty strong { color: var(--fg-0); font-weight: 600; }
.palette__empty-sub { color: var(--fg-3); font-size: 11.5px; margin-top: 2px; }
.palette__empty .k {
  font-family: var(--ff-mono); font-size: 10px; color: var(--fg-2);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
}

/* Footer */
.palette__footer {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 18px;
  border-top: 1px solid var(--line);
  background: var(--ink-1);
  font-size: 10.5px; color: var(--fg-3);
  flex: 0 0 auto;
}
.palette__footer-k { display: inline-flex; align-items: center; gap: 5px; }
.palette__footer-k .k {
  font-family: var(--ff-mono); font-size: 9.5px; color: var(--fg-2);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
  background: var(--ink-2);
}
.palette__footer-spacer { flex: 1; }
.palette__footer-brand {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fg-2); font-family: var(--ff-mono);
}

/* Toast */
.palette__toast {
  position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%);
  background: var(--fg-0); color: var(--ink-0);
  font-size: 12px; font-weight: 500;
  padding: 7px 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  animation: pal-toast-in 160ms ease-out;
}
@keyframes pal-toast-in { from { opacity: 0; transform: translate(-50%, 4px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* AI answer view */
.palette-ai {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 22px 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.palette-ai__prompt {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent);
  font-size: 13px; font-weight: 500;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.palette-ai__loading {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--fg-2); font-size: 12.5px;
}
.palette-ai__loading .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  animation: pal-dot 1s ease-in-out infinite;
}
.palette-ai__loading .dot:nth-child(2) { animation-delay: 140ms; }
.palette-ai__loading .dot:nth-child(3) { animation-delay: 280ms; }
@keyframes pal-dot { 0%, 100% { opacity: 0.3; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } }
.palette-ai__answer { display: flex; flex-direction: column; gap: 12px; }
.palette-ai__summary {
  margin: 0;
  font-size: 13.5px; line-height: 1.5;
  color: var(--fg-0);
  text-wrap: pretty;
}
.palette-ai__items {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.palette-ai__items li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.palette-ai__rank {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--ff-mono); font-size: 11px; font-weight: 700;
}
.palette-ai__item-title { font-size: 12.5px; font-weight: 600; color: var(--fg-0); }
.palette-ai__item-why   { font-size: 11px; color: var(--fg-2); font-family: var(--ff-mono); margin-top: 2px; }
.palette-ai__tag {
  font-family: var(--ff-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--accent);
  border: 1px solid color-mix(in oklch, var(--accent), transparent 60%);
  padding: 2px 6px; border-radius: 4px;
}
.palette-ai__footer {
  font-size: 11px; color: var(--fg-3); font-family: var(--ff-mono);
  padding-top: 4px;
}

/* Tweaks panel ---------------------------------------------------- */
.tweaks {
  position: fixed;
  right: 16px; bottom: 16px;
  width: 280px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  z-index: 30;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  font-size: 12.5px;
  display: none;
}
.tweaks.on { display: block; }
.tweaks h4 { margin: 0 0 8px; font-size: 12px; font-family: var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); }
.tweaks__row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.tweaks__row .label { flex: 1; color: var(--fg-1); }
.tweaks__seg { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.tweaks__seg button { border: 0; background: transparent; color: var(--fg-2); padding: 4px 8px; font-size: 11px; cursor: pointer; font-family: var(--ff-mono); }
.tweaks__seg button.on { background: var(--accent); color: var(--accent-ink); }

/* Tiny helpers ---------------------------------------------------- */
.hstack { display: flex; align-items: center; gap: 10px; }
.vstack { display: flex; flex-direction: column; gap: 10px; }
.mono { font-family: var(--ff-mono); }
.fg-2 { color: var(--fg-2); }
.fg-3 { color: var(--fg-3); }

/* Variation sub-labels above each column */
.variation-label {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-1);
}
.variation-label h2 {
  margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
}
.variation-label .tag {
  font-family: var(--ff-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-2);
  padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px;
}


/* ================================================================
   NOTIFICATIONS PANEL
   ================================================================ */

/* Bell button — unread state */
.topbar__bell {
  position: relative;
}
.topbar__bell.has-unread { color: var(--fg-0); }
.topbar__bell-dot {
  /* Per gap doc §3.2 — pure --danger dot, no count. */
  position: absolute;
  top: 4px; right: 4px;
  width: 8px; height: 8px;
  padding: 0;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 1.5px var(--ink-0);
  /* Hide any nested text content during transitions or fallback paths. */
  font-size: 0;
  line-height: 0;
}
.topbar__bell-dot--pending {
  /* Pulsing variant shown while the first notification fetch is in flight. */
  opacity: 0.7;
  animation: topbar-bell-pulse 1.6s ease-in-out infinite;
}
@keyframes topbar-bell-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.85; }
}
.topbar__bell.is-dnd { color: var(--fg-3); }

/* Scrim (transparent — closes panel but doesn't dim) */
.notifpanel-scrim {
  position: fixed; inset: 0;
  z-index: 180;
  background: transparent;
}

/* Panel ---------------------------------------------------------- */
.notifpanel {
  position: fixed;
  width: 420px;
  max-width: calc(100vw - 24px);
  max-height: min(780px, calc(100vh - 80px));
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 72px rgba(0,0,0,0.55), 0 2px 0 rgba(255,255,255,0.02) inset;
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 200;
  animation: notif-pop-in 160ms cubic-bezier(.2,.8,.2,1);
}
@keyframes notif-pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* Header --------------------------------------------------------- */
.notifpanel__header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.notifpanel__title-row {
  display: flex; align-items: center; gap: 10px;
}
.notifpanel__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--fg-0);
  flex: 1;
}
.notifpanel__unread-count {
  font-family: var(--ff-mono);
  font-size: 10.5px; font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--crit, oklch(0.66 0.20 27));
  color: #fff;
  letter-spacing: 0.02em;
}
.notifpanel__header-actions { display: flex; gap: 2px; }
.notifpanel__hbtn {
  width: 26px; height: 26px;
  border: 0; border-radius: 6px;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 80ms, color 80ms;
}
.notifpanel__hbtn:hover { background: var(--ink-2); color: var(--fg-0); }
.notifpanel__hbtn.on { background: var(--ink-3); color: var(--accent); }

/* DND chip */
.notifpanel__dnd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  padding: 4px 8px 4px 6px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--accent), transparent 85%);
  border: 1px solid color-mix(in oklch, var(--accent), transparent 60%);
  color: var(--fg-1);
  font-size: 11px;
  font-family: var(--ff-mono);
}
.notifpanel__dnd-chip button {
  margin-left: 4px;
  background: transparent; border: 0;
  color: var(--accent);
  font-size: 10.5px;
  cursor: pointer;
  padding: 0 4px;
  text-decoration: underline;
  font-family: inherit;
}

/* Rufus voice row (V2 only) */
.notifpanel__voice {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.notifpanel__voice-text {
  flex: 1;
  font-size: 12px; color: var(--fg-1);
  line-height: 1.4;
  text-wrap: pretty;
}
.rufus-mark {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), color-mix(in oklch, var(--accent), var(--ink-0) 30%));
  color: var(--accent-ink, #fff);
  display: grid; place-items: center;
  font-family: var(--ff-mono);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: 0 2px 6px color-mix(in oklch, var(--accent), transparent 75%);
}

/* Tabs (V1 only) */
.notifpanel__tabs {
  display: flex; gap: 2px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--ink-1);
}
.notifpanel__tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: transparent; border: 0;
  color: var(--fg-2);
  font-size: 12px;
  cursor: pointer;
  border-radius: 6px;
  font-family: var(--ff-sans);
  transition: background 80ms, color 80ms;
}
.notifpanel__tab:hover { color: var(--fg-0); background: var(--ink-2); }
.notifpanel__tab.on {
  color: var(--fg-0);
  background: var(--ink-3);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.notifpanel__tab-count {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-3);
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink-0);
}
.notifpanel__tab.on .notifpanel__tab-count { color: var(--accent); border-color: color-mix(in oklch, var(--accent), transparent 60%); }

/* List ----------------------------------------------------------- */
.notifpanel__list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 0;
}

/* Groups (V2 only) */
.notifpanel__group + .notifpanel__group {
  border-top: 1px solid var(--line-soft);
  margin-top: 2px;
}
.notifpanel__group--quiet { opacity: 0.78; }
.notifpanel__group-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 14px 4px;
}
.notifpanel__group-label {
  font-family: var(--ff-mono);
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 600;
}
.notifpanel__group-count {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-3);
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  line-height: 1.4;
}
.notifpanel__group-sub {
  flex: 1;
  font-size: 10.5px;
  color: var(--fg-3);
  font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notifpanel__group--now .notifpanel__group-label { color: var(--crit, oklch(0.72 0.16 27)); }
.notifpanel__group--today .notifpanel__group-label { color: var(--accent); }

/* Row ------------------------------------------------------------ */
.notifrow {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  position: relative;
  transition: background 80ms;
  border-bottom: 1px solid var(--line-soft);
}
.notifrow:last-child { border-bottom: 0; }
.notifrow:hover { background: var(--ink-2); }
.notifrow.is-read { opacity: 0.72; }
.notifrow.is-read:hover { opacity: 0.9; }
.notifrow.is-complete { opacity: 0.55; }
.notifrow.compact { padding: 8px 14px; }

.notifrow__left {
  position: relative;
  width: 28px; height: 28px;
  flex-shrink: 0;
}
.notifrow__glyph {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  display: grid; place-items: center;
}
.notifrow__read-dot {
  position: absolute;
  top: -2px; right: -2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ink-1);
}

.notifrow__body {
  min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.notifrow__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-0);
  line-height: 1.35;
  text-wrap: pretty;
}
.notifrow.is-read .notifrow__title { font-weight: 400; color: var(--fg-1); }
.notifrow__sub {
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.4;
  margin-top: 2px;
  text-wrap: pretty;
}
.notifrow__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--fg-3);
  font-family: var(--ff-mono);
}
.notifrow__role-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px 1px 2px;
  border-radius: 999px;
  color: #fff;
  font-size: 10px; font-weight: 500;
  font-family: var(--ff-sans);
}
.notifrow__role-mark {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: grid; place-items: center;
  font-family: var(--ff-mono);
  font-size: 9px; font-weight: 700;
}
.notifrow__cat { color: var(--fg-2); }
.notifrow__dot { color: var(--fg-3); opacity: 0.6; }
.notifrow__snoozed { color: var(--accent); display: inline-flex; align-items: center; gap: 3px; }

/* Row actions ---------------------------------------------------- */
.notifrow__actions {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
  position: relative;
}
.notifrow__primary {
  padding: 5px 10px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--fg-1);
  border-radius: 6px;
  font-size: 11.5px; font-weight: 500;
  font-family: var(--ff-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: all 80ms;
}
.notifrow__primary:hover {
  border-color: var(--accent);
  color: var(--fg-0);
}
.notifrow__done {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-family: var(--ff-mono);
  color: oklch(0.72 0.14 145);
  background: color-mix(in oklch, oklch(0.72 0.14 145), transparent 88%);
  border-radius: 6px;
}
.notifrow__more {
  width: 26px; height: 26px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all 80ms;
}
.notifrow__more:hover, .notifrow__more.on {
  background: var(--ink-3);
  color: var(--fg-0);
  border-color: var(--line);
}

/* Row menu (popover) */
.notifrow__menu {
  position: absolute;
  top: 30px; right: 0;
  min-width: 180px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  padding: 4px;
  z-index: 10;
  animation: notif-menu-in 100ms ease-out;
}
@keyframes notif-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.notifrow__menu button {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: transparent; border: 0;
  color: var(--fg-1);
  font-size: 12px; font-family: var(--ff-sans);
  cursor: pointer;
  border-radius: 5px;
  text-align: left;
}
.notifrow__menu button:hover { background: var(--ink-3); color: var(--fg-0); }
.notifrow__menu button .menu-chev { margin-left: auto; color: var(--fg-3); }
.notifrow__menu-sep {
  height: 1px; background: var(--line-soft);
  margin: 4px 2px;
}
.notifrow__menu-destructive { color: var(--crit, oklch(0.72 0.16 27)) !important; }
.notifrow__menu--snooze button {
  justify-content: space-between;
}
.notifrow__snooze-hint {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-3);
  margin-left: auto;
}
.notifrow__menu-head {
  padding: 6px 8px 2px;
  font-family: var(--ff-mono);
  font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Empty state ---------------------------------------------------- */
.notifpanel__empty {
  padding: 40px 28px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.notifpanel__empty-rings {
  position: relative;
  width: 60px; height: 60px;
  margin-bottom: 4px;
}
.notifpanel__empty-rings span {
  position: absolute; inset: 0;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  animation: notif-breathe 3.6s ease-in-out infinite;
}
.notifpanel__empty-rings span:nth-child(1) { animation-delay: 0s; }
.notifpanel__empty-rings span:nth-child(2) { animation-delay: 1.2s; }
.notifpanel__empty-rings span:nth-child(3) { animation-delay: 2.4s; }
@keyframes notif-breathe {
  0%   { transform: scale(0.5); opacity: 0; border-color: var(--accent); }
  30%  { opacity: 0.7; }
  100% { transform: scale(1.2); opacity: 0; }
}
.notifpanel__empty-title {
  font-size: 14px; font-weight: 500; color: var(--fg-0);
}
.notifpanel__empty-sub {
  font-size: 12px; color: var(--fg-3);
  font-style: italic;
}

/* Footer --------------------------------------------------------- */
.notifpanel__footer {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  background: var(--ink-0);
  flex-shrink: 0;
}
.notifpanel__footer-link {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 0;
  color: var(--fg-2);
  font-size: 11.5px;
  cursor: pointer;
  font-family: var(--ff-sans);
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all 80ms;
}
.notifpanel__footer-link:hover { color: var(--fg-0); background: var(--ink-2); }
.notifpanel__footer-link:disabled { color: var(--fg-3); cursor: default; }
.notifpanel__footer-link:disabled:hover { background: transparent; }
.notifpanel__footer-spacer { flex: 1; }

/* Settings flyout (appears inside panel) ------------------------- */
.notifsettings {
  position: absolute;
  inset: 0;
  background: var(--ink-1);
  z-index: 15;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: notif-slide-in 200ms cubic-bezier(.2,.8,.2,1);
}
@keyframes notif-slide-in {
  from { transform: translateX(30px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.notifsettings__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 600;
  color: var(--fg-0);
}
.notifsettings__head button {
  width: 26px; height: 26px;
  border: 0; border-radius: 6px;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  display: grid; place-items: center;
}
.notifsettings__head button:hover { background: var(--ink-2); color: var(--fg-0); }
.notifsettings__section {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.notifsettings__section:last-child { border-bottom: 0; flex: 1 1 auto; overflow-y: auto; }
.notifsettings__section-label {
  font-family: var(--ff-mono);
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 8px;
}
.notifsettings__toggle-row,
.notifsettings__cat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 2px;
  font-size: 12.5px;
  color: var(--fg-1);
  cursor: pointer;
}
.notifsettings__toggle-row span { flex: 1; }
.notifsettings__toggle-row input[type="checkbox"],
.notifsettings__cat-row input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px; height: 14px;
  cursor: pointer;
}
.notifsettings__cat-icon {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.notifsettings__cat-label { flex: 1; font-size: 12.5px; }
.notifsettings__dnd-times {
  display: flex; gap: 10px;
  margin-top: 6px;
}
.notifsettings__dnd-times label {
  flex: 1;
  font-size: 11px;
  color: var(--fg-2);
  display: flex; flex-direction: column; gap: 4px;
}
.notifsettings__dnd-times input[type="time"] {
  padding: 4px 6px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--fg-0);
  font-family: var(--ff-mono);
  font-size: 12px;
}


/* ================================================================
   NOTIFICATION TOASTS — ephemeral popovers for fresh alerts
   ================================================================ */
.notif-toast-host {
  position: fixed;
  top: 64px;
  right: 16px;
  z-index: 250;
  display: flex; flex-direction: column;
  gap: 8px;
  width: 360px;
  max-width: calc(100vw - 32px);
  pointer-events: none; /* clicks fall through gaps */
}
.notif-toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 32px 1fr 24px;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 12px 12px 10px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.02) inset;
  cursor: pointer;
  animation: notif-toast-in 220ms cubic-bezier(.2,.8,.2,1);
  transition: border-color 80ms, transform 80ms;
}
.notif-toast:hover {
  border-color: var(--accent);
  transform: translateX(-1px);
}
@keyframes notif-toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}
.notif-toast__glyph {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.notif-toast__body {
  min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.notif-toast__title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-0);
  line-height: 1.35;
  text-wrap: pretty;
}
.notif-toast__sub {
  font-size: 11.5px;
  color: var(--fg-2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}
.notif-toast__dismiss {
  width: 22px; height: 22px;
  border: 0; border-radius: 5px;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 80ms;
}
.notif-toast__dismiss:hover { background: var(--ink-3); color: var(--fg-0); }


/* ================================================================
   TODAY (Phase 4) — hero cockpit, swimlanes, habit cards
   ================================================================ */
.today-hero {
  display: grid;
  grid-template-columns: 1fr 180px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.today-hero__main {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.today-hero__topline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.today-hero__kpis {
  display: flex;
  gap: 18px;
  align-items: baseline;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
  flex-wrap: wrap;
}
.today-hero__kpi { text-align: right; }
.today-hero__kpi-num {
  color: var(--fg-0);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.today-hero__kpi.warn .today-hero__kpi-num { color: oklch(0.76 0.14 75); }
.today-hero__kpi-label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.today-hero__energy {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
}
.today-hero__energy-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.today-hero__energy-bar {
  flex: 1;
  height: 6px;
  background: var(--ink-4);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
}
.today-hero__energy-bar > span { display: block; height: 100%; }
.today-hero__energy-total { white-space: nowrap; }
.today-hero__radar {
  border-left: 1px solid var(--line);
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.today-hero__radar-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.today-hero__role-filters {
  display: flex;
  gap: 4px;
  margin-right: 8px;
}
.today-hero__role-mark {
  /* Per gap doc §7.1 — Focus-file role filters render as 20×20 mono-letter
   * squares in a horizontal segmented control. Soft tint of the role
   * color with the letter in full strength; active state lifts via the
   * .picked rule below using --accent-soft + --accent ring. */
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: color-mix(in oklch, var(--role-color, var(--accent)) 16%, transparent);
  color: var(--role-color, var(--fg-1));
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}
.today-hero__role-mark--all {
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--fg-3);
  font-weight: 500;
}
.today-hero__streak {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.today-swimlanes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 4px;
}
.today-swimlane {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink-1);
  overflow: hidden;
  min-height: 180px;
  display: flex;
  flex-direction: column;
}
.today-swimlane__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.today-swimlane__label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.today-swimlane__count {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.today-swimlane__body { padding: 8px 10px; flex: 1; }
.today-swimlane__empty {
  /* Per gap doc §7.1 — drop-target placeholder. */
  color: var(--fg-3);
  font-family: var(--ff-sans);
  font-size: 13px;
  font-style: italic;
  padding: 20px 4px;
}
.today-card {
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--ink-2);
  border-radius: 8px;
  border-left: 3px solid var(--fg-3);
  cursor: pointer;
  transition: background 0.12s;
}
.today-card:hover { background: var(--ink-3); }
.today-card__title {
  font-size: 13.5px;
  color: var(--fg-0);
  margin-bottom: 5px;
  font-weight: 500;
}
.today-card__meta {
  display: flex;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-2);
  flex-wrap: wrap;
}

/* 4th time-of-day bucket — Unscheduled. Full-width row below the Mo/Af/Ev
   columns per the mock's TIMELINE[3] slot. Also acts as a drop target for
   moving tasks BACK to unscheduled (removes their TimeOfDaySection). */
.today-unscheduled {
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--ink-1);
  overflow: hidden;
  transition: background 0.12s, border-color 0.12s;
}
.today-unscheduled.drag-over {
  border-color: var(--accent);
  border-style: solid;
  background: color-mix(in oklch, var(--accent) 8%, var(--ink-1));
}
.today-unscheduled__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.today-unscheduled__label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.today-unscheduled__count {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.today-unscheduled__hint {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  font-style: italic;
}
.today-unscheduled__body { padding: 8px 10px; }
.today-unscheduled__empty {
  color: var(--fg-3);
  font-size: 12px;
  font-style: italic;
  padding: 14px 4px;
  text-align: center;
}

.today-habit-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.today-habit-card {
  background: var(--ink-1);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.today-habit-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.today-habit-card__swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.today-habit-card__slot {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.today-habit-card__streak {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.today-habit-card__name {
  font-size: 14px;
  color: var(--fg-0);
  font-weight: 500;
}
.today-habit-card__dots {
  display: flex;
  gap: 3px;
}
.today-habit-card__status {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  align-self: flex-start;
}
.today-habit-card__status:hover { color: var(--fg-0); background: var(--ink-3); }
.today-habit-card__status.done {
  color: oklch(0.72 0.14 160);
  background: color-mix(in oklch, oklch(0.72 0.14 160), transparent 88%);
}
.today-habit-card { cursor: pointer; }
.today-habit-card:hover { border-color: var(--fg-3); }
.today-swimlane.drag-over {
  background: color-mix(in oklch, var(--accent), transparent 92%);
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
}

.today-empty {
  color: var(--fg-3);
  font-size: 13px;
  font-style: italic;
  padding: 16px 4px;
}

.today-callout__actions {
  position: absolute;
  right: 16px;
  top: 16px;
  display: flex;
  gap: 6px;
}
.today-hero__role-mark { cursor: pointer; transition: background .12s ease, box-shadow .12s ease; }
.today-hero__role-mark:hover { background: color-mix(in oklch, var(--role-color, var(--accent)) 24%, transparent); }
.today-hero__role-mark.picked {
  /* Active state per gap doc §7.1 — accent ring + soft accent fill, not
   * a saturated role-color background. */
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.today-hero__role-mark--all.picked { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

.today-plan-list { display: flex; flex-direction: column; gap: 4px; }
.today-plan-list__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 4px 6px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
  border-bottom: 1px solid var(--line-soft);
}
.today-plan-list__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border-left: 3px solid var(--fg-3);
  background: var(--ink-2);
  border-radius: 6px;
  cursor: pointer;
}
.today-plan-list__row:hover { background: var(--ink-3); }
.today-plan-list__title { font-size: 13.5px; color: var(--fg-0); }
.today-plan-list__meta {
  display: flex;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-2);
}

@media (max-width: 1100px) {
  .today-habit-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 960px) {
  .today-hero {
    grid-template-columns: 1fr;
  }
  .today-hero__radar {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .today-swimlanes {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .today-habit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================================================
   TASKS (Phase 4) — views rail + toolbar + list
   ================================================================ */
.tasks-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  height: 100%;
  overflow: hidden;
  margin: calc(var(--gap) * -1.5) calc(var(--pad-x) * -2) calc(var(--gap) * -2);
  min-height: calc(100vh - 100px);
}

.views-rail {
  border-right: 1px solid var(--line);
  background: var(--ink-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.views-rail__head {
  padding: 12px 14px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  border-bottom: 1px solid var(--line-soft);
}
.views-rail__list { padding: 6px; flex: 1; overflow-y: auto; }
.views-rail__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  height: 32px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--fg-1);
  position: relative;
}
.views-rail__item:hover { background: var(--ink-2); }
.views-rail__item.active { background: var(--ink-3); color: var(--fg-0); }
.views-rail__item.active > .glyph { color: var(--accent); }
.views-rail__spine {
  position: absolute;
  left: -6px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.views-rail__name { font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.views-rail__count {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
/* TASK-VIEW-1 — rename / delete icons on user-saved view rows. Hidden by
   default so the rail looks clean; revealed on hover or when the row is
   active. */
.views-rail__icon {
  width: 22px; height: 22px;
  border: none; background: transparent;
  color: var(--fg-3);
  border-radius: 5px;
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms;
}
.views-rail__icon:hover { background: var(--ink-3); color: var(--fg-0); }
.views-rail__icon--danger:hover { color: oklch(0.70 0.18 25); }
/* TASK-VIEW-DEFAULT — pin glyph stays visible (full opacity) on the row that
   is the user's default, even when the row is neither hovered nor active, so
   the indicator is always discoverable. */
.views-rail__icon--default { opacity: 1; color: var(--accent); }
.views-rail__icon--default:hover { color: var(--accent); }
.views-rail__item:hover .views-rail__icon,
.views-rail__item.active .views-rail__icon { opacity: 1; }
.views-rail__foot {
  padding: 8px 10px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-2);
  font-size: 12.5px;
  cursor: pointer;
}

.tasks-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.tasks-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-0);
  flex-wrap: wrap;
}
.tasks-toolbar__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.tasks-toolbar__title h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-0);
}
.tasks-toolbar__count {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
}
.tasks-toolbar__spacer { flex: 1; }
.tasks-toolbar__group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tasks-toolbar__group-label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.tasks-toolbar__seg {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
}
.tasks-toolbar__seg-btn {
  border: 0;
  cursor: pointer;
  padding: 5px 10px;
  font-size: 11.5px;
  font-family: var(--ff-mono);
  background: transparent;
  color: var(--fg-2);
}
.tasks-toolbar__seg-btn.on {
  /* Per gap doc §7.3 / §8.3 — active state uses --accent-soft + --accent
   * text, matching the canonical .seg component, not --ink-3. */
  background: var(--accent-soft);
  color: var(--accent);
}
.tasks-toolbar__seg-btn--icon {
  padding: 6px 10px;
  display: grid;
  place-items: center;
}
.tasks-toolbar__seg-btn--icon.on { color: var(--accent); }
/* Standalone icon button in the toolbar — star / filter / overflow.
   Styled like the seg-btn but with no surrounding segmented frame. */
.tasks-toolbar__icon-btn {
  height: 28px;
  width: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--fg-2);
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.tasks-toolbar__icon-btn:hover {
  background: var(--ink-3);
  color: var(--fg-0);
}
.tasks-toolbar__icon-btn.on {
  color: var(--accent);
  background: var(--ink-3);
}
.tasks-toolbar__new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  cursor: pointer;
  font-weight: 600;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  /* MUX-2.5 — "+ New habit" was wrapping mid-word on narrow phones because
   * the chip was sized to its grid cell rather than its content. Forcing
   * the button to its intrinsic width and keeping the label on one line
   * fixes the wrap without changing desktop sizing. */
  white-space: nowrap;
  min-width: max-content;
}

.tasks-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0 40px;
}

.tasks-quickadd {
  margin: 8px 18px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--ink-1);
}
.tasks-quickadd input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--fg-0);
  font-size: 13px;
}

.tasks-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 6px;
}
.tasks-group-head__mark {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: var(--role-ink);
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
}
.tasks-group-head__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-0);
}
.tasks-group-head__count {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
}
.tasks-group-head__rule {
  flex: 1;
  height: 1px;
  background: var(--line-soft);
  margin-left: 8px;
}

.tasks-empty,
.tasks-placeholder {
  color: var(--fg-3);
  font-size: 13px;
  font-style: italic;
  padding: 32px 18px;
  text-align: center;
}

/* Tasks — bulk toolbar */
.tasks-bulkbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent);
}
.tasks-bulkbar__count {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  color: var(--fg-0);
  font-weight: 600;
}
.tasks-bulkbar__btn {
  border: 1px solid var(--line);
  background: var(--ink-1);
  color: var(--fg-1);
  padding: 5px 10px;
  border-radius: 7px;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  cursor: pointer;
}
.tasks-bulkbar__btn:hover { background: var(--ink-2); color: var(--fg-0); }
.tasks-bulkbar__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.tasks-bulkbar__btn--danger { color: oklch(0.70 0.18 25); }
.tasks-bulkbar__btn--danger:hover { background: color-mix(in oklch, oklch(0.70 0.18 25) 14%, transparent); color: oklch(0.70 0.18 25); }

/* TASK-BULK-1 — bulk-edit dialog row layout. Apply checkbox on the left,
   editor on the right; disabled editors fade out so the "No change" default
   is visually obvious. */
.bulk-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.bulk-row:last-of-type { border-bottom: none; }
.bulk-row__apply {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  color: var(--fg-1);
  cursor: pointer;
}
.bulk-row .role-new-input:disabled { opacity: 0.4; }

/* Tasks — detail drawer (right side) */
.task-drawer {
  position: fixed;
  top: 45px; /* below topbar */
  right: 0;
  bottom: 0;
  width: 560px;
  max-width: 100vw;
  background: var(--ink-1);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 20;
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.22);
}
.task-drawer__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.task-drawer__chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.task-drawer__mark {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--role-ink);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 10px;
}
.task-drawer__role {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.task-drawer__body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
}
.task-drawer__title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--fg-0);
}
.task-drawer__grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px 18px;
  font-size: 12.5px;
}
.task-drawer__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.task-drawer__desc {
  /* Mock renders descriptions in JetBrains Mono with the same feature
   * settings as the body — gives sub-titles a quieter, more "metadata"
   * feel that distinguishes them from the bolded heading above. */
  font-family: var(--ff-mono);
  color: var(--fg-1);
  line-height: 1.55;
  font-size: 10.5px;
  margin-top: 4px;
}
.task-drawer__foot {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 960px) {
  .task-drawer { width: 100%; }
}

/* Tasks — STUB-1 filter drawer + STUB-2 Board group-by bar */
.tasks-filter-drawer {
  margin: 8px 18px;
  padding: 14px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tasks-filter-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 13px;
}
.tasks-filter-drawer__body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.tasks-filter-drawer__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tasks-filter-drawer__field label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-2);
}
.tasks-filter-drawer__field select {
  padding: 6px 8px;
  background: var(--ink-2);
  color: var(--fg-1);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
}
.tasks-filter-drawer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tasks-filter-drawer__chip {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--fg-1);
  cursor: pointer;
}
.tasks-filter-drawer__chip.on {
  border-color: transparent;
}
.tasks-filter-drawer__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.tasks-board__bar {
  margin: 8px 18px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tasks-board__bar-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  margin-right: 4px;
}

/* Tasks — Board view */
.tasks-board {
  padding: 18px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 12px;
  overflow-x: auto;
}
.tasks-board__col {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 300px;
}
.tasks-board__col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.tasks-board__col-mark {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: var(--role-ink);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 10px;
}
.tasks-board__col-name { font-size: 13px; font-weight: 600; color: var(--fg-0); }
.tasks-board__col-count {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
}
.tasks-board__col-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.tasks-board__card {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--ink-2);
  border-left: 3px solid var(--fg-3);
  cursor: pointer;
}
.tasks-board__card:hover { background: var(--ink-3); }
.tasks-board__card-title {
  font-size: 13px;
  color: var(--fg-0);
  margin-bottom: 6px;
  line-height: 1.35;
}
.tasks-board__card-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-2);
  flex-wrap: wrap;
}
.tasks-board__card-meta .overdue { color: oklch(0.72 0.16 27); }
.tasks-board__add {
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--fg-3);
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}

/* Tasks — Timeline view */
.tasks-timeline {
  padding: 18px;
  overflow: auto;
}
.tasks-timeline__grid {
  display: inline-grid;
  min-width: max-content;
}
.tasks-timeline__corner {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--ink-0);
  padding: 6px 10px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line);
}
.tasks-timeline__day-label {
  padding: 6px 0;
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-3);
  border-bottom: 1px solid var(--line);
}
.tasks-timeline__day-label.today {
  color: var(--accent);
  background: var(--accent-soft);
}
.tasks-timeline__day-label.week-start {
  border-left: 1px solid var(--line-soft);
}
.tasks-timeline__role-label {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--ink-1);
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--line-soft);
}
.tasks-timeline__mark {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}
.tasks-timeline__row {
  position: relative;
  height: 48px;
  background: var(--ink-1);
  border-bottom: 1px solid var(--line-soft);
}
.tasks-timeline__bar {
  position: absolute;
  top: 10px;
  height: 28px;
  background: var(--ink-3);
  border-left: 3px solid var(--fg-3);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--fg-0);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}
.tasks-timeline__bar:hover { background: var(--ink-4); }

/* Tasks — Matrix (Eisenhower) */
.tasks-matrix {
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  min-height: 600px;
}
.tasks-matrix__quad {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background 0.12s, outline-color 0.12s;
}
.tasks-matrix__quad.drag-over {
  background: color-mix(in oklch, var(--accent), transparent 90%);
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
}
.tasks-matrix__card[draggable="true"] { cursor: grab; }
.tasks-matrix__card[draggable="true"]:active { cursor: grabbing; }
.tasks-board__add { cursor: pointer; }
.tasks-matrix__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 4px;
}
.tasks-matrix__dot { width: 8px; height: 8px; border-radius: 50%; }
.tasks-matrix__title { font-size: 13px; font-weight: 600; color: var(--fg-0); }
.tasks-matrix__count {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.tasks-matrix__sub {
  padding: 0 14px 10px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line-soft);
}
.tasks-matrix__list {
  padding: 10px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tasks-matrix__card {
  padding: 8px 10px;
  background: var(--ink-2);
  border-left: 3px solid var(--fg-3);
  border-radius: 6px;
  cursor: pointer;
}
.tasks-matrix__card:hover { background: var(--ink-3); }
.tasks-matrix__card-title {
  font-size: 13px;
  color: var(--fg-0);
  line-height: 1.35;
  margin-bottom: 4px;
}
.tasks-matrix__card-meta {
  display: flex;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-2);
}
.tasks-matrix__card-meta .overdue { color: oklch(0.72 0.16 27); }

/* Tasks — Calendar (5-week month) */
.tasks-calendar { padding: 18px; }
.tasks-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.tasks-calendar__dow {
  background: var(--ink-1);
  padding: 8px 10px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  letter-spacing: 0.08em;
}
.tasks-calendar__cell {
  background: var(--ink-1);
  min-height: 92px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
}
.tasks-calendar__cell.today {
  background: var(--accent-soft);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}
.tasks-calendar__cell.other-month { opacity: 0.55; }
.tasks-calendar__day {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
}
.tasks-calendar__cell.today .tasks-calendar__day {
  color: var(--fg-0);
  font-weight: 700;
}
.tasks-calendar__item {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--ink-2);
  border-left: 2px solid var(--fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  color: var(--fg-0);
}
.tasks-calendar__more {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-3);
}

/* Tasks — Graph (dependency lanes) */
.tasks-graph {
  margin: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink-1);
  overflow: auto;
}
.tasks-graph__lane {
  position: absolute;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.tasks-graph__lane-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.tasks-graph__node {
  position: absolute;
  width: 140px;
  background: var(--ink-2);
  border-left: 3px solid var(--fg-3);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--fg-0);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.tasks-graph__node:hover { background: var(--ink-3); }
.tasks-graph__node-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 3px;
}
.tasks-graph__node-date {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-3);
}

@media (max-width: 960px) {
  .tasks-shell { grid-template-columns: 1fr; }
  .views-rail { display: none; }
  .row { gap: 8px; padding-right: 8px; }
  .row__meta { flex-wrap: wrap; gap: 6px; min-width: 0; }
  .row__meta .chip,
  .row__meta .tag { white-space: nowrap; }
  .row__star { opacity: 0.7; }
  .tasks-toolbar__group-label { display: none; }
  .tasks-toolbar__seg-btn { padding: 5px 6px; font-size: 10.5px; }
  .tasks-shell { margin-left: 0; margin-right: 0; }
}
@media (max-width: 480px) {
  .row { grid-template-columns: 3px 20px 1fr; gap: 6px; height: auto; min-height: var(--row-h); padding: 6px 8px 6px 0; }
  .row.row--multi { grid-template-columns: 3px 20px 20px 1fr; }
  .row__meta { grid-column: 3 / -1; padding-left: 0; }
  .tasks-toolbar { padding: 8px 10px; gap: 6px; }
  .tasks-toolbar__title h1 { font-size: 15px; }
}

/* ================================================================
   HABITS (Phase 4) — 3-col card grid
   ================================================================ */
.habits-shell { padding: 4px 0 40px; }

/* Habits — Phase 4 Item 5: Garden sprite grid. */
.habits-garden {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 14px 0;
}
.habits-garden__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* HABIT-2 — bumped from 8px so the sprite has visual breathing room before
     the title row, and so any minor SVG overshoot can't appear to collide. */
  gap: 14px;
  padding: 18px 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink-1);
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}
.habits-garden__tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.habits-garden__sprite {
  display: grid;
  place-items: center;
  width: 48px;
  height: 64px;
  /* HABIT-2 — clamp any SVG that overshoots so it can't overlap the title. */
  overflow: hidden;
  flex-shrink: 0;
}
.habits-garden__sprite svg {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.habits-garden__name {
  font-size: 12.5px;
  color: var(--fg-0);
  font-weight: 500;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.habits-garden__streak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.habits-garden__tile.stage-5 .habits-garden__streak { color: oklch(0.76 0.14 75); }

/* Habits — RD-12: AI Coaching panel. Sits below the section head when open. */
.habits-coaching {
  border: 1px solid color-mix(in oklch, var(--accent) 40%, var(--line));
  border-radius: 10px;
  background: color-mix(in oklch, var(--accent) 6%, var(--ink-1));
  padding: 12px 14px;
  margin: 10px 0 14px;
}
.habits-coaching__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-1);
  margin-bottom: 10px;
}
.habits-coaching__summary-head {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.habits-coaching__summary {
  margin-bottom: 12px;
}
.habits-coaching__insight {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 10px;
  border-left: 2px solid var(--accent);
  background: var(--ink-1);
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--fg-1);
}
.habits-coaching__insight.muted { color: var(--fg-3); font-style: italic; border-left-color: var(--line); }
.habits-coaching__chat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.habits-coaching__msg {
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 13px;
  max-width: 80%;
}
.habits-coaching__msg.user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--accent-ink);
}
.habits-coaching__msg.ai {
  align-self: flex-start;
  background: var(--ink-2);
  color: var(--fg-0);
}
.habits-coaching__input {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}
.habits-coaching__input input {
  flex: 1;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-1);
  color: var(--fg-0);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.habits-coaching__input input:focus { border-color: var(--accent); }

.habits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.habit-card {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.habit-card:hover { border-color: var(--fg-3); background: var(--ink-2); }
.habit-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.habit-card__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.habit-card__name {
  font-size: 14px;
  color: var(--fg-0);
  font-weight: 500;
  flex: 1;
}
.habit-card__streak {
  font-family: var(--ff-mono);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.habit-card__week {
  display: flex;
  gap: 4px;
}
.habit-card__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
}
.habit-card__checkin {
  margin-left: auto;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-1);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: var(--ff-mono);
  font-size: 11px;
}
.habit-card__checkin:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.habit-card__checkin.done { color: var(--fg-3); cursor: default; }
.habit-card__checkin.done:hover { background: transparent; color: var(--fg-3); border-color: var(--line); }

/* Habits — List view.
   HABIT-4: stripped the row-paper fills so each habit row sits on the page
   paper instead of a brighter --ink-1 / --ink-2 panel. The group head keeps
   its band fill (it's a banner, not a row) and the colored left rail still
   visually wraps each role's group; row separation now comes from the
   border-bottom on each .habits-row. */
.habits-list { display: flex; flex-direction: column; gap: 4px; }
/* Per-role group header — matches the mock's "Work 1/4" band. Same visual
   language as projects-group__head so the two pages feel aligned. */
.habits-list__group-head {
  display: grid;
  grid-template-columns: 3px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 16px;
  background: var(--ink-1);
  border-bottom: 1px solid var(--line);
}
.habits-list__group-rail { height: 16px; border-radius: 2px; }
.habits-list__group-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-1);
}
.habits-list__group-count {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.habits-list__row {
  display: grid;
  grid-template-columns: 3px 1fr auto 100px auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  /* HABIT-4: row sits on the page paper; separation comes from the border. */
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.habits-list__row:last-child { border-bottom: 0; }
.habits-list__row:hover { background: var(--ink-2); }
.habits-list__rail { height: 20px; border-radius: 2px; }
.habits-list__name { font-size: 14px; color: var(--fg-0); }
.habits-list__dots { display: flex; gap: 3px; }
.habits-list__role { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.04em; }
.habits-list__streak {
  font-family: var(--ff-mono);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Habits — List view, mock-aligned (role-grouped). Each group is a card-
   like band with a colored left rail + role badge in the header, then a
   tinted body holding the dense rows. */
.habits-list__group {
  display: flex;
  flex-direction: column;
  /* HABIT-4: transparent so the group sits on the page paper. The colored
     left rail on the body still gives the role its visual stripe. */
  background: transparent;
}
.habits-list__group-head {
  /* Override the legacy 3-column grid above so we get badge + name +
     count + spacer + rate. */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: var(--ink-1);
  border-bottom: 1px solid var(--line);
}
.habits-list__group-badge {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent-ink);
  letter-spacing: 0;
}
.habits-list__group-spacer { flex: 1 1 auto; }
.habits-list__group-rate {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.habits-list__group-rate .muted {
  color: var(--fg-3);
  margin-left: 4px;
  letter-spacing: 0.06em;
}
.habits-list__group-body {
  /* The colored left rail is drawn here once per group, instead of
     once per row, so the group reads as a single block.
     HABIT-4: transparent background; rows separate via their border-bottom. */
  border-left: 3px solid var(--role-color, var(--line));
  background: transparent;
}

/* Habits — dense row inside a group. Eight columns:
   ring · main · 7-day grid · streak · 8w-rate · check-toggle. */
.habits-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto auto auto;
  align-items: center;
  gap: 18px;
  padding: 10px 18px 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.habits-row:last-child { border-bottom: 0; }
.habits-row:hover { background: var(--ink-3); }
.habits-row__ring { display: grid; place-items: center; width: 32px; height: 32px; }
.habits-row__main { min-width: 0; }
.habits-row__title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.habits-row__name { font-size: 14px; color: var(--fg-0); font-weight: 500; }
.habits-row__freq {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  background: var(--ink-3);
  padding: 1px 6px;
  border-radius: 3px;
}
.habits-row__progress-chip {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.habits-row__sub {
  display: flex;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  margin-top: 3px;
  letter-spacing: 0.02em;
}
.habits-row__sub-sep { color: var(--fg-3); opacity: 0.6; }

.habits-row__week { display: flex; flex-direction: column; gap: 3px; }
.habits-row__week-labels {
  display: grid;
  grid-template-columns: repeat(7, 14px);
  gap: 3px;
  font-family: var(--ff-mono);
  font-size: 9px;
  color: var(--fg-3);
  text-align: center;
  letter-spacing: 0;
}
.habits-row__week-dots {
  display: grid;
  grid-template-columns: repeat(7, 14px);
  gap: 3px;
}
.habits-row__week-dots .habit__dot { width: 14px; height: 14px; border-radius: 3px; }

.habits-row__streak {
  font-family: var(--ff-mono);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  justify-content: flex-end;
}
.habits-row__rate {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}

.habits-row__check {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--fg-3);
  border: 1.5px solid var(--line);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.habits-row__check:hover { color: var(--fg-0); border-color: var(--fg-2); }
.habits-row__check.done { color: var(--accent-ink); }
.habits-row__check.done:hover { color: var(--accent-ink); }

/* ── Habits row — mobile (≤600px) ──
   Reshape the desktop 6-col grid into a 2-row, 5-col layout so the name
   gets the full row width (truncating with ellipsis on overflow) and the
   meta strip (dots · streak · rate) sits below it. The check button spans
   both rows on the right edge. Row markup is unchanged. */
@media (max-width: 600px) {
  .habits-row {
    grid-template-columns:
      28px                 /* 1  ring */
      minmax(0, 1fr)       /* 2  main (row 1) / week dots (row 2) */
      auto                 /* 3  streak */
      auto                 /* 4  rate */
      32px;                /* 5  check */
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 4px;
    padding: 9px 12px 9px 10px;
    align-items: center;
  }

  /* Row 1 */
  .habits-row__ring  { grid-column: 1;          grid-row: 1; width: 28px; height: 28px; }
  .habits-row__main  { grid-column: 2 / span 3; grid-row: 1; min-width: 0; }
  .habits-row__check { grid-column: 5;          grid-row: 1 / span 2;
                       width: 32px; height: 32px; align-self: center; }

  /* Title — single line, truncate name first; freq tag + progress chip stay inline */
  .habits-row__title         { flex-wrap: nowrap; gap: 6px; min-width: 0; }
  .habits-row__name          { flex: 1 1 auto; min-width: 0;
                               white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                               font-size: 14.5px; }
  .habits-row__freq          { flex: 0 0 auto; }
  .habits-row__progress-chip { flex: 0 0 auto; font-size: 10px; white-space: nowrap; }

  /* Subtitle stays in the title block but truncates instead of wrapping */
  .habits-row__sub        { font-size: 10.5px; margin-top: 2px;
                            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                            display: block; }
  .habits-row__sub:empty  { display: none; margin-top: 0; }
  .habits-row__sub > span { display: inline; }

  /* Row 2 — dots col 2, streak col 3, rate col 4 (cols 1 and 5 are ring + check) */
  .habits-row__week        { grid-column: 2; grid-row: 2; flex-direction: row;
                             align-items: center; gap: 0; min-width: 0; }
  .habits-row__week-labels { display: none; }
  .habits-row__week-dots   { grid-template-columns: repeat(7, 12px); gap: 3px; }
  .habits-row__week-dots .habit__dot { width: 12px; height: 12px; border-radius: 2px; }

  .habits-row__streak { grid-column: 3; grid-row: 2; font-size: 11px;
                        min-width: 0; justify-self: end; }
  .habits-row__rate   { grid-column: 4; grid-row: 2; font-size: 11px;
                        min-width: 30px; justify-self: end; }

  /* Group header — tighten to match the new row density */
  .habits-list__group-head { padding: 7px 12px; }
}

/* Habits cockpit — 4 composite cards.
   HABIT-3: re-flowed as discrete rounded-rectangle cards with 12px gaps,
   matching the Notifications + Journal cockpits. The wrapper carries no
   background or border now — each card stands alone on the page paper. */
.habits-cockpit {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: var(--gap);
}
@media (max-width: 1100px) {
  .habits-cockpit { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .habits-cockpit { grid-template-columns: 1fr; }
}
.habits-cockpit__card {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 130px;
}
.habits-cockpit__head {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.habits-cockpit__hero {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.habits-cockpit__num {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-0);
  line-height: 1;
}
.habits-cockpit__num--warn { color: oklch(0.70 0.18 25); }
.habits-cockpit__num-unit {
  font-size: 18px;
  color: var(--fg-2);
  font-weight: 500;
}
.habits-cockpit__hero-meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
}
.habits-cockpit__pct-pill {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.habits-cockpit__progress-bar {
  height: 4px;
  background: var(--ink-4);
  border-radius: 2px;
  overflow: hidden;
}
.habits-cockpit__progress-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}
.habits-cockpit__foot {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.habits-cockpit__foot--icon { color: var(--fg-2); }
.habits-cockpit__sep { color: var(--fg-3); opacity: 0.6; }
.habits-cockpit__foot .delta-down { color: oklch(0.70 0.18 25); }
.habits-cockpit__foot .delta-up   { color: oklch(0.72 0.14 160); }
.habits-cockpit__spark {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 36px;
}

/* Habits toolbar — text+icon pill button (Filter / Coaching). Uses the
   same border/typography as .tasks-toolbar__seg-btn but stands on its
   own without the segmented frame. */
.habits-toolbar__pill {
  border: 1px solid var(--line);
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.habits-toolbar__pill:hover { background: var(--ink-3); color: var(--fg-0); }

/* Habits — Stacks view */
.habits-stacks { display: flex; flex-direction: column; gap: 16px; }
.habits-stack {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.habits-stack__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.habits-stack__label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.habits-stack__count {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.habits-stack__progress {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
}
.habits-stack__row {
  display: grid;
  grid-template-columns: 3px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.habits-stack__row:last-child { border-bottom: 0; }
.habits-stack__row:hover { background: var(--ink-2); }

/* Habits — Heatmap view */
.habits-heatmap {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  overflow-x: auto;
}
.habits-heatmap__axis {
  display: flex;
  gap: 0;
  margin-left: 160px;
  margin-bottom: 8px;
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-3);
}
.habits-heatmap__axis-label {
  width: calc((100% - 160px) / 6);
  min-width: 42px;
  letter-spacing: 0.06em;
}
.habits-heatmap__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.habits-heatmap__label {
  font-size: 13px;
  color: var(--fg-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.habits-heatmap__cells {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  gap: 2px;
}
.habits-heatmap__cell {
  aspect-ratio: 1 / 1;
  min-height: 14px;
  background: var(--ink-3);
  border-radius: 2px;
}
.habits-heatmap__cell.today {
  outline: 1px solid var(--fg-2);
  outline-offset: 1px;
}

/* Habits — Stats view */
.habits-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.habits-stats__card {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.habits-stats__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.habits-stats__value {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
}
.habits-stats__sub {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
}

@media (max-width: 960px) {
  .habits-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Habits — Analytics view (Phase 4.15). Mirrors the mock: KPI strip
   followed by daily-bars + by-role panel, then best/needs-attention/
   leaderboard cards. */
.habits-analytics {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.habits-analytics__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.habits-analytics__kpi {
  background: var(--ink-1);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.habits-analytics__kpi-label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.habits-analytics__kpi-num {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-0);
  margin-top: 4px;
  line-height: 1.05;
}
.habits-analytics__kpi-num.is-good   { color: var(--ok); }
.habits-analytics__kpi-num.is-bad    { color: var(--danger); }
.habits-analytics__kpi-num.is-streak { color: var(--warn); }
.habits-analytics__kpi-unit {
  font-size: 18px;
  font-weight: 500;
  margin-left: 2px;
  opacity: 0.8;
}
.habits-analytics__kpi-sub {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.habits-analytics__row {
  display: grid;
  gap: 14px;
}
.habits-analytics__row--charts { grid-template-columns: 1.6fr 1fr; }
.habits-analytics__row--lists  { grid-template-columns: 1fr 1fr 1fr; }

.habits-analytics__panel {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.habits-analytics__panel-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.habits-analytics__panel-spacer { flex: 1; }
.habits-analytics__panel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-0);
}
.habits-analytics__panel-title--solo { margin-bottom: 4px; }
.habits-analytics__panel-meta {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Daily-completions bar chart */
.habits-analytics__bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
}
.habits-analytics__bar {
  flex: 1;
  min-width: 4px;
  background: var(--fg-2);
  opacity: 0.7;
  border-radius: 3px 3px 0 0;
  transition: background .12s, opacity .12s;
}
.habits-analytics__bar.is-full {
  background: var(--ok);
  opacity: 0.9;
}
.habits-analytics__bar.is-today {
  background: var(--accent);
  opacity: 1;
}

/* By-role panel */
.habits-analytics__roles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.habits-analytics__role-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.habits-analytics__role-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.habits-analytics__role-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.habits-analytics__role-name {
  font-size: 12.5px;
  color: var(--fg-1);
}
.habits-analytics__role-count {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.habits-analytics__role-pct {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
}
.habits-analytics__role-bar {
  height: 4px;
  background: var(--ink-4);
  border-radius: 2px;
  overflow: hidden;
}
.habits-analytics__role-bar > span {
  display: block;
  height: 100%;
  border-radius: 2px;
}

/* Best / Needs-attention rank lists */
.habits-analytics__rank {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.habits-analytics__rank-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 10px;
  align-items: center;
}
.habits-analytics__rank-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.habits-analytics__rank-name {
  font-size: 13px;
  color: var(--fg-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.habits-analytics__rank-pct {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.habits-analytics__rank-pct.is-good { color: var(--ok); }
.habits-analytics__rank-pct.is-bad  { color: var(--danger); }

/* Streak leaderboard */
.habits-analytics__leader {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.habits-analytics__leader-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.habits-analytics__leader-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.habits-analytics__leader-name {
  font-size: 12.5px;
  color: var(--fg-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.habits-analytics__leader-streak {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  color: var(--warn);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}
.habits-analytics__leader-bar {
  height: 5px;
  background: var(--ink-4);
  border-radius: 2px;
  overflow: hidden;
}
.habits-analytics__leader-bar > span {
  display: block;
  height: 100%;
  border-radius: 2px;
}

@media (max-width: 1100px) {
  .habits-analytics__row--charts { grid-template-columns: 1fr; }
  .habits-analytics__row--lists  { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .habits-analytics__kpis { grid-template-columns: repeat(2, 1fr); }
}

/* Habit detail — inline 30-day heatmap in the drawer */
.habit-detail-heatmap {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 3px;
  margin-top: 6px;
}

/* ================================================================
   GOALS (Phase 4) — list with progress bar
   ================================================================ */
.goals-shell { padding: 4px 0 40px; }

/* Phase 4.13b — left horizon rail layout. Mirrors the Tasks ViewsRail
   visually so the two pages feel cohesive. */
.goals-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  margin-top: 12px;
}

/* Goals — Phase 3 Item 7: status filter chips + group-by toggle. */
.goals-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.goals-filters__chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.goals-filters__chip {
  /* Mock uses rounded rectangles, not pills — small radius keeps them
   * compact and consistent with the segmented view-mode buttons. Mono
   * type matches the rest of the page's metadata chrome. */
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--ink-1);
  color: var(--fg-2);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  cursor: pointer;
  transition: all 0.12s;
}
.goals-filters__chip:hover { background: var(--ink-2); color: var(--fg-0); }
.goals-filters__chip.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--fg-0);
}
.goals-filters__group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.goals-filters__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.goals-horizon-rail {
  /* Mock has no card chrome on the sidebar — just a vertical divider on
   * the right edge separating it from the main content. */
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: 6px 12px 6px 0;
  align-self: start;
  position: sticky;
  top: 60px;
}
.goals-horizon-rail__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 6px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.goals-horizon-rail__list { display: flex; flex-direction: column; gap: 2px; }
.goals-horizon-rail__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 7px;
  padding: 7px 10px;
  cursor: pointer;
  color: var(--fg-1);
  font-size: 13px;
  text-align: left;
}
.goals-horizon-rail__item:hover { background: var(--ink-2); }
.goals-horizon-rail__item.active {
  background: var(--ink-3);
  color: var(--fg-0);
}
.goals-horizon-rail__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goals-horizon-rail__count {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.goals-main { min-width: 0; }
@media (max-width: 900px) {
  .goals-layout { grid-template-columns: 1fr; }
  .goals-horizon-rail { position: static; }
}
/* Horizon group head — "Life / 2026" bands above rows. The label sits
 * heavier than the descriptor + count so the section reads as a real
 * header, matching the mock's hierarchy. Children control their own type;
 * the parent only handles layout. */
.goals-group-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 16px 4px 8px;
  color: var(--fg-3);
}
.goals-group-head__label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-0);
  text-transform: none;
}
.goals-group-head__count {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.goal-row {
  /* Flex row: ribbon | body (grows) | optional metric | progress | pace | status.
   * Previous grid layout (4 columns) overlapped pace + status into the
   * same auto cell; flex with min-width caps lets each chip take its own
   * inline space and stay legible. */
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background 0.12s;
}
.goal-row:hover { background: var(--ink-2); }
.goal-row__ribbon { width: 3px; height: 36px; border-radius: 0 2px 2px 0; flex: 0 0 auto; }
.goal-row__body { flex: 1 1 auto; min-width: 0; }
.goal-row__title {
  font-size: 14.5px;
  color: var(--fg-0);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goal-row__meta {
  display: flex;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-2);
}
.goal-row__progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 200px;
  flex: 0 0 auto;
}
.goal-row__bar {
  height: 6px;
  background: var(--ink-4);
  border-radius: 3px;
  overflow: hidden;
}
.goal-row__bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
}
.goal-row__pct {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-2);
  text-align: right;
}
.goal-row__status {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.goal-row__status.done {
  color: oklch(0.72 0.14 160);
  border-color: oklch(0.72 0.14 160 / 0.4);
}

/* Goals — RD-4 — metric column + pace badge. */
.goal-row__metric {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-1);
  padding: 3px 8px;
  border: 1px dashed var(--line);
  border-radius: 4px;
  white-space: nowrap;
}
.goal-row__pace {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--fg-3);
  white-space: nowrap;
}
.goal-row__pace.pace-onpace {
  color: oklch(0.72 0.14 160);
  border-color: oklch(0.72 0.14 160 / 0.4);
}
.goal-row__pace.pace-ahead {
  color: oklch(0.78 0.14 220);
  border-color: oklch(0.78 0.14 220 / 0.4);
}
.goal-row__pace.pace-behind {
  color: oklch(0.70 0.18 25);
  border-color: oklch(0.70 0.18 25 / 0.5);
}

/* ================================================================
   GOALS — Phase 5 redesign: composite cockpit, hierarchy sidebar,
   tabular list, color-dot status filters.
   ================================================================ */

/* Status dots — shared chrome used by chips, sidebar items, table rows. */
.goals-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--fg-3);
}
.goals-status-dot.dot-onpace,
.goals-status-dot.dot-in-progress,
.goals-status-dot.dot-almost   { background: oklch(0.72 0.14 160); }
.goals-status-dot.dot-atrisk,
.goals-status-dot.dot-overdue  { background: oklch(0.78 0.16 70); }
.goals-status-dot.dot-done     { background: oklch(0.78 0.14 220); }
.goals-status-dot.dot-paused   { background: var(--fg-3); }
.goals-status-dot.dot-dropped  { background: oklch(0.70 0.18 25); }
.goals-status-dot.dot-starting { background: oklch(0.85 0.10 80); }
.goals-status-dot.dot-ongoing  { background: var(--fg-3); }

/* Concentric "target" icon — outlined ring with a smaller filled dot inside.
 * Mock uses this in the hierarchy sidebar and at the start of each list-row
 * goal title. Color variants follow the same status-key vocabulary as the
 * solid dots. */
.goals-target {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  /* Both the outer ring and the inner dot follow --target-color (role color
   * via inline style; black when unassigned). */
  border: 1.5px solid var(--target-color, #000);
  flex: 0 0 auto;
  background: transparent;
}
.goals-target::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--target-color, #000);
  transform: translate(-50%, -50%);
}

/* Cockpit — 4 composite cards. Replaces the flat 5-cell strip. */
.goals-cockpit {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: var(--gap);
}
@media (max-width: 1100px) {
  .goals-cockpit { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .goals-cockpit { grid-template-columns: 1fr; }
}
.goals-cockpit__card {
  /* Mock uses a subtle "off page" surface — slightly darker than the page bg
   * (--ink-0) in light mode and slightly lighter in dark mode. --ink-1 is the
   * shared "paper" token used for the same effect across the redesign. */
  background: var(--ink-1);
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 130px;
}
.goals-cockpit__head {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.goals-cockpit__hero {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.goals-cockpit__num {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-0);
  line-height: 1;
}
.goals-cockpit__num-unit {
  font-size: 18px;
  color: var(--fg-2);
  font-weight: 500;
  margin-left: 2px;
}
.goals-cockpit__hero-meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.goals-cockpit__chip-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.goals-cockpit__sep { color: var(--fg-3); }
.goals-cockpit__split-bar {
  display: flex;
  height: 6px;
  background: var(--ink-4);
  border-radius: 3px;
  overflow: hidden;
}
.goals-cockpit__split-bar .seg { display: block; height: 100%; }
.goals-cockpit__split-bar .seg-onpace { background: oklch(0.72 0.14 160); }
.goals-cockpit__split-bar .seg-atrisk { background: oklch(0.78 0.16 70); }
.goals-cockpit__foot {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  margin-top: auto;
}
.goals-cockpit__pace-pill {
  font-family: var(--ff-mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.goals-cockpit__pace-pill.pace-ahead {
  color: oklch(0.72 0.14 160);
  border-color: oklch(0.72 0.14 160 / 0.4);
}
.goals-cockpit__pace-pill.pace-behind {
  color: oklch(0.70 0.18 25);
  border-color: oklch(0.70 0.18 25 / 0.5);
}
.goals-cockpit__pace-pill.pace-onpace {
  color: var(--fg-2);
}
/* Year Pace — dual progress bars. */
.goals-cockpit__dual {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.goals-cockpit__dual-row {
  display: grid;
  grid-template-columns: 80px 1fr 36px;
  align-items: center;
  gap: 8px;
}
.goals-cockpit__dual-label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  text-transform: lowercase;
}
.goals-cockpit__dual-bar {
  height: 5px;
  background: var(--ink-4);
  border-radius: 3px;
  overflow: hidden;
}
.goals-cockpit__dual-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
}
.goals-cockpit__dual-bar > .bar-progress { background: oklch(0.72 0.14 160); }
.goals-cockpit__dual-bar > .bar-elapsed  { background: var(--fg-3); }
.goals-cockpit__dual-val {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Momentum — mini bar chart. */
.goals-cockpit__sparkbars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 36px;
}
.goals-cockpit__bar {
  flex: 1 1 auto;
  min-width: 8px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
}
.goals-cockpit__bar--empty {
  background: var(--ink-4);
  height: 4px !important;
  align-self: flex-end;
}
/* Alignment — orphaned/underfed pair + role coverage strip. */
.goals-cockpit__align-row {
  display: flex;
  gap: 24px;
}
.goals-cockpit__align-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.goals-cockpit__align-hint {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-3);
}
.goals-cockpit__role-bars {
  display: flex;
  height: 6px;
  gap: 2px;
  border-radius: 3px;
  overflow: hidden;
}
.goals-cockpit__role-bar { display: block; height: 100%; min-width: 4px; }
.goals-cockpit__role-key {
  display: inline-flex;
  gap: 6px;
  margin-left: 6px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.goals-cockpit__role-tag { font-weight: 500; }

/* Hierarchy sidebar — nested parent / child rows + status dot. */
.goals-horizon-rail__item {
  /* Override grid so the dot+name+count flow works for parent and child rows. */
  display: flex;
  align-items: center;
  gap: 8px;
}
.goals-horizon-rail__item.is-child {
  padding-left: 24px;
  font-size: 12.5px;
  color: var(--fg-2);
}
.goals-horizon-rail__item.is-parent { font-weight: 500; }
.goals-horizon-rail__item .goals-horizon-rail__name { flex: 1 1 auto; min-width: 0; }
.goals-horizon-rail__sub {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 10px 10px 4px;
}
/* Unordered-list bullet preceding the target icon — colored from the
 * goal/role color so the sidebar reads as a list with status + identity. */
.goals-horizon-rail__bullet {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--fg-3);
}

/* Status filter chips with leading color dot + STATUS title. */
.goals-filters__title {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-right: 6px;
  align-self: center;
}
.goals-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Filter popover — role + horizon multi-select. */
.goals-filter-wrap { position: relative; display: inline-block; margin-left: 6px; }
.goals-filter-btn.is-dirty { color: var(--accent); }
.goals-filter-btn__count {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 0 5px;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.goals-filter-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 220px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.18);
}
.goals-filter-popover__head {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 4px;
  margin-bottom: 2px;
}
.goals-filter-popover__check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  font-size: 12.5px;
  color: var(--fg-1);
  cursor: pointer;
  border-radius: 6px;
}
.goals-filter-popover__check:hover { background: var(--ink-2); }
.goals-filter-popover__check input[type="checkbox"] { accent-color: var(--accent); }
.goals-filter-popover__dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
}
.goals-filter-popover__sep {
  height: 1px;
  background: var(--line);
  margin: 6px 0;
}
.goals-filter-popover__foot {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  gap: 6px;
}
.goals-filter-popover__clear,
.goals-filter-popover__apply {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--fg-2);
  padding: 5px 10px;
  font-family: var(--ff-mono);
  font-size: 11px;
  cursor: pointer;
}
.goals-filter-popover__clear:hover { background: var(--ink-2); color: var(--fg-0); }
.goals-filter-popover__apply { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* New-goal button — primary action, accent-filled per the mock. Override the
 * .sec__action mono-caps treatment with the canonical primary look so it
 * stands out as the page's main CTA. */
.goals-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 7px;
  padding: 6px 12px;
  font-family: var(--ff-mono);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  cursor: pointer;
}
.goals-new-btn:hover {
  background: color-mix(in oklch, var(--accent) 88%, var(--fg-0));
  color: var(--accent-ink);
}
.goals-new-btn__kbd {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  border: 1px solid color-mix(in oklch, var(--accent-ink) 35%, transparent);
  border-radius: 4px;
  padding: 1px 5px;
  background: color-mix(in oklch, var(--accent-ink) 12%, transparent);
  color: var(--accent-ink);
  margin-left: 2px;
}

/* View-mode segmented buttons grow to show icon + label inline. */
.tasks-toolbar__seg-btn .tasks-toolbar__seg-glyph { margin-right: 6px; }
.tasks-toolbar__seg-btn .tasks-toolbar__seg-text { vertical-align: middle; }

/* Tabular goal list — replaces the legacy single-row .goal-row layout. */
.goals-table {
  display: flex;
  flex-direction: column;
}
/* Card variant — each group's table sits inside a rounded "off page" surface
 * so the section reads as a discrete cluster, matching the mock. */
.goals-table--card {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}
.goals-table--card .goals-table__head {
  border-bottom: 1px solid var(--line);
}
.goals-table--card .goals-table__row {
  border-bottom: 1px solid var(--line-soft);
}
.goals-table--card .goals-table__row:last-child {
  border-bottom: 0;
}
.goals-table--card .goals-table__row:hover { background: var(--ink-2); }
.goals-table__head,
.goals-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 140px 220px 90px 60px;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
}
.goals-table__head {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-top: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.goals-table__row {
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background 0.12s;
}
.goals-table__row:hover { background: var(--ink-2); }
.goals-table__col { min-width: 0; }
.goals-table__col--goal { display: flex; flex-direction: column; gap: 4px; }
.goals-table__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.goals-table__status-mark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.goals-table__title {
  font-family: var(--ff-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goals-table__desc {
  /* Mock uses JetBrains Mono at 10.5px for the goal sub-title — gives it
   * a quieter "metadata line" feel below the bolded title. The body's
   * font-feature-settings (ss01, cv11, tnum) already apply. */
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  font-weight: 400;
  /* 13px target + 8px gap — keep description indented under the title, not
   * under the status icon. */
  padding-left: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goals-table__col--role {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 11.5px;
}
.goals-table__role-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.goals-table__role-name { color: var(--fg-1); }
.goals-table__metric {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.goals-table__metric--placeholder { color: var(--fg-3); }
.goals-table__col--progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.goals-table__col--progress .goal-row__bar {
  flex: 1 1 auto;
  min-width: 80px;
}
.goals-table__pct {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}
.goals-table__col--pace {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.goals-table__col--pace .pace-arrow { font-size: 10px; }
.goals-table__col--pace.pace-ahead  { color: oklch(0.72 0.14 160); }
.goals-table__col--pace.pace-behind { color: oklch(0.70 0.18 25); }
.goals-table__col--pace.pace-onpace { color: var(--fg-2); }
.goals-table__col--pace.pace-ongoing { color: var(--fg-3); letter-spacing: 0.06em; text-transform: uppercase; }
.goals-table__col--due {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.goals-table__due-empty { color: var(--fg-3); }

/* Sub-descriptor on group head (e.g. "· this year"). */
.goals-group-head__sub {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--fg-3);
}

/* Compact tabular layout on narrow viewports. */
@media (max-width: 1100px) {
  .goals-table__head,
  .goals-table__row {
    grid-template-columns: minmax(0, 1fr) 90px 160px 70px 50px;
  }
  .goals-table__col--metric { display: none; }
}
@media (max-width: 800px) {
  .goals-table__head,
  .goals-table__row {
    grid-template-columns: minmax(0, 1fr) 110px 70px;
  }
  .goals-table__col--role,
  .goals-table__col--due { display: none; }
}

/* Goals — Timeline view */
.goals-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.goals-timeline__row {
  display: grid;
  grid-template-columns: 200px 1fr 120px;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.goals-timeline__row:hover { background: var(--ink-2); }
.goals-timeline__label {
  font-size: 13.5px;
  color: var(--fg-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goals-timeline__track {
  position: relative;
  height: 8px;
  background: var(--ink-3);
  border-radius: 4px;
}
.goals-timeline__marker {
  position: absolute;
  top: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--ink-1);
}
.goals-timeline__date {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
  text-align: right;
}

/* Goals — Alignment view */
.goals-alignment {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.goals-alignment__group {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.goals-alignment__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.goals-alignment__dot { width: 10px; height: 10px; border-radius: 3px; }
.goals-alignment__role { font-size: 13.5px; color: var(--fg-0); font-weight: 600; }
.goals-alignment__count {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
}
.goals-alignment__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.goals-alignment__row:last-child { border-bottom: 0; }
.goals-alignment__row:hover { background: var(--ink-2); }
.goals-alignment__name { flex: 1; font-size: 13px; color: var(--fg-0); }
.goals-alignment__pct {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
  min-width: 48px;
  text-align: right;
}

/* Goals — milestones / entries in detail drawer */
.goal-milestones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.goal-milestone {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--fg-1);
  padding: 4px 0;
  border-bottom: 1px solid var(--line-soft);
}
.goal-milestone.done { color: var(--fg-3); text-decoration: line-through; }
.goal-milestone__dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1.5px solid var(--fg-3);
}
.goal-milestone__dot.on { background: oklch(0.72 0.14 160); border-color: oklch(0.72 0.14 160); }
.goal-milestone__date {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.goal-entries {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.goal-entry {
  display: grid;
  grid-template-columns: 70px 100px 1fr;
  gap: 10px;
  font-size: 12.5px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line-soft);
}
.goal-entry__date {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
}
.goal-entry__value {
  font-family: var(--ff-mono);
  font-size: 12.5px;
  color: var(--fg-0);
  font-weight: 600;
}
.goal-entry__note {
  font-size: 12px;
  color: var(--fg-2);
  font-style: italic;
}

/* Goals — Burn-up view */
.goals-burnup {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.goals-burnup__headline {
  display: flex;
  gap: 32px;
}
.goals-burnup__value {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
}
.goals-burnup__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.goals-burnup__chart {
  position: relative;
  padding-bottom: 8px;
}
.goals-burnup__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.goals-burnup__hint {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
  font-style: italic;
}

/* ================================================================
   INBOX (Phase 4) — two-pane capture + detail
   ================================================================ */
/* Cockpit surface override — replaces the shared "single bordered card
   with hairline cell dividers" pattern with discrete rounded cards, one
   per stat. Container drops its border / line-fill / overflow clip so
   each cell can render its own rounded edge; cells get --ink-1 (slightly
   darker than page bg in light mode, slightly raised in dark mode), a
   hairline border, and 10px corners. The 12px gap gives breathing room
   between cards. */
.inbox-cockpit-wrap .cockpit {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  gap: 12px;
}
.inbox-cockpit-wrap .cockpit__cell {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* Page header — sits above the cockpit. Left: title + subtitle.
   Right: action buttons (Process all, sort toggle, Capture). */
.inbox-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.inbox-header__lead { min-width: 0; flex: 1 1 auto; }
.inbox-header__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg-0);
  margin: 0 0 2px;
  line-height: 1.2;
}
.inbox-header__sub {
  font-size: 12px;
  color: var(--fg-2);
  margin: 0;
  line-height: 1.4;
}
.inbox-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inbox-header__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--ink-1);
  color: var(--fg-0);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.inbox-header__btn:hover:not(:disabled) { background: var(--ink-2); }
.inbox-header__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.inbox-header__btn.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.inbox-header__btn.primary:hover:not(:disabled) {
  filter: brightness(1.05);
}

/* Inbox cockpit 7-day pattern sparkline (gap doc §7.8). 60×20 viewBox
 * scaled up to the cell width via display:block + width:100%; height
 * stays at the design's 20px slot. Two polylines share the cell:
 * captured (accent solid) and triaged (fg-3 dashed). */
.inbox-pattern-spark {
  display: block;
  width: 100%;
  max-width: 120px;
  height: 24px;
}
.inbox-pattern-legend {
  display: flex;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  margin-top: 2px;
}
.inbox-pattern-legend__captured { color: var(--accent); }
.inbox-pattern-legend__triaged  { color: var(--fg-3); }

/* Flow stat — split in/out line + mono net delta. */
.inbox-flow-split {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-family: var(--ff-mono);
  font-size: 15px;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.inbox-flow-in  { color: oklch(0.72 0.10 150); }     /* sage-ish positive */
.inbox-flow-out { color: oklch(0.76 0.14 75); }      /* copper-ish outflow */
.inbox-flow-net {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  margin-top: 2px;
  letter-spacing: 0.04em;
}

.inbox-shell {
  display: grid;
  grid-template-columns: 380px 1fr;
  height: 100%;
  gap: 0;
  /* Side/bottom negative margins intentionally bleed the shell to the
   * page edges. Top stays at 0 so the cockpit's margin-bottom can give
   * the two-pane visible breathing room from the stat cards above. */
  margin: 0 calc(var(--pad-x) * -2) calc(var(--gap) * -2);
  min-height: calc(100vh - 100px);
  overflow: hidden;
}
.inbox-list {
  border-right: 1px solid var(--line);
  background: var(--ink-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.inbox-capture {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.inbox-capture input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--fg-0);
  font-size: 13px;
}
.inbox-rows { flex: 1; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }

/* Queue header — count + segmented sort. Sits between the capture row and
 * the cards. Mock layout: "14 QUEUED" left; pill-segmented "Oldest · Newest
 * · Source" right, active chip uses --accent-soft + accent text. */
.inbox-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 6px;
}
.inbox-queue-head__count {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.inbox-queue-head__seg {
  display: inline-flex;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 2px;
  gap: 2px;
}
.inbox-queue-head__seg button {
  border: 0;
  background: transparent;
  color: var(--fg-2);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
}
.inbox-queue-head__seg button:hover { color: var(--fg-0); }
.inbox-queue-head__seg button.active {
  background: var(--ink-1);
  color: var(--fg-0);
  box-shadow: 0 1px 0 var(--line);
}

/* Queue card — replaces the flat .inbox-row from the prior layout. Two-row
 * card with a leading source icon, eyebrow + age on row 1, title on row 2,
 * and a chip strip beneath (type, role, due). */
.inbox-card {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 10px;
  row-gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink-1);
  color: var(--fg-0);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  font-family: inherit;
}
.inbox-card:hover { background: var(--ink-2); border-color: var(--line); }
.inbox-card.active {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.inbox-card__icon {
  grid-row: 1 / span 3;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--ink-2);
  color: var(--fg-2);
  align-self: start;
}
.inbox-card.active .inbox-card__icon {
  background: color-mix(in oklch, var(--accent) 12%, var(--ink-2));
  color: var(--accent);
}
.inbox-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.inbox-card__source {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-card__age {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  flex: 0 0 auto;
}
.inbox-card__title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg-0);
  letter-spacing: -0.005em;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Card chip — small pill used for type / role / due. Variant classes set
 * the colour token; the base styles handle layout. */
.inbox-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
  white-space: nowrap;
}
.inbox-chip--task {
  background: color-mix(in oklch, var(--accent) 12%, var(--ink-1));
  border-color: color-mix(in oklch, var(--accent) 30%, var(--line));
  color: var(--accent);
}
.inbox-chip--reference {
  background: var(--ink-1);
  border-color: var(--line);
  color: var(--fg-2);
}
.inbox-chip--role {
  text-transform: none;
  letter-spacing: 0.02em;
  background: var(--ink-1);
}
.inbox-chip--due {
  text-transform: none;
  letter-spacing: 0.02em;
  background: color-mix(in oklch, var(--fg-3) 8%, var(--ink-1));
  color: var(--fg-1);
}
.inbox-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  display: inline-block;
}

/* Keyboard hint footer beneath the queue. Mock: "↑↓ navigate · Space next
 * · N capture". Small mono dots between groups for rhythm. */
.inbox-queue-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--ink-1);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
}
.inbox-queue-foot__group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.inbox-queue-foot__sep { color: var(--fg-3); opacity: 0.7; }

/* Detail topbar — eyebrow on the left, Skip chip pinned right. Sits at
 * the top of the right column above the scrollable body. */
.inbox-detail__topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 32px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--ink-0);
}
.inbox-detail__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.inbox-detail__eyebrow-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--accent);
  color: var(--accent-ink);
}
.inbox-detail__eyebrow-sep { opacity: 0.6; }
.inbox-skip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--ink-1);
  color: var(--fg-1);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.inbox-skip:hover { background: var(--ink-2); color: var(--fg-0); }

/* Note expander — inline "+ Add note" button shown when description is empty.
 * Mock keeps the detail body uncluttered until the user opts in. */
.inbox-detail__add-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--fg-2);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.inbox-detail__add-note:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Capture FAB — pinned bottom-right of the viewport. Stays above the
 * triage action bar (z=5) via z-index: 50. */
.inbox-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 14px color-mix(in oklch, var(--accent) 50%, transparent),
              0 0 0 1px color-mix(in oklch, var(--accent) 30%, transparent);
  transition: transform 0.12s, filter 0.12s;
  z-index: 50;
}
.inbox-fab:hover { transform: translateY(-1px); filter: brightness(1.05); }
.inbox-fab:active { transform: translateY(0); }

.inbox-detail {
  display: flex;
  flex-direction: column;
  background: var(--ink-0);
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.inbox-detail__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 32px 24px;
  min-height: 0;
}
.inbox-detail__head {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 8px;
}
.inbox-detail__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--fg-0);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.inbox-detail__note {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-1);
  color: var(--fg-0);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  outline: none;
}
.inbox-detail__note:focus { border-color: var(--accent); }
.inbox-detail__triage {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.inbox-detail__triage button {
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--ink-1);
  color: var(--fg-0);
  cursor: pointer;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.inbox-detail__triage button:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.inbox-empty {
  color: var(--fg-3);
  font-size: 13px;
  font-style: italic;
  padding: 60px 20px;
  text-align: center;
}
@media (max-width: 960px) {
  .inbox-shell { grid-template-columns: 1fr; }
  .inbox-detail { display: none; }
}

.inbox-triage-chip {
  margin: 10px 14px;
  padding: 6px 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 7px;
  color: var(--fg-0);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}

.inbox-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inbox-detail__upsell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-top: 24px;
  border-radius: 10px;
  border: 1px dashed var(--accent);
  background: color-mix(in oklch, var(--accent) 8%, var(--ink-1));
  color: var(--fg-1);
  font-size: 13px;
}

/* Bottom keyboard-triage action bar — fixed to the bottom of the viewport,
 * offset from the left to clear the rail (--rail-w) plus the queue column
 * (380px). Promote · Schedule · Delete groups separated by 1px dividers;
 * the right-most danger button hugs the trailing edge. */
.inbox-triage-bar {
  position: fixed;
  bottom: 0;
  right: 0;
  left: calc(var(--rail-w, 56px) + 380px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 18px;
  background: var(--ink-1);
  border-top: 1px solid var(--line);
  z-index: 5;
}
.inbox-triage-bar__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.inbox-triage-bar__group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
/* Push a marked trailing group (typically danger / delete) to the far right
 * so the bar visually segments into Promote · Schedule · Delete columns. */
.inbox-triage-bar__group--end { margin-left: auto; }
.inbox-triage-bar__sep {
  width: 1px;
  height: 22px;
  background: var(--line);
  flex: 0 0 1px;
}
.inbox-triage-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--ink-1);
  color: var(--fg-1);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.inbox-triage-bar__btn:hover {
  background: var(--ink-2);
  color: var(--fg-0);
}
.inbox-triage-bar__btn.primary {
  /* Per gap doc §7.8 — active/primary triage chip uses --accent-soft +
   * --accent text + --accent border, not solid copper. */
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.inbox-triage-bar__btn.primary:hover {
  background: color-mix(in oklch, var(--accent) 18%, transparent);
}
.inbox-triage-bar__btn.danger {
  color: oklch(0.72 0.18 27);
  border-color: oklch(0.72 0.18 27 / 0.4);
}
.inbox-triage-bar__btn.danger:hover {
  background: oklch(0.72 0.18 27 / 0.10);
}
.inbox-suggestion {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--ink-1);
  color: var(--fg-0);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.inbox-suggestion:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.inbox-suggestion__label {
  font-size: 13px;
  font-weight: 500;
}
.inbox-suggestion__hint {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
/* Top suggestion — visually "pre-filled" as the default accept. Solid
   accent border + filled accent background + Accept/T chip on the right.
   Mock: "Accept (T) or pick a different action below." */
.inbox-suggestion.primary {
  grid-template-columns: 20px 1fr auto auto;
  border-style: solid;
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 10%, var(--ink-1));
}
.inbox-suggestion__accept {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Suggested Classification card (mock §11). One bordered panel per item,
 * with the inferred type/role/tier/due chips on top, reasoning rows in the
 * middle, and an Accept (T) chip + hint at the bottom. */
.inbox-classify {
  margin-top: 24px;
  padding: 14px 16px 12px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: color-mix(in oklch, var(--accent) 6%, var(--ink-1));
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.inbox-classify__head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.inbox-classify__icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--accent);
  color: var(--accent-ink);
}
.inbox-classify__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.inbox-classify__chips .inbox-chip {
  font-size: 11px;
  padding: 4px 9px;
}
/* Tier chip — small horizontal "bar" glyph indicates the tier visually
 * without sourcing yet another SVG. */
.inbox-chip--tier {
  text-transform: none;
  letter-spacing: 0.02em;
  background: var(--ink-1);
}
.inbox-chip__bar {
  width: 10px;
  height: 2px;
  background: currentColor;
  display: inline-block;
  border-radius: 1px;
  opacity: 0.7;
}

.inbox-classify__reasons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in oklch, var(--accent) 30%, var(--line));
}
.inbox-classify__reason {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
}
.inbox-classify__trigger {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--ink-2);
  color: var(--fg-1);
  border: 1px solid var(--line);
  font-size: 10.5px;
}
.inbox-classify__why { color: var(--fg-3); }

.inbox-classify__cta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in oklch, var(--accent) 30%, var(--line));
}
.inbox-classify__accept {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.inbox-classify__accept:hover { filter: brightness(1.05); }
.inbox-classify__hint {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
}

/* ================================================================
   ROLES (Phase 4) — balance grid card layout
   ================================================================ */
.roles-shell { padding: 4px 0 40px; }
.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 14px;
}
.role-card-wrap {
  position: relative;
  display: flex;
}
.role-card-wrap > .role-card { flex: 1 1 auto; }
.role-card--archived { opacity: 0.78; }
.role-card--archived:hover { opacity: 1; }

.role-card__menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5;
  background: transparent;
  cursor: default;
}
.role-card__menu-anchor {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}
/* MUX-4.2 — Edit button + kebab live together in a top-right action row. */
.role-detail-hero__actions {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
}
.role-detail-hero__menu {
  /* sits inside .role-detail-hero__actions now; the popover anchors to it */
  position: relative;
  top: auto;
  right: auto;
}
.role-detail-hero__edit {
  white-space: nowrap;
}
.role-card__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.role-card__menu-btn:hover {
  background: var(--ink-2);
  border-color: var(--line);
  color: var(--fg-0);
}
.role-card__menu-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.18);
  z-index: 20;
}
.role-card__menu-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-1);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.role-card__menu-item:hover { background: var(--ink-2); color: var(--fg-0); }
.role-card__menu-item--danger { color: oklch(0.72 0.16 27); }
.role-card__menu-item--danger:hover {
  background: oklch(0.72 0.16 27 / 0.12);
  color: oklch(0.72 0.16 27);
}

.role-card {
  position: relative;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.12s;
}
.role-card:hover { border-color: var(--fg-3); }
.role-card__rail {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.role-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.role-card__mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--role-ink);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.role-card__title { flex: 1; min-width: 0; }
.role-card__title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-0);
}
.role-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.role-card__chip--sabbatical {
  color: oklch(0.78 0.14 75);
  border-color: oklch(0.78 0.14 75 / 0.4);
}
.role-card__chip--health-great { color: oklch(0.72 0.14 160); border-color: oklch(0.72 0.14 160 / 0.4); }
.role-card__chip--health-good  { color: oklch(0.72 0.10 230); border-color: oklch(0.72 0.10 230 / 0.4); }
.role-card__chip--health-watch { color: oklch(0.76 0.14 75);  border-color: oklch(0.76 0.14 75 / 0.4); }
.role-card__chip--health-risk  { color: oklch(0.72 0.16 27);  border-color: oklch(0.72 0.16 27 / 0.4); }
.role-card__chip-dot { width: 5px; height: 5px; border-radius: 50%; }
.role-card__rhythm {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  height: 42px;
  margin-top: 4px;
}
.role-card__rhythm-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  height: 100%;
}
.role-card__rhythm-bar-wrap {
  flex: 1;
  display: flex;
  align-items: flex-end;
  width: 100%;
}
.role-card__rhythm-bar {
  width: 100%;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
}
.role-card__rhythm-label {
  font-family: var(--ff-mono);
  font-size: 8.5px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.role-card__xp { display: flex; flex-direction: column; gap: 4px; }
.role-card__xp-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.role-card__xp-bar {
  height: 4px;
  background: var(--ink-4);
  border-radius: 2px;
  overflow: hidden;
}
.role-card__xp-bar > span {
  display: block;
  height: 100%;
  border-radius: 2px;
}
.role-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.role-card__stat {
  background: var(--ink-1);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.role-card__stat-label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.role-card__stat-main {
  font-size: 18px;
  font-weight: 600;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.role-card__stat-main.warn { color: oklch(0.78 0.14 75); }
.role-card__stat-sub {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-3);
}
.role-card__wins {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.role-card__win {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-1);
}
.role-card__win-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.role-card__win-when {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.role-card__focus {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
}
.role-card__focus-label { color: var(--fg-3); }
.role-card__focus-text {
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--ff-sans, inherit);
}
.role-card--add {
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--fg-2);
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  font-family: inherit;
}
.role-card--add__ring {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1.5px dashed var(--line);
  display: grid;
  place-items: center;
  color: var(--fg-2);
}
.role-card--add__label {
  font-size: 13px;
  color: var(--fg-1);
  font-weight: 500;
  margin-top: 8px;
}
.role-card--add__hint {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  letter-spacing: 0.08em;
  text-align: center;
  max-width: 240px;
  margin-top: 4px;
}

/* Sphere variant — large gauge cockpit card */
.roles-grid--spheres {
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
}
.role-card--sphere {
  gap: 10px;
  padding-left: 18px;
}
.role-card__halo {
  position: absolute;
  left: -40px;
  top: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--halo-color) 15%, transparent), transparent 70%);
  pointer-events: none;
}
.role-card__gauge {
  display: flex;
  justify-content: center;
  margin: -4px 0;
}
.role-card__orbitals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.role-card__orbital {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.role-card__orbital-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.role-card__orbital-main {
  font-size: 18px;
  font-weight: 600;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.role-card__orbital-main.warn { color: oklch(0.78 0.14 75); }
.role-card__orbital-sub {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-3);
}
.role-card__sphere-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
}
.role-card__sphere-win {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: oklch(0.72 0.14 160);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50%;
}

/* ================================================================
   SETTINGS (Phase 4) — 10-section nav + main
   ================================================================ */
.settings-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 4px 0 40px;
}
.settings-nav {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  align-self: flex-start;
  position: sticky;
  top: 16px;
}
.settings-nav__head {
  padding: 12px 14px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  border-bottom: 1px solid var(--line-soft);
}
.settings-nav__list { padding: 6px; }
/* Group label above each section cluster — matches the mock's four
   YOU / RHYTHM / WORKSPACE / ACCOUNT buckets. */
.settings-nav__group-label {
  padding: 12px 10px 4px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.settings-nav__group-label:first-child { padding-top: 4px; }
.settings-nav__item.danger { color: oklch(0.68 0.17 27); }
.settings-nav__item.danger.active { color: oklch(0.72 0.18 27); }
.settings-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  height: 32px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--fg-1);
  font-size: 13px;
  position: relative;
}
.settings-nav__item:hover { background: var(--ink-2); }
.settings-nav__item.active {
  background: var(--ink-3);
  color: var(--fg-0);
}
.settings-nav__spine {
  position: absolute;
  left: -6px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.settings-main { min-width: 0; }
.settings-main__title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-0);
}
.settings-main__title--danger { color: oklch(0.72 0.18 27); }
.settings-row--danger {
  border: 1px solid oklch(0.72 0.18 27 / 0.35);
  border-radius: 8px;
  padding: 10px;
}
.sec__action--danger {
  border-color: oklch(0.72 0.18 27 / 0.5);
  color: oklch(0.72 0.18 27);
}
.sec__action--danger:hover {
  background: oklch(0.72 0.18 27 / 0.08);
  border-color: oklch(0.72 0.18 27 / 0.7);
}
.settings-main__hint {
  color: var(--fg-2);
  font-size: 13px;
  margin: 0 0 18px;
}
.settings-field {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.settings-field:last-child { border-bottom: 0; }
.settings-field__label {
  /* Canonical mono-caps field label per gap doc §6.1 — also reused by
   * every dialog field label across the app. */
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  align-self: center;
}
.settings-field__value {
  color: var(--fg-0);
  font-size: 13.5px;
}
/* RETRO-1 — editable time picker in the Review cadence panel. Mirrors the
   settings-field readonly value styling so it sits inline with mono-caps
   labels without looking foreign. */
.settings-field__input {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--fg-0);
  font-size: 13px;
  font-family: var(--ff-mono);
  padding: 6px 10px;
  max-width: 160px;
}
.settings-field__input:focus {
  outline: none;
  border-color: var(--accent);
}

.settings-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.settings-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--ink-1);
  color: var(--fg-1);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.settings-choice:hover { background: var(--ink-2); color: var(--fg-0); }
.settings-choice.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--fg-0);
}
.settings-accent-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 6px 0;
}
.settings-toggle-row > div:first-child { flex: 1; }
.settings-toggle-row__label {
  color: var(--fg-0);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}
.settings-toggle-row__hint {
  color: var(--fg-2);
  font-size: 12.5px;
  line-height: 1.5;
}
.settings-toggle {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ink-3);
  position: relative;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  padding: 0;
}
.settings-toggle.on { background: var(--accent); border-color: var(--accent); }
.settings-toggle__knob {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fg-0);
  transition: transform 0.16s;
}
.settings-toggle.on .settings-toggle__knob {
  transform: translateX(20px);
  background: var(--accent-ink);
}

.settings-deferred {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 4px;
}
.settings-deferred__body { flex: 1; }
.settings-deferred__title {
  font-size: 13.5px;
  color: var(--fg-0);
  font-weight: 500;
  margin-bottom: 2px;
}
.settings-deferred__hint {
  color: var(--fg-2);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Settings — row list (Roles / Tags / Shortcuts / Integrations / Advanced) */
.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.settings-row:last-child { border-bottom: 0; }
.settings-row__mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--role-ink);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.settings-row__body { flex: 1; min-width: 0; }
.settings-row__title {
  font-size: 13.5px;
  color: var(--fg-0);
  font-weight: 500;
}
.settings-row__sub {
  /* Sentence-shaped meta (e.g. shortcut category "Global") — Inter Tight. */
  font-size: 12px;
  color: var(--fg-2);
  margin-top: 2px;
}
.settings-row__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.settings-row--confirm {
  align-items: flex-start;
  background: color-mix(in oklch, var(--danger), transparent 92%);
  border-radius: 8px;
  padding: 12px;
}
.settings-input--confirm {
  margin-top: 8px;
  width: 200px;
  height: 32px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--fg-0);
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.settings-input--confirm:focus { border-color: var(--danger); outline: none; }

/* Generic settings text input — used by the AI key field. Mirrors
 * .role-new-input but tuned for a settings panel rather than a dialog. */
.settings-input {
  width: 100%;
  height: 34px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--fg-0);
  font-family: var(--ff-mono);
  font-size: 12px;
}
.settings-input:focus { border-color: var(--accent); outline: none; }
.settings-ai-key-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 4px;
}
.settings-ai-key-row .settings-input { flex: 1; }

@media (max-width: 960px) {
  .roles-grid { grid-template-columns: 1fr; }
  .settings-shell { grid-template-columns: 1fr; }
  .settings-nav { position: relative; top: 0; }
}

/* ================================================================
   CALENDAR (Phase 4) — week time grid + unscheduled sidebar
   ================================================================ */
.calendar-shell {
  display: grid;
  grid-template-columns: 1fr 280px;
  grid-template-rows: auto auto 1fr;
  height: 100%;
  gap: 0;
  margin: calc(var(--gap) * -1.5) calc(var(--pad-x) * -2) calc(var(--gap) * -2);
  min-height: calc(100vh - 100px);
  overflow: hidden;
  position: relative;
}
.calendar-cockpit { grid-column: 1 / -1; }
.calendar-body    { grid-column: 1; grid-row: 3; }
.calendar-sidebar { grid-column: 2; grid-row: 3; }

.calendar-focus-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--ink-0), transparent 5%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  animation: rufusFocusFadeIn 260ms ease;
}
@keyframes rufusFocusFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rufusFocusRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.calendar-focus-overlay__topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklch, var(--ink-1), transparent 20%);
}
.calendar-focus-overlay__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 4px;
  background: color-mix(in oklch, var(--chip-color, var(--accent)), transparent 82%);
  border: 1px solid color-mix(in oklch, var(--chip-color, var(--accent)), transparent 60%);
  color: var(--fg-0);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.calendar-focus-overlay__hint {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
}
.calendar-focus-overlay__stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  gap: 24px;
  overflow: auto;
}
.calendar-focus-overlay__ring {
  position: relative;
  width: 280px;
  height: 280px;
  animation: rufusFocusRise 360ms ease;
}
.calendar-focus-overlay__ring-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--glow-color, var(--accent));
  opacity: 0.22;
}
.calendar-focus-overlay__svg {
  position: absolute;
  inset: 24px;
  transform: rotate(-90deg);
}
.calendar-focus-overlay__ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}
.calendar-focus-overlay__ring-status {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.calendar-focus-overlay__ring-big {
  font-size: 68px;
  font-weight: 200;
  letter-spacing: -0.04em;
  color: var(--fg-0);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.calendar-focus-overlay__ring-sub {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.calendar-focus-overlay__title-block {
  max-width: 560px;
  text-align: center;
  animation: rufusFocusRise 440ms ease;
}
.calendar-focus-overlay__role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.calendar-focus-overlay__role-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.calendar-focus-overlay__title {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--fg-0);
}
.calendar-focus-overlay__prompts {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 220px));
  gap: 12px;
  max-width: 720px;
  width: 100%;
  animation: rufusFocusRise 520ms ease;
}
.calendar-focus-overlay__prompt {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px dashed color-mix(in oklch, var(--line), var(--fg-3) 30%);
  background: color-mix(in oklch, var(--ink-1), transparent 40%);
  min-height: 68px;
}
.calendar-focus-overlay__prompt-label {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.calendar-focus-overlay__prompt-value {
  font-size: 12px;
  color: var(--fg-2);
  font-style: italic;
  line-height: 1.4;
}
.calendar-focus-overlay__actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  animation: rufusFocusRise 600ms ease;
}
.calendar-toolbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-0);
}
.calendar-toolbar__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.calendar-toolbar__title h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-0);
}
.calendar-toolbar__sep { color: var(--fg-3); font-size: 14px; }
.calendar-toolbar__range {
  font-size: 14px;
  color: var(--fg-2);
  font-weight: 500;
}
.calendar-toolbar__spacer { flex: 1; }
.calendar-toolbar__nav {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ink-1);
}
.calendar-toolbar__navbtn {
  padding: 7px 12px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--fg-1);
  font-family: var(--ff-mono);
  font-size: 11.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.calendar-toolbar__navbtn:last-child { border-right: 0; }
.calendar-toolbar__navbtn:hover { background: var(--ink-2); color: var(--fg-0); }
.calendar-toolbar__action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--ink-1);
  color: var(--fg-1);
  font-family: var(--ff-mono);
  font-size: 11.5px;
  cursor: pointer;
}
.calendar-toolbar__action:hover { background: var(--ink-2); color: var(--fg-0); }
.calendar-toolbar__action.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--fg-0);
}
.calendar-toolbar__action--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.calendar-toolbar__action--primary:hover {
  background: var(--accent);
  color: var(--accent-ink);
  filter: brightness(1.06);
}
.calendar-toolbar__action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.calendar-toolbar__kbd {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--ink-0);
  color: var(--fg-2);
  margin-left: 2px;
}
.calendar-toolbar__kbd--inverse {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.28);
  color: var(--accent-ink);
}

.calendar-cockpit {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr 1.6fr 1fr;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--ink-0);
}
.calendar-cockpit__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink-1);
  min-width: 0;
}
.calendar-cockpit__title {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.calendar-cockpit__big {
  font-family: var(--ff-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--fg-0);
  letter-spacing: -0.02em;
  line-height: 1.05;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.calendar-cockpit__big-tag {
  font-size: 11px;
  font-weight: 400;
  color: var(--fg-3);
  letter-spacing: 0;
  text-transform: lowercase;
}
.calendar-cockpit__big-sep { color: var(--fg-3); font-weight: 400; font-size: 14px; }
.calendar-cockpit__sub {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: auto;
}
.calendar-cockpit__bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--ink-2);
  margin-top: 4px;
}
.calendar-cockpit__bar-deep {
  background: var(--accent);
}
.calendar-cockpit__bar-meet {
  background: color-mix(in oklch, var(--accent) 40%, var(--fg-3));
}
.calendar-cockpit__stack {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--ink-2);
}
.calendar-cockpit__stack-seg { display: block; height: 100%; }
.calendar-cockpit__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 4px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-2);
}
.calendar-cockpit__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.calendar-cockpit__legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
@media (max-width: 1280px) {
  .calendar-cockpit { grid-template-columns: repeat(3, 1fr); }
  .calendar-cockpit__card--balance { grid-column: span 2; }
}
@media (max-width: 800px) {
  .calendar-cockpit { grid-template-columns: 1fr 1fr; }
  .calendar-cockpit__card--balance { grid-column: span 2; }
}

.calendar-block-drawer { top: 45px; }

.calendar-body {
  position: relative;
  overflow: auto;
  background: var(--ink-0);
}
.calendar-grid {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  grid-auto-rows: var(--calendar-row-h);
  min-height: 100%;
  background: var(--line);
  gap: 1px;
}
.calendar-grid__corner {
  background: var(--ink-0);
  position: sticky;
  top: 0;
  z-index: 2;
}
.calendar-grid__day-head {
  background: var(--ink-1);
  padding: 8px 10px;
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--line);
}
.calendar-grid__day-head.today {
  background: var(--accent-soft);
}
.calendar-grid__dow {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
}
.calendar-grid__dom {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-0);
}
.calendar-grid__hour-label {
  background: var(--ink-0);
  padding: 4px 8px;
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-3);
  text-align: right;
}
.calendar-grid__cell {
  background: var(--ink-1);
}
.calendar-grid-overlay {
  position: absolute;
  /* skip corner column + day-head row */
  left: 60px;
  top: 47px;
  right: 0;
  /* Pin overlay height to the grid's hour-row stack so block percentages
     resolve against the same scale the grid was built with. Using bottom:0
     stretched the overlay to the body's box, breaking sizing under page-
     scroll and Playwright fullPage captures. */
  height: calc(var(--calendar-hours, 16) * var(--calendar-row-h, 44px) + var(--calendar-hours, 16) * 1px);
  pointer-events: none;
}
.calendar-block {
  position: absolute;
  /* Role-tinted background — 14% role color mixed with ink-2 per mock.
     `--role-tint` defaults to the left-border color if callers haven't set it. */
  background: color-mix(in oklch, var(--role-tint, var(--fg-3)) 14%, var(--ink-2));
  border-left: 3px solid var(--fg-3);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11.5px;
  color: var(--fg-0);
  cursor: pointer;
  pointer-events: auto;
  overflow: hidden;
  margin-left: 2px;
}
.calendar-block:hover {
  background: color-mix(in oklch, var(--role-tint, var(--fg-3)) 22%, var(--ink-2));
}
/* Hatched diagonal — reserved for meeting-style blocks (imported calendar
   events distinct from deep-work tasks). Applied by a sibling class. */
.calendar-block.is-meeting {
  background: repeating-linear-gradient(
    45deg,
    color-mix(in oklch, var(--role-tint, var(--fg-3)) 14%, var(--ink-2)),
    color-mix(in oklch, var(--role-tint, var(--fg-3)) 14%, var(--ink-2)) 6px,
    color-mix(in oklch, var(--role-tint, var(--fg-3)) 22%, var(--ink-2)) 6px,
    color-mix(in oklch, var(--role-tint, var(--fg-3)) 22%, var(--ink-2)) 12px
  );
}
.calendar-block.is-faded {
  opacity: 0.3;
  filter: saturate(0.6);
}
.calendar-block.is-focus {
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 35%, transparent);
}

/* Phase 4.10b — richer Day-view block chips. */
.calendar-block--day {
  position: absolute;
  padding: 8px 10px 6px 10px;
  /* Day-view blocks use the same role-tinted background as week-view
     (inherited via .calendar-block above). Border-left ribbon paints the
     role color directly. */
  background: color-mix(in oklch, var(--role-tint, var(--fg-3)) 16%, var(--ink-1));
  border: 1px solid color-mix(in oklch, var(--role-tint, var(--fg-3)) 28%, var(--line));
  border-left-width: 3px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  overflow: hidden;
}
.calendar-block--day:hover {
  background: color-mix(in oklch, var(--role-tint, var(--fg-3)) 24%, var(--ink-1));
}
.calendar-block--day.is-meeting {
  background:
    repeating-linear-gradient(
      45deg,
      color-mix(in oklch, var(--role-tint, var(--fg-3)) 16%, var(--ink-1)),
      color-mix(in oklch, var(--role-tint, var(--fg-3)) 16%, var(--ink-1)) 6px,
      color-mix(in oklch, var(--role-tint, var(--fg-3)) 26%, var(--ink-1)) 6px,
      color-mix(in oklch, var(--role-tint, var(--fg-3)) 26%, var(--ink-1)) 12px);
}
.calendar-block--day.is-completed {
  opacity: 0.6;
  text-decoration: line-through;
  text-decoration-color: var(--fg-3);
  text-decoration-thickness: 1px;
}
.calendar-block__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-2);
}
.calendar-block__headspacer { flex: 1; }
.calendar-block__subtitle {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.calendar-block__duration {
  position: absolute;
  top: 8px;
  right: 10px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.calendar-block__chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  font-weight: 700;
  background: color-mix(in oklch, var(--block-color, var(--accent)) 16%, transparent);
  color: var(--block-color, var(--accent));
  vertical-align: middle;
}
.calendar-block__chip--crit {
  background: oklch(0.72 0.18 27 / 0.18);
  color: oklch(0.72 0.18 27);
}
.calendar-block__chip.is-overdue {
  background: oklch(0.72 0.18 27 / 0.16);
  color: oklch(0.72 0.18 27);
}
.calendar-block.is-overdue {
  border-color: oklch(0.72 0.18 27 / 0.45);
}
.calendar-block.is-completed {
  opacity: 0.55;
  text-decoration: line-through;
  text-decoration-color: var(--fg-3);
}

/* Hatched busy strip — diagonal stripes via repeating-linear-gradient. */
/* STUB-11: inline keyboard shortcut editor */
.settings-keyboard-input {
  width: 90px;
  padding: 5px 8px;
  background: var(--ink-1);
  color: var(--fg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
}
.settings-keyboard-input:focus {
  border-color: var(--accent);
  outline: none;
}
.settings-keyboard-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.settings-keyboard-save {
  padding: 6px 14px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.settings-keyboard-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* STUB-6: per-weekday busy block editor */
.calendar-busy-editor {
  margin: 8px 18px;
  padding: 12px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.calendar-busy-editor__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 10px;
}
.calendar-busy-editor__hint {
  font-weight: 400;
  font-size: 11px;
  color: var(--fg-3);
}
.calendar-busy-editor__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}
.calendar-busy-editor__col {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.calendar-busy-editor__day {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  text-align: center;
}
.calendar-busy-editor__row {
  display: grid;
  grid-template-columns: auto 8px auto 1fr auto;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}
.calendar-busy-editor__row input[type="time"],
.calendar-busy-editor__row input[type="text"] {
  padding: 3px 5px;
  background: var(--ink-1);
  color: var(--fg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  min-width: 0;
}
.calendar-busy-editor__add {
  margin-top: 4px;
  padding: 4px 8px;
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--fg-2);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  cursor: pointer;
}
.calendar-busy-editor__add:hover {
  border-style: solid;
  color: var(--fg-1);
}

.calendar-day__busy {
  position: absolute;
  pointer-events: none;
  border-radius: 6px;
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in oklch, var(--fg-3) 18%, transparent) 0 6px,
      transparent 6px 12px);
  border: 1px dashed color-mix(in oklch, var(--fg-3) 28%, transparent);
}
.calendar-day__now {
  position: absolute;
  pointer-events: none;
  height: 0;
  border-top: 2px solid var(--accent);
  z-index: 1;
}
.calendar-day__now::before {
  content: "";
  position: absolute;
  left: -5px; top: -5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.calendar-block__title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-block__time {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-3);
}
.calendar-block__resize {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  cursor: ns-resize;
  background: transparent;
  border-radius: 0 0 6px 6px;
  transition: background 0.12s;
}
.calendar-block:hover .calendar-block__resize {
  background: color-mix(in oklch, var(--fg-3), transparent 40%);
}
.calendar-block__resize:hover {
  background: color-mix(in oklch, var(--fg-3), transparent 10%);
}

/* RD-13 — top-edge resize zone. Mirrors bottom handle; rounds top corners. */
.calendar-block__resize--top {
  top: 0;
  bottom: auto;
  border-radius: 6px 6px 0 0;
}

/* RD-13 — body drag zone fills the middle. Cursor = grab so it's obviously
   draggable. Stops short of the 6px top/bottom resize strips. */
.calendar-block__body {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  bottom: 6px;
  cursor: grab;
  padding: 4px 8px;
  overflow: hidden;
}
.calendar-block__body:active { cursor: grabbing; }

.calendar-sidebar {
  border-left: 1px solid var(--line);
  background: var(--ink-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.calendar-sidebar__head {
  padding: 12px 14px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  border-bottom: 1px solid var(--line-soft);
}
.calendar-sidebar__list { padding: 8px 10px; flex: 1; overflow-y: auto; }
.calendar-sidebar__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: grab;
}
.calendar-sidebar__item:hover { background: var(--ink-2); }
.calendar-sidebar__top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.calendar-sidebar__topspacer { flex: 1; }
.calendar-sidebar__roleinit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  color: white;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
}
.calendar-sidebar__dur {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.calendar-sidebar__status {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.calendar-sidebar__status--overdue {
  background: oklch(0.72 0.18 27 / 0.16);
  color: oklch(0.72 0.18 27);
}
.calendar-sidebar__status--high {
  background: color-mix(in oklch, var(--accent) 18%, transparent);
  color: var(--accent);
}
.calendar-sidebar__status--waiting {
  background: oklch(0.74 0.13 75 / 0.18);
  color: oklch(0.74 0.13 75);
}
.calendar-sidebar__title {
  font-size: 13px;
  color: var(--fg-0);
  font-weight: 500;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.calendar-sidebar__bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  margin-top: 2px;
}
.calendar-sidebar__leveldot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.calendar-sidebar__levelmeta { color: var(--fg-3); }
.calendar-sidebar__placelink {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 5px;
  cursor: pointer;
  text-transform: lowercase;
}
.calendar-sidebar__placelink:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* Calendar — Phase 2 Item 6: sort tabs + hint + Place button. */
.calendar-toolbar__sub {
  font-size: 11.5px;
  color: var(--fg-2);
  font-style: italic;
  width: 100%;
  margin-top: 2px;
}
.calendar-sidebar__sort {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.calendar-sidebar__sort-btn {
  flex: 1;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--ink-1);
  color: var(--fg-2);
  font-family: var(--ff-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.calendar-sidebar__sort-btn:hover { background: var(--ink-2); color: var(--fg-0); }
.calendar-sidebar__sort-btn.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--fg-0);
}
.calendar-sidebar__hint {
  padding: 6px 14px 4px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  font-style: italic;
}
.calendar-sidebar__place {
  align-self: center;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--ink-1);
  color: var(--fg-1);
  font-family: var(--ff-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.12s;
}
.calendar-sidebar__place:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

@media (max-width: 960px) {
  .calendar-shell { grid-template-columns: 1fr; }
  .calendar-sidebar { display: none; }
}

/* Calendar — Day view */
.calendar-day {
  position: relative;
  padding: 16px;
  height: 100%;
  overflow: auto;
}
.calendar-day__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.calendar-day__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--ink-1);
  color: var(--fg-2);
  font-family: var(--ff-mono);
  font-size: 11px;
  cursor: pointer;
}
.calendar-day__back:hover { background: var(--ink-2); color: var(--fg-0); }
.calendar-day__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.calendar-day__badge-num {
  font-family: var(--ff-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--fg-0);
  letter-spacing: -0.02em;
  line-height: 1;
}
.calendar-day__badge-today {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
}
.calendar-day__namestack {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.calendar-day__dow {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg-0);
  letter-spacing: -0.01em;
}
.calendar-day__dom {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
}
.calendar-day__headspacer { flex: 1; }
.calendar-day__stats {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-0);
}
.calendar-day__stats > span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.calendar-day__stat-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  font-weight: 700;
}
.calendar-day__rolepills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.calendar-day__rolepill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-1);
}
.calendar-day__rolepill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.calendar-day__grid {
  display: flex;
  flex-direction: column;
}
.calendar-day__row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 8px;
  height: 52px;
  align-items: start;
  border-top: 1px solid var(--line-soft);
}
.calendar-day__cell {
  background: var(--ink-1);
  border-radius: 4px;
  min-height: 44px;
}
.calendar-day__overlay {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 110px;
  /* Pin overlay height to the day-grid's hour-row stack so block percentages
     resolve against the same scale the grid was built with. Using bottom:0
     stretched the overlay under page-scroll / Playwright fullPage. */
  height: calc(var(--calendar-hours, 16) * 52px);
  pointer-events: none;
}
.calendar-day__overlay .calendar-block { pointer-events: auto; }

/* ================================================================
   REVIEW (Phase 4) — weekly reflection prompt cards
   ================================================================ */
.review-shell { padding: 4px 0 40px; }
.review-prompts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
/* Review — Phase 3 Item 4: depth toggle, auto-pulled wins strip. */
.review-depth {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink-1);
  margin-bottom: 10px;
}
.review-depth__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.review-depth__btn {
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--ink-1);
  color: var(--fg-2);
  font-family: var(--ff-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.review-depth__btn:hover { background: var(--ink-2); color: var(--fg-0); }
.review-depth__btn.on {
  /* Per gap doc §7.7 — active = --accent-soft + --accent text + --accent
   * border, not solid copper fill. */
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.review-wins {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink-1);
  overflow: hidden;
}
.review-wins__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.review-wins__list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.review-wins__list li {
  display: grid;
  grid-template-columns: 3px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 14px;
  font-size: 12.5px;
  color: var(--fg-1);
}
.review-wins__rail { width: 3px; height: 16px; border-radius: 2px; }
.review-wins__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-wins__role {
  font-family: var(--ff-mono);
  font-size: 10.5px;
}

.review-prompt {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  /* REVIEW-1 — roomier vertical padding so multi-paragraph answers don't feel
     cramped against the card edges. */
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.12s, box-shadow 0.16s;
}
/* REVIEW-1 — when the textarea inside has focus, lift the card so the writing
   surface visually steps forward. */
.review-prompt:focus-within {
  border-color: var(--accent);
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.05);
}
.review-prompt__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.review-prompt__ai {
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.review-prompt__ai[disabled] { opacity: 0.6; cursor: progress; }
.review-prompt__question {
  font-size: 14px;
  color: var(--fg-0);
  font-weight: 500;
  line-height: 1.4;
}
.review-prompt__answer {
  width: 100%;
  /* REVIEW-1 — taller default and a generous max-height for multi-paragraph
     answers. The textarea still resizes vertically beyond this if the user
     drags the handle. */
  min-height: 160px;
  max-height: 60vh;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg-0);
  padding: 14px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.12s;
}
.review-prompt__answer:focus {
  outline: none;
  border-color: var(--accent);
}

.review-shell-split {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  padding: 4px 0 40px;
}
.review-history {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  align-self: flex-start;
  overflow: hidden;
  position: sticky;
  top: 16px;
}
.review-history__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.review-history__item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.review-history__item:last-child { border-bottom: 0; }
.review-history__item:hover { background: var(--ink-2); }
.review-history__item.active { background: var(--ink-3); }
.review-history__period {
  font-size: 13px;
  color: var(--fg-0);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* RETRO-1 — small mono-caps pill on monthly retro rows so they don't visually
   collide with weekly entries. */
.review-history__cadence {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 4px;
}
.review-history__meta {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  margin-top: 2px;
}
.review-savebar {
  margin-top: 10px;
  padding: 8px 2px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  text-align: right;
}
@media (max-width: 960px) {
  .review-shell-split { grid-template-columns: 1fr; }
  .review-history { position: relative; top: 0; }
}

/* ================================================================
   ROLE DETAIL (Phase 4) — hero + tabs
   ================================================================ */
.role-detail-shell { padding: 4px 0 40px; }
.role-detail-back {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.role-detail-hero {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.role-detail-hero__rail {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.role-detail-hero__mark {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--role-ink);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 20px;
  flex-shrink: 0;
}
.role-detail-hero__body { flex: 1; min-width: 0; }
.role-detail-hero__name {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-0);
}
.role-detail-hero__desc {
  font-size: 13px;
  color: var(--fg-2);
  margin-top: 4px;
  line-height: 1.5;
}
.role-detail-hero__bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

/* Phase 4.12 ring-variant hero — ring on left, body center, side stats right. */
.role-detail-hero--ring {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 22px;
  align-items: center;
}
.role-detail-hero__ring {
  width: 120px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.role-detail-hero__ring-sub {
  font-family: var(--ff-mono);
  font-size: 11px;
  fill: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.role-detail-hero__ring-caption {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.role-detail-hero__chipline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.role-detail-hero__status {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.role-detail-hero__status.ontrack { color: oklch(0.72 0.14 160); }
.role-detail-hero__status.over    { color: oklch(0.72 0.16 27); }
.role-detail-hero__status.under   { color: oklch(0.78 0.14 75); }
.role-detail-hero__xp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-2);
}
.role-detail-hero__side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
}
.role-detail-hero__side-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.role-detail-hero__side-label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--fg-3);
}
.role-detail-hero__side-val {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 16px;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
}

/* Two-column panel strip: Recent wins + Effort. */
.role-detail-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.role-detail-panel-card {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.role-detail-wins { display: flex; flex-direction: column; gap: 6px; }
.role-detail-wins__row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px dashed var(--line-soft, var(--line));
}
.role-detail-wins__row:last-child { border-bottom: 0; }
.role-detail-wins__date {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
}
.role-detail-wins__text {
  font-size: 13px;
  color: var(--fg-1);
}

.role-detail-effort {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding-top: 6px;
}
.role-detail-effort__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.role-detail-effort__bar-wrap {
  width: 20px;
  height: 80px;
  background: var(--ink-3);
  border-radius: 4px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.role-detail-effort__bar {
  width: 100%;
  border-radius: 4px;
  transition: height .3s ease;
}
.role-detail-effort__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.role-detail-effort__num {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--fg-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Health Score panel — sits below the wins/effort row in Role Detail. */
.role-detail-health {
  margin-top: 14px;
  padding: 16px 20px 18px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.role-detail-health__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 12px;
}
.role-detail-health__big {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  color: var(--fg-0);
}
.role-detail-health__big.great { color: oklch(0.72 0.14 160); }
.role-detail-health__big.good  { color: oklch(0.72 0.10 230); }
.role-detail-health__big.watch { color: oklch(0.78 0.14 75); }
.role-detail-health__big.risk  { color: oklch(0.72 0.16 27); }
.role-detail-health__big-suffix {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: 0;
}
.role-detail-health__grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.role-detail-health__metric {
  display: grid;
  grid-template-columns: 160px 1fr 100px;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--fg-1);
}
.role-detail-health__label { color: var(--fg-1); }
.role-detail-health__bar {
  display: block;
  height: 4px;
  background: var(--ink-4);
  border-radius: 2px;
  overflow: hidden;
}
.role-detail-health__bar > span { display: block; height: 100%; border-radius: 2px; }
.role-detail-health__val {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.role-detail-health__trend { margin-top: 14px; }
.role-detail-health__trend-svg {
  width: 100%;
  height: 50px;
  display: block;
}
.role-detail-health__trend-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-3);
}

@media (max-width: 960px) {
  .role-detail-hero--ring { grid-template-columns: 1fr; }
  .role-detail-panels { grid-template-columns: 1fr; }
}
.role-detail-hero__bar-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.role-detail-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-top: 16px;
}
.role-detail-tab {
  border: 0;
  background: transparent;
  color: var(--fg-2);
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
}
.role-detail-tab.active {
  color: var(--fg-0);
  border-bottom-color: var(--accent);
}
.role-detail-panel { padding-top: 16px; }

/* Journal — mock-aligned cockpit + header toolbar + entry feed.
   Replaces the legacy rail/prompt-banner layout.

   JOURNAL-1: re-flowed as discrete rounded-rectangle cards with 12px gaps
   (matches the Notifications cockpit pattern). The grid wrapper carries no
   background or border now — each card stands alone on the page paper. */
.journal-cockpit {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: calc(var(--gap) * 1.5);
}
@media (max-width: 1280px) {
  .journal-cockpit { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .journal-cockpit { grid-template-columns: 1fr; }
}
.journal-cockpit__card {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 110px;
}
/* JOURNAL-1: Streak card uses the same neutral paper as its siblings —
   the orange accent fill was distracting. Hero number stays prominent. */
.journal-cockpit__card--streak {
  background: var(--ink-1);
}
.journal-cockpit__head {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.journal-cockpit__hero {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.journal-cockpit__num {
  font-size: 28px;
  font-weight: 600;
  color: var(--fg-0);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.journal-cockpit__num--small { font-size: 18px; }
.journal-cockpit__hero-meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
  text-transform: lowercase;
}
.journal-cockpit__hero-spacer { flex: 1; }
.journal-cockpit__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
  margin-top: auto;
  flex-wrap: wrap;
}
.journal-cockpit__sep { color: var(--fg-3); opacity: 0.6; }
.journal-cockpit__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
  padding-top: 4px;
}
.journal-cockpit__bar {
  flex: 1;
  background: var(--ink-4);
  border-radius: 2px;
  min-height: 4px;
  transition: background 0.15s;
}
.journal-cockpit__bar.is-today { background: var(--accent); }

/* Journal tab buttons — individual outlined buttons, not a fused segmented
   control. Per JOUR-4: each button gets its own border/radius and a small
   gap between them; active state uses --accent-soft fill + --accent border. */
.journal-toolbar__tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.journal-toolbar__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  padding: 5px 10px;
  font-size: 11.5px;
  font-family: var(--ff-mono);
  background: transparent;
  color: var(--fg-2);
  transition: background .12s, color .12s, border-color .12s;
}
.journal-toolbar__tab:hover {
  background: var(--ink-2);
  color: var(--fg-0);
}
.journal-toolbar__tab.on {
  border-color: color-mix(in oklch, var(--accent), var(--line) 40%);
  background: var(--accent-soft);
  color: var(--accent);
}

/* Header-row filter widgets (text input + selects). */
.journal-toolbar__filter,
.journal-toolbar__select {
  font-family: var(--ff-mono);
  font-size: 12px;
  height: 28px;
  padding: 0 10px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--fg-1);
  outline: none;
  transition: border-color 0.12s;
}
.journal-toolbar__filter:focus,
.journal-toolbar__select:focus { border-color: var(--accent); }
.journal-toolbar__filter::placeholder { color: var(--fg-3); }
.journal-toolbar__filter { min-width: 180px; }
.journal-toolbar__select { min-width: 110px; }

/* Entry feed — day groups + entry cards. */
.journal-feed {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.journal-feed__day { display: flex; flex-direction: column; gap: 10px; }
.journal-feed__day-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 0;
}
.journal-feed__day-date {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-0);
}
.journal-feed__day-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
}
.journal-feed__day-sep { opacity: 0.6; }
.journal-feed__day-spacer { flex: 1; }
.journal-feed__day-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.journal-card {
  display: grid;
  grid-template-columns: 56px 1fr 60px;
  gap: 14px;
  padding: 12px 14px 12px 16px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.12s, background 0.12s;
}
.journal-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent-bar, var(--ink-4));
}
.journal-card:hover { border-color: color-mix(in oklch, var(--accent), var(--line) 50%); background: var(--ink-2); }
.journal-card__time {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--fg-3);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.journal-card__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.journal-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.journal-card__kind {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.journal-card__kind.kind-free      { background: color-mix(in oklch, var(--fg-3), transparent 80%); color: var(--fg-2); }
.journal-card__kind.kind-gratitude { background: color-mix(in oklch, oklch(0.72 0.17 25), transparent 82%); color: oklch(0.72 0.17 25); }
.journal-card__kind.kind-prompt    { background: color-mix(in oklch, oklch(0.72 0.12 240), transparent 82%); color: oklch(0.72 0.12 240); }
.journal-card__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-0);
}
.journal-card__role-pill {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-3);
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  letter-spacing: 0.06em;
}
.journal-card__prompt {
  font-size: 12px;
  font-style: italic;
  color: var(--fg-3);
}
.journal-card__body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-1);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.journal-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.journal-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  padding: 1px 8px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.journal-card__meta {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 2px;
}
.journal-card__bar {
  display: inline-flex;
  align-items: flex-end;
  width: 6px;
  height: 36px;
  background: var(--ink-3);
  border-radius: 2px;
  overflow: hidden;
}
.journal-card__bar > span { display: block; width: 100%; border-radius: 2px; }
.journal-card__bar--mood   > span { background: oklch(0.72 0.17 25); }
.journal-card__bar--energy > span { background: oklch(0.72 0.12 240); }
.journal-card__words {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  align-self: flex-end;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

/* Dialog chip-picker (used by ClaudeJournalEntryDialog for linked tasks). */
.claude-dlg__chip-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
  padding: 4px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.claude-dlg__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 10px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.claude-dlg__chip:hover { border-color: color-mix(in oklch, var(--accent), var(--line) 50%); }
.claude-dlg__chip.on {
  background: color-mix(in oklch, var(--accent), transparent 82%);
  border-color: color-mix(in oklch, var(--accent), transparent 50%);
  color: var(--accent);
}

/* Prompt-entry browse/random buttons inside ClaudeJournalEntryDialog. */
.claude-dlg__prompt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.claude-dlg__inline-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 4px 10px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--fg-1);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.claude-dlg__inline-action:hover:not(:disabled) {
  background: var(--ink-3);
  border-color: color-mix(in oklch, var(--accent), var(--line) 50%);
  color: var(--fg-0);
}
.claude-dlg__inline-action:disabled { opacity: 0.5; cursor: not-allowed; }

/* JournalPromptPickerDialog — vertical list of prompt rows. */
.journal-prompt-picker__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.journal-prompt-picker__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: var(--ink-2);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg-1);
  font-family: inherit;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.journal-prompt-picker__row:hover {
  background: var(--ink-3);
  border-color: color-mix(in oklch, var(--accent), var(--line) 50%);
  color: var(--fg-0);
}
.journal-prompt-picker__row.on {
  background: color-mix(in oklch, var(--accent), transparent 86%);
  border-color: color-mix(in oklch, var(--accent), transparent 50%);
  color: var(--accent);
}
.journal-prompt-picker__bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}
.journal-prompt-picker__text {
  flex: 1;
  line-height: 1.4;
}

/* Journal — RD-6: Calendar month grid + Streaks strip. */
.journal-cal {
  padding: 16px;
}
.journal-cal__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 10px;
}
.journal-cal__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.journal-cal__dow-cell {
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.journal-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.journal-cal__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  border-radius: 6px;
  background: var(--ink-2);
  min-height: 54px;
  position: relative;
  cursor: default;
}
.journal-cal__day.muted { opacity: 0.35; }
.journal-cal__day.today {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}
.journal-cal__day.level-1 { background: color-mix(in oklch, var(--accent) 10%, var(--ink-2)); }
.journal-cal__day.level-2 { background: color-mix(in oklch, var(--accent) 20%, var(--ink-2)); }
.journal-cal__day.level-3 { background: color-mix(in oklch, var(--accent) 32%, var(--ink-2)); }
.journal-cal__day-num {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--fg-1);
}
.journal-cal__dots {
  display: flex;
  gap: 2px;
  margin-top: 4px;
}
.journal-cal__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.journal-cal__dot.jot  { background: oklch(0.72 0.12 240); }
.journal-cal__dot.mood { background: oklch(0.72 0.17 25); }
.journal-cal__dot.refl { background: var(--accent); }

.journal-streaks {
  padding: 24px;
}
.journal-streaks__hero {
  text-align: center;
  margin-bottom: 16px;
}
.journal-streaks__num {
  font-size: 64px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.04em;
  line-height: 1;
}
.journal-streaks__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 4px;
}
.journal-streaks__subhead {
  text-align: center;
  font-size: 12.5px;
  color: var(--fg-2);
  margin-bottom: 14px;
}
.journal-streaks__strip {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  gap: 4px;
}
.journal-streaks__cell {
  height: 22px;
  border-radius: 3px;
  background: var(--ink-2);
}
.journal-streaks__cell.on {
  background: var(--accent);
}
.journal-streaks__legend {
  display: flex;
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-3);
  margin-top: 6px;
}
/* ================================================================
   PROJECTS (Phase 4) — coming-soon stub
   ================================================================ */
.projects-stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  gap: 16px;
  color: var(--fg-2);
}
.projects-stub__icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 1.5px dashed var(--line);
  display: grid;
  place-items: center;
  color: var(--fg-3);
}
.projects-stub__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--fg-0);
  letter-spacing: -0.01em;
}
.projects-stub__hint {
  max-width: 420px;
  line-height: 1.5;
  font-size: 13px;
}

/* Projects page — Phase 5 */
.projects-upsell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  gap: 12px;
  color: var(--fg-2);
}
.projects-upsell__icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 1.5px dashed var(--line);
  display: grid;
  place-items: center;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.projects-upsell h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg-0);
  letter-spacing: -0.01em;
}
.projects-upsell p {
  max-width: 420px;
  margin: 0 0 8px;
  line-height: 1.5;
  font-size: 13px;
}

.projects-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.projects-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.projects-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.projects-group__count {
  margin-left: auto;
  color: var(--fg-3);
  font-family: var(--ff-mono);
  font-size: 11px;
}
.project-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 18px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s;
}
.project-row:hover { border-color: var(--fg-3); }

/* Item 11 — grid row layout: title/description/next on the left, status as a
   dedicated middle column, stats right-aligned. Easier to scan than the old
   inline pill after the title. */
.project-row--grid {
  display: grid;
  grid-template-columns: 1fr 140px auto;
  align-items: start;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.project-row__col-title { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.project-row__col-status { display: flex; align-items: center; justify-content: flex-start; }
.project-row__col-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-2);
}
.project-row__col-meta .warn { color: oklch(0.72 0.17 30); }
.project-row__col-meta .project-row__health {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.project-row__desc {
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.project-row__rail {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 8px 0 0 8px;
}
.project-row__title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.project-row__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-row__code {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  background: var(--ink-2);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 4px;
}
.project-row__status {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--fg-2);
}
.project-row__status--planning { color: oklch(0.74 0.08 240); border-color: oklch(0.74 0.08 240 / 0.4); }
.project-row__status--active   { color: oklch(0.72 0.14 160); border-color: oklch(0.72 0.14 160 / 0.4); }
.project-row__status--paused   { color: oklch(0.78 0.12 75);  border-color: oklch(0.78 0.12 75 / 0.4); }
.project-row__status--stalled  { color: oklch(0.72 0.16 27);  border-color: oklch(0.72 0.16 27 / 0.4); }
.project-row__status--done     { color: var(--fg-3); }
.project-row__status--archived { color: var(--fg-3); opacity: 0.7; }
.project-row__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
  flex-shrink: 0;
}
.project-row__meta .warn { color: oklch(0.78 0.14 75); }
.project-row__due {
  color: var(--fg-3);
}
.project-row__health.great { color: oklch(0.72 0.14 160); }
.project-row__health.good  { color: oklch(0.72 0.10 230); }
.project-row__health.watch { color: oklch(0.76 0.14 75); }
.project-row__health.risk  { color: oklch(0.72 0.16 27); }

/* Projects — Board view */
.projects-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 12px;
  overflow-x: auto;
}
.projects-board__col {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
}
.projects-board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  padding: 2px 6px 8px;
  border-bottom: 1px solid var(--line);
}
.projects-board__count {
  color: var(--fg-3);
  font-family: var(--ff-mono);
  font-size: 11px;
}
.projects-board__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.projects-board__card {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px 10px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.12s;
}
.projects-board__card:hover { border-color: var(--fg-3); }
.projects-board__card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.projects-board__card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-2);
}
.projects-board__card-meta .warn { color: oklch(0.78 0.14 75); }

/* Projects — RD-5 — Board card chips row + outcome sub-line. */
.projects-board__card-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}
.projects-board__card-role {
  font-weight: 600;
}
.projects-board__card-outcome {
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.45;
  margin: 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 5th cockpit cell on Projects — one row per role: swatch + name + bar + count.
   PROJ-1 surfaces the role name inline so users can read the categorical
   labels at a glance; the bar still encodes live/total ratio but shares the
   row's flex space with the name and is therefore narrower. */
.projects-by-role { display: flex; flex-direction: column; gap: 4px; }
.projects-by-role__row {
  display: grid;
  /* Name and bar both flex (minmax 0) so neither pushes the other off-row.
     Name has a soft cap (60% of remaining space) so very long role names
     don't squeeze the bar to nothing. */
  grid-template-columns: 12px minmax(0, 0.6fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.projects-by-role__swatch {
  width: 10px; height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.projects-by-role__name {
  /* min-width: 0 lets text-overflow: ellipsis engage inside the grid cell
     even though the column is sized as a flex track. */
  min-width: 0;
  font-size: 11.5px;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.projects-by-role__bar {
  height: 4px;
  background: var(--ink-3);
  border-radius: 2px;
  overflow: hidden;
  display: block;
  min-width: 0;
}
.projects-by-role__bar > span {
  display: block; height: 100%; border-radius: 2px;
}
.projects-by-role__count {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
/* PROJ-2 — collapse toggle + compact summary state. The toggle pins to the
   top-right of the cockpit cell; collapsed body shows a one-line summary so
   the cockpit row stays short. */
.projects-by-role-head {
  display: flex;
  justify-content: flex-end;
  margin-top: -4px;
  margin-bottom: 2px;
}
.projects-by-role-toggle {
  background: transparent;
  border: none;
  color: var(--fg-3);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-grid;
  place-items: center;
}
.projects-by-role-toggle:hover { color: var(--fg-1); background: var(--ink-3); }
.projects-by-role--collapsed { padding: 4px 0; }
.projects-by-role__summary {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
}

/* Projects — list-row NEXT: <task title> footer. Shows under the meta
   row so the user sees the tip of the iceberg without opening the drawer. */
.project-row__next {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
  padding-top: 4px;
  border-top: 1px dashed var(--line-soft, var(--line));
}
.project-row__next-label {
  letter-spacing: 0.14em;
  color: var(--fg-3);
}
.project-row__next-task {
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* Projects — board-card milestone bar strip. One segment per milestone,
   filled when complete. Uses the project color for the fill. */
.projects-board__card-milestones {
  display: flex;
  gap: 3px;
  padding: 2px 0;
}
.projects-board__milestone {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--ink-3);
}
.projects-board__milestone.is-done {
  background: var(--bar-color, var(--accent));
}

.projects-board__card-next {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-2);
  padding-top: 4px;
  border-top: 1px dashed var(--line-soft, var(--line));
}
.projects-board__card-next-label {
  letter-spacing: 0.14em;
  color: var(--fg-3);
}
.projects-board__card-next-task {
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.projects-board__card-due {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}

/* Projects — Timeline view */
.projects-timeline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}
.projects-timeline__axis {
  position: relative;
  height: 22px;
  border-bottom: 1px solid var(--line);
  margin-left: 180px;
}
.projects-timeline__month {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.projects-timeline__today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: oklch(0.78 0.14 75);
  opacity: 0.6;
  pointer-events: none;
}
.projects-timeline__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  cursor: pointer;
}
.projects-timeline__row:hover .projects-timeline__bar {
  filter: brightness(1.1);
}
.projects-timeline__label {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  padding: 4px 0;
}
.projects-timeline__name {
  font-size: 12px;
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.projects-timeline__track {
  position: relative;
  height: 18px;
  background: var(--ink-1);
  border-radius: 4px;
}
.projects-timeline__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in oklch, var(--bar-color, var(--accent)), transparent 50%);
  border-left: 3px solid var(--bar-color, var(--accent));
  border-radius: 4px;
  overflow: hidden;
  min-width: 18px;
}
.projects-timeline__bar-label {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 12px);
}

/* Projects — detail drawer */
.project-drawer { width: 560px; max-width: 90vw; }
.project-drawer__status {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.project-drawer__tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin: 14px 0;
}
.project-drawer__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--fg-2);
  font-family: var(--ff-mono);
  font-size: 11px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.project-drawer__tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.project-drawer__tab-count {
  background: var(--ink-2);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 10px;
  color: var(--fg-3);
}
.project-drawer__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.project-drawer__stat {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}
.project-drawer__stat-label {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.project-drawer__stat-main {
  font-size: 20px;
  font-weight: 600;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
}
.project-drawer__stat-main.warn { color: oklch(0.78 0.14 75); }
.project-drawer__stat-sub {
  font-size: 13px;
  color: var(--fg-3);
  font-weight: 400;
}
.project-drawer__section { margin: 14px 0; }
.project-drawer__section-label {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.project-drawer__outcome {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-1);
  font-style: italic;
}
.project-drawer__task-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.project-drawer__task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--ink-2);
  border: 1px solid var(--line);
}
.project-drawer__task-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fg-3);
  flex-shrink: 0;
}
.project-drawer__task-dot.done { background: oklch(0.72 0.14 160); }
.project-drawer__task-dot.warn { background: oklch(0.72 0.16 27); }
.project-drawer__task-title {
  flex: 1;
  font-size: 13px;
  color: var(--fg-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-drawer__task-title.done {
  color: var(--fg-3);
  text-decoration: line-through;
}
.project-drawer__task-due {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
}
.project-drawer__task-due.warn { color: oklch(0.72 0.16 27); }

.project-drawer__milestones {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.project-drawer__milestone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.project-drawer__milestone.done .project-drawer__milestone-name {
  color: var(--fg-3);
  text-decoration: line-through;
}
.project-drawer__milestone-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.project-drawer__milestone-name {
  background: transparent;
  border: 0;
  font-size: 13px;
  color: var(--fg-0);
  padding: 0;
  outline: none;
}
.project-drawer__milestone-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.project-drawer__milestone-progress {
  flex: 1;
  height: 3px;
  background: var(--ink-3);
  border-radius: 2px;
  overflow: hidden;
  max-width: 80px;
}
.project-drawer__milestone-progress > div {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}
.project-drawer__milestone-delete {
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}
.project-drawer__milestone-delete:hover { color: oklch(0.72 0.16 27); background: var(--ink-3); }
.project-drawer__milestone-add {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.project-drawer__milestone-add > input { flex: 1; }

.project-drawer__notes {
  width: 100%;
  min-height: 240px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  font-family: var(--ff-sans, inherit);
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-0);
  resize: vertical;
}

/* ================================================================
   DASHBOARD (Phase 4.9) — Command center
   ================================================================ */

/* Hero: welcome + momentum ring + how-it's-calculated bars. */
.dashboard-hero {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 18px 22px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-top: 2px;
}
.dashboard-hero__eyebrow {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dashboard-hero__dot { color: var(--fg-3); opacity: 0.6; }
.dashboard-hero__streak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: oklch(0.78 0.14 75);
}
.dashboard-hero__title {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-0);
  margin: 2px 0 4px;
}
.dashboard-hero__hint { color: var(--fg-2); font-size: 13.5px; margin: 0; }

.dashboard-hero__momentum {
  display: flex;
  align-items: center;
  gap: 18px;
}
.dashboard-hero__momentum-ring { width: 120px; height: 120px; }
.dashboard-hero__momentum-meta { display: flex; flex-direction: column; gap: 2px; }
.dashboard-hero__momentum-label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
}
.dashboard-hero__momentum-sub { font-size: 12px; color: var(--fg-2); }
.dashboard-hero__momentum-spark { margin-top: 4px; }

.momentum-ring { transform: rotate(-90deg); transform-origin: center; }
.momentum-ring__track {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 9;
}
.momentum-ring__fill {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dasharray .4s ease;
}
.momentum-ring__fill.great { stroke: oklch(0.72 0.14 160); }
.momentum-ring__fill.good  { stroke: oklch(0.72 0.10 230); }
.momentum-ring__fill.watch { stroke: oklch(0.78 0.14 75); }
.momentum-ring__fill.risk  { stroke: oklch(0.72 0.16 27); }
.momentum-ring__num {
  transform: rotate(90deg);
  transform-origin: center;
  font-family: var(--ff-mono);
  font-size: 28px;
  font-weight: 700;
  fill: var(--fg-0);
  font-variant-numeric: tabular-nums;
}

/* How-it's-calculated — stacked weighted-input bars. */
.dashboard-hero__math { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dashboard-hero__math-head {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.dashboard-hero__math-row {
  display: grid;
  grid-template-columns: 120px 1fr 90px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--fg-1);
}
.dashboard-hero__math-label { color: var(--fg-1); }
.dashboard-hero__math-bar {
  height: 4px;
  background: var(--ink-4);
  border-radius: 2px;
  overflow: hidden;
}
.dashboard-hero__math-bar > span { display: block; height: 100%; border-radius: 2px; }
.dashboard-hero__math-val {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 6.6 — "What now?" card: next actionable task + next habit, with inline actions. */
.dashboard-whatnow {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.dashboard-whatnow__eyebrow {
  font-family: var(--ff-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 10px;
}
.dashboard-whatnow__empty {
  color: var(--fg-2);
  font-size: 14px;
  padding: 2px 0;
}
.dashboard-whatnow__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.dashboard-whatnow__cell {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}
.dashboard-whatnow__swatch {
  width: 8px;
  height: 36px;
  border-radius: 3px;
  flex-shrink: 0;
}
.dashboard-whatnow__body {
  flex: 1;
  min-width: 0;
}
.dashboard-whatnow__kind {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.dashboard-whatnow__title {
  font-size: 14px;
  color: var(--fg-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 5-card KPI strip. */
.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.dashboard-kpi {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dashboard-kpi__top {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-3);
}
.dashboard-kpi__label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--fg-3);
}
.dashboard-kpi__num {
  font-family: var(--ff-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.dashboard-kpi__spark { margin-top: auto; opacity: 0.9; }
.dashboard-spark { display: block; }

/* Weekly-review callout — restyled chrome per §2.2 of the gap report. */
.dashboard-callout {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 14px 18px;
  border: 1px solid var(--accent);
  background: color-mix(in oklch, var(--accent) 7%, var(--ink-1));
  border-radius: 12px;
}
.dashboard-callout__glyph {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: color-mix(in oklch, var(--accent) 18%, var(--ink-2));
  color: var(--accent);
  display: grid; place-items: center;
}
.dashboard-callout__body { flex: 1; }
.dashboard-callout__title {
  font-size: 14px; font-weight: 600; color: var(--fg-0);
}
.dashboard-callout__hint { color: var(--fg-2); font-size: 12px; margin-top: 2px; }

/* Dashboard — Phase 2 Item 16: W/M/Q/Y toggle + Today & Attention section. */
.dashboard-hero__timeframe {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}
.dashboard-hero__timeframe-btn {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--ink-1);
  color: var(--fg-2);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.dashboard-hero__timeframe-btn:hover { background: var(--ink-2); color: var(--fg-0); }
.dashboard-hero__timeframe-btn.on {
  /* Per gap doc §7.2 — active = --accent-soft + --accent text + --accent
   * border, NOT solid filled copper. */
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.dashboard-attn { margin-top: 14px; }
.dashboard-attn__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.dashboard-attn__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-0);
  margin: 0;
}
.dashboard-attn__sub {
  font-size: 11.5px;
  color: var(--fg-3);
  font-style: italic;
}
.dashboard-attn__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}
.dashboard-attn__calendar,
.dashboard-attn__panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink-1);
  overflow: hidden;
}
.dashboard-attn__calendar-head,
.dashboard-attn__panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.dashboard-attn__count {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--ink-2);
}
.dashboard-attn__calendar-body { padding: 6px 0; max-height: 300px; overflow-y: auto; }
.dashboard-attn__hour {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 6px;
  align-items: start;
  padding: 2px 14px;
  border-bottom: 1px dashed var(--line-soft);
  min-height: 24px;
}
.dashboard-attn__hour-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-3);
  padding-top: 3px;
}
.dashboard-attn__block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  margin: 2px 0;
  border-left: 3px solid var(--fg-3);
  border-radius: 4px;
  background: color-mix(in oklch, var(--role-tint, var(--fg-3)) 10%, var(--ink-2));
  font-size: 12px;
  color: var(--fg-0);
}
.dashboard-attn__block-dur {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-3);
}

.dashboard-attn__right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dashboard-attn__attn-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--fg-0);
}
.dashboard-attn__attn-row:last-child { border-bottom: 0; }
.dashboard-attn__attn-when {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: oklch(0.76 0.14 75);
  min-width: 70px;
}

.dashboard-attn__inbox { padding: 12px 14px; }
.dashboard-attn__inbox-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 10px;
}
.dashboard-attn__inbox-num {
  font-size: 22px;
  font-weight: 600;
  color: var(--fg-0);
  letter-spacing: -0.02em;
}
.dashboard-attn__inbox-lbl {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.dashboard-attn__inbox-sample {
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  font-size: 12px;
  color: var(--fg-1);
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 960px) {
  .dashboard-attn__grid { grid-template-columns: 1fr; }
}

/* Demoted role-health strip — horizontally packed compact rows. */
.dashboard-role-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.dashboard-role-strip__item {
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 4px;
  padding: 10px 12px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.dashboard-role-strip__item:hover { border-color: var(--fg-3); }
.dashboard-role-strip__name {
  grid-column: 2;
  font-size: 13.5px;
  color: var(--fg-0);
}
.dashboard-role-strip__meta {
  grid-column: 2;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.dashboard-role-strip__bar {
  grid-column: 1 / span 2;
  height: 3px;
  background: var(--ink-4);
  border-radius: 2px;
  overflow: hidden;
}
.dashboard-role-strip__bar > span {
  display: block; height: 100%; border-radius: 2px;
}

@media (max-width: 1200px) {
  .dashboard-hero { grid-template-columns: 1fr; }
  .dashboard-kpis { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

.dashboard-shell { padding: 4px 0 40px; }
.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  margin-top: calc(var(--gap) * 1.5);
}
.dashboard-card {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
}
.dashboard-card__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dashboard-role-health {
  display: grid;
  gap: 10px;
}
.dashboard-role-row {
  display: grid;
  grid-template-columns: 24px 1fr auto 120px;
  gap: 14px;
  align-items: center;
}
.dashboard-role-row__mark {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--role-ink);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11px;
}
.dashboard-role-row__name {
  font-size: 13.5px;
  color: var(--fg-0);
}
.dashboard-role-row__num {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
}
.dashboard-role-row__bar {
  height: 4px;
  background: var(--ink-4);
  border-radius: 2px;
  overflow: hidden;
}
.dashboard-role-row__bar > span {
  display: block;
  height: 100%;
  border-radius: 2px;
}

@media (max-width: 960px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   SKILLS (Phase 4) — XP card grid
   ================================================================ */
.skills-shell { padding: 4px 0 40px; }

/* Skills — Phase 4 Item 12: header + grid category bands. */
.skills-header { margin-bottom: 14px; }
.skills-header__eyebrow {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.skills-header__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-0);
  margin: 0 0 4px;
}
.skills-header__sub {
  font-size: 12.5px;
  color: var(--fg-2);
  margin: 0;
  line-height: 1.5;
  max-width: 620px;
}
.skills-grid__group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 14px 0 6px;
}
.skills-grid__group-name {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 600;
}
.skills-grid__group-count {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--ink-2);
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.skill-card {
  position: relative;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.12s;
}
.skill-card:hover { border-color: var(--fg-3); }
/* SKILL-1 — archived cards stay visible (under "Show archived") but read as
   muted so the active set still pops. */
.skill-card.is-archived { opacity: 0.55; }
.skill-card.is-archived:hover { opacity: 0.85; }
.skills-tree__card.is-archived { opacity: 0.55; }
.skills-tree__card.is-archived:hover { opacity: 0.85; }

/* SKILL-1 — kebab popover on skill cards. Mirror of the role-card menu so
   the visual + keyboard shape is consistent across the app. */
.skill-card__menu-anchor {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
}
.skill-card__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.skill-card__menu-btn:hover {
  background: var(--ink-2);
  border-color: var(--line);
  color: var(--fg-0);
}
.skill-card__menu-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.18);
  z-index: 20;
}
.skill-card__menu-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-1);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.skill-card__menu-item:hover { background: var(--ink-2); color: var(--fg-0); }
.skill-card__menu-item--danger { color: oklch(0.72 0.16 27); }
.skill-card__menu-item--danger:hover {
  background: oklch(0.72 0.16 27 / 0.12);
  color: oklch(0.72 0.16 27);
}
.skill-card__menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5;
  background: transparent;
  cursor: default;
}

/* SKILL-2 — full-page detail layout. */
.skill-detail { display: flex; flex-direction: column; gap: 18px; }
.skill-detail__header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.skill-detail__pill {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
}
.skill-detail__pill--archived {
  color: var(--fg-3);
  border-style: dashed;
}
.skill-detail__hero {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 18px;
  align-items: center;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
}
.skill-detail__mark {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--ff-mono);
  font-size: 26px; font-weight: 600;
  color: var(--fg-0);
}
.skill-detail__titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.skill-detail__name { font-size: 22px; font-weight: 500; color: var(--fg-0); margin: 0; }
.skill-detail__levels { display: inline-flex; gap: 8px; align-items: center; color: var(--fg-2); font-size: 13px; }
.skill-detail__level-current, .skill-detail__level-target {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skill-detail__level-target { color: var(--accent); }
.skill-detail__bar {
  width: 100%;
  height: 6px;
  background: var(--ink-3);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.skill-detail__bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}
.skill-detail__kpis { display: flex; gap: 18px; }
.skill-detail__kpi { text-align: right; }
.skill-detail__kpi-num {
  font-family: var(--ff-mono);
  font-size: 22px;
  color: var(--fg-0);
  font-feature-settings: 'tnum';
}
.skill-detail__kpi-label {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 2px;
}
.skill-detail__notes,
.skill-detail__log {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
}
.skill-detail__section-head {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 10px;
}
.skill-detail__notes p { margin: 0; color: var(--fg-1); font-size: 13.5px; line-height: 1.5; }
.skill-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.skill-card__mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--ink-3);
  color: var(--fg-0);
  display: grid;
  place-items: center;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 13px;
}
.skill-card__titles { flex: 1; min-width: 0; }
.skill-card__name { font-size: 14px; color: var(--fg-0); font-weight: 500; }
.skill-card__parent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  margin-top: 2px;
}
.skill-card__category {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.skill-card__levels {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.skill-card__level { flex: 1; }
.skill-card__level-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skill-card__level-value { color: var(--fg-0); font-size: 12.5px; margin-top: 2px; }
.skill-card__bar {
  /* Per gap doc §7.13 — soft track (--accent-soft) + accent fill, not
   * --ink-4 track + saturated copper fill. Reads as progress, not as
   * "burnt copper bar with chunk missing". */
  height: 4px;
  background: var(--accent-soft);
  border-radius: 2px;
  overflow: hidden;
}
.skill-card__bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
}

/* Skill tree (Sk-2) */
.skills-tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.skills-tree__node { display: flex; flex-direction: column; gap: 4px; }
.skills-tree__line {
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.skills-tree__rail {
  width: 2px;
  background: var(--line);
  margin: 0 10px;
  flex-shrink: 0;
}
.skills-tree__card {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s;
}
.skills-tree__card:hover { border-color: var(--fg-3); }
.skills-tree__titles {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* XP ledger (Sk-3) */
.skills-ledger { display: flex; flex-direction: column; gap: 14px; }
.skills-ledger__summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 20px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.skills-ledger__total {
  font-size: 36px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.skills-ledger__total-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.skills-ledger__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.skills-ledger__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.skills-ledger__icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--ink-2);
  display: grid;
  place-items: center;
  color: var(--fg-2);
  flex-shrink: 0;
}
.skills-ledger__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.skills-ledger__title {
  font-size: 13px;
  color: var(--fg-0);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skills-ledger__sub {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.skills-ledger__points {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 600;
  color: oklch(0.72 0.14 160);
}
.skills-ledger__points--zero {
  color: var(--fg-3);
  font-weight: 500;
}
.skills-ledger__when {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  min-width: 40px;
  text-align: right;
}

/* ================================================================
   LOGBOOK (Phase 4) — day-grouped completed items
   ================================================================ */
.logbook-shell { padding: 4px 0 40px; }
.logbook-shell.rewind { animation: rufusLogbookRewind 340ms ease; }
@keyframes rufusLogbookRewind {
  from { opacity: 0; transform: translateY(6px); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
}
.logbook-group { margin-bottom: 18px; }
.logbook-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 8px;
}
.logbook-group__date {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-0);
}
.logbook-group__meta {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
}
.logbook-group__rows {
  display: grid;
  gap: 6px;
}
.logbook-item {
  display: grid;
  grid-template-columns: 52px 20px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--fg-3);
  border-radius: 6px;
  transition: background 0.12s, border-color 0.12s;
}
.logbook-item:hover { background: var(--ink-2); }
/* Click-to-edit affordance — only rows with a backing entity get the cursor
 * change. Leaves room for non-clickable summary rows in the future. */
.logbook-item--clickable { cursor: pointer; }
.logbook-item--clickable:hover { border-color: var(--accent); }
.logbook-item__time-col {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.logbook-item__kind {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
}
.logbook-item__main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.logbook-item__title {
  font-size: 13px;
  color: var(--fg-0);
  font-weight: 500;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.logbook-item__sep { color: var(--fg-3); font-family: var(--ff-mono); font-size: 11px; }
.logbook-item__role-meta,
.logbook-item__date-meta {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  white-space: nowrap;
}
.logbook-item__right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.logbook-item__duration {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.logbook-item__kudos {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--accent);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.logbook-item__kudos--muted {
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.logbook-item--milestone .logbook-item__title { font-weight: 600; }
.logbook-item--milestone:hover {
  background: color-mix(in oklch, oklch(0.72 0.16 85) 14%, transparent) !important;
}

.logbook-cadence {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 32px;
  margin-top: 4px;
}
.logbook-cadence__bar {
  flex: 1;
  min-height: 4px;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.7;
}
.logbook-cadence__bar:last-child { opacity: 1; }

/* Logbook — RD-2: GitHub-style activity heatmap. */
.logbook-heatmap {
  padding: 20px 12px;
  overflow-x: auto;
}
.logbook-heatmap__grid {
  display: grid;
  grid-template-columns: repeat(53, 12px);
  gap: 3px;
}
.logbook-heatmap__col {
  display: grid;
  grid-template-rows: repeat(7, 12px);
  gap: 3px;
}
.logbook-heatmap__cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--ink-2);
}
.logbook-heatmap__cell.level-1 { background: color-mix(in oklch, var(--accent) 25%, var(--ink-2)); }
.logbook-heatmap__cell.level-2 { background: color-mix(in oklch, var(--accent) 50%, var(--ink-2)); }
.logbook-heatmap__cell.level-3 { background: color-mix(in oklch, var(--accent) 75%, var(--ink-2)); }
.logbook-heatmap__cell.level-4 { background: var(--accent); }
.logbook-heatmap__legend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 14px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  padding-left: 4px;
}
.logbook-heatmap__legend .logbook-heatmap__cell { margin: 0 1px; }



/* ================================================================
   PLAYBOOKS (Phase 4) — reusable-sequence card grid
   ================================================================ */
.playbooks-shell { padding: 4px 0 40px; }
/* Playbooks — header / kpis / toolbar / cards. Mock layout mirrors the
 * Blueprints page: lead column on the left (eyebrow with section accent +
 * title + subtitle) and actions column on the right (search + filled CTA).
 */
.playbooks-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.playbooks-header__lead { flex: 1 1 420px; min-width: 0; }
.playbooks-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.playbooks-header__eyebrow-1 { color: var(--fg-3); }
.playbooks-header__eyebrow-sep { color: var(--fg-3); opacity: 0.6; }
.playbooks-header__eyebrow-2 { color: var(--accent); }
.playbooks-header__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-0);
  margin: 0 0 4px;
}
.playbooks-header__sub {
  font-size: 12.5px;
  color: var(--fg-2);
  margin: 0;
  line-height: 1.5;
  max-width: 620px;
}
.playbooks-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.playbooks-header__search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-1);
  color: var(--fg-3);
  min-width: 240px;
  transition: border-color 0.12s ease;
}
.playbooks-header__search:focus-within { border-color: var(--accent); color: var(--fg-0); }
.playbooks-header__search input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--fg-0);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  min-width: 0;
}
.playbooks-header__search-key {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1;
}
/* PLAY-1 — inline help banner clarifying One-shot vs Recurring. Two equal
 * halves with a subtle separator, plus a "Learn more" trailing link that
 * deep-links to /help#playbooks. */
.playbooks-banner {
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: 12px 16px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: calc(var(--gap) * 1.25);
}
.playbooks-banner__kind {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}
.playbooks-banner__kind > .glyph { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.playbooks-banner__kind-name {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-0);
  font-weight: 600;
}
.playbooks-banner__kind-desc {
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.45;
  margin-top: 2px;
}
.playbooks-banner__sep {
  width: 1px;
  background: var(--line-soft);
}
.playbooks-banner__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  font-size: 12px;
  color: var(--fg-2);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  flex-shrink: 0;
  transition: color 0.12s, border-color 0.12s;
}
.playbooks-banner__more:hover { color: var(--fg-0); border-color: var(--accent); }
@media (max-width: 720px) {
  .playbooks-banner { flex-direction: column; align-items: stretch; }
  .playbooks-banner__sep { width: auto; height: 1px; }
}

/* PLAY-1 — kind pill on each playbook card. Mono-caps "ONE-SHOT" / "RECURRING"
 * with a small leading glyph. The two color variants stay subtle so the pill
 * doesn't compete with the role color stripe on the card edge. */
.playbook-card__kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--fg-2);
}
.playbook-card__kind--oneshot   { color: var(--accent); border-color: color-mix(in oklch, var(--accent), transparent 65%); }
.playbook-card__kind--recurring { color: var(--fg-2); }

/* PLAY-1 — empty state with two CTAs. Centered column on the page paper. */
.playbooks-empty {
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.playbooks-empty__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--fg-0);
}
.playbooks-empty__sub {
  max-width: 520px;
  color: var(--fg-2);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}
.playbooks-empty__ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

/* "+ New playbook" — accent-filled primary CTA per PLAY-2. Matches the New
 * buttons on /tasks, /habits, /roles. The Blueprints CTA (.blueprints-header__cta)
 * shares this styling. */
.playbooks-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 0;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease;
}
.playbooks-header__cta:hover {
  background: color-mix(in oklch, var(--accent) 88%, var(--fg-0));
}
.playbooks-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 14px 0;
  flex-wrap: wrap;
}

.playbook-card__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
}
.playbook-card__stat { text-align: left; }
.playbook-card__stat-num {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
}
.playbook-card__stat-unit {
  font-size: 11px;
  color: var(--fg-3);
  font-weight: 500;
  margin-left: 1px;
}
.playbook-card__stat-lbl {
  display: block;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  text-transform: uppercase;
  margin-top: 2px;
}
.playbook-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
}
.playbook-card__last-run {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.playbook-card__run {
  /* Mock-aligned: filled copper, not outlined. Matches the Blueprints
   * .blueprint-card__use treatment since Run is the card's primary action. */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 6px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease;
}
.playbook-card__run:hover {
  background: color-mix(in oklch, var(--accent) 88%, var(--fg-0));
}

/* Step preview rendered inside each playbook card. Up to 4 step rows, each
 * with a mono offset chip ("d0", "+1d", "+4d") and the step text. The
 * "+ N more" tail appears when the playbook has more steps than fit. */
.playbook-card__steps {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  margin: 2px 0 2px;
}
.playbook-card__step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
  color: var(--fg-1);
  line-height: 1.4;
}
.playbook-card__step-offset {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  text-align: left;
}
.playbook-card__step-text {
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.playbook-card__step-more {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin-top: 2px;
  padding-left: 36px;
}

/* Playbooks — RD-8: detail drawer steps + Run confirmation modal. */
.playbook-drawer__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.playbook-drawer__stats > div { text-align: center; }
.playbook-drawer__stat-num {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
}
.playbook-drawer__unit { font-size: 11px; color: var(--fg-3); margin-left: 2px; }
.playbook-drawer__stat-lbl {
  display: block;
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 2px;
}

.playbook-drawer__steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.playbook-drawer__step {
  display: grid;
  grid-template-columns: 48px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--ink-1);
  border-radius: 6px;
  font-size: 13px;
}
.playbook-drawer__step-offset {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-2);
  text-align: center;
  background: var(--ink-2);
  padding: 2px 6px;
  border-radius: 4px;
}
.playbook-drawer__step-text { color: var(--fg-0); }
.playbook-drawer__step-tier {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--ink-2);
  color: var(--fg-3);
}
.playbook-drawer__step-tier.tier-high    { background: oklch(0.78 0.14 75 / 0.2);  color: oklch(0.78 0.14 75); }
.playbook-drawer__step-tier.tier-critical{ background: oklch(0.70 0.18 25 / 0.2);  color: oklch(0.70 0.18 25); }
.playbook-drawer__step-dur {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}

.playbook-runmodal__scrim {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: grid;
  place-items: center;
  backdrop-filter: blur(2px);
}
.playbook-runmodal {
  width: min(520px, 90vw);
  max-height: 80vh;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.playbook-runmodal__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-0);
}
.playbook-runmodal__body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.playbook-runmodal__anchors { display: flex; gap: 6px; margin-top: 6px; }
.playbook-runmodal__anchor {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-1);
  color: var(--fg-2);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.playbook-runmodal__anchor:hover { background: var(--ink-2); color: var(--fg-0); }
.playbook-runmodal__anchor.on {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.playbook-runmodal__preview {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  max-height: 200px;
  overflow-y: auto;
}
.playbook-runmodal__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.playbook-runmodal__date { font-family: var(--ff-mono); color: var(--fg-2); }
.playbook-runmodal__title { color: var(--fg-0); }

.playbooks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
/* Card — colored left edge in the role's color, role chip with dot in the
 * top-left, four-stat strip at the bottom. Mirrors the Blueprints card
 * treatment for visual consistency. */
.playbook-card {
  position: relative;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--pb-edge, var(--fg-3));
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.12s;
}
.playbook-card:hover { border-color: var(--fg-3); border-left-color: var(--pb-edge, var(--fg-3)); }
.playbook-card__head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-2);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.playbook-card__roledot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
}
.playbook-card__badge {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--fg-3);
}
.playbook-card__role {
  font-weight: 600;
  letter-spacing: 0.10em;
}
.playbook-card__name {
  font-size: 15px;
  color: var(--fg-0);
  font-weight: 500;
}
.playbook-card__desc {
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.5;
}

/* ================================================================
   BLUEPRINTS (Phase 4) — forkable-archetype catalog
   ================================================================ */
.blueprints-shell { padding: 4px 0 40px; }
/* Blueprints — header / toolbar / cards. Mock layout: lead column on the
 * left (eyebrow + title + subtitle) and an actions column on the right
 * (search input + "+ New blueprint" filled CTA). */
.blueprints-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.blueprints-header__lead { flex: 1 1 420px; min-width: 0; }
.blueprints-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.blueprints-header__eyebrow-1 { color: var(--fg-3); }
.blueprints-header__eyebrow-sep { color: var(--fg-3); opacity: 0.6; }
.blueprints-header__eyebrow-2 { color: var(--accent); }
.blueprints-header__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-0);
  margin: 0 0 4px;
}
.blueprints-header__sub {
  font-size: 12.5px;
  color: var(--fg-2);
  margin: 0;
  line-height: 1.5;
  max-width: 540px;
}
.blueprints-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.blueprints-header__search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-1);
  color: var(--fg-3);
  min-width: 260px;
  transition: border-color 0.12s ease;
}
.blueprints-header__search:focus-within { border-color: var(--accent); color: var(--fg-0); }
.blueprints-header__search input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--fg-0);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  min-width: 0;
}
.blueprints-header__search-key {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1;
}
/* "+ New blueprint" — dark filled primary CTA per mock. Distinct from the
 * copper accent button on Tasks (.tasks-toolbar__new) since this is the
 * page-primary action of an empty/discovery surface, not an in-flow add. */
/* BP-1: accent-filled primary CTA so it matches /tasks, /habits, /roles. */
.blueprints-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 0;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease;
}
.blueprints-header__cta:hover {
  background: color-mix(in oklch, var(--accent) 88%, var(--fg-0));
}
.blueprints-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
  flex-wrap: wrap;
}
.blueprints-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.blueprints-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--fg-2);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.blueprints-tab:hover { color: var(--fg-0); }
.blueprints-tab.on { color: var(--fg-0); border-bottom-color: var(--accent); }
.blueprints-tab__count {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--ink-2);
}
.blueprints-toolbar__right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* Category filter pills — capsule outline, copper fill on active. */
.bp-pills {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.bp-pill:hover { color: var(--fg-0); border-color: var(--fg-3); }
.bp-pill.on {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
/* Optional colored dot inside the pill (used by the role-filter chips on
 * the Playbooks page, where each pill mirrors a role color). */
.bp-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
}
/* SORT label + dropdown */
.bp-sort__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.bp-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.bp-sort__select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--fg-1);
  font-family: inherit;
  font-size: 12.5px;
  padding-right: 16px;
  cursor: pointer;
  outline: none;
}
.bp-sort__chev {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-3);
  pointer-events: none;
}
/* KPI strip — flat panel, label-on-top, big number, supporting subtext.
 * Distinct from the global .cockpit (which uses inverted layout for the
 * Today/Goals greet pattern). Per the redesign mock, the dividers between
 * cells are hairline, and there's no rounded outer card. */
.bp-kpi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.bp-kpi__cell {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 96px;
}
.bp-kpi__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bp-kpi__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.bp-kpi__glyph { color: var(--fg-3); opacity: 0.65; }
.bp-kpi__num {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* Variant for cells that show a name/string instead of a number. Smaller
 * font so the longer text doesn't wrap and stays readable next to the other
 * KPI cells (e.g. the "Most used" tile on Playbooks). */
.bp-kpi__num--name {
  font-size: 18px;
  letter-spacing: -0.01em;
  font-variant-numeric: normal;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-kpi__sub {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
/* Tone variants for sub-text growth indicators (up = green, down = red).
 * Used for the runs-vs-last-month delta and similar trend captions. */
.bp-kpi__sub--up   { color: oklch(0.66 0.14 145); }
.bp-kpi__sub--down { color: oklch(0.62 0.18 25); }
@media (max-width: 960px) {
  .bp-kpi { grid-template-columns: repeat(2, 1fr); }
}

.blueprint-card__top { display: flex; gap: 12px; align-items: flex-start; }
.blueprint-card__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.blueprint-card__stat { text-align: center; }
.blueprint-card__stat-num {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
}
.blueprint-card__stat-lbl {
  display: block;
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  text-transform: uppercase;
  margin-top: 2px;
}
.blueprint-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.blueprint-card__used {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.blueprint-card__use {
  /* Per Blueprints redesign — "+ Use" is a page-primary action and the
   * mock fills it copper. Reverses the prior gap doc §7.18 call (which
   * spec'd outline) since the redesign mock disagrees with that call. */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 6px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease;
}
.blueprint-card__use:hover {
  background: color-mix(in oklch, var(--accent) 88%, var(--fg-0));
}

.blueprints-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
/* Card — colored left edge in the role's color, status tag in the
 * top-right, role-type subtitle under the name (mono, fg-3). */
.blueprint-card {
  position: relative;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--bp-edge, var(--fg-3));
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.12s;
}
.blueprint-card:hover { border-color: var(--fg-3); border-left-color: var(--bp-edge, var(--fg-3)); }
.blueprint-card__tag {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.5;
}
.blueprint-card__tag--starter {
  background: var(--ink-2);
  color: var(--fg-3);
  border: 1px solid var(--line);
}
.blueprint-card__tag--yours {
  /* Light green pill — leans on a fixed RGBA so it reads correctly in
   * light + dark themes without a token rename. */
  background: rgba(120, 180, 120, 0.18);
  color: rgb(74, 130, 80);
  border: 1px solid rgba(120, 180, 120, 0.45);
}
.blueprint-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--role-ink);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 16px;
}
.blueprint-card__body { flex: 1; min-width: 0; }
.blueprint-card__name {
  font-size: 15px;
  color: var(--fg-0);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.blueprint-card__role {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--bp-edge, var(--fg-3));
  letter-spacing: 0.10em;
  margin-top: 2px;
  text-transform: uppercase;
}
.blueprint-card__desc {
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.5;
  font-style: italic;
  margin-top: 2px;
}
.blueprint-card__meta {
  display: flex;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

/* ================================================================
   ONBOARDING (Phase 4) — full-screen wizard
   ================================================================ */
.onboarding-shell {
  min-height: calc(100vh - 100px);
  display: grid;
  place-items: center;
  padding: 40px 24px;
}
.onboarding-card {
  width: min(680px, 100%);
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.onboarding-card__steps {
  display: flex;
  gap: 6px;
  justify-content: center;
}
/* MUX-5.6 — wrapper for the progress bar + "Step X of Y" text that
 * replaces the 9-pip strip. Constrains the bar width so it doesn't span
 * the entire card on wide viewports and gives the label breathing room. */
.onboarding-card__progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
}
.onboarding-card__progress .mud-progress-linear {
  width: 100%;
  max-width: 360px;
}
.onboarding-card__progress-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.onboarding-step {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--fg-3);
  font-family: var(--ff-mono);
  font-size: 11px;
}
.onboarding-step.active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 700;
}
.onboarding-step.done {
  background: var(--ink-3);
  color: var(--fg-1);
}
.onboarding-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.onboarding-brand {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 32px;
}
.onboarding-card__header h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-0);
}
.onboarding-card__header p {
  margin: 0;
  max-width: 460px;
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.55;
}
.onboarding-card__title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-0);
}
.onboarding-card__hint {
  margin: 0;
  color: var(--fg-2);
  font-size: 13.5px;
}
.onboarding-role-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.onboarding-role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
}
.onboarding-role-card:hover { background: var(--ink-2); }
.onboarding-role-card.picked {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.onboarding-role-card__mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--role-ink);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 14px;
}
.onboarding-role-card__name {
  font-size: 13px;
  color: var(--fg-0);
}
.onboarding-card__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}
.onboarding-card__step-label {
  flex: 1;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Onboarding + dialog footer buttons.
 * Aligned to the canonical .btn-primary / .btn-ghost spec from gap doc
 * §6.1 / §8.1: 36px tall, 6px radius, 14px Inter Tight 500. The names
 * are kept for compatibility with existing markup.                     */
.onboarding-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  font-family: inherit;
  transition: background .12s ease;
}
.onboarding-cta:hover:not(:disabled) {
  background: color-mix(in oklch, var(--accent) 88%, var(--fg-0));
}
.onboarding-cta:disabled { opacity: 0.55; cursor: not-allowed; }
.onboarding-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: transparent;
  color: var(--fg-1);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  font-family: inherit;
  transition: background .12s ease, color .12s ease;
}
.onboarding-secondary:hover:not(:disabled) {
  background: var(--ink-3);
  color: var(--fg-0);
}
/* GOAL-1 — destructive variant for hard-delete buttons in detail-drawer feet. */
.onboarding-secondary--danger { color: oklch(0.72 0.16 27); }
.onboarding-secondary--danger:hover:not(:disabled) {
  background: oklch(0.72 0.16 27 / 0.12);
  color: oklch(0.72 0.16 27);
}

@media (max-width: 600px) {
  .onboarding-role-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Onboarding — extra step content */
.onboarding-hint {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
  font-style: italic;
  margin-top: -6px;
}
.onboarding-tour { display: flex; flex-direction: column; gap: 10px; }
.onboarding-tour__callout {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.onboarding-tour__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 2px;
}
.onboarding-tour__hint {
  font-size: 13px;
  color: var(--fg-1);
  line-height: 1.5;
}
.onboarding-palette-demo {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}
.onboarding-palette-demo__input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--ink-3);
  border-radius: 8px;
  margin-bottom: 10px;
}
.onboarding-palette-demo__placeholder {
  flex: 1;
  font-size: 13px;
  color: var(--fg-3);
}
.onboarding-palette-demo__items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.onboarding-palette-demo__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg-1);
}
.onboarding-palette-demo__row:hover { background: var(--ink-3); color: var(--fg-0); }
.onboarding-palette-demo__row > span { flex: 1; }

/* ================================================================
   TAGS (Phase 4) — tag cloud
   ================================================================ */
.tags-shell { padding: 4px 0 40px; }
/* Tags — Phase 1 Item 13: header, filter bar, font-sized cloud, list view. */
.tags-header { margin-bottom: 14px; }
.tags-header__eyebrow {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.tags-header__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-0);
  margin: 0 0 4px;
}
.tags-header__sub {
  font-size: 12.5px;
  color: var(--fg-2);
  margin: 0;
  line-height: 1.5;
  max-width: 620px;
}
.tags-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 14px;
  flex-wrap: wrap;
}
.tags-kindfilter {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.tags-kindfilter__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--ink-1);
  color: var(--fg-2);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-transform: uppercase;
}
.tags-kindfilter__chip:hover { background: var(--ink-2); color: var(--fg-0); }
.tags-kindfilter__chip.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--fg-0);
}
.tags-kindfilter__chip.toggle {
  text-transform: none;
  cursor: pointer;
}
.tags-kindfilter__chip.toggle input { margin-right: 4px; }

.tags-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.tags-list__row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border: 0;
  background: var(--ink-1);
  color: var(--fg-0);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.tags-list__row:last-child { border-bottom: 0; }
.tags-list__row:hover { background: var(--ink-2); }
.tags-list__row.selected { background: var(--accent-soft); }
.tags-list__dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.tags-list__name { font-family: var(--ff-mono); }
.tags-list__count {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
}

/* Cloud variant — size-per-use. */
.tag-chip.cloud {
  padding: 4px 10px;
  border-radius: 8px;
  line-height: 1;
  color: var(--tag-color);
}
.tag-chip.cloud .tag-chip__count {
  font-size: 0.7em;
  padding-left: 6px;
  margin-left: 4px;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  color: var(--fg-0);
  cursor: pointer;
  font-size: 12.5px;
  font-family: inherit;
}
.tag-chip:hover {
  border-color: var(--tag-color);
  background: var(--ink-2);
}
.tag-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.tag-chip__name { font-family: var(--ff-mono); }
.tag-chip__count {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  padding-left: 4px;
  border-left: 1px solid var(--line);
  margin-left: 2px;
}
.tag-chip.selected {
  border-color: var(--tag-color);
  background: color-mix(in oklch, var(--tag-color), transparent 86%);
}

/* Tag tree (Tg-2) */
.tags-tree { display: flex; flex-direction: column; gap: 4px; }
.tags-tree__node { display: flex; flex-direction: column; gap: 4px; }
.tags-tree__line { display: flex; align-items: stretch; gap: 4px; }
.tags-tree__rail {
  width: 2px;
  background: var(--line);
  margin: 0 10px;
  flex-shrink: 0;
}

/* Tag detail drawer (Tg-1) */
.tag-drawer { width: 560px; max-width: 90vw; }
.tag-drawer .task-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.tag-drawer__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* ================================================================
   REMINDERS (Phase 4) — timeline row
   ================================================================ */
.reminders-shell { padding: 4px 0 40px; }

/* Reminders — Phase 1 Item 8: header, NL input, tabs, overdue rows. */
.reminders-header { margin-bottom: 14px; }
.reminders-header__eyebrow {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.reminders-header__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-0);
  margin: 0 0 4px;
}
.reminders-header__sub {
  font-size: 12.5px;
  color: var(--fg-2);
  margin: 0;
  line-height: 1.5;
}
.reminders-nl {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink-1);
  margin-top: 14px;
}
.reminders-nl__input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--fg-0);
  font-family: inherit;
  font-size: 13px;
}
.reminders-nl__add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.reminders-nl__hint {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  font-style: italic;
  margin: 6px 0 16px 14px;
}

.reminders-nextup { display: flex; flex-direction: column; gap: 2px; }
.reminders-nextup__title {
  font-size: 14px;
  color: var(--fg-0);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reminders-nextup__eta {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-2);
}

.reminders-tabs {
  display: flex;
  gap: 4px;
  margin: 14px 0 12px;
  border-bottom: 1px solid var(--line);
}
.reminders-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--fg-2);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.reminders-tab:hover { color: var(--fg-0); }
.reminders-tab.active {
  color: var(--fg-0);
  border-bottom-color: var(--accent);
}
.reminders-tab__count {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--ink-2);
}

.reminder-row.overdue {
  background: oklch(0.65 0.17 25 / 0.08);
  border-left: 3px solid oklch(0.65 0.17 25);
}
.reminder-row__badge--overdue {
  background: oklch(0.65 0.17 25 / 0.18) !important;
  color: oklch(0.65 0.17 25) !important;
}
.reminder-row__actions {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}
.reminder-row__act {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--ink-1);
  color: var(--fg-2);
  cursor: pointer;
  transition: all 0.12s;
}
.reminder-row__act:hover {
  background: var(--ink-2);
  color: var(--fg-0);
}
.reminder-row__act.primary:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}


/* Claude-styled dialogs — shared chrome for ClaudeTaskDialog / HabitDialog / TaskViewDialog */
.claude-dlg { }
.claude-dlg__title {
  /* Per gap doc §6.1 — Inter Tight 18 / 600, 8px gap to leading glyph. */
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-sans, inherit);
  font-size: 18px;
  font-weight: 600;
  color: var(--fg-0);
  letter-spacing: -0.01em;
}
.claude-dlg__body {
  padding: 18px 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;          /* gap doc §6.1 — 14px section gap */
  max-height: 70vh;
  overflow-y: auto;
}
.claude-dlg__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* `.settings-field__label` carries `align-self: center` for the Settings-page
 * 2-col grid; inside a flex-column dialog field that centers the label
 * horizontally. Pin it back to the leading edge inside dialog fields. */
.claude-dlg__field > .settings-field__label { align-self: flex-start; }
.claude-dlg__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* MUX-3.5.1 — on narrow phones the 2-column grid squeezes the
 * MudDatePicker enough that its calendar adornment visually detaches from
 * the input. Switching to single-column at the mobile breakpoint gives
 * each picker enough width to render the icon inside the input box. */
@media (max-width: 480px) {
  .claude-dlg__row { grid-template-columns: 1fr; }
}
.claude-dlg__hint {
  /* Per gap doc §6.1 — Inter Tight 12 / --fg-2, NOT mono. */
  font-size: 12px;
  color: var(--fg-2);
  margin: 0;
}
.claude-dlg__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-1);
  cursor: pointer;
  padding: 4px 0;
}
.claude-dlg__checkbox input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}
.claude-dlg__tabs {
  margin: 10px 0;
}
.claude-dlg__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}
.claude-dlg__checklist-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.claude-dlg__checklist-row input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.claude-dlg__checklist-row input[type="text"] { flex: 1; }
.claude-dlg__checklist--done {
  text-decoration: line-through;
  opacity: 0.6;
}
.claude-dlg__icon-btn {
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: grid;
  place-items: center;
}
.claude-dlg__icon-btn:hover { color: oklch(0.72 0.16 27); background: var(--ink-3); }
.claude-dlg__time-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg-1);
}
.claude-dlg__inline-input {
  display: flex;
  align-items: center;
  gap: 8px;
}
.claude-dlg__sessions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.claude-dlg__session {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--ink-2);
  border-radius: 6px;
  font-size: 12px;
  color: var(--fg-1);
}
.claude-dlg__error {
  padding: 8px 10px;
  border-radius: 6px;
  background: color-mix(in oklch, oklch(0.72 0.16 27), transparent 88%);
  border: 1px solid oklch(0.72 0.16 27 / 0.4);
  color: oklch(0.72 0.16 27);
  font-size: 12px;
}
.claude-dlg__warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: color-mix(in oklch, oklch(0.76 0.14 75), transparent 88%);
  border: 1px solid oklch(0.76 0.14 75 / 0.4);
  color: oklch(0.76 0.14 75);
  font-size: 12px;
}
.claude-dlg__warn span { flex: 1; }
.claude-dlg__direction {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.claude-dlg__direction-card {
  background: var(--ink-1);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 14px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--fg-2);
  transition: border-color 0.12s, background 0.12s;
  /* MUX-3.5.2 — let the "Do more of" / "Do less of" subtitle wrap to two
   * lines instead of truncating, and give the card a min-height so the
   * Build / Quit cells stay the same size whether the subtitle wraps or not. */
  min-height: 76px;
}
.claude-dlg__direction-card .claude-dlg__direction-sub {
  white-space: normal;
  overflow: visible;
  line-height: 1.25;
}
.claude-dlg__direction-card.picked {
  border-color: oklch(0.72 0.14 160);
  background: color-mix(in oklch, oklch(0.72 0.14 160), transparent 90%);
  color: oklch(0.72 0.14 160);
}
.claude-dlg__direction-card.warn.picked {
  border-color: oklch(0.76 0.14 75);
  background: color-mix(in oklch, oklch(0.76 0.14 75), transparent 90%);
  color: oklch(0.76 0.14 75);
}
.claude-dlg__direction-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-0);
}
.claude-dlg__direction-sub {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  text-align: center;
}
.claude-dlg__pro-chip {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  padding: 1px 6px;
  border-radius: 3px;
  background: color-mix(in oklch, oklch(0.76 0.14 75), transparent 80%);
  color: oklch(0.76 0.14 75);
  margin-left: 4px;
}
/* Footer-left destructive button on entity edit dialogs (Habit / Task / Goal /
 * Skill / etc.). margin-right: auto pushes Cancel/Save to the right inside
 * MudBlazor's flex-end DialogActions row. Tinted danger. */
.claude-dlg__delete {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid color-mix(in oklch, oklch(0.62 0.20 27), transparent 70%);
  background: transparent;
  color: oklch(0.72 0.16 27);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.claude-dlg__delete:hover {
  background: color-mix(in oklch, oklch(0.62 0.20 27), transparent 88%);
  border-color: color-mix(in oklch, oklch(0.62 0.20 27), transparent 50%);
}

/* Habit report — deep detail page (/habits/{id}) */
.habit-report {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 1.5);
  padding-bottom: 40px;
}
.habit-report__header {
  border-left: 4px solid var(--fg-3);
  padding: 12px 16px;
  background: var(--ink-1);
  border-radius: 0 8px 8px 0;
}
.habit-report__back {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.habit-report__role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.habit-report__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.habit-report__pill {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  border: 1px solid var(--line);
  padding: 2px 7px;
  border-radius: 3px;
}
.habit-report__hero {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
}
.habit-report__ring {
  position: relative;
  width: 160px;
  height: 160px;
  display: grid;
  place-items: center;
}
.habit-report__ring-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.habit-report__ring-pct {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
}
.habit-report__titles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.habit-report__name {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg-0);
}
.habit-report__note {
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.4;
}
.habit-report__stats {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.habit-report__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.habit-report__stat-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.habit-report__stat-num {
  font-size: 26px;
  font-weight: 600;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.habit-report__stat-num.warm { color: oklch(0.76 0.14 75); }
.habit-report__stat-num.great { color: oklch(0.72 0.14 160); }
.habit-report__stat-sub {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
.habit-report__section {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
}
.habit-report__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 12px;
}
.habit-report__section-meta { color: var(--fg-2); }
.habit-report__year {
  display: flex;
  gap: 3px;
  overflow-x: auto;
}
.habit-report__year-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.habit-report__year-cell {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--ink-3);
  transition: outline-color 0.1s, transform 0.1s;
}
/* Past + today cells are clickable to retro-edit the check-in. */
.habit-report__year-cell.is-clickable {
  cursor: pointer;
  outline: 1px solid transparent;
}
.habit-report__year-cell.is-clickable:hover {
  outline-color: var(--accent);
  transform: scale(1.4);
}
.habit-report__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--gap) * 1.5);
}
.habit-report__weeks {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 140px;
  padding: 4px 0;
}
.habit-report__week {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  height: 100%;
}
.habit-report__week-bar {
  flex: 1;
  display: block;
  border-radius: 4px 4px 0 0;
  min-height: 3px;
  align-self: end;
  width: 100%;
}
.habit-report__week-label {
  font-family: var(--ff-mono);
  font-size: 9px;
  color: var(--fg-3);
  text-align: center;
}
.habit-report__dow {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.habit-report__dow-row {
  display: grid;
  grid-template-columns: 16px 1fr 24px;
  align-items: center;
  gap: 8px;
}
.habit-report__dow-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-3);
}
.habit-report__dow-bar {
  height: 10px;
  background: var(--ink-3);
  border-radius: 3px;
  overflow: hidden;
}
.habit-report__dow-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
}
.habit-report__dow-num {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-2);
  text-align: right;
}
.habit-report__goal {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-1);
}
.habit-report__goal-name { font-weight: 500; color: var(--fg-0); }
/* Habit Detail — note-add UX for per-check-in notes log. */
.habit-report__note-add {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 10px;
}
.habit-report__note-input {
  flex: 1;
  min-height: 60px;
  resize: vertical;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-1);
  color: var(--fg-0);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.habit-report__note-input:focus { border-color: var(--accent); }
.habit-report__note-save {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 7px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: filter 0.12s;
}
.habit-report__note-save:hover:not(:disabled) { filter: brightness(1.05); }
.habit-report__note-save:disabled { opacity: 0.5; cursor: not-allowed; }
.habit-report__notes-empty {
  color: var(--fg-3);
  font-size: 12px;
  font-style: italic;
  padding: 8px 0;
}

.habit-report__notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.habit-report__note-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  padding: 8px 10px;
  background: var(--ink-2);
  border-radius: 6px;
  font-size: 13px;
}
.habit-report__note-date {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}

/* HABITS-MOBILE-3 — list-page tweaks. Mobile-only view picker (dropdown
 * replacing the truncated segmented control); rate-suffix label so the
 * percent isn't a bare opaque number; clickable affordance on 7-day dots
 * that now open RetroCheckInDialog on tap. */
.habits-toolbar__view-picker {
  padding: 4px 8px;
  font-size: 12px;
  min-width: 0;
}
.habits-row__rate-suffix {
  font-size: 9px;
  opacity: 0.55;
  margin-left: 3px;
  font-variant: small-caps;
  letter-spacing: 0.4px;
}
.habit__dot.habit__dot--clickable {
  cursor: pointer;
}

/* HABITS-MOBILE-1 — habit detail page mobile layout. The desktop ruleset above
 * was rendering wholesale into the 360dp BlazorWebView viewport: 200px ring +
 * stats-as-tall-right-column wasted ~60% of the first scroll; chip header
 * wrapped onto a broken 2-row layout; 12-week + day-of-week panels stayed
 * side-by-side; heatmap horizontally scrolled. This block pulls each of
 * those into a phone-shaped vertical stack. */
@media (max-width: 600px) {
  .habit-report__back {
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
  }
  .habit-report__pill {
    padding: 2px 6px;
    font-size: 10px;
  }
  .habit-report__hero {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }
  .habit-report__ring {
    width: 120px;
    height: 120px;
    margin: 0 auto;
  }
  .habit-report__ring svg {
    width: 120px;
    height: 120px;
  }
  .habit-report__titles {
    text-align: left;
  }
  .habit-report__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
  }
  .habit-report__stat-num {
    font-size: 28px;
  }
  .habit-report__grid {
    grid-template-columns: 1fr;
  }
}

.sec__action--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
/* MFB-9 — preserve the accent fill on hover; without this the base
 * `.sec__action:hover` rule (which assumes a transparent secondary action)
 * swaps to `var(--ink-2)` and the primary CTA reads as broken on rollover.
 * Brighten slightly to match the dialog primary / action-bar hover. */
.sec__action--primary:hover {
  background: var(--accent);
  color: var(--accent-ink);
  filter: brightness(1.05);
}

/* Full-page notifications surface */
/* NOTIF-2 — cockpit wrap mirrors the inbox-cockpit treatment: discrete
 * cards on raised paper instead of the global hairline-divided block. */
.notif-cockpit-wrap .cockpit {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  gap: 12px;
}
.notif-cockpit-wrap .cockpit__cell {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* NOTIF-1 — page header (eyebrow / title / subtitle) above the cockpit. */
.notif-page__head {
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.notif-page__eyebrow {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 600;
  margin-bottom: 4px;
}
.notif-page__title {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-0);
}
.notif-page__sub {
  margin: 0;
  font-size: 13px;
  color: var(--fg-2);
  max-width: 640px;
  line-height: 1.5;
}

.notifpage-shell {
  /* NOTIF-3 — wrapping card mirrors mock's `.notif-variation`. */
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-top: var(--gap);
}

/* Reminders timeline (Rm-1) */
.reminders-timeline {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px 14px;
  margin-bottom: 18px;
}
.reminders-timeline__axis {
  position: relative;
  height: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.reminders-timeline__day {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}
.reminders-timeline__lane {
  position: relative;
  height: 28px;
}
.reminders-timeline__tick {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--accent), transparent 80%);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  display: grid;
  place-items: center;
  cursor: default;
}
.reminders-timeline__tick.snoozed {
  background: var(--ink-2);
  border-color: var(--fg-3);
  color: var(--fg-3);
  opacity: 0.7;
}
.reminders-timeline-empty {
  background: var(--ink-1);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  color: var(--fg-3);
  font-family: var(--ff-mono);
  font-size: 11px;
  margin-bottom: 18px;
}
.reminder-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
}
.reminder-row.snoozed {
  background: transparent;
  color: var(--fg-2);
}
.reminder-row__body { flex: 1; min-width: 0; }
.reminder-row__title {
  font-size: 13.5px;
  color: var(--fg-0);
  font-weight: 500;
}
.reminder-row.snoozed .reminder-row__title { color: var(--fg-2); }
.reminder-row__meta {
  display: flex;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  margin-top: 2px;
}
.reminder-row__badge {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  white-space: nowrap;
}
.reminder-row__badge--snooze {
  color: oklch(0.78 0.14 75);
  border-color: oklch(0.78 0.14 75 / 0.4);
}

/* ================================================================
   ROLE NEW (Phase 4) — standalone creation wizard
   ================================================================ */
.role-new-shell {
  min-height: calc(100vh - 100px);
  display: grid;
  place-items: center;
  padding: 40px 24px;
}
.role-new-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.role-new-input,
.role-new-textarea {
  /* Canonical bordered input per gap doc §6.1 — also reused by every
   * dialog field input across the app. 36px tall, 6px radius. */
  width: 100%;
  height: 36px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--fg-0);
  padding: 0 10px;
  font-size: 14px;
  font-family: inherit;
}
.role-new-input:focus,
.role-new-textarea:focus {
  /* Per gap doc §6.1 — 2px accent ring + accent border on focus. */
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.role-new-textarea {
  /* Textarea overrides the 36px fixed height for multi-line content. */
  height: auto;
  min-height: 80px;
  padding: 8px 10px;
  resize: vertical;
}
.role-new-swatches {
  display: grid;
  grid-template-columns: repeat(8, 28px);
  gap: 10px;
  max-width: 304px;
}
.role-new-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  padding: 0;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.12s;
}
.role-new-swatch.picked {
  outline-color: var(--accent);
}
.role-new-swatch--custom {
  background: var(--ink-2);
  color: var(--fg-2);
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
}
.role-new-swatch--custom:hover { color: var(--fg-0); border-color: var(--fg-3); }
.role-new-color-input {
  margin-top: 8px;
  font-family: var(--ff-mono);
  font-size: 12px;
}
.role-new-icons {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  max-width: 440px;
}
.role-new-icon {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--fg-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: border-color 0.12s, background 0.12s;
}
.role-new-icon:hover { border-color: var(--fg-3); }
.role-new-icon.picked {
  background: color-mix(in oklch, currentColor, transparent 85%);
  border-color: currentColor;
}
.role-new-range {
  width: 100%;
  accent-color: var(--accent);
  margin-top: 4px;
}
.role-new-allocation-value {
  margin-left: 8px;
  color: var(--accent);
  font-family: var(--ff-mono);
  font-size: 11px;
}
.role-new-hint {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  margin: 6px 0 0;
}
.role-new-clear {
  margin-top: 8px;
  align-self: flex-start;
}
.role-new-preview__meta {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
}

/* Someday / Maybe — Phase 1 Item 3: tabs, info banner, rich cards. */
.someday-header { margin-bottom: 14px; }
.someday-header__eyebrow {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.someday-header__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-0);
  margin: 0 0 12px;
}
.someday-header__banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  border-radius: 10px;
  background: color-mix(in oklch, var(--accent) 7%, var(--ink-1));
  border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--line));
  color: var(--fg-1);
  font-size: 13px;
  line-height: 1.5;
}
.someday-header__banner strong {
  color: var(--fg-0);
  margin-right: 6px;
}

.someday-tabs {
  display: flex;
  gap: 4px;
  margin: 14px 0 12px;
  border-bottom: 1px solid var(--line);
}
.someday-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--fg-2);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.someday-tab:hover { color: var(--fg-0); }
.someday-tab.active {
  color: var(--fg-0);
  border-bottom-color: var(--accent);
}
.someday-tab__count {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--ink-2);
}

.someday-byrole {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--ff-mono);
  font-size: 11px;
}
.someday-byrole__row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 6px;
  align-items: center;
  color: var(--fg-2);
}
.someday-byrole__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.someday-byrole__name { color: var(--fg-1); }
.someday-byrole__count {
  color: var(--fg-0);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.someday-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.someday-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--fg-3);
  border-radius: 8px;
  background: var(--ink-1);
  transition: background 0.12s;
}
.someday-card:hover { background: var(--ink-2); }
.someday-card__body { min-width: 0; cursor: pointer; }
.someday-card__title {
  font-size: 13.5px;
  color: var(--fg-0);
  font-weight: 500;
  margin-bottom: 3px;
}
.someday-card__meta {
  display: flex;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--fg-2);
  flex-wrap: wrap;
}
.someday-card__age {
  margin-left: auto;
  font-style: italic;
}
.someday-card__actions {
  display: flex;
  gap: 6px;
}
.someday-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--ink-1);
  color: var(--fg-1);
  font-family: var(--ff-mono);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.12s;
}
.someday-card__btn.revive:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--fg-0);
}
.someday-card__btn.drop:hover {
  border-color: oklch(0.65 0.17 25);
  background: oklch(0.65 0.17 25 / 0.12);
  color: oklch(0.65 0.17 25);
}

/* Legacy Someday bulk-select (Sm-2) — kept for LegacySomedayPage. */
.someday-bulk-list { display: flex; flex-direction: column; gap: 4px; }
.someday-bulk-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 6px;
  align-items: center;
  padding: 2px 4px;
  border-radius: 6px;
  transition: background 0.12s;
}
.someday-bulk-row:hover { background: var(--ink-2); }
.someday-bulk-row.picked {
  background: color-mix(in oklch, var(--accent), transparent 90%);
}
.someday-bulk-check {
  display: grid;
  place-items: center;
  cursor: pointer;
}
.someday-bulk-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.someday-bulk-row__body { min-width: 0; }
.role-new-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.role-new-preview__mark {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--role-ink);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 18px;
}
.role-new-preview__name {
  font-size: 18px;
  font-weight: 600;
  color: var(--fg-0);
  letter-spacing: -0.01em;
}
.role-new-preview__desc {
  color: var(--fg-2);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 4px;
}

/* ================================================================
   RESPONSIVE — mobile viewport strategy (QUESTIONS §F5)
   ================================================================
   The new chrome (Rail + Topbar + Shell grid) is desktop-only. At
   narrow widths we collapse the shell grid to a single column and
   hide the Rail entirely; the legacy mobile bottom-nav continues to
   handle navigation. Content fills the viewport without the 56/220px
   left gutter. */
@media (max-width: 768px) {
  .shell {
    grid-template-columns: 1fr;
  }
  .rail {
    display: none;
  }
  .topbar {
    /* Tighter horizontal padding on mobile, but preserve the
     * safe-area-inset-top padding from the base rule so the topbar
     * still clears the system status bar. */
    padding: env(safe-area-inset-top, 0px) 10px 0;
  }
  .content {
    /* Bottom padding clears the mobile bottom-nav (56px) + FAB clearance,
     * plus any safe-area inset (Android gesture pill). */
    padding: 16px 16px calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * MUX-2.1 — MobileCockpitStrip
 *
 * Single-row pill strip rendered on mobile only. Pages drop one of these
 * above their existing <Cockpit> grid; the rules below hide whichever
 * doesn't match the current viewport so pages don't need to author
 * d-md-none / d-none d-md-block wrappers.
 *
 * The 64dp height target is approximated by the pill's intrinsic padding +
 * value/label line stack. fade-mask on the right edge hints at scrollable
 * overflow without burning vertical space on a visible scrollbar.
 * ═══════════════════════════════════════════════════════════════════════ */
.mobile-cockpit-strip {
  display: none; /* default hidden — only :flex on small viewports */
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px 0 10px;
  /* Right-edge fade hints at scrollable overflow on narrow phones where the
   * 4th pill is just off-screen. Pure CSS — no JS scroll-shadow plumbing. */
  -webkit-mask-image: linear-gradient(to right, black 0%, black 92%, transparent 100%);
          mask-image: linear-gradient(to right, black 0%, black 92%, transparent 100%);
}
.mobile-cockpit-strip::-webkit-scrollbar { display: none; }

.mobile-cockpit-strip__pill {
  flex: 0 0 auto;
  min-width: 72px;        /* 4×72 + 3×8 gap = 312px → fits all 4 pills on ~412px phones */
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--ink-1);
  border: 1px solid var(--line);
}

.mobile-cockpit-strip__value {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg-0);
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.mobile-cockpit-strip__suffix {
  font-size: 11px;
  font-weight: 400;
  color: var(--fg-3);
  text-transform: lowercase;
}

.mobile-cockpit-strip__empty {
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-3);
  font-style: italic;
}

.mobile-cockpit-strip__label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 4px;
}

/* Viewport switch — strip on narrow, existing card grid on wider.
 * 768px matches MudBlazor's md breakpoint. */
@media (max-width: 767px) {
  .mobile-cockpit-strip { display: flex; }
  .cockpit { display: none !important; }
  /* MUX-2.2 — Today page uses a bespoke .today-hero instead of <Cockpit>,
   * so it needs its own opt-in class for the mobile-hide rule. */
  .today-hero--desktop-only { display: none !important; }
  /* MFB-5 — Goals / Habits / Calendar / Journal use bespoke cockpit grid
   * classes that the universal .cockpit selector doesn't match. The
   * pages now render <MobileCockpitStrip> directly above the grid; hide
   * the grid on mobile so the pill row is the only stat surface. */
  .goals-cockpit,
  .habits-cockpit,
  .calendar-cockpit,
  .journal-cockpit { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * MUX-2.3 — Chip-strip overflow utility
 *
 * Shared class for horizontally scrollable chip/tab strips that would
 * otherwise clip on narrow phones. Apply alongside the page's strip
 * container element (e.g. `class="tasks-views rufus-chip-strip"`); the
 * fade-mask hints at scrollable content past the right edge without a
 * visible scrollbar.
 * ═══════════════════════════════════════════════════════════════════════ */
.rufus-chip-strip {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, black 0%, black 92%, transparent 100%);
          mask-image: linear-gradient(to right, black 0%, black 92%, transparent 100%);
}
.rufus-chip-strip::-webkit-scrollbar { display: none; }
.rufus-chip-strip > * { flex: 0 0 auto; }

/* MUX-2.3 — auto-apply chip-strip overflow to the existing toolbar segmented
 * controls and tab strips on narrow viewports. Saves touching every page
 * individually — every existing `.tasks-toolbar__seg`, `.seg`, and tab strip
 * inherits the scroll affordance the moment the viewport hits the mobile
 * breakpoint. Desktop keeps the wrap-to-multiline-row default. */
@media (max-width: 767px) {
  .tasks-toolbar__seg,
  .seg,
  .reminders-tabs,
  .tags-filters,
  .journal-prompts-tabs,
  .someday-tabs,
  .role-detail-tabs,
  .logbook-toolbar,
  .blueprints-sort,
  .roles-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, black 0%, black 92%, transparent 100%);
            mask-image: linear-gradient(to right, black 0%, black 92%, transparent 100%);
  }
  .tasks-toolbar__seg::-webkit-scrollbar,
  .seg::-webkit-scrollbar,
  .reminders-tabs::-webkit-scrollbar,
  .tags-filters::-webkit-scrollbar,
  .journal-prompts-tabs::-webkit-scrollbar,
  .someday-tabs::-webkit-scrollbar,
  .role-detail-tabs::-webkit-scrollbar,
  .logbook-toolbar::-webkit-scrollbar,
  .blueprints-sort::-webkit-scrollbar,
  .roles-filters::-webkit-scrollbar { display: none; }
}

/* MFB-6 — Page-header overflow on mobile. Single shared fix: every
 * <SectionHead> renders title + count + spacer + actions on one flex row.
 * On phones the actions slot (filter chips, view-switcher segments,
 * coaching buttons, etc.) routinely overflows the viewport — controls
 * clip, horizontal scroll engages on the whole shell, view-switchers
 * become unreachable. Pattern A from the doc: stack title on its own row,
 * drop the action wrapper to its own row beneath, and let it scroll
 * horizontally if it still overflows.
 *
 * The spacer flex-grows to push actions to the right on desktop; on
 * mobile we re-purpose it as a 100%-wide flex line-break — anything after
 * it wraps to the next row. The .sec__actions wrapper then becomes a
 * real flex container (was display:contents on desktop) so we can apply
 * the MUX-2.3 fade-mask horizontal-scroll affordance to whatever the page
 * dropped into the slot. */
@media (max-width: 767px) {
  .sec__head {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .sec__head > .sec__spacer {
    flex-basis: 100%;
    height: 0;
  }
  .sec__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, black 0%, black 92%, transparent 100%);
            mask-image: linear-gradient(to right, black 0%, black 92%, transparent 100%);
  }
  .sec__actions::-webkit-scrollbar { display: none; }
  .sec__actions > * { flex: 0 0 auto; }
}

/* MFB-6 (Playbooks-specific) — the Playbooks page predates SectionHead and
 * has its own .playbooks-header (eyebrow + title + subtitle on the left,
 * search input + CTA on the right). On phones the right column shoves the
 * left column off the viewport and the search input itself is wider than
 * the device. Stack the two columns and let the search input fill its row.
 * The "+ New Playbook" CTA is already gated to web-only per MFB-7, so this
 * mobile branch only needs to handle the search box. */
@media (max-width: 767px) {
  .playbooks-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .playbooks-header__actions {
    width: 100%;
  }
  .playbooks-header__search {
    width: 100%;
    box-sizing: border-box;
  }
  .playbooks-header__search input { min-width: 0; flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * MUX-2.4 — Mobile dialog width clamp
 *
 * MudDialog renders full-width by default, which on narrow phones lets the
 * footer action row clip its trailing button ("Sa…" instead of "Save").
 * Constraining the dialog body to min(100% - 32px, 480px) gives 16px
 * margins on each side and caps the desktop width at a comfortable 480px.
 *
 * Apply by passing Class="rufus-mobile-dialog" on the <MudDialog>. Pages
 * that haven't opted in keep MudBlazor's default sizing.
 * ═══════════════════════════════════════════════════════════════════════ */
.mud-dialog.rufus-mobile-dialog {
  width: min(100% - 32px, 480px);
  max-width: 480px;
  margin: 0 auto;
}
.mud-dialog.rufus-mobile-dialog .mud-dialog-actions,
.mud-dialog.rufus-mobile-dialog .mud-dialog-title {
  padding-right: 16px;
  padding-left: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * MUX-3.2 — ALL-CAPS small-caps labels for MudTextField-based dialogs
 *
 * Task / Habit / Playbook dialogs render their field labels through plain
 * <label class="settings-field__label"> which is already mono-caps with
 * 0.12em tracking. Goal + Note dialogs use MudTextField's built-in
 * `Label=` parameter, which renders MudBlazor's default sentence-case
 * label — visually inconsistent with the rest of the dialog set.
 *
 * Scoping the rule to `.mud-dialog .mud-input-label` keeps the new shape
 * inside dialogs only; non-dialog forms (Settings, etc.) keep the
 * MudBlazor default casing.
 * ═══════════════════════════════════════════════════════════════════════ */
.mud-dialog .mud-input-label,
.mud-dialog .mud-input-label-static,
.mud-dialog .mud-input-label-animated {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════
 * MUX-3.3 — Sticky dialog action row + soft-keyboard accommodation
 *
 * MudBlazor lets `.mud-dialog-actions` scroll with the body. On Android
 * that means the soft keyboard can fully hide Cancel / Save while the
 * user is typing. Stick the action row to the dialog bottom and account
 * for the system gesture-pill safe-area so the footer never disappears.
 *
 * Backdrop-filter blurs whatever's underneath the sticky row so long
 * forms don't render text under the buttons during scroll.
 * ═══════════════════════════════════════════════════════════════════════ */
.mud-dialog .mud-dialog-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--mud-palette-surface, var(--ink-1));
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--mud-palette-lines-default, var(--line));
}

/* ═══════════════════════════════════════════════════════════════════════
 * MUX-3.4 — Modal scrim hardening
 *
 * MudBlazor's default light-theme overlay is too pale on mobile — the
 * underlying page bleeds through and reads as a busy backdrop rather
 * than "dimmed and locked." Doubling the alpha on the dialog overlay
 * matches the dark-theme contrast users get for free.
 *
 * Note: the MAUI bottom-tab bar lives outside the WebView, so CSS can't
 * block its taps while a dialog is open. Native-side pointer-events
 * blocking is a follow-up wired through HostPage's metadata service
 * once the renderer has a "dialog visible" signal to publish.
 * ═══════════════════════════════════════════════════════════════════════ */
.mud-overlay-dialog {
  background-color: rgba(0, 0, 0, 0.55) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * MUX-2.6 — Legal doc bottom safe-area
 *
 * Privacy / Terms last paragraph was disappearing behind the mobile
 * bottom-nav + Android gesture-pill. The MUX-6 shared <LegalDocLayout>
 * will replace this with proper sticky-TOC chrome; until then, this
 * targeted padding rule keeps the prose readable on mobile.
 * ═══════════════════════════════════════════════════════════════════════ */
.rufus-legal-doc {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}

/* MUX-6.1 — <LegalDocLayout> anchor table of contents. */
.legal-doc__toc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 24px;
  padding: 12px 14px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.legal-doc__toc-head {
  font-family: var(--ff-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.legal-doc__toc-link {
  font-size: 13.5px;
  color: var(--fg-2);
  text-decoration: none;
  padding: 2px 0;
}
.legal-doc__toc-link:hover {
  color: var(--fg-0);
  text-decoration: underline;
}
.legal-doc__body :is(h2, h3, h4, h5, h6) {
  scroll-margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Bottom breathing room for the mobile shell body
 *
 * The bottom nav (and its center "add" button) live in the native MAUI
 * HostPage shell, *outside* the BlazorWebView — so the WebView body never
 * has to clear them. We keep only a small bottom inset for visual rhythm
 * plus env(safe-area-inset-bottom) for Android gesture-nav pills.
 *
 * Scoped to .mobile-shell-body so the Web client's main scroll body isn't
 * affected by a rule meant for the MAUI host.
 * ═══════════════════════════════════════════════════════════════════════ */
.mobile-shell-body {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* ═══════════════════════════════════════════════════════════════════════
 * d2e1a87 + MUX-2.8 — Duplicate H1 suppression on Mobile
 *
 * MAUI Shell's native NavBar already paints the page title (sourced from
 * PageMetadata.Title, set by each Razor page's OnAfterRenderAsync). Razor
 * pages still render their own <h1> because Web has no native chrome.
 * Inside MobileShellLayout the <main> wrapper carries .mobile-shell-body,
 * so the duplicate in-page title can be suppressed there without touching
 * Web. Each page that had visible double-title overlap is listed below;
 * keep adjacent decorations (count badges, date ranges, subtitles) —
 * only the h1 itself duplicates the native chrome.
 *
 * d2e1a87: Tasks + Calendar
 * MUX-2.8: Notes (.skills-header__title) + Reminders (.reminders-header__title)
 *          + Someday (.someday-header__title) — same shape, three more pages.
 * ═══════════════════════════════════════════════════════════════════════ */
.mobile-shell-body .tasks-toolbar__title h1,
.mobile-shell-body .calendar-toolbar__title h1,
.mobile-shell-body .skills-header__title,
.mobile-shell-body .reminders-header__title,
.mobile-shell-body .someday-header__title,
/* MUX-4.3 — role-detail "Back to Roles" link is redundant on mobile (hardware
 * back pops the detail page, wired in MFB-2). MFB-11 reversal: the role-name
 * H1 is NOT hidden anymore — the native chrome doesn't paint the role name, so
 * the in-page hero (color rail + name + state pill) is the only place it shows. */
.mobile-shell-body .role-detail-back,
/* MUX-4.8 — Settings "SETTINGS" eyebrow at top of the section list is
 * redundant with the native AppBar title on mobile. Section H1s
 * ("Display", "Profile") are kept — they tell the user which section
 * they're viewing. */
.mobile-shell-body .settings-nav__head {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
 * MFB-3 — Today overcommitment callout: stack actions below the Callout
 * body on mobile so the title can wrap freely. The default rule
 * (.today-callout__actions { position: absolute; right: 16px; top: 16px })
 * works on the wider Web layout where the title sits on a single line,
 * but on a phone-width WebView the title wraps onto a second line and
 * the absolute-positioned Reschedule / Review buttons land directly on
 * top of it. Inside MobileShellLayout we drop the absolute positioning
 * and let the actions flow as a natural row below the body content.
 * ═══════════════════════════════════════════════════════════════════════ */
.mobile-shell-body .today-callout__actions {
  position: static;
  right: auto;
  top: auto;
  margin: 8px 16px 16px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════
 * MFB-4 — Tasks + Calendar shells extend to the Web page edges via a
 * negative outer margin (margin: calc(var(--gap) * -1.5) ...). On Web
 * that pulls the toolbar / week-header flush against the page chrome;
 * on Mobile the negative top margin tucks the toolbar UNDER the native
 * MAUI Shell AppBar, clipping the group-selector chips (Due date /
 * Role / Priority / Project / Flat) and the calendar week-header on a
 * narrow viewport.
 *
 * Reset the top inset under MobileShellLayout. The negative left/right
 * is preserved (we want the same full-bleed look against the WebView's
 * own padding), as is the negative bottom (which is handled by
 * .mobile-shell-body's bottom padding for the action-bar clearance).
 * ═══════════════════════════════════════════════════════════════════════ */
.mobile-shell-body .tasks-shell,
.mobile-shell-body .calendar-shell {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
 * MFB-12 — Calendar mobile tap-to-schedule
 *
 * The desktop drag-from-rail sidebar (.calendar-sidebar) can't be used
 * with touch: a long-press starts a text-select on Android WebView and
 * onhtml5-drag events don't fire reliably through MAUI's BlazorWebView.
 * Hide the sidebar on mobile and collapse the calendar shell to a single
 * column so the grid claims the full width. The toolbar's mobile-only
 * button (rendered with .calendar-toolbar__action--mobile-only) opens
 * UnscheduledItemsSheet, which lists the same items with a tap-to-pick-a-
 * time interaction.
 * ═══════════════════════════════════════════════════════════════════════ */
.mobile-shell-body .calendar-shell {
  grid-template-columns: 1fr;
}
.mobile-shell-body .calendar-sidebar { display: none; }

/* Toolbar trigger — hidden by default (Web has the sidebar), shown only
 * inside the mobile shell. Display: none on the desktop body ensures the
 * Web user never sees the chip even at narrow viewports. */
.calendar-toolbar__action--mobile-only { display: none; }
.mobile-shell-body .calendar-toolbar__action--mobile-only {
  display: inline-flex;
}
.calendar-toolbar__count {
  margin-left: 4px;
  padding: 1px 5px;
  background: var(--ink-2);
  border-radius: 8px;
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--fg-2);
}

/* ═══════════════════════════════════════════════════════════════════════
 * MFB-13 — Calendar view-switcher reorganization on mobile
 *
 * The desktop calendar toolbar is a single flex row with 6+ controls
 * (range label, prev/today/next, view-switcher, busy, focus, auto-
 * schedule, unscheduled). On a phone-width WebView this overflows past
 * the right edge and the view-switcher (a primary navigation control —
 * losing access to Month / Day means losing access to the page) gets
 * pushed off-screen.
 *
 * Restructure inside `.mobile-shell-body`:
 *  - Flex-wrap the toolbar so children stack into rows.
 *  - Drop the spacer (it line-breaks already-stacked rows incorrectly).
 *  - Hide chrome that's keyboard- or pointer-only on mobile (Focus mode
 *    "F" hotkey is useless on touch; Busy blocks editor is rare enough
 *    that it stays on Web until someone asks for it on phones).
 *  - Promote `.tasks-toolbar__seg` (the Day/Week/Month switcher) to its
 *    own full-width row right under the AppBar with MUX-2.3 fade-mask
 *    overflow-scroll, so all view options stay reachable.
 *  - Compact the nav + remaining actions into a single scrolling row.
 *  - The title's range label stays — it's the user's only signal of
 *    which week the grid is currently showing.
 * ═══════════════════════════════════════════════════════════════════════ */
.mobile-shell-body .calendar-toolbar {
  flex-wrap: wrap;
  padding: 8px 12px;
  gap: 8px;
  row-gap: 8px;
}
.mobile-shell-body .calendar-toolbar__spacer {
  display: none;
}
/* Range label — stays compact next to nav row. */
.mobile-shell-body .calendar-toolbar__title {
  flex-basis: 100%;
  margin: 0;
}
.mobile-shell-body .calendar-toolbar__title .calendar-toolbar__sub {
  display: none;
}
/* View-switcher: full width chip row right under AppBar. */
.mobile-shell-body .tasks-toolbar__seg {
  order: -1;
  flex-basis: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, black 0%, black 92%, transparent 100%);
          mask-image: linear-gradient(to right, black 0%, black 92%, transparent 100%);
}
.mobile-shell-body .tasks-toolbar__seg::-webkit-scrollbar { display: none; }
.mobile-shell-body .tasks-toolbar__seg-btn {
  flex: 0 0 auto;
}
/* Hide the keyboard-only / rare-use chrome on phones. Auto-schedule
 * and Unscheduled stay (both are touch-useful for time-block planning);
 * the "+ New event" path is the FAB and already mobile-native. */
.mobile-shell-body .calendar-toolbar__action.calendar-toolbar__action--focus,
.mobile-shell-body .calendar-toolbar__action.calendar-toolbar__action--busy,
.mobile-shell-body .calendar-toolbar__kbd {
  display: none;
}

/* ── UnscheduledItemsSheet (bottom sheet) ───────────────────────────── */
.unsched-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: oklch(0 0 0 / 0.4);
  z-index: 1200;
  animation: rufusUnschedFade 160ms ease;
}
.unsched-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1201;
  background: var(--ink-0);
  border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 24px oklch(0 0 0 / 0.18);
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: rufusUnschedRise 220ms ease;
}
@keyframes rufusUnschedFade {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes rufusUnschedRise {
  from { transform: translateY(100%); } to { transform: translateY(0); }
}
.unsched-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.unsched-sheet__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg-0);
}
.unsched-sheet__close {
  border: 0;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
}
.unsched-sheet__close:hover { background: var(--ink-2); color: var(--fg-0); }
.unsched-sheet__empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--fg-3);
  font-size: 13px;
  font-style: italic;
}
.unsched-sheet__list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.unsched-sheet__item {
  border-bottom: 1px solid var(--line-soft);
}
.unsched-sheet__item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 12px 16px;
  cursor: pointer;
  text-align: left;
}
.unsched-sheet__item-head:hover { background: var(--ink-2); }
.unsched-sheet__item--active .unsched-sheet__item-head { background: var(--ink-2); }
.unsched-sheet__item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.unsched-sheet__item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.unsched-sheet__item-title {
  font-size: 14px;
  color: var(--fg-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unsched-sheet__item-meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.unsched-sheet__sched {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 4px 16px 14px;
}
.unsched-sheet__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.unsched-sheet__field-label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.unsched-sheet__time {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  background: var(--ink-1);
  color: var(--fg-0);
  font-size: 14px;
  font-family: inherit;
}
.unsched-sheet__save {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 7px;
  padding: 9px 14px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.unsched-sheet__save:hover { filter: brightness(1.05); }

/* ═══════════════════════════════════════════════════════════════════════
 * MFB-14 — Inbox left-edge clipping on mobile
 *
 * .inbox-shell carries `margin: 0 calc(var(--pad-x) * -2) ...` (rufus.css
 * §5290) to bleed full-width against the Web page wrapper's `--pad-x`
 * gutter. Under MobileShellLayout the host's left/right padding is only
 * `max(12px, env(safe-area-inset-left))`, so a -24/-32px bleed overshoots
 * the WebView's visible viewport on narrow phones — the leftmost ~10px of
 * each queue card (eyebrow source label, source glyph) gets clipped under
 * the system bezel / curved-edge mask. .inbox-shell's own `overflow: hidden`
 * suppresses the horizontal scrollbar that would otherwise reveal it.
 *
 * Clamp the inbox-shell's horizontal margins to the exact same value
 * MobileShellLayout uses for its padding, so the shell goes flush to the
 * WebView edge instead of past it. Top stays at 0 to preserve the cockpit
 * breathing-room. The 960px collapse rule (§5675) handles column layout
 * separately; this override applies at every width inside MobileShellLayout.
 * ═══════════════════════════════════════════════════════════════════════ */
.mobile-shell-body .inbox-shell {
  margin-left:  calc(-1 * max(12px, env(safe-area-inset-left, 0px)));
  margin-right: calc(-1 * max(12px, env(safe-area-inset-right, 0px)));
}