/* ---------- dependable saves, daily attention, and planning fields ---------- */
.save-pill { border: 1px solid var(--border); background: transparent; cursor: pointer; }
#savedPill.is-offline, #savedPill.is-auth { color: #fbbf24; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.cb-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-search, .cb-select {
  min-height: 34px; color: var(--text); background: var(--panel);
  border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px;
}
.cb-search { width: min(280px, 42vw); }
.attention-head {
  display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: 8px 0 20px;
}
.attention-head h1 { margin: 0; font-size: clamp(26px, 4vw, 42px); }
.eyebrow { color: var(--accent); font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 5px; }
.attention-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.attention-card, .review-card {
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
  padding: 16px; min-width: 0;
}
.attention-card h2, .review-card h2 { margin: 0 0 12px; font-size: 15px; }
.attention-card h2 span, .review-card h2 span { color: var(--muted); font: 500 11px var(--font-mono); margin-left: 5px; }
.attention-list, .review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.attention-list li { display: grid; gap: 2px; }
.attention-list button, .review-list button {
  color: var(--text); text-align: left; border: 0; padding: 0; background: none; cursor: pointer; font: inherit;
}
.attention-list button:hover, .review-list button:hover { color: var(--accent); text-decoration: underline; }
.attention-list span, .review-list span, .review-card > p, .attention-empty { color: var(--muted); font-size: 12px; }
.review-card { margin-top: 14px; }
.review-list li { font-size: 13px; }
.health {
  border: 1px solid currentColor; border-radius: 999px; padding: 2px 7px;
  font: 600 9px var(--font-mono); text-transform: uppercase;
}
.health.is-on-track { color: #34d399; }
.health.is-at-risk { color: #fbbf24; }
.health.is-blocked { color: #f87171; }
.health.is-paused { color: var(--muted); }
.product-summary {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px;
  overflow: hidden; border: 1px solid var(--border); border-radius: 10px; margin-top: 16px; background: var(--border);
}
.product-summary > div, .product-summary > label { padding: 11px; background: var(--panel); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.product-summary span, .m-add label > span { color: var(--muted); font: 500 10px var(--font-mono); text-transform: uppercase; }
.product-summary b { font-size: 12px; overflow-wrap: anywhere; }
.product-summary small { color: var(--muted); overflow-wrap: anywhere; }
.summary-edit { border: 0; background: none; color: var(--text); padding: 0; text-align: left; cursor: pointer; text-transform: capitalize; }
.summary-next { width: 100%; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; padding: 5px; }
.approval-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin: 12px 0; }
.approval-meta legend { color: var(--muted); font-size: 11px; padding: 0 5px; }
.approval-meta label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; }
.m-add { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.m-add label { display: grid; gap: 4px; }
.m-add .m-go { align-self: end; justify-self: start; }
.task-followup, .task-backlog {
  color: var(--muted); background: transparent; border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 7px; font-size: 10px; cursor: pointer;
}
.task-followup.is-empty, .task-backlog:not(.is-on) { opacity: .72; }
.task-backlog.is-on { color: #fbbf24; }
.task-waiting-toggle { display: inline-flex; opacity: 1; }
.recovery-item { border-bottom: 1px solid var(--border); padding: 10px 0; }
.recovery-item summary { cursor: pointer; }
.recovery-cards { display: flex; gap: 7px; flex-wrap: wrap; padding: 10px 0; }
.save-error { color: #f87171; }

@media (max-width: 720px) {
  .attention-grid, .product-summary, .approval-meta, .m-add { grid-template-columns: 1fr; }
  .attention-head { align-items: center; }
  .cb-search { width: 100%; }
  .board.is-detail .pnav { max-height: 38vh; overflow: auto; }
  .product-summary { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* ============================================================
   TPG Product Roadmap — light theme, matched to the engineering roadmap
   ============================================================ */

:root {
  /* Light, matching roadmap.thepipelinegroup.io so the two boards read as one
     system. Status colour story is Tailwind's slate -> amber -> lime -> emerald,
     the same four the engineering roadmap uses. */
  --bg: #f8fafc;              /* slate-50 page */
  --bg-2: #ffffff;            /* card */
  --bg-3: #f1f5f9;            /* slate-100, raised */
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --border: #e2e8f0;          /* slate-200 */
  --border-strong: #cbd5e1;   /* slate-300 */
  --text: #0f172a;            /* slate-900 */
  --muted: #475569;           /* slate-600 */
  --muted-2: #64748b;         /* slate-500 */
  --accent: #0f766e;          /* teal-700: interactive, distinct from any status */
  --accent-soft: rgba(15, 118, 110, 0.10);

  --c-concept: #64748b;
  --c-building: #f59e0b;
  --c-testing: #8b5cf6;
  --c-ready: #84cc16;
  --c-live: #059669;
  --c-paused: #eab308;
  --c-scrapped: #dc2626;
  --waiting: #64748b;
  --danger: #dc2626;

  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  --font-display: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* Typography: fewer sizes, more consistent rhythm. */
body { font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; letter-spacing: -0.006em; }
h1, h2, h3 { letter-spacing: -0.018em; }
.card-name { font-size: 15px; letter-spacing: -0.015em; }
.task-text { font-size: 13px; line-height: 1.45; }

* { box-sizing: border-box; margin: 0; padding: 0; }

/* class selectors below (.modal-backdrop, .toast) would otherwise out-specify
   the UA [hidden] rule, so enforce it explicitly */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overscroll-behavior: none; /* no rubber-band / pull-to-refresh on mobile */
}

/* ---------- topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 30px 18px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; }
.brand-text h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.brand-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 6px;
}

.topbar-meta { display: flex; gap: 8px; margin-left: 4px; }
.meta-pill {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 6px 11px;
  border-radius: 99px;
  white-space: nowrap;
}
#savedPill.is-saved { color: var(--c-live); }
#savedPill.is-saving { color: var(--accent); }
#savedPill.is-error { color: #f87171; }
#savedPill.is-local { color: var(--muted); }

.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; position: relative; }
.topbar-menu { display: flex; align-items: center; gap: 10px; }
.menu-btn { display: none; }
.menu-btn svg { display: block; }

.toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--muted); cursor: pointer;
  user-select: none;
}
.toggle input { accent-color: var(--accent); width: 15px; height: 15px; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13.5px;
  border-radius: 10px;
  padding: 9px 15px;
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:hover { border-color: rgba(15, 23, 42, 0.504); background: var(--panel-2); }
.btn:active { transform: translateY(0.5px); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--text); }
.btn-primary {
  background: var(--accent);
  color: #1b1306;
  border-color: transparent;
  font-weight: 600;
}
.btn-primary:hover { background: #f5a740; border-color: transparent; }
.btn-danger-ghost { background: transparent; border-color: rgba(248,113,113,0.4); color: #f87171; }
.btn-danger-ghost:hover { background: rgba(248,113,113,0.1); }
.icon-btn {
  background: transparent; border: none; color: var(--muted);
  font-size: 16px; cursor: pointer; padding: 6px; border-radius: 8px; line-height: 1;
}
.icon-btn:hover { color: var(--text); background: var(--panel-2); }

/* ---------- recovery banner ---------- */
.recovery {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 0 28px 14px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 12px;
}
.recovery-text { flex: 1; font-size: 13px; color: var(--text); line-height: 1.4; }
.recovery-actions { display: flex; gap: 8px; }
.recovery .btn { padding: 7px 13px; font-size: 13px; }

/* ---------- layout: board + unassigned dock ---------- */
.layout { display: flex; align-items: flex-start; min-width: 0; }
.layout .board { flex: 1 1 auto; min-width: 0; }
.dock {
  flex: 0 0 280px;
  margin: 4px 28px 40px 0;
  background: rgba(15, 23, 42, 0.046);
  border: 1px solid var(--border);
  border-radius: 14px;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dock-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.dock-title { font-size: 13px; font-weight: 600; color: var(--text); }
.dock-count {
  font-size: 11px; color: var(--muted); background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 99px; padding: 1px 7px; margin-left: 4px;
}
.dock-body { padding: 10px 12px 12px; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 8px; }
.dock-body .mytask-add { margin-top: 2px; }
.dock-body .mytask { flex-wrap: wrap; row-gap: 6px; }
.dock-body .mytask-text { flex: 1 1 100%; min-width: 0; order: 2; }
.dock-body .mytask-check { order: 1; }
.dock-body .mytask-due { order: 3; margin-left: auto; }
.dock-body .assign-select { order: 4; flex: 1 1 100%; }
.dock-listtag {
  font-size: 9px; color: var(--muted-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 0 4px; margin-left: 6px; vertical-align: 1px;
}
.dock-toggle { font-size: 14px; }
.dock.collapsed { flex-basis: 40px; }
.dock.collapsed .dock-body, .dock.collapsed .dock-title { display: none; }
.dock.collapsed .dock-head { justify-content: center; border-bottom: 0; }
.dock.collapsed .dock-toggle { transform: rotate(180deg); }
@media (max-width: 900px) { .dock { display: none; } }

/* ---------- board ---------- */
.board {
  display: flex;
  gap: 16px;
  padding: 4px 28px 40px;
  overflow-x: auto;
  flex: 1;
  align-items: flex-start;
  scrollbar-width: thin;
}
.column {
  flex: 1 1 0;
  min-width: 280px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.046);
  border: 1px solid var(--border);
  border-radius: 14px;
  max-height: calc(100vh - 150px);
}
.column.drop-active {
  border-color: color-mix(in srgb, var(--col-color) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--col-color) 45%, transparent);
}
.col-head {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 15px 12px;
  border-bottom: 1px solid var(--border);
}
.col-tag { width: 7px; height: 7px; border-radius: 50%; background: var(--col-color); }
.col-name {
  font-family: var(--font-display);
  font-weight: 600; font-size: 14px; letter-spacing: -0.005em;
}
.col-count {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted-2);
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 99px; padding: 2px 8px; margin-left: 2px;
}
.col-add {
  margin-left: auto; background: transparent; border: none; color: var(--muted-2);
  font-size: 18px; cursor: pointer; line-height: 1; padding: 2px 7px; border-radius: 7px;
}
.col-add:hover { color: var(--text); background: var(--panel-2); }
.col-collapse {
  flex-shrink: 0; background: transparent; border: none; color: var(--muted-2);
  cursor: pointer; padding: 3px; border-radius: 6px; display: grid; place-items: center;
}
.col-collapse:hover { color: var(--text); background: var(--panel-2); }
.col-collapse .chevron { transition: transform .18s ease; }
.col-expand {
  flex-shrink: 0; margin-left: auto;
  background: transparent; border: none; color: var(--muted-2);
  cursor: pointer; padding: 3px 5px; border-radius: 6px; display: grid; place-items: center;
}
.col-expand:hover { color: var(--text); background: var(--panel-2); }
.col-expand.is-on { color: var(--accent); }
.btn-ghost.is-on { color: var(--accent); border-color: var(--accent); }

/* Daily Brief */
#briefBtn.is-fresh { color: var(--accent); border-color: var(--accent); position: relative; }
#briefBtn.is-fresh::after {
  content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px;
  border-radius: 99px; background: var(--accent);
}
.brief-modal { max-width: 660px; width: min(660px, calc(100vw - 32px)); }

/* each H2 becomes a card-like section */
.brief-section {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px;
}
.brief-section:last-of-type { margin-bottom: 0; }
.brief-section--priority {
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-2));
}
.brief-section--reply { border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--border)); }
.brief-section--cal { border-left: 3px solid color-mix(in srgb, #7d9bbd 60%, var(--border)); }

.brief-h { margin: 14px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.brief-h:first-child, .brief-section .brief-h { margin-top: 0; }
.brief-section > .brief-h { margin-bottom: 8px; }
h4.brief-h { color: var(--muted); font-size: 11.5px; margin-top: 10px; }
.brief-section-body { display: flex; flex-direction: column; gap: 2px; }
.brief-p { margin: 3px 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.brief-list { margin: 3px 0 3px 20px; display: flex; flex-direction: column; gap: 5px; }
ol.brief-list { list-style: decimal; }
ul.brief-list { list-style: disc; }
.brief-list li { font-size: 13.5px; line-height: 1.45; color: var(--text); padding-left: 2px; }
.brief-list li::marker { color: var(--muted-2); }
.brief-section-body strong { color: var(--text); font-weight: 600; }
.brief-section--priority .brief-list li strong { color: var(--accent); }
.brief-stale { color: var(--muted); font-size: 12.5px; margin-bottom: 10px; font-style: italic; }
.brief-task-list { list-style: none; display: flex; flex-direction: column; gap: 7px; margin: 6px 0; }
.brief-task {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
}
.brief-task-text { flex: 1 1 auto; min-width: 0; font-size: 13px; cursor: pointer; }
.brief-task-text:hover { text-decoration: underline; text-underline-offset: 3px; }
.brief-task-prod {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 9.5px; color: var(--muted-2);
  background: var(--panel); border: 1px solid var(--border); border-radius: 99px; padding: 1px 7px;
}
.brief-task-wait { flex-shrink: 0; font-size: 10px; color: var(--waiting, #7d9bbd); font-style: italic; }
.brief-task .task-due-set { opacity: 1; }
.brief-add { display: flex; gap: 8px; margin-top: 10px; }
.brief-add select {
  flex-shrink: 0; max-width: 40%; background: var(--bg); color: var(--muted);
  border: 1px solid var(--border); border-radius: 9px; padding: 7px 8px; font-family: var(--font-body); font-size: 12px;
}
.brief-add input {
  flex: 1; background: transparent; border: 1px dashed var(--border); border-radius: 9px;
  color: var(--text); font-family: var(--font-body); font-size: 12.5px; padding: 7px 10px;
}
.brief-add input:focus { outline: none; border-style: solid; border-color: var(--accent); }
.brief-hint { color: var(--muted-2); font-size: 12px; margin: 4px 0; }

/* selection -> comment bubble + composer */
.brief-bubble {
  position: fixed; z-index: 200;
  background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14); padding: 4px;
}
.brief-bubble-btn {
  background: transparent; border: none; color: var(--text);
  font-family: var(--font-body); font-size: 12.5px; padding: 5px 10px; cursor: pointer; border-radius: 7px;
}
.brief-bubble-btn:hover { background: var(--panel); color: var(--accent); }
.brief-composer { width: 300px; padding: 10px; }
.brief-composer .bc-quote { margin-bottom: 8px; }
.brief-composer-input {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 9px;
  font-family: var(--font-body); font-size: 13px; resize: vertical;
}
.brief-composer-input:focus { outline: none; border-color: var(--accent); }
.brief-composer-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* saved comments list */
.brief-comment-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.brief-comment { background: var(--bg-2); border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: 10px; padding: 9px 10px; }
.bc-quote { color: var(--muted); font-size: 12px; font-style: italic; margin-bottom: 4px; }
.bc-text { font-size: 13px; line-height: 1.45; }
.bc-meta { display: flex; align-items: center; justify-content: space-between; color: var(--muted-2); font-family: var(--font-mono); font-size: 10px; margin-top: 6px; }
.bc-del { background: transparent; border: none; color: var(--muted-2); cursor: pointer; font-size: 11px; padding: 2px 5px; border-radius: 5px; }
.bc-del:hover { color: #fca5a5; background: var(--panel); }
.column.collapsed .col-expand { display: none; }

/* expanded stage: fill remaining width and flow cards into a responsive grid */
.column.expanded { flex: 1 1 0; max-width: none; min-width: 0; }
.column.expanded .col-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
  align-content: start;
}

/* ---- collapsed column (thin vertical bar) ---- */
.column.collapsed { min-width: 52px; max-width: 52px; cursor: pointer; }
.column.collapsed:hover { border-color: var(--border-strong); }
.column.collapsed .col-head {
  flex-direction: column; align-items: center; gap: 12px;
  padding: 12px 0; height: 100%; border-bottom: none;
}
.column.collapsed .col-body { display: none; }
.column.collapsed .col-add { display: none; }
.column.collapsed .col-name { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0.03em; }
.column.collapsed .col-count { margin-left: 0; }
.column.collapsed .col-collapse .chevron { transform: rotate(180deg); }
.col-body {
  padding: 11px;
  display: flex; flex-direction: column; gap: 11px;
  overflow-y: auto;
  scrollbar-width: thin;
  min-height: 60px;
  flex: 1;
}
.col-empty {
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  padding: 22px 14px;
  text-align: center;
  color: var(--muted-2);
  font-size: 12.5px;
}

/* ---------- card ---------- */
.card {
  position: relative;
  flex-shrink: 0; /* keep natural height; let the column scroll instead of clipping cards */
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 14px 12px 16px;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--card-color);
}
.card:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.card.dragging { opacity: 0.5; }

.card-preview {
  position: relative;
  height: 128px;
  margin: -2px -3px 11px -7px;
  border-radius: 9px;
  overflow: hidden;
  background: #14171c;
  border: 1px solid var(--border);
}
.card-preview iframe {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 800px;
  transform: scale(0.27);
  transform-origin: top left;
  border: 0;
  pointer-events: none;
}
.card-preview img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
}
.card-preview .preview-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted-2);
  text-align: center; padding: 10px;
}
.card-preview .preview-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(12,14,18,0.55));
}

