@import "./fonts/geist.css";

/* Alto Wave Design System v2.0.0 — tokens lifted verbatim from
 * alto-connect-app/app/tokens/primitives.css + app/globals.css so this app
 * and Connect read as one system. Dark is the default, same as Connect. */

:root {
  /* neutral ramp */
  --alto-neutral-0: #ffffff;
  --alto-neutral-20: #fafafa;
  --alto-neutral-50: #f4f4f5;
  --alto-neutral-300: #a1a1aa;
  --alto-neutral-400: #8b8b93;
  --alto-neutral-500: #75757e;
  --alto-neutral-600: #6b6b73;
  --alto-neutral-700: #52525b;
  --alto-neutral-850: #141418;
  --alto-neutral-900: #101013;
  --alto-neutral-925: #111827;
  --alto-neutral-950: #0a0a0b;
  --alto-neutral-1000: #000000;
  /* brand + status */
  --alto-forsythia-500: #ffc801;
  --alto-forsythia-700: #8a6300;
  --alto-nocturnal-400: #5fb8cc;
  --alto-red-500: #ef4444;
  --alto-green-500: #22c55e;

  /* dark roles (Connect :root) */
  --bg: var(--alto-neutral-1000);
  --panel: var(--alto-neutral-900);
  --card: var(--alto-neutral-850);
  --card-hover: #191920;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.42);
  --field: rgba(255, 255, 255, 0.04);
  --field-hover: rgba(255, 255, 255, 0.07);
  --text: var(--alto-neutral-20);
  --muted: var(--alto-neutral-300);
  --faint: var(--alto-neutral-400);
  --brand: var(--alto-forsythia-500);
  --brand-ink: var(--alto-neutral-950);
  --brand-on-surface: var(--alto-forsythia-500);
  --accent: var(--alto-nocturnal-400);
  --accent-ink: var(--alto-neutral-950);
  --danger: var(--alto-red-500);

  --radius: 0.625rem;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 40px -20px rgba(0, 0, 0, 0.85);

  /* How much of a silo/tag colour survives when it is used as TEXT. On black a
     chip can stay saturated; on white it must be pulled toward ink or it drops
     under 4.5:1 (measured: pip title was 3.21, silo label 2.43). */
  --chip-ink-mix: 80%;
  --secondary: rgba(255, 255, 255, 0.10);
}

@media (prefers-color-scheme: light) {
  :root {
    /* light roles (Connect [data-sf-theme="light"]) — R1: opaque near-white
       surfaces, never black composited over white. */
    --bg: var(--alto-neutral-0);
    --panel: var(--alto-neutral-50);
    --card: var(--alto-neutral-0);
    --card-hover: var(--alto-neutral-50);
    --line: rgba(0, 0, 0, 0.12);
    --line-strong: var(--alto-neutral-500);
    --field: var(--alto-neutral-0);
    --field-hover: var(--alto-neutral-50);
    --text: var(--alto-neutral-925);
    --muted: var(--alto-neutral-700);
    --faint: var(--alto-neutral-600);
    /* yellow fill stays; yellow as TEXT drops to the 700 sibling on white */
    --brand-on-surface: var(--alto-forsythia-700);
    --accent: #1f6f80;
    --accent-ink: var(--alto-neutral-0);
    --chip-ink-mix: 46%;
    --secondary: var(--alto-neutral-50);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px -4px rgba(0, 0, 0, 0.08);
  }
}

/* The type scale — five sizes, no exceptions. Every font-size in this file
 * points at one of these; the harness asserts no stray sizes render. */
:root {
  --fs-micro: 11px;    /* uppercase labels, badges */
  --fs-meta: 12px;     /* dates, counts, secondary meta */
  --fs-body: 13px;     /* running text */
  --fs-title: 13.5px;  /* card + section titles, controls */
  --fs-headline: 17px; /* drawer + view headlines */
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 13.5px/1.55 Geist, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* ---------- top bar ---------- */

#topbar {
  position: relative;
  flex: 0 0 auto;
  height: 60px;
  padding: 0 16px 0 92px; /* leave room for the mac traffic lights */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.drag-region {
  position: absolute;
  inset: 0;
  -webkit-app-region: drag;
}

.brand, .tools { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }

.brand .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand);
  flex: 0 0 auto;
}

