@font-face {
  font-family: "Collapse";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Collapse-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Collapse";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Collapse-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Mondwest";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Mondwest-Regular.woff2") format("woff2");
}

:root {
  /* Same tokens as colibry-agent dashboard. Theme JS rewrites these. */
  --background-base: #041c1c;
  --midground-base: #ffe6cb;
  --color-foreground: var(--midground-base);
  --color-muted-foreground: color-mix(in srgb, var(--midground-base) 58%, transparent);
  --muted-strong: color-mix(in srgb, var(--midground-base) 75%, transparent);
  --color-primary: var(--midground-base);
  --color-card: color-mix(in srgb, var(--midground-base) 7%, var(--background-base));
  --color-border: color-mix(in srgb, var(--midground-base) 16%, transparent);
  --color-destructive: #fb2c36;
  --radius: 0.75rem;
  --theme-font-sans: "Collapse", system-ui, sans-serif;
  --theme-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --theme-font-display: "Mondwest", "Collapse", system-ui, sans-serif;
  --theme-base-size: 13px;
  /* Chrome matches Colibry Agent titlebar: 24px hit, 14px glyph, 12px label. */
  --ui: 12px;
  --title: 13px;
  --caption: 11px;
  --control-h: 24px;
  --field-h: 28px;
  --icon: 14px;
  --radius-sm: 4px;
  --fill: color-mix(in srgb, var(--midground-base) 5%, transparent);
  --stroke: color-mix(in srgb, var(--midground-base) 7%, transparent);

  --navy: var(--background-base);
  --navy-2: color-mix(in srgb, var(--midground-base) 4%, var(--background-base));
  --navy-mid: var(--color-card);
  --navy-deep: color-mix(in srgb, var(--midground-base) 3%, var(--background-base));
  --paper: var(--color-foreground);
  --muted: var(--color-muted-foreground);
  --gold: var(--color-primary);
  --gold-lt: color-mix(in srgb, var(--color-primary) 72%, #fff);
  --gold-dim: color-mix(in srgb, var(--color-primary) 10%, transparent);
  --line: color-mix(in srgb, var(--midground-base) 12%, transparent);
  --line-soft: color-mix(in srgb, var(--midground-base) 7%, transparent);
  --ready: #c4a24a;
  --running: #e8cc7a;
  --review: #7a9bb8;
  --blocked: #c45c4a;
  --done: #6b8f71;
  --backlog: #8b939e;
  --sans: var(--theme-font-sans);
  --serif: var(--theme-font-display);
  --r: var(--radius);
  --side: 237px;
  --side-rail: 48px;
  --bar: 34px;
  --motion: 220ms cubic-bezier(0.23, 1, 0.32, 1);
  --card-pad: 10px;
  --row-h: 36px;
  --col-w: 280px;
  --shadow-soft:
    0 1px 2px color-mix(in srgb, #000 8%, transparent),
    0 10px 28px -16px color-mix(in srgb, #000 28%, transparent);
  color-scheme: light dark;
}

html[data-theme-mode="light"] { color-scheme: light; }
html[data-theme-mode="dark"] { color-scheme: dark; }
[data-theme="light"] {
  --background-base: #F4EFE6;
  --midground-base: #C4A24A;
  --color-foreground: #0D1B2A;
  --color-muted-foreground: color-mix(in srgb, #0D1B2A 58%, transparent);
  --muted-strong: color-mix(in srgb, #0D1B2A 78%, transparent);
  --color-primary: #8A6A1F;
  --color-card: #fffaf3;
  --color-border: color-mix(in srgb, #0D1B2A 16%, transparent);
  --navy: var(--background-base);
  --navy-2: #efe6d8;
  --navy-mid: #fffaf3;
  --navy-deep: #e4d9c8;
  --paper: #0D1B2A;
  --muted: var(--color-muted-foreground);
  --gold: #8A6A1F;
  --gold-lt: #6D5318;
  --gold-dim: color-mix(in srgb, #C4A24A 14%, transparent);
  --line: color-mix(in srgb, #0D1B2A 10%, transparent);
  --line-soft: color-mix(in srgb, #0D1B2A 7%, transparent);
  --ready: #8A6A1F;
  --running: #6D5318;
  --review: #3d5a73;
  --blocked: #a33d32;
  --done: #3f6a46;
  --backlog: #5c646e;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html {
  font-size: var(--theme-base-size, 13px);
  line-height: 1.45;
  background: var(--background-base);
}
body {
  margin: 0;
  display: grid;
  grid-template-columns: var(--side) 1fr;
  background: var(--background-base);
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--ui);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: grid-template-columns var(--motion);
}
body.sidebar-collapsed { --side: var(--side-rail); }

button, input, select, textarea {
  font: inherit;
  font-size: var(--ui);
  color: inherit;
  background: var(--fill);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  min-height: var(--control-h);
  padding: 0 8px;
}
textarea { min-height: 96px; padding: 8px 10px; resize: vertical; }
.drawer input, .drawer select, .settings-main input, .settings-main select,
dialog input, dialog select {
  min-height: var(--field-h);
}
button { cursor: pointer; }
button:hover { border-color: var(--line); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 1px;
}
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--control-h);
  background: var(--midground-base);
  color: var(--background-base);
  border: 0;
  font-family: var(--sans);
  font-size: var(--ui);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 0 12px;
  border-radius: var(--radius-sm);
}
.btn-gold:hover { filter: brightness(1.06); border-color: transparent; }
.btn-gold:active { transform: scale(0.98); }
.text-btn, .icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--control-h);
  background: transparent;
  border-color: transparent;
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--ui);
  letter-spacing: 0;
  text-transform: none;
  padding: 0 12px;
}
.text-btn:hover { background: color-mix(in srgb, var(--midground-base) 10%, transparent); border-color: transparent; }
.icon { width: var(--control-h); padding: 0; justify-content: center; color: var(--muted); }
.icon-svg {
  width: var(--icon);
  height: var(--icon);
  flex: 0 0 var(--icon);
  display: inline-flex;
}
.icon-svg svg {
  width: var(--icon);
  height: var(--icon);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-svg-fill svg {
  width: var(--icon);
  height: var(--icon);
  stroke: none;
  fill: currentColor;
}
.danger { color: #e08a7a; }
.hidden { display: none !important; }
.muted { color: var(--muted-strong); }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--gold); color: var(--navy); padding: 8px 14px; z-index: 20;
}
.skip:focus { left: 12px; top: 12px; }

.sidebar {
  background: var(--navy-deep);
  border-right: 1px solid var(--line-soft);
  padding: 8px 8px 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.side-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 28px;
  margin-bottom: 4px;
  padding: 0 4px;
}
.side-chrome-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.ws-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  height: var(--control-h);
  background: transparent;
  border: 0;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: var(--ui);
  font-weight: 500;
  color: var(--paper);
  text-align: left;
}
.ws-switch:hover { background: color-mix(in srgb, var(--midground-base) 6%, transparent); }
#workspaceName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-menu {
  margin: 0 4px 12px;
  padding: 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--midground-base) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--midground-base) 8%, transparent);
}
.ws-row {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-sm);
}
.ws-row.on { background: color-mix(in srgb, var(--midground-base) 8%, transparent); }
.ws-row:hover { background: color-mix(in srgb, var(--midground-base) 6%, transparent); }
.ws-item, .ws-add {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--control-h);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font-size: var(--ui);
  color: var(--paper);
}
.ws-item { flex: 1; min-width: 0; overflow: hidden; }
.ws-item.on { background: transparent; }
.ws-item:hover, .ws-add:hover { background: color-mix(in srgb, var(--midground-base) 6%, transparent); }
.ws-row .ws-item:hover { background: transparent; }
.ws-more {
  flex: 0 0 28px;
  width: 28px;
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 0;
  opacity: 0;
  border-radius: var(--radius-sm);
}
.ws-row:hover .ws-more,
.ws-row.menu-open .ws-more,
.ws-more:focus-visible { opacity: 1; }
.ws-more:hover { color: var(--paper); background: var(--gold-dim); }
.ws-add { color: var(--muted); margin-top: 4px; }
.side-toggle {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  justify-content: center;
  border-radius: 10px;
  color: var(--muted);
}
.side-toggle:hover { color: var(--paper); background: var(--gold-dim); }
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: var(--paper);
}
.brand-mark {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--gold);
  flex: 0 0 auto;
}
.brand-word {
  font-family: var(--theme-font-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.brand-product {
  margin: 6px 0 22px;
  font-family: var(--theme-font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-lt);
}
.side-block { margin-bottom: 22px; }
.side-projects { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.side-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin: 10px 8px 4px;
}
.side-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.sidebar select { width: 100%; }
.project-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: auto;
}
.proj-row {
  display: flex;
  align-items: stretch;
  border-radius: 6px;
}
.proj-row.on {
  background: color-mix(in srgb, var(--midground-base) 8%, transparent);
}
.proj-row.archived .proj-name { color: var(--muted); }
.empty-workspace {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
  color: var(--paper);
}
.empty-workspace .muted { color: var(--muted); }
.proj-row:hover { background: color-mix(in srgb, var(--midground-base) 5%, transparent); }
.proj-open {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 5px 8px;
}
.proj-more {
  flex: 0 0 28px;
  width: 28px;
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 0;
  opacity: 0;
}
.proj-row:hover .proj-more,
.proj-row.menu-open .proj-more,
.proj-more:focus-visible { opacity: 1; }
.proj-more:hover { color: var(--paper); background: var(--gold-dim); }
.settings-nav-group { display: none; flex-direction: column; gap: 2px; }
body.settings-account .settings-nav-group[data-scope="account"],
body.settings-workspace .settings-nav-group[data-scope="workspace"],
body.settings-project .settings-nav-group[data-scope="project"] { display: flex; }
#settingsProjectSelect {
  width: 100%;
  margin: 0 0 8px;
  font-size: var(--ui);
}
.proj-name { font-size: var(--ui); font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-add {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--control-h);
  margin-top: 2px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font-size: var(--ui);
  color: var(--muted);
  text-align: left;
}
.proj-add:hover { background: color-mix(in srgb, var(--midground-base) 6%, transparent); color: var(--paper); }
.side-foot { display: flex; flex-direction: column; gap: 4px; }
.nav-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--control-h);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  text-align: left;
  padding: 0 10px;
  font-size: var(--ui);
  color: var(--muted);
  position: relative;
}
.nav-row:hover { background: color-mix(in srgb, var(--midground-base) 6%, transparent); border-color: transparent; color: var(--paper); }
.nav-row.on { color: var(--paper); background: color-mix(in srgb, var(--midground-base) 8%, transparent); }
.badge {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-size: 10px;
  font-weight: 700;
}
.counts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding: 0 10px;
  font-size: 11px;
  color: var(--muted);
}
.diag-box {
  margin-top: 10px;
  padding: 0 10px;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.diag-box button {
  text-align: left;
  background: transparent;
  border: 0;
  padding: 4px 0;
  color: var(--gold-lt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-status {
  font-size: 12px;
  color: var(--muted-strong);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-bottom: 8px;
}
.agent-log {
  margin: 0;
  max-height: 280px;
  overflow: auto;
  background: color-mix(in srgb, var(--midground-base) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--midground-base) 6%, transparent);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--muted-strong);
}
/* --- Diff view (TZ-REVIEW-LOOP) --- */
.diff-view {
  max-height: 420px;
  overflow: auto;
  background: color-mix(in srgb, var(--midground-base) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--midground-base) 6%, transparent);
  border-radius: 12px;
  font-family: var(--theme-font-mono);
  font-size: 11px;
  line-height: 1.45;
}
.diff-file { border-bottom: 1px solid color-mix(in srgb, var(--midground-base) 8%, transparent); }
.diff-file:last-child { border-bottom: 0; }
.diff-file-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; cursor: pointer; user-select: none;
  position: sticky; top: 0;
  background: color-mix(in srgb, var(--background-base) 82%, transparent);
  backdrop-filter: blur(6px);
  font-family: var(--theme-font-sans);
  font-weight: 600;
}
.diff-file-head .stats-add { color: #4ade80; }
.diff-file-head .stats-del { color: #fb7185; }
.diff-file-head .caret { opacity: 0.6; }
.diff-lines { display: none; }
.diff-file.open .diff-lines { display: block; }
.diff-line {
  display: flex; white-space: pre; padding: 0 10px;
  cursor: pointer; position: relative;
}
.diff-line:hover { background: color-mix(in srgb, var(--midground-base) 8%, transparent); }
.diff-line .ln {
  flex: 0 0 34px; text-align: right; margin-right: 12px;
  color: var(--color-muted-foreground); opacity: 0.7; user-select: none;
}
.diff-line.add { background: color-mix(in srgb, #4ade80 12%, transparent); }
.diff-line.del { background: color-mix(in srgb, #fb7185 12%, transparent); }
.diff-line.hunk {
  color: var(--accent, var(--color-primary));
  background: color-mix(in srgb, var(--midground-base) 7%, transparent);
  cursor: default;
}
.diff-line.commented::after {
  content: "●"; margin-left: auto; color: var(--color-primary); font-size: 9px;
}
.diff-comment-form {
  display: flex; gap: 6px; padding: 8px 10px;
  border-top: 1px dashed color-mix(in srgb, var(--midground-base) 12%, transparent);
}
.diff-comment-form input { flex: 1; }
.diff-status { padding: 10px 12px; }
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block; margin-right: 6px; vertical-align: 1px;
}

.workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.toolbar {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: var(--bar);
  padding: 5px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  isolation: isolate;
  container-type: inline-size;
  container-name: toolbar;
}
.toolbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: color-mix(in srgb, var(--background-base) 88%, Canvas);
  backdrop-filter: blur(16px);
}
.toolbar-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex-wrap: nowrap;
}
.toolbar,
.toolbar button,
.toolbar input,
.toolbar select,
.toolbar h1,
.toolbar label,
.toolbar p,
.toolbar span {
  font-family: var(--sans);
  font-size: var(--ui);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
}
.filter-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.filter-tray.hidden { display: none !important; }
.filter-tray select {
  height: var(--control-h);
  min-height: var(--control-h);
  font-size: var(--ui);
  background: var(--fill);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  max-width: none;
}
body.page-settings #boardWorkspace,
body.page-insights #boardWorkspace { pointer-events: auto; }
body.page-settings #settingsPage,
body.page-insights #insightsPage {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: Canvas;
  background-image: linear-gradient(var(--navy), var(--navy));
}
#settingsPage[hidden],
#settingsPage.hidden,
#insightsPage[hidden],
#insightsPage.hidden {
  display: none !important;
}
body:not(.page-settings):not(.page-insights) #boardWorkspace {
  display: flex !important;
}
.settings-page {
  display: none;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--navy);
  padding: 12px 16px;
}
.settings-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--navy-mid);
}
.settings-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 16px 0;
}
.settings-back {
  height: var(--control-h);
  padding: 0 8px 0 4px;
  margin-left: -4px;
  color: var(--paper);
}
.settings-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 16px 8px;
  width: min(400px, 100%);
}
.settings-tabs button {
  height: 28px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: var(--ui);
  font-weight: 400;
}
.settings-tabs button.on {
  background: color-mix(in srgb, var(--midground-base) 6%, var(--navy-mid));
  border-color: var(--line);
  color: var(--paper);
}
.settings-head h1 {
  margin: 8px 0 0;
  padding: 0 4px;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
}
.settings-split {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px 16px;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.settings-nav .side-label {
  margin: 10px 8px 4px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--midground-base) 55%, transparent);
}
.settings-nav .settings-user + .side-label { margin-top: 4px; }
.invite-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 8px;
}
.invite-form input, .invite-form select { min-width: 0; }
.invite-link {
  display: flex;
  gap: 8px;
  align-items: center;
}
.invite-link input { flex: 1; font-family: var(--theme-font-mono); font-size: 12px; }
@media (max-width: 720px) {
  .invite-form { grid-template-columns: 1fr; }
}
.settings-nav button {
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: left;
  background: transparent;
  border: 0;
  min-height: var(--control-h);
  height: auto;
  padding: 6px 8px;
  font-size: var(--ui);
  font-weight: 400;
  color: color-mix(in srgb, var(--midground-base) 78%, transparent);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.settings-nav button span:not(.icon-svg) {
  min-width: 0;
  overflow-wrap: anywhere;
}
.settings-nav button .icon-svg { width: var(--icon); height: var(--icon); flex: 0 0 var(--icon); opacity: 0.85; }
.settings-nav button.on {
  color: var(--paper);
  background: color-mix(in srgb, var(--midground-base) 8%, transparent);
}
.settings-nav button:hover { background: color-mix(in srgb, var(--midground-base) 6%, transparent); }
.settings-user-meta { min-width: 0; }
.settings-user-meta div:first-child { font-size: var(--ui); }
.settings-user-meta .muted { font-size: 12px; }
.settings-main {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 32px 48px 8px;
  min-width: 0;
}
.settings-panel {
  max-width: 720px;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-panel h2 {
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
}
.settings-panel > .muted { margin: 0 0 12px; }
.settings-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--background-base) 55%, transparent);
  overflow: hidden;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}
