/* ---- design tokens ----------------------------------------------------- */
/* Default: dark theme. Switch to light by setting `data-theme="light"`     */
/* on <html>. All colors below reference these tokens so adding new themes  */
/* only requires overriding the variables.                                  */

:root {
  color-scheme: dark;

  /* surfaces */
  --color-bg: #010f14;
  --color-surface: #061a22;
  --color-surface-2: #0a2530;
  --color-surface-3: #0e303c;
  --color-surface-raised: rgba(10, 183, 245, 0.10);

  /* borders */
  --color-border: #163542;
  --color-border-strong: #2c5160;
  --color-border-subtle: rgba(255, 255, 255, 0.06);

  /* text */
  --color-text: #dde3e7;
  --color-text-muted: #818993;
  --color-text-dim: #5a636e;
  --color-text-faint: #3f4853;

  /* accent (cyan, from gate-og.svg) */
  --color-accent: #0ab7f5;
  --color-accent-hover: #38c9f7;
  --color-accent-soft: rgba(10, 183, 245, 0.16);
  --color-accent-text: #0ab7f5;

  /* semantic */
  --color-success: #2dd47e;
  --color-success-bg: rgba(45, 212, 126, 0.12);
  --color-success-border: #2a6e4f;
  --color-warning: #f0b440;
  --color-warning-bg: rgba(240, 180, 64, 0.10);
  --color-warning-border: #6e5320;
  --color-danger: #f06262;
  --color-danger-bg: rgba(240, 98, 98, 0.12);
  --color-danger-border: #6e2828;
  --color-info: #5fa6e0;
  --color-info-bg: rgba(95, 166, 224, 0.10);
  --color-info-border: #2a4f6e;

  /* controls */
  --color-btn-bg: #0a2530;
  --color-btn-border: #2c5160;
  --color-btn-text: #ffffff;
  --color-btn-hover-bg: #1a4a62;
  --color-btn-active-bg: #1a4a62;

  --color-input-bg: #0a2530;
  --color-input-border: #2c5160;
  --color-input-text: #ffffff;
  --color-input-focus-border: var(--color-accent);

  /* nav / sidebar */
  --color-nav-bg: #061a22;
  --color-nav-border: #163542;

  /* chat-only tints */
  --color-chat-told-bg: rgba(95, 166, 224, 0.10);
  --color-chat-input-text: #d6dde0;

  /* pinboard */
  --color-board: #0d1418;
  --color-board-grid: rgba(255, 255, 255, 0.04);
  --color-board-border: #1a3845;
  --color-board-map: #0a2028;
  --color-board-empty: var(--color-text-muted);

  /* notes (sticky — hue-identifiable, dark-mode tuned) */
  --color-note-yellow: #856c25;
  --color-note-blue: #235589;
  --color-note-green: #336e3d;
  --color-note-pink: #6b324b;
  --color-note-white: #353e48;
  --color-note-text: #f4ecd8;
  --color-note-border: rgba(255, 255, 255, 0.16);
  --color-note-shadow: rgba(0, 0, 0, 0.55);
  --color-note-tooltip-bg: rgba(0, 0, 0, 0.88);
  --color-note-tooltip-border: rgba(255, 255, 255, 0.14);
  --color-note-meta-bg: rgba(255, 255, 255, 0.06);

  /* dial (pitch) */
  --color-dial-border: #2c5160;
  --color-dial-center: #0e303c;
  --color-dial-pointer: var(--color-accent);
  --color-dial-band-1: #163542;
  --color-dial-band-2: #2c5160;
  --color-dial-band-3: #b96d56;
  --color-dial-band-4: #163542;

  /* misc */
  --color-step-active-bg: var(--color-accent);
  --color-step-active-border: var(--color-accent);
  --color-step-active-text: var(--color-bg);
  --color-step-hover-bg: #1a4a62;
  --color-step-hover-border: #2c5160;
  --color-step-hover-text: #ffffff;
  --color-cue-active-bg: rgba(240, 180, 64, 0.18);
  --color-cue-active-border: var(--color-warning);
  --color-loop-cue-bg: rgba(240, 180, 64, 0.08);
  --color-resizer: #2c5160;
  --color-resizer-hover: var(--color-accent);

  /* fonts */
  --font-body: Helvetica, Arial, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* shadows */
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-pin: 0 4px 10px rgba(0, 0, 0, 0.55);
  --shadow-tooltip: 0 6px 16px rgba(0, 0, 0, 0.6);
  --shadow-zoom: 0 4px 12px rgba(0, 0, 0, 0.5);

  /* ---- structural tokens (additive, see notes/2026-05-15-ui-shell-brief.md §4) */
  /* Scales below are derived from the audit of inline literals across catalog */
  /* UIs and styles.css. Newly-written rules should consume these tokens       */
  /* instead of inlining literal values. Existing rules will migrate in a     */
  /* later pass (no mass replace in this commit).                              */

  /* spacing — derived clusters: 0.25 / 0.45-0.55 / 0.7-0.8 / 1 / 1.5 / 2 rem */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* type scale — derived clusters: 0.72 / 0.82 / 1 / 1.25 / 1.5 rem */
  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;

  /* weights — dominant body/medium are 400/600; 700 reserved for emphasis */
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;

  /* line height */
  --leading-tight: 1;
  --leading-snug: 1.25;
  --leading-relaxed: 1.45;

  /* radii — dominant: 6px cards, 4px inputs, 10px panels, 999px pills */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* motion */
  --motion-fast: 120ms;
  --motion-medium: 240ms;
  --motion-slow: 480ms;
  --ease-default: ease;
  --ease-decelerate: cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="light"] {
  color-scheme: light;

  --color-bg: #f3f5f2;
  --color-surface: #ffffff;
  --color-surface-2: #fafbf8;
  --color-surface-3: #ecf0ea;
  --color-surface-raised: #dfe9dc;

  --color-border: #d5dcd1;
  --color-border-strong: #aab2a6;
  --color-border-subtle: #ecf0ea;

  --color-text: #20251f;
  --color-text-muted: #5f685d;
  --color-text-dim: #697366;
  --color-text-faint: #748070;

  --color-accent: #1a3a17;
  --color-accent-hover: #4f6049;
  --color-accent-soft: #dfe9dc;
  --color-accent-text: #4f6049;

  --color-success: #377d5b;
  --color-success-bg: #ecf8ef;
  --color-success-border: #83ad90;
  --color-warning: #b18432;
  --color-warning-bg: #fff8e8;
  --color-warning-border: #c69a7a;
  --color-danger: #8b2d24;
  --color-danger-bg: #f6d6d6;
  --color-danger-border: #d99c9c;
  --color-info: #1c4f7a;
  --color-info-bg: #eef4f8;
  --color-info-border: #8aa6c3;

  --color-btn-bg: #ffffff;
  --color-btn-border: #9ba399;
  --color-btn-text: #20251f;
  --color-btn-hover-bg: #dfe9dc;
  --color-btn-active-bg: #dfe9dc;

  --color-input-bg: #ffffff;
  --color-input-border: #aab2a6;
  --color-input-text: #20251f;
  --color-input-focus-border: #4f6049;

  --color-nav-bg: #ecf0ea;
  --color-nav-border: #d0d7cd;

  --color-chat-told-bg: #eef4f7;
  --color-chat-input-text: #4a554a;

  --color-board: #e5d5b6;
  --color-board-grid: rgba(75, 84, 73, 0.06);
  --color-board-border: #c6b58f;
  --color-board-map: #eadbbc;
  --color-board-empty: #697266;

  --color-note-yellow: #fff3a6;
  --color-note-blue: #cfe7ff;
  --color-note-green: #d8f3c6;
  --color-note-pink: #ffd4e2;
  --color-note-white: #fbfbf2;
  --color-note-text: #2a2a24;
  --color-note-border: rgba(65, 58, 42, 0.35);
  --color-note-shadow: rgba(58, 48, 30, 0.16);
  --color-note-tooltip-bg: rgba(31, 34, 29, 0.9);
  --color-note-tooltip-border: rgba(36, 38, 32, 0.18);
  --color-note-meta-bg: rgba(255, 255, 255, 0.55);

  --color-dial-border: #778171;
  --color-dial-center: #f7f8f5;
  --color-dial-pointer: #2f3a35;
  --color-dial-band-1: #8ca497;
  --color-dial-band-2: #d4d0a8;
  --color-dial-band-3: #b96d56;
  --color-dial-band-4: #d9ddd6;

  --color-step-active-bg: #242c24;
  --color-step-active-border: #242c24;
  --color-step-active-text: #ffffff;
  --color-step-hover-bg: #dfe9dc;
  --color-step-hover-border: #9ba399;
  --color-step-hover-text: #20251f;
  --color-cue-active-bg: #f5d78d;
  --color-cue-active-border: #b18432;
  --color-loop-cue-bg: #fff8e8;
  --color-resizer: #9aa397;
  --color-resizer-hover: #4c6f56;

  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --shadow-card: 0 8px 24px rgba(20, 40, 20, 0.06);
  --shadow-pin: 0 4px 10px rgba(58, 48, 30, 0.16);
  --shadow-tooltip: 0 6px 16px rgba(40, 34, 24, 0.22);
  --shadow-zoom: 0 4px 12px rgba(46, 38, 23, 0.14);
}