.card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.stage-pill {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--card-color);
  background: color-mix(in srgb, var(--card-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-color) 35%, transparent);
  padding: 3px 8px; border-radius: 6px;
}
.card-owner {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-2);
}
.card-star {
  margin-left: auto;
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: 0; background: transparent;
  color: var(--muted-2);
  font-size: 16px; line-height: 1;
  border-radius: 8px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: color .12s ease, background .12s ease, transform .12s ease;
}
.card-top:has(.card-owner) .card-star { margin-left: 0; }
.card-star:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.card-star.is-on { color: var(--accent); }
.card-star:active { transform: scale(0.92); }
.card-name {
  font-family: var(--font-display);
  font-weight: 600; font-size: 16px; line-height: 1.2;
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}

.starred-empty {
  margin: 48px auto;
  max-width: 420px;
  text-align: center;
  padding: 36px 28px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--panel);
}
.starred-empty-icon {
  font-size: 28px;
  color: var(--accent);
  margin-bottom: 12px;
  opacity: 0.9;
}
.starred-empty h2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
.starred-empty p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 18px;
}
/* ---- card tasks (the focal point) ---- */
.card-tasks { margin-bottom: 11px; }
.tasks-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 7px;
}
.tasks-label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted-2);
}
.tasks-counts { display: inline-flex; align-items: center; gap: 6px; }
.count-open, .count-waiting {
  font-family: var(--font-mono); font-size: 10px;
  border-radius: 99px; padding: 1px 7px; border: 1px solid var(--border);
}
.count-open { color: var(--muted); background: var(--panel); }
.count-waiting {
  color: var(--waiting);
  background: color-mix(in srgb, var(--waiting) 13%, transparent);
  border-color: color-mix(in srgb, var(--waiting) 30%, transparent);
}
.task-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.task { display: flex; align-items: flex-start; gap: 8px; }
.task-check {
  flex-shrink: 0; margin-top: 1px;
  width: 16px; height: 16px; border-radius: 5px;
  border: 1.5px solid var(--border-strong); background: transparent;
  color: #0c0d10; font-size: 11px; line-height: 1; font-weight: 700;
  cursor: pointer; display: grid; place-items: center; transition: all .12s ease;
}
.task-check:hover { border-color: var(--card-color); }
.task.is-done .task-check {
  background: var(--card-color); border-color: var(--card-color);
}
.task-text { font-size: 12.5px; color: var(--text); line-height: 1.35; cursor: pointer; flex: 1; }
.task.is-done .task-text { color: var(--muted-2); text-decoration: line-through; }
.task-subcount {
  flex-shrink: 0; align-self: center;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--muted-2);
  background: var(--panel); border: 1px solid var(--border); border-radius: 99px; padding: 1px 6px;
}

/* subtasks */
.task-item { display: block; }
.subtask-list { list-style: none; margin: 5px 0 0 24px; display: flex; flex-direction: column; gap: 4px; }
.subtask { display: flex; align-items: flex-start; gap: 7px; }
.subtask-check {
  flex-shrink: 0; margin-top: 1px;
  width: 14px; height: 14px; border-radius: 4px;
  border: 1.5px solid var(--border-strong); background: transparent;
  color: #0c0d10; font-size: 9px; line-height: 1; font-weight: 700;
  cursor: pointer; display: grid; place-items: center; transition: all .12s ease;
}
.subtask-check:hover { border-color: var(--card-color); }
.subtask.is-done .subtask-check { background: var(--card-color); border-color: var(--card-color); }
.subtask-text { flex: 1; font-size: 11.5px; color: var(--muted); line-height: 1.3; cursor: pointer; }
.subtask.is-done .subtask-text { color: var(--muted-2); text-decoration: line-through; }
.subtask-del {
  flex-shrink: 0; background: none; border: none; color: var(--muted-2);
  font-size: 10px; cursor: pointer; padding: 0 2px; opacity: 0; transition: opacity .12s ease, color .12s ease;
}
.subtask:hover .subtask-del { opacity: 1; }
.subtask-del:hover { color: #f87171; }
.subtask-add {
  margin: 5px 0 0 24px; background: none; border: none; color: var(--muted-2);
  font-family: var(--font-mono); font-size: 10px; cursor: pointer; padding: 2px 0; text-align: left;
}
.subtask-add:hover { color: var(--text); }
.subtask-quickadd {
  margin: 5px 0 0 24px; width: calc(100% - 24px);
  background: transparent; border: 1px dashed var(--border); border-radius: 6px;
  color: var(--text); font-family: var(--font-body); font-size: 11.5px; padding: 5px 8px;
}
.subtask-quickadd::placeholder { color: var(--muted-2); }
.subtask-quickadd:focus { outline: none; border-style: solid; border-color: var(--accent); background: var(--bg); }

/* ---- calendar picker ---- */
.duepicker { position: relative; }
.duepicker-trigger {
  width: 100%; text-align: left;
  background: var(--bg); color: var(--muted-2);
  border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 10px 12px; font-family: var(--font-body); font-size: 14px; cursor: pointer;
  transition: border-color .14s ease;
}
.duepicker-trigger.has-date { color: var(--text); }
.duepicker-trigger:hover { border-color: rgba(15, 23, 42, 0.57); }
.calendar {
  margin-top: 8px;
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 12px;
  padding: 12px;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head span { font-weight: 600; font-size: 13.5px; }
.cal-head button {
  width: 28px; height: 28px; border-radius: 8px; background: transparent;
  border: 1px solid var(--border); color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1;
}
.cal-head button:hover { color: var(--text); border-color: var(--border-strong); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { text-align: center; font-family: var(--font-mono); font-size: 9.5px; color: var(--muted-2); padding: 4px 0; }
.cal-day {
  aspect-ratio: 1; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--text); cursor: pointer;
  font-size: 12.5px; font-family: var(--font-body);
  display: grid; place-items: center;
}
.cal-day:hover { background: var(--panel-2); }
.cal-day.muted { color: var(--muted-2); }
.cal-day.is-today { border-color: var(--border-strong); }
.cal-day.is-selected { background: var(--accent); color: #1b1306; border-color: transparent; font-weight: 600; }
/* floating inline date popover (click a date chip on a card) */
.cal-pop { margin-top: 0; box-shadow: 0 14px 40px rgba(15, 23, 42, 0.14); }
.cal-pop .cal-head button { background: transparent; border: 1px solid var(--border); border-radius: 7px; color: var(--muted); width: 26px; height: 26px; cursor: pointer; }
.cal-pop .cal-foot button { background: transparent; border: 1px solid var(--border); border-radius: 7px; color: var(--muted); padding: 4px 10px; font-size: 12px; cursor: pointer; }
.cal-pop .cal-foot button:hover, .cal-pop .cal-head button:hover { color: var(--text); border-color: var(--border-strong); }

/* a clickable due chip + the "+ date" affordance for tasks with no date */
.task-due.is-editable { cursor: pointer; }
.task-due.is-editable:hover { filter: brightness(1.15); outline: 1px solid var(--border-strong); }
.task-due-set {
  flex-shrink: 0; background: transparent; border: 1px dashed var(--border); border-radius: 99px;
  color: var(--muted-2); font-family: var(--font-mono); font-size: 9.5px; padding: 1px 7px; cursor: pointer;
  opacity: 0; transition: opacity .12s ease, border-color .12s ease, color .12s ease;
}
.task:hover .task-due-set, .task-due-set:focus { opacity: 1; }
.task-due-set:hover { color: var(--text); border-color: var(--accent); }

/* ---------- Grid view: all products at once (stages as bands) ---------- */
#board.is-grid {
  display: block; overflow-y: auto; overflow-x: hidden;
  padding: 14px 20px 60px;
}
.stage-band { margin-bottom: 18px; border-left: 3px solid var(--col-color); padding-left: 12px; }
.stage-band.drop-active { background: var(--bg-2); border-radius: 10px; }
.band-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.band-head .col-tag { width: 8px; height: 8px; border-radius: 99px; background: var(--col-color); flex-shrink: 0; }
.band-name { font-weight: 700; font-size: 14px; letter-spacing: 0.01em; }
.band-head .col-count {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted-2);
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 99px; padding: 1px 8px;
}
.band-head .col-add {
  margin-left: 4px; width: 22px; height: 22px; border-radius: 7px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
}
.band-head .col-add:hover { color: var(--text); border-color: var(--border-strong); }
.band-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: start;
}
.band-empty { color: var(--muted-2); font-size: 12.5px; padding: 6px 2px; }
@media (max-width: 720px) { .band-grid { grid-template-columns: 1fr; } }

.cal-foot { display: flex; justify-content: space-between; margin-top: 10px; }
.cal-foot button {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  border-radius: 8px; padding: 5px 12px; font-size: 12px; cursor: pointer; font-family: var(--font-body);
}
.cal-foot button:hover { color: var(--text); border-color: var(--border-strong); }

/* ---- task editor modal ---- */
.modal-sm { max-width: 430px; }
.task-title-row { display: flex; align-items: center; gap: 10px; }
.task-title-row .task-done-toggle {
  width: 18px; height: 18px; flex-shrink: 0; padding: 0;
  accent-color: var(--accent); cursor: pointer;
  border: none; background: transparent; border-radius: 4px;
}
.task-title-row #tk_text { flex: 1; width: auto; }
.tk-waiting { display: flex; align-items: center; gap: 8px; margin-top: 10px; cursor: pointer; font-size: 13px; color: var(--text); }
.tk-waiting input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--waiting); cursor: pointer; }