.settings-row:last-child { border-bottom: 0; }
.settings-row > div { min-width: 0; flex: 1 1 auto; }
.settings-row .row-title { font-size: var(--ui); font-weight: 500; color: var(--paper); overflow-wrap: anywhere; }
.settings-row .muted { margin: 2px 0 0; font-size: 12px; max-width: 36rem; overflow-wrap: anywhere; }
.settings-row > button,
.settings-row > select,
.settings-row > input,
.settings-row > .switch,
.settings-row > label.switch,
.settings-row > .user-avatar {
  flex: 0 0 auto;
  max-width: 100%;
}
.settings-row > .settings-inline {
  flex: 0 1 192px;
  width: min(192px, 100%);
}
/* --- Settings sections (colibry-agent pattern: flat rows, section titles) --- */
.settings-section { margin: 18px 0 0; }
.settings-section-title {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.settings-card.flat {
  background: transparent;
  border: 0;
  border-radius: 0;
}
.settings-card.flat .settings-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.settings-card.flat .settings-row:last-child { border-bottom: 0; }
.settings-hint {
  display: block;
  margin-top: 6px;
  font-family: var(--theme-font-mono);
  font-size: 11px;
  color: var(--muted);
  opacity: 0.7;
}
.settings-saved { margin-top: 10px; font-size: 12px; }
.settings-pref-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.settings-page.prefs-dirty #savePrefs,
#savePrefs[data-dirty] {
  box-shadow: 0 0 0 1px var(--gold);
}
.settings-list-row {
  display: grid;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.settings-list-row:last-child { border-bottom: 0; }
.settings-list-row > select,
.settings-list-row > .settings-inline {
  justify-self: end;
  width: 192px;
  max-width: 100%;
}
.theme-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.theme-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}
.seg-mode,
.theme-mode {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 2px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--midground-base) 10%, transparent);
}
.seg-mode button,
.theme-mode button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 22px;
  padding: 2px 10px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