.brand h1 {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* Context, not navigation. Lives with the tools on the right so it stops
   reading as another tab at the end of the row. */
.subtitle {
  color: var(--faint);
  font-size: var(--fs-meta);
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 2px;
}

.active-filter {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 4px 0 9px;
  border-radius: 20px;
  background: var(--brand);
  color: #1a1400;
  font-size: var(--fs-meta);
  font-weight: 650;
  -webkit-app-region: no-drag;
}
.active-filter.hidden { display: none; }
.active-filter button {
  width: 16px; height: 16px;
  border: none; border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  color: #1a1400;
  font-size: var(--fs-body);
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.active-filter button:hover { background: rgba(0, 0, 0, 0.34); }

/* The row holds two different kinds of thing: silo scopes (which filter the
   same board) and views (Calendar/Tags, which replace it). Separate them
   properly instead of running them together. */
.tabs {
  display: flex; align-items: center; gap: 2px; margin-left: 12px;
  -webkit-app-region: no-drag;
  /* Locked: tabs never wrap or reflow, whatever gets clicked or resized. */
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  height: 24px;
  padding: 0 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: var(--fs-body);
  cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--bg); color: var(--text); }
.tab-sep {
  width: 1px;
  height: 18px;
  background: var(--line-strong);
  opacity: 0.5;
  margin: 0 10px;
  align-self: center;
}

.tab { display: inline-flex; align-items: center; gap: 5px; }
.tab-unread {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex: 0 0 auto;
}

.silo-chip {
  font-size: var(--fs-micro);
  font-weight: 650;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--line);
  font-family: inherit;
  cursor: pointer;
}
.silo-chip[style*="--chip"] {
  color: color-mix(in oklab, var(--chip) var(--chip-ink-mix), var(--text));
  border-color: color-mix(in oklab, var(--chip) 45%, transparent);
  background: color-mix(in oklab, var(--chip) 13%, transparent);
}
.silo-chip:hover { border-color: color-mix(in oklab, var(--chip, var(--muted)) 75%, transparent); }

.section-head {
  margin: 0 0 7px;
  font-size: var(--fs-meta);
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.tags-intro.warn { color: var(--danger); }

.pill {
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-body);
  cursor: pointer;
}
.pill:hover { color: var(--text); }
.pill.active { background: var(--brand); border-color: var(--brand); color: #1a1400; font-weight: 600; }
.pill.hidden { display: none; }

.tools { -webkit-app-region: no-drag; }

#filter {
  width: 150px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-body);
  outline: none;
}
#filter:focus { border-color: var(--brand); }

.tools button {
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-body);
  cursor: pointer;
}
.tools button:hover { color: var(--text); border-color: var(--muted); }

.status { font-size: var(--fs-meta); color: var(--faint); min-width: 54px; text-align: right; }
.status.saving { color: var(--accent); }
.status.error { color: var(--danger); }

/* ---------- profile ---------- */

.profile-wrap { position: relative; }
#profile {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--secondary);
  color: var(--text);
  font: inherit; font-size: var(--fs-body); font-weight: 650;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
#profile:hover { border-color: var(--brand); }
.profile-menu {
  position: absolute; right: 0; top: 40px; z-index: 30;
  min-width: 176px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 5px;
}
.profile-menu.hidden { display: none; }
.profile-menu button {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: var(--fs-body);
  color: var(--text); background: none; border: none;
  border-radius: 7px; padding: 8px 10px; cursor: pointer;
}
.profile-menu button:hover { background: var(--field-hover); }

/* ---------- tag sub-bar ---------- */

.subbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  overflow-x: auto;
  scrollbar-width: none;
}
.subbar::-webkit-scrollbar { display: none; }
.subbar.hidden { display: none; }

.subtab {
  flex: 0 0 auto;
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 5px 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: var(--fs-meta);
  cursor: pointer;
  white-space: nowrap;
}
.subtab-count {
  font-size: var(--fs-micro);
  line-height: 1;
  color: var(--muted);
  background: var(--secondary);
  border-radius: 999px;
  padding: 3px 7px;
  min-width: 20px;
  text-align: center;
}
.subtab.active .subtab-count { background: color-mix(in oklab, var(--chip, var(--text)) 24%, transparent); color: var(--text); }
.subtab:hover { color: var(--text); background: var(--field); }

.subtab.tinted { color: color-mix(in oklab, var(--chip) var(--chip-ink-mix), var(--text)); }
.subtab.tinted:hover { color: var(--chip); }

.subtab.active {
  background: var(--field-hover);
  border-color: var(--line-strong);
  color: var(--text);
  font-weight: 600;
}
.subtab.tinted.active {
  color: var(--chip);
  border-color: color-mix(in oklab, var(--chip) 55%, transparent);
  background: color-mix(in oklab, var(--chip) 12%, transparent);
}

/* ---------- board ---------- */

.board {
  flex: 1 1 auto;
  display: flex;
  gap: 14px;
  padding: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: flex-start;
}

.column {
  flex: 1 1 272px;
  min-width: 252px;
  max-width: 372px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.column.drop-target { border-color: var(--brand); }

.col-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px 9px;
}