/* ---- base ------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
}

html.woo-network-waiting,
html.woo-network-waiting * {
  cursor: wait !important;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 1px solid var(--color-btn-border);
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  border-radius: 6px;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}

button:hover,
button.active {
  background: var(--color-btn-hover-bg);
}

input,
select,
textarea {
  border: 1px solid var(--color-input-border);
  border-radius: 6px;
  padding: 0.45rem 0.55rem;
  background: var(--color-input-bg);
  color: var(--color-input-text);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-input-focus-border);
  outline-offset: 1px;
  border-color: var(--color-input-focus-border);
}

a {
  color: var(--color-accent);
}

a:hover {
  color: var(--color-accent-hover);
}

/* ---- primitives -------------------------------------------------------- */
/* Composable building blocks. Feature classes layer positioning, sizing,    */
/* and one-off overrides on top of these. Keep this set small.               */

/* Card: bordered surface used by panels, list items, popovers, dialog       */
/* cards. `.card--raised` and `.card--inset` step the surface up/down a tone.*/
/* `.card--tight` shrinks padding for dense rows (notes, event items).       */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
  min-width: 0;
}

.card--raised { background: var(--color-surface-2); }
.card--inset  { background: var(--color-surface-3); }
.card--tight  { padding: 0.55rem; border-radius: 7px; }
.card--pre    { padding: 0.5rem; border-radius: 6px; }

/* Pill: rounded badge. Status modifiers inherit the semantic-color triples. */
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.08rem 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-text);
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1;
}

.pill--info    { border-color: var(--color-info-border);    background: var(--color-info-bg);    color: var(--color-info); }
.pill--success { border-color: var(--color-success-border); background: var(--color-success-bg); color: var(--color-success); }
.pill--warning { border-color: var(--color-warning-border); background: var(--color-warning-bg); color: var(--color-warning); }
.pill--danger  { border-color: var(--color-danger-border);  background: var(--color-danger-bg);  color: var(--color-danger); }
.pill--strong  { border-color: var(--color-border-strong); }

/* Alert: same semantic palette as .pill but block-shaped for messages.      */
.alert {
  margin: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.85rem;
}

.alert--danger { border-color: var(--color-danger-border); background: var(--color-danger-bg); color: var(--color-danger); }

/* Icon-button: transparent borderless button that lifts on hover.           */
/* Per-instance positioning/sizing stays on the feature class.               */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 4px;
  padding: 0.3rem;
  font: inherit;
  line-height: 1;
  transition: color 120ms, background-color 120ms;
}

.icon-button:hover,
.icon-button:focus-visible {
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

/* Split: two-column layout. Defaults match the original `.split` shape.     */
/* Tune per-instance via custom properties:                                  */
/*   --split-cols   grid-template-columns (default proportional 0.9fr/1.1fr) */
/*   --split-gap    column gap                                               */
/*   --split-align  align-items                                              */
/* `.split--side-fixed` switches to a 1fr + fixed sidebar (use --split-side).*/
/* `.has-ambient-companion` lets the layout fill its parent when a workspace
   declares an ambient-companion slot below it (e.g. the chat mini-panel).   */
.split {
  display: grid;
  grid-template-columns: var(--split-cols, minmax(260px, 0.9fr) minmax(360px, 1.1fr));
  gap: var(--split-gap, 1rem);
  align-items: var(--split-align, start);
}

.split--side-fixed {
  --split-cols: minmax(0, 1fr) min(var(--split-side, 230px), 25vw);
  --split-align: stretch;
}

.split.has-ambient-companion {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 360px;
}

.shell.observations-collapsed {
  grid-template-columns: 190px minmax(0, 1fr) 3.25rem;
}

.nav,
.events {
  border-right: 1px solid var(--color-nav-border);
  background: var(--color-nav-bg);
  padding: 1rem;
}

.nav {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow: auto;
}

.github-link {
  margin-top: auto;
  align-self: flex-start;
  color: var(--color-text-muted);
  display: inline-flex;
  padding: 0.25rem;
  border-radius: 4px;
  transition: color 120ms;
}

.github-link:hover,
.github-link:focus-visible {
  color: var(--color-accent);
}

.events-logout {
  margin-top: auto;
  align-self: center;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: var(--color-bg);
}

.login-card {
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem;
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  text-align: center;
}

.login-brand-name {
  margin: 0;
  font-size: 5.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-text);
}

.login-brand-tagline {
  margin: 0;
  font-size: 1.4rem;
  color: var(--color-accent);
}

.login-guest,
.login-submit {
  font: inherit;
  padding: 0.55rem 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--color-btn-border);
  background: var(--color-btn-active-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms;
}

.login-guest:hover,
.login-submit:hover,
.login-guest:focus-visible,
.login-submit:focus-visible {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}

.login-guest:disabled,
.login-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.login-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0.25rem 0;
}

.login-divider::before,
.login-divider::after {
  content: "";
  height: 1px;
  background: var(--color-border);
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.login-field input {
  font: inherit;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--color-input-border);
  background: var(--color-input-bg);
  color: var(--color-input-text);
}

.login-field input:focus-visible {
  outline: 2px solid var(--color-input-focus-border);
  outline-offset: 1px;
  border-color: var(--color-input-focus-border);
}

.events {
  border-right: 0;
  border-left: 1px solid var(--color-nav-border);
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.events-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin: 0 0 0.65rem;
}

.events h2 {
  margin: 0;
  font-size: 0.95rem;
}

.events-toggle {
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  min-width: 0;
  padding: 0;
  font-size: 0.72rem;
  line-height: 1;
}

.events.collapsed {
  align-items: center;
  padding: 0.7rem 0.45rem;
  overflow: hidden;
}

.events.collapsed .events-header {
  flex: 1 1 auto;
  margin: 0;
  flex-direction: column-reverse;
  justify-content: flex-end;
}

.events.collapsed h2 {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.78rem;
  letter-spacing: 0;
  color: var(--color-text-dim);
}

.events.collapsed .event-list {
  display: none;
}

.brand {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.actor {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.nav-button {
  width: 100%;
  text-align: left;
  margin-bottom: 0.5rem;
}

.main {
  padding: 1rem;
  overflow: auto;
}

woo-chat-space {
  display: block;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
  /* Buttons in toolbars (e.g. Inspector "Inspect", Dubspace "Audio") set
     the row height ~34px. Force the same min-height on toolbars without
     buttons so all page headers align across tools. */
  min-height: 2.125rem;
}

.toolbar h1 {
  font-size: 1.35rem;
  margin: 0;
  margin-right: auto;
}

.chat-room-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  margin-right: auto;
}

.chat-room-title h1 {
  margin-right: 0;
}

.weather-badge {
  gap: 0.28rem;
  min-height: 1.45rem;
  padding: 0.12rem 0.42rem;
  background: var(--color-surface);
  font-size: 0.82rem;
}

.weather-badge-icon {
  color: var(--color-warning);
  font-size: 0.92rem;
}

.weather-badge-condition {
  display: none;
}

.weather-badge.pending,
.weather-badge.error {
  min-width: 1.45rem;
  justify-content: center;
}

woo-weather-badge {
  display: inline-flex;
  cursor: pointer;
}

woo-weather-badge:hover .weather-badge,
woo-weather-badge:focus-within .weather-badge {
  border-color: var(--color-accent);
}

woo-weather-badge:focus-within .weather-badge {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Detail overlay — themed to the surrounding cyan/dark-blue palette
   rather than the pinboard-note yellow. Native <dialog>'s top-layer
   lifts it above the chat; the SVG charts inside are hand-rolled. */
.weather-chart-dialog {
  border: none;
  background: transparent;
  padding: 0;
  max-width: min(960px, 92vw);
  width: min(960px, 92vw);
  color: var(--color-text);
}

.weather-chart-dialog::backdrop {
  background: rgba(0, 8, 14, 0.62);
  backdrop-filter: blur(3px);
}

.weather-chart-card {
  position: relative;
  border-color: var(--color-border-strong);
  border-radius: 10px;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55);
  padding: 1rem 1.2rem 1.2rem;
  font-family: inherit;
}

.weather-chart-close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 1.8rem;
  height: 1.8rem;
  /* Center the glyph dead-on regardless of font metrics — a non-zero    */
  /* padding drifted the × into the lower-right of the hover circle.    */
  padding: 0;
  font-size: 1.5rem;
  border-radius: 50%;
}