.seg-mode button .icon-svg,
.theme-mode button .icon-svg { width: 12px; height: 12px; }
.seg-mode button.on,
.theme-mode button.on {
  background: var(--color-card);
  color: var(--paper);
  box-shadow: 0 1px 2px color-mix(in srgb, #000 14%, transparent);
}
.seg-mode button:hover,
.theme-mode button:hover { color: var(--paper); }
.theme-follow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 2px 0 4px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.theme-follow.on {
  border-color: var(--gold);
  color: var(--paper);
  background: color-mix(in srgb, var(--midground-base) 10%, transparent);
}
.theme-search {
  width: 100%;
  height: var(--control-h);
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--midground-base) 5%, transparent);
  color: var(--paper);
  font-size: 12px;
}
.theme-search:focus { outline: none; border-color: color-mix(in srgb, var(--midground-base) 35%, var(--line)); }
.theme-swatches,
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-auto-rows: min-content;
  align-items: start;
  gap: 12px;
  max-height: 24rem;
  overflow-y: auto;
  margin: 4px 0 0;
  padding-right: 4px;
}
.theme-swatch,
.theme-card {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: start;
  width: 100%;
  height: auto;
  min-height: 148px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: Canvas;
  background-image: linear-gradient(
    color-mix(in srgb, var(--midground-base) 4%, var(--color-card)),
    color-mix(in srgb, var(--midground-base) 4%, var(--color-card))
  );
  color: var(--paper);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.theme-swatch:hover,
.theme-card:hover {
  background: color-mix(in srgb, var(--midground-base) 8%, transparent);
}
.theme-swatch.on,
.theme-card.on {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.theme-swatch-preview,
.theme-preview {
  display: flex;
  flex: 0 0 80px;
  height: 80px;
  min-height: 80px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid;
  box-shadow: 0 1px 2px color-mix(in srgb, #000 8%, transparent);
}
.theme-swatch-side,
.theme-preview-side {
  width: 48px;
  flex: 0 0 48px;
  border-right: 1px solid;
}
.theme-swatch-main,
.theme-preview-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.theme-swatch-line,
.theme-preview-bar {
  display: block;
  height: 10px;
  width: 4rem;
  border-radius: 999px;
}
.theme-swatch-line.is-short,
.theme-preview-bar.is-muted {
  width: 6rem;
  height: 8px;
  opacity: 0.7;
}
.theme-swatch-chip,
.theme-preview-chip {
  display: block;
  margin-top: auto;
  margin-left: auto;
  width: 4rem;
  height: 20px;
  border-radius: 999px;
  border: 1px solid;
}
.theme-swatch-name,
.theme-card-label {
  display: block;
  margin-top: 12px;
  padding: 0 4px;
  font-weight: 500;
}
.theme-card-desc {
  display: block;
  margin-top: 2px;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}
@media (max-width: 720px) {
  .theme-row-head { flex-direction: column; align-items: stretch; }
  .seg-mode, .theme-mode { width: 100%; }
  .settings-list-row > select { justify-self: stretch; width: 100%; }
}
/* Toggle switch (flat, tokens-only) */
.switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 36px;
  height: 20px;
  cursor: pointer;
  align-self: center;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--midground-base) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--midground-base) 18%, transparent);
  transition: background 0.15s ease;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  opacity: 0.75;
  transition: transform 0.15s ease;
}
.switch input:checked + .switch-track {
  background: var(--gold);
  border-color: var(--gold);
}
.switch input:checked + .switch-track::after {
  transform: translateX(16px);
  opacity: 1;
}
.switch input:focus-visible + .switch-track { outline: 2px solid var(--gold); outline-offset: 1px; }
.settings-inline {
  width: min(192px, 100%);
  max-width: 100%;
  height: var(--control-h);
  min-height: var(--control-h);
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--midground-base) 5%, transparent);
  border: 1px solid var(--stroke);
  font-size: var(--ui);
}
.settings-panel .user-avatar#accountAvatarLg {
  width: 40px;
  height: 40px;
  font-size: 12px;
}
.api-key-card .settings-row { align-items: flex-start; }
.api-key-list { padding: 4px 8px 12px; }
.api-key-empty { text-align: center; padding: 24px 8px; margin: 0; }
.api-key-table { display: flex; flex-direction: column; }
.api-key-head,
.api-key-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 110px 36px;
  gap: 8px;
  align-items: center;
  padding: 10px 8px;
  font-size: 12px;
}
.api-key-head { color: var(--muted); font-weight: 500; }
.api-key-row { border-top: 1px solid var(--line-soft); }
.api-key-row code {
  font-family: var(--theme-font-mono);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--line-soft);
  background: var(--navy);
}
.api-key-row .icon { width: 28px; height: 28px; color: var(--blocked); }
.api-key-once {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
#apiKeyOnce {
  font-family: var(--theme-font-mono);
  font-size: 12px;
  width: 100%;
}
.settings-panel .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--ui);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.field-def {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  margin: 6px 0;
  min-width: 0;
}
.drawer-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 12px;
}
.drawer-fields:empty { display: none; }
.events .event strong { font-weight: 500; }
.settings-panel .field input,
.settings-panel .field select,
.settings-panel .field textarea {
  text-transform: none;
  letter-spacing: 0;
  color: var(--paper);
  font-size: var(--ui);
}
@media (max-width: 720px) {
  .settings-split { grid-template-columns: 1fr; }
  .settings-nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line-soft); }
}
.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 0 1 auto;
}
#crumbWorkspace { color: var(--muted); font-size: var(--ui); flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb-sep { color: var(--muted); flex: 0 0 auto; }
.proj-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  border-radius: 8px;
  color: var(--paper);
}
.proj-switch:hover { background: color-mix(in srgb, var(--midground-base) 6%, transparent); }
.toolbar h1 {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--ui);
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.proj-menu {
  position: fixed;
  z-index: 20;
  min-width: 200px;
  padding: 8px;
  border-radius: 12px;
  background-color: Canvas;
  background-image: linear-gradient(var(--color-card), var(--color-card));
  color: var(--paper);
  border: 1px solid color-mix(in srgb, var(--midground-base) 10%, Canvas);
  box-shadow: var(--shadow-soft);
}
.toolbar-meta {
  margin: 0;
  font-size: var(--ui);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}
.toolbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
}
.toolbar-actions .toolbar-meta { margin: 0; }
.search-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--control-h);
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--midground-base) 5%, transparent);
  color: var(--muted);
  flex: 0 1 160px;
  min-width: 88px;
  max-width: 160px;
}
.search-wrap .icon-svg { width: var(--icon); height: var(--icon); flex: 0 0 var(--icon); }
.search {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: var(--control-h);
  font-family: var(--sans);
  font-size: var(--ui);
  font-weight: 400;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}
.search:focus { outline: none; }
.search-wrap:focus-within { outline: 1px solid var(--gold); outline-offset: 1px; }
.tool-btn {
  height: var(--control-h);
  padding: 0 8px;
  font-family: var(--sans);
  font-size: var(--ui);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
}
.toolbar-actions .btn-gold.tool-btn {
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: var(--ui);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding: 0 12px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.review-tool { position: relative; width: var(--control-h); padding: 0; justify-content: center; }
.review-tool .badge { position: absolute; top: 2px; right: 2px; }
/* Same hit target + glyph as Colibry titlebar layout-sidebar-left (24×24, 14px). */
.sidebar-trigger {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  justify-content: center;
  border-radius: 4px;
  color: var(--muted);
}
.sidebar-trigger:hover { color: var(--paper); background: var(--gold-dim); }
.sidebar-trigger .icon-svg,
.sidebar-trigger .icon-svg svg {
  width: var(--icon);
  height: var(--icon);
}
.toolbar-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  background: var(--line-soft);
  margin: 0 2px;
}
body.sidebar-collapsed .toolbar-sep { display: none; }
.push-setup { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.user-wrap { position: relative; }
.user-avatar {
  width: var(--control-h);
  height: var(--control-h);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--midground-base) 16%, transparent);
  color: var(--paper);
  font-size: 11px;
  font-weight: 500;
  display: grid;
  place-items: center;
}
.user-menu {
  position: fixed;
  z-index: 40;
  min-width: 220px;
  padding: 8px;
  border-radius: 12px;
  background-color: Canvas;
  background-image: linear-gradient(var(--color-card), var(--color-card));
  color: var(--paper);
  border: 1px solid color-mix(in srgb, var(--midground-base) 10%, Canvas);
  box-shadow: var(--shadow-soft);
}
.user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 12px;
}
.settings-user { padding: 8px 4px 12px; }
.user-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--control-h);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 10px;
  text-align: left;
}
.user-menu button:hover { background: color-mix(in srgb, var(--midground-base) 8%, transparent); }
.toolbar-right select { background: var(--navy-deep); max-width: 140px; }
.seg {
  display: flex;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 0;
  gap: 2px;
  flex: 0 1 auto;
  min-width: 0;
}
.seg button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--control-h);
  border: 0;
  background: transparent;
  padding: 0 6px;
  font-family: var(--sans);
  font-size: var(--ui);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex: 0 0 auto;
}
.seg button.on {
  background: color-mix(in srgb, var(--midground-base) 18%, transparent);
  box-shadow: inset 0 -2px 0 var(--gold);
  color: var(--paper);
  font-weight: 400;
}
.seg button:hover:not(.on) { background: color-mix(in srgb, var(--midground-base) 8%, transparent); }
.seg button .icon-svg { width: var(--icon); height: var(--icon); }

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  min-width: 0;
}
.check-row input { flex: 0 0 auto; margin-top: 3px; }
.check-row span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.check-row button {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 0 4px;
}
#drawerFiles { margin-top: 10px; }
#doctorBanner { color: var(--gold-lt); }
#guestBanner { color: var(--gold-lt); }
body.guest .host-only { display: none !important; }
.embed-only { display: none; }
html.embed .embed-only,
body.embed .embed-only { display: block; }
body.guest .agent-bar { display: none !important; }
body.embed:not(.sidebar-collapsed) { --side: 200px; }
html.embed,
html.embed body,
html[data-host-theme="1"],
html[data-host-glass="1"],
html[data-host-glass="1"] body,
body.embed,
body.embed .sidebar,
body.embed .toolbar,
body.embed .settings-page {
  background: transparent;
}
.waiting {
  margin: 10px 24px 0;
  padding: 8px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  font-size: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--midground-base) 4%, transparent);
}
.waiting button {
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 11px;
  background: transparent;
}