.col-head h2 {
  margin: 0;
  font-size: var(--fs-meta);
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.col-count {
  font-size: var(--fs-meta);
  color: var(--faint);
  background: var(--bg);
  border-radius: 20px;
  padding: 1px 7px;
}

.col-cards {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 9px 4px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 12px;
}

.col-foot { flex: 0 0 auto; padding: 7px 9px 9px; }

/* Done collapsed to a rail: history keeps its count, gives back its width. */
.column.rail { flex: 0 0 46px; min-width: 46px; overflow: hidden; }
.column.rail .col-head { flex-direction: column; gap: 8px; padding: 12px 0; align-items: center; }
.column.rail .col-head h2 { writing-mode: vertical-rl; letter-spacing: 0.12em; }
.column.rail .col-cards, .column.rail .col-foot { display: none; }

.add-card {
  width: 100%;
  height: 28px;
  opacity: 0.45;
  transition: opacity 0.15s ease;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: var(--fs-body);
  cursor: pointer;
}
.column:hover .add-card { opacity: 1 }
.add-card:hover { color: var(--text); border-color: var(--muted); }

/* ---------- cards ---------- */

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  /* The silo is a coloured edge, not a chip — colour becomes structure. */
  border-left: 3px solid var(--card-silo, var(--line));
  border-radius: var(--radius);
  padding: 9px 11px 9px 10px;
  cursor: grab;
  box-shadow: var(--shadow);
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.card:hover { background: var(--card-hover); }
.card.dragging { opacity: 0.35; }
.card.hidden-by-filter { display: none; }

.card-title {
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.4;
  word-wrap: break-word;
}
.card-emoji { display: inline-block; width: 1.45em; }
.card-title strong { font-weight: 600; }
.card-title code {
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-size: var(--fs-meta);
  background: var(--bg);
  border-radius: 4px;
  padding: 1px 4px;
}
.card-title a { color: var(--accent); }

.card-body {
  margin-top: 5px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card.expanded .card-body {
  -webkit-line-clamp: unset;
  display: block;
}

.placeholder { color: var(--faint); }

/* ---------- notes: Jimmy -> Claude channel ---------- */

.card.has-unread { border-color: var(--brand); }

.notes { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }

.note {
  border-left: 2px solid var(--line);
  padding: 1px 0 1px 8px;
}
.note.new { border-left-color: var(--brand); }

.note-meta { display: flex; align-items: center; gap: 6px; }

.note-badge {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}
.note.new .note-badge {
  background: var(--brand);
  border-color: var(--brand);
  color: #1a1400;
}

.note-date { font-size: var(--fs-micro); color: var(--faint); }

/* Claude's reply sits indented under the note it answers, in the accent
   rather than the brand, so a thread reads as a conversation. */
.note.reply { margin-left: 12px; border-left-color: var(--accent); }
.note-badge.claude {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
  cursor: default;
}
.note.reply .note-text { color: var(--muted); }

.note-text {
  margin-top: 3px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card.expanded .note-text { -webkit-line-clamp: unset; display: block; }
.note.new .note-text { color: var(--text); }

/* ---------- tag chips ---------- */

.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }

.tag {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-micro);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
.tag[style*="--chip"] {
  color: color-mix(in oklab, var(--chip) var(--chip-ink-mix), var(--text));
}
.tag:hover { text-decoration: underline; text-underline-offset: 3px; }
.tag.undefined-tag { opacity: 0.6; font-style: italic; }

.card-actions {
  position: absolute;
  top: 5px;
  right: 5px;
  display: none;
  gap: 2px;
}
.card:hover .card-actions { display: flex; }

.card-actions button {
  height: 20px;
  min-width: 20px;
  padding: 0 4px;
  border: none;
  border-radius: 5px;
  background: var(--bg);
  color: var(--faint);
  cursor: pointer;
  font-size: var(--fs-title);
  line-height: 1;
  font-family: inherit;
}
.card-actions button:hover { color: var(--text); }
.card-actions button.del:hover { color: var(--danger); }

.card-actions .act-update {
  font-size: var(--fs-meta);
  font-weight: 600;
  padding: 0 7px;
  color: var(--accent);
  border: 1px solid var(--line);
}
.card-actions .act-update:hover { border-color: var(--accent); }

/* ---------- note composer ---------- */

.card.composing { cursor: default; border-color: var(--brand); }

.composer { margin-top: 9px; }

.composer-head {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}

.composer-input {
  width: 100%;
  min-height: 62px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-body);
  line-height: 1.5;
  resize: vertical;
  outline: none;
}
.composer-input:focus { border-color: var(--brand); }
.composer-input::placeholder { color: var(--faint); }

.composer-actions { display: flex; align-items: center; gap: 6px; margin-top: 6px; }

.composer-save, .composer-cancel {
  height: 25px;
  padding: 0 11px;
  border-radius: 6px;
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.composer-save { background: var(--brand); color: var(--brand-ink); }
.composer-save:hover { background: color-mix(in oklab, var(--brand) 90%, transparent); }
.composer-cancel { background: transparent; color: var(--muted); border-color: var(--line); }
.composer-cancel:hover { color: var(--text); }

.composer-hint { margin-left: auto; font-size: var(--fs-micro); color: var(--faint); }

/* ---------- editor ---------- */

.card-editor {
  width: 100%;
  min-height: 76px;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-title);
  line-height: 1.5;
  resize: vertical;
  outline: none;
}

.editor-hint {
  margin-top: 5px;
  font-size: var(--fs-meta);
  color: var(--faint);
}

/* ---------- date chip on a card ---------- */

.date-chip {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--muted);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1;
}
.date-chip.due {
  color: var(--brand-ink);
  background: var(--brand);
  border-color: var(--brand);
}