.subtask-editor { display: flex; flex-direction: column; gap: 8px; }
.sub-row { display: flex; align-items: center; gap: 8px; }
.sub-row .sub-row-check {
  width: 16px; height: 16px; flex-shrink: 0; padding: 0;
  border: none; background: transparent; border-radius: 4px;
  accent-color: var(--accent); cursor: pointer;
}
.sub-row .sub-row-text { flex: 1; width: auto; padding: 8px 11px; font-size: 13px; }
.row-move { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
/* Completed subtasks inside the task modal: collapsed by default so a task with
   a long history opens compact. Mirrors the card view's done toggle. */
.sub-done-group { margin-top: 2px; }
.sub-done-toggle {
  display: block; width: 100%;
  background: none; border: none; color: var(--muted-2);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.03em;
  cursor: pointer; padding: 4px 0; text-align: left;
}
.sub-done-toggle:hover { color: var(--muted); }
.sub-done-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px; padding-top: 6px;
  border-top: 1px dashed var(--border);
  opacity: 0.75;
}
.sub-done-list .sub-row-text { text-decoration: line-through; }

.row-move button {
  width: 24px; height: 15px; line-height: 1; font-size: 8px;
  background: transparent; border: 1px solid var(--border); color: var(--muted-2);
  border-radius: 5px; cursor: pointer; display: grid; place-items: center;
}
.row-move button:hover { color: var(--text); border-color: var(--border-strong); }
.sub-row .row-del {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  background: transparent; border: 1px solid var(--border); color: var(--muted-2);
  cursor: pointer; font-size: 11px;
}
.sub-row .row-del:hover { color: #f87171; border-color: rgba(248,113,113,0.4); }

/* drag-to-reorder */
.task { cursor: grab; }
.task:active { cursor: grabbing; }
.task .task-check { cursor: pointer; }
.task.task-dragging { opacity: 0.4; }
.task.drop-before { box-shadow: inset 0 2px 0 var(--card-color); }
.task.drop-after { box-shadow: inset 0 -2px 0 var(--card-color); }

/* "waiting on someone" marker — costs nothing at rest, appears on hover or when set */
.task-waiting-toggle {
  flex-shrink: 0; display: none; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer; padding: 2px 5px; border-radius: 6px;
  color: var(--muted-2); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
}
.task:hover .task-waiting-toggle { display: inline-flex; }
.task-waiting-toggle:hover { color: var(--text); background: var(--panel-2); }
.task-waiting-toggle.is-on {
  display: inline-flex; color: var(--waiting);
  background: color-mix(in srgb, var(--waiting) 13%, transparent);
}
.task-waiting-toggle svg { display: block; }
.task.is-waiting .task-text { color: var(--muted); font-style: italic; }

/* due date chip on a task */
.task-due {
  flex-shrink: 0; align-self: center;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.02em;
  border-radius: 99px; padding: 1px 7px; border: 1px solid transparent;
}
.task-due.due-normal { color: var(--muted); background: var(--panel); border-color: var(--border); }
.task-due.due-today { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); font-weight: 600; }
.task-due.due-soon { color: #93c5fd; background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.35); }
.task-due.due-overdue { color: #fca5a5; background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.4); }

/* completed-tasks reveal */
.tasks-done-toggle {
  display: block; margin-top: 8px;
  background: none; border: none; color: var(--muted-2);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.03em;
  cursor: pointer; padding: 2px 0; text-align: left;
}
.tasks-done-toggle:hover { color: var(--muted); }
.task-list.done-list { margin-top: 6px; opacity: 0.75; }

/* "Recently done" update section — auto-built from each task's doneAt stamp */
.card-updates {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.updates-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 6px;
}
.updates-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.updates-list li { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.35; }
.upd-check { color: var(--accent); flex: 0 0 auto; font-size: 11px; line-height: 1.45; }
.upd-text {
  flex: 1 1 auto; min-width: 0; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.upd-when {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 10px;
  color: var(--muted-2); padding-top: 1px;
}

/* inline quick-add */
.task-quickadd {
  width: 100%;
  margin-top: 8px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 7px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 6px 9px;
  transition: border-color .14s ease, background .14s ease;
}
.task-quickadd::placeholder { color: var(--muted-2); }
.task-quickadd:hover { border-color: var(--border-strong); }
.task-quickadd:focus { outline: none; border-style: solid; border-color: var(--accent); background: var(--bg); }

/* notes are intentionally secondary now */
.card-notes {
  font-size: 11.5px; color: var(--muted-2); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 11px;
}

.card-foot { display: flex; align-items: center; gap: 8px; }
.open-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); text-decoration: none;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 9px; transition: all .14s ease;
}
.open-link:hover { color: var(--text); border-color: var(--border-strong); background: var(--panel-2); }
.open-link.is-empty { opacity: 0.4; pointer-events: none; }
.card-links { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.open-link .link-fav { width: 13px; height: 13px; border-radius: 3px; flex: 0 0 auto; }
.open-link .open-link-text { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.open-link.is-preview { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.open-link.is-preview::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); flex: 0 0 auto;
}

/* changelog (long-form updates), collapsed by default to keep cards even */
.card-changelog { margin-top: 8px; }
.card-changelog > summary {
  cursor: pointer; list-style: none; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2);
  padding: 2px 0;
}
.card-changelog > summary::-webkit-details-marker { display: none; }
.card-changelog > summary::before { content: "▸ "; }
.card-changelog[open] > summary::before { content: "▾ "; }
.changelog-body {
  margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--muted);
  white-space: pre-wrap; word-break: break-word;
}
.updates-more > summary {
  cursor: pointer; list-style: none; font-family: var(--font-mono);
  font-size: 10px; color: var(--muted-2); padding: 4px 0 2px;
}
.updates-more > summary::-webkit-details-marker { display: none; }

/* keep long entries from blowing up card height (even grid) */
.done-list .task-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-notes { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* link editor rows in the product modal */
.link-editor { display: flex; flex-direction: column; gap: 8px; }
.link-row { display: flex; align-items: center; gap: 8px; }
.link-row .link-row-label { flex: 0 0 34%; min-width: 0; padding: 9px 11px; font-size: 13.5px; }
.link-row .link-row-url { flex: 1; min-width: 0; padding: 9px 11px; font-size: 13.5px; }
.card-updated {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px; color: var(--muted-2);
}

/* ---------- modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(5,6,8,0.66);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  padding: 20px;
  animation: fade .16s ease;
}
.modal {
  width: 100%; max-width: 480px;
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgba(15, 23, 42, 0.224);
  animation: pop .18s cubic-bezier(.2,.9,.3,1.2);
}
.modal-head { flex-shrink: 0; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border);
}
.modal-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.modal-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
.field-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.field-hint { color: var(--muted-2); font-weight: 400; }
.field input, .field textarea, .field select {
  font-family: var(--font-body); font-size: 14px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 10px 12px; outline: none; transition: border-color .14s ease, box-shadow .14s ease;
  width: 100%; resize: vertical;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,157,47,0.15);
}
.field select { appearance: none; cursor: pointer; }

/* ---- preview image picker ---- */
.image-row { display: flex; gap: 10px; align-items: stretch; }
.image-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.image-actions { display: flex; gap: 8px; }
.image-actions .btn { padding: 7px 12px; font-size: 12.5px; }
.image-thumb {
  width: 92px; flex-shrink: 0;
  border: 1px solid var(--border-strong); border-radius: 9px; overflow: hidden;
  background: var(--bg); color: var(--muted-2);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
}
.image-thumb.has-img { color: transparent; }
.image-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* ---- modal task editor ---- */
.task-editor { display: flex; flex-direction: column; gap: 8px; }
.task-row { display: flex; align-items: center; gap: 8px; }
.task-row .task-row-text { flex: 1; width: auto; padding: 9px 11px; font-size: 13.5px; }
.task-row .task-row-check {
  width: 18px; height: 18px; flex-shrink: 0; padding: 0;
  border: none; background: transparent; border-radius: 4px;
  accent-color: var(--accent); cursor: pointer;
}
.task-row-del {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: 1px solid var(--border); color: var(--muted-2);
  cursor: pointer; font-size: 12px; line-height: 1; transition: all .12s ease;
}
.task-row-del:hover { color: #f87171; border-color: rgba(248,113,113,0.4); }
.task-add-btn { align-self: flex-start; font-size: 12.5px; padding: 7px 12px; }

/* ---- manage-stages editor ---- */
.modal-hint { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-bottom: 2px; }
.stages-editor { display: flex; flex-direction: column; gap: 8px; }
.stage-row { display: flex; align-items: center; gap: 8px; }
.stage-row .stage-color {
  width: 34px; height: 34px; flex-shrink: 0; padding: 2px;
  border: 1px solid var(--border-strong); border-radius: 9px; background: var(--bg); cursor: pointer;
}
.stage-row .stage-name {
  flex: 1; width: auto; padding: 9px 11px; font-size: 13.5px;
  font-family: var(--font-body); color: var(--text);
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 10px;
  outline: none; transition: border-color .14s ease, box-shadow .14s ease;
}
.stage-row .stage-name:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,157,47,0.15); }
.stage-cards {
  flex-shrink: 0; min-width: 22px; text-align: center;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-2);
  background: var(--panel); border: 1px solid var(--border); border-radius: 99px; padding: 2px 6px;
}
.stage-move { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.stage-move button {
  width: 26px; height: 16px; line-height: 1; font-size: 8px;
  background: transparent; border: 1px solid var(--border); color: var(--muted-2);
  border-radius: 5px; cursor: pointer; display: grid; place-items: center;
}
.stage-move button:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
.stage-move button:disabled { opacity: 0.3; cursor: default; }
.stage-del {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: 1px solid var(--border); color: var(--muted-2);
  cursor: pointer; font-size: 12px; transition: all .12s ease;
}
.stage-del:hover { color: #f87171; border-color: rgba(248,113,113,0.4); }

.modal-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.modal-actions .spacer { flex: 1; }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 60;
  background: var(--bg-2); border: 1px solid var(--border-strong);
  color: var(--text); font-size: 13px;
  padding: 11px 16px; border-radius: 11px;
  box-shadow: var(--shadow);
  animation: rise .2s ease;
}
.toast.is-error { border-color: rgba(248,113,113,0.5); }

/* ---------- My Tasks panel ---------- */
.tasks-modal { max-width: 720px; }
.tasks-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tasks-refreshing { font-family: var(--font-mono); font-size: 10px; color: var(--muted-2); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }
.tasks-dueonly { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; color: var(--muted); user-select: none; }
.tasks-dueonly input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.tasks-cols { display: flex; gap: 16px; align-items: flex-start; }
.tasks-col { flex: 1; min-width: 0; }
.tasks-col-head {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.tasks-col-count {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted-2);
  background: var(--panel); border: 1px solid var(--border); border-radius: 99px; padding: 1px 7px;
}
.mytask-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.mytask {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 10px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
  transition: opacity .18s ease, transform .18s ease, height .18s ease, padding .18s ease, margin .18s ease, border-color .14s ease;
  overflow: hidden; cursor: pointer;
}
.mytask-assigned { border-left: 2px solid var(--accent); }
.mytask:hover { border-color: var(--border-strong); }
.mytask-note-dot { color: var(--muted-2); margin-left: 5px; }
#gt_notes { width: 100%; }
.mytask.removed { opacity: 0; transform: translateX(10px); height: 0 !important; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; }
.mytask-check {
  flex-shrink: 0; margin-top: 1px; width: 17px; height: 17px; border-radius: 5px;
  border: 1.5px solid var(--border-strong); background: transparent; cursor: pointer;
  color: #1b1306; font-size: 11px; font-weight: 700; display: grid; place-items: center; transition: all .12s ease;
}
.mytask-check:hover { border-color: var(--accent); }
.mytask.completing .mytask-check { background: var(--accent); border-color: var(--accent); }
.mytask-text { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text); line-height: 1.35; word-break: break-word; }
.mytask-due {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 9.5px; color: var(--muted);
  background: var(--panel); border: 1px solid var(--border); border-radius: 99px; padding: 1px 7px;
}
.mytask-empty { color: var(--muted-2); font-size: 12.5px; padding: 8px 2px; }
.mytask-add {
  width: 100%; margin-top: 8px;
  background: transparent; border: 1px dashed var(--border); border-radius: 9px;
  color: var(--text); font-family: var(--font-body); font-size: 12.5px; padding: 8px 10px;
  transition: border-color .14s ease, background .14s ease;
}
.mytask-add::placeholder { color: var(--muted-2); }
.mytask-add:hover { border-color: var(--border-strong); }
.mytask-add:focus { outline: none; border-style: solid; border-color: var(--accent); background: var(--bg); }
.mytask-add:disabled { opacity: 0.5; }
.tasks-empty { text-align: center; padding: 26px 12px; color: var(--muted); }
.tasks-hint { color: var(--muted-2); font-size: 12.5px; margin-top: 6px; }
.tasks-hint.is-error { color: #f87171; }
.tasks-key-row { display: flex; gap: 8px; margin: 16px auto 0; max-width: 320px; }
.tasks-key-row input {
  flex: 1; background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 12px;
  font-family: var(--font-body); font-size: 14px; outline: none;
}
.tasks-key-row input:focus { border-color: var(--accent); }
.tasks-msg { color: var(--muted); text-align: center; padding: 22px; }
@media (max-width: 720px) { .tasks-cols { flex-direction: column; } }

/* ---------- product assignment picker (in My Tasks rows) ---------- */
.assign-select {
  flex-shrink: 0; width: 128px; max-width: 128px; align-self: flex-start;
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 7px; font-family: var(--font-body); font-size: 11.5px; cursor: pointer;
  text-overflow: ellipsis;
}
.mytask-assigned .assign-select { color: var(--text); border-color: var(--border-strong); }
.assign-select:hover { border-color: var(--border-strong); }
.assign-select:focus { outline: none; border-color: var(--accent); }

@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0.96) translateY(6px); } }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }

/* staggered card reveal on first paint only (class added by JS) */
.card.intro { animation: cardin .4s ease backwards; }
@keyframes cardin { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 720px) {
  /* clear the notch / status bar in standalone (Add to Home Screen) */
  .topbar {
    gap: 10px; row-gap: 8px;
    padding: max(13px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 13px max(14px, env(safe-area-inset-left));
  }
  .brand-text h1 { font-size: 17px; }
  .brand-sub { display: none; }
  .topbar-meta { display: none; }            /* keep the top bar to one slim row */
  .topbar-actions { gap: 8px; margin-left: auto; }
  .btn { padding: 9px 12px; }

  /* collapse the actions into an overflow menu */
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 11px; }
  .topbar-menu {
    display: none;
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 8px;
    min-width: 200px; padding: 10px;
    background: var(--bg-2); border: 1px solid var(--border-strong);
    border-radius: 12px; box-shadow: var(--shadow);
  }
  .topbar-menu.is-open { display: flex; }
  .topbar-menu .btn { width: 100%; text-align: left; }
  .topbar-menu .toggle { padding: 8px 6px; }

  /* prevent iOS from zooming the page when focusing a small input */
  input:not([type="checkbox"]):not([type="color"]), textarea, select { font-size: 16px; }

  /* one stage per screen; swipe horizontally between stages, page scrolls vertically */
  .board {
    padding: 6px max(12px, env(safe-area-inset-right)) max(36px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    gap: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .column {
    min-width: 86vw; max-width: 86vw;
    max-height: calc(100dvh - 150px); /* scroll within a stage; swipe sideways to switch */
    scroll-snap-align: start;
  }

  /* expanded stage takes the full width; thin bars hide so it isn't squeezed */
  .board.has-expanded { scroll-snap-type: none; }
  .board.has-expanded .column.collapsed { display: none; }
  .column.expanded { min-width: 100%; max-width: 100%; }
  .column.expanded .col-body { grid-template-columns: 1fr; }

  /* bigger touch targets */
  .task-check { width: 20px; height: 20px; font-size: 12px; }
  .subtask-check { width: 18px; height: 18px; }
  .cal-day { font-size: 13.5px; }

  /* dialogs use the full width on a phone */
  .modal, .modal-sm { max-width: 100%; }
  .modal-backdrop { padding: 12px; }
}

/* ============================================================
   Board refresh: stage picker, inline rename, task panel, next-up
   ============================================================ */

/* --- stage pill is now a control, so it has to look like one --- */
button.stage-pill {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; font-family: var(--font-mono);
}
button.stage-pill:hover { background: color-mix(in srgb, var(--card-color) 24%, transparent); }
.stage-pill-caret { font-size: 8px; opacity: 0.7; }

.stage-pop {
  position: absolute; z-index: 90; min-width: 170px;
  background: var(--bg-2); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 5px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}
.stage-opt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; border: 0; color: var(--text);
  font-family: var(--font-body); font-size: 12.5px; text-align: left;
  padding: 7px 9px; border-radius: 7px; cursor: pointer;
}
.stage-opt:hover { background: var(--panel-2); }
.stage-opt.is-on { color: var(--accent); font-weight: 600; }
.stage-dot { width: 8px; height: 8px; border-radius: 99px; flex-shrink: 0; }

/* --- long task text became vertical slivers in a 293px card --- */
.task-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-width: 0; overflow-wrap: anywhere;
}
.task-text.is-editing {
  display: block; -webkit-line-clamp: unset; overflow: visible;
  outline: none; cursor: text; white-space: pre-wrap;
  background: var(--bg-2); border-radius: 6px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
  padding: 3px 6px; margin: -3px -6px;
}

.tasks-more {
  align-self: flex-start; background: transparent; border: 0;
  color: var(--muted); font-family: var(--font-body); font-size: 11.5px;
  cursor: pointer; padding: 3px 2px;
}
.tasks-more:hover { color: var(--text); text-decoration: underline; }

/* --- a one-product stage shouldn't reserve a whole empty row --- */
.stage-band.is-sparse .band-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 320px)); }
.stage-band.is-empty { opacity: 0.55; margin-bottom: 10px; }
.stage-band.is-empty .band-grid { display: none; }
.stage-band.is-empty .band-head { margin-bottom: 0; }

/* --- "Next up" strip --- */
.nextup {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 20px; border-bottom: 1px solid var(--border); background: var(--bg-2);
}
.nextup-stat {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: transparent; border: 1px solid transparent; color: var(--muted);
  font-family: var(--font-body); font-size: 12px;
  padding: 4px 10px; border-radius: 8px; cursor: pointer;
}
.nextup-stat:hover { border-color: var(--border-strong); color: var(--text); }
.nextup-stat.is-active { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.nextup-num { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--text); }
.nextup-stat.is-hot  .nextup-num { color: var(--danger); }
.nextup-stat.is-warm .nextup-num { color: var(--accent); }
.nextup-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.nextup-next { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
.nextup-next-lbl { color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; font-family: var(--font-mono); }
.nextup-next-task {
  background: transparent; border: 0; color: var(--text); cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0; text-align: left;
}
.nextup-next-task:hover { color: var(--accent); text-decoration: underline; }
.nextup-next-prod { color: var(--muted-2); font-size: 11px; }
@media (max-width: 720px) { .nextup-next { display: none; } }

/* --- task panel: board tasks alongside the unassigned ones --- */
.mytask.is-board { cursor: pointer; }
.dock-body .mytask.is-board { flex-wrap: wrap; row-gap: 5px; }
.mytask-tag {
  order: 3; font-size: 10px; color: var(--muted-2);
  border-left: 2px solid var(--tag, var(--border-strong)); padding-left: 6px;
  max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mytask.is-waiting { opacity: 0.62; }
.mytask.is-waiting .mytask-text { font-style: italic; }
.mytask-due.is-overdue { color: var(--danger); font-weight: 600; }
.mytask-due.is-today { color: var(--accent); font-weight: 600; }
.mytask.is-overdue { border-left: 2px solid var(--danger); padding-left: 8px; }
.mytask.is-today { border-left: 2px solid var(--accent); padding-left: 8px; }
.mytask.is-gtask { border-left: 2px dashed var(--border-strong); padding-left: 8px; }

/* --- task row: delete lives on the row, so the editor modal isn't needed --- */
.task { position: relative; }
.task-del {
  background: transparent; border: 0; color: var(--muted-2);
  font-size: 11px; line-height: 1; cursor: pointer; padding: 3px 4px;
  border-radius: 5px; opacity: 0; transition: opacity 0.12s ease, color 0.12s ease;
  flex-shrink: 0;
}
.task:hover .task-del, .task-del:focus-visible { opacity: 1; }
.task-del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.subtask-text.is-editing {
  outline: none; cursor: text; white-space: pre-wrap;
  background: var(--bg-2); border-radius: 5px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent);
  padding: 2px 5px; margin: -2px -5px;
}
.task.is-focused {
  box-shadow: 0 0 0 2px var(--accent);
  border-radius: 7px;
}

/* --- hover to read the full task, no click needed --- */
.task-tip {
  position: fixed; z-index: 120; max-width: 340px;
  background: #1b1f27; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 8px 10px; font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.154);
  pointer-events: none; white-space: pre-wrap; overflow-wrap: anywhere;
  opacity: 0; transform: translateY(-2px);
  transition: opacity 0.09s ease, transform 0.09s ease;
}
.task-tip.is-in { opacity: 1; transform: none; }

/* Editing must not repaint the row. Same font metrics and box as the resting
   state, so the only visible change is the ring and the caret. */
.task-text.is-editing {
  background: transparent;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
  padding: 2px 4px; margin: -2px -4px;
  border-radius: 5px;
}
.task-text.is-editing::selection, .subtask-text.is-editing::selection {
  background: color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ============================================================
   Vigan's reporting fields: priority, owner, why, sentiment
   ============================================================ */
.task-prio.is-p1 { background: color-mix(in srgb, var(--danger) 20%, transparent); color: #e8a0a0; border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.task-prio.is-p2 { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, transparent); }
.task-prio.is-p3 { background: var(--panel-2); color: var(--muted); }
.task-prio.is-none { opacity: 0; }
.task:hover .task-prio.is-none { opacity: 1; }
.task-prio:hover { border-color: var(--border-strong); }

.task-owner:hover { color: var(--text); border-color: var(--border-strong); }
.task-owner.is-empty { opacity: 0; }
.task:hover .task-owner.is-empty { opacity: 1; }

.task-why:hover { color: var(--muted); }
.task-why::before { content: "why "; color: var(--muted-2); opacity: 0.6; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; }

.card-sentiment {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); font-family: var(--font-body); font-size: 10px;
  padding: 2px 7px; margin-left: 6px;
}
.card-sentiment:hover { color: var(--text); border-color: var(--border-strong); }
.sent-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--sent); flex-shrink: 0; }

/* ============================================================
   Task row v2: one job per line
   Row 1 is the text at full width. Row 2 is a quiet meta strip.
   ============================================================ */
.task-text { flex: 1 1 auto; min-width: 0; }

.task-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  padding: 3px 0 0 24px; min-height: 18px;
}
.task-meta > * { flex-shrink: 0; }

.task-prio, .card-prio {
  cursor: pointer; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.03em; border-radius: 4px; padding: 2px 6px;
  border: 1px solid transparent; background: var(--bg-2); color: var(--muted-2);
}
.task-prio.is-p1, .card-prio.is-p1 { background: color-mix(in srgb, var(--danger) 20%, transparent); color: #e8a0a0; border-color: color-mix(in srgb, var(--danger) 42%, transparent); }
.task-prio.is-p2, .card-prio.is-p2 { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.task-prio.is-p3, .card-prio.is-p3 { background: var(--panel-2); color: var(--muted); }
.task-prio.is-none, .card-prio.is-none { opacity: 0; font-weight: 400; }
.task-item:hover .task-prio.is-none, .card:hover .card-prio.is-none { opacity: 0.55; }
.task-prio:hover, .card-prio:hover { border-color: var(--border-strong); opacity: 1; }
.card-prio { margin-left: 6px; }

/* Priority also reads as a colour on the task's left edge, so a column of
   tasks can be scanned without reading a single chip. */
.task { border-left: 2px solid transparent; padding-left: 4px; margin-left: -6px; }
.task.prio-p1 { border-left-color: var(--danger); }
.task.prio-p2 { border-left-color: var(--accent); }
.task.prio-p3 { border-left-color: var(--border-strong); }

.task-owner {
  max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  font-family: var(--font-body); font-size: 10px; border-radius: 5px;
  padding: 2px 6px; cursor: pointer;
}
.task-owner:hover { color: var(--text); border-color: var(--border-strong); }
.task-owner.is-empty { opacity: 0; }
.task-item:hover .task-owner.is-empty { opacity: 0.7; }

.task-subcount {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  font-family: var(--font-body); font-size: 10px; border-radius: 5px;
  padding: 2px 6px; cursor: pointer;
}
.task-subcount:hover, .task-subcount.is-open { color: var(--text); border-color: var(--border-strong); }

.task-why {
  font-size: 11px; color: var(--muted-2); line-height: 1.4; cursor: pointer;
  padding: 3px 0 0 24px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.task-why:hover { color: var(--muted); }
.task-why::before { content: "why "; opacity: 0.55; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; }

.subtask-list { padding-left: 24px; }
.task-item { padding-bottom: 6px; }
.card-sentiment, .card-prio { white-space: nowrap; }
.card-top { flex-wrap: wrap; row-gap: 4px; }

/* ============================================================
   "By person" view: what each person owes, and when
   ============================================================ */
.board.is-owner, #board.is-owner { display: block; }
.owner-band { margin-bottom: 18px; }
.owner-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.owner-name { font-weight: 700; font-size: 15px; color: var(--text); }
.owner-count {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted-2);
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 99px; padding: 1px 8px;
}
.owner-late { font-size: 11px; color: var(--danger); font-weight: 700; }
.owner-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.owner-row {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: 8px; padding: 9px 12px;
}
.owner-row:hover { background: var(--panel-2); border-color: var(--border-strong); }
.owner-row.is-overdue { border-left-color: var(--danger); }
.owner-row.is-waiting { opacity: 0.72; }
.owner-check:hover { border-color: var(--accent); }
.task-why-add:hover, .subtask-add:hover { color: var(--text); background: var(--panel-2); }
.task-why {
  border-left: 2px solid var(--border); margin-left: 24px; padding: 2px 0 2px 8px;
}
.task-why::before { content: ""; }
.task-why.is-editing {
  outline: none; white-space: pre-wrap; background: var(--bg-2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 5px; border-left-color: transparent;
}

/* ============================================================
   Control bar: stage summary + multi-select filters, in one strip
   ============================================================ */
.controlbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 20px; border-bottom: 1px solid var(--border); background: var(--bg-2);
}
.cb-sep { width: 1px; height: 16px; background: var(--border); }
.cb-stages { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.cb-stage {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 3px 7px; color: var(--muted); font-family: var(--font-body); font-size: 11.5px;
}
.cb-stage:hover { background: var(--panel-2); color: var(--text); }
.cb-stage.is-on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--text); }
.cb-stage.is-zero { opacity: 0.42; }
.cb-stage-dot { width: 6px; height: 6px; border-radius: 99px; flex-shrink: 0; }
.cb-stage-n { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text); }
.cb-stage-name { white-space: nowrap; }

.cb-filters, .cb-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cb-right { margin-left: auto; }
.cb-chip {
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); font-family: var(--font-body); font-size: 11.5px;
  padding: 3px 9px; cursor: pointer; white-space: nowrap;
}
.cb-chip:hover { color: var(--text); border-color: var(--border-strong); }
.cb-chip.is-on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--text); }
.cb-clear { color: var(--accent); }
.cb-changed { font-size: 11px; color: var(--muted-2); white-space: nowrap; }