.board {
  display: flex;
  gap: 12px;
  padding: 16px 18px 22px;
  overflow: auto;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.column {
  position: relative;
  flex: 0 0 auto;
  width: var(--col-w);
  background: color-mix(in srgb, var(--midground-base) 3.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--midground-base) 6%, transparent);
  border-radius: 18px;
  min-height: 0;
  height: 100%;
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: background var(--motion), border-color var(--motion);
}
.column.drop, .column.col-over {
  background: color-mix(in srgb, var(--midground-base) 6%, transparent);
  border-color: color-mix(in srgb, var(--midground-base) 12%, transparent);
}
.column-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 2px 2px 2px 6px;
  font-size: var(--ui);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper);
  border-bottom: 0;
  cursor: grab;
  min-width: 0;
}
.col-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.col-count {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
.col-resize {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 2;
}
.cards { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 48px; overflow: auto; }
.quick-add {
  margin: 0;
  width: var(--control-h);
  height: var(--control-h);
  flex: 0 0 var(--control-h);
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 16px;
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
}
.quick-add:hover { background: color-mix(in srgb, var(--midground-base) 8%, transparent); color: var(--paper); border-color: transparent; }
.quick-add .icon-svg { width: var(--icon); height: var(--icon); }

.card {
  background: color-mix(in srgb, var(--midground-base) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--midground-base) 4%, transparent);
  border-radius: 16px;
  padding: var(--card-pad);
  cursor: grab;
  min-width: 0;
  animation: stagger-in var(--motion) both;
  animation-delay: calc(var(--i, 0) * 24ms);
}
.card-plan-body {
  margin: 8px 0 0;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--caption);
  line-height: 1.45;
  color: var(--muted-strong);
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}
.card.plan { cursor: default; }
.card.plan .card-top,
.card.plan .card-title { cursor: grab; }
.card.pri-urgent { border-left: 3px solid var(--destructive); }
.card.pri-high { border-left: 3px solid var(--gold); }
.card.pri-medium { border-left: 3px solid var(--muted-strong); }
.card.pri-low { border-left: 3px solid var(--line); }
.card.pri-none { border-left: none; }
.assignee-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold-dim);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex: 0 0 24px;
  font-family: var(--sans);
}
.card:hover {
  border-color: color-mix(in srgb, var(--midground-base) 8%, transparent);
  background: color-mix(in srgb, var(--midground-base) 7%, transparent);
  box-shadow: none;
}
.card.picked { border-color: transparent; background: var(--gold-dim); }
.card.dragging {
  opacity: 1;
  transform: rotate(2deg) scale(1.02);
  box-shadow: 0 12px 28px color-mix(in srgb, #000 35%, transparent);
  will-change: transform;
  z-index: 3;
}
.card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pick {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
.pick input { margin: 0; accent-color: var(--gold); }
.card.pri-urgent, .card.overdue { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--blocked) 45%, transparent); }
.card.pri-high { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--gold) 40%, transparent); }
.card.running { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--running) 40%, transparent); }
.card.review { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--review) 40%, transparent); }
.card-ref {
  font-size: var(--caption);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-title {
  margin: 4px 0 6px;
  font-weight: 500;
  font-size: var(--title);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-labels, .card-signals, .card-counts, .card-meta { display: flex; gap: 5px; flex-wrap: wrap; }
.card-labels { margin: -2px 0 6px; }
.column.stale { border-left: 3px solid color-mix(in srgb, var(--blocked) 70%, transparent); }
.column.stale .col-label { color: color-mix(in srgb, var(--midground-base) 62%, #f0877a); }
.col-count.wip-exceeded {
  background: color-mix(in srgb, var(--blocked) 30%, transparent);
  color: #ffb3a8;
  font-weight: 700;
}
.column-head.wip-over { border-bottom: 1px solid color-mix(in srgb, var(--blocked) 45%, transparent); }
.chip.age { font-family: var(--mono); font-size: 11px; opacity: 0.9; }
.chip.age:hover { opacity: 1; }
.card[data-status="running"] .chip.age { color: var(--running); }
.card[data-status="review"] .chip.age { color: var(--review); }
.card-run {
  font-size: 11px;
  color: var(--muted-strong);
  margin: 0 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-signals { margin-bottom: 4px; }
.pri, .chip {
  font-size: var(--caption);
  letter-spacing: 0;
  padding: 1px 6px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--midground-base) 8%, transparent);
  color: var(--muted-strong);
}
.pri.urgent, .pri.high, .chip.due.late { color: #e8b4ac; border-color: rgba(196, 92, 74, 0.45); }
.chip.due { color: var(--gold-lt); }

.list { padding: 8px 20px 28px; overflow: auto; }
.row-task {
  display: grid;
  grid-template-columns: 28px minmax(72px, 88px) minmax(72px, 100px) minmax(0, 1fr) minmax(0, 120px) 80px 88px;
  gap: 12px;
  padding: 12px 10px;
  min-height: var(--row-h);
  margin: 2px 0;
  border-bottom: 0;
  border-radius: 12px;
  cursor: pointer;
  align-items: center;
}
.row-task > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-task:hover { background: var(--navy-2); }
.row-task.picked { background: var(--gold-dim); }
.list-head {
  color: var(--muted);
  font-size: var(--ui);
  letter-spacing: 0;
  text-transform: none;
  cursor: default;
}
.list-head:hover { background: transparent; }

.sheet-mask {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--background-base) 45%, transparent);
  backdrop-filter: blur(8px);
  z-index: 5;
}
.drawer {
  position: fixed;
  top: 8px;
  right: 8px;
  bottom: 8px;
  width: min(840px, calc(100vw - var(--side, 264px) - 24px));
  max-width: calc(100vw - 16px);
  height: auto;
  font-size: var(--ui);
  background: color-mix(in srgb, var(--midground-base) 3.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--midground-base) 6%, transparent);
  border-radius: 18px;
  padding: 18px 22px 28px;
  overflow-x: hidden;
  overflow-y: auto;
  container-type: inline-size;
  z-index: 6;
  box-shadow: var(--shadow-soft);
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--motion), visibility 0s var(--motion);
}
.drawer.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--motion);
}
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; }
.drawer-head-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ref {
  font-size: var(--ui);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drawer-title {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  background: transparent;
  border: 0;
  min-height: 0;
  padding: 8px 0 12px;
  overflow-wrap: anywhere;
}
.drawer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
  gap: 24px;
  width: 100%;
  max-width: 100%;
}
.drawer-main, .drawer-side { min-width: 0; overflow-wrap: anywhere; }
@container (max-width: 640px) {
  .drawer-grid { grid-template-columns: 1fr; }
}
.drawer-body {
  width: 100%;
  min-height: 120px;
  background: color-mix(in srgb, var(--midground-base) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--midground-base) 6%, transparent);
  border-radius: 14px;
  resize: vertical;
}
.md { font-size: var(--ui); color: var(--muted-strong); margin: 10px 0 8px; overflow-wrap: anywhere; }
.drawer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 16px;
  width: 100%;
  max-width: 100%;
  border-bottom: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.drawer-tabs button {
  height: var(--control-h);
  background: transparent;
  border: 0;
  border-bottom: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--ui);
  letter-spacing: 0;
  text-transform: none;
  padding: 0 10px;
}
.drawer-tabs button[aria-selected="true"] {
  color: var(--paper);
  background: color-mix(in srgb, var(--midground-base) 12%, transparent);
  border-bottom-color: transparent;
}
.drawer-tab.hidden { display: none !important; }
.log-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
}
.log-tools input[type="search"] { flex: 1 1 140px; min-width: 0; }
.agent-live {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--muted-strong);
  margin-bottom: 8px;
}
.agent-live .chip { color: var(--paper); }
.md p { margin: 0 0 8px; }
.md ul, .md ol { margin: 0 0 8px; padding-left: 1.2em; }
.md h1, .md h2, .md h3 { margin: 12px 0 6px; font-size: 15px; }
.md code { background: color-mix(in srgb, var(--midground-base) 8%, transparent); padding: 1px 6px; border-radius: 6px; }
.props { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.props select, .props input { width: 100%; min-width: 0; max-width: 100%; }
.props label, dialog label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--ui);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.label-row { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip button { padding: 0 4px; border: 0; background: transparent; color: var(--muted); }
.meta { font-size: 12px; color: var(--muted-strong); white-space: pre-wrap; margin-bottom: 12px; }
.agent-bar, .timer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  align-items: center;
}
.agent-bar button, .timer-row button {
  height: var(--control-h);
  font-size: var(--ui);
  letter-spacing: 0;
  text-transform: none;
  background: var(--fill);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 12px;
}
.agent-bar button:hover, .timer-row button:hover {
  background: color-mix(in srgb, var(--midground-base) 10%, transparent);
  color: var(--paper);
}
.drawer-section h3 {
  margin: 16px 0 8px;
  font-size: var(--ui);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.subtask { display: flex; gap: 8px; padding: 6px 0; cursor: pointer; }
.comments, .events { display: flex; flex-direction: column; gap: 8px; }
.comment, .event {
  background: color-mix(in srgb, var(--midground-base) 4%, transparent);
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
}
.comment .who, .event .who { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.comment-form, .inline-form { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.comment-form input, .inline-form input { flex: 1 1 140px; min-width: 0; }
.comment-form button, .inline-form button { flex: 0 0 auto; }
.file-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 12px; }
.file-row a { color: var(--gold-lt); }

dialog {
  font-size: var(--ui);
  background: color-mix(in srgb, var(--midground-base) 3.5%, var(--background-base));
  color: var(--paper);
  border: 1px solid color-mix(in srgb, var(--midground-base) 6%, transparent);
  border-radius: 18px;
  padding: 20px 22px;
  width: min(480px, 92vw);
  max-width: calc(100vw - 32px);
  max-height: 90vh;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: var(--shadow-soft);
}
dialog::backdrop { background: color-mix(in srgb, var(--background-base) 50%, transparent); backdrop-filter: blur(8px); }
dialog .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: var(--ui);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
dialog .eyebrow::before { display: none; }
dialog h2 {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: var(--title);
  font-weight: 500;
  letter-spacing: 0;
}
dialog .lede { margin: 0 0 18px; color: var(--muted); max-width: 36rem; }
dialog form { display: flex; flex-direction: column; gap: 10px; }
dialog menu {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 0 0;
  margin: 8px 0 0;
}
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.row > * { min-width: 0; width: 100%; }
dialog input[type="date"] {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

#cloudAuthDialog { width: min(400px, 92vw); }
.auth-social { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }
.auth-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  background: color-mix(in srgb, var(--midground-base) 6%, transparent);
  border: 1px solid var(--line);
}
.auth-provider svg { flex: 0 0 auto; }
.auth-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 2px;
  color: var(--muted);
  font-size: var(--caption);
}
.auth-or::before, .auth-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}
.auth-or span { flex: 0 0 auto; }
#cloudAuthDialog menu { flex-wrap: wrap; }