/* ---------- composer date row ---------- */

.composer-date { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.composer-date label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-micro);
  color: var(--muted);
}
.composer-dateinput {
  height: 26px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-meta);
  outline: none;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { .composer-dateinput { color-scheme: light; } }
.composer-dateinput:focus { border-color: var(--brand); }
.composer-dateclear {
  border: none;
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: var(--fs-micro);
  cursor: pointer;
  text-decoration: underline;
}
.composer-dateclear:hover { color: var(--text); }

/* ---------- calendar ---------- */

/* Fills the window. Two classes so this beats `.tags-view`'s 820px cap
 * regardless of source order — the single-class version lost to it.
 *
 * Deliberately NOT a flex column: as a flex parent its children shrink under
 * height pressure, the header box collapses to nothing, and the grid rides up
 * over the toolbar and eats every click. Normal block flow inside the
 * already-scrolling .tags-view is correct. */
.tags-view.cal-view {
  max-width: none;
  padding: 16px 20px 40px;
}

.cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-title { margin: 0 0 0 4px; font-size: var(--fs-headline); font-weight: 650; }

.cal-seg { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; }
.cal-seg-btn {
  height: 24px;
  padding: 0 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: var(--fs-meta);
  cursor: pointer;
}
.cal-seg-btn:hover { color: var(--text); background: var(--field-hover); }
/* Connect 3g-2: hover neutral, selected = primary at 25% (--sidebar-selected). */
.cal-seg-btn.active {
  background: color-mix(in oklab, var(--brand) 25%, transparent);
  color: var(--text);
  font-weight: 600;
}

.cal-nav {
  width: 26px; height: 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-headline);
  line-height: 1;
  cursor: pointer;
}
.cal-nav:hover { color: var(--text); border-color: var(--muted); }
.cal-today {
  margin-left: auto;
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-meta);
  cursor: pointer;
}
.cal-today:hover { color: var(--text); border-color: var(--muted); }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }

.cal-dow { margin-bottom: 6px; }
.cal-dow div {
  font-size: var(--fs-micro);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  padding-left: 3px;
}

.cal-cell {
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* Month cells scale with the window instead of a fixed 74px. */
.cal-month .cal-cell { min-height: clamp(78px, 11vh, 150px); }
/* Week gives each day a full column to breathe. */
.cal-week .cal-cell { min-height: clamp(220px, 46vh, 560px); overflow-y: auto; }

.cal-cell.blank { background: transparent; border-color: transparent; min-height: 0; }
.cal-cell.has-items { cursor: pointer; }
.cal-cell.has-items:hover { border-color: var(--muted); }
.cal-cell.today { border-color: var(--brand-on-surface); }
.cal-cell.selected { background: var(--field-hover); border-color: var(--brand); }

.cal-num { font-size: var(--fs-micro); color: var(--faint); }
.cal-cell.today .cal-num { color: var(--brand-on-surface); font-weight: 700; }

.cal-pip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: color-mix(in oklab, var(--chip, var(--muted)) 15%, transparent);
  color: color-mix(in oklab, var(--chip, var(--muted)) var(--chip-ink-mix), var(--text));
  cursor: pointer;
  text-align: left;
  font-size: var(--fs-meta);
  line-height: 1.35;
}
.cal-pip:hover { border-color: color-mix(in oklab, var(--chip, var(--muted)) 60%, transparent); }
.cal-pip.due { outline: 1px solid var(--brand); }
.cal-pip.compact .cal-pip-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-micro);
}
.cal-pip-title { font-weight: 550; }
.cal-pip-meta { font-size: var(--fs-micro); color: var(--muted); }

.cal-more { font-size: var(--fs-micro); color: var(--faint); padding-left: 3px; }

/* ---------- in-calendar editor ---------- */

.cal-editor {
  margin-bottom: 14px;
  padding: 11px 12px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--card);
}
.cal-editor.hidden { display: none; }
.cal-editor-head {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.cal-editor-input {
  width: 100%;
  min-height: 110px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-body);
  line-height: 1.55;
  resize: vertical;
  outline: none;
}
.cal-editor-input:focus { border-color: var(--brand); }
.cal-editor-date {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-meta);
  color: var(--muted);
  margin-right: auto;
}

.cal-detail-title { font-size: var(--fs-title); font-weight: 600; line-height: 1.4; }
.cal-detail-body { margin-top: 6px; font-size: var(--fs-body); line-height: 1.55; color: var(--muted); }
.cal-detail-mode {
  font-size: var(--fs-micro);
  color: var(--faint);
  margin-bottom: 6px;
}
.cal-editor .notes { margin-top: 10px; }
.cal-editor .date-chip { margin-top: 10px; }
.cal-editor .composer-actions { margin-top: 12px; }

/* Update is the secondary intent next to Edit — outlined, not filled, so the
   pair reads as a choice rather than one primary and one afterthought. */