.cb-drop { position: relative; }
.cb-menu {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 95; min-width: 180px;
  background: var(--bg-3); border: 1px solid var(--border-strong); border-radius: 9px;
  padding: 5px; box-shadow: var(--shadow); max-height: 300px; overflow-y: auto;
}
.cb-opt {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px;
  cursor: pointer; font-size: 12.5px; color: var(--text);
}
.cb-opt:hover { background: var(--panel-2); }
.cb-opt input { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.cb-opt span { flex: 1 1 auto; }
.cb-opt-n { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-2); flex: 0 0 auto; }

/* collapsed stage bar */
.stage-band.is-collapsed { opacity: 0.7; margin-bottom: 8px; }
.stage-band.is-collapsed .band-head { cursor: pointer; margin-bottom: 0; }
.band-name { cursor: pointer; }
.band-collapsed-hint { font-size: 10px; color: var(--muted-2); }

/* stale marker */
.card-stale {
  margin-left: 7px; font-family: var(--font-mono); font-size: 9.5px;
  color: var(--muted-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
  vertical-align: middle;
}

/* sentiment note, editable in place */
.card-sentnote {
  flex: 1 1 100%; font-size: 11px; color: var(--muted-2); line-height: 1.4;
  cursor: pointer; padding: 2px 0 0;
}
.card-sentnote:hover { color: var(--muted); }
.card-sentnote.is-editing {
  outline: none; white-space: pre-wrap; background: var(--bg-2); border-radius: 5px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent); padding: 3px 6px;
}
.task-owner.is-editing {
  outline: none; max-width: none; background: var(--bg-2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent);
}