.weather-chart-headline {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
  /* Reserve room for the absolute-positioned .weather-chart-close at
     top-right (1.8rem wide + 0.4rem inset) so the "as of ..." text
     pinned by margin-left:auto doesn't collide with the button. */
  padding-right: 2.4rem;
}
.weather-chart-headline-place { font-weight: 600; font-size: 1.1rem; color: var(--color-text); }
.weather-chart-headline-temp  { font-size: 1.4rem; font-weight: 600; color: var(--color-accent); }
.weather-chart-headline-observed { font-size: 0.85rem; color: var(--color-text-muted); margin-left: auto; }

/* Strip uses inline grid-template-columns + padding-* set by the
   component to match the chart panels' data area: same N columns, same
   left/right indent. Don't override those here. */
.weather-chart-daily-strip {
  display: grid;
  gap: 0.3rem;
  margin: 0.6rem 0 0.8rem;
}
.weather-chart-day {
  text-align: center;
  padding: 0.4rem 0.2rem;
  border-radius: 6px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  /* Cards must keep the strip aligned with the chart's day-columns
     even when condition text would otherwise wrap. min-width:0 lets
     the grid track shrink; inner lines below clip with ellipsis. */
  min-width: 0;
  min-height: 6.0rem;
  overflow: hidden;
}
.weather-chart-day.is-today {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-text);
}
.weather-chart-day.is-empty {
  background: transparent;
  border-style: dashed;
  border-color: var(--color-border);
  color: var(--color-text-faint);
}
.weather-chart-day.is-empty .weather-chart-day-icon { color: var(--color-text-faint); }
.weather-chart-day-date {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.weather-chart-day-icon { font-size: 1.4rem; line-height: 1; color: var(--color-accent); }
.weather-chart-day-condition {
  color: var(--color-text-muted);
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.weather-chart-day-temps {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.weather-chart-day-temps .hi { font-weight: 600; }
.weather-chart-day-temps .lo { color: var(--color-text-muted); }
.weather-chart-day-precip {
  color: var(--color-text-muted);
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.weather-chart-daily-empty { padding: 1rem; text-align: center; color: var(--color-text-muted); }

.weather-chart-panel {
  margin-top: 0.6rem;
  padding: 0.4rem 0.4rem 0.5rem;
}
.weather-chart-panel-empty { background: var(--color-surface-3); }
.weather-chart-svg {
  width: 100%;
  height: auto;
  display: block;
  font-size: 11px;
  font-family: var(--font-sans, system-ui, sans-serif);
}

/* Past-half tint and gridlines need to work on the dark surface — use
   subtle white overlays rather than rgba(0,0,0,...) which vanishes here.
   Now-line gets the cyan accent for clear visual separation. */
.weather-chart-past {
  fill: rgba(255, 255, 255, 0.04);
}
.weather-chart-day-grid {
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 1.2;
  stroke-dasharray: 4 4;
}
.weather-chart-now {
  stroke: var(--color-accent);
  stroke-width: 1.8;
  opacity: 0.95;
}
.weather-chart-ytick {
  fill: var(--color-text-muted);
}
.weather-chart-empty {
  fill: var(--color-text-muted);
}

/* Series colours tuned for contrast against the dark cyan-tinted panel. */
.weather-line-temp     { stroke: #ff6a5e; stroke-width: 1.6; }
.weather-line-feels    { stroke: #f3a35e; stroke-width: 1.4; stroke-dasharray: 4 3; }
.weather-line-dew      { stroke: #6dc99a; stroke-width: 1.4; }
.weather-line-cloud    { stroke: #b0c4cf; stroke-width: 1.4; }
.weather-line-humidity { stroke: #6dc99a; stroke-width: 1.2; opacity: 0.85; stroke-dasharray: 3 3; }
.weather-line-precipp  { stroke: #5fb3ff; stroke-width: 1.4; }
.weather-area-precip   { fill: rgba(95, 179, 255, 0.30); stroke: none; }

.weather-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  margin-top: 0.3rem;
  font-size: 0.74rem;
  color: var(--color-text-muted);
  padding: 0 0.3rem;
}
.weather-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.weather-chart-legend-swatch {
  width: 14px;
  height: 3px;
  display: inline-block;
}
.weather-chart-legend-swatch.weather-line-temp     { background: #ff6a5e; }
.weather-chart-legend-swatch.weather-line-feels    { background: repeating-linear-gradient(90deg, #f3a35e 0 4px, transparent 4px 7px); }
.weather-chart-legend-swatch.weather-line-dew      { background: #6dc99a; }
.weather-chart-legend-swatch.weather-line-cloud    { background: #b0c4cf; }
.weather-chart-legend-swatch.weather-line-humidity { background: repeating-linear-gradient(90deg, #6dc99a 0 3px, transparent 3px 6px); }
.weather-chart-legend-swatch.weather-line-precipp  { background: #5fb3ff; }
.weather-chart-legend-swatch.weather-area-precip   { background: rgba(95, 179, 255, 0.45); height: 8px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.8rem;
}

.card h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.card-head h2 {
  margin: 0;
}

.slot.playing {
  border-color: var(--color-success);
  box-shadow: inset 0 0 0 2px var(--color-success-bg);
}

.loop-console-panel {
  grid-column: span 2;
}

.loop-console {
  display: grid;
  grid-template-columns: repeat(5, minmax(4.5rem, 1fr));
  gap: 0.7rem;
  align-items: stretch;
}

.loop-strip,
.filter-strip {
  min-height: 18rem;
  display: grid;
  grid-template-rows: auto auto minmax(8rem, 1fr) auto auto;
  gap: 0.55rem;
  justify-items: center;
  padding: 0.65rem 0.45rem;
  border-radius: 7px;
}

.filter-strip {
  grid-template-rows: auto minmax(8rem, 1fr) auto;
}

.loop-strip.playing {
  border-color: var(--color-success);
  box-shadow: inset 0 0 0 2px var(--color-success-bg);
}

.loop-strip.cue-active {
  border-color: var(--color-cue-active-border);
  background: var(--color-loop-cue-bg);
}

.loop-strip-head {
  display: grid;
  gap: 0.1rem;
  justify-items: center;
  text-align: center;
}

.loop-strip-head strong {
  font-size: 1.1rem;
}

.loop-strip-head span {
  color: var(--color-text-dim);
  font-size: 0.76rem;
}

.vertical-fader {
  width: 2rem;
  min-height: 8rem;
  writing-mode: vertical-lr;
  direction: rtl;
}

.pitch-switch {
  width: 100%;
  display: grid;
  gap: 0.25rem;
  justify-items: center;
}

.pitch-dial {
  width: 2.7rem;
  aspect-ratio: 1;
  position: relative;
  border: 1px solid var(--color-dial-border);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 52%, var(--color-dial-center) 0 38%, transparent 39%),
    conic-gradient(from -135deg, var(--color-dial-band-1) 0deg, var(--color-dial-band-2) 135deg, var(--color-dial-band-3) 270deg, var(--color-dial-band-4) 270deg 360deg);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.3);
  cursor: grab;
  touch-action: none;
}

.pitch-dial:active {
  cursor: grabbing;
}

.pitch-pointer {
  position: absolute;
  left: calc(50% - 0.085rem);
  top: 0.3rem;
  width: 0.17rem;
  height: 1.05rem;
  border-radius: 999px;
  background: var(--color-dial-pointer);
  transform-origin: 50% 1.05rem;
  transform: rotate(var(--pitch-angle));
}

.pitch-switch-input {
  width: 100%;
  min-width: 0;
  height: 0.75rem;
}

.pitch-readout {
  min-height: 2rem;
  display: grid;
  gap: 0.05rem;
  justify-items: center;
  color: var(--color-text-dim);
  font-size: 0.7rem;
  line-height: 1.15;
  text-align: center;
}

.pitch-readout strong {
  color: var(--color-text);
  font-size: 0.82rem;
}

.fader-readout {
  color: var(--color-text-dim);
  font-size: 0.74rem;
  white-space: nowrap;
}

.cue-button {
  width: 100%;
  padding-inline: 0.35rem;
}

.cue-button.active {
  border-color: var(--color-cue-active-border);
  background: var(--color-cue-active-bg);
}

label {
  display: grid;
  gap: 0.35rem;
  margin: 0.7rem 0;
  color: var(--color-text-muted);
}

input[type="range"] {
  width: 100%;
  padding: 0;
}

.loop-strip .vertical-fader,
.filter-strip .vertical-fader {
  width: 2rem;
  padding: 0;
}

.sequencer {
  grid-column: span 2;
}

.steps {
  display: grid;
  gap: 0.45rem;
}

.step-row {
  display: grid;
  grid-template-columns: 4.5rem repeat(8, minmax(1.9rem, 1fr));
  gap: 0.35rem;
  align-items: center;
}

.step-row span {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.step {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  text-align: center;
}

.step:hover:not(.active) {
  background: var(--color-step-hover-bg);
  border-color: var(--color-step-hover-border);
  color: var(--color-step-hover-text);
}

.step.active {
  background: var(--color-step-active-bg);
  border-color: var(--color-step-active-border);
  color: var(--color-step-active-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-step-active-bg) 65%, #fff 35%);
}

.task-toolbar {
  align-items: baseline;
}

.task-summary {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.status-filter {
  cursor: pointer;
}

.status-filter:not(.active) {
  opacity: 0.45;
  background: var(--color-surface);
}

.status-filter.active {
  box-shadow: inset 0 0 0 1px currentColor;
}

.task-create,
.task-tree-list {
  display: grid;
  gap: 0.5rem;
}

.task-create {
  grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1.2fr) auto;
}

.task-node {
  --depth: 0;
}

.task-row {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  margin-left: calc(var(--depth) * 1rem);
  border-radius: 7px;
}

.task-row.selected .task-select {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.task-row.filtered-context .task-select {
  opacity: 0.62;
}

.task-toggle {
  width: 2rem;
  min-width: 2rem;
  padding: 0;
  text-align: center;
  color: var(--color-text-muted);
}

.task-toggle:disabled {
  opacity: 0.35;
  cursor: default;
}

.task-select,
.related-task {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.22rem;
  text-align: left;
}

.task-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}

.task-meta {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  color: var(--color-text-dim);
  font-size: 0.76rem;
}

.children {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.3rem;
}

.inspector {
  display: grid;
  gap: 1rem;
}

.task-inspector-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.task-inspector-head h2 {
  margin-bottom: 0.35rem;
}

.task-inspector-head p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.task-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.task-facts strong,
.task-facts span {
  display: block;
}

.task-facts strong {
  color: var(--color-text-dim);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
}

.task-facts span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-section {
  display: grid;
  gap: 0.55rem;
}

.task-section h3 {
  margin: 0;
  font-size: 0.92rem;
}

.related-list,
.activity-list,
.artifact-list {
  display: grid;
  gap: 0.45rem;
}

.related-task {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.activity-item div,
.artifact-item {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  align-items: baseline;
}

.activity-item span,
.artifact-item > span {
  color: var(--color-text-dim);
  font-size: 0.76rem;
}

.activity-item p {
  margin: 0.35rem 0 0;
  overflow-wrap: anywhere;
}

.artifact-item a,
.artifact-item span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.empty-state {
  color: var(--color-text-dim);
  font-size: 0.88rem;
}

.row,
.button-row,
.inline-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.65rem 0;
}

.row {
  justify-content: space-between;
}

.inline-form input {
  flex: 1;
  min-width: 160px;
}

.checklist {
  padding-left: 1.2rem;
}

.chat-layout {
  --split-side: 240px;
  --split-cols: minmax(360px, 1fr) var(--split-side);
  height: calc(100dvh - 5.25rem);
  min-height: 0;
  overflow: hidden;
}

.chat-layout.solo {
  --split-cols: minmax(320px, 640px);
}

.chat-empty-panel p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.chat-panel {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.8rem;
}

.chat-presence {
  min-height: 0;
  height: 100%;
  overflow: auto;
}

.chat-feed {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-right: 0.25rem;
}

.chat-empty {
  color: var(--color-text-muted);
  line-height: 1.45;
}

.chat-line {
  display: grid;
  grid-template-columns: 4.2rem minmax(7rem, auto) minmax(0, 1fr);
  gap: 0.55rem;
  align-items: baseline;
  padding: 0.08rem 0.6rem;
  background: transparent;
  overflow-wrap: anywhere;
}

.chat-line.emote,
.chat-line.system,
.chat-line.error {
  grid-template-columns: 4.2rem minmax(0, 1fr);
  color: var(--color-text-muted);
}

.chat-line.told {
  background: var(--color-chat-told-bg);
}

.chat-line.input {
  grid-template-columns: 4.2rem minmax(0, 1fr);
  color: var(--color-chat-input-text);
}

.chat-line.input > span:not(.chat-time) {
  font-style: italic;
}

.space-chat-feed .chat-line.input {
  grid-template-columns: 3.6rem minmax(0, 1fr);
}

.chat-line.separator {
  display: block;
  border-top: 1px solid var(--color-border);
  padding: 0;
  margin: 0.25rem 0;
  height: 0;
}

.chat-time {
  color: var(--color-text-faint);
  font-size: 0.8rem;
  white-space: nowrap;
}

.chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
}

.dubspace-work {
  min-width: 0;
}

.dubspace-presence {
  min-height: 0;
  overflow: auto;
}

/* Outliner and tasks reuse the side-fixed split-layout primitive with a
   240px right-hand presence aside, matching chat-layout / dubspace-layout.
   The aside lives inside the ambient-companion shell, so the mini-chat panel
   docks further right via the shell's own column. */
.outliner-layout,
.woo-tasks-layout {
  --split-side: 240px;
  --split-cols: minmax(360px, 1fr) var(--split-side);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.outliner-presence,
.woo-tasks-presence {
  min-height: 0;
  height: 100%;
  overflow: auto;
}

.pinboard-layout {
  height: calc(100dvh - 5.25rem - var(--space-chat-h, 280px) - 0.8rem);
  min-height: 0;
}

.pinboard-layout.has-ambient-companion {
  height: auto;
}

.ambient-companion-shell {
  height: calc(100dvh - 5.25rem);
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--space-chat-h, 280px);
  gap: 0.8rem;
  overflow: hidden;
}

.pinboard-work {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.25rem;
  overflow: hidden;
}

.pinboard-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem auto;
  gap: 0.35rem;
  align-items: center;
  padding: 0.25rem 0.4rem;
}

.pinboard-create textarea {
  min-height: 1.9rem;
  height: 1.9rem;
  max-height: 3rem;
  resize: vertical;
  padding-block: 0.3rem;
  line-height: 1.2;
}

.pinboard-create select,
.pinboard-create button {
  min-height: 1.9rem;
  padding-block: 0.28rem;
  line-height: 1.2;
}

.pinboard-create-placeholder {
  min-height: 2.85rem;
  visibility: hidden;
  pointer-events: none;
}

.pinboard-stage-panel,
.pinboard-presence {
  min-height: 0;
  overflow: auto;
}

.pinboard-presence {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.6rem;
  overflow: hidden;
}

.pinboard-presence h2 {
  margin: 0;
}

.space-chat-panel {
  position: relative;
  height: var(--space-chat-h, 280px);
  min-height: 11rem;
  max-height: 45vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.45rem;
  padding: 0.85rem 0.65rem 0.65rem;
}

.space-chat-resizer {
  position: absolute;
  top: 0;
  left: 0.75rem;
  right: 0.75rem;
  height: 0.7rem;
  cursor: ns-resize;
  touch-action: none;
}

.space-chat-resizer::before {
  content: "";
  position: absolute;
  top: 0.28rem;
  left: 50%;
  width: 4.5rem;
  height: 0.18rem;
  border-radius: 999px;
  background: var(--color-resizer);
  transform: translateX(-50%);
}

.space-chat-resizer:hover::before,
.space-chat-panel.is-resizing .space-chat-resizer::before {
  background: var(--color-resizer-hover);
}

.space-chat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.space-chat-head h2 {
  margin: 0;
  font-size: 0.9rem;
}

.space-chat-head span {
  color: var(--color-text-dim);
  font-size: 0.76rem;
}

.space-chat-toggle {
  margin-left: auto;
  padding: 0.1rem 0.35rem;
  font-size: 0.75rem;
}

.space-chat-panel.is-collapsed {
  height: auto !important;
  min-height: 0;
  max-height: none;
  padding: 0.3rem 0.65rem;
  grid-template-rows: auto;
}

.ambient-companion-shell:has(.space-chat-panel.is-collapsed) {
  grid-template-rows: minmax(0, 1fr) auto;
}

.space-chat-feed {
  font-size: 0.86rem;
  min-height: 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.space-chat-feed .chat-line {
  padding: 0.06rem 0.45rem;
  grid-template-columns: 3.6rem minmax(5.5rem, auto) minmax(0, 1fr);
}

.space-chat-feed .chat-line.emote,
.space-chat-feed .chat-line.system,
.space-chat-feed .chat-line.error {
  grid-template-columns: 3.6rem minmax(0, 1fr);
}

.space-chat-form {
  gap: 0.45rem;
}

.space-chat-form input {
  min-width: 0;
}

woo-outliner-tree {
  display: block;
  min-height: 0;
}

.outliner {
  height: 100%;
  min-height: 0;
  display: grid;
  /* Two rows: add-form + rows. The toolbar lives at the workspace
     element top, outside this grid. */
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.65rem;
  overflow: hidden;
}

.outliner-add,
.outliner-row-inner {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
}

/* Toolbar inline controls. The shared .toolbar puts everything on one row
   with `display: flex; align-items: center`. The label/span here must not
   let their own inline content wrap — otherwise the toolbar height jumps
   past the 2.125rem `.toolbar` envelope that .ambient-companion-shell's
   `calc(100dvh - 5.25rem)` budget assumes, and the chat panel drifts. */
.outliner-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

/* Toolbar "clear selection" button. Only rendered when a row is selected.
   No reference to server-side focus here — the browser UI's selection is
   client-local; see catalogs/outliner/DESIGN.md. */
.outliner-clear-selection {
  white-space: nowrap;
  cursor: pointer;
}

/* The text cell is the row's primary affordance: click to select, click
   again on the selected row to enter inline edit. The bare text still
   looks like text — row border + selection highlight signal interactivity
   — but a pointer cursor lets the hit area read as actionable. */
.outliner-text {
  cursor: pointer;
}

/* Click-to-edit affordance is on the whole row now. Show that with a
   pointer cursor on .outliner-row-inner, except over the form/inputs which
   carry their own cursor. (Row-inner buttons use .icon-button, which sets
   its own pointer cursor.) */
.outliner-row-inner {
  cursor: pointer;
}
.outliner-row-inner input,
.outliner-row-inner form {
  cursor: auto;
}

/* Row icon buttons (twistie, add-child, remove) reuse the shared
   .icon-button shell: flat by default, subtle background tint on hover.
   The per-button rules below just size and tune them for the dense row
   context — they don't restate the chrome-reset that .icon-button does.
   Default size matches the hide checkbox (1.1rem) so the right-side
   cluster {add, hide, trash} reads as a uniform set of small icons;
   the twistie overrides this with a roomier square below. */
.outliner-row-inner .icon-button {
  padding: 0;
  border-radius: 3px;
  width: 1.1rem;
  height: 1.1rem;
}
/* Secondary icons fill the 1.1rem button nearly edge-to-edge — same
   visual weight as the hide checkbox's "×" glyph sitting next to them.
   The 24-unit lucide viewBox has ~3-unit padding inside the strokes, so
   we render the SVG at ~16px (≈91% of the 17.6px button); that lands
   the stroked content at roughly the same size as the × glyph. */
.outliner-row-inner .icon-button svg {
  width: 16px;
  height: 16px;
}

/* Twistie is the row's primary structural affordance — it gets a larger
   footprint and a full-weight text colour, while the secondary trash and
   add-child icons stay muted via the inherited .icon-button colour. The
   bigger chevron SVG (20px) needs a roomier square to breathe in.
   The svg-size override here re-asserts 20px so the generic
   .outliner-row-inner .icon-button svg rule (which compacts secondary
   icons to 12px) doesn't shrink the chevron with them. */
.outliner-row-inner .icon-button.outliner-twistie {
  width: 1.7rem;
  height: 1.7rem;
  color: var(--color-text);
}
.outliner-row-inner .icon-button.outliner-twistie svg {
  width: 20px;
  height: 20px;
}

.outliner-twistie-empty {
  /* Same footprint as a real twistie so non-leaf and leaf rows line up. */
  display: inline-flex;
  width: 1.7rem;
  height: 1.7rem;
}

/* Hide toggle. Visually a 16px SVG square (same stroke/viewBox style as
   the plus-square add-child icon) whose two diagonal × strokes appear
   only when the underlying checkbox is :checked. The native input is
   kept for semantics (label-wrapped, click-toggleable, keyboard) but
   hidden visually; the SVG carries the affordance. */
.outliner-hide-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative; /* contains the visually-hidden absolute input */
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-text-muted);
  cursor: pointer;
}

.outliner-hide-toggle input {
  /* Visually hidden but still focusable and click-toggleable through
     the label. Don't use display:none — that drops focus handling. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

.outliner-hide-glyph {
  display: block;
  pointer-events: none;
}

/* × strokes hidden by default; revealed when the checkbox is checked. */
.outliner-hide-glyph .outliner-hide-x {
  opacity: 0;
}

.outliner-hide-toggle:hover {
  color: var(--color-text);
}

.outliner-hide-toggle input:checked + .outliner-hide-glyph .outliner-hide-x {
  opacity: 1;
}

.outliner-hide-toggle input:checked + .outliner-hide-glyph {
  color: var(--color-text);
}

/* Keep the focus ring visible when the user tabs to the toggle — without
   this, the visually-hidden input takes focus invisibly. */
.outliner-hide-toggle input:focus-visible + .outliner-hide-glyph rect {
  stroke: var(--color-accent, currentColor);
}

/* Remove icon is destructive — keep it muted by default so it doesn't
   shout from every row; redden it on hover so the intent is unmistakable
   when the user actually points at it. */
.outliner-remove-btn:hover,
.outliner-remove-btn:focus-visible {
  color: var(--color-danger);
}

/* The in-place add-child placeholder sits as a child row directly below
   the selected row. Visually identical to a regular row so the user reads
   it as "the new item will land here", but with a dashed border to make
   the pending nature obvious. */
.outliner-row-pending .outliner-row-inner {
  border-bottom-style: dashed;
}

.outliner-add input,
.outliner-edit input {
  min-width: 0;
  flex: 1 1 auto;
}

/* The edit form replaces .outliner-text inside .outliner-row-inner's flex
   row. Without these the form shrinks to the input's intrinsic width and
   the focus/remove buttons slide up next to it. Matching .outliner-text's
   flex sizing keeps the buttons at the row's right edge. */
.outliner-edit {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.outliner-rows {
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
}

.outliner-row {
  padding-left: var(--indent, 0);
}

.outliner-row-inner {
  min-height: 2rem;
  padding: 0.2rem 0.35rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.outliner-text {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.outliner-row.is-hidden .outliner-text {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.outliner-row.is-focused .outliner-row-inner {
  background: var(--color-accent-soft);
}

.pinboard-stage-panel {
  display: flex;
  overflow: hidden;
  padding: 0;
  min-height: 420px;
}

.pinboard-layout:not(.has-ambient-companion) .pinboard-stage-panel {
  min-height: 0;
  height: calc(100dvh - 5.25rem - var(--space-chat-h, 280px) - 0.8rem - 2.85rem - 0.25rem);
}

[data-pinboard-map-shell] {
  min-height: 0;
  height: 100%;
}

.pinboard-stage {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background-color: var(--color-board);
  background-image:
    linear-gradient(90deg, var(--color-board-grid) 1px, transparent 1px),
    linear-gradient(var(--color-board-grid) 1px, transparent 1px);
  background-size: var(--pinboard-grid-size, 24px) var(--pinboard-grid-size, 24px);
  background-position: var(--pinboard-grid-x, 0) var(--pinboard-grid-y, 0);
  border: 1px solid var(--color-board-border);
  border-radius: 7px;
  cursor: grab;
  touch-action: none;
  overscroll-behavior: contain;
}

.pinboard-stage.panning {
  cursor: grabbing;
}

.pinboard-stage.viewport-animating {
  transition:
    background-position 480ms cubic-bezier(0.16, 1, 0.3, 1),
    background-size 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pinboard-canvas {
  position: absolute;
  inset: 0 auto auto 0;
  width: max(var(--pinboard-w), 6000px);
  height: max(var(--pinboard-h), 4000px);
  transform-origin: 0 0;
}

.pinboard-canvas.viewport-animating {
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.pinboard-zoom-controls {
  position: absolute;
  z-index: 10000;
  right: 0.75rem;
  top: 0.75rem;
  display: inline-grid;
  grid-template-columns: 2rem 3.25rem 2rem;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  box-shadow: var(--shadow-zoom);
}

.pinboard-zoom-controls button {
  min-width: 2rem;
  padding: 0.35rem 0;
}

.pinboard-zoom-controls span {
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.pinboard-empty {
  position: absolute;
  left: 1rem;
  top: 1rem;
  padding: 1rem;
  color: var(--color-board-empty);
}

.pinboard-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 11rem;
  overflow: hidden;
  border: 1px solid var(--color-board-border);
  border-radius: 6px;
  background: var(--color-board-map);
  cursor: crosshair;
}

.pinboard-map-note {
  position: absolute;
  min-width: 3px;
  min-height: 3px;
  border: 1px solid rgb(255 255 255 / 0.45);
  box-sizing: border-box;
  pointer-events: none;
}

.pinboard-map-viewport {
  position: absolute;
  min-width: 5px;
  min-height: 5px;
  padding: 0;
  appearance: none;
  border: 1px solid var(--color-accent);
  border-radius: 2px;
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
  cursor: crosshair;
  transition:
    left 360ms cubic-bezier(0.16, 1, 0.3, 1),
    top 360ms cubic-bezier(0.16, 1, 0.3, 1),
    width 360ms cubic-bezier(0.16, 1, 0.3, 1),
    height 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pinboard-map-viewport:hover {
  background: var(--color-accent-hover);
  opacity: 0.45;
}

.pinboard-map-viewport.self {
  border-color: var(--color-success);
  background: var(--color-success-bg);
}

.pinboard-map-viewport.self:hover {
  background: var(--color-success-bg);
  opacity: 0.85;
}

.pinboard-map-empty {
  position: absolute;
  left: 0.65rem;
  top: 0.55rem;
  margin: 0;
  color: var(--color-board-empty);
  font-size: 0.78rem;
  pointer-events: none;
}

.pin-note {
  position: absolute;
  cursor: auto;
  min-width: 100px;
  min-height: 72px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.3rem;
  padding: 0.45rem;
  border: 1px solid var(--color-note-border);
  border-radius: 4px;
  box-shadow: 0 4px 10px var(--color-note-shadow);
  color: var(--color-note-text);
}

.pin-note::after {
  content: attr(data-note-meta);
  position: absolute;
  left: 0.35rem;
  bottom: calc(100% + 0.35rem);
  z-index: 20;
  max-width: 18rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-note-tooltip-border);
  border-radius: 4px;
  background: var(--color-note-tooltip-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-tooltip);
  font-size: 0.72rem;
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.2rem);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: pre-line;
}

.pin-note:hover::after,
.pin-note:focus-within::after {
  opacity: 1;
  transform: translateY(0);
}

.pin-note-animating {
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.pin-note-yellow {
  background: var(--color-note-yellow);
}

.pin-note-blue {
  background: var(--color-note-blue);
}

.pin-note-green {
  background: var(--color-note-green);
}

.pin-note-pink {
  background: var(--color-note-pink);
}

.pin-note-white {
  background: var(--color-note-white);
}

.pin-note-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.3rem;
  align-items: center;
}

.pin-note-head button,
.pin-note-head select {
  min-width: 0;
  padding: 0.18rem 0.35rem;
  font-size: 0.72rem;
  background: var(--color-note-meta-bg);
  color: inherit;
  border-color: var(--color-note-border);
}

.pin-note-drag {
  cursor: grab;
  touch-action: none;
}

.pin-note-drag:active {
  cursor: grabbing;
}

.pin-note textarea {
  width: 100%;
  min-height: 0;
  resize: none;
  border: 0;
  padding: 0.25rem;
  background: var(--color-note-meta-bg);
  color: inherit;
  line-height: 1.25;
}

.pin-note-resize {
  position: absolute;
  right: 0.18rem;
  bottom: 0.18rem;
  width: 0.85rem;
  height: 0.85rem;
  padding: 0;
  border-radius: 2px;
  background: linear-gradient(135deg, transparent 0 42%, var(--color-note-border) 44% 54%, transparent 56%);
  cursor: nwse-resize;
  touch-action: none;
}

/* Tasks header uses the shared `.toolbar` layout — no kanban-specific
   overrides. `.toolbar h1 { margin-right: auto }` already pushes any
   trailing button (e.g. ⚙ Admin) to the right. The `.woo-tasks-workspace`
   wrapper was deleted on 2026-05-18 when the tool-frame primitive landed;
   `.split.has-ambient-companion` (height: 100%; min-height: 0;
   overflow: hidden) supplies the same envelope for every tool. */

.woo-tasks-status-nav,
.woo-tasks-overview-counts {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: wrap;
}

.woo-tasks-status-nav button,
.woo-tasks-overview-counts button {
  min-width: 4.7rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem;
  align-items: baseline;
  padding: 0.35rem 0.5rem;
  border-color: var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  text-align: left;
}

.woo-tasks-status-nav button.active,
.woo-tasks-overview-counts button.active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.woo-tasks-status-nav span,
.woo-tasks-overview-counts span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.76rem;
}

.woo-tasks-status-nav strong,
.woo-tasks-overview-counts strong {
  font-size: 0.88rem;
}

.woo-tasks-primary-action {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-surface);
}

.woo-tasks-action {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-surface);
}

.woo-tasks-primary-action:hover,
.woo-tasks-action:hover {
  background: var(--color-accent-hover);
  color: var(--color-surface);
}

.woo-tasks-primary-action:focus-visible,
.woo-tasks-action:focus-visible {
  outline: 2px solid var(--color-accent-hover);
  outline-offset: 1px;
}

.woo-tasks-kanban-groupby {
  display: inline-grid;
  grid-template-columns: auto minmax(6.5rem, auto);
  gap: 0.35rem;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  min-width: 0;
}

.woo-tasks-workarea {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
  overflow: hidden;
}

/* Detail and admin-editor render as overlaid modals (see
   .woo-tasks-modal-backdrop), so the workarea no longer needs a
   side-panel column when one is open. */

.woo-tasks-board {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.6rem;
  overflow: hidden;
}

.woo-tasks-board.has-create,
.woo-tasks-board.has-admin {
  grid-template-rows: minmax(0, 1fr);
}

.woo-tasks-kanban-filterbar {
  display: grid;
  grid-template-columns: minmax(12rem, 1.25fr) minmax(9rem, 0.9fr) minmax(0, 1fr) auto auto auto;
  row-gap: 0.45rem;
  column-gap: 0.45rem;
  align-items: center;
  padding: 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}

.woo-tasks-kanban-filterbar input {
  min-width: 0;
}

/* Status-filter lozenges live as a full-width row at the top of the filter
   bar, since they apply only to the kanban (not to the registry header). */
.woo-tasks-kanban-filterbar > .woo-tasks-status-nav {
  grid-column: 1 / -1;
}

.woo-tasks-filter-chips,
.woo-tasks-card-labels,
.woo-tasks-rail-labels {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

.woo-tasks-filter-chip {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  max-width: 11rem;
  padding: 0.18rem 0.28rem 0.18rem 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 0.76rem;
}

.woo-tasks-filter-chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.woo-tasks-filter-chip button {
  min-width: 1.25rem;
  padding: 0.02rem 0.25rem;
  border: 0;
  background: transparent;
}

.woo-tasks-filter-clear {
  padding-inline: 0.65rem;
}

.woo-tasks-kanban {
  min-height: 0;
  overflow: hidden;
}

.woo-tasks-kanban-columns {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15.5rem, 1fr);
  gap: 0.7rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.2rem;
}

.woo-tasks-kanban-col {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-2);
  overflow: hidden;
}

.woo-tasks-kanban-col[data-tasks-drop-target="true"] {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-accent-soft);
}

.woo-tasks-kanban-col-header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.58rem 0.7rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.woo-tasks-kanban-col-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}

.woo-tasks-kanban-col-count {
  min-width: 1.6rem;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-align: center;
}

.woo-tasks-kanban-col-body {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.6rem;
}

.woo-tasks-kanban-empty-col {
  padding: 0.75rem;
  color: var(--color-text-dim);
  font-size: 0.84rem;
}

.woo-tasks-card {
  display: grid;
  gap: 0.5rem;
  padding: 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.woo-tasks-card:hover {
  border-color: var(--color-border-strong);
}

.woo-tasks-card.selected {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent), 0 1px 2px rgba(0, 0, 0, 0.25);
}

.woo-tasks-card[data-tasks-dragging="true"] {
  opacity: 0.58;
}

.woo-tasks-card-header {
  min-width: 0;
}

.woo-tasks-card-name {
  margin: 0;
  color: var(--color-text);
  font-size: 0.92rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.woo-tasks-card-meta {
  display: flex;
  gap: 0.32rem;
  align-items: center;
  flex-wrap: wrap;
  color: var(--color-text-dim);
  font-size: 0.74rem;
}

.woo-tasks-card-kind,
.woo-tasks-card-cursor,
.woo-tasks-card-holder,
.woo-tasks-card-age,
.woo-tasks-detail-kind,
.woo-tasks-detail-status {
  max-width: 100%;
  padding: 0.12rem 0.38rem;
  border-radius: 999px;
  background: var(--color-surface-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.woo-tasks-card-cursor {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.woo-tasks-card-holder {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.woo-tasks-card-label {
  max-width: 9rem;
  padding: 0.14rem 0.42rem;
  border-radius: 999px;
  border-color: var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.74rem;
}

.woo-tasks-card-label.active,
.woo-tasks-card-label:disabled {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  opacity: 1;
}

.woo-tasks-prompt-actions,
.woo-tasks-create-actions,
.woo-tasks-detail-edit-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: wrap;
}

.woo-tasks-prompt,
.woo-tasks-create,
.woo-tasks-admin {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}

.woo-tasks-prompt {
  display: grid;
  gap: 0.5rem;
  padding: 0.6rem;
  cursor: auto;
}

.woo-tasks-prompt-header {
  font-weight: 650;
}

.woo-tasks-prompt-help {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.woo-tasks-prompt-field,
.woo-tasks-create-field {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}

.woo-tasks-prompt-label,
.woo-tasks-create-label {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

.woo-tasks-prompt-type,
.woo-tasks-create-hint {
  color: var(--color-text-dim);
  font-weight: 400;
}

.woo-tasks-prompt textarea,
.woo-tasks-create textarea,
.woo-tasks-detail-edit textarea {
  min-height: 5.5rem;
}

.woo-tasks-create {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: stretch;
  padding: 0.85rem;
  overflow: auto;
}

.woo-tasks-create-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.woo-tasks-create-head h3 {
  margin: 0;
  font-size: 0.95rem;
}

.woo-tasks-create-head button {
  align-self: center;
  min-width: 2.15rem;
  padding-inline: 0.45rem;
}

.woo-tasks-create-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(8rem, 12rem) minmax(12rem, 0.8fr);
  gap: 0.65rem;
  align-items: end;
}

.woo-tasks-create-body {
  min-height: 0;
}

.woo-tasks-create-body textarea {
  min-height: 16rem;
  height: 100%;
  resize: none;
}

.woo-tasks-create-actions {
  align-self: start;
  justify-content: end;
}

/* Modal overlay used by both the task detail dialog and the admin
   role/obligation/policy editor. Click on the backdrop closes the modal;
   the inner .woo-tasks-modal centers the dialog and stops the click. */
.woo-tasks-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.55);
}

.woo-tasks-modal {
  width: min(36rem, 100%);
  max-height: calc(100dvh - 3rem);
}

.woo-tasks-detail {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-auto-rows: max-content;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.woo-tasks-detail-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--color-border);
}

.woo-tasks-detail-header {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: start;
}

.woo-tasks-detail-header h3 {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 1rem;
}

.woo-tasks-detail-header > button {
  min-width: 2rem;
  padding-inline: 0.4rem;
}

.woo-tasks-detail-meta,
.woo-tasks-detail-labels {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: wrap;
}

.woo-tasks-detail-section,
.woo-tasks-detail-waitfor,
.woo-tasks-detail-links {
  display: grid;
  gap: 0.45rem;
}

.woo-tasks-detail-section h4,
.woo-tasks-detail-waitfor h4,
.woo-tasks-detail-links h4 {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.woo-tasks-detail-text-wrap {
  position: relative;
  min-width: 0;
}

.woo-tasks-detail-text {
  padding: 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface-2);
  color: var(--color-text);
  line-height: 1.4;
}

.woo-tasks-detail-empty,
.woo-tasks-detail-empty-inline,
.woo-tasks-admin-empty {
  margin: 0;
  color: var(--color-text-dim);
  font-size: 0.84rem;
}

.woo-tasks-detail-edit-icon {
  min-width: 1.75rem;
  padding: 0.15rem 0.35rem;
  margin-left: 0.25rem;
  border-color: transparent;
  background: transparent;
}

.woo-tasks-detail-edit {
  min-width: 0;
  display: grid;
  gap: 0.45rem;
}

.woo-tasks-detail-obligations,
.woo-tasks-detail-log {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.38rem;
  list-style: none;
}

.woo-tasks-detail-obligation,
.woo-tasks-detail-log-entry {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
  align-items: center;
  padding: 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface-2);
}

.woo-tasks-detail-obligation {
  grid-template-columns: 1.4rem minmax(0, 1fr);
}

.woo-tasks-detail-obligation.current {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.woo-tasks-detail-obligation.met {
  color: var(--color-text-muted);
}

.woo-tasks-detail-obligation-flag {
  text-align: center;
}

.woo-tasks-detail-obligation-key,
.woo-tasks-detail-log-outcome {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 650;
}

.woo-tasks-detail-obligation-role,
.woo-tasks-detail-obligation-criterion {
  grid-column: 2;
  color: var(--color-text-dim);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.woo-tasks-detail-log-entry {
  grid-template-columns: minmax(5rem, auto) minmax(4rem, auto) minmax(0, 1fr);
  font-size: 0.8rem;
}

.woo-tasks-detail-log-ts,
.woo-tasks-detail-log-actor {
  color: var(--color-text-dim);
}

.woo-tasks-detail-log-key,
.woo-tasks-detail-log-why {
  grid-column: 3;
  color: var(--color-text-dim);
  overflow-wrap: anywhere;
}

.woo-tasks-overview-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.woo-tasks-overview-counts button {
  width: 100%;
}

.woo-tasks-admin {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.85rem;
  overflow: hidden;
}

.woo-tasks-admin.has-editor {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
}

.woo-tasks-admin-main,
.woo-tasks-admin-editor {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: 0.55rem;
  align-content: start;
}

.woo-tasks-admin-main {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.woo-tasks-admin-editor {
  overflow: auto;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.woo-tasks-admin-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: start;
}

.woo-tasks-admin-head > button {
  min-width: 2rem;
  padding-inline: 0.4rem;
}

.woo-tasks-admin-tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.woo-tasks-admin-tabs button {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}

.woo-tasks-admin-tabs button.active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.woo-tasks-admin-listhead,
.woo-tasks-admin-editor-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
}

.woo-tasks-admin-listhead h3,
.woo-tasks-admin-editor-head h3 {
  margin: 0;
  font-size: 0.92rem;
}

/* Mental-model copy: small, dim, non-interactive prose that explains
   what the user is looking at. Used under each admin section heading,
   inside form modals, and as a step-list summary in the task detail
   dialog. */
.woo-tasks-admin-section-help,
.woo-tasks-admin-form-help,
.woo-tasks-detail-section-help {
  margin: 0 0 0.4rem;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.woo-tasks-form-hint {
  display: inline-block;
  margin-left: 0.35rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 400;
}

.woo-tasks-form-hint code {
  padding: 0 0.18rem;
  border-radius: 3px;
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 0.95em;
}

.woo-tasks-admin-editor-head button {
  min-width: 2rem;
  padding-inline: 0.4rem;
}

.woo-tasks-admin-tablewrap {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
}

.woo-tasks-admin-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.woo-tasks-admin-table th,
.woo-tasks-admin-table td {
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: left;
  vertical-align: top;
}

.woo-tasks-admin-table th {
  position: sticky;
  top: 0;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  z-index: 1;
}

.woo-tasks-admin-table td {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.woo-tasks-admin-table tbody tr {
  cursor: pointer;
}

.woo-tasks-admin-table tbody tr:hover {
  background: var(--color-surface-2);
}

.woo-tasks-admin-table button {
  padding: 0.22rem 0.45rem;
}

.woo-tasks-admin-form {
  display: grid;
  gap: 0.55rem;
}

.woo-tasks-admin-form label {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.woo-tasks-admin-form input,
.woo-tasks-admin-form select,
.woo-tasks-admin-form button {
  min-width: 0;
}

.woo-tasks-policy-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.woo-tasks-policy-order {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
}

.woo-tasks-policy-order li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface-2);
  cursor: grab;
}

.woo-tasks-admin-view {
  display: grid;
  gap: 0.45rem;
}

.woo-tasks-admin-view-field {
  display: grid;
  gap: 0.18rem;
  color: var(--color-text);
}

.woo-tasks-admin-view-field span {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.woo-tasks-admin-view-field p {
  margin: 0;
  color: var(--color-text);
  white-space: pre-wrap;
}

.woo-tasks-admin-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.woo-tasks-danger-action {
  margin-right: auto;
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.woo-tasks-admin-status {
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 0.8rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.woo-tasks-admin-status.pending {
  border-color: var(--color-info-border);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.woo-tasks-admin-status.success {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.woo-tasks-admin-status.error {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.presence-list {
  display: grid;
  gap: 0.45rem;
}

.presence-list button {
  display: grid;
  gap: 0.1rem;
  text-align: left;
}

.presence-list span {
  color: var(--color-text-dim);
  font-size: 0.78rem;
}

/* Unified detail panel: form wrapper, edit-mode inputs, save/cancel row.
   Used for both new-task creation (data-task-mode="new") and inline edit
   of an existing task (data-task-mode="edit"). */
.woo-tasks-detail-form {
  display: contents;
}

.woo-tasks-detail-name {
  font-weight: 650;
  overflow-wrap: anywhere;
}

.woo-tasks-detail-name-input {
  width: 100%;
  padding: 0.4rem 0.55rem;
  font-size: 1rem;
  font-weight: 650;
}

.woo-tasks-detail-edit-toggle {
  align-self: start;
  padding: 0.25rem 0.55rem;
  font-size: 0.78rem;
}

.woo-tasks-detail-field {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.woo-tasks-detail-field-label {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.woo-tasks-detail-field-hint {
  color: var(--color-text-dim);
  font-weight: 400;
}

.woo-tasks-detail-field textarea {
  min-height: 7rem;
  resize: vertical;
}

.woo-tasks-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.woo-tasks-detail-actions .woo-tasks-primary-action {
  min-width: 5rem;
}

[data-tasks-detail][data-task-mode="new"] .woo-tasks-detail-meta,
[data-tasks-detail][data-task-mode="new"] .woo-tasks-detail-status {
  /* "draft" status pill stays visible but de-emphasised */
  color: var(--color-text-dim);
}

pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
  font-family: var(--font-mono);
}

.event-list {
  display: grid;
  gap: 0.45rem;
  overflow: auto;
  min-height: 0;
  padding-right: 0.15rem;
}

.event-list pre {
  font-size: 0.7rem;
  line-height: 1.28;
}

.editor {
  display: grid;
  gap: 0.65rem;
}

textarea {
  min-height: 270px;
  resize: vertical;
  font-family: var(--font-mono);
}

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

  .shell.observations-collapsed {
    grid-template-columns: 1fr;
  }

  .nav {
    display: grid;
    grid-template-columns: auto minmax(7rem, 1fr) repeat(6, minmax(0, max-content));
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem;
    border: 0;
    border-bottom: 1px solid var(--color-nav-border);
    position: static;
    height: auto;
    overflow: visible;
  }

  .events {
    border: 0;
    position: static;
    height: min(42vh, 22rem);
  }

  .events.collapsed {
    height: auto;
    padding: 0.55rem;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }

  .events.collapsed .events-logout {
    order: -1;
    margin-top: 0;
    align-self: center;
  }

  .events.collapsed .events-header {
    flex: 1 1 auto;
    flex-direction: row;
    justify-content: space-between;
  }

  .events.collapsed h2 {
    writing-mode: horizontal-tb;
    transform: none;
  }

  .brand,
  .actor,
  .nav-button {
    margin: 0;
  }

  .brand {
    font-size: 1rem;
  }

  .actor {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
  }

  .nav-button {
    width: auto;
    padding: 0.32rem 0.42rem;
    text-align: center;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  .split {
    grid-template-columns: 1fr;
  }

  .loop-console-panel {
    grid-column: auto;
  }

  .loop-console {
    grid-template-columns: repeat(5, minmax(3.4rem, 1fr));
    gap: 0.45rem;
  }

  .loop-strip,
  .filter-strip {
    min-height: 16rem;
    padding-inline: 0.3rem;
  }

  .task-facts {
    grid-template-columns: 1fr;
  }

  .task-create {
    grid-template-columns: 1fr;
  }

  /* On mobile, let the tasks split grow and scroll naturally instead of
     being trapped inside the clipped ambient-companion shell envelope.
     Mirrors the .dubspace-layout / .pinboard-layout mobile relaxation. */
  .woo-tasks-layout,
  .woo-tasks-layout.has-ambient-companion {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
  }

  .woo-tasks-workarea {
    grid-template-columns: 1fr;
  }

  .woo-tasks-board {
    overflow: visible;
  }

  .woo-tasks-admin {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .woo-tasks-kanban {
    min-height: 34rem;
  }

  .woo-tasks-detail {
    max-height: none;
  }

  .woo-tasks-admin {
    grid-template-columns: 1fr;
  }

  .woo-tasks-create {
    min-height: 30rem;
  }

  .woo-tasks-create-row {
    grid-template-columns: 1fr;
  }

  .woo-tasks-create-body textarea {
    min-height: 14rem;
  }

  .woo-tasks-kanban-filterbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .woo-tasks-filter-chips {
    grid-column: 1 / -1;
  }

  .chat-layout {
    grid-template-columns: 1fr;
  }

  .dubspace-layout,
  .pinboard-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .pinboard-layout .pinboard-stage-panel {
    min-height: 420px;
    height: min(70vh, 560px);
  }

  .pinboard-create {
    grid-template-columns: 1fr;
  }

  .sequencer {
    grid-column: auto;
  }

  .step-row {
    grid-template-columns: 3.8rem repeat(8, minmax(1.7rem, 1fr));
  }
}

@media (max-width: 520px) {
  .nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .brand,
  .actor,
  .github-link {
    display: none;
  }

  .nav-button {
    width: 100%;
    padding-inline: 0.1rem;
    font-size: 0.66rem;
  }

  .loop-console {
    grid-template-columns: repeat(5, minmax(2.8rem, 1fr));
    gap: 0.3rem;
  }

  .loop-strip button,
  .filter-strip button {
    padding-inline: 0.2rem;
    font-size: 0.72rem;
  }

  .woo-tasks-status-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .woo-tasks-status-nav button,
  .woo-tasks-overview-counts button {
    min-width: 0;
  }

  .woo-tasks-kanban-columns {
    grid-auto-columns: minmax(82vw, 1fr);
  }

  .woo-tasks-detail-log-entry {
    grid-template-columns: 1fr;
  }

  .woo-tasks-detail-log-key,
  .woo-tasks-detail-log-why {
    grid-column: auto;
  }

  .pitch-dial {
    width: 2.25rem;
  }

  .pitch-readout {
    font-size: 0.64rem;
  }

  .pitch-readout strong {
    font-size: 0.74rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pin-note-animating,
  .pinboard-stage.viewport-animating,
  .pinboard-canvas.viewport-animating,
  .pinboard-map-viewport {
    transition: none;
  }
}

woo-tasks-kanban {
  display: block;
}