/* Connect's `secondary` variant — a real action, visibly lesser than default. */
.composer-save.alt {
  background: var(--secondary);
  color: var(--text);
  border: 1px solid transparent;
}
.composer-save.alt:hover { background: color-mix(in oklab, var(--secondary) 80%, var(--text) 6%); }

.card-actions .act-edit {
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 0 7px;
  color: var(--muted);
  border: 1px solid var(--line);
}
.card-actions .act-edit:hover { border-color: var(--muted); color: var(--text); }

.cal-panel { margin-top: 22px; }

.cal-row {
  display: flex;
  align-items: baseline;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  margin-bottom: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.cal-row:hover { background: var(--card-hover); border-color: var(--muted); }
.cal-row-date { font-size: var(--fs-meta); color: var(--faint); min-width: 66px; font-weight: 600; }
.cal-row-date.due { color: var(--brand-on-surface); }
.cal-row-title { flex: 1 1 auto; font-size: var(--fs-body); }
.cal-row-where { font-size: var(--fs-meta); color: var(--faint); white-space: nowrap; }
.cal-row-where[style*="--chip"] { color: color-mix(in oklab, var(--chip) var(--chip-ink-mix), var(--text)); }

/* Narrow windows: month grid keeps 7 columns but tightens; week stacks. */
@media (max-width: 900px) {
  .cal-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-week .cal-cell { min-height: 150px; }
  .cal-month .cal-cell { min-height: 64px; }
  .cal-pip-meta { display: none; }
}

/* ---------- tags view ---------- */

.board.hidden { display: none; }

.tags-view {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px 28px 40px;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
}
.tags-view.hidden { display: none; }

.tags-intro {
  margin: 0 0 18px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
}

.tag-rows { display: flex; flex-direction: column; gap: 6px; }

.tag-row {
  display: grid;
  grid-template-columns: 30px 132px 1fr 34px 26px;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 9px;
}

.tag-row input[type="color"] {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.tag-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.tag-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; }

.tag-name, .tag-desc {
  height: 26px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-body);
  outline: none;
  min-width: 0;
}
.tag-name { font-weight: 600; }
.tag-desc { color: var(--muted); }
.tag-name:hover, .tag-desc:hover { border-color: var(--line); }
.tag-name:focus, .tag-desc:focus { border-color: var(--brand); background: var(--bg); }

.tag-count { font-size: var(--fs-meta); color: var(--faint); text-align: right; }

.tag-del {
  width: 22px; height: 22px;
  border: none; border-radius: 5px;
  background: transparent;
  color: var(--faint);
  font-size: var(--fs-title);
  line-height: 1;
  cursor: pointer;
}
.tag-del:hover { background: var(--bg); color: var(--danger); }

.add-tag {
  margin-top: 10px;
  height: 30px;
  padding: 0 13px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: var(--fs-body);
  cursor: pointer;
}
.add-tag:hover { color: var(--text); border-color: var(--muted); }

.undefined-block { margin-top: 26px; }
.undefined-block h3 {
  margin: 0 0 9px;
  font-size: var(--fs-meta);
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.undefined-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- empty ---------- */

.empty {
  position: absolute;
  inset: 52px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  color: var(--muted);
  background: var(--bg);
}
.empty.hidden { display: none; }
.empty code {
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-size: var(--fs-body);
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- product feedback ---------- */

/* Full width, same as the calendar: this tab carries a four-column board and
   evidence quotes, both of which suffocate in the 820px vocabulary column.
   Line length is held per panel instead, so prose stays readable while the
   board gets the whole window. */
.tags-view.fb-view {
  max-width: none;
  padding: 16px 20px 40px;
}

.fb-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.fb-spacer { flex: 1 1 auto; }

/* The container went full width for the board's sake. Every panel that is
   really a column of prose keeps its own measure, or quotes and transcripts
   run to the full width of a 27in display and become unreadable. The board
   itself is deliberately not in this list. */
.fb-themes,
.fb-items,
.fb-calls,
.fb-people,
.fb-composer,
.fb-empty,
.fb-view > .fb-intro,
.fb-view > .section-head,
.fb-view > .add-tag,
.fb-view > .undefined-block {
  max-width: 1040px;
}

.fb-primary {
  height: 30px;
  padding: 0 13px;
  border: none;
  border-radius: 7px;
  background: var(--brand);
  color: var(--brand-ink);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
}
.fb-primary:hover { filter: brightness(1.08); }

.fb-ghost {
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-body);
  cursor: pointer;
}
.fb-ghost:hover { color: var(--text); border-color: var(--line-strong); }

.fb-intro {
  margin: 0 0 16px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--muted);
  max-width: 68ch;
}