.cb-changed { cursor: pointer; }
.cb-changed:hover { color: var(--text); text-decoration: underline; }
.wk-since { font-size: 12px; color: var(--muted-2); margin-bottom: 4px; }
.wk-h { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 12px; display: flex; gap: 6px; align-items: baseline; }
.wk-h span { font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.wk-list { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.wk-list li { font-size: 12.5px; color: var(--text); line-height: 1.45; display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; }
.wk-prod { font-size: 10.5px; color: var(--muted-2); flex-shrink: 0; }
.wk-when { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-2); margin-left: auto; }
.wk-empty { font-size: 12px; color: var(--muted-2); margin-top: 4px; }
#wkBaseline { margin-top: 16px; }

/* person view rows reuse the card task row, so they only need layout here */
.owner-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 12px; cursor: default; }
.owner-row .owner-prod {
  flex: 0 0 130px; font-size: 10.5px; color: var(--muted-2); padding-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.owner-taskwrap { flex: 1 1 auto; min-width: 0; list-style: none; }
.owner-taskwrap .task-item { padding-bottom: 0; }

/* ============================================================
   Product Operating Standard: gate, confidence, register counts
   ============================================================ */
.card-gate, .card-conf {
  cursor: pointer; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.03em; border-radius: 4px; padding: 2px 6px; margin-left: 5px;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--muted-2);
  white-space: nowrap;
}
.card-gate.is-set { background: color-mix(in srgb, #8b93a8 22%, transparent); color: #b6bdcc; border-color: color-mix(in srgb, #8b93a8 42%, transparent); }
.card-gate:hover, .card-conf:hover { border-color: var(--border-strong); color: var(--text); }
.card-conf.is-high { background: color-mix(in srgb, var(--c-live) 20%, transparent); color: #9ec7a8; border-color: color-mix(in srgb, var(--c-live) 40%, transparent); }
.card-conf.is-medium { background: color-mix(in srgb, var(--c-paused) 20%, transparent); color: #dbc68a; border-color: color-mix(in srgb, var(--c-paused) 40%, transparent); }
.card-conf.is-low { background: color-mix(in srgb, var(--danger) 20%, transparent); color: #e8a0a0; border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.card-conf.is-none { opacity: 0; }
.card:hover .card-conf.is-none { opacity: 0.55; }

.card-reg { display: flex; gap: 8px; flex: 1 1 100%; margin-top: 5px; }
.reg-ev, .reg-gap {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted-2);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px;
}
.reg-gap.has { color: #e8a0a0; border-color: color-mix(in srgb, var(--danger) 38%, transparent); }

/* --- gates: plain-language band headers and the lifecycle strip --- */
.band-desc { font-size: 11px; color: var(--muted-2); font-weight: 400; }
.opt-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.opt-sub { font-size: 10.5px; color: var(--muted-2); line-height: 1.3; }
.stage-pop { min-width: 260px; }
.card-gate.is-move {
  opacity: 0; cursor: pointer; font-family: var(--font-body); font-size: 10px;
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  border-radius: 5px; padding: 2px 7px; margin-left: 5px; white-space: nowrap;
}
.card:hover .card-gate.is-move { opacity: 0.7; }
.card-gate.is-move:hover { opacity: 1; color: var(--text); border-color: var(--border-strong); }
.cb-stage.is-zero { opacity: 0.35; }
.cb-stages { gap: 2px; }
.cb-stage { padding: 3px 6px; }

/* ============================================================
   Card v3: compact tile, expands in place
   ============================================================ */
.card { padding: 11px 13px; cursor: pointer; }
.card-head { display: flex; align-items: baseline; gap: 7px; }
.card-name { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-links-mini { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.card-links-mini .lk {
  width: 16px; height: 16px; border-radius: 4px; background: var(--panel-2);
  color: var(--muted); font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; border: 1px solid var(--border);
}
.card-links-mini .lk:hover { background: var(--accent-soft); color: var(--text); }

.card-meta { display: flex; align-items: center; gap: 7px; margin-top: 5px; min-height: 18px; }
.cm-counts { font-size: 11.5px; color: var(--muted); }
.card-stale { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; color: var(--muted-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }

.card-next { display: flex; align-items: baseline; gap: 7px; margin-top: 7px; font-size: 12.5px; }
.cn-l { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); flex: 0 0 auto; }
.cn-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.cn-w { font-size: 10.5px; color: var(--muted-2); flex: 0 0 auto; }
.cn-d { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-2); flex: 0 0 auto; }
.cn-d.is-late { color: var(--danger); font-weight: 700; }
.cn-empty { font-size: 12px; color: var(--muted-2); }

/* expanded: full width in the band, task list and links */
.card.is-open { grid-column: 1 / -1; background: var(--panel-2); border-color: var(--border-strong); cursor: default; }
.card-body { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 9px; }
.card-body .card-foot { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border); }

/* ============================================================
   Card v4: tasks always visible, gate says what it means
   ============================================================ */
.card { cursor: default; }
.card.is-open { grid-column: auto; background: var(--panel); border-color: var(--border); }
.card-body { margin-top: 8px; border-top: 0; padding-top: 0; }
.card-body .card-foot { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); }

/* the gate chip carries the gate's meaning as its tooltip and is always visible */
.card-gate {
  opacity: 1; cursor: pointer; font-family: var(--font-body); font-size: 10px;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--muted);
  border-radius: 5px; padding: 2px 8px; white-space: nowrap; flex: 0 0 auto;
}
.card-gate:hover { color: var(--text); border-color: var(--border-strong); }

/* real link labels */
.card-links-mini { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.card-links-mini .lk {
  width: auto; height: auto; padding: 2px 7px; font-family: var(--font-body);
  font-size: 10px; font-weight: 400; border-radius: 5px;
  max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* band header states the gate's meaning, not just its name */
.band-head { flex-wrap: wrap; row-gap: 2px; }
.band-desc { font-size: 11.5px; color: var(--muted-2); font-weight: 400; }

/* ============================================================
   Card v5: one shape, one hierarchy, colour doing real work
   ============================================================ */
/* 8. the gate's colour on the left edge, so a glance down a column reads */
.card { border-left: 3px solid var(--card-color); padding: 12px 14px; }

/* 7. a real typographic jump: name, then task, then meta */
.card-name { font-size: 16px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; }
.card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.card-meta { margin: 0 0 8px; min-height: 0; }
.cm-counts { font-size: 11.5px; color: var(--muted-2); }
.task-text { font-size: 13px; line-height: 1.45; color: var(--text); }
.task-meta { padding: 2px 0 0 24px; gap: 5px; }
.task-meta > * { font-size: 10px; }

/* 4. chips stop shouting: one quiet treatment, no borders competing with content */
.task-owner, .task-subcount, .task-due, .task-due-set {
  background: transparent; border: 0; color: var(--muted-2);
  font-size: 10px; padding: 1px 0; margin-right: 6px;
}
.task-owner:hover, .task-subcount:hover, .task-due:hover { color: var(--text); }

/* 9. waiting encoded once: a small word, nothing else */
.task.is-waiting { opacity: 1; }
.task.is-waiting .task-text { font-style: normal; color: var(--muted); }
.task-waiting-toggle { background: transparent; border: 0; color: var(--waiting); font-size: 10px; padding: 1px 0; }
.task-waiting-toggle svg { display: none; }

/* 6. tighter rows, less dead space in thin cards */
.task-item { padding-bottom: 4px; }
.task-list { display: flex; flex-direction: column; gap: 2px; }
.card-body { margin-top: 0; }
.task-quickadd { margin-top: 6px; font-size: 11.5px; }

/* 1. links live in a quiet footer, never on the name line */
.card-foot { display: flex; align-items: center; gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border); }
.card-links-mini { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 5px; }
.card-links-mini .lk {
  background: transparent; border: 0; color: var(--muted-2); font-size: 10.5px;
  padding: 0; text-decoration: none; max-width: 18ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.card-links-mini .lk:hover { color: var(--accent); text-decoration: underline; }
.card-links-mini .lk::after { content: " ↗"; opacity: 0.5; }
.card-menu {
  flex: 0 0 auto; background: transparent; border: 0; color: var(--muted-2);
  font-size: 14px; line-height: 1; cursor: pointer; padding: 0 3px; border-radius: 4px;
}
.card-menu:hover { color: var(--text); background: var(--panel-2); }

/* priority reads as the only loud thing on a card */
.card-head .card-prio { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; border-radius: 4px; padding: 2px 6px; }
.card-stale { margin-left: auto; }

/* board reclaims the panel's third of the screen */
.layout, .board-wrap { display: block; }

/* ============================================================
   PRODUCT ROADMAP — list and detail
   Colour story is the engineering roadmap's: slate -> amber -> emerald,
   one hue per phase, shades within a phase showing progression.
   Phase colour always arrives as --p, stage colour as --s. No hardcoded
   status hex below this line.
   ============================================================ */

.board.is-list,
.board.is-detail { display: block; max-width: 1100px; margin: 0 auto; padding: 22px 24px 90px; }

.empty-state { text-align: center; color: var(--muted-2); padding: 70px 20px; }
.empty-state h2 { font-size: 17px; color: var(--text); margin: 0 0 6px; }

/* ---------- phase tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 30px; }
.tile {
  text-align: left; cursor: pointer; font: inherit;
  background: var(--bg-2); border: 1px solid var(--border);
  border-left: 4px solid var(--p); border-radius: var(--radius);
  padding: 14px 16px; display: grid; gap: 2px; transition: border-color .12s, box-shadow .12s;
}
.tile:hover { border-color: var(--border-strong); border-left-color: var(--p); }
.tile.is-on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--p) 32%, transparent); }
.tile-n { font-size: 27px; font-weight: 700; line-height: 1.1; color: var(--p); }
.tile-l { font-size: 13px; font-weight: 650; color: var(--text); }
.tile-d { font-size: 11.5px; color: var(--muted-2); line-height: 1.4; }

/* ---------- grouped list ---------- */
.grp { margin-bottom: 30px; }
.grp-head {
  display: flex; align-items: center; gap: 9px; margin: 0 0 11px;
  font-size: 11px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase;
  color: var(--muted);
}
.grp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--p, var(--muted-2)); }
.grp-n {
  font-size: 10.5px; color: var(--muted-2); background: var(--bg-3);
  border-radius: 999px; padding: 1px 7px; letter-spacing: 0;
}
.rows { display: grid; gap: 10px; }

/* ---------- one product ---------- */
.prow {
  background: var(--bg-2); border: 1px solid var(--border);
  border-left: 4px solid var(--s); border-radius: var(--radius);
  padding: 14px 16px; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.prow:hover { border-color: var(--border-strong); box-shadow: 0 1px 3px rgba(15,23,42,.07); }
.pr-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; }
.card-name { margin: 0; font-size: 15.5px; font-weight: 650; color: var(--text); }
.pr-owner { margin-left: auto; font-size: 12px; color: var(--muted-2); }

.chip {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 9px; white-space: nowrap; border: 1px solid;
}
.chip.ph-shaping  { background:#f1f5f9; color:#334155; border-color:#cbd5e1; }
.chip.ph-building { background:#fef3c7; color:#92400e; border-color:#fcd34d; }
.chip.ph-live     { background:#d1fae5; color:#065f46; border-color:#6ee7b7; }
.chip.ph-outside  { background:#f3f4f6; color:#4b5563; border-color:#d1d5db; }

.prio { font-size:10px; font-weight:700; border-radius:4px; padding:2px 5px; border:1px solid; }
.prio.is-p1 { background:#fee2e2; color:#991b1b; border-color:#fca5a5; }
.prio.is-p2 { background:#ffedd5; color:#9a3412; border-color:#fdba74; }
.prio.is-p3 { background:#f1f5f9; color:#475569; border-color:#cbd5e1; }
.stale { font-size:10.5px; color:#92400e; background:#fef3c7; border:1px solid #fcd34d;
         border-radius:4px; padding:2px 6px; }

.pr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pr-cell { min-width: 0; }
.pr-lbl {
  display:block; font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:5px;
}
.pr-val { display:block; font-size:13px; color:var(--text); line-height:1.45;
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pr-sub { display:block; font-size:11.5px; color:var(--muted-2); margin-top:2px; }
.pr-sub .late { color:#b91c1c; }
.pr-dim { color: var(--muted-2); }
.bar { height:5px; border-radius:999px; background:var(--bg-3); overflow:hidden; margin-bottom:5px; }
.bar > span { display:block; height:100%; background:var(--s); border-radius:999px; }

.pr-foot { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
           margin-top:12px; padding-top:11px; border-top:1px solid var(--border); }
.lk { font-size:12px; color:var(--accent); text-decoration:none; }
.lk:hover { text-decoration:underline; }
.pr-counts { font-size:11.5px; color:var(--muted-2); margin-left:auto; }
.pr-go { font:inherit; font-size:12px; font-weight:600; color:var(--accent);
         background:none; border:0; cursor:pointer; padding:0; }
.pr-go:hover { text-decoration:underline; }

/* ---------- detail ---------- */
.dhead { margin-bottom: 22px; }
.crumb { background:none; border:0; padding:0; font:inherit; font-size:12.5px;
         color:var(--muted); cursor:pointer; margin-bottom:12px; }
.crumb:hover { color: var(--accent); }
.dtop { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dtitle { margin:0; font-size:26px; font-weight:680; letter-spacing:-.015em;
          color:var(--text); outline:none; border-radius:5px; }
.dtitle:focus { box-shadow:0 0 0 2px var(--accent-soft); }
.dmeta { display:flex; gap:16px; flex-wrap:wrap; margin-top:8px;
         font-size:12.5px; color:var(--muted-2); }
.dmeta a { color: var(--accent); text-decoration:none; }
.dmeta a:hover { text-decoration:underline; }

.dcols { display:grid; grid-template-columns:264px 1fr; gap:20px; align-items:start; }

/* left rail: phases, one open */
.pnav { display:grid; gap:8px; }
.ph { border:1px solid var(--border); border-left:4px solid var(--p, var(--border-strong));
      border-radius:var(--radius); background:var(--bg-2); overflow:hidden; }
.ph.is-done { background: var(--bg); }
.ph.is-todo { border-left-color: var(--border-strong); }
.ph-head { width:100%; display:flex; align-items:center; gap:8px; padding:11px 13px;
           background:none; border:0; font:inherit; cursor:pointer; text-align:left; }
.ph-head:hover { background: var(--bg-3); }
.ph-mark { width:16px; font-size:12px; font-weight:800; color:var(--p); }
.ph-name { font-size:13px; font-weight:650; color:var(--text); }
.ph.is-todo .ph-name { color: var(--muted); }
.ph-count { margin-left:auto; font-size:11px; color:var(--muted-2);
            background:var(--bg-3); border-radius:999px; padding:1px 7px; }
.ph-body { display:none; padding:0 9px 9px; }
.ph.is-open .ph-body { display:block; }
.ph-desc { margin:0 4px 8px; font-size:11.5px; line-height:1.45; color:var(--muted-2); }

.stg { width:100%; display:flex; align-items:center; gap:9px; padding:7px 9px;
       background:none; border:0; border-radius:7px; font:inherit; cursor:pointer; text-align:left; }
.stg:hover { background: var(--bg-3); }
.stg.is-sel { background: var(--accent-soft); }
.stg-mark { width:11px; height:11px; border-radius:50%; flex:0 0 auto;
            border:2px solid var(--border-strong); background:var(--bg-2); }
.stg.is-done .stg-mark { background:var(--s); border-color:var(--s); }
.stg.is-now  .stg-mark { background:var(--s); border-color:var(--s);
            box-shadow:0 0 0 3px color-mix(in srgb, var(--s) 25%, transparent); }
.stg.is-skip .stg-mark { background:var(--bg-3); border-style:dashed; }
.stg-name { font-size:12.5px; color:var(--text); }
.stg.is-now  .stg-name { font-weight:680; }
.stg.is-todo .stg-name,
.stg.is-skip .stg-name { color:var(--muted-2); }
.stg.is-skip .stg-name { text-decoration:line-through; }
.stg-prog { margin-left:auto; font-size:10.5px; color:var(--muted-2); }
.ph-tasks { border-left-color: var(--accent); margin-top:4px; }

/* right: the stage itself */
.spanel { border:1px solid var(--border); border-top:3px solid var(--s, var(--accent));
          border-radius:var(--radius); background:var(--bg-2); padding:20px 22px 22px; }
.sp-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.sp-head h2 { margin:0; font-size:18px; font-weight:670; color:var(--text); }
.rel { font-size:11px; font-weight:650; border-radius:999px; padding:3px 9px; border:1px solid;
       background:var(--bg-3); color:var(--muted); border-color:var(--border); }
.rel-now  { background:#fef3c7; color:#92400e; border-color:#fcd34d; }
.rel-done { background:#d1fae5; color:#065f46; border-color:#6ee7b7; }
.rel-skip { background:#f3f4f6; color:#6b7280; border-color:#d1d5db; }
.sp-desc { margin:0 0 20px; font-size:13.5px; line-height:1.6; color:var(--muted);
           border-left:2px solid var(--s); padding-left:12px; }

.lbl { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
       color:var(--muted-2); margin:0 0 8px; }

.ck { list-style:none; margin:0 0 8px; padding:0; display:grid; gap:1px; }
.ck-row { display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:7px; }
.ck-row:hover { background: var(--bg); }
.ck-main { display:flex; align-items:center; gap:9px; flex:1; min-width:0; cursor:pointer; }
.ck-main input[type="checkbox"] { width:16px; height:16px; flex:0 0 auto;
       accent-color:var(--accent); cursor:pointer; margin:0; }
.ck-text { font-size:13.5px; color:var(--text); outline:none; border-radius:4px; }
.ck-text:focus { box-shadow:0 0 0 2px var(--accent-soft); }
.ck-row.is-done .ck-text { color:var(--muted-2); text-decoration:line-through; }
.ck-link { font-size:11.5px; color:var(--accent); text-decoration:none; white-space:nowrap; }
.ck-link:hover { text-decoration:underline; }
.ck-btn, .ck-x { background:none; border:0; font:inherit; cursor:pointer; padding:2px 4px;
                 font-size:11.5px; color:var(--muted-2); opacity:0; transition:opacity .1s; }
.ck-row:hover .ck-btn, .ck-row:hover .ck-x { opacity:1; }
.ck-btn:hover { color:var(--accent); }
.ck-x:hover { color:var(--danger); }
.ck-x { font-size:15px; line-height:1; }
.ck-empty { font-size:13px; color:var(--muted-2); padding:6px 9px; }
.ck-add { background:none; border:0; font:inherit; font-size:12.5px; color:var(--accent);
          cursor:pointer; padding:4px 9px; margin-bottom:20px; }
.ck-add:hover { text-decoration:underline; }

.ta, .in {
  width:100%; box-sizing:border-box; background:var(--bg-2); color:var(--text);
  border:1px solid var(--border-strong); border-radius:7px; padding:9px 11px;
  font:inherit; font-size:13.5px; line-height:1.55;
}
.ta { resize:vertical; margin-bottom:18px; }
.ta:focus, .in:focus { outline:none; border-color:var(--accent);
                       box-shadow:0 0 0 3px var(--accent-soft); }
.quick { margin-top:12px; border-style:dashed; }

.signoff { font-size:12px; color:var(--muted-2); margin:0 0 16px; }
.sp-actions { display:flex; gap:9px; flex-wrap:wrap; padding-top:16px;
              border-top:1px solid var(--border); }
.btn-quiet { color:var(--muted-2); border-color:var(--border); background:transparent; }
.btn-quiet:hover { color:var(--text); }

@media (max-width: 860px) {
  .dcols { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .pr-grid { grid-template-columns: 1fr; gap: 12px; }
  .board.is-list, .board.is-detail { padding: 16px 14px 70px; }
}

/* ---------- top bar: white, like the engineering roadmap, badged as product ---------- */
.topbar {
  background: var(--bg-2); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
}
.brand-text { display: flex; align-items: center; gap: 10px; }
.brand-text h1 { font-size: 16px; font-weight: 700; color: var(--text); margin: 0; letter-spacing: -.01em; }
/* The two roadmaps look alike on purpose, so say which one this is. */
.brand-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: #065f46; background: #d1fae5; border: 1px solid #6ee7b7;
  border-radius: 999px; padding: 2px 8px;
}
.meta-pill { background: var(--bg-3); color: var(--muted); border: 1px solid var(--border); }
.controlbar { background: var(--bg-2); border-bottom: 1px solid var(--border); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: #115e56; border-color: #115e56; }

.bar { background: #e8edf3; box-shadow: inset 0 0 0 1px rgba(15,23,42,.04); }
.spanel.is-tasks { border-top-color: var(--accent); }
.done-toggle {
  margin-top: 16px; background: none; border: 0; font: inherit; font-size: 12.5px;
  color: var(--muted-2); cursor: pointer; padding: 4px 0;
}
.done-toggle:hover { color: var(--accent); }
.done-list { margin-top: 6px; opacity: .62; }

/* ============================================================
   Two meanings for colour, and only two:
   phase colour says WHERE a product is, red says something is WRONG.
   Nothing else is coloured, so both stay loud.
   ============================================================ */

.tile { border-left-width: 6px; }
.tile.is-on { background: color-mix(in srgb, var(--p) 9%, #fff); }

/* group heading becomes a filled band, so phase reads before any word does */
.grp-head {
  background: color-mix(in srgb, var(--p, #64748b) 13%, #fff);
  border: 1px solid color-mix(in srgb, var(--p, #64748b) 30%, #fff);
  border-left: 6px solid var(--p, #64748b);
  border-radius: 8px; padding: 9px 13px; margin-bottom: 12px;
  color: color-mix(in srgb, var(--p, #64748b) 72%, #000); font-size: 11.5px;
}
.grp-dot { display: none; }
.grp-n { background: #fff; border: 1px solid color-mix(in srgb, var(--p) 28%, #fff); }
.prow { border-left-width: 6px; }

/* stage chip: solid, not a pale wash */
.chip.ph-shaping  { background:#475569; color:#fff; border-color:#475569; }
.chip.ph-building { background:#b45309; color:#fff; border-color:#b45309; }
.chip.ph-live     { background:#047857; color:#fff; border-color:#047857; }
.chip.ph-outside  { background:#e5e7eb; color:#4b5563; border-color:#d1d5db; }

/* trouble */
.stale { background:#dc2626; color:#fff; border-color:#dc2626; font-weight:700; }
.pr-sub .late { color:#dc2626; font-weight:700; }
.stg-gap {
  margin-left:auto; font-size:10.5px; font-weight:700; color:#fff;
  background:#dc2626; border-radius:999px; padding:1px 7px;
}

/* ---------- typed checklist rows ---------- */
.ck-row { display:block; padding:9px 10px; border-radius:8px; }
.ck-row + .ck-row { border-top:1px solid var(--border); }
.ck-line { display:flex; align-items:center; gap:9px; }
.ck-box { width:17px; height:17px; flex:0 0 auto; accent-color:var(--accent); cursor:pointer; margin:0; }
.ck-text { flex:1; font-size:13.5px; }
.ck-row.is-skip .ck-text { color:var(--muted-2); text-decoration:line-through; }
.tag-skip {
  font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#6b7280; background:#f3f4f6; border:1px solid #d1d5db;
  border-radius:999px; padding:1px 7px;
}
.ck-ans { margin:6px 0 0 26px; display:flex; align-items:center; gap:9px; }
.ans {
  flex:1; max-width:420px; font:inherit; font-size:13px;
  background:var(--bg); color:var(--text);
  border:1px solid var(--border-strong); border-radius:6px; padding:6px 9px;
}
.ans:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:#fff; }
.ck-row.is-done .ans { background:#fff; border-color:var(--border); }
.ck-open { font-size:11.5px; color:var(--accent); text-decoration:none; white-space:nowrap; }
.ck-open:hover { text-decoration:underline; }
.ck-row.is-done .ck-text { text-decoration:none; color:var(--text); }

/* ---------- collapsible groups ---------- */
.grp-head { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 9px; }
.grp-caret { font-size: 10px; opacity: .7; }
.grp-desc {
  font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 11.5px;
  color: color-mix(in srgb, var(--p, #64748b) 62%, #000); opacity: .85;
  margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grp.is-shut { margin-bottom: 10px; }

/* ---------- card edit affordance ---------- */
.pr-edit {
  font: inherit; font-size: 12px; color: var(--muted-2);
  background: none; border: 0; cursor: pointer; padding: 0;
}
.pr-edit:hover { color: var(--accent); text-decoration: underline; }
.pr-next { outline: none; border-radius: 4px; cursor: text; }
.pr-next:hover { background: var(--bg-3); }
.pr-next:focus { background: #fff; box-shadow: 0 0 0 2px var(--accent-soft); white-space: normal; }
.downer { outline: none; border-radius: 4px; cursor: text; }
.downer:hover { background: var(--bg-3); }
.downer:focus { box-shadow: 0 0 0 2px var(--accent-soft); }
.downer:empty::before { content: attr(data-empty); color: var(--muted-2); font-weight: 400; }

/* ---------- all tasks ---------- */
.board.is-tasks { display: block; max-width: 900px; margin: 0 auto; padding: 22px 24px 90px; }
.tasks-head { margin-bottom: 22px; }
.seg { display: inline-flex; gap: 2px; margin-top: 14px; background: var(--bg-3);
       border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.seg-b { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted);
         background: none; border: 0; border-radius: 6px; padding: 6px 14px; cursor: pointer; }
.seg-b:hover { color: var(--text); }
.seg-b.is-on { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(15,23,42,.08); }

.tgrp { margin-bottom: 22px; }
.tgrp-head {
  display: flex; align-items: center; gap: 9px; margin: 0 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase;
  color: var(--muted);
}
.tgrp.is-late .tgrp-head { color: #dc2626; }
.tlist { list-style: none; margin: 0; padding: 0;
         border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-2); }
.trow { display: flex; align-items: center; gap: 11px; padding: 10px 14px; }
.trow + .trow { border-top: 1px solid var(--border); }
.trow:hover { background: var(--bg); }
.tbox { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; margin: 0; }
.ttext { flex: 1; font-size: 13.5px; color: var(--text); min-width: 0; }
.trow.is-wait .ttext { color: var(--muted); }
.tprod { font: inherit; font-size: 11.5px; color: var(--accent); background: none;
         border: 0; cursor: pointer; padding: 0; white-space: nowrap; }
.tprod:hover { text-decoration: underline; }
.towner { font-size: 11.5px; color: var(--muted-2); white-space: nowrap; }
.tdue { font-size: 11.5px; color: var(--muted-2); white-space: nowrap; min-width: 62px; text-align: right; }
.tdue.is-late { color: #dc2626; font-weight: 700; }

/* ---------- meeting notes ---------- */
.spanel.is-notes { border-top-color: #7c3aed; }
.mlist { display: grid; gap: 10px; margin-bottom: 18px; }
.mnote { border: 1px solid var(--border); border-radius: 9px; padding: 12px 14px; background: var(--bg); }
.mn-top { display: flex; align-items: center; gap: 10px; }
.mn-date { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted-2);
           background: var(--bg-3); border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
.mn-title { font-size: 13.5px; font-weight: 650; color: var(--text); flex: 1; }
.mn-link { font-size: 12px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.mn-link:hover { text-decoration: underline; }
.mn-x { background: none; border: 0; font-size: 16px; line-height: 1; color: var(--muted-2);
        cursor: pointer; padding: 0 2px; }
.mn-x:hover { color: var(--danger); }
.mn-sum { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.mn-dec { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.m-add { display: grid; grid-template-columns: 150px 1fr 1fr auto; gap: 8px; align-items: center; }
@media (max-width: 700px) { .m-add { grid-template-columns: 1fr; } }

/* ---------- proposals ---------- */
#inboxBtn.has-new {
  color: #fff; background: #7c3aed; border-color: #7c3aed; font-weight: 650;
}
#inboxBtn.has-new:hover { background: #6d28d9; border-color: #6d28d9; }
.prow-p { display: flex; align-items: flex-start; gap: 14px; padding: 13px 15px; }
.prow-p + .prow-p { border-top: 1px solid var(--border); }
.pp-main { flex: 1; min-width: 0; }
.pp-line { font-size: 13.5px; color: var(--text); line-height: 1.5; }
.pp-line b { font-weight: 650; }
.pp-stage {
  display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px;
}
.pp-why { margin: 7px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.pp-from { display: block; margin-top: 7px; font-size: 11px; color: var(--muted-2); }
.pp-act { display: flex; gap: 7px; flex: 0 0 auto; }
.pp-act .btn { font-size: 12.5px; padding: 6px 12px; }

/* ============================================================
   TIGHTER: two products per row, and every stage its own shade.
   The chip now carries its position, so "Blueprint" also says 3/11
   and nobody has to count.
   ============================================================ */

.rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 10px; }
@media (max-width: 820px) { .rows { grid-template-columns: 1fr; } }

.prow { padding: 11px 13px; border-left-width: 5px; }
.pr-top { gap: 7px; margin-bottom: 9px; }
.card-name { font-size: 14.5px; }
.pr-owner { font-size: 11.5px; }

/* stacked inside a narrower card, and quieter labels */
.pr-grid { grid-template-columns: 1fr; gap: 9px; }
.pr-lbl { font-size: 9.5px; margin-bottom: 3px; }
.pr-val { font-size: 12.5px; }
.pr-sub { font-size: 11px; }
.bar { height: 4px; margin-bottom: 4px; }
.pr-foot { margin-top: 9px; padding-top: 8px; gap: 9px; }
.pr-foot .lk { font-size: 11.5px; }
.pr-counts, .pr-edit, .pr-go { font-size: 11.5px; }

/* one chip style, coloured by the stage itself rather than by phase */
.chip {
  background: var(--c, #94a3b8); color: #fff; border-color: var(--c, #94a3b8);
  display: inline-flex; align-items: baseline; gap: 5px;
}
.chip i {
  font-style: normal; font-weight: 600; font-size: 9.5px;
  opacity: .78; letter-spacing: 0;
}
/* readable text on the pale end of each family */
.chip[style*="#93c5fd"], .chip[style*="#fcd34d"], .chip[style*="#cbd5e1"] { color: #1e293b; }

.stg-pos { font-size: 9.5px; color: var(--muted-2); opacity: .8; margin-left: 4px; }
.sp-pos {
  font-size: 11px; font-weight: 700; color: var(--muted-2);
  background: var(--bg-3); border-radius: 999px; padding: 2px 8px;
}
.ttext { outline: none; border-radius: 4px; cursor: text; }
.ttext:hover { background: var(--bg-3); }
.ttext:focus { background: #fff; box-shadow: 0 0 0 2px var(--accent-soft); }

/* ============================================================
   RESTRAINT PASS
   The previous look failed because saturated blue/orange/green were
   doing decorative work over large areas. Here colour is muted,
   tonally related, and confined to thin rules, dots and meter fills.
   Type carries the hierarchy. Near-black carries the actions.
   ============================================================ */

:root {
  --ink: #16181b;
  --accent: #3A4F5C;              /* steel: interactive, never severity */
  --accent-soft: rgba(58, 79, 92, 0.10);
  --danger: #a8332f;              /* deep, not fire-engine */
  --border: #e6e7e9;
  --border-strong: #d3d6d9;
  --text: #16181b;
  --muted: #52585f;
  --muted-2: #7c828a;
  --bg: #fbfbfc;
  --bg-2: #ffffff;
  --bg-3: #f2f3f4;
  --radius: 7px;
  --radius-sm: 5px;
}

/* ---- type scale: five sizes, weight does the rest ---- */
body { font-family: var(--font-body); color: var(--text);
       -webkit-font-smoothing: antialiased; }
.brand-text h1 { font-size: 14.5px; font-weight: 600; letter-spacing: -.006em; }
.brand-tag {
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--muted-2); font-size: 9.5px; font-weight: 600; letter-spacing: .08em;
}
.dtitle { font-size: 23px; font-weight: 620; letter-spacing: -.018em; }
.card-name { font-size: 13.5px; font-weight: 600; letter-spacing: -.004em; }
.pr-lbl, .grp-head, .tgrp-head, .lbl, .panel-kicker {
  font-size: 9.5px; font-weight: 650; letter-spacing: .075em;
}
.pr-val, .ttext, .ck-text { font-size: 12.5px; }
.pr-sub, .pr-counts, .pr-owner, .towner, .tdue, .stg-prog { font-size: 11px; }
.tile-n, .grp-n, .ph-count, .chip i { font-variant-numeric: tabular-nums; }

/* ---- colour only on thin rules and small marks ---- */
.tile { border-left-width: 3px; border-radius: var(--radius); }
.tile-n { font-size: 24px; font-weight: 620; color: var(--ink); }
.tile-l { font-size: 12px; font-weight: 600; }
.tile-d { font-size: 11px; }
.tile.is-on { background: var(--bg-3); box-shadow: none; border-color: var(--border-strong); }

/* group heading: a rule and a label, not a filled band */
.grp-head {
  background: transparent; border: 0; border-left: 3px solid var(--p, var(--border-strong));
  border-radius: 0; padding: 2px 0 2px 10px; margin-bottom: 10px;
  color: var(--muted);
}
.grp-n { background: var(--bg-3); border: 0; color: var(--muted-2); }
.grp-desc { color: var(--muted-2); opacity: 1; }

.prow { border-left-width: 3px; border-radius: var(--radius); }
.prow:hover { box-shadow: none; border-color: var(--border-strong); }

/* chip: tinted, not filled. Dark text so it reads at any hue. */
.chip {
  background: color-mix(in srgb, var(--c, #7c828a) 11%, #fff) !important;
  color: color-mix(in srgb, var(--c, #7c828a) 74%, #000) !important;
  border: 1px solid color-mix(in srgb, var(--c, #7c828a) 26%, #fff) !important;
  font-size: 9.5px; font-weight: 650; letter-spacing: .06em; padding: 2.5px 8px;
}
.chip i { opacity: .62; font-size: 9px; }
.bar > span { background: var(--s); opacity: .75; }
.bar { background: var(--bg-3); box-shadow: none; }

/* actions are near-black, the way real product software does it */
.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; border-color: #000; }
.lk, .pr-go, .pr-edit:hover, .tprod, .ck-open, .dmeta a, .crumb:hover { color: var(--accent); }

/* trouble: deep red, and only for trouble */
.stale { background: transparent; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 32%, #fff); font-weight: 650; }
.stg-gap { background: transparent; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 32%, #fff); }
.pr-sub .late, .tdue.is-late { color: var(--danger); }
.rel-now  { background:#fdf6ec; color:#7a5320; border-color:#e8d5b5; }
.rel-done { background:#eef4f1; color:#3f6b58; border-color:#cfe0d8; }
.rel-skip { background:var(--bg-3); color:var(--muted-2); border-color:var(--border); }

/* left rail + panels: quieter */
.ph { border-left-width: 3px; border-radius: var(--radius); }
.spanel { border-top-width: 2px; border-radius: var(--radius); }
.sp-head h2 { font-size: 16px; font-weight: 620; letter-spacing: -.012em; }
.sp-desc { border-left-width: 2px; font-size: 12.5px; }
.seg-b.is-on { box-shadow: none; border: 1px solid var(--border-strong); }

/* ============================================================
   DENSITY PASS
   Answers were truncated, fields used a third of the width, an empty
   notes box was the biggest thing on screen, and the header pushed
   content 330px down. All of that is fixed here.
   ============================================================ */

/* 7. reclaim the top of the page */
.board.is-list, .board.is-detail, .board.is-tasks { padding-top: 14px; }
.dhead { margin-bottom: 16px; }
.crumb { margin-bottom: 7px; }
.dmeta { margin-top: 5px; }
.tiles { margin-bottom: 20px; }

/* phase tiles now carry their stages, in pipeline order */
.tile { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.tile-top {
  display: grid; gap: 1px; text-align: left; font: inherit; cursor: pointer;
  background: none; border: 0; padding: 12px 14px 10px;
}
.tile-top:hover { background: var(--bg-3); }
.tstages { border-top: 1px solid var(--border); padding: 5px 6px 6px; display: grid; gap: 1px; }
.tstage {
  display: flex; align-items: center; gap: 7px; width: 100%;
  font: inherit; font-size: 11px; color: var(--muted);
  background: none; border: 0; border-radius: 5px; padding: 3px 8px;
  cursor: pointer; text-align: left;
}
.tstage:hover { background: var(--bg-3); color: var(--text); }
.tstage.is-on { background: var(--bg-3); color: var(--text); font-weight: 600; }
.tstage i { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.tstage span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tstage b { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text); }
.tstage.is-zero { color: var(--muted-2); opacity: .55; }
.tstage.is-zero b { color: var(--muted-2); font-weight: 400; }

/* 2. rail: an ordinal, not a second fraction */
.stg-ord {
  font-size: 9.5px; font-variant-numeric: tabular-nums; color: var(--muted-2);
  opacity: .7; width: 15px; flex: 0 0 auto;
}
.stg-pos { display: none; }

/* 3+5. one row per question: label left, answer right, full width */
.ck { gap: 0; }
.ck-row {
  display: grid; grid-template-columns: 17px minmax(140px, 200px) 1fr auto;
  align-items: start; gap: 10px; padding: 7px 8px;
}
.ck-box { margin-top: 2px; }
.ck-text { align-self: center; }
.ck-field { min-width: 0; display: flex; align-items: center; gap: 8px; }
.ck-field .ans { width: 100%; max-width: none; }
.ck-acts { display: flex; gap: 2px; align-self: center; }
.ck-ans { display: none; }
textarea.ans {
  resize: none; overflow: hidden; line-height: 1.45; min-height: 30px;
  font-family: var(--font-body);
}

/* 9. an answered row should look answered */
.ck-row.is-done { background: color-mix(in srgb, var(--accent) 3%, #fff); }
.ck-row.is-done .ans { border-color: var(--border); background: #fff; color: var(--muted); }
.ck-row.is-done .ck-text { font-weight: 550; }

/* 4. notes stay out of the way until wanted */
.notes { margin: 16px 0 0; border-top: 1px solid var(--border); padding-top: 12px; }
.notes > summary {
  cursor: pointer; list-style: none; font-size: 9.5px; font-weight: 650;
  letter-spacing: .075em; text-transform: uppercase; color: var(--muted-2);
}
.notes > summary::-webkit-details-marker { display: none; }
.notes > summary::before { content: "▸ "; font-size: 8px; }
.notes[open] > summary::before { content: "▾ "; }
.notes > summary:hover { color: var(--text); }
.notes .ta { margin: 9px 0 0; }

/* 10. actions sit right under the content, not floating below a gap */
.sp-actions { margin-top: 16px; padding-top: 14px; }
.spanel { padding: 16px 18px 18px; }

/* owner should look like the editable field it is */
.downer { border-bottom: 1px dashed var(--border-strong); padding-bottom: 1px; }

/* tasks and meeting notes are not phases */
.ph-tasks, .ph.is-notes-nav { border-left-color: var(--border-strong); background: var(--bg); }
.pnav > .ph-tasks { margin-top: 10px; }

@media (max-width: 900px) {
  .ck-row { grid-template-columns: 17px 1fr; }
  .ck-field { grid-column: 2; }
  .ck-acts { grid-column: 2; }
}

/* ============================================================
   ALL TASKS — every field editable in place.
   Date, owner and waiting used to be read-only text, and ticking a
   box re-rendered the page so the list moved under the cursor.
   ============================================================ */

.board.is-tasks { max-width: 1100px; }
.tasks-head { margin-bottom: 16px; }
.tgrp { margin-bottom: 16px; }

.trow {
  display: grid;
  grid-template-columns: 17px 1fr auto auto auto auto;
  align-items: center; gap: 10px; padding: 6px 12px;
}
.trow.is-done { opacity: .45; }
.trow.is-done .ttext { text-decoration: line-through; }
.ttext { padding: 2px 4px; margin-left: -4px; }

/* every one of these is a control, so it has to look like one */
.towner, .twait, .tdue {
  font: inherit; font-size: 11px; background: none; cursor: pointer;
  border: 1px solid transparent; border-radius: 5px; padding: 2px 7px;
  color: var(--muted-2); white-space: nowrap;
}
.towner { min-width: 62px; text-align: right; }
.towner:empty::before { content: attr(data-empty); opacity: .6; }
.towner:hover, .twait:hover, .tdue:hover { border-color: var(--border-strong); color: var(--text); }
.towner:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.twait { opacity: 0; }
.trow:hover .twait, .twait.is-on { opacity: 1; }
.twait.is-on {
  color: var(--muted); background: var(--bg-3); border-color: var(--border-strong);
  font-weight: 600;
}
.tdue { min-width: 58px; text-align: right; font-variant-numeric: tabular-nums; }
.tdue.is-empty { opacity: 0; }
.trow:hover .tdue.is-empty { opacity: .7; }
.tdue.is-late { color: var(--danger); font-weight: 650; border-color: color-mix(in srgb, var(--danger) 22%, #fff); }
.tprod { font-size: 11px; }

@media (max-width: 760px) {
  .trow { grid-template-columns: 17px 1fr auto; row-gap: 4px; }
  .trow > .towner, .trow > .twait, .trow > .tdue { grid-row: 2; }
}

/* A disabled Approve has to look disabled, or it reads as a dead button. */
.btn:disabled, .btn-primary:disabled {
  background: var(--bg-3); color: var(--muted-2); border-color: var(--border);
  cursor: not-allowed; box-shadow: none;
}
.btn-primary:disabled:hover { background: var(--bg-3); border-color: var(--border); }
.blocked { font-size: 11.5px; color: var(--muted-2); align-self: center; }

/* ============================================================
   ALL TASKS v2 — shared column grid, headers, subtasks, bulk edit.
   Every row used to be its own grid with auto tracks, so the columns
   went ragged down the page. One template, used by header and rows.
   ============================================================ */

.tlist { overflow: visible; }
.titem { list-style: none; }
.titem + .titem { border-top: 1px solid var(--border); }

.trow {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 158px 84px 68px 64px 22px;
  align-items: center; gap: 10px; padding: 6px 12px;
}
.trow.thead {
  padding-top: 7px; padding-bottom: 7px;
  font-size: 9.5px; font-weight: 650; letter-spacing: .075em;
  text-transform: uppercase; color: var(--muted-2);
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.titem.is-head + .titem { border-top: 0; }
.trow.thead .th-due { text-align: right; }

.titem:not(.is-head):hover { background: var(--bg); }
.titem.is-sel { background: var(--accent-soft); }
.titem.is-sel .trow { box-shadow: inset 2px 0 0 var(--accent); }

/* a finished task stops advertising a due date and a waiting state */
.titem.is-done { opacity: .5; }
.titem.is-done .ttext { text-decoration: line-through; }
.titem.is-done .twait,
.titem.is-done .tdue.is-late { display: none; }
.titem.is-done .tdue { color: var(--muted-2); font-weight: 400; border-color: transparent; }

.tmain { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ttext { flex: 1; min-width: 0; }
.tsub-toggle, .tsub-gap {
  width: 14px; flex: 0 0 auto; background: none; border: 0; padding: 0;
  font-size: 9px; color: var(--muted-2); cursor: pointer; line-height: 1;
}
.tsub-toggle:hover { color: var(--text); }
.tsub-n {
  font-size: 10px; color: var(--muted-2); background: var(--bg-3);
  border-radius: 999px; padding: 1px 6px; flex: 0 0 auto;
}

.tprod {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font: inherit; font-size: 11px; color: var(--muted); background: none;
  border: 0; padding: 0; cursor: pointer; text-align: left;
}
.tprod i { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.tprod span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tprod:hover span { color: var(--accent); text-decoration: underline; }

/* "unassigned" on eleven rows was the widest thing in the column and said nothing */
.towner { min-width: 0; text-align: left; }
.towner:empty::before { content: ""; }
.titem:hover .towner:empty::before { content: "who"; opacity: .45; }

.tmore {
  background: none; border: 0; padding: 0; cursor: pointer; line-height: 1;
  font-size: 13px; color: var(--muted-2); opacity: 0;
}
.titem:hover .tmore { opacity: 1; }
.tmore:hover { color: var(--text); }

/* subtasks, expanded in place */
.tsubs { list-style: none; margin: 0 0 6px; padding: 0 0 0 56px; }
.tsub { display: flex; align-items: center; gap: 8px; padding: 3px 12px 3px 0; }
.tsub .sbox { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; margin: 0; }
.stext { font-size: 12px; color: var(--muted); outline: none; border-radius: 4px; padding: 1px 3px; }
.stext:hover { background: var(--bg-3); }
.stext:focus { background: #fff; box-shadow: 0 0 0 2px var(--accent-soft); }
.tsub.is-done .stext { text-decoration: line-through; opacity: .6; }
.sadd { font-size: 12px; padding: 4px 8px; border-style: dashed; max-width: 260px; }

/* overdue should read before you focus on it */
.tgrp.is-late .tlist { border-left: 3px solid var(--danger); }
.tgrp.is-undated .tlist { border-left: 3px solid var(--border-strong); }
.grp-act {
  font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--accent); background: none; border: 0;
  cursor: pointer; margin-left: auto; padding: 0;
}
.grp-act:hover { text-decoration: underline; }
.tgrp.is-donegrp { opacity: .85; }
.tgrp.is-donegrp .tgrp-head { color: var(--muted-2); }

/* bulk edit bar */
.bulkbar {
  position: sticky; bottom: 16px; z-index: 30;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 18px auto 0; width: fit-content;
  background: var(--ink); color: #fff; border-radius: 10px; padding: 8px 12px;
  box-shadow: 0 6px 20px rgba(15,23,42,.18);
}
.bulkbar .bulk-n { font-size: 12px; font-weight: 600; margin-right: 4px; }
.bulkbar .btn {
  background: rgba(255,255,255,.12); color: #fff; border-color: transparent;
  font-size: 12px; padding: 5px 10px;
}
.bulkbar .btn:hover { background: rgba(255,255,255,.22); }
.bulkbar .btn-quiet { background: none; color: rgba(255,255,255,.65); }

@media (max-width: 820px) {
  .trow { grid-template-columns: 22px minmax(0,1fr) auto; row-gap: 4px; }
  .trow.thead { display: none; }
  .trow > .towner, .trow > .twait, .trow > .tdue, .trow > .tmore { grid-row: 2; }
  .tsubs { padding-left: 34px; }
}

/* ============================================================
   DETAIL v2 — the current stage should be unmistakable, finished
   stages should read as finished, and controls should line up.
   ============================================================ */

/* current stage: filled, ringed, bold. Past: green tick. Future: hollow grey. */
.stg { position: relative; }
.stg.is-now {
  background: var(--bg-3);
  box-shadow: inset 2px 0 0 var(--s);
}
.stg.is-now .stg-name { font-weight: 680; color: var(--text); }
.stg.is-now .stg-ord { color: var(--text); opacity: 1; font-weight: 650; }
.stg.is-now .stg-mark {
  background: var(--s); border-color: var(--s);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--s) 26%, transparent);
}
.stg.is-done .stg-mark {
  background: #2f7d5d; border-color: #2f7d5d;
}
.stg.is-done .stg-mark::after {
  content: ""; position: absolute; left: 12px; top: 50%;
  width: 4px; height: 7px; margin-top: -5px;
  border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.stg.is-done .stg-name { color: var(--muted); }
.stg.is-todo .stg-mark { background: #fff; border-color: var(--border-strong); }
.stg.is-sel:not(.is-now) { background: var(--accent-soft); }

/* collapsed phases were 100px tall to show two digits */
.ph:not(.is-open) .ph-head { padding: 8px 12px; }
.ph-count { font-size: 10px; letter-spacing: 0; text-transform: none; }
.ph.is-done .ph-mark { color: #2f7d5d; }

/* checkbox column lines up with the ordinals and marks above it */
.ck-row { grid-template-columns: 18px minmax(120px, max-content) 1fr auto; }
.ck-box { margin-top: 0; align-self: center; }
.ck-text { align-self: center; }

/* a blocked Approve should not be the loudest thing on the page */
.sp-actions { align-items: center; }
.btn-primary:disabled { font-weight: 500; }
.blocked { order: -1; flex-basis: 100%; margin-bottom: 4px; color: var(--danger); }

/* links get their own row and can be edited here */
.dlinks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.dlink {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border); border-radius: 6px; padding: 2px 4px 2px 8px;
  font-size: 11.5px; background: var(--bg-2);
}
.dlink a { color: var(--accent); text-decoration: none; }
.dlink a:hover { text-decoration: underline; }
.dlink-x { background: none; border: 0; cursor: pointer; color: var(--muted-2);
           font-size: 13px; line-height: 1; padding: 0 2px; opacity: 0; }
.dlink:hover .dlink-x { opacity: 1; }
.dlink-x:hover { color: var(--danger); }
.dlink-add { background: none; border: 1px dashed var(--border-strong); border-radius: 6px;
             font: inherit; font-size: 11.5px; color: var(--muted-2); cursor: pointer; padding: 3px 9px; }
.dlink-add:hover { color: var(--accent); border-color: var(--accent); }
.dage { color: var(--muted-2); }

.ck-more { background: none; border: 0; cursor: pointer; color: var(--muted-2);
           font-size: 13px; line-height: 1; padding: 2px 4px; opacity: 0; }
.ck-row:hover .ck-more { opacity: 1; }
.ck-more:hover { color: var(--text); }
.ck-acts { gap: 8px; }

/* ---------- Paused / Blocked -------------------------------------------------
   A product keeps its stage while flagged; the flag says why it is not moving.
   Blocked is red because someone else has to act. Paused is neutral because it
   was a deliberate decision, not a problem. */
.flag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; padding: 2.5px 8px; border: 1px solid; white-space: nowrap;
}
.flag.is-blocked { color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, #fff);
                   border-color: color-mix(in srgb, var(--danger) 30%, #fff); }
.flag.is-paused  { color: var(--muted); background: var(--bg-3); border-color: var(--border-strong); }
.pr-flagline {
  font-size: 11.5px; color: var(--muted); margin: -4px 0 9px;
  padding-left: 9px; border-left: 2px solid var(--border-strong);
}
.prow:has(.flag.is-blocked) { border-left-color: var(--danger); }
.prow:has(.flag.is-paused) { opacity: .82; }

.dflag {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin: 10px 0 0; padding: 9px 12px; border-radius: var(--radius);
  font-size: 12.5px; color: var(--muted);
  border: 1px solid var(--border-strong); background: var(--bg-3);
}
.dflag.is-blocked { color: var(--danger); background: color-mix(in srgb, var(--danger) 5%, #fff);
                    border-color: color-mix(in srgb, var(--danger) 26%, #fff); }
.dflag b { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.dflag span { color: var(--muted-2); font-size: 11.5px; }
.flagbtn {
  font: inherit; font-size: 11px; color: var(--muted-2); background: none;
  border: 1px dashed var(--border-strong); border-radius: 6px; padding: 2px 8px; cursor: pointer;
}
.flagbtn:hover { color: var(--accent); border-color: var(--accent); }

/* ============================================================
   Attention folded into Tasks. Its three columns are filters here,
   so there is one list to learn instead of two.
   ============================================================ */
.tasks-head .seg-focus { margin-right: 8px; }

/* product and stage are editable on the row, not a link out */
.tprodwrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tdot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.tprod-sel, .tstage-sel {
  font: inherit; font-size: 11px; color: var(--muted);
  background: transparent; border: 1px solid transparent; border-radius: 5px;
  padding: 2px 4px; max-width: 100%; min-width: 0;
  text-overflow: ellipsis; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.tprod-sel { flex: 1 1 auto; }
.tstage-sel { flex: 0 0 auto; max-width: 84px; opacity: 0; }
.titem:hover .tstage-sel, .tstage-sel:focus { opacity: 1; }
.tprod-sel:hover, .tstage-sel:hover { border-color: var(--border-strong); color: var(--text); background: #fff; }
.tprod-sel:focus, .tstage-sel:focus {
  outline: none; border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 2px var(--accent-soft);
}