#palette { width: min(540px, 92vw); padding: 12px; }
#palette input { width: 100%; background: var(--navy-deep); }
#paletteResults { margin-top: 8px; max-height: 360px; overflow: auto; }
#paletteResults button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  margin-bottom: 2px;
}

.bulk-bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--midground-base) 6%, var(--background-base));
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  z-index: 8;
  box-shadow: var(--shadow-soft);
}
.bulk-bar span { font-size: 12px; color: var(--gold-lt); padding: 0 6px; }
.bulk-bar select, .bulk-bar button { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--midground-base) 8%, var(--background-base));
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 10px 16px;
  z-index: 9;
  font-size: 13px;
  animation: toast-in var(--motion);
  box-shadow: var(--shadow-soft);
}
body.picking .toast { bottom: 72px; }
.empty {
  padding: 16px 8px;
  color: var(--muted-strong);
  font-size: 12px;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 8px;
  min-height: 132px;
  text-align: center;
}
.empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.empty-state p { margin: 0; }
.empty-art {
  width: 56px;
  height: 40px;
  background:
    linear-gradient(var(--gold-dim), var(--gold-dim)) 0 8px / 14px 24px no-repeat,
    linear-gradient(var(--line-soft), var(--line-soft)) 20px 4px / 14px 28px no-repeat,
    linear-gradient(var(--gold-dim), var(--gold-dim)) 40px 12px / 14px 20px no-repeat;
  opacity: 0.9;
}
.empty-create { margin-top: 4px; }
.skeleton {
  min-height: 72px;
  border-radius: var(--r);
  background: linear-gradient(90deg, var(--navy-mid) 0%, var(--gold-dim) 50%, var(--navy-mid) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
.spin { position: relative; }
.spin::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: 6px;
  border: 2px solid var(--line);
  border-top-color: var(--gold);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite;
  vertical-align: -1px;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes stagger-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@keyframes shimmer {
  to { background-position: -200% 0; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.cal, .gantt {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-nav, .gantt-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-nav h2, .gantt-nav h2 {
  margin: 0 auto 0 0;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
}
.cal-weekdays, .cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal-weekdays span {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 8px;
}
.cal-day {
  min-height: 104px;
  border: 1px solid var(--line-soft);
  padding: 6px;
  background: var(--navy-2);
}
.cal-day.out { opacity: 0.42; }
.cal-day.today { border-color: var(--gold); }
.cal-day .num {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.cal-day.today .num { background: var(--gold); color: var(--navy); }
.cal-chip {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 3px 6px;
  font-size: 11px;
  text-align: left;
  background: var(--navy-mid);
  border-left: 2px solid var(--gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-chip.overdue { border-left-color: var(--blocked); }
.cal-more { font-size: 11px; color: var(--muted); margin-top: 4px; background: transparent; border: 0; padding: 0; }
.cal-unscheduled { font-size: 12px; color: var(--muted); }
.cal-unscheduled button { margin: 0 6px 6px 0; }

.gantt-scroll { overflow: auto; border: 1px solid var(--line-soft); }
.gantt-table { min-width: 100%; }
.gantt-head, .gantt-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-bottom: 1px solid var(--line-soft);
  min-height: 36px;
}
.gantt-head { position: sticky; top: 0; background: var(--navy); z-index: 2; }
.gantt-name {
  padding: 8px 10px;
  border-right: 1px solid var(--line-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  background: transparent;
  text-align: left;
}
.gantt-track { position: relative; min-height: 36px; }
.gantt-days {
  display: grid;
  font-size: 10px;
  color: var(--muted);
  text-align: center;
}
.gantt-days span { padding: 8px 0; border-right: 1px solid var(--line-soft); }
.gantt-days span.today { color: var(--navy); background: var(--gold); }
.gantt-bar {
  position: absolute;
  top: 7px;
  height: 22px;
  background: var(--gold);
  color: var(--navy);
  font-size: 11px;
  font-weight: 600;
  line-height: 22px;
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
}
.gantt-bar.overdue { background: var(--blocked); color: var(--paper); }
.gantt-unscheduled { font-size: 12px; color: var(--muted); }

.ctx {
  position: fixed;
  z-index: 90;
  min-width: 200px;
  background-color: Canvas;
  background-image: linear-gradient(light-dark(#fffaf3, #0a2222), light-dark(#fffaf3, #0a2222));
  color: light-dark(#0d1b2a, #ffe6cb);
  border: 1px solid color-mix(in srgb, #000 12%, transparent);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.ctx button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--control-h);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font-size: var(--ui);
  color: var(--paper);
}
.ctx button:hover { background: color-mix(in srgb, var(--midground-base) 8%, transparent); }
.ctx button.danger { color: var(--blocked); }
.ctx .sep { height: 1px; background: color-mix(in srgb, var(--midground-base) 8%, transparent); margin: 4px 6px; }
.cal-pop {
  position: fixed;
  z-index: 7;
  width: 240px;
  background: var(--navy-2);
  border: 1px solid var(--line);
  padding: 8px;
}
.cal-pop button { display: block; width: 100%; text-align: left; margin-bottom: 4px; }
.help-keys { display: grid; gap: 8px; margin: 0 0 16px; }
.help-keys div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; font-size: 13px; }
.help-keys dt { color: var(--gold-lt); font-family: var(--sans); }
.help-keys dd { margin: 0; color: var(--muted); }
.settings-h { font-size: var(--ui); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--paper); margin: 16px 0 2px; }
.col-edit { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; min-width: 0; }
.col-edit input[type="text"] { flex: 1 1 auto; min-width: 0; }
.col-edit input[type="color"] { width: 36px; padding: 2px; height: 32px; flex: 0 0 auto; }
.link-row span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-bar { padding-right: 10px; }
.gantt-resize {
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  height: 100%;
  cursor: ew-resize;
  background: rgba(13, 27, 42, 0.25);
}
.link-row { display: flex; gap: 8px; align-items: center; padding: 4px 0; font-size: 12px; cursor: pointer; }
.link-row .kind { color: var(--muted); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }

.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  padding: 18px 24px 40px;
}
.insight-card {
  border: 1px solid var(--line-soft);
  padding: 12px 14px 16px;
  background: var(--navy-2);
}
.insight-card h2 { font-size: 13px; margin: 0 0 8px; }
.insight-stat { font-size: 18px; margin: 0 0 10px; color: var(--gold-lt); }
.insight-table { font-size: 12px; color: var(--muted); display: grid; gap: 4px; }
.insight-table div { display: flex; justify-content: space-between; gap: 8px; }
.budget-bar { height: 8px; background: var(--line-soft); }
.budget-bar span { display: block; height: 100%; background: var(--gold); width: 0; }
.gantt-bar.critical { outline: 1px solid var(--gold); }
.gantt-diamond {
  position: absolute;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background: var(--gold);
  border: 0;
  top: 10px;
}
.gantt-baseline {
  position: absolute;
  height: 4px;
  top: 4px;
  background: color-mix(in srgb, var(--midground-base) 35%, transparent);
}
.gantt-group { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-lt); padding: 8px 8px 2px; }
.replay-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.replay-view { font-size: 12px; border: 1px solid var(--line-soft); padding: 8px; max-height: 220px; overflow: auto; white-space: pre-wrap; }
.card-meta .eta { color: var(--gold-lt); }
.progress-wrap { margin: 8px 0; }
.progress { height: 6px; background: var(--line-soft); }
.progress span { display: block; height: 100%; width: 0; background: var(--gold); transition: width 160ms ease; }
.watchers { display: flex; gap: 4px; margin-left: auto; }
.watcher {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); color: var(--navy);
  font-size: 10px; display: grid; place-items: center;
}
.card-slot { min-height: 72px; }

.notify-wrap { position: relative; z-index: 80; }
.notify-btn { position: relative; }
.notify-btn .badge { position: absolute; top: -4px; right: -4px; min-width: 16px; }
.notify-panel {
  position: fixed;
  right: 16px;
  top: 52px;
  width: min(360px, 80vw);
  max-height: 70vh;
  overflow: auto;
  z-index: 81;
  background-color: Canvas;
  background-image: linear-gradient(light-dark(#fffaf3, #0a2222), light-dark(#fffaf3, #0a2222));
  color: light-dark(#0d1b2a, #ffe6cb);
  border: 1px solid color-mix(in srgb, #000 12%, transparent);
  border-radius: 16px;
  padding: 8px 0 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  transform: translateY(-6px);
  opacity: 0;
  pointer-events: none;
  isolation: isolate;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 160ms ease;
}
html[data-theme="light"] .notify-panel,
html[data-theme="nous-blue"] .notify-panel,
html[data-theme="nous"] .notify-panel,
html[data-theme="nous-alt"] .notify-panel,
html[data-theme="github"] .notify-panel {
  background-image: linear-gradient(#fffaf3, #fffaf3);
  color: #0d1b2a;
}
.notify-panel[hidden] { display: none !important; }
.notify-panel.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.notify-group { padding: 8px 12px 4px; }
.notify-group h3 {
  margin: 0 0 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.55;
}
.notify-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 4px;
  color: inherit;
  font-size: var(--ui);
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.notify-item:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.notify-item.unread { font-weight: 600; }
.mention-box {
  position: absolute;
  z-index: 30;
  background: var(--navy);
  border: 1px solid var(--line-soft);
  min-width: 160px;
}
.mention-box button { display: block; width: 100%; text-align: left; padding: 6px 10px; background: transparent; }
.webhook-row { font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); color: var(--muted-strong); }
@media (prefers-reduced-motion: reduce) {
  .notify-panel { transition: none; }
  .drawer, .drawer.open, .column, .toast, .card, .skeleton, .spin::after {
    transition: none !important;
    animation: none !important;
  }
  .card.dragging { transform: none; }
}

body.sidebar-collapsed .ws-switch,
body.sidebar-collapsed .ws-menu,
body.sidebar-collapsed .side-label,
body.sidebar-collapsed .side-label-row [data-i18n],
body.sidebar-collapsed .proj-name,
body.sidebar-collapsed .proj-more,
body.sidebar-collapsed .counts,
body.sidebar-collapsed .user-wrap,
body.sidebar-collapsed .nav-row > span:not(.icon-svg):not(.badge) {
  display: none !important;
}
body.sidebar-collapsed .side-chrome {
  justify-content: center;
  flex-direction: column;
  padding: 0;
  margin-bottom: 12px;
}
body.sidebar-collapsed .side-chrome-actions {
  flex-direction: column;
}
body.sidebar-collapsed .sidebar { padding: 10px 6px 16px; }
.side-brain { margin-top: auto; padding-top: 12px; }
.brain-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--control-h);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-foreground);
  font: inherit;
  cursor: pointer;
  padding: 0 10px;
}
.brain-btn:hover { background: var(--gold-dim); }
.brain-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--muted);
  flex: 0 0 auto;
}
.brain-dot.on { background: var(--done); }
.chip.rec {
  cursor: pointer;
  border: 1px dashed var(--color-border);
  background: transparent;
  font: inherit;
  color: inherit;
}
.desktop-only { display: none; }
html.desktop .desktop-only { display: block; }
html.desktop .settings-list-row.desktop-only { display: flex; }
html.desktop .settings-nav button.desktop-only,
html.desktop .settings-nav .side-label.desktop-only { display: flex; }
html.desktop #desktopAccount.desktop-only { display: block; }
html.desktop .settings-section.desktop-only { display: block; }
html.desktop article.settings-panel.desktop-only { display: none; }
html.desktop article.settings-panel.desktop-only:not(.hidden) { display: flex; }
/* .hidden must beat html.desktop .desktop-only — otherwise every App panel stays on screen. */
.hidden,
[hidden] {
  display: none !important;
}
html.desktop .desktop-only.hidden,
html.desktop .hidden.desktop-only {
  display: none !important;
}
#timerClock { font-variant-numeric: tabular-nums; font-size: 2rem; margin: 8px 0; }

.vs-spacer { flex: 0 0 auto; pointer-events: none; }
.card.kb-focus { outline: 2px solid var(--gold, #c4a24a); outline-offset: 2px; }
.chip.exec { font-variant: none; }
.brain-ask { display: block; margin-top: 8px; }
.brain-ask input {
  width: 100%;
  height: var(--control-h);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--fill);
  color: var(--color-foreground);
  padding: 0 10px;
  font: inherit;
}
.brain-modal { max-width: 560px; width: calc(100% - 32px); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-card); color: var(--color-foreground); padding: 20px; }
.brain-modal pre { white-space: pre-wrap; font-family: var(--sans); font-size: 13px; line-height: 1.45; max-height: 60vh; overflow: auto; }
body.sidebar-collapsed .side-brain { display: flex; justify-content: center; padding-top: 8px; }
body.sidebar-collapsed .side-brain [data-i18n],
body.sidebar-collapsed .brain-ask { display: none !important; }
body.sidebar-collapsed .brain-btn { width: auto; padding: 0 8px; justify-content: center; border: 0; }

body.sidebar-collapsed .side-block:not(.side-projects):not(.side-brain) { display: none; }
body.sidebar-collapsed .side-label-row { justify-content: center; margin: 0 0 8px; }
body.sidebar-collapsed #newProjectBtn {
  width: 100%;
  justify-content: center;
  padding: 8px;
}
body.sidebar-collapsed #newProjectBtn [data-i18n] { display: none !important; }
body.sidebar-collapsed .proj-row,
body.sidebar-collapsed .nav-row {
  justify-content: center;
}
body.sidebar-collapsed .proj-open {
  justify-content: center;
  padding: 8px;
}
body.sidebar-collapsed .nav-row { padding: 10px 0; }
body.sidebar-collapsed .nav-row .badge {
  position: absolute;
  top: 2px;
  right: 2px;
}
body.sidebar-collapsed .side-projects { margin-top: 4px; }

.icon-tool {
  width: var(--control-h);
  padding: 0;
  justify-content: center;
  gap: 0;
}
.icon-tool .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.toolbar-actions .btn-gold.tool-btn.icon-tool { padding: 0; width: var(--control-h); }
.settings-drill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  height: auto;
  padding: 12px 14px;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  color: var(--paper);
}
.settings-drill:last-child { border-bottom: 0; }
.settings-drill:hover { background: color-mix(in srgb, var(--midground-base) 6%, transparent); }
.settings-drill-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.settings-drill-body .muted { font-size: var(--caption); overflow-wrap: anywhere; }
.settings-drill > .icon-svg:last-child { opacity: 0.4; flex: 0 0 var(--icon); }
.settings-subback {
  align-self: flex-start;
  margin: 0 0 4px -4px;
  height: var(--control-h);
  padding: 0 8px 0 4px;
  gap: 4px;
}
.settings-panel[data-panel="connections"],
.settings-panel[data-panel="insights"] { max-width: 56rem; }
.settings-panel[data-panel="insights"] .insights-grid { padding: 4px 0 24px; }
.integrations-search {
  width: 100%;
  max-width: 100%;
  flex: none;
  margin: 4px 0 18px;
  height: 36px;
  min-width: 0;
}
.int-section { margin: 0 0 22px; min-width: 0; }
.int-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 12px;
}
.int-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  min-height: 128px;
  height: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--background-base) 40%, transparent);
  color: var(--paper);
}
.int-card:hover {
  background: color-mix(in srgb, var(--midground-base) 6%, transparent);
  border-color: color-mix(in srgb, var(--midground-base) 16%, transparent);
}
.int-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  background: color-mix(in srgb, var(--midground-base) 12%, transparent);
  color: var(--paper);
}
.int-logo .icon-svg,
.int-logo .icon-svg svg { width: 16px; height: 16px; }
.int-logo.int-github,
.int-logo.int-copilot { background: #24292f; color: #fff; }
.int-logo.int-gitlab { background: #FC6D26; color: #fff; }
.int-logo.int-bitbucket { background: #2684FF; color: #fff; }
.int-logo.int-slack { background: #4A154B; color: #fff; }
.int-logo.int-linear { background: #5E6AD2; color: #fff; }
.int-logo.int-jira,
.int-logo.int-confluence { background: #1868DB; color: #fff; }
.int-logo.int-notion,
.int-logo.int-cursor,
.int-logo.int-devin,
.int-logo.int-factory,
.int-logo.int-graphite,
.int-logo.int-grok,
.int-logo.int-xai,
.int-logo.int-anthropic { background: #111; color: #fff; }
.int-logo.int-figma { background: #0acf83; color: #111; }
.int-logo.int-telegram { background: #229ED9; color: #fff; }
.int-logo.int-email { background: #5c6bc0; color: #fff; }
.int-logo.int-discord { background: #5865F2; color: #fff; }
.int-logo.int-teams { background: #6264A7; color: #fff; }
.int-logo.int-intercom { background: #1F8DED; color: #fff; }
.int-logo.int-whatsapp { background: #25D366; color: #fff; }
.int-logo.int-zoom { background: #2D8CFF; color: #fff; }
.int-logo.int-colibry { background: #0D1B2A; color: #E8CC7A; }
.int-logo.int-claude { background: #D97757; color: #fff; }
.int-logo.int-codex,
.int-logo.int-chatgpt,
.int-logo.int-openai { background: #10A37F; color: #fff; }
.int-logo.int-opencode { background: #f76b15; color: #fff; }
.int-logo.int-windsurf { background: #0ea5e9; color: #fff; }
.int-logo.int-sentry { background: #362D59; color: #fff; }
.int-logo.int-gemini { background: #4285F4; color: #fff; }
.int-logo.int-perplexity { background: #20808D; color: #fff; }
.int-logo.int-sheets { background: #0F9D58; color: #fff; }
.int-logo.int-gcal { background: #4285F4; color: #fff; }
.int-logo.int-gdrive { background: #1FA463; color: #fff; }
.int-logo.int-trello { background: #0079BF; color: #fff; }
.int-logo.int-asana { background: #F06A6A; color: #fff; }
.int-logo.int-clickup { background: #7B68EE; color: #fff; }
.int-logo.int-monday { background: #FF3D57; color: #fff; }
.int-logo.int-zapier { background: #FF4A00; color: #fff; }
.int-logo.int-make { background: #6d00cc; color: #fff; }
.int-logo.int-n8n { background: #EA4B71; color: #fff; }
.int-logo.int-webhooks { background: #c4a24a; color: #0D1B2A; }
.int-logo.int-todoist { background: #E44332; color: #fff; }
.int-logo.int-zendesk { background: #03363D; color: #fff; }
.int-logo.int-hubspot { background: #FF7A59; color: #fff; }
.int-name { font-weight: 600; font-size: var(--ui); }
.int-status { font-size: var(--caption); color: var(--muted); }
.int-blurb {
  margin-top: 4px;
  font-size: var(--caption);
  line-height: 1.4;
  color: var(--muted-strong);
  overflow-wrap: anywhere;
}
.int-fallback { font-size: 12px; font-weight: 600; }
.int-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 0 12px;
  min-width: 0;
}
.int-detail-head .int-logo { width: 36px; height: 36px; border-radius: 10px; margin: 0; }
.int-detail-copy { min-width: 0; }
.int-detail-copy h2 { margin: 0; }
.int-detail-copy .muted { margin: 4px 0 0; }
.int-detail-card { overflow: hidden; }
.int-detail-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.int-overview { padding: 4px 16px 8px; }
.int-overview .settings-h { margin-top: 8px; }
.int-advanced {
  margin: 0;
  padding: 4px 16px 14px;
  min-width: 0;
}
.int-advanced summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--caption);
  padding: 8px 0;
}
.int-advanced .settings-row { padding-left: 0; padding-right: 0; }
.notify-types { display: block; margin: 0; }
.notify-types .settings-row { padding-left: 16px; padding-right: 16px; }
.quiet-hours { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; width: 100%; }
.quiet-hours .field { min-width: 0; }
.quiet-hours input[type="time"] { min-width: 0; max-width: 140px; }
@container toolbar (max-width: 1180px) {
  .toolbar-meta { display: none; }
}
@container toolbar (max-width: 960px) {
  .seg button [data-i18n] { display: none; }
  .seg button { padding: 0; width: var(--control-h); justify-content: center; gap: 0; }
}

@media (max-width: 900px) {
  body { grid-template-columns: 1fr; }
  body.sidebar-collapsed { --side: var(--side-rail); }
  .sidebar { display: none; }
  .drawer { left: 8px; right: 8px; width: auto; }
  .drawer-grid { grid-template-columns: 1fr; }
  .toolbar-row { flex-wrap: wrap; }
  .toolbar-actions { margin-left: 0; width: 100%; flex-wrap: nowrap; }
}

.chip.rfc { color: var(--gold-lt, #c4a24a); }
.chip.folder { font-family: var(--mono, ui-monospace, monospace); }
.folder-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.folder-copy { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.folder-name { font-size: var(--ui); }
.folder-path {
  width: 100%;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--midground-base) 22%, transparent);
  border-radius: var(--radius-sm, 6px);
  color: var(--color-muted-foreground, inherit);
  padding: 4px 8px;
}
.recent-folders { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.plans-anchor {
  margin: 16px 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--midground-base) 22%, transparent);
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--midground-base) 5%, transparent);
}
.plans-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.plan-col {
  border: 1px solid var(--color-border, #1a3333);
  border-radius: var(--radius-sm, 6px);
  padding: 10px;
  cursor: pointer;
  background: color-mix(in srgb, var(--midground-base) 6%, transparent);
}
.plan-col.selected {
  outline: 2px solid color-mix(in srgb, var(--midground-base) 55%, transparent);
}
.plan-col header {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.plan-body { max-height: 280px; overflow: auto; user-select: text; cursor: text; }
.plan-body * { user-select: text; }
.plan-form { display: flex; flex-direction: column; gap: 8px; }
.plan-lanes { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.plan-accept .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}