.fb-empty {
  padding: 40px 0;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.fb-empty-head { color: var(--text); font-weight: 600; margin: 0 0 6px; }
.fb-empty p { margin: 0; }

/* ---- chips ---- */

.fb-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
/* Two or more tenants is the whole signal, so it is the only thing that gets
   the brand fill. Everything else stays quiet so this cannot get lost. */
.fb-chip.strong {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
  font-weight: 600;
}
.fb-chip.quiet { color: var(--faint); }
.fb-chip.warn { border-color: color-mix(in oklab, var(--brand-on-surface) 55%, var(--line)); color: var(--brand-on-surface); }
.fb-chip.ok { color: var(--faint); }
.fb-chip.sev-blocked { border-color: color-mix(in oklab, var(--danger) 60%, var(--line)); color: var(--danger); }
.fb-chip.sev-major { color: var(--text); }
.fb-chip.person { color: var(--text); }
.fb-chip.person.non-tenant { opacity: 0.72; font-style: italic; }

/* ---- pain points ---- */

.fb-themes { display: flex; flex-direction: column; gap: 10px; }

.fb-theme {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 14px 16px;
}
.fb-theme.shared { border-color: color-mix(in oklab, var(--brand) 34%, var(--line)); }

.fb-rank {
  font-size: var(--fs-headline);
  font-weight: 600;
  color: var(--faint);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.fb-theme.shared .fb-rank { color: var(--brand-on-surface); }

.fb-theme-main { min-width: 0; }
.fb-theme-main h3 {
  margin: 0 0 8px;
  font-size: var(--fs-headline);
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
}

.fb-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fb-who { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

/* ---- item lines ---- */

.fb-items { display: flex; flex-direction: column; gap: 2px; margin-bottom: 22px; }

.fb-item-line {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 7px;
  border-radius: 6px;
  font-size: var(--fs-body);
  color: var(--muted);
  min-width: 0;
}
.fb-item-line.has-evidence { cursor: pointer; }
.fb-item-line.has-evidence:hover { background: var(--card-hover); color: var(--text); }

.fb-kind-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--faint);
}
.fb-kind-dot.kind-bug { background: var(--danger); }
.fb-kind-dot.kind-friction { background: var(--brand); }
.fb-kind-dot.kind-feature { background: var(--accent); }
.fb-kind-dot.kind-praise { background: var(--alto-green-500); }

.fb-item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-item-count {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--brand-on-surface);
  font-variant-numeric: tabular-nums;
}
.fb-item-col { font-size: var(--fs-micro); color: var(--faint); flex: 0 0 auto; }

.fb-evidence {
  margin: 0 0 8px 23px;
  padding: 8px 0 2px;
  border-left: 2px solid var(--line);
}
.fb-evidence blockquote {
  margin: 0 0 8px;
  padding: 0 0 0 12px;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text);
}
.fb-evidence blockquote span { display: block; }
.fb-evidence cite {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-meta);
  font-style: normal;
  color: var(--faint);
}

/* ---- calls ---- */

.fb-calls { display: flex; flex-direction: column; gap: 10px; }

.fb-call {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px 15px;
}
.fb-call.unprocessed { border-color: color-mix(in oklab, var(--brand) 42%, var(--line)); }

.fb-call-head { margin-bottom: 9px; }
.fb-call-head h3 { margin: 0 0 7px; font-size: var(--fs-title); font-weight: 600; color: var(--text); }
.fb-call-toggle { height: 26px; font-size: var(--fs-meta); }

.fb-transcript {
  margin: 11px 0 0;
  padding: 12px 14px;
  max-height: 460px;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-size: var(--fs-meta);
  line-height: 1.65;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- people ---- */

.fb-people { display: flex; flex-direction: column; gap: 6px; }

.fb-person {
  display: grid;
  grid-template-columns: 30px 128px 1fr 104px 108px 66px 26px;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 9px;
}

.fb-person .swatch {
  width: 24px; height: 24px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.fb-person .swatch::-webkit-color-swatch-wrapper { padding: 2px; }
.fb-person .swatch::-webkit-color-swatch { border: none; border-radius: 4px; }

.fb-input {
  height: 26px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-body);
  outline: none;
  min-width: 0;
  width: 100%;
}
.fb-input:hover { border-color: var(--line); }
.fb-input:focus { border-color: var(--brand); background: var(--bg); }
.fb-p-name { font-weight: 600; }
.fb-p-org, .fb-p-role { color: var(--muted); }

.fb-select {
  height: 26px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-body);
  outline: none;
  cursor: pointer;
  width: 100%;
}
.fb-select:focus { border-color: var(--brand); }

/* ---- composer ---- */

.fb-composer {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 17px 18px 15px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.fb-composer h3 { margin: 0 0 5px; font-size: var(--fs-headline); font-weight: 600; color: var(--text); }

.fb-composer-grid {
  display: grid;
  grid-template-columns: 1fr 150px 1fr;
  gap: 11px;
  margin-bottom: 11px;
}

.fb-newperson {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  margin-bottom: 11px;
  padding: 12px;
  background: var(--field);
  border: 1px dashed var(--line-strong);
  border-radius: 9px;
}
.fb-newperson.hidden { display: none; }

.fb-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fb-field label { font-size: var(--fs-micro); font-weight: 500; color: var(--faint); }
.fb-field .fb-input { border-color: var(--line); background: var(--field); }

.fb-paste {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--field);
  color: var(--text);
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-size: var(--fs-body);
  line-height: 1.6;
  outline: none;
  resize: vertical;
}
.fb-paste:focus { border-color: var(--brand); background: var(--bg); }

