@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;
  --ui-scale: 1;
  --glass-tint: 72%;
  --glass-fade: 20%;
  --glass-frost: 12px;
  /* 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-pref="light"] { color-scheme: light; }
html[data-theme-pref="dark"] { color-scheme: dark; }
html[data-theme-pref="system"] {
  color-scheme: light dark;
  --background-base: light-dark(#F4EFE6, #041c1c);
  --midground-base: light-dark(#C4A24A, #ffe6cb);
  --color-foreground: light-dark(#0D1B2A, #ffe6cb);
  --color-muted-foreground: light-dark(#5c646e, #8aa090);
  --muted-strong: color-mix(in srgb, var(--color-foreground) 78%, transparent);
  --color-primary: light-dark(#8A6A1F, #ffe6cb);
  --color-card: light-dark(#fffaf3, #0a2222);
  --color-border: light-dark(#e4d9c8, #1a3333);
  --navy: var(--background-base);
  --navy-2: var(--color-card);
  --navy-mid: var(--color-card);
  --paper: var(--color-foreground);
  --muted: var(--color-muted-foreground);
  --gold: var(--color-primary);
  --line: var(--color-border);
  --line-soft: color-mix(in srgb, var(--color-border) 70%, transparent);
}
html[data-theme-pref="system"] .theme-mode [data-theme-mode="system"],
html[data-theme-pref="light"] .theme-mode [data-theme-mode="light"],
html[data-theme-pref="dark"] .theme-mode [data-theme-mode="dark"] {
  background: var(--color-card);
  color: var(--paper);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--midground-base) 55%, var(--paper));
}
[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: calc(var(--theme-base-size, 13px) * var(--ui-scale, 1));
  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);
}
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; }
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; }
#workspaceName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.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);
}
.project-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: auto;
}
.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-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-more:hover { color: var(--paper); background: var(--gold-dim); }
.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); }
.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;
}
.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;
}
.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));
}
body:not(.page-settings):not(.page-insights) #boardWorkspace {
  display: flex !important;
}
.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; }
}
.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; }
.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%;
}
.field-def {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  margin: 6px 0;
  min-width: 0;
}
.events .event strong { font-weight: 500; }
.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); }
.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);
}
.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;
}
.review-tool { position: relative; width: var(--control-h); padding: 0; justify-content: center; }
.review-tool .badge { position: absolute; top: 2px; right: 2px; }
.push-setup { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.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;
}
.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); }
.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; }
.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);
}
.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); }
.chip.age { font-family: var(--mono); font-size: 11px; opacity: 0.9; }
.chip.age:hover { opacity: 1; }
.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); }
.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;
}
.md { font-size: var(--ui); color: var(--muted-strong); margin: 10px 0 8px; overflow-wrap: anywhere; }
.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; }
.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; }
.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: 16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--background-base) 88%, #000);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  z-index: 40;
  box-shadow: var(--shadow-soft);
  pointer-events: auto;
}
.bulk-bar span { font-size: 12px; color: var(--muted); padding: 0 6px; letter-spacing: 0; text-transform: none; }
.bulk-bar select, .bulk-bar button {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  height: 26px;
  padding: 0 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--midground-base) 8%, transparent);
  border: 1px solid var(--line-soft);
  color: var(--paper);
}
.bulk-bar button.danger { color: var(--destructive, #c45c4a); }
.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-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.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); }
}
.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); }
.link-row span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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; }
.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; }
.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;
}
.notify-wrap { position: relative; z-index: 80; }
.notify-btn { position: relative; }
.notify-btn .badge { position: absolute; top: -4px; right: -4px; min-width: 16px; }
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-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); }
.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 #desktopAccount.desktop-only { display: block; }
html.desktop .sidebar {
  padding-top: 36px;
}
html.desktop .side-chrome {
  -webkit-app-region: drag;
}
html.desktop .side-chrome button,
html.desktop .side-chrome a,
html.desktop .side-chrome input,
html.desktop .side-chrome select {
  -webkit-app-region: no-drag;
}
html.desktop .settings-page,
html.desktop .settings-page * {
  -webkit-app-region: no-drag;
}
html.desktop .settings-page {
  padding-top: 36px;
}
html.desktop body.page-settings .sidebar {
  -webkit-app-region: no-drag;
}
.cloud-run-tab { display: none !important; }
#drawerWatchers:empty { display: none; }
.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; }
.chip.exec { font-variant: none; }
.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; }
.icon-tool {
  width: var(--control-h);
  padding: 0;
  justify-content: center;
  gap: 0;
}
.sr-only,
.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;
}
.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-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;
}
.notify-types { display: block; margin: 0; }
.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: 960px) {
  .seg button [data-i18n] { display: none; }
  .seg button { padding: 0; width: var(--control-h); justify-content: center; gap: 0; }
}
.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: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#planBody {
  min-height: min(36vh, 280px);
  font-size: var(--ui);
  line-height: 1.5;
}

#planNote {
  min-height: 64px;
}
.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; }
}