.fb-actions { display: flex; gap: 8px; margin-top: 11px; }

.fb-error { margin: 9px 0 0; font-size: var(--fs-body); color: var(--danger); }
.fb-error.hidden { display: none; }

/* ---- action list: the priority board ---- */

/* Four columns that share the width evenly and never scroll the page
   sideways. Below 1100px it drops to two, then one, rather than crushing
   four columns into unreadable slivers. */
.fb-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.fb-col {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 11px 13px;
  min-width: 0;
}
.fb-col.drop-target { border-color: var(--brand); }

.fb-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 3px 9px;
}
.fb-col-head h2 {
  margin: 0;
  font-size: var(--fs-meta);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.fb-col-head .col-count {
  font-size: var(--fs-meta);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.fb-col-list { display: flex; flex-direction: column; gap: 8px; min-height: 44px; }

.fb-action {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 11px 11px 10px;
  cursor: pointer;
}
.fb-action:hover { background: var(--card-hover); border-color: var(--line-strong); }
.fb-action.dragging { opacity: 0.4; }

.fb-action-rank {
  font-size: var(--fs-meta);
  font-weight: 650;
  color: var(--brand-on-surface);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.fb-action-main { min-width: 0; }
.fb-action-main h3 {
  margin: 0 0 7px;
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  /* Long titles wrap rather than forcing the column wider and the board into
     a horizontal scroll. */
  overflow-wrap: anywhere;
}

.fb-action-why {
  margin: 7px 0 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--muted);
}

.fb-action-links { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

.fb-action-del {
  position: absolute;
  top: 6px;
  right: 6px;
  opacity: 0;
}
.fb-action:hover .fb-action-del { opacity: 1; }

.fb-add-action {
  width: 100%;
  margin-top: 9px;
  padding: 7px 9px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: var(--fs-body);
  cursor: pointer;
}
.fb-add-action:hover { color: var(--text); border-color: var(--muted); }

.fb-action-editor { grid-column: 1 / -1; cursor: default; }
.fb-editor-hint {
  margin: 7px 0 0;
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--faint);
}

@media (max-width: 1100px) {
  .fb-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .fb-board { grid-template-columns: minmax(0, 1fr); }
  .fb-composer-grid { grid-template-columns: 1fr; }
  .fb-newperson { grid-template-columns: 1fr 1fr; }
  .fb-person { grid-template-columns: 30px 1fr 96px 26px; row-gap: 6px; }
  .fb-person .fb-p-org, .fb-person .fb-p-role, .fb-person .tag-count { display: none; }
  .fb-toolbar { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------ *
 * Card drawer — click any card, it opens to the RIGHT and pushes the
 * board aside (never covers the clicked card; the board scrolls it into
 * view). Also hosts the task layer: "Behind this" on a card, and the
 * task detail drilled in from it. Text stays on --text/--muted for the
 * 4.5:1 floor; owner/status color arrives as a dot, never as text ink.
 * ------------------------------------------------------------------ */

.board-wrap { flex: 1 1 auto; display: flex; min-height: 0; }
/* Without this the board (flex min-width:auto) refuses to shrink and shoves
 * the drawer off-screen; with it the board keeps its own horizontal scroll
 * and the clicked card can slide left clear of the drawer. */
.board-wrap > .board { min-width: 0; }

/* While the drawer is open the board steps back one level — still fully
 * clickable (that is the ruling), just no longer competing. The column you
 * are reading from stays lit. */
.board-wrap.drawer-open .column { opacity: 0.62; transition: opacity 0.15s ease; }
.board-wrap.drawer-open .column:hover,
.board-wrap.drawer-open .column:has(.card.drawer-selected) { opacity: 1; }
/* When another tab hides the board, the whole wrap (drawer included) goes. */
.board-wrap:has(> .board.hidden) { display: none; }

.card-drawer {
  flex: 0 0 min(440px, 44%);
  min-width: 0;
  background: var(--panel);
  border-left: 1px solid var(--line-strong);
  padding: 16px 20px 24px;
  overflow-y: auto;
  animation: cd-in 150ms ease-out;
}
.card-drawer.hidden { display: none; }
@keyframes cd-in { from { transform: translateX(18px); opacity: 0; } to { transform: none; opacity: 1; } }

.card.drawer-selected { border-color: var(--line-strong); box-shadow: inset 3px 0 0 var(--brand); }

.cd-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 4px; }
.cd-back {
  margin-right: auto; font: inherit; font-size: var(--fs-meta); color: var(--muted);
  background: none; border: none; padding: 2px 0; cursor: pointer;
}
.cd-back:hover { color: var(--text); }
.cd-close {
  font: inherit; font-size: var(--fs-headline); line-height: 1; color: var(--muted);
  background: none; border: none; padding: 2px 6px; cursor: pointer;
}
.cd-close:hover { color: var(--text); }

.cd-title { margin: 0 0 10px; font-size: var(--fs-headline); line-height: 1.35; font-weight: 650; letter-spacing: -0.01em; }
.cd-tags { margin: 10px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cd-body { margin-top: 12px; }
.cd-body p { margin: 0 0 9px; color: var(--text); font-size: var(--fs-body); line-height: 1.55; }
.cd-notes { margin-top: 12px; }

/* ---- Behind this: the work behind a card, read from the beads graph.
 * Pinned under the title as one line; the rows unfold on demand. ---- */

.behind-this { margin: 2px 0 0; }
.behind-this h3 { display: none; }
.bt-summary {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: var(--fs-body); color: var(--text);
  background: var(--field); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; cursor: pointer; margin: 0 0 4px;
  transition: background-color 0.15s ease;
}
.bt-summary::after { content: '⌄'; color: var(--muted); font-size: var(--fs-micro); }
.behind-this:not(.collapsed) .bt-summary::after { content: '⌃'; }
.bt-summary:hover { background: var(--field-hover); }
.behind-this.collapsed .bt-row { display: none; }
.behind-this:not(.collapsed) { padding-bottom: 10px; }
.bt-row {
  display: block; width: 100%; text-align: left; font: inherit;
  color: var(--text); background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; margin: 0 0 5px; cursor: pointer;
}
.bt-row:hover { background: var(--card-hover); }
.bt-row.done .bt-title { color: var(--muted); text-decoration: line-through; }
.bt-title { display: block; font-size: var(--fs-body); line-height: 1.4; }
.bt-meta { display: flex; gap: 10px; align-items: center; margin-top: 4px; }

/* ---- shared task atoms (used by Behind-this and the task detail) ---- */

.task-owner, .task-state {
  color: var(--muted); font-size: var(--fs-micro); line-height: 1;
  display: inline-flex; align-items: center; gap: 5px;
}
.task-owner::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--alto-neutral-500);
}
.task-owner-jimmy::before { background: var(--alto-forsythia-500); }
.task-owner-david::before { background: #5b8def; }
.task-owner-claude::before { background: var(--accent); }
.task-state { border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 8px; }
.task-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.task-state-ready::before { background: var(--alto-green-500); }
.task-state-inprogress::before { background: var(--alto-forsythia-500); }
.task-state-blocked::before { background: var(--alto-red-500); }
.task-state-scheduled::before { background: var(--alto-neutral-500); }
.task-state-closed::before { background: var(--alto-neutral-500); }

/* ---- task detail (drilled in from Behind-this) ---- */

.task-pane-hint { color: var(--muted); padding: 24px 0; }
.task-pane-head h2 { margin: 0 0 8px; font-size: var(--fs-headline); line-height: 1.35; font-weight: 600; }
.task-pane-chips { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.task-gh { color: var(--accent); font-size: var(--fs-body); text-decoration: none; cursor: pointer; }
@media (prefers-color-scheme: light) { .task-gh { color: #1f6f80; } }
.task-gh:hover { text-decoration: underline; }

.task-status-line {
  color: var(--text); font-size: var(--fs-body); margin: 14px 0 4px; padding: 10px 12px 10px 30px;
  background: var(--field); border: 1px solid var(--line); border-radius: 9px; position: relative;
}
.task-status-line::before {
  content: ''; position: absolute; left: 13px; top: 16px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--alto-neutral-500);
}
.task-status-ready::before { background: var(--alto-green-500); }
.task-status-inprogress::before { background: var(--alto-forsythia-500); }
.task-status-blocked::before { background: var(--alto-red-500); }

.task-sec { margin-top: 16px; }
.task-sec h3 { margin: 0 0 6px; font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.task-sec p { margin: 0 0 8px; color: var(--text); font-size: var(--fs-body); }

.task-link {
  display: block; width: 100%; text-align: left; font: inherit; font-size: var(--fs-body);
  color: var(--text); background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; margin: 0 0 5px; cursor: pointer;
}
.task-link:hover { background: var(--card-hover); }
.task-link.done { color: var(--muted); text-decoration: line-through; }

/* The record reads like the paper trail it is: quieter, below the language. */
.task-history { border-top: 1px solid var(--line); padding-top: 12px; }
.task-history p { color: var(--muted); font-size: var(--fs-body); margin: 0 0 5px; }
.task-hist-label { color: var(--text); font-weight: 600; }

/* The UI harness measures geometry; animations make rects lie mid-flight. */
.no-anim * { animation: none !important; transition: none !important; }


/* ---------- craft pass (wave 3) ---------- */

button:focus-visible, .card:focus-visible, input:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--text) 18%, transparent);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--text) 30%, transparent); border: 2px solid transparent; background-clip: padding-box; }

.tab, .pill, .add-card, .bt-row, .task-link, .bt-summary, .task-refresh { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }