:root {
  color-scheme: light;
  --ink: #243044;
  --muted: #667386;
  --soft: #f4f7fb;
  --panel: rgba(255, 255, 255, 0.92);
  --line: #d8e2ef;
  --line-strong: #bac8da;
  --bg: #f3f6fb;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #fafcff;
  --surface-muted: #f5f8fc;
  --surface-selected: #edf4ff;
  --titlebar: #eef4fb;
  --titlebar-strong: #e5edf8;
  --chip-muted: #e8f0fa;
  --field: #ffffff;
  --placeholder: #b4bfcc;
  --nav: #e8f0fa;
  --nav-2: #f2f6fb;
  --rail-bg: #101a28;
  --rail-ink: #eef4fb;
  --rail-muted: #b7c5d8;
  --rail-border: #25354b;
  --rail-hover-bg: rgba(255, 255, 255, 0.08);
  --rail-active-bg: rgba(255, 255, 255, 0.13);
  --rail-icon-bg: rgba(255, 255, 255, 0.10);
  --rail-icon-ink: #dbeafe;
  --rail-profile-bg: rgba(255, 255, 255, 0.10);
  --rail-profile-border: rgba(255, 255, 255, 0.20);
  --topbar-bg: var(--nav-2);
  --topbar-ink: var(--ink);
  --topbar-muted: var(--muted);
  --topbar-border: var(--line-strong);
  --topbar-control-bg: color-mix(in srgb, var(--surface-raised) 76%, transparent);
  --topbar-control-border: var(--line);
  --topbar-control-hover-bg: var(--surface-raised);
  --topbar-active-bg: var(--accent-soft);
  --topbar-active-border: color-mix(in srgb, var(--accent) 58%, var(--line));
  --accent: #a6c5f6;
  --accent-ink: #244f8f;
  --accent-soft: #edf4ff;
  --green: #5d9d78;
  --green-soft: #edf8f0;
  --orange: #b27b35;
  --orange-soft: #fff4df;
  --purple: #806ec2;
  --purple-soft: #f1edff;
  --project-stack-1: #FFDAB3;
  --project-stack-1-ink: #243044;
  --project-stack-2: #C8AAAA;
  --project-stack-2-ink: #243044;
  --project-stack-3: #9F8383;
  --project-stack-3-ink: #111827;
  --project-stack-4: #574964;
  --project-stack-4-ink: #fffefa;
  --project-stack-5: #667386;
  --project-stack-5-ink: #fffefa;
  --project-stack-divider: color-mix(in srgb, var(--surface-raised) 82%, transparent);
  --danger: #b85a52;
  --danger-soft: #fff0ee;
  --not-installed-ink: var(--muted);
  --not-installed-bg: color-mix(in srgb, var(--surface-muted) 82%, var(--line-strong) 18%);
  --not-installed-border: color-mix(in srgb, var(--line) 72%, var(--line-strong) 28%);
  --embraid-red: #ed1c24;
  --ok: #5d9f78;
  --shadow: 0 14px 30px rgba(68, 83, 113, 0.1);
  --shadow-strong: 0 16px 34px rgba(45, 58, 83, 0.18);
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --app-bg: var(--bg);
  --pane-bg: var(--surface-soft);
  --panel-bg: var(--surface-raised);
  --panel-bg-subtle: var(--surface-soft);
  --panel-bg-muted: var(--surface-muted);
  --panel-bg-selected: var(--surface-selected);
  --panel-header-bg: var(--titlebar);
  --panel-header-bg-strong: var(--titlebar-strong);
  --row-bg: var(--surface-raised);
  --row-bg-subtle: var(--surface-soft);
  --row-bg-hover: var(--titlebar);
  --row-bg-selected: var(--surface-selected);
  --field-bg: var(--field);
  --tab-bg: var(--surface-soft);
  --tab-bg-active: var(--surface-selected);
  --chip-bg: var(--chip-muted);
  --border-soft: var(--line);
  --border-strong: var(--line-strong);
  --link-fg: var(--accent-ink);
  --link-hover-fg: var(--text-primary);
  --button-bg: var(--surface-raised);
  --button-fg: var(--ink);
  --button-border: var(--line);
  --button-hover-bg: var(--surface-selected);
  --button-hover-fg: var(--accent-ink);
  --button-hover-border: var(--line-strong);
  --status-ok-bg: var(--green-soft);
  --status-ok-fg: var(--green);
  --status-ok-border: color-mix(in srgb, var(--green) 56%, var(--line));
  --status-warn-bg: var(--orange-soft);
  --status-warn-fg: var(--orange);
  --status-warn-border: color-mix(in srgb, var(--orange) 56%, var(--line));
  --status-danger-bg: var(--danger-soft);
  --status-danger-fg: var(--danger);
  --status-danger-border: color-mix(in srgb, var(--danger) 56%, var(--line));
  --status-neutral-bg: var(--chip-muted);
  --status-neutral-fg: var(--muted);
  --status-neutral-border: var(--line);
  --graph-bg: var(--surface-muted);
  --graph-group-bg: color-mix(in srgb, var(--surface-soft) 62%, transparent);
  --graph-group-border: color-mix(in srgb, var(--line-strong) 64%, transparent);
  --terminal-bg: #182033;
  --terminal-fg: #dbeafe;
  --terminal-border: #aab7c7;
  --terminal-line-border: rgba(255, 255, 255, .06);
  --focus-ring: color-mix(in srgb, var(--accent) 42%, transparent);
  --shadow-card: var(--shadow);
  --radius-sm: 6px;
  --radius: 8px;
  font-family: "Open Sans", OpenSans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf3fb;
  --muted: #adb9c9;
  --soft: #1b2739;
  --panel: rgba(30, 42, 60, 0.96);
  --line: #3a4a60;
  --line-strong: #586a83;
  --bg: #151f2e;
  --surface: #1a2638;
  --surface-raised: #223149;
  --surface-soft: #1a2638;
  --surface-muted: #2a3a53;
  --surface-selected: #2d4363;
  --titlebar: #2a3a53;
  --titlebar-strong: #31445f;
  --chip-muted: #31445f;
  --field: #182335;
  --placeholder: #7f8fa4;
  --nav: #1a2638;
  --nav-2: #1d2a3f;
  --rail-bg: #0b1220;
  --rail-ink: #edf3fb;
  --rail-muted: #aebbd0;
  --rail-border: #1f2d43;
  --rail-hover-bg: rgba(255, 255, 255, 0.08);
  --rail-active-bg: rgba(155, 189, 242, 0.18);
  --rail-icon-bg: rgba(155, 189, 242, 0.16);
  --rail-icon-ink: #ecf4ff;
  --rail-profile-bg: rgba(255, 255, 255, 0.10);
  --rail-profile-border: rgba(255, 255, 255, 0.20);
  --topbar-bg: #182437;
  --topbar-ink: #edf3fb;
  --topbar-muted: #aebbd0;
  --topbar-border: #2f4058;
  --topbar-control-bg: rgba(255, 255, 255, 0.08);
  --topbar-control-border: rgba(255, 255, 255, 0.14);
  --topbar-control-hover-bg: rgba(255, 255, 255, 0.12);
  --topbar-active-bg: rgba(155, 189, 242, 0.18);
  --topbar-active-border: rgba(155, 189, 242, 0.42);
  --accent: #9bbdf2;
  --accent-ink: #ecf4ff;
  --accent-soft: #203754;
  --green: #9bd3ad;
  --green-soft: #193827;
  --orange: #e3bd79;
  --orange-soft: #3d2e1c;
  --purple: #c3b4f2;
  --purple-soft: #2d2746;
  --danger: #f0a19a;
  --danger-soft: #432326;
  --ok: #88c9a0;
  --shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
  --shadow-strong: 0 18px 42px rgba(0, 0, 0, 0.44);
}

[data-theme="graphite-mist"] {
  color-scheme: light;
  --ink: #24313a;
  --muted: #6a7780;
  --soft: #eef3f2;
  --panel: rgba(253, 254, 253, 0.94);
  --line: #d2dcda;
  --line-strong: #aebfbb;
  --bg: #eef3f2;
  --surface: #fbfdfc;
  --surface-raised: #ffffff;
  --surface-soft: #f4f8f7;
  --surface-muted: #eaf1ef;
  --surface-selected: #e5f3f0;
  --titlebar: #e8efed;
  --titlebar-strong: #dce7e4;
  --chip-muted: #dde9e6;
  --field: #ffffff;
  --placeholder: #a6b3b0;
  --nav: #dde8e6;
  --nav-2: #edf3f1;
  --rail-bg: #182226;
  --rail-ink: #f3f8f7;
  --rail-muted: #bfd0cc;
  --rail-border: #2a3d42;
  --rail-hover-bg: rgba(255, 255, 255, 0.08);
  --rail-active-bg: rgba(155, 207, 196, 0.18);
  --rail-icon-bg: rgba(155, 207, 196, 0.16);
  --rail-icon-ink: #e8fbf8;
  --rail-profile-bg: rgba(255, 255, 255, 0.10);
  --rail-profile-border: rgba(255, 255, 255, 0.20);
  --topbar-bg: #edf4f2;
  --topbar-ink: #24313a;
  --topbar-muted: #66766f;
  --topbar-border: #b8c9c5;
  --topbar-control-bg: rgba(255, 255, 255, 0.68);
  --topbar-control-border: #cfddda;
  --topbar-control-hover-bg: #ffffff;
  --topbar-active-bg: #e3f4f1;
  --topbar-active-border: #a8d8cf;
  --accent: #9bcfc4;
  --accent-ink: #205c55;
  --accent-soft: #e3f4f1;
  --green: #609a79;
  --green-soft: #e8f5ed;
  --orange: #a97c3c;
  --orange-soft: #fff3dc;
  --purple: #7d72aa;
  --purple-soft: #eeebfb;
  --danger: #b7625a;
  --danger-soft: #fff0ee;
  --ok: #609a79;
  --shadow: 0 14px 30px rgba(42, 60, 66, 0.11);
  --shadow-strong: 0 16px 34px rgba(42, 60, 66, 0.18);
}

[data-theme="nordic-slate"] {
  color-scheme: light;
  --ink: #223047;
  --muted: #66758b;
  --soft: #eff5fa;
  --panel: rgba(252, 254, 255, 0.94);
  --line: #d2dfeb;
  --line-strong: #adc1d4;
  --bg: #edf4fa;
  --surface: #fbfdff;
  --surface-raised: #ffffff;
  --surface-soft: #f3f8fc;
  --surface-muted: #e7f0f8;
  --surface-selected: #e5f1ff;
  --titlebar: #e6eff8;
  --titlebar-strong: #d9e7f3;
  --chip-muted: #ddeaf6;
  --field: #ffffff;
  --placeholder: #a8b6c5;
  --nav: #dce9f5;
  --nav-2: #eef5fb;
  --rail-bg: #172133;
  --rail-ink: #f1f7fc;
  --rail-muted: #bdcad9;
  --rail-border: #293a55;
  --rail-hover-bg: rgba(255, 255, 255, 0.08);
  --rail-active-bg: rgba(159, 200, 237, 0.18);
  --rail-icon-bg: rgba(159, 200, 237, 0.16);
  --rail-icon-ink: #edf7ff;
  --rail-profile-bg: rgba(255, 255, 255, 0.10);
  --rail-profile-border: rgba(255, 255, 255, 0.20);
  --topbar-bg: #eef5fb;
  --topbar-ink: #223047;
  --topbar-muted: #64758b;
  --topbar-border: #b9cada;
  --topbar-control-bg: rgba(255, 255, 255, 0.68);
  --topbar-control-border: #cfdeea;
  --topbar-control-hover-bg: #ffffff;
  --topbar-active-bg: #e7f3ff;
  --topbar-active-border: #abccec;
  --accent: #9fc8ed;
  --accent-ink: #285b88;
  --accent-soft: #e7f3ff;
  --green: #5e9b83;
  --green-soft: #e8f6f0;
  --orange: #ad7b3b;
  --orange-soft: #fff2dc;
  --purple: #7b75b8;
  --purple-soft: #eeedfb;
  --danger: #b85f64;
  --danger-soft: #fff0f1;
  --ok: #5e9b83;
  --shadow: 0 14px 30px rgba(48, 69, 96, 0.11);
  --shadow-strong: 0 16px 34px rgba(48, 69, 96, 0.18);
}

[data-theme="sage-paper"] {
  color-scheme: light;
  --ink: #26342f;
  --muted: #69786f;
  --soft: #f3f6ef;
  --panel: rgba(255, 255, 251, 0.94);
  --line: #d8e1d0;
  --line-strong: #b8c6ad;
  --bg: #f3f6ef;
  --surface: #fffefa;
  --surface-raised: #fffefa;
  --surface-soft: #f8faf3;
  --surface-muted: #edf3e7;
  --surface-selected: #e9f4e7;
  --titlebar: #ecf2e7;
  --titlebar-strong: #e0ead9;
  --chip-muted: #e2eddc;
  --field: #fffefa;
  --placeholder: #aab5a5;
  --nav: #e3ecdd;
  --nav-2: #f2f6ee;
  --rail-bg: #1a261f;
  --rail-ink: #f5f8f2;
  --rail-muted: #c3d0bd;
  --rail-border: #2d402f;
  --rail-hover-bg: rgba(255, 255, 255, 0.08);
  --rail-active-bg: rgba(168, 208, 164, 0.18);
  --rail-icon-bg: rgba(168, 208, 164, 0.16);
  --rail-icon-ink: #effbea;
  --rail-profile-bg: rgba(255, 255, 255, 0.10);
  --rail-profile-border: rgba(255, 255, 255, 0.20);
  --topbar-bg: #f2f6ee;
  --topbar-ink: #26342f;
  --topbar-muted: #68776e;
  --topbar-border: #bccbad;
  --topbar-control-bg: rgba(255, 255, 251, 0.70);
  --topbar-control-border: #d4dfcb;
  --topbar-control-hover-bg: #fffefa;
  --topbar-active-bg: #e9f5e8;
  --topbar-active-border: #acd5a8;
  --accent: #a8d0a4;
  --accent-ink: #315f35;
  --accent-soft: #e9f5e8;
  --green: #659b69;
  --green-soft: #eaf6e8;
  --orange: #a77d3e;
  --orange-soft: #fff3de;
  --purple: #7e74aa;
  --purple-soft: #efecfb;
  --danger: #b4645b;
  --danger-soft: #fff1ee;
  --ok: #659b69;
  --shadow: 0 14px 30px rgba(65, 82, 55, 0.10);
  --shadow-strong: 0 16px 34px rgba(65, 82, 55, 0.17);
}

[data-theme="midnight-pastel"] {
  color-scheme: dark;
  --ink: #eef5fb;
  --muted: #b3c0cf;
  --soft: #182236;
  --panel: rgba(31, 43, 65, 0.96);
  --line: #394a65;
  --line-strong: #60718c;
  --bg: #111a2b;
  --surface: #172236;
  --surface-raised: #202d46;
  --surface-soft: #172236;
  --surface-muted: #293a57;
  --surface-selected: #2a4668;
  --titlebar: #293a57;
  --titlebar-strong: #334a6d;
  --chip-muted: #344966;
  --field: #142034;
  --placeholder: #8192aa;
  --nav: #172236;
  --nav-2: #1a2840;
  --rail-bg: #09111f;
  --rail-ink: #eef5fb;
  --rail-muted: #b5c2d2;
  --rail-border: #1d2b43;
  --rail-hover-bg: rgba(255, 255, 255, 0.08);
  --rail-active-bg: rgba(156, 207, 240, 0.18);
  --rail-icon-bg: rgba(156, 207, 240, 0.16);
  --rail-icon-ink: #eff9ff;
  --rail-profile-bg: rgba(255, 255, 255, 0.10);
  --rail-profile-border: rgba(255, 255, 255, 0.20);
  --topbar-bg: #142034;
  --topbar-ink: #eef5fb;
  --topbar-muted: #b5c2d2;
  --topbar-border: #2c3d58;
  --topbar-control-bg: rgba(255, 255, 255, 0.08);
  --topbar-control-border: rgba(255, 255, 255, 0.14);
  --topbar-control-hover-bg: rgba(255, 255, 255, 0.12);
  --topbar-active-bg: rgba(156, 207, 240, 0.18);
  --topbar-active-border: rgba(156, 207, 240, 0.42);
  --accent: #9ccff0;
  --accent-ink: #f0f8ff;
  --accent-soft: #203b58;
  --green: #96d4b5;
  --green-soft: #19382d;
  --orange: #e5c18d;
  --orange-soft: #3d2f22;
  --purple: #c8b7f5;
  --purple-soft: #2f2949;
  --danger: #f0aaa4;
  --danger-soft: #43262a;
  --ok: #96d4b5;
  --shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
  --shadow-strong: 0 18px 42px rgba(0, 0, 0, 0.44);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

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

button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--ink);
  padding: 0 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
}

button:hover { border-color: var(--line-strong); }
button:disabled { cursor: not-allowed; opacity: .46; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.danger { background: var(--danger-soft); border-color: var(--status-danger-border); color: var(--danger); }
button.ghost { background: color-mix(in srgb, var(--surface-raised) 72%, transparent); color: var(--ink); border-color: var(--line); }
button.wide { width: 100%; margin-top: 14px; }

.button-link {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--ink);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
}

.button-link.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  min-height: 31px;
  padding: 5px 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
  font-weight: 400;
  opacity: 1;
}

textarea {
  resize: vertical;
  min-height: 74px;
}

label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

h1, h2, h3, h4, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 18px; line-height: 1.2; }
h2 { margin-bottom: 0; font-size: 16px; line-height: 1.25; }
h3 { margin-bottom: 8px; font-size: 14px; }
h4 { margin: 16px 0 8px; font-size: 13px; }
p { color: var(--muted); line-height: 1.45; }

.product-word {
  display: inline-flex;
  align-items: flex-end;
  white-space: nowrap;
  flex-wrap: nowrap;
  line-height: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.product-accent {
  color: var(--embraid-red) !important;
  -webkit-text-fill-color: var(--embraid-red);
  display: inline-block;
  font-size: 1em;
  line-height: inherit;
  font-weight: inherit;
}

.product-emery {
  gap: .12em;
  vertical-align: baseline;
}

.product-mark-e {
  display: inline-block;
  align-self: flex-end;
  width: 1.44em;
  height: 2em;
  margin-right: -.08em;
  flex: 0 0 auto;
  background: url("/assets/embraid-symbol-transparent.svg") center / contain no-repeat;
  transform: translateY(-.06em);
}

.product-rest {
  display: inline-block;
  align-self: flex-end;
  font-size: 1em;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1;
  padding-bottom: 0;
}

.auth-brand-panel .product-mark-e {
  background-image: url("/assets/embraid-symbol-inverted-transparent.svg");
}

[data-theme="dark"] .product-mark-e {
  background-image: url("/assets/embraid-symbol-inverted-transparent.svg");
}

[data-theme="midnight-pastel"] .product-mark-e {
  background-image: url("/assets/embraid-symbol-inverted-transparent.svg");
}

[data-theme="dark"] .login-brand img {
  filter: none;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-panel {
  width: min(520px, 100%);
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 24px;
  display: grid;
  gap: 14px;
}

.login-panel h1 { font-size: 25px; }

.login-brand {
  width: min(165px, 100%);
  aspect-ratio: 1352 / 614;
  max-height: 62px;
  display: grid;
  place-items: center start;
  overflow: visible;
}

.login-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.login-note {
  border: 1px solid var(--border-soft);
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  line-height: 1.4;
}

.auth-screen {
  place-items: stretch;
  padding: 0;
  background: var(--panel-bg-subtle);
}

.auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(390px, 45vw) minmax(420px, 1fr);
  background: var(--panel-bg);
}

.auth-brand-panel {
  position: relative;
  min-height: 100vh;
  height: 100vh;
  padding: 62px 64px 34px;
  display: grid;
  grid-template-rows: auto minmax(300px, 1fr) auto auto;
  gap: 34px;
  overflow: hidden;
  background: var(--rail-bg);
  color: var(--rail-ink);
}

.auth-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--rail-bg) 92%, var(--accent-soft));
  pointer-events: none;
}

.auth-brand-panel > * {
  position: relative;
  z-index: 1;
}

.auth-brand-top {
  display: grid;
  gap: 46px;
  align-content: start;
}

.auth-logo {
  width: 60px;
  min-width: 60px;
  height: 14px;
  display: grid;
  place-items: center start;
  overflow: visible;
}

.auth-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.auth-logo strong {
  color: var(--panel-bg);
  font-size: 13px;
}

.auth-product {
  display: grid;
  gap: 9px;
}

.auth-product strong {
  color: var(--panel-bg);
  font-size: 60px;
  line-height: 1;
  font-weight: 650;
}

.auth-product > span {
  max-width: 420px;
  color: var(--rail-muted);
  font-size: 14px;
}

.auth-workflow {
  width: min(100%, 690px);
  align-self: center;
  border: 1px solid color-mix(in srgb, var(--border-soft) 8%, transparent);
  border-radius: 8px;
  object-fit: contain;
  opacity: .86;
  filter: saturate(.92);
  box-shadow: 0 26px 70px color-mix(in srgb, var(--rail-bg) 28%, transparent);
}

.auth-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 560px;
  padding-top: 8px;
  color: var(--rail-muted);
  font-size: 12px;
}

.auth-status-row strong {
  color: var(--status-ok-fg);
  font-size: 12px;
}

.auth-footer {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) auto minmax(96px, 1fr);
  align-items: center;
  column-gap: 28px;
  min-width: 0;
}

.auth-footer .auth-logo {
  grid-column: 1;
  justify-self: start;
}

.auth-copyright {
  grid-column: 2;
  justify-self: center;
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 14px;
  white-space: nowrap;
  transform: translateY(4px);
}

.auth-panel {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px;
  background: var(--panel-bg-subtle);
}

.auth-panel-inner {
  width: min(520px, 100%);
  display: grid;
  gap: 22px;
}

.auth-tabs {
  width: fit-content;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg-muted);
}

.auth-tabs span {
  min-width: 86px;
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 750;
}

.auth-tabs span.active {
  background: var(--panel-bg);
  color: var(--ink);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--rail-bg) 08%, transparent);
}

.auth-copy {
  display: grid;
  gap: 9px;
}

.auth-copy h1 {
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: 0;
}

.auth-copy p:not(.eyebrow) {
  max-width: 500px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.auth-form {
  display: grid;
  gap: 14px;
}

.auth-form label {
  color: var(--text-primary);
  font-size: 13px;
}

.auth-form input,
.auth-form select {
  min-height: 46px;
  border-color: var(--border-soft);
  background: var(--panel-bg);
  font-size: 14px;
}

.auth-form input:focus,
.auth-form select:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: var(--accent);
}

.auth-submit {
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 760;
}

.auth-submit.secondary {
  margin-top: 0;
  background: var(--panel-bg);
  color: var(--ink);
}

.sso-block {
  display: grid;
  gap: 10px;
}

.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  color: var(--text-secondary);
  font-size: 12px;
}

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

.sso-button {
  min-height: 44px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  text-align: left;
  background: var(--panel-bg);
  color: var(--text-secondary);
  opacity: .76;
}

.sso-button:not(:disabled) {
  cursor: pointer;
  opacity: 1;
}

.sso-button.enterprise {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.sso-button em {
  padding: 2px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

.sso-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 800;
}

.sso-icon.microsoft {
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
}

.sso-icon.google {
  background: var(--panel-bg);
  border: 1px solid var(--border-soft);
  color: var(--link-fg);
}

.sso-icon.enterprise {
  background: var(--accent-soft);
  border: 1px solid var(--border-soft);
  color: var(--link-fg);
}

.auth-help {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.auth-help a {
  color: var(--accent);
}

.app-shell {
  min-width: 1024px;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
}

@media (max-width: 759px) {
  body:has(.app-shell) {
    overflow: hidden;
  }

  body:has(.app-shell)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: var(--bg);
  }

  body:has(.app-shell)::after {
    content: "Sorry, Emery is not supported in mobile form factor. Please resize your browser to at least 1024px wide.";
    position: fixed;
    left: 18px;
    right: 18px;
    top: 50%;
    z-index: 9999;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    min-height: 142px;
    padding: 24px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: var(--shadow-strong);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
  }
}

.topbar {
  height: 48px;
  display: grid;
  grid-template-columns: minmax(122px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: var(--nav-2);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.product-home {
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--topbar-ink);
  box-shadow: none;
  font-size: 20px;
  font-weight: 760;
  line-height: 1;
}

.product-home:hover {
  border-color: transparent;
  background: transparent;
  color: var(--topbar-ink);
}

.product-home .product-word {
  align-items: flex-end;
}

.product-home .product-mark-e {
  width: 1.08em;
  height: 1.5em;
  margin-right: -.03em;
  transform: translateY(.02em);
}

.product-home .product-rest {
  line-height: 1;
  padding-bottom: .05em;
}

.topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.message-envelope-button {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--topbar-control-border);
  border-radius: 999px;
  background: var(--topbar-control-bg);
  color: var(--topbar-ink);
  box-shadow: none;
}

.message-envelope-button:hover,
.message-envelope-button:focus-visible {
  border-color: var(--topbar-active-border);
  background: var(--topbar-control-hover-bg);
  color: var(--accent-ink);
}

.message-envelope-button.has-unread {
  border-color: var(--topbar-active-border);
  background: var(--topbar-active-bg);
  color: var(--accent-ink);
}

.message-envelope-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.message-envelope-badge {
  position: absolute;
  top: -3px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1px solid var(--surface);
  border-radius: 999px;
  background: var(--danger);
  color: var(--surface);
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
}

.persona-strip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  overflow: auto hidden;
}

.persona-strip > span {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.persona-chip {
  min-height: 28px;
  font-size: 11px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel-bg) 54%, transparent);
  border-color: var(--border-soft);
  white-space: nowrap;
}

.persona-chip.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.logout-button { min-height: 32px; }

.workspace {
  height: calc(100vh - 48px);
  min-height: 0;
  display: grid;
  grid-template-columns: 72px minmax(196px, 230px) minmax(520px, 1fr) clamp(248px, 20vw, 306px);
  gap: 0;
  position: relative;
}

.workspace.assistant-collapsed {
  grid-template-columns: 72px minmax(196px, 230px) minmax(520px, 1fr);
}

.icon-rail {
  grid-column: 1;
  grid-row: 1;
  min-height: calc(100vh - 48px);
  background: var(--chip-bg);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px 8px 12px;
  border-right: 1px solid var(--border-soft);
  position: sticky;
  top: 48px;
  z-index: 6;
}

.rail-primary {
  display: grid;
  grid-auto-rows: min-content;
  gap: 8px;
  align-content: start;
  min-height: 0;
}

.rail-button {
  width: 56px;
  min-height: 58px;
  padding: 5px 3px;
  display: grid;
  place-items: center;
  gap: 5px;
  color: var(--ink);
  background: transparent;
  border-color: transparent;
}

.rail-button.active {
  background: color-mix(in srgb, var(--panel-bg) 66%, transparent);
  border-color: var(--border-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.rail-button .rail-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.rail-button .rail-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}

.rail-button small { font-size: 9px; font-weight: 750; line-height: 1.1; }

.profile-menu {
  position: relative;
  justify-self: center;
  align-self: end;
  z-index: 8;
}

.profile-menu summary {
  width: 56px;
  min-height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rail-profile-border);
  border-radius: 12px;
  background: var(--rail-profile-bg);
  color: var(--rail-ink);
  cursor: pointer;
  list-style: none;
}

.profile-menu summary::-webkit-details-marker { display: none; }

.profile-menu summary span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--rail-icon-bg);
  color: var(--rail-icon-ink);
  font-size: 12px;
  font-weight: 900;
}

.profile-popover {
  position: absolute;
  left: 64px;
  bottom: 0;
  width: 244px;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: var(--shadow-strong);
  color: var(--text-primary);
}

.profile-identity {
  display: grid;
  gap: 1px;
  padding: 4px 5px 7px;
  border-bottom: 1px solid var(--border-soft);
}

.profile-popover strong {
  font-size: 12px;
  line-height: 1.25;
}

.profile-popover small {
  color: var(--text-secondary);
  overflow-wrap: anywhere;
  font-size: 10.5px;
  line-height: 1.25;
}

.profile-popover p {
  margin: 5px 5px 2px;
  color: var(--text-secondary);
  font-size: 9.5px;
  font-weight: 850;
  text-transform: uppercase;
}

.profile-personas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 5px 3px;
}

.profile-personas button {
  min-height: 23px;
  padding: 0 7px;
  font-size: 10.5px;
  font-weight: 750;
  white-space: normal;
  border-radius: 999px;
}

.profile-personas button.active {
  background: var(--accent-soft);
  border-color: var(--topbar-active-border);
  color: var(--accent-ink);
}

.profile-actions {
  display: grid;
  gap: 2px;
  padding-top: 5px;
  border-top: 1px solid var(--border-soft);
}

.profile-menu-item {
  width: 100%;
  min-height: 28px;
  justify-content: start;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  padding: 0 8px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
}

.profile-menu-item:hover {
  border-color: var(--border-soft);
  background: var(--row-bg-hover);
}

.profile-menu-item.danger {
  color: var(--danger);
}

.profile-menu-item.danger:hover {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border-soft));
  background: var(--danger-soft);
}

.pane, .assistant-pane {
  background: var(--panel);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.pane { padding: 10px 12px; }

.portfolio.pane { padding: 10px 12px; }

.portfolio {
  grid-column: 2;
  grid-row: 1;
  min-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  border-right: 1px solid var(--line);
  background: var(--surface-soft);
  overflow: auto;
}

.project-rail-head, .pane-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.project-rail-head { margin-bottom: 0; align-items: center; }
.project-rail-head div { display: flex; gap: 8px; }
.project-rail-head button { width: 32px; padding: 0; }

.project-search span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.project-search {
  display: grid;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.project-search input {
  background: var(--surface-soft);
}

.state-counts {
  display: grid;
  gap: 9px;
  padding: 6px 6px 2px;
}

.state-counts div {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.state-counts div:first-child {
  grid-template-columns: minmax(0, 1fr) auto;
  padding-bottom: 8px;
}

.state-counts div:first-child i { display: none; }
.state-counts i { width: 7px; height: 7px; border-radius: 999px; background: var(--border-strong); }
.state-counts strong { color: var(--ink); }

.project-list, .queue-list, .activity-list {
  display: grid;
  gap: 6px;
  border: 0;
  border-radius: 0;
  overflow: auto;
  background: transparent;
  min-height: 0;
  align-content: start;
}

.portfolio .project-list {
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.rail-work-queue {
  display: grid;
  gap: 6px;
  align-self: start;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.rail-work-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}

.rail-work-queue-head h3 {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.rail-work-queue-head span {
  min-width: 20px;
  min-height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.rail-work-queue-list {
  display: grid;
  gap: 6px;
  align-content: start;
}

.rail-work-queue-row {
  width: 100%;
  min-height: 58px;
  align-self: start;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 3px 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--ink);
  text-align: left;
}

.rail-work-queue-row:hover {
  background: var(--surface-selected);
  border-color: var(--line-strong);
}

.rail-work-queue-row.focused {
  border-color: var(--accent);
  background: var(--surface-selected);
  box-shadow: inset 3px 0 0 var(--accent);
}

.rail-work-queue-row.focused .rail-work-queue-priority {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.rail-work-queue-row strong {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.rail-work-queue-row small {
  grid-column: 2;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.rail-work-queue-priority {
  min-width: 46px;
  min-height: 17px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.rail-work-queue-row.high .rail-work-queue-priority {
  border-color: var(--status-danger-border);
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
}

.rail-work-queue-row.medium .rail-work-queue-priority {
  border-color: var(--status-warn-border);
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
}

.rail-work-queue-row.low .rail-work-queue-priority {
  border-color: var(--status-info-border);
  background: var(--status-info-bg);
  color: var(--status-info-fg);
}

.rail-work-queue-empty {
  padding: 9px 8px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-size: 12px;
}

.rail-assigned-work {
  display: grid;
  gap: 6px;
  align-self: start;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.rail-assigned-work-list {
  display: grid;
  gap: 5px;
  max-height: none;
  overflow: visible;
  padding-right: 2px;
  align-content: start;
}

.rail-assigned-work-group {
  display: grid;
  gap: 5px;
}

.rail-assigned-work-group + .rail-assigned-work-group {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.rail-assigned-work-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.rail-assigned-work-group-head span {
  min-width: 20px;
  min-height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 10px;
}

.rail-assigned-work-row {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--ink);
  text-align: left;
}

.rail-assigned-work-row.selected {
  border-color: var(--accent);
  background: var(--surface-selected);
  box-shadow: inset 3px 0 0 var(--accent);
}

.rail-assigned-work-row:hover {
  border-color: var(--line-strong);
  background: var(--surface-selected);
}

.rail-assigned-work-row strong {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.2;
}

.rail-assigned-work-row span {
  justify-self: end;
  max-width: 104px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-assigned-work-row small {
  grid-column: 1;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-assigned-work-row em {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: start;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.developer-workbench {
  display: grid;
  gap: 10px;
}

.work-thread-workbench {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.work-thread-rail,
.work-thread-stage {
  min-width: 0;
}

.work-thread-rail {
  display: grid;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.work-thread-rail-head h3 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 15px;
}

.work-thread-group {
  display: grid;
  gap: 7px;
}

.work-thread-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.work-thread-group-head span {
  min-width: 20px;
  min-height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
}

.work-thread-list {
  display: grid;
  gap: 7px;
}

.work-thread-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  width: 100%;
  min-height: 76px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
  text-align: left;
}

.work-thread-row.selected {
  border-color: var(--accent);
  background: var(--surface-selected);
  box-shadow: inset 3px 0 0 var(--accent);
}

.work-thread-row.warn {
  border-color: var(--status-warn-border);
}

.work-thread-row.ok {
  border-color: var(--status-ok-border);
}

.work-thread-marker {
  grid-row: 1 / span 4;
  width: 8px;
  height: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-muted);
}

.work-thread-row.active .work-thread-marker,
.work-thread-row.selected .work-thread-marker {
  border-color: var(--accent);
  background: var(--accent);
}

.work-thread-row.warn .work-thread-marker {
  border-color: var(--warning);
  background: var(--warning);
}

.work-thread-row.ok .work-thread-marker {
  border-color: var(--green);
  background: var(--green);
}

.work-thread-row strong {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
}

.work-thread-row small {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-thread-row b {
  justify-self: end;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.work-thread-row em {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
}

.work-thread-stage {
  display: grid;
  gap: 10px;
}

.work-thread-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.work-thread-tabs button {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 14px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.work-thread-tabs button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.work-thread-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  container-type: inline-size;
}

.work-thread-panel.info {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.work-thread-panel.info .developer-story-brief {
  grid-column: 1 / -1;
}

.thread-artifacts-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 10px;
  align-items: start;
}

.thread-artifacts-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.thread-artifact-registry {
  align-content: start;
}

.thread-artifacts-archive {
  display: grid;
  gap: 10px;
}

.thread-archive-summary dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 0;
}

.thread-archive-summary dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.thread-archive-summary dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.thread-archive-stage-list {
  display: grid;
  gap: 9px;
}

.thread-archive-stage {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
}

.thread-archive-stage.done {
  border-color: var(--status-ok-border);
}

.thread-archive-stage.current {
  border-color: var(--status-warn-border);
}

.thread-archive-stage-head {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.thread-archive-check {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--surface);
  font-size: 12px;
  font-weight: 900;
  background: var(--surface-soft);
}

.thread-archive-check.done {
  border-color: var(--status-ok-border);
  background: var(--status-ok-fg);
}

.thread-archive-stage-head strong {
  color: var(--ink);
  font-size: 13px;
}

.thread-archive-stage-head p,
.thread-archive-stage-meta,
.thread-archive-missing small,
.thread-archive-artifact-row small {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.thread-archive-stage-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.thread-archive-stage-meta span {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  font-weight: 800;
}

.thread-archive-artifact-list {
  display: grid;
  gap: 6px;
}

.thread-archive-artifact-row,
.thread-archive-missing {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
  text-align: left;
}

.thread-archive-artifact-row strong,
.thread-archive-missing strong {
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
}

.thread-archive-artifact-row b {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.thread-archive-missing button {
  justify-self: end;
  max-width: 190px;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.thread-archive-file-icon,
.thread-archive-missing span {
  width: 14px;
  height: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
}

.thread-archive-file-icon {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
}

.work-thread-work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(245px, 310px);
  gap: 10px;
  align-items: start;
}

.work-thread-lifecycle-strip {
  min-width: 0;
}

.functional-progress-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(116px, 1fr);
  gap: 0;
  align-items: center;
  overflow: auto hidden;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.functional-progress-stage {
  min-width: 112px;
  display: grid;
  justify-items: center;
  gap: 5px;
  min-height: 72px;
  padding: 6px 4px;
  color: var(--muted);
  text-align: center;
}

.functional-progress-stage span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid var(--line-strong);
  color: var(--muted);
  background: var(--surface-raised);
  font-size: 12px;
  font-weight: 900;
}

.functional-progress-stage.done span {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 52%, var(--border-soft));
  background: var(--green-soft);
}

.functional-progress-stage.current {
  color: var(--accent-ink);
}

.functional-progress-stage.current span {
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: var(--accent-soft);
}

.functional-progress-stage strong {
  min-width: 0;
  max-width: 112px;
  font-size: 11px;
  line-height: 1.18;
}

.functional-progress-stage em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.work-thread-context-panels {
  display: grid;
  grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr);
  gap: 10px;
  align-items: start;
}

.developer-work-jigsaw-grid {
  --developer-tile-width: clamp(220px, 18vw, 270px);
  --developer-compact-panel-height: 236px;
  display: grid;
  grid-template-columns: minmax(0, calc(var(--developer-tile-width) * 2 + 10px)) minmax(420px, 1fr);
  grid-template-areas: "left process";
  gap: 10px;
  align-items: start;
}

.developer-work-jigsaw-left {
  grid-area: left;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--developer-tile-width) var(--developer-tile-width);
  grid-template-rows: var(--developer-compact-panel-height) auto auto;
  grid-template-areas:
    "mode evidence"
    "action action"
    "agent agent";
  gap: 10px;
  align-items: start;
}

.developer-work-jigsaw-grid > * {
  min-width: 0;
  display: grid;
}

.developer-work-jigsaw-grid > * > .developer-process-panel,
.developer-work-jigsaw-grid > * > .developer-side-card {
  height: 100%;
}

.developer-work-mode-cell {
  grid-area: mode;
  align-self: start;
}

.developer-next-evidence-cell {
  grid-area: evidence;
  align-self: start;
}

.developer-process-cell {
  grid-area: process;
  min-width: 0;
  display: grid;
}

.developer-mode-action-cell {
  grid-area: action;
  align-self: start;
}

.developer-work-mode-cell > .work-mode-panel,
.developer-mode-action-cell > .mode-action-panel {
  height: auto;
  align-self: start;
}

.developer-work-mode-cell > .work-mode-panel,
.developer-next-evidence-cell > .next-evidence-panel {
  height: var(--developer-compact-panel-height);
  min-height: var(--developer-compact-panel-height);
  max-height: var(--developer-compact-panel-height);
  overflow: hidden;
  align-self: start;
}

.developer-agent-activity-cell {
  grid-area: agent;
  min-width: 0;
  display: grid;
  align-self: start;
}

@container (max-width: 980px) {
  .developer-work-jigsaw-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "left"
      "process";
  }

  .developer-work-jigsaw-left {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@container (max-width: 560px) {
  .developer-work-jigsaw-grid {
    --developer-compact-panel-height: auto;
  }

  .developer-work-jigsaw-left {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "mode"
      "evidence"
      "action"
      "agent";
  }

  .developer-work-mode-cell > .work-mode-panel,
  .developer-next-evidence-cell > .next-evidence-panel {
    height: auto;
    min-height: 0;
    max-height: none;
  }
}

.developer-workbench-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.developer-workbench-hero h2 {
  margin: 2px 0 8px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.developer-workbench-hero p:not(.eyebrow) {
  max-width: 820px;
  margin: -2px 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.developer-workbench-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.developer-workbench-meta span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.developer-workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 318px);
  gap: 10px;
  align-items: start;
}

.gate-command-center {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.gate-command-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 0 2px 2px;
}

.gate-command-head h3 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 14px;
}

.gate-command-head > .badge {
  justify-self: start;
}

.named-gate-panel p,
.gate-evidence {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.gate-command-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.gate-command-grid.single {
  grid-template-columns: minmax(0, 1fr);
}

.named-gate-panel,
.gate-runbook-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
}

.named-gate-panel.warn,
.named-gate-panel.process.warn {
  border-color: var(--status-warn-border);
  background: var(--status-warn-bg);
  box-shadow: inset 3px 0 0 var(--warning);
}

.named-gate-panel.ok {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
}

.named-gate-panel.info {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  background: var(--surface-selected);
}

.gate-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.gate-panel-head span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.gate-panel-head strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.gate-panel-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
}

.gate-panel-head b {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.gate-panel-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.gate-panel-facts div {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.gate-panel-facts span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.gate-panel-facts strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
}

.gate-panel-action {
  display: flex;
  justify-content: flex-end;
}

.gate-runbook-list {
  display: grid;
  gap: 7px;
}

.gate-runbook-panel {
  align-content: start;
}

.gate-runbook-panel > summary {
  cursor: pointer;
  align-items: center;
  list-style: none;
}

.gate-runbook-panel > summary::-webkit-details-marker {
  display: none;
}

.gate-runbook-panel:not([open]) {
  background: var(--surface-soft);
}

.gate-runbook-chevron {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .16s ease;
}

.gate-runbook-panel[open] .gate-runbook-chevron {
  transform: rotate(225deg);
}

.gate-runbook-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.gate-runbook-row > span {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 999px;
  border: 2px solid var(--line-strong);
  background: var(--surface-muted);
}

.gate-runbook-row.done > span {
  border-color: var(--status-ok-border);
  background: var(--green);
}

.gate-runbook-row.current > span {
  border-color: var(--status-warn-border);
  background: var(--warning);
}

.gate-runbook-row strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
}

.gate-runbook-row p,
.gate-runbook-row small {
  display: block;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.developer-project-page {
  display: grid;
  gap: 10px;
}

.developer-project-sprints,
.developer-project-dependencies,
.developer-project-story-inventory {
  min-width: 0;
}

.developer-project-story-groups {
  display: grid;
  gap: 8px;
}

.developer-project-story-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.developer-project-story-row small {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
}

.developer-project-story-row-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.dependency-status-list {
  display: grid;
  gap: 8px;
}

.dependency-status-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.dependency-status-row.blocked {
  border-color: var(--status-warn-border);
  background: var(--status-warn-bg);
}

.dependency-status-row strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
}

.dependency-status-row p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.developer-story-picker,
.developer-process-panel,
.developer-side-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.developer-story-picker-head,
.developer-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.developer-story-picker-head h3,
.developer-panel-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.developer-panel-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.developer-story-picker-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.developer-story-picker-row {
  width: 100%;
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
  text-align: left;
}

.developer-story-picker-row.selected {
  border-color: var(--accent);
  background: var(--surface-selected);
  box-shadow: inset 3px 0 0 var(--accent);
}

.developer-story-picker-row strong {
  color: var(--ink);
  font-size: 13px;
}

.developer-story-picker-row span {
  color: var(--muted);
  font-size: 11px;
}

.developer-workbench-main,
.developer-workbench-side {
  display: grid;
  gap: 10px;
}

.developer-process-setup-panel.needs-setup {
  border-color: var(--status-warn-border);
  background: var(--status-warn-bg);
  box-shadow: inset 3px 0 0 var(--warning);
}

.developer-process-setup-panel.confirmed {
  background: var(--surface-raised);
}

.developer-mode-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.work-mode-panel {
  align-content: start;
  gap: 9px;
}

.work-mode-panel .developer-mode-strip {
  align-items: stretch;
}

.work-mode-panel .developer-mode-card {
  min-height: 44px;
  padding: 8px;
}

.work-mode-panel .drawer-actions.compact {
  justify-content: stretch;
}

.work-mode-panel .drawer-actions.compact button {
  width: 100%;
  min-height: 32px;
}

.developer-case-timeline {
  display: grid;
  gap: 8px;
}

.developer-case-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.developer-case-step > span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.developer-case-step.done > span {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
}

.developer-case-step.current {
  border-color: var(--accent);
  background: var(--surface-selected);
  box-shadow: inset 3px 0 0 var(--accent);
}

.developer-case-step.current > span {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.developer-case-step strong {
  color: var(--ink);
  font-size: 13px;
}

.developer-case-step p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.developer-case-step b {
  color: var(--muted);
  font-size: 11px;
}

.work-process-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  max-height: 205px;
  overflow-y: auto;
  padding-right: 4px;
}

.development-process-panel .developer-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.development-process-panel {
  align-content: start;
  gap: 8px;
}

.development-process-panel .developer-panel-head > button {
  max-width: 112px;
  white-space: normal;
}

.development-process-panel .work-process-list {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.work-process-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.work-process-row.process-node-row {
  grid-template-columns: 22px minmax(180px, 1.15fr) minmax(160px, .85fr);
}

.work-process-row > span {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.work-process-row.done > span {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
}

.work-process-row.current > span {
  border-color: var(--status-warn-border);
  background: var(--status-warn-bg);
  color: var(--warning);
}

.work-process-row.waived {
  border-color: var(--status-warn-border);
  background: var(--status-warn-bg);
}

.work-process-row p {
  margin: 0;
}

.work-process-row .process-node-result {
  padding-left: 8px;
  border-left: 1px solid var(--line);
}

.work-process-row strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
}

.work-process-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.work-process-row b {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.developer-mode-card {
  min-height: 48px;
  display: grid;
  gap: 5px;
  align-content: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
  text-align: left;
}

.developer-mode-card.active {
  border-color: var(--accent);
  background: var(--surface-selected);
}

.developer-mode-card:disabled:not(.active) {
  opacity: .58;
}

.developer-mode-card strong,
.developer-stage-card h4 {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.15;
}

.developer-mode-card span,
.developer-stage-card p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.28;
}

.work-mode-panel .developer-mode-card span {
  display: none;
}

.mode-action-panel {
  padding: 0;
  overflow: visible;
  align-content: start;
}

.mode-action-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}

.mode-action-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
}

.mode-action-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.mode-action-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
  gap: 10px;
  align-items: start;
  padding: 12px;
}

.mode-action-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  min-height: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.mode-action-card .developer-stage-actions {
  margin-top: 0;
}

.mode-action-card textarea {
  min-height: 86px;
}

.mode-action-card.compact {
  background: var(--surface-raised);
}

.mode-action-panel .mode-action-card.compact {
  gap: 8px;
}

.mode-action-panel .mode-action-card.compact .developer-panel-head h3 {
  font-size: 13px;
}

.mode-action-panel .mode-action-queue-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.mode-action-panel .mode-action-queue {
  min-height: 30px;
  padding: 6px;
}

.mode-action-panel .mode-action-queue strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mode-action-panel .mode-action-queue small {
  display: none;
}

.mode-action-card label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.mode-action-card select {
  min-height: 30px;
}

.mode-action-queue-list,
.mode-action-facts {
  display: grid;
  gap: 7px;
}

.mode-action-queue,
.mode-action-facts div {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.mode-action-queue.active {
  border-color: var(--accent);
  background: var(--surface-selected);
}

.mode-action-queue strong,
.mode-action-facts strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
}

.mode-action-queue small,
.mode-action-facts span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.next-evidence-panel {
  border-color: var(--status-warn-border);
}

.developer-process-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.developer-stage-card {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 186px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.developer-stage-card.done {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
}

.developer-stage-card.locked {
  opacity: .82;
}

.developer-stage-card h4,
.developer-stage-card p {
  margin: 0;
}

.developer-stage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  margin-top: auto;
}

.developer-stage-actions label {
  display: grid;
  gap: 4px;
  min-width: 160px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.developer-handoff-preview {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.developer-handoff-preview p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.policy-stack-preview {
  background: color-mix(in srgb, var(--surface-soft), var(--panel-bg) 35%);
}

.policy-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.policy-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-bg);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}

.policy-suggestion-list {
  display: grid;
  gap: 6px;
}

.policy-suggestion-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-bg);
}

.policy-suggestion-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.policy-suggestion-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.policy-suggestion-actions button {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 11px;
}

.policy-template-library,
.policy-binding-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.policy-template-row,
.policy-binding-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
}

.policy-template-row p,
.policy-template-row small,
.policy-binding-row small {
  display: block;
  margin: 4px 0 0;
  color: var(--muted);
}

.policy-binding-row span {
  color: var(--muted);
}

.thread-policy-workspace {
  display: grid;
  gap: 10px;
}

.thread-policy-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.thread-policy-section {
  display: grid;
  gap: 6px;
}

.thread-policy-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.thread-policy-section-head h4 {
  margin: 0;
  font-size: 13px;
}

.thread-policy-section-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.thread-policy-list {
  display: grid;
  gap: 4px;
}

.thread-policy-row {
  display: grid;
  min-height: 32px;
  padding: 5px 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.thread-policy-row summary {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

.thread-policy-row summary::-webkit-details-marker,
.personal-policy-row summary::-webkit-details-marker {
  display: none;
}

.thread-policy-row:last-child {
  border-bottom: 0;
}

.thread-policy-row pre,
.personal-policy-row pre {
  margin: 8px 0 4px 46px;
  padding: 8px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.thread-policy-check {
  display: grid;
  place-items: center;
}

.thread-policy-check input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.thread-policy-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.thread-policy-line strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.thread-policy-line small,
.thread-policy-binding-line {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-policy-row.enabled .thread-policy-line small {
  color: var(--accent);
}

.thread-policy-binding-line {
  padding-top: 2px;
}

.expandable-policy-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.chevron-caret {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: .68;
  transform: rotate(-45deg);
  transition: transform .14s ease;
}

details[open] > summary .chevron-caret {
  transform: rotate(45deg);
}

.personal-policy-add {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.personal-policy-add-row {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(130px, 170px) minmax(130px, 170px) auto;
  align-items: end;
  gap: 12px;
}

.personal-policy-add-row.instruction {
  grid-template-columns: minmax(0, 1fr) auto;
}

.personal-policy-add-row.instruction textarea {
  min-height: 72px;
}

.project-budget-form .personal-policy-add-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-budget-form .personal-policy-add-row.instruction {
  grid-template-columns: minmax(0, 1fr);
}

.project-budget-form label,
.project-budget-form input,
.project-budget-form select,
.project-budget-form textarea,
.project-budget-form button {
  min-width: 0;
}

.budget-mix-control {
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.budget-mix-head,
.budget-mix-meta {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.budget-mix-head span,
.budget-mix-meta span,
.budget-mix-control p {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

.budget-mix-control label {
  display: grid;
  gap: 4px;
}

.budget-mix-slider {
  accent-color: var(--accent);
  width: 100%;
}

.budget-mix-marks {
  height: 30px;
  margin: 0 8px;
  position: relative;
  text-align: center;
}

.budget-mix-marks span {
  color: var(--text);
  font-size: 11px;
  min-width: 0;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 76px;
}

.budget-mix-marks small {
  color: var(--muted);
  display: block;
  font-size: 10px;
  margin-top: 2px;
}

.budget-mix-marks span:nth-child(1) {
  left: 0;
  text-align: left;
  transform: none;
}

.budget-mix-marks span:nth-child(2) {
  left: 25%;
}

.budget-mix-marks span:nth-child(3) {
  left: 50%;
}

.budget-mix-marks span:nth-child(4) {
  left: 75%;
}

.budget-mix-marks span:nth-child(5) {
  left: 100%;
  text-align: right;
  transform: translateX(-100%);
}

.personal-policy-list {
  display: grid;
  gap: 4px;
  margin-top: 12px;
}

.personal-policy-row {
  border-bottom: 1px solid var(--line);
}

.personal-policy-row summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  cursor: pointer;
  list-style: none;
}

.personal-policy-row.selectable-policy-row summary {
  grid-template-columns: 24px minmax(0, 1fr) auto;
}

.personal-policy-row summary span {
  font-weight: 800;
}

.personal-policy-row summary small {
  color: var(--muted);
  font-size: 11px;
}

.policy-decision-lightbox {
  width: min(520px, calc(100vw - 32px));
  min-height: 0;
}

.policy-decision-lightbox textarea {
  min-height: 110px;
  resize: vertical;
}

.developer-evidence-list,
.developer-artifact-list {
  display: grid;
  gap: 7px;
}

.developer-evidence-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 30px;
}

.developer-evidence-row span {
  width: 14px;
  height: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface-soft);
}

.developer-evidence-row span.done {
  border-color: var(--status-ok-border);
  background: var(--status-ok-fg);
}

.developer-evidence-row p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.developer-evidence-row strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.2;
}

.developer-evidence-row small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
}

.developer-evidence-row b {
  color: var(--status-ok-fg);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.developer-evidence-row button {
  min-height: 24px;
  padding: 0 8px;
  font-size: 11px;
}

.developer-artifact-list button {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
  text-align: left;
}

.developer-artifact-list strong {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.developer-artifact-list span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.developer-story-brief p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.developer-story-brief dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.developer-story-brief dl div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px;
}

.developer-story-brief dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.developer-story-brief dd {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.developer-side-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.developer-workflow-graph {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.developer-workflow-node {
  min-height: 74px;
  display: grid;
  gap: 4px;
  align-content: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.developer-workflow-node.done {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
}

.developer-workflow-node.active {
  border-color: var(--accent);
  background: var(--surface-selected);
}

.developer-workflow-node.locked {
  opacity: .78;
}

.developer-workflow-node strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.developer-workflow-node span {
  color: var(--muted);
  font-size: 11px;
}

.project-row {
  width: auto;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  align-items: center;
  gap: 6px;
  text-align: left;
  background: var(--surface-soft);
  padding: 5px 7px;
  justify-self: start;
  max-width: 100%;
}

.project-row.selected { background: var(--surface-selected); border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.project-row:hover { background: var(--titlebar); border-color: var(--line-strong); }
.project-main { display: grid; min-width: 0; }
.project-main strong {
  min-width: 0;
  font-size: 12px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-row .project-state-pill {
  min-height: 16px;
  padding: 0 5px;
  justify-self: end;
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.view-all {
  justify-self: start;
  align-self: start;
  width: auto;
  min-height: 24px;
  border: 0;
  color: var(--accent-ink);
  background: transparent;
  padding: 0;
}

.project-state-pill, .badge, .count, .llm-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 4px;
  color: var(--muted);
  background: var(--chip-muted);
  line-height: 1;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.project-state-pill.planning { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent); }
.project-state-pill.requirements,
.project-state-pill.requirements-gathering { color: var(--orange); background: var(--orange-soft); border-color: color-mix(in srgb, var(--orange) 52%, var(--line)); }
.project-state-pill.development { color: var(--green); background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 52%, var(--line)); }
.project-state-pill.released { color: var(--purple); background: var(--purple-soft); border-color: color-mix(in srgb, var(--purple) 52%, var(--line)); }
.project-state-pill.action-required, .badge.danger { color: var(--danger); background: var(--danger-soft); border-color: var(--status-danger-border); }
.project-state-pill.in-review, .project-state-pill.pending-approval, .badge.warn { color: var(--orange); background: var(--orange-soft); border-color: var(--status-warn-border); }
.project-state-pill.ready-for-qa, .project-state-pill.approved, .badge.ok, .llm-status.ok { color: var(--status-ok-fg); background: var(--green-soft); border-color: var(--status-ok-border); }
.badge.neutral { background: var(--soft); }

.mission {
  grid-column: 3;
  grid-row: 1;
  min-width: min(520px, 100%);
  min-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--panel-bg);
  overflow: hidden;
  font-size: 12px;
}

.main-panel-stack {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
}

.main-panel-stack > .pane,
.main-panel-stack > section {
  min-width: 0;
}

.mission h1 { font-size: 16px; }
.mission h2 { font-size: 14px; }
.mission h3 { font-size: 13px; }
.mission p { font-size: 12px; }

.main-activity-feed {
  margin: 0 18px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
  min-height: 104px;
  max-height: 124px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 8px;
  gap: 6px;
}

.feed-head {
  min-height: 28px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--titlebar);
}

.feed-head div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.feed-head h2 {
  margin: 0;
  font-size: 13px;
  color: var(--ink);
}

.feed-head span {
  color: var(--muted);
  font-size: 11px;
}

.feed-head button {
  min-height: 24px;
  font-size: 11px;
}

.activity-textbox {
  width: 100%;
  height: 100%;
  min-height: 68px;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  padding: 7px 8px;
  font-family: "Open Sans", OpenSans, system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.45;
  overflow: auto;
}

.project-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  border-bottom: 0;
  padding: 10px 12px 0;
}

.project-title-block > div {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.project-title-block p {
  margin: 3px 0 0;
  font-size: 12px;
}

.project-owner {
  display: grid;
  gap: 4px;
  justify-items: end;
  align-content: start;
  font-size: 12px;
}

.project-owner span { color: var(--muted); }
.project-owner strong { font-size: 13px; }

.project-context-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin-top: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.project-context-strip > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.project-context-strip span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.project-context-strip strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-context-strip small {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-context-strip button {
  flex: 0 0 auto;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--button-bg);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 800;
}

.project-context-strip button:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.project-tabs {
  grid-column: 1 / -1;
  display: flex;
  gap: 2px;
  min-width: 0;
  overflow: auto hidden;
  margin-top: 4px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  align-items: flex-end;
}

.project-tabs button {
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: transparent;
  min-height: 30px;
  padding: 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.project-tabs button.active {
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
  color: var(--accent-ink);
  background: var(--surface-raised);
  border-color: var(--accent);
  border-bottom-color: var(--surface-raised);
  box-shadow: inset 0 2px 0 var(--accent);
}

.queue-pane {
  padding: 10px 12px;
}

.workspace-view-switcher {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: auto hidden;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.workspace-view-switcher span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.workspace-view-switcher button {
  flex: 0 0 auto;
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 9px;
  background: var(--button-bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.workspace-view-switcher button:hover {
  border-color: var(--line-strong);
  background: var(--button-hover-bg);
}

.workspace-view-switcher button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.workspace-focus-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .72fr);
  gap: 10px;
  align-items: start;
}

.workspace-focus-grid.single {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-focus-grid .workflow-accountability-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workspace-focus-grid .workflow-map-panel {
  grid-column: 1 / -1;
}

.workflow-accountability-pane {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-height: 0;
  padding: 0;
}

.workflow-accountability-title .badge {
  align-self: start;
}

.workflow-accountability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 8px;
  min-height: 0;
  padding: 0 8px 8px;
  overflow: auto;
}

.project-progress-tracker {
  padding: 8px;
}

.project-thread-runbook {
  display: grid;
  gap: 8px;
  margin: 0 8px 8px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
}

.project-thread-runbook-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.project-thread-runbook-head h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
}

.project-thread-runbook-grid {
  display: grid;
  grid-template-columns: minmax(160px, .75fr) minmax(220px, 1fr) minmax(260px, 1.25fr);
  gap: 8px;
  align-items: stretch;
  min-width: 0;
}

.project-thread-runbook-grid.two-panel {
  grid-template-columns: minmax(220px, 0.85fr) minmax(320px, 1.4fr);
}

.project-thread-runbook-grid.single-panel {
  grid-template-columns: minmax(0, 1fr);
}

.project-thread-mode-card,
.project-thread-next-card,
.project-thread-mode {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.project-thread-mode-card,
.project-thread-next-card {
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 9px;
}

.project-thread-mode-card span,
.project-thread-next-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.project-thread-mode-card strong,
.project-thread-next-card strong,
.project-thread-mode strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.25;
}

.project-thread-mode-card p,
.project-thread-next-card p,
.project-thread-mode p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.32;
}

.project-thread-next-card button {
  justify-self: start;
  margin-top: 2px;
}

.project-thread-mode-list {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.project-thread-mode-list.compact {
  margin-top: 2px;
}

.project-thread-mode {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 7px;
}

.project-thread-mode > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-raised);
  font-size: 10px;
  font-weight: 900;
}

.project-thread-mode.done > span {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 52%, var(--border-soft));
  background: var(--green-soft);
}

.project-thread-mode.current {
  border-color: var(--status-warn-border);
  background: color-mix(in srgb, var(--orange-soft) 55%, var(--surface-raised));
}

.project-thread-mode.current > span {
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: var(--accent-soft);
}

.project-frontier-action-list {
  display: grid;
  gap: 7px;
  min-width: 0;
  max-height: 280px;
  overflow: auto;
}

.project-frontier-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
}

.project-frontier-action.owned {
  grid-template-columns: minmax(0, 1fr) auto auto;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface-raised));
}

.project-frontier-action small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.project-frontier-action strong {
  display: block;
  margin-top: 2px;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.25;
}

.project-frontier-action p {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.32;
}

.project-frontier-action button {
  align-self: center;
}

.project-lifecycle-progress {
  padding: 0;
}

.workflow-column,
.workflow-map-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
}

.workflow-map-panel {
  grid-column: 1 / -1;
}

.workflow-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  border-bottom: 1px solid var(--line);
  background: var(--titlebar);
}

.workflow-column-head h3 {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.workflow-column-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.workflow-step-list,
.workflow-map-list {
  display: grid;
  gap: 7px;
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding: 8px;
}

.workflow-step-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.workflow-step-row > div:first-child {
  min-width: 0;
}

.workflow-step-row.active {
  border-color: var(--status-warn-border);
  background: color-mix(in srgb, var(--orange-soft) 60%, var(--surface-raised));
  box-shadow: inset 3px 0 0 var(--orange);
}

.workflow-step-row.waiting {
  background: var(--surface-raised);
}

.workflow-step-phase {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.workflow-step-row strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.25;
}

.workflow-step-row p {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.3;
}

.workflow-step-row .workflow-step-blocks {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.workflow-step-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.workflow-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.workflow-step-actions button {
  min-width: 72px;
  margin-left: auto;
}

.workflow-map-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.workflow-map-step.current {
  border-color: var(--status-warn-border);
  background: color-mix(in srgb, var(--orange-soft) 58%, var(--surface-raised));
}

.workflow-map-step.done {
  border-color: var(--status-ok-border);
  background: color-mix(in srgb, var(--green-soft) 70%, var(--surface-raised));
}

.workflow-map-step.ready-next {
  border-color: color-mix(in srgb, var(--purple) 45%, var(--line));
  background: color-mix(in srgb, var(--purple-soft) 72%, var(--surface-raised));
}

.workflow-map-step strong,
.workflow-map-step span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-map-step strong {
  font-size: 11px;
}

.workflow-map-step p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.workflow-map-step span {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.workspace-tab-panel {
  display: grid;
  gap: 8px;
  align-items: start;
  min-height: 0;
  padding: 0 18px 14px;
}

.workspace-tab-panel > .workspace-view-switcher {
  position: relative;
  z-index: 2;
}

.workspace-tab-panel > .pane {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  align-self: start;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.workspace-tab-panel > .workspace-focus-grid {
  position: relative;
  z-index: 1;
  min-height: 0;
}

.queue-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.queue-toolbar > div:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
}

.queue-toolbar > div:last-child {
  display: flex;
  gap: 8px;
}

.queue-groups { display: grid; gap: 8px; }

.queue-group {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
  overflow: hidden;
}

.queue-group h3 {
  min-height: 32px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}

.queue-group h3 span {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-selected);
  color: var(--muted);
  font-size: 11px;
}

.queue-table-head, .queue-table-row {
  display: grid;
  grid-template-columns: minmax(135px, 1.2fr) minmax(95px, .8fr) minmax(115px, 1fr) minmax(88px, .7fr) 54px;
  gap: 8px;
  align-items: center;
}

.queue-table-head {
  padding: 6px 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.queue-table-row {
  width: 100%;
  min-height: 30px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 5px 10px;
  text-align: left;
  font-size: 12px;
  background: var(--surface-raised);
}

.queue-table-row:hover { background: var(--surface-selected); }

.queue-list {
  border-radius: 7px;
}

.queue-row {
  min-height: 48px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  text-align: left;
  background: var(--surface-raised);
}

.queue-row:last-child { border-bottom: 0; }
.queue-row strong { font-size: 13px; overflow-wrap: anywhere; }
.queue-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }

.bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .75fr);
  border-top: 1px solid var(--line);
}

.activity-pane, .gateway-card {
  border-right: 1px solid var(--line);
  border-radius: 0;
}

.activity-pane .pane-title,
.gateway-card .pane-title {
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--titlebar);
}

.activity-table {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  background: var(--surface-raised);
}

.activity-table div {
  display: grid;
  grid-template-columns: 72px 74px minmax(0, 1fr) 92px;
  gap: 10px;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  background: var(--surface-raised);
}

.activity-table div:last-child { border-bottom: 0; }
.activity-table span { color: var(--muted); }
.activity-table b { color: var(--accent-ink); }
.activity-table p { margin: 0; font-size: 12px; color: var(--ink); }
.activity-table a { color: var(--accent-ink); text-decoration: none; }

.integration-icons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px;
  margin-bottom: 12px;
  background: var(--surface-raised);
}

.integration-icons div {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
  min-width: 0;
}

.integration-icons span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 850;
  font-size: 12px;
}

.integration-icons strong { font-size: 11px; overflow-wrap: anywhere; }
.integration-icons small { color: var(--muted); font-size: 10px; }

.split {
  display: grid;
  grid-template-columns: minmax(330px, .82fr) minmax(0, 1.18fr);
  gap: 14px;
  padding: 14px 18px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.summary-grid div {
  min-height: 72px;
  padding: 12px;
  border-right: 1px solid var(--line);
  background: var(--soft);
}

.summary-grid div:last-child { border-right: 0; }
.summary-grid span { color: var(--muted); font-size: 11px; text-transform: uppercase; font-weight: 800; }
.summary-grid strong { display: block; margin-top: 9px; font-size: 14px; overflow-wrap: anywhere; }

.segmented {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.segmented button {
  border: 0;
  border-radius: 0;
  min-height: 30px;
  font-size: 12px;
}

.segmented button.active {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.artifact-document {
  min-height: 330px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--panel-bg);
  line-height: 1.5;
}

.artifact-document p, .artifact-document li { font-size: 14px; }
.artifact-document ul { margin: 8px 0 0; padding-left: 20px; color: var(--muted); }

.project-detail-page {
  display: grid;
  gap: 12px;
}

.project-lifecycle-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-raised);
}

.project-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--titlebar);
}

.project-detail-head h3 {
  margin: 2px 0 4px;
  font-size: 16px;
}

.project-detail-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.project-activity-document {
  display: grid;
  gap: 12px;
}

.project-activity-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--titlebar);
}

.project-activity-head h3 {
  margin: 2px 0 4px;
}

.project-lifecycle {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) 34px minmax(92px, 1fr) 34px minmax(92px, 1fr) 34px minmax(92px, 1fr);
  gap: 0;
  align-items: center;
  overflow: auto hidden;
  padding: 4px 0;
}

.project-stage {
  min-width: 92px;
  display: grid;
  justify-items: center;
  gap: 5px;
  min-height: 86px;
  padding: 6px 4px;
  color: var(--muted);
  text-align: center;
  border-radius: 8px;
}

.project-stage span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 2px solid var(--line-strong);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 2px 5px color-mix(in srgb, var(--rail-bg) 06%, transparent);
}

.project-stage strong {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.2;
}

.project-stage em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.project-flow-arrow {
  position: relative;
  height: 2px;
  background: var(--line-strong);
}

.project-flow-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--line-strong);
  border-right: 2px solid var(--line-strong);
  transform: translateY(-50%) rotate(45deg);
}

.project-stage.done span {
  border-color: var(--status-ok-border);
  background: var(--green-soft);
  color: var(--status-ok-fg);
}

.project-stage.active.planning {
  color: var(--accent-ink);
}

.project-stage.active.requirements,
.project-stage.active.requirements-gathering {
  color: var(--orange);
}

.project-stage.active.development {
  color: var(--status-ok-fg);
}

.project-stage.active.released {
  color: var(--purple);
}

.project-stage.active.planning span {
  color: var(--accent-ink);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.project-stage.active.requirements span {
  color: var(--orange);
  border-color: var(--status-warn-border);
  background: var(--orange-soft);
}

.project-stage.active.development span {
  color: var(--status-ok-fg);
  border-color: var(--status-ok-border);
  background: var(--green-soft);
}

.project-stage.active.released span {
  color: var(--purple);
  border-color: color-mix(in srgb, var(--purple) 42%, var(--border-soft));
  background: var(--purple-soft);
}

.project-readiness-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.readiness-card {
  display: grid;
  gap: 3px;
  min-height: 82px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
}

.readiness-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.readiness-card strong {
  color: var(--text-primary);
  font-size: 15px;
}

.readiness-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.readiness-card.ok { border-color: var(--status-ok-border); background: var(--status-ok-bg); }
.readiness-card.warn { border-color: var(--status-warn-border); background: var(--status-warn-bg); }
.readiness-card.neutral { background: var(--panel-bg-subtle); }

.artifacts-page {
  display: grid;
  gap: 10px;
}

.artifact-registry {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
}

.artifact-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.artifact-summary-card,
.artifact-declare-card {
  padding: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
}

.artifact-summary-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.artifact-summary-card strong {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.artifact-summary-card p,
.artifact-declare-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.artifact-declare-card,
.artifact-registry,
.artifact-form {
  display: grid;
  gap: 8px;
}

.artifact-declare-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--titlebar);
}

.artifact-declare-head h3 {
  margin: 2px 0 3px;
  font-size: 14px;
}

.artifact-source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.artifact-form-grid,
.artifact-filter-bar,
.story-filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 7px;
  align-items: start;
}

.artifact-filter-bar,
.story-filter-bar {
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
}

.story-filter-bar {
  grid-template-columns: minmax(180px, 1fr) 160px 160px;
  border-width: 0 0 1px;
  border-radius: 0;
}

.story-filter-bar-scoped {
  grid-template-columns: minmax(180px, 1fr);
}

.story-filter-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 7px;
}

.story-workspace-tabs {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow: auto hidden;
  padding: 8px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--titlebar);
}

.story-workspace-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--button-bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.story-workspace-tabs button:hover {
  border-color: var(--line-strong);
  background: var(--button-hover-bg);
}

.story-workspace-tabs button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.story-workspace-tabs small {
  min-width: 18px;
  border-radius: 999px;
  padding: 2px 5px;
  background: var(--surface-soft);
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1;
  text-align: center;
}

.story-scope-chip {
  display: flex;
  align-items: center;
  min-height: 30px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}

.collection-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  padding: 7px 8px;
  border-top: 1px solid var(--line);
  background: var(--panel-bg-subtle);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.collection-pager span {
  margin-right: auto;
}

.collection-pager strong {
  color: var(--danger);
  font-size: 11px;
}

.collection-pager button {
  min-height: 28px;
  padding: 5px 9px;
}

.ui-virtual-list {
  contain: content;
}

.artifact-form-grid .wide {
  grid-column: 1 / -1;
}

.artifact-form-grid textarea {
  min-height: 96px;
  font-size: 12px;
}

.artifact-table {
  max-height: 40vh;
  background: var(--surface-raised);
}

.artifact-table .data-row {
  grid-template-columns: minmax(190px, 1.2fr) 120px 140px 110px 90px minmax(160px, 1fr) 138px;
  min-width: 980px;
}

.artifact-row strong,
.artifact-row small {
  display: block;
}

.artifact-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.artifact-row-actions {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
  align-items: center;
}

.artifact-row-actions button {
  min-height: 26px;
  padding: 0 7px;
  font-size: 11px;
}

.prd-document {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.prd-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.prd-toolbar div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.story-baseline-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg-subtle) 92%, transparent);
}

.story-baseline-list {
  display: grid;
  gap: 6px;
  max-height: 230px;
  overflow: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.story-baseline-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: start;
  min-height: 62px;
  padding: 9px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel-bg) 86%, transparent);
  text-align: left;
}

.story-baseline-row > .badge {
  align-self: start;
  margin-top: 1px;
}

.story-baseline-row:hover,
.story-baseline-row:focus-visible {
  border-color: var(--border-strong);
  background: var(--panel-bg);
}

.story-baseline-text {
  display: grid;
  gap: 3px;
  min-width: 0;
  overflow: visible;
}

.story-baseline-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-baseline-row strong {
  font-size: 12px;
  line-height: 1.25;
}

.story-baseline-row small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.context-editor-main {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--panel-bg-subtle);
}

.context-editor-main .pane-title {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--terminal-fg);
}

.context-editor-main h3 {
  margin: 0;
  font-size: 14px;
}

.context-editor-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(180px, 1fr);
  gap: 8px;
}

.context-editor-text {
  grid-column: 1 / -1;
}

.context-editor-text textarea {
  min-height: 150px;
  font-size: 12px;
}

.inline-working {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--accent-soft);
}

.inline-working span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid var(--border-soft);
  border-top-color: var(--accent);
  animation: spin 0.85s linear infinite;
}

.inline-working p {
  margin: 0;
  color: var(--accent-ink);
  font-size: 12px;
}

.prd-rendered {
  max-height: 42vh;
  overflow: auto;
  padding: 4px 2px 8px;
}

.prd-rendered h3 {
  margin: 12px 0 6px;
  font-size: 15px;
}

.prd-rendered h4 {
  margin: 11px 0 5px;
  font-size: 13px;
}

.prd-rendered h5 {
  margin: 10px 0 4px;
  font-size: 12px;
}

.prd-rendered p,
.prd-rendered li {
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.prd-collab,
.context-summary {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.comment-list {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}

.comment {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 8px;
  background: var(--panel-bg-subtle);
}

.comment strong { font-size: 12px; }
.comment span { margin-left: 6px; color: var(--muted); font-size: 10px; }
.comment p { margin: 4px 0 0; font-size: 12px; color: var(--text-secondary); }
.empty-note { margin: 0 0 8px; font-size: 12px; }

.context-summary li {
  display: grid;
  gap: 2px;
  margin-bottom: 7px;
  font-size: 12px;
}

.context-summary li span {
  color: var(--muted);
}

.story-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
  background: var(--surface-raised);
}

.stories-viewport {
  max-width: 100%;
  min-width: 0;
}

.sprint-planner-card {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
}

.sprint-planner-head {
  margin: -8px -8px 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 8px 8px 0 0;
  background: var(--titlebar);
}

.sprint-planner-head h3 {
  margin: 2px 0 3px;
  font-size: 14px;
}

.sprint-planner-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.sprint-form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 132px 132px auto;
  gap: 7px;
  align-items: end;
}

.sprint-gantt {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 4px 8px;
  overflow: hidden;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-soft);
}

.sprint-gantt.empty {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  min-height: 48px;
  color: var(--muted);
  font-size: 12px;
}

.sprint-gantt-axis {
  position: relative;
  grid-column: 2;
  height: 18px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 9px;
}

.sprint-gantt-axis span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.sprint-gantt-axis span:first-child {
  transform: translateX(0);
}

.sprint-gantt-axis span:last-child {
  transform: translateX(-100%);
}

.sprint-gantt-row {
  display: contents;
}

.sprint-gantt-label {
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
}

.sprint-gantt-label strong,
.sprint-gantt-label span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sprint-gantt-label strong {
  color: var(--ink);
  font-size: 11px;
}

.sprint-gantt-label span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.sprint-gantt-track {
  position: relative;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-muted);
}

.sprint-gantt-bar {
  position: absolute;
  top: 5px;
  bottom: 5px;
  min-width: 48px;
  overflow: hidden;
  padding: 0 26px 0 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line));
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent-soft) 78%, var(--surface-raised));
  box-shadow: 0 4px 10px color-mix(in srgb, var(--rail-bg) 08%, transparent);
}

.sprint-gantt-bar:hover {
  border-color: var(--accent);
  background: var(--surface-selected);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--rail-bg) 14%, transparent);
}

.sprint-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  max-width: 100%;
  background: color-mix(in srgb, var(--green) 24%, transparent);
}

.sprint-gantt-bar-text {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  height: 100%;
  color: var(--accent-ink);
  font-size: 9px;
  font-weight: 800;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sprint-gantt-bar button {
  position: absolute;
  z-index: 2;
  top: 5px;
  right: 5px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  font-size: 10px;
}

.manual-story-card {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.manual-story-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.manual-story-card h3 {
  margin: 2px 0 3px;
  font-size: 14px;
}

.manual-story-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.story-label-panel {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.story-label-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.story-label-panel h3 {
  margin: 2px 0 3px;
  font-size: 14px;
}

.story-label-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.story-label-grid {
  display: grid;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
}

.story-label-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(260px, 1.4fr);
  gap: 10px;
  align-items: center;
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
}

.story-label-row:last-child { border-bottom: 0; }

.story-label-row.locked {
  background: var(--surface-muted);
}

.story-label-row strong,
.story-label-row span {
  display: block;
  font-size: 11px;
}

.story-label-row > div:first-child > span {
  margin-top: 2px;
  color: var(--muted);
}

.story-label-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.story-label-row.locked .label-checkboxes {
  opacity: 0.62;
}

.label-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
}

.story-label-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 2px 0 0;
}

.story-meta-badge {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-meta-sprint {
  border-color: var(--border-soft);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.story-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
  min-width: 0;
}

.story-row:last-child { border-bottom: 0; }
.story-row:hover { background: var(--surface-selected); }
.story-row-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.story-row strong { display: block; font-size: 11px; }
.story-row small { display: block; color: var(--muted); margin-top: 3px; line-height: 1.3; }
.story-action-label { color: var(--muted); font-size: 12px; font-weight: 750; }

.story-row small.story-agent-status {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 6px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--chip-muted);
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-title-truncate,
.story-line-truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-row-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(96px, 1fr));
  gap: 6px;
  margin-top: 4px;
  min-width: 0;
}

.story-row-action-cell {
  display: grid;
  gap: 8px;
  justify-items: end;
  align-content: start;
}

.story-status-stack {
  display: grid;
  gap: 4px;
  justify-items: end;
}

.story-select-label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.story-select-label select,
.story-select-label input {
  min-height: 30px;
  padding: 4px 7px;
  font-size: 12px;
  min-width: 0;
  width: 100%;
}

.story-points-card {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
}

.story-points-card > strong {
  font-size: 18px;
}

.story-points-edit {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.story-points-edit input {
  width: 76px;
  min-height: 30px;
  padding: 4px 7px;
}

.kanban-viewport {
  gap: 0;
  background: var(--surface-soft);
}

.kanban-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
}

.kanban-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--titlebar);
}

.kanban-head h3 {
  margin: 2px 0 3px;
  font-size: 14px;
}

.kanban-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.kanban-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(72px, 1fr));
  gap: 5px;
  min-width: 170px;
}

.kanban-summary span {
  display: grid;
  gap: 1px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.kanban-summary strong {
  color: var(--ink);
  font-size: 14px;
}

.kanban-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(156px, 1fr));
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.kanban-column {
  display: grid;
  grid-template-rows: auto minmax(180px, 1fr);
  min-width: 156px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-muted);
}

.kanban-column-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--titlebar);
}

.kanban-column-head strong {
  display: block;
  font-size: 12px;
}

.kanban-column-head span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.kanban-column-head b {
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--chip-muted);
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.kanban-column-body {
  display: grid;
  align-content: start;
  gap: 4px;
  max-height: 520px;
  overflow: auto;
  padding: 5px;
  background: var(--surface-muted);
}

.kanban-story {
  position: relative;
}

.kanban-story button {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 3px;
  min-height: 34px;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
  color: inherit;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--rail-bg) 06%, transparent);
}

.kanban-story button:hover,
.kanban-story button:focus-visible {
  border-color: var(--accent);
  background: var(--surface-selected);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--rail-bg) 11%, transparent);
}

.kanban-story-compact {
  display: grid;
  grid-template-columns: minmax(54px, auto) minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.kanban-story-key {
  color: var(--accent);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.kanban-story-status {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-story-points {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--chip-muted);
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
}

.kanban-story-progress {
  position: relative;
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-muted);
}

.kanban-story-progress i {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--green) 55%, transparent);
}

.kanban-story-meta,
.kanban-assignees,
.kanban-blockers {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
}

.kanban-mini-flags {
  display: flex;
  gap: 3px;
  min-width: 0;
}

.kanban-mini-flags em {
  display: inline-block;
  max-width: 72px;
  overflow: hidden;
  padding: 1px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-story-preview {
  position: absolute;
  z-index: 40;
  top: calc(100% + 5px);
  left: 0;
  display: none;
  width: min(280px, 72vw);
  gap: 6px;
  padding: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-strong);
}

.kanban-story button:hover .kanban-story-preview,
.kanban-story button:focus-visible .kanban-story-preview,
.kanban-story button:focus-within .kanban-story-preview {
  display: grid;
}

.kanban-story-preview strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.3;
}

.kanban-preview-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.kanban-preview-labels em {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

.kanban-assignees small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.kanban-blockers em {
  display: inline-block;
  max-width: 92px;
  overflow: hidden;
  padding: 1px 5px;
  border: 1px solid color-mix(in srgb, var(--orange) 56%, var(--line));
  border-radius: 999px;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-empty {
  padding: 12px 8px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.story-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-self: end;
}

.story-sprint-group {
  display: grid;
  min-width: 0;
}

.story-sprint-group + .story-sprint-group {
  border-top: 1px solid var(--line);
}

.story-sprint-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  background: var(--titlebar);
  border-bottom: 1px solid var(--line);
}

.story-sprint-head strong {
  font-size: 12px;
}

.story-sprint-head span {
  color: var(--muted);
  font-size: 11px;
}

.story-sprint-table-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 10px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--titlebar-strong);
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.story-sprint-table-head span:last-child {
  text-align: right;
}

.story-form {
  display: grid;
  gap: 10px;
}

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

.story-form-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  align-items: start;
}

.story-form-grid.compact textarea {
  min-height: 42px;
}

.story-form-grid label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.story-form-grid .wide {
  grid-column: 1 / -1;
}

.story-form-grid textarea {
  min-height: 62px;
  resize: vertical;
}

.story-detail-page {
  display: grid;
  gap: 12px;
}

.story-detail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.story-detail-head h3 {
  margin: 2px 0 4px;
  font-size: 16px;
}

.story-detail-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.git-lifecycle {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(76px, 1fr);
  gap: 0;
  align-items: center;
  overflow: auto hidden;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.git-stage {
  min-width: 76px;
  display: grid;
  justify-items: center;
  gap: 5px;
  min-height: 82px;
  padding: 6px 4px;
  color: var(--muted);
  text-align: center;
}

.git-stage span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 2px solid var(--line-strong);
  color: var(--muted);
  background: var(--surface-raised);
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 2px 5px color-mix(in srgb, var(--rail-bg) 8%, transparent);
}

.git-stage strong {
  min-width: 0;
  font-size: 11px;
  line-height: 1.2;
}

.git-stage em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.git-stage.done span {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 52%, var(--border-soft));
  background: var(--green-soft);
}

.git-stage.active {
  color: var(--accent-ink);
}

.git-stage.active span {
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: var(--accent-soft);
}

.git-flow-arrow {
  position: relative;
  width: 28px;
  height: 2px;
  background: var(--line-strong);
}

.git-flow-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--line-strong);
  border-right: 2px solid var(--line-strong);
  transform: translateY(-50%) rotate(45deg);
}

.story-git-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
}

.story-git-card h4 {
  margin: 0 0 4px;
  font-size: 13px;
}

.story-git-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.story-editor-card {
  background: var(--panel-bg-subtle);
}

.story-record-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.story-record-action-grid > div {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.story-record-action-grid strong {
  color: var(--ink);
  font-size: 12px;
}

.story-record-action-grid .helper {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
}

.implementation-card {
  background: var(--panel-bg);
}

.implementation-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.implementation-summary {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-bg-subtle);
}

.implementation-summary h1,
.implementation-summary h2,
.implementation-summary h3 {
  margin: 0 0 6px;
  font-size: 13px;
}

.implementation-summary p,
.implementation-summary li {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.implementation-summary ul {
  margin: 5px 0 0;
  padding-left: 18px;
}

.implementation-interactions {
  display: grid;
  gap: 6px;
}

.implementation-interactions article {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-bg-subtle);
}

.implementation-interactions strong {
  color: var(--text-primary);
  font-size: 12px;
}

.implementation-interactions small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.implementation-form {
  padding-top: 2px;
}

.figma-card {
  background: var(--panel-bg-subtle);
}

.figma-object-list {
  display: grid;
  gap: 7px;
}

.figma-object-card {
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-bg-subtle);
}

.figma-object-card > div:first-child {
  display: grid;
  gap: 2px;
}

.figma-object-card strong {
  color: var(--text-primary);
  font-size: 12px;
}

.figma-object-card small,
.figma-object-card p,
.figma-file {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.figma-object-card a {
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.figma-object-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.figma-object-actions a,
.button-like {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-bg);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}

.figma-object-actions a:hover,
.button-like:hover {
  background: var(--panel-bg-selected);
  border-color: var(--border-strong);
  color: var(--accent-ink);
}

.figma-object-preview {
  max-height: 120px;
  overflow: auto;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-header-bg);
  color: var(--text-primary);
  font-family: "Open Sans", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.figma-object-form {
  padding-top: 3px;
}

.story-context-list {
  display: grid;
  gap: 6px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.story-context-list li {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-bg-subtle);
}

.story-dependency-card {
  gap: 8px;
}

.dependency-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dependency-columns > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.dependency-columns strong {
  color: var(--text-primary);
  font-size: 11px;
}

.dependency-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 24px;
  align-items: center;
}

.dependency-chip {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--chip-muted);
}

.dependency-chip button {
  min-height: 22px;
  max-width: 260px;
  overflow: hidden;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 10.5px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dependency-chip button:hover {
  color: var(--accent-ink);
}

.dependency-chip .dependency-remove {
  width: 22px;
  padding: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.dependency-chip .dependency-remove:hover {
  color: var(--danger);
  background: var(--danger-soft);
}

.dependency-add-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.dependency-add-row input {
  height: 30px;
  font-size: 11.5px;
}

.story-context-list strong {
  color: var(--text-primary);
  font-size: 11px;
}

.story-context-list span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.story-evidence-panel {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.story-evidence-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 7px;
}

.story-evidence-row {
  min-width: 0;
}

.story-evidence-row.figma { background: var(--accent-soft); }
.story-evidence-row.comment { background: var(--orange-soft); }
.story-evidence-row.document { background: var(--panel-bg-subtle); }
.story-evidence-row.plan,
.story-evidence-row.markdown { background: var(--green-soft); }

.story-git-card dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 0;
}

.story-git-card dl div {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.story-git-card dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.story-git-card dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
}

.jira-subtask-list {
  display: grid;
  gap: 6px;
}

.jira-subtask-list-head,
.jira-subtask-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
}

.jira-subtask-list-head {
  color: var(--muted);
  font-size: 11px;
}

.jira-subtask-list-head strong {
  color: var(--ink);
  font-size: 12px;
}

.jira-subtask-row {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.jira-subtask-row strong,
.jira-subtask-row small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.jira-subtask-row small {
  color: var(--muted);
}

.handoff-card {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft));
  background: var(--accent-soft);
}

.agent-dispatch-card {
  border-color: var(--border-soft);
  background: var(--panel-bg-subtle);
}

.development-design-gate {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border-soft));
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--panel-bg));
}

.development-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.development-mode-card {
  min-height: 78px;
  display: grid;
  gap: 4px;
  align-content: start;
  justify-items: start;
  padding: 9px;
  border-color: var(--line);
  background: var(--panel-bg);
  text-align: left;
}

.development-mode-card.active {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border-soft));
  background: var(--accent-soft);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.development-mode-card strong {
  color: var(--text-primary);
  font-size: 12px;
}

.development-mode-card span {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.development-stage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-bg);
}

.development-stage-row.active {
  border-color: color-mix(in srgb, var(--orange) 58%, var(--border-soft));
  background: var(--orange-soft);
}

.development-stage-row.ready {
  border-color: color-mix(in srgb, var(--green) 50%, var(--border-soft));
  background: var(--green-soft);
}

.development-stage-row.locked {
  background: var(--panel-bg-muted);
  color: var(--text-secondary);
}

.development-stage-row strong {
  display: block;
  margin-top: 5px;
  color: var(--text-primary);
  font-size: 12px;
}

.development-stage-actions {
  display: grid;
  gap: 7px;
  justify-items: stretch;
  min-width: 190px;
}

.development-stage-actions label {
  margin: 0;
}

.story-agent-attention {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--orange) 54%, var(--border-soft));
  border-radius: 7px;
  background: var(--orange-soft);
}

.agent-attention-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-bg);
}

.agent-attention-row > div:last-child {
  display: flex;
  gap: 6px;
  align-items: center;
}

.agent-recommendation {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--green) 52%, var(--border-soft));
  border-radius: 7px;
  background: var(--green-soft);
  color: var(--text-primary);
}

.agent-recommendation.muted {
  border-color: var(--border-soft);
  background: var(--panel-bg-muted);
  color: var(--text-primary);
}

.agent-recommendation > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.agent-recommendation strong {
  font-size: 12px;
}

.agent-recommendation span {
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--green) 58%, var(--border-soft));
  border-radius: 999px;
  background: var(--panel-bg);
  color: var(--green);
  font-size: 10px;
  font-weight: 850;
}

.agent-recommendation p,
.agent-recommendation ul {
  margin: 0;
}

.agent-recommendation p,
.agent-recommendation li,
.agent-recommendation small {
  font-size: 11px;
  line-height: 1.35;
}

.agent-recommendation ul {
  display: grid;
  gap: 2px;
  padding-left: 16px;
}

.agent-recommendation small {
  color: var(--text-secondary);
  font-weight: 750;
}

.agent-dispatch-form {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.2fr) auto;
  gap: 8px;
  align-items: end;
}

.agent-dispatch-form .wide {
  min-width: 0;
}

.agent-dispatch-form textarea {
  min-height: 48px;
  font-size: 11.5px;
}

.agent-task-list {
  display: grid;
  gap: 6px;
}

.agent-task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, .45fr) auto;
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-bg);
}

.agent-task-row strong,
.agent-task-row small,
.agent-task-row span {
  display: block;
}

.agent-task-row strong {
  font-size: 12px;
}

.agent-task-row small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.agent-task-row p {
  margin-top: 3px;
  font-size: 11px;
}

.agent-task-jira {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--text-primary);
  font-size: 10px;
}

.agent-task-jira span {
  display: inline-block;
  color: var(--accent-ink);
  font-weight: 850;
  text-transform: uppercase;
}

.agent-task-jira small {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-task-jira a {
  color: var(--accent-ink);
  font-weight: 750;
}

.agent-task-execution-status {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .56fr);
  gap: 8px 10px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--status-neutral-border);
  border-radius: 7px;
  background: var(--status-neutral-bg);
}

.agent-task-execution-status.warn {
  border-color: var(--status-warn-border);
  background: var(--status-warn-bg);
}

.agent-task-execution-status.danger {
  border-color: var(--status-danger-border);
  background: var(--status-danger-bg);
}

.agent-task-execution-status.ok {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
}

.agent-task-execution-status strong {
  display: block;
  color: var(--text-primary);
  font-size: 11px;
}

.agent-task-execution-status p,
.agent-task-execution-status small {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 10.5px;
  line-height: 1.35;
}

.agent-task-execution-status small {
  grid-column: 1 / -1;
  font-weight: 750;
}

.agent-task-execution-status dl {
  display: grid;
  gap: 4px;
  margin: 0;
}

.agent-task-execution-status dl div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.agent-task-execution-status dt,
.agent-task-execution-status dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: 10px;
}

.agent-task-execution-status dd {
  color: var(--text-primary);
  font-weight: 800;
  text-align: right;
}

.agent-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.agent-task-actions button,
.agent-console-actions button {
  min-height: 26px;
  padding: 0 8px;
  font-size: 10.5px;
  font-weight: 750;
}

.agent-task-followup {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 6px;
  align-items: stretch;
}

.agent-task-followup textarea {
  min-height: 34px;
  max-height: 78px;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.35;
}

.agent-task-followup button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

.agent-clarification-panel {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(130px, .45fr) minmax(180px, .7fr) max-content;
  gap: 7px;
  align-items: end;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--orange) 48%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--orange-soft) 62%, var(--panel-bg));
}

.agent-clarification-panel strong {
  display: block;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 900;
}

.agent-clarification-panel p {
  margin: 2px 0 0;
  color: var(--text-primary);
  font-size: 11px;
  line-height: 1.35;
}

.agent-clarification-panel label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.agent-clarification-panel select,
.agent-clarification-panel textarea {
  width: 100%;
  min-width: 0;
  font-size: 11px;
}

.agent-clarification-panel textarea {
  min-height: 34px;
  max-height: 82px;
  padding: 6px 8px;
  line-height: 1.35;
}

.agent-clarification-panel button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 10.5px;
  font-weight: 850;
  white-space: nowrap;
}

.agent-step-list {
  display: grid;
  gap: 6px;
  margin: 8px 0;
}

.agent-step-list span {
  display: block;
  border-left: 3px solid var(--border-strong);
  padding-left: 8px;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.agent-step-list b {
  color: var(--text-primary);
}

.kanban-agent-status {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--chip-muted);
  color: var(--text-primary);
}

.kanban-agent-status b,
.kanban-agent-status em {
  display: inline-block;
  overflow: hidden;
  padding: 1px 5px;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-agent-status b {
  max-width: 86px;
  border-right: 1px solid var(--border-soft);
}

.kanban-agent-status em {
  max-width: 72px;
  color: var(--text-secondary);
}

.developer-agent-console {
  display: grid;
  gap: 8px;
  min-height: 0;
}

.developer-agent-console .agent-flow-canvas {
  min-height: 360px;
  height: clamp(360px, 42vh, 540px) !important;
}

.developer-agent-console .agent-console-grid.compact {
  min-height: 180px;
}

.agent-console-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel-bg-subtle);
}

.agent-console-head h3,
.agent-console-head p {
  margin: 0;
}

.agent-console-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(54px, auto));
  gap: 6px;
}

.agent-console-metrics span {
  display: grid;
  gap: 1px;
  min-width: 54px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-bg);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.agent-console-metrics strong {
  color: var(--text-primary);
  font-size: 16px;
}

.agent-attention-summary {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel-bg);
}

.agent-attention-summary strong {
  font-size: 12px;
}

.agent-attention-summary p,
.agent-attention-summary ul {
  margin: 0;
}

.agent-attention-summary p,
.agent-attention-summary li {
  font-size: 11px;
  line-height: 1.35;
}

.agent-attention-summary ul {
  display: grid;
  gap: 2px;
  padding-left: 16px;
}

.agent-attention-summary.ok {
  border-color: color-mix(in srgb, var(--green) 56%, var(--border-soft));
  background: var(--green-soft);
}

.agent-attention-summary.warn {
  border-color: color-mix(in srgb, var(--orange) 56%, var(--border-soft));
  background: var(--orange-soft);
}

.agent-attention-summary.danger {
  border-color: color-mix(in srgb, var(--danger) 56%, var(--border-soft));
  background: var(--danger-soft);
}

.agent-attention-summary.neutral {
  border-color: var(--border-soft);
  background: var(--panel-bg-muted);
}

.agent-graph-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  background: var(--panel-bg-subtle);
}

.agent-graph-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.agent-graph-head h4,
.agent-graph-head p {
  margin: 0;
}

.agent-graph-head h4 {
  font-size: 13px;
}

.agent-graph-head p {
  color: var(--muted);
  font-size: 11px;
}

.agent-graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.agent-graph-legend span {
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--panel-bg);
  font-size: 10px;
  font-weight: 850;
}

.agent-graph-legend .work { color: var(--green); border-color: color-mix(in srgb, var(--green) 56%, var(--border-soft)); background: var(--green-soft); }
.agent-graph-legend .input { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 56%, var(--border-soft)); background: var(--orange-soft); }
.agent-graph-legend .error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 56%, var(--border-soft)); background: var(--danger-soft); }

.agent-flow-canvas {
  position: relative;
  min-height: 470px;
  height: clamp(470px, var(--agent-flow-height, 54vh), 820px);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--panel-bg-muted);
}

.agent-flow-canvas .react-flow__node {
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
}

.agent-flow-canvas .react-flow__node-perimeter {
  padding: 0;
}

.agent-flow-canvas .react-flow__node-groupBox {
  pointer-events: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.agent-flow-group-box {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 1.5px solid color-mix(in srgb, var(--border-strong) 64%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-bg-subtle) 62%, transparent);
}

.agent-flow-group-box span {
  position: absolute;
  top: 7px;
  left: 12px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.agent-flow-perimeter-node {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
}

.agent-flow-canvas .react-flow__handle {
  width: 7px;
  height: 7px;
  border-color: var(--panel-bg);
  background: var(--text-secondary);
}

.agent-flow-canvas .agent-flow-handle {
  opacity: 0;
  pointer-events: none;
}

.agent-flow-canvas .react-flow__edge-path {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.agent-flow-canvas .react-flow__edge-textbg {
  rx: 4px;
  ry: 4px;
}

.agent-flow-label {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.agent-flow-agent-label {
  gap: 4px;
}

.agent-flow-label strong,
.agent-flow-label span,
.agent-flow-label small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-flow-label strong {
  font-size: 12px;
  font-weight: 900;
}

.agent-flow-label span {
  color: var(--text-primary);
  font-size: 10.5px;
  font-weight: 750;
}

.agent-flow-label small {
  color: var(--text-secondary);
  font-size: 9.5px;
  font-weight: 800;
}

.agent-flow-developer-label {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
}

.agent-flow-developer-label strong,
.agent-flow-developer-label span,
.agent-flow-developer-label small {
  grid-column: 2;
}

.agent-flow-dev-icon {
  position: relative;
  grid-row: 1 / span 3;
  width: 26px;
  height: 26px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 60%, var(--border-soft));
  border-radius: 999px;
  background: var(--panel-bg);
}

.agent-flow-dev-icon::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.agent-flow-dev-icon::after {
  content: "";
  position: absolute;
  left: 6px;
  bottom: 5px;
  width: 12px;
  height: 8px;
  border-radius: 8px 8px 4px 4px;
  background: var(--accent);
}

.agent-flow-agent-label small {
  color: var(--text-secondary);
}

.agent-graph-fallback {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  padding: 10px;
}

.agent-fallback-node {
  display: grid;
  gap: 2px;
  justify-items: start;
  min-height: 62px;
  border: 1.5px solid var(--border-soft);
  border-radius: 8px;
  background: var(--panel-bg);
  text-align: left;
}

.agent-fallback-node.work { background: var(--green-soft); border-color: var(--green); }
.agent-fallback-node.input { background: var(--orange-soft); border-color: var(--orange); }
.agent-fallback-node.error { background: var(--danger-soft); border-color: var(--danger); }
.agent-fallback-node.done { background: var(--green-soft); border-color: var(--green); }
.agent-fallback-node.idle { background: var(--panel-bg-muted); border-color: var(--border-strong); }

.agent-graph-warning {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--orange) 60%, var(--border-soft));
  border-radius: 6px;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: 11px;
  font-weight: 850;
}

.agent-console-grid {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(360px, 1.25fr);
  gap: 10px;
  min-height: 0;
}

.agent-console-grid.compact {
  grid-template-columns: 1fr;
}

.agent-terminal-view {
  min-height: 150px;
  max-height: 230px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--terminal-border);
  border-radius: 8px;
  background: var(--terminal-bg);
  color: var(--terminal-fg);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.45;
}

.developer-agent-console .agent-terminal-view {
  min-height: 180px;
  max-height: 280px;
}

.agent-terminal-line {
  padding: 2px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--panel-bg) 06%, transparent);
}

.agent-terminal-line span {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.agent-terminal-line.work span { color: var(--terminal-fg); }
.agent-terminal-line.input span { color: var(--status-warn-fg); }
.agent-terminal-line.error span { color: var(--status-danger-fg); }
.agent-terminal-line.done span { color: var(--status-ok-fg); }

.agent-activity-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 190px;
  max-height: 320px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--panel-bg);
}

.agent-activity-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-strong);
  background: var(--panel-header-bg);
}

.agent-activity-head h4,
.agent-activity-head p {
  margin: 0;
}

.agent-activity-head h4 {
  font-size: 13px;
}

.agent-activity-head p {
  color: var(--text-secondary);
  font-size: 11px;
}

.agent-activity-head > span {
  padding: 3px 7px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.agent-activity-list {
  display: grid;
  gap: 6px;
  min-height: 0;
  overflow: auto;
  padding: 8px;
}

.agent-activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--row-bg);
}

.agent-activity-row strong,
.agent-activity-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-activity-row strong {
  font-size: 12px;
}

.agent-activity-row small {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 750;
}

.agent-activity-row p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.agent-activity-action {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 28px;
  padding: 0 9px;
  font-size: 10.5px;
  font-weight: 850;
}

.agent-console-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
}

.agent-console-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 8px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel-bg);
}

.agent-console-task strong,
.agent-console-task small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-console-task strong {
  font-size: 12px;
}

.agent-console-task small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.agent-console-task p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-primary);
  font-size: 11px;
}

.agent-console-actions {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 4px;
}

.artifact-lightbox.agent-lightbox {
  width: min(1100px, calc(100vw - 80px));
  height: min(760px, calc(100vh - 80px));
  height: min(760px, calc(100dvh - 80px));
  max-height: min(760px, calc(100vh - 80px));
  max-height: min(760px, calc(100dvh - 80px));
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  transform-origin: center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.agent-lightbox-backdrop {
  perspective: 1200px;
}

.artifact-lightbox.agent-lightbox.task-focused {
  grid-template-rows: minmax(0, 1fr);
}

.artifact-lightbox.agent-lightbox.is-flipping {
  animation: agentConsoleCardFlip 0.34s ease both;
}

@keyframes agentConsoleCardFlip {
  0% {
    opacity: .72;
    transform: rotateY(-88deg);
  }

  100% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .artifact-lightbox.agent-lightbox.is-flipping {
    animation: none !important;
  }
}

.agent-lightbox-body {
  display: grid;
  grid-template-columns: minmax(240px, .7fr) minmax(420px, 1.3fr);
  gap: 12px;
  min-height: 0;
}

.agent-console-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(80px, 1fr));
  gap: 7px;
}

.agent-console-summary div {
  display: grid;
  gap: 1px;
  padding: 6px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--panel-bg-subtle);
  text-align: center;
}

.agent-console-summary strong {
  font-size: 18px;
}

.agent-console-summary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.agent-lightbox-details,
.agent-lightbox-tasks {
  min-height: 0;
  overflow: auto;
  padding: 10px;
  border: 1.5px solid var(--border-soft);
  border-radius: 8px;
  background: var(--panel-bg);
}

.agent-lightbox-details h4,
.agent-lightbox-tasks h4 {
  margin: 0 0 6px;
  font-size: 13px;
}

.agent-lightbox-details p {
  margin: 0 0 8px;
  color: var(--text-primary);
  font-size: 11px;
}

.agent-lightbox-details dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.agent-lightbox-details dl div {
  display: grid;
  gap: 2px;
}

.agent-lightbox-details dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.agent-lightbox-details dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 750;
}

.agent-task-conversation {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

.agent-task-focus-summary {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 7px;
  min-height: 0;
  padding: 2px;
}

.agent-task-focus-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding-right: 34px;
}

.agent-task-conversation-close {
  position: absolute;
  top: -4px;
  right: -8px;
  z-index: 2;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
}

.agent-task-focus-title h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
}

.agent-task-focus-title p {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 11px;
}

.agent-task-focus-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.agent-task-focus-facts div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--panel-bg-subtle);
}

.agent-task-focus-facts span {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.agent-task-focus-facts strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.agent-task-focus-brief {
  display: grid;
  gap: 3px;
  min-height: 0;
  padding: 8px 9px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--panel-bg-subtle);
}

.agent-task-focus-brief strong {
  font-size: 11px;
}

.agent-task-focus-brief p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.agent-task-chat-room {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 0;
}

.agent-task-chat {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--panel-bg-subtle);
}

.agent-task-chat-message {
  display: grid;
  gap: 4px;
  max-width: min(760px, 86%);
  padding: 8px 9px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--panel-bg);
}

.agent-task-chat-message.user {
  justify-self: end;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: var(--panel-bg-selected);
}

.agent-task-chat-message.agent {
  justify-self: start;
}

.agent-task-chat-message strong {
  font-size: 11px;
}

.agent-task-chat-message div {
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.42;
}

.agent-task-chat-message div > :first-child {
  margin-top: 0;
}

.agent-task-chat-message div > :last-child {
  margin-bottom: 0;
}

.agent-task-plan-bubble {
  display: grid;
  gap: 8px;
}

.agent-task-plan-bubble p {
  margin: 0;
}

.agent-task-plan-card {
  display: grid;
  gap: 7px;
  min-width: min(680px, 100%);
  padding: 9px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--panel-bg-subtle);
}

.agent-task-plan-card div {
  display: grid;
  gap: 2px;
}

.agent-task-plan-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.agent-task-plan-card strong {
  font-size: 12px;
}

.agent-task-plan-card pre {
  max-height: 260px;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.42;
}

.agent-task-bubble-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.agent-task-bubble-actions button {
  min-height: 32px;
  padding: 0 12px;
}

.agent-task-chat-message small {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 750;
}

.agent-task-chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 8px;
  align-items: end;
  padding: 0;
  border: 0;
  background: transparent;
}

.agent-task-chat-composer label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.agent-task-chat-composer textarea {
  min-height: 64px;
  max-height: 140px;
  padding: 8px;
  font-size: 12px;
  line-height: 1.35;
}

.agent-task-chat-composer button {
  min-height: 38px;
  padding: 0 12px;
  white-space: nowrap;
}

.agent-task-conversation-actions {
  justify-content: end;
}

.agent-skill-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.agent-skill-cloud span,
.agent-node-status {
  padding: 3px 7px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--panel-bg-subtle);
  font-size: 10px;
  font-weight: 850;
}

.agent-node-status.work { color: var(--status-ok-fg); border-color: var(--status-ok-border); background: var(--status-ok-bg); }
.agent-node-status.input { color: var(--status-warn-fg); border-color: var(--status-warn-border); background: var(--status-warn-bg); }
.agent-node-status.error { color: var(--status-danger-fg); border-color: var(--status-danger-border); background: var(--status-danger-bg); }
.agent-node-status.done { color: var(--status-ok-fg); border-color: var(--status-ok-border); background: var(--status-ok-bg); }
.agent-node-status.idle { color: var(--status-ok-fg); border-color: var(--status-ok-border); background: var(--status-ok-bg); }

.handoff-detail-card {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}

.handoff-detail-card h4 {
  margin: 0 0 4px;
}

.handoff-detail-card dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 0;
}

.handoff-detail-card dl div,
.handoff-detail-card section {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-bg);
}

.handoff-detail-card dt,
.handoff-detail-card section span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.handoff-detail-card dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 750;
}

.handoff-detail-card section p {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.handoff-detail-card ul {
  margin: 3px 0 0;
  padding-left: 16px;
  color: var(--text-secondary);
  font-size: 12px;
}

.handoff-markdown {
  max-height: 520px;
  overflow: auto;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--panel-bg-subtle);
  color: var(--text-primary);
  font-family: "Open Sans", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.58;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.handoff-rendered,
.handoff-raw,
.handoff-policy-checklist {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--panel-bg-subtle);
}

.handoff-rendered {
  max-height: 520px;
  overflow: auto;
}

.handoff-rendered h1,
.handoff-rendered h2,
.handoff-rendered h3 {
  margin: 8px 0 4px;
}

.handoff-raw summary,
.handoff-policy-checklist summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.developer-git-page {
  display: grid;
  gap: 12px;
}

.git-overview-card {
  overflow: hidden;
  border-color: var(--line-strong);
  background: var(--surface-raised);
}

.git-overview-card > div:first-child,
.git-story-head {
  margin: -12px -12px 0;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 8px 8px 0 0;
  background: var(--titlebar);
}

.git-story-list {
  display: grid;
  gap: 10px;
  padding: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-soft);
}

.git-story-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
}

.git-story-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.git-story-head strong {
  display: block;
  font-size: 13px;
}

.git-story-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.git-story-card dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 0;
}

.git-story-card dl div {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.git-story-card dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.git-story-card dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
}

.assistant-pane {
  grid-column: 4;
  grid-row: 1;
  height: calc(100vh - 48px);
  position: sticky;
  top: 48px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  border-left: 1px solid var(--line);
  background: var(--panel-bg-subtle);
}

.assistant-header {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--titlebar);
}

.assistant-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.assistant-toggle {
  width: 26px;
  min-height: 26px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}

.assistant-peek {
  grid-column: 3;
  grid-row: 1;
  position: sticky;
  top: 70px;
  right: 0;
  justify-self: end;
  align-self: start;
  width: 34px;
  min-height: 150px;
  margin: 14px 0 0 -34px;
  padding: 8px 4px;
  border-radius: 8px 0 0 8px;
  border-color: var(--line-strong);
  background: var(--panel-bg);
  box-shadow: -6px 10px 24px color-mix(in srgb, var(--rail-bg) 12%, transparent);
  z-index: 4;
}

.assistant-peek span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  font-weight: 850;
  color: var(--accent-ink);
  white-space: nowrap;
}

.assistant-intro {
  flex: 0 0 auto;
  padding: 9px 10px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--line);
}

.assistant-intro p { margin: 2px 0 8px; font-size: 12px; }

.assistant-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
}

.assistant-stats div {
  min-height: 46px;
  display: grid;
  place-items: center;
  gap: 2px;
  border-right: 1px solid var(--line);
  padding: 6px 4px;
  text-align: center;
  min-width: 0;
}

.assistant-stats div:last-child { border-right: 0; }
.assistant-stats strong { font-size: 15px; }
.assistant-stats span { color: var(--muted); font-size: 10px; }

.contextual-thread-assistant .assistant-stats div {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
  padding: 5px 8px;
  text-align: left;
}

.contextual-thread-assistant .assistant-stats div:last-child { border-bottom: 0; }

.contextual-thread-assistant .assistant-stats strong {
  max-width: 100%;
  font-size: 11px;
  line-height: 1.18;
  text-align: right;
  overflow-wrap: anywhere;
}

.contextual-thread-assistant .assistant-stats span {
  order: -1;
  flex: 0 0 auto;
  min-width: 48px;
  font-size: 9px;
  line-height: 1.15;
  text-align: left;
}

.contextual-thread-assistant .assistant-stats {
  grid-template-columns: 1fr;
}

.assistant-actions {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: 6px 10px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--line);
}

.assistant-actions p {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.assistant-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 96px;
  overflow: auto;
  padding-bottom: 1px;
}

.assistant-bubbles button {
  min-height: 28px;
  max-width: 100%;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: var(--chip-muted);
  color: var(--accent-ink);
  padding: 4px 9px;
  text-align: left;
  white-space: normal;
  font-size: 11px;
  line-height: 1.25;
}

.contextual-thread-assistant strong {
  display: block;
  color: var(--ink);
}

.contextual-thread-actions {
  display: grid;
  gap: 8px;
}

.assistant-primary-action {
  display: grid;
}

.assistant-primary-action button {
  width: 100%;
  justify-content: center;
  min-height: 34px;
}

.assistant-primary-status {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg-subtle);
  padding: 10px 12px;
  gap: 4px;
}

.assistant-primary-status strong {
  color: var(--ink);
  font-size: 0.86rem;
}

.assistant-primary-status span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.assistant-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 4px 0;
}

.chat-log {
  flex: 1 1 auto;
  overflow: auto;
  padding: 8px 10px;
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 96px;
}

.llm-working {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin: 8px 10px 0;
  padding: 7px 9px;
  border: 1px solid var(--status-warn-border);
  border-left: 4px solid var(--orange);
  border-radius: 8px;
  background: var(--status-warn-bg);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--orange) 14%, transparent);
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  max-height: 62px;
}

.llm-working > span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid var(--status-warn-border);
  border-top-color: var(--status-warn-fg);
  animation: spin 0.85s linear infinite;
}

.llm-working strong {
  display: block;
  color: var(--status-warn-fg);
  font-size: 12px;
}

.llm-working p {
  margin: 2px 0 0;
  color: var(--status-warn-fg);
  font-size: 11px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.support-chat-log .llm-working {
  justify-self: start;
  width: min(760px, 92%);
  margin: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.message {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--panel-bg);
}

.message.user { background: var(--accent-soft); border-color: var(--border-soft); justify-self: end; max-width: 88%; }
.message.assistant { background: var(--panel-bg); border-color: var(--line); }
.message strong { font-size: 12px; }

.message-body {
  margin-top: 5px;
  display: grid;
  gap: 6px;
  font-size: 13px;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.message-body p {
  margin: 0;
}

.message-body ol,
.message-body ul {
  margin: 0;
  padding-left: 19px;
  display: grid;
  gap: 5px;
}

.message-body li {
  padding-left: 2px;
}

.message-body li > ul {
  margin-top: 4px;
  padding-left: 17px;
}

.message-body code {
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--panel-bg-muted);
  font-size: 12px;
}

.operation-drawer {
  border-top: 1px solid var(--line);
  padding: 9px 10px;
  display: grid;
  gap: 10px;
  background: var(--surface-soft);
  max-height: min(42vh, 360px);
  overflow: auto;
}

.operation-panel {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 14px;
  display: grid;
  gap: 10px;
  background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
}

.operation-workspace {
  align-content: start;
}

.operation-workspace .operation-drawer,
.operation-workspace .operation-panel {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface-raised) 78%, transparent);
  max-height: none;
  overflow: visible;
}

.operation-workspace .operation-drawer > h3,
.operation-workspace .operation-panel > h3 {
  margin: 0;
  font-size: 14px;
}

.operation-workspace .manager-picker {
  max-width: 680px;
}

.operation-drawer p { margin-bottom: 0; font-size: 13px; }

.operation-panel p,
.operation-drawer p { margin-bottom: 0; font-size: 13px; }

.operation-drawer textarea,
.operation-panel textarea {
  min-height: 96px;
  font-size: 12px;
}

.settings-screen {
  display: grid;
  gap: 10px;
  min-width: 0;
  overflow: auto;
}

.settings-screen > .pane-title,
.settings-screen > .story-workspace-tabs,
.settings-screen > .operation-drawer,
.settings-screen > .operation-panel {
  min-width: 0;
}

.settings-screen .operation-drawer {
  max-height: none;
  overflow: visible;
  padding: 0;
  border-top: 0;
  background: transparent;
}

.settings-screen .operation-drawer > h3 {
  display: none;
}

.settings-screen .settings-section {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--border-soft) 38%, transparent);
}

.settings-screen .settings-section > h4 {
  margin: -10px -10px 2px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 8px 8px 0 0;
  background: var(--panel-header-bg);
}

.settings-screen .settings-section label small {
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.35;
}

.settings-screen .settings-section > *,
.settings-screen .settings-section label,
.settings-screen .settings-section input,
.settings-screen .settings-section select,
.settings-screen .settings-section textarea {
  box-sizing: border-box;
  min-width: 0;
}

.user-settings-screen .pane-title {
  align-items: center;
}

.user-settings-search {
  flex: 0 1 320px;
  min-width: 220px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 750;
}

.user-settings-search input {
  min-height: 34px;
  margin-top: 5px;
  font-size: 12px;
}

.user-settings-drawer {
  display: grid;
  gap: 0;
}

.user-settings-tabs {
  box-sizing: border-box;
  min-height: 47px;
  margin-bottom: 10px;
}

.global-settings-tabs {
  box-sizing: border-box;
  min-height: 47px;
  margin-bottom: 10px;
  max-width: 100%;
}

.global-settings-drawer {
  display: grid;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.user-settings-tab-panel {
  display: grid;
  gap: 10px;
}

.user-settings-empty {
  min-height: 92px;
  align-content: center;
}

.credential-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.credential-mode-card {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 112px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--panel-bg-subtle);
}

.credential-mode-card.selected {
  border-color: var(--accent);
  background: var(--panel-bg-selected);
  box-shadow: inset 3px 0 0 var(--accent);
}

.credential-mode-card strong,
.credential-mode-card p {
  margin: 0;
}

.credential-mode-card p {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.credential-mode-card button,
.credential-mode-card .status-pill {
  justify-self: start;
  margin-top: auto;
}

.credential-mode-details {
  display: grid;
  gap: 8px;
  padding: 8px 10px;
  border: 1px dashed var(--border-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg-subtle) 88%, transparent);
}

.credential-mode-details summary {
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.credential-mode-details p {
  margin: 6px 0 0;
}

.credential-mode-fields {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.connection-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--panel-bg-subtle);
}

.connection-card strong,
.connection-card small {
  display: block;
}

.connection-card small {
  margin-top: 3px;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.connection-card small .status-pill {
  margin-right: 7px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.status-pill.ok {
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
}

.status-pill.warn {
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
}

.status-pill.danger {
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
}

.status-pill.neutral {
  background: var(--surface-muted);
  color: var(--muted);
}

.connection-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.connection-card-actions button {
  white-space: nowrap;
}

.connection-warning {
  color: var(--orange);
}

.email-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 10px;
}

.email-category-grid .check-row {
  min-height: 26px;
  padding: 4px 6px;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: var(--panel-bg-subtle);
}

.email-category-grid .check-row:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-soft));
  background: var(--panel-bg-selected);
}

.drawer-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.context-list {
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 11px;
}

.context-list span {
  color: var(--muted);
  line-height: 1.35;
}

.composer {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  padding: 8px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  background: var(--surface-raised);
}

.assistant-foot {
  flex: 0 0 auto;
  min-height: 20px;
  display: grid;
  place-items: center;
  color: var(--green);
  font-size: 10px;
  background: var(--surface-raised);
}

.check-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 32px;
}

.check-row input {
  width: 16px;
  min-height: 16px;
  padding: 0;
}

.integration-fields {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.integration-fields.hidden { display: none; }

.validation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.validation-panel {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-muted);
}

.validation-panel.success {
  border-color: var(--status-ok-border);
  background: color-mix(in srgb, var(--status-ok-bg) 72%, transparent);
}

.validation-panel.danger {
  border-color: var(--status-danger-border);
  background: color-mix(in srgb, var(--status-danger-bg) 72%, transparent);
}

.validation-panel.working {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--border-soft));
  background: color-mix(in srgb, var(--accent-soft) 72%, transparent);
}

.validation-panel strong {
  color: var(--ink);
  font-size: 11px;
}

.validation-panel small,
.validation-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.settings-section {
  display: grid;
  gap: 8px;
}

.settings-section h4 {
  margin: 0;
  font-size: 12px;
  color: var(--ink);
}

.settings-section p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.integration-store {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
}

.integration-store-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(340px, .7fr);
  gap: 10px;
  min-height: 0;
}

.integration-store-list,
.integration-detail {
  min-height: 0;
  overflow: auto;
}

.integration-store-list {
  display: grid;
  align-content: start;
  gap: 10px;
}

.integration-search-row {
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
}

.integration-search-row label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.integration-search-row input {
  min-height: 32px;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}

.integration-search-row p {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.integration-group {
  display: grid;
  gap: 7px;
}

.integration-group h3 {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.integration-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 210px);
  gap: 8px;
  justify-content: start;
}

.integration-tile {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto minmax(28px, 1fr) auto;
  gap: 2px 8px;
  width: 210px;
  min-height: 92px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--ink);
  text-align: left;
}

.integration-tile.not-configured {
  background: var(--surface-muted);
  border-color: var(--line);
}

.integration-tile.not-installed {
  background: var(--not-installed-bg);
  border-color: var(--not-installed-border);
}

.integration-tile.active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.integration-tile.enabled {
  background: var(--green-soft);
  border-color: color-mix(in srgb, var(--green) 52%, var(--line));
}

.integration-tile-icon {
  grid-row: 1 / span 3;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
}

.integration-tile-icon.large {
  width: 36px;
  height: 36px;
  font-size: 11px;
}

.integration-tile strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-vendor {
  overflow: hidden;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.integration-tile small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.25;
}

.integration-tile em,
.integration-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-width: 76px;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.integration-metadata-callout {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid var(--status-warn-border);
  border-radius: 8px;
  background: var(--orange-soft);
  color: var(--orange);
}

.integration-metadata-callout span {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.integration-metadata-callout small {
  color: var(--ink);
  font-size: 11px;
  line-height: 1.25;
}

.integration-class-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.integration-class-list b {
  display: inline-flex;
  align-items: center;
  min-height: 16px;
  max-width: 100%;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 9px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-class-list.detail b {
  font-size: 9.5px;
  background: var(--surface-raised);
}

.integration-tile em.neutral,
.integration-status-pill.neutral {
  color: var(--muted);
  background: var(--surface-muted);
}

.integration-tile em.not-installed,
.integration-status-pill.not-installed {
  color: var(--not-installed-ink);
  background: var(--not-installed-bg);
  border: 1px solid var(--not-installed-border);
}

.integration-tile em.ok,
.integration-status-pill.ok {
  color: var(--status-ok-fg);
  background: var(--status-ok-bg);
}

.integration-tile em.warn,
.integration-status-pill.warn {
  color: var(--status-warn-fg);
  background: var(--status-warn-bg);
}

.integration-tile em.danger,
.integration-status-pill.danger {
  color: var(--status-danger-fg);
  background: var(--status-danger-bg);
}

.integration-detail {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-soft);
}

.integration-detail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: -10px -10px 0;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  background: var(--titlebar);
}

.integration-detail-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
}

.integration-detail-head p:not(.eyebrow),
.integration-status-row span:last-child,
.integration-placeholder p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.integration-status-row,
.integration-detail-actions,
.integration-surface-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.integration-surface-row span {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.integration-surface-row span.active {
  border-color: color-mix(in srgb, var(--green) 52%, var(--line));
  background: var(--green-soft);
  color: var(--green);
}

.integration-emery-hook {
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--accent-soft);
}

.integration-runtime-summary {
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--green) 42%, var(--line));
  border-radius: 8px;
  background: var(--green-soft);
}

.integration-runtime-summary strong {
  color: var(--green);
  font-size: 11px;
}

.integration-runtime-summary span {
  color: var(--muted);
  font-size: 10.5px;
  overflow-wrap: anywhere;
}

.integration-runtime-summary div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.integration-runtime-summary b {
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green-soft) 74%, var(--surface-raised));
  color: var(--green);
  font-size: 9.5px;
}

.integration-tool-router {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
}

.integration-tool-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.integration-tool-head strong,
.integration-tool-card strong {
  color: var(--ink);
  font-size: 11.5px;
}

.integration-tool-head p,
.integration-tool-card p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.integration-tool-list {
  display: grid;
  gap: 8px;
}

.integration-tool-card {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.integration-tool-card small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.integration-tool-schema {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.integration-tool-schema span {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 9.5px;
  font-weight: 800;
}

.integration-emery-hook strong {
  color: var(--accent-ink);
  font-size: 11px;
}

.integration-emery-hook ul {
  margin: 0;
  padding-left: 16px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.integration-config {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
}

.integration-config > .settings-section,
.integration-config > .integration-fields {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.integration-config > .settings-section > h4 {
  margin: -10px -10px 2px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  background: var(--titlebar);
}

.installed-settings-grid {
  display: grid;
  gap: 8px;
}

.installed-setting-field {
  min-width: 0;
}

.installed-setting-field select[multiple] {
  min-height: 78px;
}

.integration-test-credentials {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.integration-test-credentials h5 {
  margin: 0;
  color: var(--ink);
  font-size: 11px;
  text-transform: uppercase;
}

.integration-test-credentials p {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.integration-config-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.integration-config-summary span {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--ink);
  font-size: 10.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-config-summary b {
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

.integration-placeholder {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
}

.integration-placeholder strong {
  color: var(--ink);
  font-size: 12px;
}

@media (max-width: 980px) {
  .integration-store-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.foundation-grid {
  display: grid;
  gap: 7px;
}

.foundation-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(90px, .7fr) minmax(110px, .8fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--panel-bg-subtle);
}

.foundation-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.foundation-row strong,
.foundation-row b {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foundation-row span,
.foundation-row small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.foundation-row p {
  grid-column: 1 / -1;
  color: var(--text-secondary);
}

.audit-mini-log {
  display: grid;
  gap: 4px;
  max-height: 140px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--panel-bg-subtle);
}

.audit-mini-log p {
  color: var(--text-secondary);
  font-family: "Open Sans", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.35;
}

.audit-mini-log strong {
  color: var(--text-primary);
}

.settings-textarea {
  min-height: 92px;
  resize: vertical;
}

.api-key-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel-bg);
}

.api-key-form .api-feature-box,
.api-key-form button {
  grid-column: 1 / -1;
}

.api-feature-box {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
}

.api-key-table {
  display: grid;
  gap: 4px;
  max-height: 190px;
  overflow: auto;
}

.api-key-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(110px, 1fr) minmax(150px, 1.15fr) minmax(90px, .8fr) 72px 64px;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-bg);
  font-size: 11px;
}

.api-key-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
}

.a2a-agent-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 120px minmax(140px, .7fr) auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
}

.agent-farm-workspace {
  display: grid;
  gap: 12px;
}

.agent-farm-workspace-head {
  align-items: start;
}

.agent-farm-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.agent-farm-metrics article {
  display: grid;
  gap: 2px;
  min-height: 74px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.agent-farm-metrics strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.agent-farm-metrics span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.agent-farm-metrics small {
  color: var(--muted);
  font-size: 10px;
}

.agent-farm-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
  gap: 10px;
  align-items: start;
}

.agent-farm-card {
  min-width: 0;
}

.agent-farm-tabs {
  display: grid;
  gap: 10px;
}

.agent-farm-tab-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.agent-farm-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.agent-farm-tab-list label {
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  cursor: pointer;
}

#agentFarmTabOperations:checked ~ .agent-farm-tab-list label[for="agentFarmTabOperations"],
#agentFarmTabUsage:checked ~ .agent-farm-tab-list label[for="agentFarmTabUsage"],
#agentFarmTabClasses:checked ~ .agent-farm-tab-list label[for="agentFarmTabClasses"],
#agentFarmTabAgents:checked ~ .agent-farm-tab-list label[for="agentFarmTabAgents"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.agent-farm-tab-panel {
  display: none;
}

#agentFarmTabOperations:checked ~ .agent-farm-operations-panel,
#agentFarmTabUsage:checked ~ .agent-farm-usage-panel,
#agentFarmTabClasses:checked ~ .agent-farm-classes-panel,
#agentFarmTabAgents:checked ~ .agent-farm-agents-panel {
  display: block;
}

.agent-farm-primary,
.agent-farm-registry {
  grid-column: 1;
}

.agent-farm-source-list,
.agent-farm-policy-grid,
.agent-farm-guidance-grid {
  display: grid;
  gap: 8px;
}

.agent-farm-source-list article,
.agent-farm-policy-grid span,
.agent-farm-guidance-grid article {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.agent-farm-source-list article span {
  justify-self: start;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.agent-farm-source-list strong,
.agent-farm-policy-grid b,
.agent-farm-guidance-grid strong {
  color: var(--ink);
  font-size: 12px;
}

.agent-farm-source-list p,
.agent-farm-policy-grid span,
.agent-farm-guidance-grid p {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.agent-farm-guidance-grid p {
  margin: 0;
}

.agent-farm-step-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.agent-farm-step-card {
  position: relative;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px 12px 12px 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.agent-farm-step-wide {
  grid-column: 1 / -1;
}

.agent-farm-step-index {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 900;
}

.agent-farm-step-card strong {
  color: var(--ink);
  font-size: 12px;
}

.agent-farm-step-card p {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.agent-farm-runtime-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.agent-farm-runtime-guide article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.agent-farm-runtime-guide strong {
  color: var(--ink);
  font-size: 12px;
}

.agent-farm-runtime-guide p {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.agent-farm-runtime-guide code {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 10px;
  line-height: 1.35;
}

.agent-farm-section-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.agent-farm-section-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.agent-farm-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.agent-farm-summary-grid article {
  display: grid;
  gap: 3px;
  min-height: 70px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.agent-farm-summary-grid strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.agent-farm-summary-grid span {
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.agent-farm-summary-grid small {
  color: var(--muted);
  font-size: 10px;
}

.agent-farm-ops-hero {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.agent-farm-ops-hero article {
  display: grid;
  gap: 6px;
  min-width: 0;
  min-height: 120px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.agent-farm-ops-hero.ok article:first-child {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
}

.agent-farm-ops-hero.warn article:first-child {
  border-color: var(--status-warn-border);
  background: var(--status-warn-bg);
}

.agent-farm-ops-hero.danger article:first-child {
  border-color: var(--status-danger-border);
  background: var(--status-danger-bg);
}

.agent-farm-ops-hero span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.agent-farm-ops-hero strong {
  color: var(--ink);
  font-size: 27px;
  line-height: 1;
}

.agent-farm-ops-hero small {
  min-height: 28px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.agent-farm-ops-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.agent-farm-ops-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.agent-farm-ops-panel.wide {
  grid-column: 1 / -1;
}

.agent-farm-ops-panel > strong {
  color: var(--ink);
  font-size: 12px;
}

.agent-farm-recommendation-list {
  display: grid;
  gap: 7px;
}

.agent-farm-recommendation-list div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--status-neutral-border);
  border-radius: 8px;
  background: var(--status-neutral-bg);
}

.agent-farm-recommendation-list div.ok {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
}

.agent-farm-recommendation-list div.warn {
  border-color: var(--status-warn-border);
  background: var(--status-warn-bg);
}

.agent-farm-recommendation-list div.danger {
  border-color: var(--status-danger-border);
  background: var(--status-danger-bg);
}

.agent-farm-recommendation-list span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.agent-farm-recommendation-list b {
  color: var(--ink);
  font-size: 12px;
}

.agent-farm-recommendation-list small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.agent-farm-class-grid {
  display: grid;
  gap: 6px;
}

.agent-farm-class-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) repeat(5, minmax(90px, .8fr));
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 10.5px;
}

.agent-farm-class-row.header {
  min-height: 34px;
  background: var(--surface);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.agent-farm-class-row strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
}

.agent-farm-class-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

.agent-farm-health-grid,
.agent-farm-capacity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.agent-farm-health-grid article,
.agent-farm-capacity-grid article {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.agent-farm-health-grid article.warn {
  border-color: var(--status-warn-border);
}

.agent-farm-health-grid article.danger {
  border-color: var(--status-danger-border);
}

.agent-farm-health-main {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.agent-farm-health-main strong,
.agent-farm-capacity-grid > article > strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
}

.agent-farm-health-main small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

.agent-farm-health-main span {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid var(--status-neutral-border);
  border-radius: 999px;
  background: var(--status-neutral-bg);
  color: var(--status-neutral-fg);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.agent-farm-health-grid article.ok .agent-farm-health-main span {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
}

.agent-farm-health-grid article.warn .agent-farm-health-main span {
  border-color: var(--status-warn-border);
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
}

.agent-farm-health-grid article.danger .agent-farm-health-main span {
  border-color: var(--status-danger-border);
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
}

.agent-farm-health-bars {
  display: grid;
  gap: 6px;
}

.agent-farm-health-bar {
  display: grid;
  grid-template-columns: minmax(82px, .75fr) minmax(42px, auto) minmax(120px, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
}

.agent-farm-health-bar b {
  color: var(--ink);
  font-size: 10px;
  text-align: right;
}

.agent-farm-health-bar i,
.agent-farm-inline-meter {
  display: block;
  height: 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-muted);
}

.agent-farm-health-bar em,
.agent-farm-inline-meter em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.agent-farm-health-grid footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
}

.agent-farm-worker-map {
  display: grid;
  gap: 8px;
}

.agent-farm-worker-map article {
  display: grid;
  grid-template-columns: minmax(170px, .78fr) 42px minmax(280px, 1.22fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.agent-farm-worker-map article.warn {
  border-color: var(--status-warn-border);
}

.agent-farm-worker-map article.danger {
  border-color: var(--status-danger-border);
}

.agent-farm-worker-map-queue {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--status-neutral-border);
  border-radius: 8px;
  background: var(--status-neutral-bg);
}

.agent-farm-worker-map article.ok .agent-farm-worker-map-queue {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
}

.agent-farm-worker-map article.warn .agent-farm-worker-map-queue {
  border-color: var(--status-warn-border);
  background: var(--status-warn-bg);
}

.agent-farm-worker-map article.danger .agent-farm-worker-map-queue {
  border-color: var(--status-danger-border);
  background: var(--status-danger-bg);
}

.agent-farm-worker-map-queue span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.agent-farm-worker-map-queue strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-farm-worker-map-queue small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

.agent-farm-worker-map-line {
  position: relative;
  height: 2px;
  background: var(--line);
}

.agent-farm-worker-map-line i {
  position: absolute;
  top: 50%;
  right: -1px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--line);
  border-right: 2px solid var(--line);
  transform: translateY(-50%) rotate(45deg);
}

.agent-farm-worker-map-workers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
  min-width: 0;
}

.agent-farm-worker-map-workers span {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 52px;
  padding: 8px;
  border: 1px solid var(--status-neutral-border);
  border-radius: 7px;
  background: var(--surface-raised);
}

.agent-farm-worker-map-workers span.ok {
  border-color: var(--status-ok-border);
}

.agent-farm-worker-map-workers span.danger {
  border-color: var(--status-danger-border);
  background: var(--status-danger-bg);
}

.agent-farm-worker-map-workers b,
.agent-farm-worker-map-workers small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-farm-worker-map-workers b {
  color: var(--ink);
  font-size: 11px;
}

.agent-farm-worker-map-workers small {
  color: var(--muted);
  font-size: 9.5px;
}

.agent-farm-worker-map p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.agent-farm-workclass-map {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.agent-farm-workclass-map > strong {
  color: var(--ink);
  font-size: 12px;
}

.agent-farm-workclass-map .agent-graph-card {
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.agent-farm-workclass-map .agent-flow-canvas {
  width: 100%;
  max-width: 1180px;
  min-height: 430px;
  height: clamp(430px, var(--agent-flow-height, 54vh), 760px);
  margin-inline: auto;
}

.admin-agent-flow {
  position: relative;
  min-width: 900px;
  min-height: 380px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.admin-agent-flow-band {
  position: absolute;
  left: 14px;
  z-index: 3;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-agent-flow-band.queue {
  top: 14px;
}

.admin-agent-flow-band.worker {
  top: 222px;
}

.admin-agent-flow-edges {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.admin-agent-flow-edges path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2;
  opacity: .72;
}

.admin-agent-flow-edges path.ok {
  stroke: var(--status-ok-fg);
}

.admin-agent-flow-edges path.warn {
  stroke: var(--status-warn-fg);
}

.admin-agent-flow-edges path.danger {
  stroke: var(--status-danger-fg);
}

.admin-agent-flow-node {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 4px;
  width: 156px;
  min-height: 86px;
  padding: 9px;
  border: 2px solid var(--status-neutral-border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--ink);
  text-align: left;
  transform: translateX(-50%);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--rail-bg) 8%, transparent);
}

.admin-agent-flow-node:hover {
  border-color: var(--accent);
  background: var(--surface-selected);
}

.admin-agent-flow-node.queue.ok {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
}

.admin-agent-flow-node.queue.warn {
  border-color: var(--status-warn-border);
  background: var(--status-warn-bg);
}

.admin-agent-flow-node.queue.danger,
.admin-agent-flow-node.worker.danger {
  border-color: var(--status-danger-border);
  background: var(--status-danger-bg);
}

.admin-agent-flow-node.worker.ok {
  border-color: var(--status-ok-border);
}

.admin-agent-flow-node span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-agent-flow-node strong,
.admin-agent-flow-node small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-agent-flow-node strong {
  font-size: 12px;
}

.admin-agent-flow-node small {
  color: var(--muted);
  font-size: 10px;
}

.agent-farm-ranked-list,
.agent-farm-impeded-list {
  display: grid;
  gap: 7px;
}

.agent-farm-ranked-list > div {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) auto;
  gap: 5px 8px;
  align-items: center;
  min-width: 0;
}

.agent-farm-ranked-list span,
.agent-farm-ranked-list b {
  color: var(--muted);
  font-size: 10.5px;
}

.agent-farm-ranked-list b {
  color: var(--ink);
  text-align: right;
}

.agent-farm-ranked-list .agent-farm-inline-meter {
  grid-column: 1 / -1;
}

.agent-farm-efficiency-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.agent-farm-efficiency-grid span {
  display: grid;
  gap: 2px;
  min-height: 58px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.agent-farm-efficiency-grid b {
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}

.agent-farm-efficiency-grid small {
  color: var(--muted);
  font-size: 10px;
}

.agent-farm-runtime-stack-wrap {
  display: grid;
  gap: 8px;
}

.agent-farm-runtime-stack {
  display: flex;
  height: 26px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-muted);
}

.agent-farm-runtime-stack i {
  display: block;
  min-width: 4%;
  height: 100%;
  box-shadow: inset -1px 0 0 var(--project-stack-divider);
}

.agent-farm-runtime-stack-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}

.agent-farm-runtime-stack-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
}

.agent-farm-runtime-stack-legend b {
  color: var(--ink);
  font-size: 10px;
}

.agent-farm-impeded-list button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: none;
}

.agent-farm-impeded-list button:hover {
  border-color: var(--accent);
  background: var(--surface-selected);
}

.agent-farm-impeded-list .badge {
  grid-row: 1 / span 2;
  align-self: start;
}

.agent-farm-impeded-list strong,
.agent-farm-impeded-list small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-farm-impeded-list small {
  color: var(--muted);
  font-size: 10px;
}

.agent-farm-usage-signal-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.agent-farm-usage-signal-strip article,
.agent-farm-usage-chart-card,
.agent-farm-usage-treemap-card,
.agent-farm-usage-breakdown-card,
.agent-farm-usage-attention-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.agent-farm-usage-signal-strip article {
  display: grid;
  gap: 3px;
  min-height: 72px;
  padding: 10px;
}

.agent-farm-usage-signal-strip span,
.agent-farm-usage-card-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.agent-farm-usage-signal-strip strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.agent-farm-usage-signal-strip small {
  color: var(--muted);
  font-size: 10px;
}

.agent-farm-usage-layout,
.agent-farm-usage-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr);
  gap: 8px;
  margin-top: 8px;
}

.agent-farm-usage-chart-card,
.agent-farm-usage-treemap-card,
.agent-farm-usage-breakdown-card,
.agent-farm-usage-attention-card {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.agent-farm-usage-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.agent-farm-usage-card-head strong {
  color: var(--ink);
  font-size: 12px;
}

.agent-farm-usage-chart {
  display: grid;
  gap: 8px;
  min-height: 238px;
}

.agent-farm-usage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  align-items: center;
  min-height: 22px;
}

.agent-farm-usage-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
}

.agent-farm-project-dot,
.agent-farm-line-swatch {
  display: inline-block;
  flex: 0 0 auto;
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--muted);
}

.agent-farm-project-dot.color-1,
.agent-farm-usage-column i.color-1,
.agent-farm-usage-treemap .color-1,
.agent-farm-runtime-stack .color-1 { background: var(--project-stack-1); }
.agent-farm-project-dot.color-2,
.agent-farm-usage-column i.color-2,
.agent-farm-usage-treemap .color-2,
.agent-farm-runtime-stack .color-2 { background: var(--project-stack-2); }
.agent-farm-project-dot.color-3,
.agent-farm-usage-column i.color-3,
.agent-farm-usage-treemap .color-3,
.agent-farm-runtime-stack .color-3 { background: var(--project-stack-3); }
.agent-farm-project-dot.color-4,
.agent-farm-usage-column i.color-4,
.agent-farm-usage-treemap .color-4,
.agent-farm-runtime-stack .color-4 { background: var(--project-stack-4); }
.agent-farm-project-dot.color-5,
.agent-farm-usage-column i.color-5,
.agent-farm-usage-treemap .color-5,
.agent-farm-runtime-stack .color-5 { background: var(--project-stack-5); }

.agent-farm-usage-treemap .color-1 { color: var(--project-stack-1-ink); }
.agent-farm-usage-treemap .color-2 { color: var(--project-stack-2-ink); }
.agent-farm-usage-treemap .color-3 { color: var(--project-stack-3-ink); }
.agent-farm-usage-treemap .color-4 { color: var(--project-stack-4-ink); }
.agent-farm-usage-treemap .color-5 { color: var(--project-stack-5-ink); }

.agent-farm-line-swatch {
  inline-size: 14px;
  block-size: 0;
  border-radius: 0;
  background: transparent;
}

.agent-farm-line-swatch.budget {
  border-top: 2px dashed var(--danger);
}

.agent-farm-line-swatch.forecast {
  border-top: 2px dashed var(--accent);
}

.agent-farm-usage-plot {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  min-height: 194px;
  padding: 18px 6px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.agent-farm-usage-plot::before {
  content: "";
  position: absolute;
  inset: 18px 6px 24px;
  border-block: 1px solid var(--line);
  pointer-events: none;
}

.agent-farm-usage-plot article {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: end;
  gap: 5px;
  min-width: 0;
  height: 100%;
}

.agent-farm-usage-column {
  display: flex;
  flex-direction: column-reverse;
  min-height: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px 6px 3px 3px;
  background: var(--surface-muted);
}

.agent-farm-usage-column i {
  display: block;
  min-height: 3px;
  box-shadow: inset 0 -1px 0 var(--project-stack-divider);
}

.agent-farm-usage-plot small {
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.agent-farm-usage-budget-line,
.agent-farm-usage-forecast-line {
  position: absolute;
  inset-inline: 6px;
  z-index: 2;
  border-top: 1px dashed var(--danger);
  pointer-events: none;
}

.agent-farm-usage-forecast-line {
  border-top-color: var(--accent);
}

.agent-farm-usage-treemap {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  min-height: 238px;
}

.agent-farm-usage-treemap div {
  display: grid;
  align-content: end;
  gap: 3px;
  min-width: 92px;
  min-height: 78px;
  padding: 10px;
  border: 1px solid var(--project-stack-divider);
  border-radius: 7px;
}

.agent-farm-usage-treemap strong,
.agent-farm-usage-treemap span,
.agent-farm-usage-treemap small {
  color: inherit;
  line-height: 1.15;
}

.agent-farm-usage-treemap strong {
  font-size: 11px;
}

.agent-farm-usage-treemap span {
  font-size: 16px;
  font-weight: 900;
}

.agent-farm-usage-treemap small {
  font-size: 12px;
  font-weight: 900;
}

.agent-farm-usage-lower {
  grid-template-columns: 1fr;
}

.agent-farm-usage-table.compact {
  gap: 4px;
  min-width: 0;
}

.agent-farm-usage-table.compact .agent-farm-usage-row {
  grid-template-columns: minmax(130px, 1.25fr) minmax(82px, .7fr) minmax(72px, .65fr) minmax(104px, .85fr) minmax(46px, .42fr) minmax(78px, .58fr);
  min-height: 38px;
  padding: 7px 8px;
}

.agent-farm-usage-table.compact .agent-farm-usage-row strong {
  display: flex;
  align-items: center;
  gap: 6px;
}

.agent-farm-usage-table.compact .agent-farm-usage-row > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-farm-usage-table.compact .agent-farm-usage-row > span {
  white-space: nowrap;
}

.agent-farm-usage-table.compact .agent-farm-usage-row small {
  display: inline;
  margin: 0;
}

.agent-farm-runtime-split {
  display: grid;
  grid-template-columns: auto minmax(46px, 1fr) auto;
  gap: 5px;
  align-items: center;
}

.agent-farm-runtime-split b,
.agent-farm-runtime-split small {
  color: var(--muted);
  font-size: 10px;
}

.agent-farm-runtime-split i {
  display: block;
  height: 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-muted);
}

.agent-farm-runtime-split em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.agent-farm-usage-row .ok { color: var(--status-ok-fg); }
.agent-farm-usage-row .warn { color: var(--status-warn-fg); }
.agent-farm-usage-row .danger { color: var(--status-danger-fg); }

.agent-farm-budget-pill {
  display: inline-flex;
  justify-content: center;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid var(--status-neutral-border);
  border-radius: 999px;
  background: var(--status-neutral-bg);
  color: var(--status-neutral-fg);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-farm-budget-pill.ok {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
}

.agent-farm-budget-pill.warn {
  border-color: var(--status-warn-border);
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
}

.agent-farm-budget-pill.danger {
  border-color: var(--status-danger-border);
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
}

.agent-farm-usage-attention-list {
  display: grid;
  gap: 7px;
}

.agent-farm-usage-attention-list div {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--status-neutral-border);
  border-radius: 8px;
  background: var(--status-neutral-bg);
}

.agent-farm-usage-attention-list div.warn {
  border-color: var(--status-warn-border);
  background: var(--status-warn-bg);
}

.agent-farm-usage-attention-list div.danger {
  border-color: var(--status-danger-border);
  background: var(--status-danger-bg);
}

.agent-farm-usage-attention-list div.ok {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
}

.agent-farm-usage-attention-list span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.agent-farm-usage-attention-list strong {
  color: var(--ink);
  font-size: 12px;
}

.agent-farm-usage-attention-list small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.agent-farm-monthly-chart {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.agent-farm-monthly-chart article {
  display: grid;
  grid-template-columns: minmax(92px, .25fr) minmax(220px, 1fr);
  gap: 5px 10px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.agent-farm-monthly-chart strong,
.agent-farm-monthly-chart span {
  display: block;
  color: var(--ink);
  font-size: 11px;
}

.agent-farm-monthly-chart span {
  color: var(--muted);
  font-weight: 800;
}

.agent-farm-monthly-chart small {
  grid-column: 2;
  color: var(--muted);
  font-size: 10px;
}

.agent-farm-stacked-bar {
  display: flex;
  height: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-muted);
}

.agent-farm-stacked-bar i:nth-child(1),
.executive-token-stack i:nth-child(1) { background: var(--project-stack-1); }
.agent-farm-stacked-bar i:nth-child(2),
.executive-token-stack i:nth-child(2) { background: var(--project-stack-2); }
.agent-farm-stacked-bar i:nth-child(3),
.executive-token-stack i:nth-child(3) { background: var(--project-stack-3); }
.agent-farm-stacked-bar i:nth-child(4),
.executive-token-stack i:nth-child(4) { background: var(--project-stack-4); }
.agent-farm-stacked-bar i:nth-child(n+5),
.executive-token-stack i:nth-child(n+5) { background: var(--project-stack-5); }

.agent-farm-usage-table {
  display: grid;
  gap: 5px;
}

.agent-farm-usage-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) repeat(5, minmax(74px, .7fr));
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 10.5px;
}

.agent-farm-usage-row.header {
  background: var(--surface);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.agent-farm-usage-row strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
}

.agent-farm-usage-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.agent-farm-overview-section,
.agent-farm-worker-section {
  display: grid;
  gap: 8px;
}

.agent-farm-candidate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.agent-farm-candidate {
  display: grid;
  gap: 5px;
  min-height: 112px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.agent-farm-candidate span {
  justify-self: start;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.agent-farm-candidate strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.2;
}

.agent-farm-candidate p {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.agent-farm-decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.agent-farm-decision {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
}

.agent-farm-decision p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.agent-farm-path-list {
  display: grid;
  gap: 6px;
}

.agent-farm-path-list small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

.agent-farm-worker-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
}

.agent-farm-worker-form .wide {
  grid-column: 1 / -1;
}

.agent-farm-worker-form button {
  justify-self: end;
}

.agent-farm-workspace .agent-farm-worker-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-farm-workspace .agent-farm-worker-form button {
  justify-self: stretch;
}

.agent-farm-workspace .a2a-agent-form {
  grid-template-columns: minmax(220px, 1fr) minmax(120px, .45fr) minmax(180px, .75fr);
}

.agent-farm-workspace .a2a-agent-form button {
  grid-column: 1 / -1;
  justify-self: stretch;
}

.agent-farm-workspace .a2a-agent-row {
  grid-template-columns: 1fr;
}

.agent-farm-workspace .a2a-agent-actions {
  justify-content: flex-start;
}

.integration-detail .agent-farm-candidate-grid {
  grid-template-columns: 1fr;
}

.integration-detail .agent-farm-candidate {
  min-height: auto;
}

.integration-detail .agent-farm-worker-form {
  grid-template-columns: 1fr;
}

.integration-detail .agent-farm-worker-form button {
  justify-self: stretch;
}

.integration-detail .agent-farm-overview-section .integration-config-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .agent-farm-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .agent-farm-dashboard {
    grid-template-columns: 1fr;
  }

  .agent-farm-usage-layout,
  .agent-farm-usage-lower {
    grid-template-columns: 1fr;
  }

  .agent-farm-step-grid,
  .agent-farm-ops-hero,
  .agent-farm-ops-grid,
  .agent-farm-class-row,
  .agent-farm-health-grid,
  .agent-farm-capacity-grid,
  .agent-farm-worker-map article,
  .agent-farm-usage-table:not(.compact) .agent-farm-usage-row {
    grid-template-columns: 1fr;
  }

  .agent-farm-health-bar,
  .agent-farm-monthly-chart article {
    grid-template-columns: 1fr;
  }

  .agent-farm-monthly-chart small {
    grid-column: auto;
  }

  .agent-farm-decision-grid {
    grid-template-columns: 1fr;
  }

  .agent-farm-primary,
  .agent-farm-registry {
    grid-column: auto;
  }
}

.crewai-automation-form {
  grid-template-columns: minmax(220px, 0.85fr) minmax(320px, 1.15fr);
  align-items: start;
  gap: 10px 12px;
}

.crewai-automation-form label {
  min-width: 0;
}

.crewai-automation-form .wide,
.crewai-automation-form .form-actions {
  grid-column: 1 / -1;
}

.crewai-automation-form .settings-textarea {
  min-height: 92px;
  resize: vertical;
}

.crewai-automation-form .form-actions {
  display: flex;
  justify-content: flex-end;
}

.a2a-agent-list {
  display: grid;
  gap: 6px;
  max-height: 240px;
  overflow: auto;
}

.a2a-agent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, .55fr) auto;
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
}

.a2a-agent-row strong,
.a2a-agent-row small,
.a2a-agent-row span,
.a2a-agent-row em {
  display: block;
}

.a2a-agent-row strong {
  font-size: 12px;
}

.a2a-agent-row small,
.a2a-agent-row span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.a2a-agent-row p {
  margin: 3px 0;
  color: var(--ink);
  font-size: 11px;
}

.emery-capability-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 6px;
}

.emery-capability-grid .check-row {
  min-height: 18px;
  font-size: 10px;
}

.a2a-agent-row em {
  color: var(--danger);
  font-size: 10px;
  font-style: normal;
}

.a2a-agent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.key-reveal {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--status-warn-border);
  border-radius: 8px;
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
}

.key-reveal textarea {
  min-height: 54px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

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

.segmented-list label {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-bg);
  color: var(--text-primary);
  font-size: 12px;
}

.segmented-list label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--link-fg);
}

.segmented-list input[type="checkbox"] {
  width: 13px;
  height: 13px;
  min-height: 13px;
  padding: 0;
  margin: 0;
}

.drawer-note {
  border: 1px solid var(--border-soft);
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: 8px;
  padding: 10px;
}

.toolbar-line {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
}

.data-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  background: var(--surface-raised);
  max-width: 100%;
  min-width: 0;
}

.data-table .table-row {
  display: grid;
  gap: 8px;
  align-items: center;
  min-width: 620px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.data-table .table-row:last-child {
  border-bottom: 0;
}

.data-table .table-row.head {
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.user-management {
  display: grid;
  grid-template-rows: auto auto minmax(180px, 1fr) auto auto;
  min-height: 0;
}

.user-sheet {
  max-height: clamp(210px, 34vh, 360px);
}

.data-row {
  display: grid;
  gap: 8px;
  align-items: center;
  min-width: 620px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.data-row:last-child { border-bottom: 0; }

.admin-dashboard {
  display: grid;
  gap: 10px;
  min-height: 0;
}

.admin-summary-grid,
.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-summary-grid button,
.admin-detail-grid div {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  padding: 10px;
  text-align: left;
}

.admin-summary-grid strong,
.admin-detail-grid strong {
  display: block;
  font-size: 18px;
  color: var(--ink);
  line-height: 1.1;
}

.admin-summary-grid span,
.admin-detail-grid span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.admin-project-table {
  max-height: 44vh;
}

.admin-project-table .data-row {
  grid-template-columns: minmax(220px, 1.4fr) 112px minmax(150px, 180px) 76px;
  width: 100%;
  text-align: left;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
}

.admin-project-table .data-row > div {
  min-width: 0;
}

.admin-project-table .project-state-pill {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-project-table button.data-row {
  min-height: 48px;
  background: var(--surface-raised);
}

.admin-project-table small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
}

.admin-project-admin {
  display: grid;
  gap: 10px;
}

.admin-system {
  display: grid;
  gap: 10px;
  min-height: 0;
}

.system-tabs {
  display: flex;
  gap: 2px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: auto hidden;
  align-items: flex-end;
}

.system-tabs button {
  min-height: 30px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.system-tabs button.active {
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
  background: var(--surface-raised);
  border-color: var(--accent);
  border-bottom-color: var(--surface-raised);
  color: var(--accent-ink);
  box-shadow: inset 0 2px 0 var(--accent);
}

.system-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.system-metric-card {
  min-height: 86px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.system-metric-card span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.system-metric-card strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.system-metric-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.support-screen {
  display: grid;
  gap: 10px;
}

.support-grid {
  display: grid;
  grid-template-columns: minmax(420px, .72fr) minmax(320px, .38fr);
  gap: 10px;
  align-items: stretch;
  min-width: 0;
}

.support-title-lockup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.support-headset-icon {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.support-headset-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.support-card {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  overflow: hidden;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
}

.support-card-strong {
  border-color: var(--line-strong);
  background: var(--surface-soft);
}

.support-issue-card {
  grid-column: 1 / -1;
  background: var(--surface-raised);
}

.support-card h3 {
  margin: 0;
  font-size: 13px;
}

.support-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.support-chat-card {
  min-height: min(640px, calc(100vh - 170px));
  grid-template-rows: auto minmax(280px, 1fr) auto auto auto auto;
}

.support-chat-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.support-chat-head label {
  min-width: 0;
}

.support-chat-log {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 280px;
  max-height: calc(100vh - 380px);
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.support-chat-message {
  display: grid;
  justify-self: start;
  gap: 5px;
  max-width: min(760px, 92%);
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
}

.support-chat-message.user {
  margin-left: 22px;
  border-color: var(--accent);
  background: var(--accent-soft);
}

.support-chat-message.assistant {
  border-color: var(--line-strong);
  background: var(--surface-raised);
}

.support-chat-message p,
.support-chat-message ul,
.support-chat-message ol {
  margin: 0;
}

.support-chat-message ul,
.support-chat-message ol {
  padding-left: 18px;
}

.support-permission-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-soft);
}

.support-permission-panel strong {
  color: var(--accent-ink);
  font-size: 12px;
}

.support-policy-review {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
}

.support-policy-head,
.support-policy-intent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.support-policy-head strong,
.support-policy-intent strong {
  font-size: 12px;
}

.support-policy-head p,
.support-policy-intent p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.support-policy-reasons {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.support-policy-intents {
  display: grid;
  gap: 7px;
}

.support-policy-intent {
  padding: 8px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-soft);
}

.support-policy-intent.status-ready {
  border-left-color: var(--green);
}

.support-policy-intent.status-needs-approval,
.support-policy-intent.status-handoff,
.support-policy-intent.status-needs-review {
  border-left-color: var(--warning);
}

.support-policy-intent.status-blocked {
  border-left-color: var(--danger);
}

.support-policy-intent-title {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.support-policy-intent small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.support-policy-decision.approved {
  color: var(--green);
  font-weight: 800;
}

.support-policy-decision.rejected {
  color: var(--danger);
  font-weight: 800;
}

.support-policy-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.support-learning-events {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.support-learning-events > strong {
  font-size: 12px;
}

.support-learning-events > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 6px;
  align-items: center;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.support-learning-events small {
  color: var(--muted);
  font-size: 10.5px;
}

.support-learning-events p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.support-permission-actions,
.support-chat-actions,
.support-chat-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.support-chat-prompts button {
  font-size: 11px;
}

.support-chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.support-chat-composer textarea {
  min-height: 58px;
  max-height: 140px;
  resize: vertical;
}

.support-form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(108px, .45fr);
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.support-form > label {
  min-width: 0;
}

.support-issue-form {
  display: grid;
  grid-template-columns: minmax(150px, .45fr) minmax(180px, .55fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.support-issue-form label {
  min-width: 0;
}

.support-issue-form .wide {
  grid-column: 1 / -1;
}

.support-issue-form textarea {
  min-height: 62px;
  resize: vertical;
}

.support-issue-result {
  display: grid;
  gap: 8px;
}

.support-issue-note {
  display: grid;
  gap: 6px;
  max-height: 360px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.45;
}

.support-issue-note p,
.support-issue-note ul,
.support-issue-note ol {
  margin: 0;
}

.support-issue-note ul,
.support-issue-note ol {
  padding-left: 18px;
}

.support-debug {
  grid-column: 1 / -1;
  align-self: center;
  margin-bottom: 0;
}

.support-card-strong .drawer-actions {
  justify-content: flex-start;
  min-width: 0;
}

.support-card-strong .drawer-actions button {
  max-width: 100%;
}

.support-checklist {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 17px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.support-result {
  border-color: var(--green);
}

.support-progress-panel {
  position: relative;
  z-index: 2;
  border-color: var(--accent);
  background: var(--accent-soft);
}

.support-progress-list {
  display: grid;
  gap: 3px;
  max-height: 160px;
  margin: 3px 0 0;
  padding-left: 18px;
  overflow: auto;
  color: var(--ink);
  font-size: 10.5px;
  line-height: 1.35;
}

.support-progress-list li:last-child {
  color: var(--accent-ink);
  font-weight: 800;
}

.support-result .drawer-actions {
  margin-top: 4px;
}

.support-list-card {
  min-height: 160px;
}

.support-work-card {
  align-content: start;
  grid-template-rows: auto minmax(0, auto) auto auto;
}

.support-bundles-head {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.support-work-list {
  display: grid;
  gap: 7px;
  max-height: min(360px, 42vh);
  overflow: auto;
}

.support-work-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 7px;
  background: var(--surface-raised);
}

.support-work-row.status-scheduled {
  border-left-color: var(--green);
}

.support-work-row.status-failed {
  border-left-color: var(--danger);
}

.support-work-row strong,
.support-work-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-work-row strong {
  font-size: 12px;
}

.support-work-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
}

.support-work-row p {
  margin-top: 5px;
}

.support-work-row ol {
  display: grid;
  gap: 3px;
  max-height: 112px;
  margin: 6px 0 0;
  padding-left: 18px;
  overflow: auto;
  color: var(--muted);
  font-size: 10.5px;
}

.support-work-row code {
  color: var(--ink);
  font-size: 10.5px;
}

.support-work-actions {
  display: flex;
  justify-content: flex-end;
}

.support-scheduler {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-soft);
}

.support-scheduler > div:first-child,
.support-scheduler label:nth-of-type(3),
.support-scheduler .check-row,
.support-scheduler-actions {
  grid-column: 1 / -1;
}

.support-scheduler strong {
  color: var(--accent-ink);
  font-size: 12px;
}

.support-scheduler input {
  min-width: 0;
}

.support-scheduler-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.support-bundle-list {
  display: grid;
  gap: 6px;
  max-height: 180px;
  overflow: auto;
}

.support-bundle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
}

.support-bundle-row:hover,
.support-bundle-row:focus-within {
  border-color: var(--line-strong);
  background: var(--surface-selected);
}

.support-bundle-actions {
  display: flex;
  gap: 5px;
  align-items: center;
}

.support-delete-button {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

.support-bundle-row:hover .support-delete-button,
.support-bundle-row:focus-within .support-delete-button {
  opacity: 1;
}

.support-delete-button:hover,
.support-delete-button:focus-visible {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}

.support-delete-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.support-bundle-row strong,
.support-bundle-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-bundle-row strong {
  font-size: 12px;
}

.support-bundle-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
}

.system-performance-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 82%, transparent);
}

.system-log-panel {
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr) auto;
  min-height: 0;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-raised);
}

.system-log-panel .artifact-filter-bar {
  border-width: 0 0 1px;
  border-radius: 0;
}

.scale-target-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.scale-target-grid div {
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--panel-bg-subtle);
}

.scale-target-grid span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.scale-target-grid strong {
  display: block;
  margin-top: 3px;
  font-size: 16px;
}

.performance-table {
  display: grid;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
}

.performance-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) repeat(5, minmax(80px, .7fr));
  min-width: 680px;
  border-top: 1px solid var(--line);
  background: var(--surface-raised);
}

.performance-row:first-child {
  border-top: 0;
}

.performance-row span {
  padding: 7px 8px;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.25;
}

.performance-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  background: var(--surface-muted);
}

.performance-row.ok span:nth-child(3) {
  color: var(--status-ok-fg);
  font-weight: 800;
}

.performance-row.warn span:nth-child(3) {
  color: var(--status-warn-fg);
  font-weight: 800;
}

.message-center {
  display: grid;
  gap: 10px;
}

.message-pane {
  display: grid;
  gap: 8px;
  min-height: 0;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface);
}

.message-inbox-pane {
  max-height: min(280px, 34vh);
}

.message-summary-list {
  display: grid;
  gap: 6px;
  overflow: auto;
  padding-right: 2px;
}

.message-pane-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.message-pane-title h3 {
  margin: 0;
  font-size: 13px;
}

.message-pane-title span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.message-summary-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(112px, 0.8fr) minmax(0, 2fr) minmax(64px, auto);
  grid-template-rows: minmax(20px, auto) minmax(21px, auto);
  grid-template-areas:
    "from subject actions"
    "tags time assessment";
  gap: 3px 12px;
  align-items: center;
  justify-items: stretch;
  min-height: 56px;
  padding: 9px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--text);
  text-align: left;
  box-shadow: none;
}

.message-summary-row:hover,
.message-summary-row:focus-visible,
.message-summary-row.selected {
  border-color: var(--topbar-active-border);
  background: var(--accent-soft);
}

.message-cell-button {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  box-shadow: none;
  line-height: 1.25;
}

.message-cell-button:hover,
.message-cell-button:focus-visible {
  background: transparent;
  color: var(--accent-ink);
  box-shadow: none;
}

.message-from-cell {
  grid-area: from;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-subject-cell {
  grid-area: subject;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-summary-row.unread .message-subject-cell {
  font-weight: 900;
}

.message-row-actions {
  grid-area: actions;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  white-space: nowrap;
}

.message-summary-row small,
.message-detail small {
  color: var(--muted);
  font-size: 11px;
}

.message-detail {
  display: grid;
  gap: 10px;
}

.message-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: start;
}

.message-detail-head .message-badges,
.message-detail-head h3,
.message-detail-head small {
  grid-column: 1;
}

.message-detail h3 {
  margin: 0;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.message-detail p {
  margin: 0;
  color: var(--text);
}

.message-actions,
.message-action-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.message-actions {
  align-items: center;
  justify-content: flex-end;
  grid-column: 2;
  grid-row: 1 / span 3;
}

.message-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  row-gap: 7px;
  align-items: center;
  max-width: 100%;
  padding-top: 2px;
}

.message-tags-cell {
  grid-area: tags;
  min-width: 0;
  min-height: 22px;
  overflow: hidden;
}

.message-time-cell {
  grid-area: time;
  justify-self: start;
  min-width: 0;
  min-height: 18px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-assessment-cell {
  grid-area: assessment;
  justify-self: end;
  min-width: 28px;
  min-height: 24px;
}

.message-badges span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 18px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--chip-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-summary-row .message-badges {
  flex-wrap: nowrap;
}

.message-summary-row .message-badges span {
  max-width: 112px;
}

.message-icon-action {
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.message-icon-action::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
}

.message-icon-action:hover,
.message-icon-action:focus-visible {
  background: transparent;
  color: var(--accent-ink);
  box-shadow: none;
}

.message-icon-action:hover::before,
.message-icon-action:focus-visible::before {
  background: var(--accent-soft);
}

.message-icon-action.ai {
  color: var(--accent-ink);
}

.message-icon-action:disabled {
  opacity: 0.5;
}

.message-icon-action svg,
.message-assessment-indicator svg {
  position: relative;
  z-index: 1;
  width: 17px;
  height: 17px;
}

.message-icon-action[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  max-width: 180px;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: nowrap;
  box-shadow: var(--shadow);
}

.message-icon-action[data-tooltip]:hover::after,
.message-icon-action[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.message-assessment-indicator {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--muted);
}

.message-assessment-indicator.done {
  color: var(--status-ok-fg);
  background: transparent;
}

.message-assessment-indicator.working {
  color: var(--accent-ink);
  background: transparent;
}

.message-assessment-indicator.pending {
  width: 8px;
  height: 8px;
  margin: 8px;
  background: var(--border);
}

.message-badges .danger {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--status-danger-border);
}

.message-badges .warn {
  color: var(--orange);
  background: var(--orange-soft);
  border-color: var(--status-warn-border);
}

.message-badges .neutral {
  background: var(--soft);
}

.message-badges .tag {
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-color: var(--topbar-active-border);
}

.message-detail-working {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--topbar-active-border);
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.message-detail-working svg {
  width: 16px;
  height: 16px;
}

.message-body {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--soft);
  color: var(--text);
  font: inherit;
}

.message-notes {
  display: grid;
  gap: 4px;
}

.message-notes strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.message-notes p {
  margin: 0;
}

.message-action {
  display: grid;
  gap: 4px;
  min-width: min(260px, 100%);
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.message-action span,
.message-delivery {
  color: var(--muted);
  font-size: 12px;
}

.message-support-assessment {
  position: relative;
  display: grid;
  gap: 9px;
  padding: 13px 13px 13px 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border));
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface-raised));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-raised) 76%, white 24%), 0 10px 22px color-mix(in srgb, var(--accent) 16%, transparent);
}

.message-support-assessment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.message-support-assessment-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.message-support-ai-mark {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--topbar-active-border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-raised) 80%, white 20%), 0 2px 6px color-mix(in srgb, var(--accent) 14%, transparent);
}

.message-support-ai-mark svg {
  width: 17px;
  height: 17px;
}

.message-support-assessment-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.message-support-assessment-actions button {
  min-height: 24px;
  padding: 3px 8px;
  font-size: 11px;
}

.message-support-assessment strong,
.message-support-assessment small {
  display: block;
}

.message-support-assessment small,
.message-support-assessment-actions > span,
.message-support-recommendation span {
  color: var(--muted);
  font-size: 11px;
}

.message-support-assessment p {
  margin: 0;
  color: var(--text);
}

.message-support-recommendation {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: var(--surface);
}

.message-support-automation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--topbar-active-border);
  border-radius: 7px;
  background: var(--surface);
}

.message-support-automation strong {
  display: block;
  color: var(--accent-ink);
  font-size: 12px;
}

.message-support-automation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.message-support-automation-actions button {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 11px;
}

.message-support-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.message-support-signals span {
  padding: 3px 7px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.message-support-assessment ol {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
}

.message-support-assessment li + li {
  margin-top: 3px;
}

.message-support-knowledge {
  display: grid;
  gap: 4px;
  padding-top: 2px;
}

.message-support-knowledge > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.message-support-knowledge small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-metrics-page {
  display: grid;
  gap: 9px;
}

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

.metric-card,
.metric-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.metric-card {
  min-height: 92px;
  padding: 9px;
}

.metric-card span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.metric-card strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.1;
}

.metric-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.32;
}

.metric-card.ok { border-left: 3px solid var(--green); }
.metric-card.warn { border-left: 3px solid var(--orange); }
.metric-card.danger { border-left: 3px solid var(--danger); }
.metric-card.neutral { border-left: 3px solid var(--border-strong); }

.what-if-page {
  display: grid;
  gap: 9px;
}

.what-if-page .metric-panel-head {
  margin: -9px -9px 0;
  padding: 8px 9px;
  border-bottom: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  background: var(--titlebar);
}

.what-if-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 8px;
  align-items: start;
}

.what-if-prompt-label {
  display: grid;
  gap: 6px;
}

.what-if-prompt {
  min-height: 82px;
  resize: vertical;
}

.what-if-actions,
.what-if-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.what-if-examples button {
  border-radius: 999px;
  font-size: 11px;
  background: var(--chip-muted);
}

.what-if-intent {
  border-left: 3px solid var(--accent);
}

.what-if-intent ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
}

.what-if-original {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.what-if-story-picker {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
  max-height: 156px;
  overflow: auto;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-muted);
}

.what-if-warnings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.what-if-warnings span {
  padding: 4px 7px;
  border: 1px solid var(--status-warn-border);
  border-radius: 999px;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: 11px;
  font-weight: 750;
}

.what-if-narrative p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
}

.what-if-draft {
  border-left: 3px solid var(--green);
}

.what-if-draft > p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
}

.what-if-draft-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.what-if-draft-meta span {
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--chip-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.what-if-draft-list {
  display: grid;
  gap: 6px;
}

.what-if-draft-change {
  display: grid;
  gap: 3px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
}

.what-if-draft-change strong,
.what-if-draft-change span {
  font-size: 11px;
  line-height: 1.35;
}

.what-if-draft-change span {
  color: var(--muted);
}

.what-if-impact-list {
  display: grid;
  gap: 8px;
}

.what-if-impact {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--green);
  border-radius: 7px;
  background: var(--surface-soft);
}

.what-if-impact.danger { border-left-color: var(--danger); }
.what-if-impact.warn { border-left-color: var(--orange); }
.what-if-impact.ok { border-left-color: var(--green); }

.what-if-impact-head {
  display: grid;
  gap: 3px;
}

.what-if-impact-head span {
  width: fit-content;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--chip-muted);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.what-if-impact-head strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}

.what-if-impact dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.what-if-impact dl div {
  display: grid;
  gap: 2px;
}

.what-if-impact dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.what-if-impact dd {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.what-if-options {
  border-left: 3px solid var(--accent);
}

.what-if-option-list {
  display: grid;
  gap: 8px;
}

.what-if-option {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--border-strong);
  border-radius: 7px;
  background: var(--surface-raised);
}

.what-if-option.recommended {
  border-left-color: var(--green);
  background: color-mix(in srgb, var(--green-soft) 54%, var(--surface-raised));
}

.what-if-option-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.what-if-option-head div {
  display: grid;
  gap: 2px;
}

.what-if-option-head strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}

.what-if-option-head span,
.what-if-option p,
.what-if-option-grid span,
.what-if-option-grid li {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.what-if-option p {
  margin: 0;
}

.what-if-option-head em {
  padding: 2px 6px;
  border: 1px solid var(--status-ok-border);
  border-radius: 999px;
  color: var(--status-ok-fg);
  background: var(--green-soft);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.what-if-option-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.what-if-option-grid div {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-soft);
}

.what-if-option-grid h4 {
  margin: -8px -8px 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  border-radius: 7px 7px 0 0;
  background: var(--titlebar);
  color: var(--ink);
  font-size: 10px;
  text-transform: uppercase;
}

.what-if-option-grid ul {
  margin: 0;
  padding-left: 16px;
}

.what-if-sprint-list,
.what-if-recommendations {
  display: grid;
  gap: 7px;
}

.what-if-sprint-row {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-left-width: 3px;
  border-radius: 7px;
  background: var(--surface-soft);
}

.what-if-sprint-row.ok { border-left-color: var(--green); }
.what-if-sprint-row.warn { border-left-color: var(--orange); }
.what-if-sprint-row.danger { border-left-color: var(--danger); }

.what-if-sprint-row div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.what-if-sprint-row strong,
.what-if-sprint-row span {
  font-size: 12px;
}

.what-if-sprint-row span,
.what-if-sprint-row p,
.what-if-recommendations p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.pco-page {
  display: grid;
  gap: 9px;
}

.requirements-document {
  display: grid;
  gap: 10px;
}

.requirements-workspace {
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  align-items: start;
}

.requirements-doc-list {
  display: grid;
  gap: 8px;
  align-content: start;
  max-height: calc(100vh - 210px);
  overflow: auto;
}

.requirements-doc-row {
  width: 100%;
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
  text-align: left;
}

.requirements-list-label {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.requirements-doc-row.active {
  border-color: var(--accent);
  background: var(--surface-selected);
}

.requirements-doc-row strong {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.requirements-doc-row span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.requirements-create {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line-strong);
}

.requirements-create > p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.38;
}

.requirements-document-detail {
  min-width: 0;
}

.requirements-workbench {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.requirements-hero,
.requirements-card,
.requirements-story-detail-head {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
}

.requirements-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
}

.requirements-hero h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.18;
}

.requirements-hero p {
  max-width: 780px;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.requirements-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 220px;
}

.requirements-hero-stats span {
  display: grid;
  min-width: 66px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.requirements-hero-stats strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.1;
}

.requirements-workbench-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.35fr) minmax(300px, .85fr);
  grid-template-areas:
    "intent documents"
    "stories review"
    "stories review";
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.requirements-workbench-grid.requirements-review-grid {
  grid-template-areas:
    "intent documents"
    "review review";
}

.requirements-grid-intent,
.requirements-grid-sources,
.requirements-grid-stories,
.requirements-grid-documents,
.requirements-grid-review,
.requirements-left-column,
.requirements-main-column,
.requirements-right-column {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.requirements-grid-intent { grid-area: intent; }
.requirements-grid-sources { grid-area: documents; }
.requirements-grid-stories {
  grid-area: stories;
  align-self: stretch;
}
.requirements-grid-documents { grid-area: documents; }
.requirements-grid-review { grid-area: review; }

.requirements-grid-stories > .requirements-card,
.requirements-grid-stories > .story-planning-panel,
.requirements-grid-stories > * {
  min-width: 0;
}

.requirements-card {
  display: grid;
  gap: 9px;
  padding: 10px;
}

.requirements-card .metric-panel-head {
  align-items: start;
  margin: -10px -10px 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  background: var(--titlebar);
}

.requirements-card .metric-panel-head h3 {
  font-size: 13px;
}

.requirements-card .metric-panel-head p,
.requirements-change-card > p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 10.8px;
  line-height: 1.35;
}

.requirements-intent-card {
  background: var(--surface-raised);
}

.requirements-intent-card textarea {
  min-height: 138px;
  resize: vertical;
  font-size: 12px;
  line-height: 1.38;
}

.requirements-info-card {
  align-content: start;
  min-height: 0;
  background: var(--surface-raised);
}

.requirements-info-summary {
  display: grid;
  gap: 7px;
  padding: 9px 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
  overflow: visible;
}

.requirements-info-summary p {
  margin: 0;
  color: var(--ink);
  font-size: 11.3px;
  line-height: 1.55;
  overflow: visible;
}

.requirements-info-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.requirements-info-facts span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 10px;
}

.requirements-info-facts strong {
  color: var(--ink);
  font-size: 11px;
}

.requirements-info-list {
  display: grid;
  gap: 5px;
  min-height: 0;
  overflow: visible;
}

.requirements-info-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.requirements-info-list h4 {
  flex: 0 0 auto;
  margin: 0;
  color: var(--muted);
  font-size: 10.8px;
  text-transform: uppercase;
}

.requirements-info-inputs {
  display: grid;
  gap: 5px;
  max-height: 148px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.requirements-info-inputs::-webkit-scrollbar {
  width: 7px;
}

.requirements-info-inputs::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--line-strong);
}

.requirements-info-list button {
  display: grid;
  grid-template-columns: 22px minmax(82px, .38fr) minmax(120px, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 28px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
  color: inherit;
  text-align: left;
}

.requirements-info-list button:hover {
  border-color: var(--line-strong);
  background: var(--surface-selected);
}

.requirements-info-list strong,
.requirements-info-list p {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.requirements-info-list strong {
  font-size: 11px;
}

.requirements-info-list p {
  color: var(--muted);
  font-size: 10.5px;
}

.requirements-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.requirements-input-row button {
  justify-self: start;
}

.requirements-actions,
.requirements-approval-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.requirements-source-list,
.requirements-pco-list {
  display: grid;
  gap: 3px;
  max-height: 142px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.requirements-source-list.generated {
  max-height: 118px;
}

.requirements-source-list::-webkit-scrollbar,
.requirements-pco-list::-webkit-scrollbar {
  width: 7px;
}

.requirements-source-list::-webkit-scrollbar-thumb,
.requirements-pco-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--line-strong);
}

.requirements-source-list::-webkit-scrollbar-track,
.requirements-pco-list::-webkit-scrollbar-track {
  background: transparent;
}

.requirements-source-row {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 3px 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
}

.requirements-source-row.context,
.requirements-source-row.document,
.requirements-source-row.approved {
  border-color: color-mix(in srgb, var(--green) 50%, var(--line));
  background: color-mix(in srgb, var(--green-soft) 72%, var(--surface-raised));
}
.requirements-source-row.note { background: var(--surface-muted); }
.requirements-source-row.draft {
  border-color: color-mix(in srgb, var(--orange) 54%, var(--line));
  background: color-mix(in srgb, var(--orange-soft) 72%, var(--surface-raised));
}
.requirements-source-row.pco {
  border-color: color-mix(in srgb, var(--purple) 54%, var(--line));
  background: color-mix(in srgb, var(--purple-soft) 72%, var(--surface-raised));
}

.requirements-row-action {
  margin: 4px 0 0 29px;
  min-height: 26px;
  padding: 4px 10px;
  font-size: 11px;
}

.requirements-doc-open {
  display: grid;
  grid-template-columns: 22px minmax(90px, .42fr) minmax(120px, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 24px;
  padding: 0 3px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.requirements-doc-open:hover {
  color: var(--accent-ink);
}

.requirements-doc-open.selected,
.requirement-comment-row.selected {
  outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background: var(--surface-selected);
}

.intent-review-toolbar {
  display: flex;
  min-height: 28px;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 10.5px;
}

.requirements-preview-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.requirements-preview-actions button {
  min-height: 28px;
  padding: 5px 9px;
  font-size: 11px;
}

.requirements-preview-actions .danger-light {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-soft);
}

.intent-review-toolbar span,
.intent-review-toolbar strong {
  color: var(--ink);
  font-size: 10.5px;
}

.intent-review-toolbar small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intent-review-toolbar button {
  min-height: 22px;
  padding: 3px 7px;
  font-size: 10.3px;
}

.requirement-comment-row {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
}

.requirements-source-icon {
  position: relative;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--accent-ink);
}

.requirements-source-icon svg {
  width: 13px;
  height: 13px;
}

.requirements-source-icon.intent-accepted::after,
.comment-intent-marker.intent-accepted::after {
  content: "✓";
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  width: 13px;
  height: 13px;
  place-items: center;
  border: 1px solid var(--status-ok-border);
  border-radius: 999px;
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.requirements-source-icon.intent-excluded::after,
.comment-intent-marker.intent-excluded::after {
  content: "×";
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  width: 13px;
  height: 13px;
  place-items: center;
  border: 1px solid var(--status-danger-border);
  border-radius: 999px;
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.comment-intent-marker {
  position: absolute;
  top: 10px;
  left: 8px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-raised);
}

.requirements-source-row strong,
.requirements-pco-row strong {
  overflow: hidden;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.requirements-source-row small,
.requirements-pco-row span {
  color: var(--muted);
  font-size: 10px;
}

.requirements-source-row p {
  display: block;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-evidence-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "meta action"
    "preview action";
  align-items: center;
  column-gap: 7px;
  row-gap: 2px;
  overflow: hidden;
}

.story-evidence-row > div {
  grid-area: meta;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 6px;
  min-width: 0;
}

.story-evidence-row .requirements-source-icon {
  grid-row: 1 / span 2;
  flex: 0 0 auto;
}

.story-evidence-row strong,
.story-evidence-row small {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-evidence-row p {
  grid-area: preview;
  min-width: 0;
  max-width: 100%;
}

.story-evidence-row button {
  grid-area: action;
  justify-self: end;
  max-width: 72px;
}

.requirements-workflow-active,
.requirements-impact-summary,
.requirements-mini-list {
  display: grid;
  gap: 4px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-muted);
}

.requirements-workflow-active p,
.requirements-impact-summary p,
.requirements-mini-list span {
  margin: 0;
  color: var(--muted);
  font-size: 10.8px;
  line-height: 1.35;
}

.requirements-mini-list {
  max-height: 120px;
  overflow: auto;
}

.requirements-review-card textarea {
  min-height: 76px;
  font-size: 12px;
}

.requirements-pco-row {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 0;
  padding: 8px;
  border-color: var(--line);
  background: var(--surface-muted);
  text-align: left;
}

.requirements-pco-row.active {
  border-color: var(--accent);
  background: var(--surface-selected);
}

.requirements-pco-create {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.requirements-pco-create summary {
  cursor: pointer;
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 750;
}

.requirements-pco-detail {
  max-height: 420px;
  overflow: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.requirements-pco-detail .pco-detail {
  border: 0;
  box-shadow: none;
  padding: 0;
}

.requirements-story-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
}

.pco-create {
  border-left: 3px solid var(--accent);
}

.pco-create > p,
.pco-detail > p {
  margin: 0;
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.4;
}

.pco-form-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

.pco-form-grid .wide {
  grid-column: span 2;
}

.pco-form-grid .pco-span-2 { grid-column: span 2; }
.pco-form-grid .pco-span-3 { grid-column: span 3; }
.pco-form-grid .pco-span-6 { grid-column: 1 / -1; }

.pco-form-grid label {
  display: grid;
  gap: 4px;
  font-size: 10px;
}

.pco-form-grid input,
.pco-form-grid select,
.pco-form-grid textarea {
  min-height: 30px;
  padding: 5px 7px;
  font-size: 12px;
}

.pco-form-grid .pco-points-field {
  width: auto;
  max-width: none;
  justify-self: stretch;
}

.pco-points-field input {
  text-align: center;
  font-weight: 800;
}

.pco-points-field small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.pco-form-grid textarea {
  min-height: 76px;
  resize: vertical;
}

.confluence-import-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr) auto;
  gap: 8px;
  align-items: end;
  padding: 8px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-soft) 42%, transparent);
}

.confluence-import-panel.compact {
  margin-bottom: 8px;
}

.confluence-import-panel strong {
  color: var(--text-primary);
  font-size: 12px;
}

.confluence-import-panel p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.pco-label-picker {
  display: grid;
  gap: 5px;
  align-content: start;
}

.pco-label-picker > span {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.pco-label-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
}

.pco-layout {
  display: grid;
  grid-template-columns: minmax(210px, 0.35fr) minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.pco-list {
  align-content: start;
  max-height: 520px;
  overflow: auto;
}

.pco-list-row {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 8px;
  text-align: left;
  border: 1px solid var(--line);
  border-left: 3px solid var(--border-strong);
  border-radius: 7px;
  background: var(--panel-bg);
}

.pco-list-row.active {
  border-left-color: var(--green);
  background: color-mix(in srgb, var(--status-ok-bg) 35%, transparent);
}

.pco-list-row strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pco-list-row span {
  color: var(--muted);
  font-size: 11px;
}

.pco-detail {
  border-left: 3px solid var(--green);
}

.pco-flow {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-soft) 36%, transparent);
}

.pco-flow-step {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-bg);
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.pco-flow-step span {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: 9px;
}

.pco-flow-step.done {
  border-color: var(--status-ok-border);
  background: var(--green-soft);
  color: var(--status-ok-fg);
}

.pco-flow-step.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--link-fg);
}

.pco-flow-arrow {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
}

.pco-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 7px;
}

.pco-summary-grid span {
  display: grid;
  gap: 2px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
  color: var(--muted);
  font-size: 11px;
}

.pco-summary-grid strong {
  color: var(--text-primary);
  font-size: 13px;
}

.pco-section {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
}

.pco-story-row {
  display: grid;
  gap: 3px;
  padding: 7px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--border-strong);
  border-radius: 7px;
  background: var(--soft);
}

.pco-story-row strong {
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.3;
}

.pco-story-row span,
.pco-story-row p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.pco-option-list {
  display: grid;
  gap: 7px;
}

.pco-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--border-strong);
  border-radius: 7px;
  background: var(--panel-bg);
}

.pco-option.recommended {
  border-left-color: var(--green);
  background: color-mix(in srgb, var(--status-ok-bg) 35%, transparent);
}

.pco-option span {
  display: grid;
  gap: 3px;
}

.pco-option strong {
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.3;
}

.pco-option small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.pco-accept-date {
  display: grid;
  gap: 8px;
}

.pco-accept-date label {
  max-width: 260px;
}

.metrics-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.metrics-two-column.project-budget-single {
  grid-template-columns: minmax(0, 1fr);
}

.project-budget-summary-panel .metrics-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.budgeting-request-list {
  display: grid;
  gap: 8px;
}

.budgeting-request-card {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.budgeting-approval-controls {
  grid-template-columns: minmax(150px, 220px) auto auto;
}

/* theme-escape:start fixed budget chart palette */
.budget-economics-panel,
.executive-token-panel {
  --budget-chart-1: #f59a1b;
  --budget-chart-2: #4fb6d8;
  --budget-chart-3: #e6a0c7;
  --budget-chart-4: #cf4654;
  --budget-chart-5: #f2b20f;
  --budget-chart-6: #5d4751;
  --budget-chart-7: #c69a68;
  --budget-chart-rest: #8a5835;
}
/* theme-escape:end */

.budget-economics-panel {
  gap: 10px;
}

.budget-economics-kpis,
.budget-economics-grid {
  display: grid;
  gap: 8px;
}

.budget-economics-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.budget-economics-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .75fr);
}

.budget-economics-chart-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.budget-spend-chart {
  display: grid;
  gap: 8px;
}

.budget-spend-plot {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  min-height: 198px;
  padding: 18px 6px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.budget-spend-plot.executive {
  min-height: 180px;
}

.budget-spend-plot::before {
  content: "";
  position: absolute;
  inset: 18px 6px 24px;
  border-block: 1px solid var(--line);
  pointer-events: none;
}

.budget-spend-plot article {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: end;
  gap: 5px;
  min-width: 0;
  height: 100%;
}

.budget-spend-column {
  min-height: 7px;
  border: 1px solid var(--line);
  border-radius: 6px 6px 3px 3px;
  background: var(--budget-chart-2, var(--accent));
}

.budget-spend-column.executive-stack {
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  background: var(--surface-muted);
}

.budget-spend-column.executive-stack i {
  display: block;
  min-height: 3px;
  box-shadow: inset 0 -1px 0 var(--project-stack-divider);
}

.budget-spend-column.executive-stack i.color-1,
.budget-runtime-legend .executive-token-dot.color-1,
.executive-token-table .executive-token-dot.color-1 { background: var(--budget-chart-1, var(--project-stack-1)); }
.budget-spend-column.executive-stack i.color-2,
.budget-runtime-legend .executive-token-dot.color-2,
.executive-token-table .executive-token-dot.color-2 { background: var(--budget-chart-2, var(--project-stack-2)); }
.budget-spend-column.executive-stack i.color-3,
.budget-runtime-legend .executive-token-dot.color-3,
.executive-token-table .executive-token-dot.color-3 { background: var(--budget-chart-3, var(--project-stack-3)); }
.budget-spend-column.executive-stack i.color-4,
.budget-runtime-legend .executive-token-dot.color-4,
.executive-token-table .executive-token-dot.color-4 { background: var(--budget-chart-4, var(--project-stack-4)); }
.budget-spend-column.executive-stack i.color-5,
.budget-runtime-legend .executive-token-dot.color-5,
.executive-token-table .executive-token-dot.color-5 { background: var(--budget-chart-5, var(--project-stack-5)); }
.budget-spend-column.executive-stack i.color-6,
.budget-runtime-legend .executive-token-dot.color-6,
.executive-token-table .executive-token-dot.color-6 { background: var(--budget-chart-6, var(--project-stack-1)); }
.budget-spend-column.executive-stack i.color-7,
.budget-runtime-legend .executive-token-dot.color-7,
.executive-token-table .executive-token-dot.color-7 { background: var(--budget-chart-7, var(--project-stack-2)); }

.budget-spend-plot article.projected .budget-spend-column {
  background: var(--budget-chart-rest, var(--accent-soft));
  border-style: dashed;
}

.budget-spend-plot small {
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.budget-runtime-mix {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.budget-runtime-donut {
  --mix-share: 0;
  display: grid;
  place-items: center;
  align-content: center;
  width: 128px;
  height: 128px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--mix-gradient, conic-gradient(var(--budget-chart-1, var(--accent)) 0% 100%));
  box-shadow: inset 0 0 0 22px var(--surface-raised);
}

.budget-runtime-donut strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.budget-runtime-donut span {
  max-width: 86px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.budget-runtime-legend {
  display: grid;
  gap: 7px;
}

.budget-runtime-legend article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.budget-runtime-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.budget-runtime-legend b {
  color: var(--ink);
  font-size: 12px;
}

.budget-runtime-legend small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 10px;
}

.budget-project-economics-table .table-row {
  grid-template-columns: minmax(150px, 1.1fr) minmax(120px, .8fr) minmax(150px, .9fr) minmax(140px, .9fr);
}

.budget-project-economics-table .table-row > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.budget-project-economics-table .table-row strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.budget-project-economics-table .table-row small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.budget-project-economics-table .table-row.head span {
  color: inherit;
  font-size: inherit;
}

.executive-insufficient-data {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--muted);
}

.executive-insufficient-data strong {
  color: var(--ink);
  font-size: 14px;
}

.executive-insufficient-data p {
  max-width: 680px;
  margin: 0;
}

.budget-rate-table-wrap {
  display: grid;
  gap: 8px;
}

.budget-rate-table .table-row {
  grid-template-columns: minmax(110px, .8fr) minmax(160px, 1fr) minmax(96px, .55fr) minmax(96px, .55fr) 48px;
}

.budget-rate-table input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 4px 7px;
}

.budget-rate-table input:disabled {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  opacity: 1;
}

.budget-rate-table .table-row.editing input {
  border-color: var(--accent);
  background: var(--surface);
}

.budget-rate-edit {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
}

.settings-textarea.compact {
  min-height: 58px;
}

@media (max-width: 1100px) {
  .budget-economics-kpis,
  .budget-economics-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .budget-economics-kpis,
  .budget-economics-grid,
  .budget-runtime-mix,
  .budget-project-economics-table .table-row,
  .budget-rate-table .table-row {
    grid-template-columns: 1fr;
  }

  .budget-runtime-donut {
    justify-self: center;
  }
}

.metric-panel {
  padding: 9px;
  display: grid;
  gap: 8px;
}

.metric-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.metric-panel-head h3 {
  margin: 0;
  font-size: 14px;
}

.metric-panel-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.metric-bars,
.signal-list,
.blocker-list,
.point-load-list {
  display: grid;
  gap: 7px;
}

.metric-bar-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.75fr) minmax(160px, 1fr);
  gap: 8px;
  align-items: center;
}

.metric-bar-row strong,
.signal-row strong,
.blocker-row strong {
  display: block;
  font-size: 12px;
}

.metric-bar-row span,
.signal-row p,
.blocker-row p {
  display: block;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.metric-bar-row meter {
  width: 100%;
  height: 10px;
}

.signal-row,
.blocker-row,
.point-load-row {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px;
}

.point-load-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
}

.point-load-row strong {
  font-size: 12px;
}

.point-load-row span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.point-load-row p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.developer-load-chart {
  display: grid;
  gap: 8px;
}

.developer-load-bar {
  display: grid;
  grid-template-columns: minmax(118px, 0.52fr) minmax(150px, 1fr);
  gap: 8px;
  align-items: center;
}

.developer-load-bar > div:first-child {
  min-width: 0;
}

.developer-load-bar strong,
.developer-load-bar span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.developer-load-bar strong {
  font-size: 12px;
}

.developer-load-bar span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.developer-load-track {
  height: 16px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  background: var(--panel-bg-subtle);
}

.developer-load-track span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.metric-detail-actions {
  display: flex;
  justify-content: flex-end;
}

.em-agent-farm-panel {
  gap: 10px;
}

.em-agent-farm-kpis,
.em-agent-runtime-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.em-agent-runtime-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.em-agent-farm-kpis span,
.em-agent-runtime-facts span {
  display: grid;
  gap: 2px;
  min-height: 58px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.em-agent-farm-kpis b,
.em-agent-runtime-facts b {
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}

.em-agent-farm-kpis small,
.em-agent-runtime-facts small {
  color: var(--muted);
  font-size: 10px;
}

.em-agent-farm-grid {
  margin: 0;
}

.em-agent-farm-subpanel {
  min-width: 0;
  background: var(--surface-raised);
}

.em-agent-capability-list,
.em-agent-attention-list {
  display: grid;
  gap: 7px;
}

.em-agent-capability-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.em-agent-capability-list > div.warn {
  border-color: var(--status-warn-border);
  background: var(--status-warn-bg);
}

.em-agent-capability-list > div.danger {
  border-color: var(--status-danger-border);
  background: var(--status-danger-bg);
}

.em-agent-capability-list strong,
.em-agent-attention-list strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
}

.em-agent-capability-list span,
.em-agent-attention-list small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.em-agent-capability-list b {
  color: var(--ink);
  font-size: 10px;
  text-align: right;
}

.em-agent-capability-list .agent-farm-inline-meter {
  grid-column: 1 / -1;
}

.em-agent-attention-list button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: none;
}

.em-agent-attention-list button:hover {
  border-color: var(--accent);
  background: var(--surface-selected);
}

.em-agent-attention-list .badge {
  grid-row: 1 / span 2;
  align-self: start;
}

.em-agent-attention-list strong,
.em-agent-attention-list small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 22px;
  background: color-mix(in srgb, var(--rail-bg) 42%, transparent);
}

.artifact-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: grid;
  place-items: center;
  padding: 22px;
  background: color-mix(in srgb, var(--rail-bg) 42%, transparent);
}

.metric-lightbox,
.artifact-lightbox {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(1040px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  min-height: 0;
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--rail-bg) 2%, transparent);
}

.artifact-lightbox {
  width: min(980px, calc(100vw - 44px));
  grid-template-rows: auto auto minmax(0, 1fr);
}

.development-plan-lightbox {
  width: min(1060px, calc(100vw - 44px));
  height: calc(100vh - 44px);
  height: calc(100dvh - 44px);
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  grid-template-rows: auto auto minmax(120px, 1fr);
  overflow: hidden;
}

.development-plan-lightbox.process-setup-lightbox {
  width: min(940px, calc(100vw - 44px));
  height: auto;
  max-height: min(560px, calc(100vh - 44px));
  max-height: min(560px, calc(100dvh - 44px));
  grid-template-rows: auto minmax(0, auto);
}

.development-plan-lightbox.plan-submit-lightbox {
  width: min(980px, calc(100vw - 44px));
  height: auto;
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  grid-template-rows: auto minmax(0, 1fr);
}

.development-plan-lightbox.plan-review-lightbox {
  width: min(860px, calc(100vw - 44px));
  height: auto;
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  grid-template-rows: auto minmax(0, 1fr);
}

.process-setup-lightbox .development-process-setup {
  max-height: min(420px, calc(100vh - 138px));
  max-height: min(420px, calc(100dvh - 138px));
}

.development-process-setup {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(220px, .55fr) minmax(320px, 1fr) minmax(220px, .65fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.development-process-copy h3 {
  margin: 0 0 5px;
  color: var(--ink);
  font-size: 14px;
}

.development-process-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.development-process-checklist {
  min-height: 0;
  max-height: min(232px, 25vh);
  overflow: auto;
  display: grid;
  gap: 7px;
  padding-right: 2px;
}

.development-process-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
}

.development-process-step.process-node {
  grid-template-columns: auto minmax(220px, 1.15fr) minmax(160px, .85fr);
}

.process-node-fixed {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface-muted);
}

.process-node-action,
.process-node-result {
  min-width: 0;
}

.development-process-step .process-node-result {
  padding-left: 8px;
  border-left: 1px solid var(--line);
}

.process-node-result b {
  display: block;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.3;
}

.development-process-step.waived {
  border-color: var(--status-danger-border);
  background: var(--status-danger-bg);
}

.development-process-step input {
  margin-top: 2px;
}

.development-process-step strong,
.development-process-step small {
  display: block;
}

.development-process-step strong {
  color: var(--ink);
  font-size: 12px;
}

.development-process-step.waived strong {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--danger);
}

.development-process-step small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.development-process-reason {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.development-process-reason textarea {
  min-height: 88px;
  max-height: min(160px, 20vh);
  resize: vertical;
}

.development-plan-grid {
  min-height: 0;
  overflow: auto;
  padding-bottom: 4px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 12px;
}

.plan-submit-lightbox .development-plan-grid,
.plan-review-lightbox .development-plan-grid {
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
}

.plan-submit-lightbox .development-plan-editor textarea {
  height: clamp(260px, 46vh, 520px);
  height: clamp(260px, 46dvh, 520px);
}

.plan-review-lightbox .development-plan-editor textarea {
  height: clamp(220px, 38vh, 420px);
  height: clamp(220px, 38dvh, 420px);
}

@media (max-width: 820px) {
  .development-plan-lightbox.process-setup-lightbox,
  .development-plan-lightbox.plan-submit-lightbox,
  .development-plan-lightbox.plan-review-lightbox {
    width: calc(100vw - 28px);
    max-height: calc(100vh - 28px);
    max-height: calc(100dvh - 28px);
  }

  .process-setup-lightbox .development-process-setup,
  .development-plan-grid {
    grid-template-columns: 1fr;
  }

  .process-setup-lightbox .development-process-checklist {
    max-height: min(260px, 34vh);
    max-height: min(260px, 34dvh);
  }

  .development-process-step.process-node,
  .work-process-row.process-node-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .development-process-step .process-node-result,
  .work-process-row .process-node-result {
    grid-column: 2;
    padding-left: 0;
    border-left: 0;
  }
}

.development-plan-editor,
.development-plan-context,
.development-plan-context-card {
  min-height: 0;
  display: grid;
  gap: 10px;
}

.development-plan-editor,
.development-plan-context {
  align-content: start;
}

.workflow-policy-card {
  gap: 14px;
}

.workflow-policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.workflow-policy-table {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.workflow-policy-table h4 {
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
}

.workflow-policy-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(76px, .34fr));
  gap: 0;
  align-items: stretch;
  min-height: 48px;
  border-bottom: 1px solid var(--line);
}

.workflow-policy-row:last-child {
  border-bottom: 0;
}

.workflow-policy-row > span,
.workflow-policy-row label {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border-right: 1px solid var(--line);
}

.workflow-policy-row > span:last-child,
.workflow-policy-row label:last-child {
  border-right: 0;
}

.workflow-policy-row strong,
.workflow-policy-row small {
  display: block;
}

.workflow-policy-row strong {
  color: var(--ink);
  font-size: 12px;
}

.workflow-policy-row small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.workflow-policy-row label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.workflow-policy-row label input[type="radio"] {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  margin: 0;
  accent-color: var(--accent);
}

.workflow-policy-row label span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.workflow-policy-heading {
  min-height: 34px;
  background: var(--surface-soft);
}

.workflow-policy-heading > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.development-plan-editor textarea {
  min-height: 0;
  height: clamp(120px, 24vh, 300px);
  height: clamp(120px, 24dvh, 300px);
  font-family: "Open Sans", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
}

.lightbox-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
  align-items: center;
}

.development-plan-context-card {
  align-content: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-bg-subtle);
}

.development-plan-context-card h3 {
  margin: 0;
  font-size: 13px;
}

.development-plan-preview {
  min-height: 0;
  max-height: min(360px, 42vh);
  overflow: auto;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-bg);
}

.development-plan-preview h1,
.development-plan-preview h2,
.development-plan-preview h3 {
  margin: 0 0 6px;
  font-size: 13px;
}

.development-plan-preview p,
.development-plan-preview li {
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.4;
}

.agent-choice-list {
  display: grid;
  gap: 6px;
}

.agent-choice {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-bg);
}

.agent-choice.active {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: var(--accent-soft);
}

.agent-choice strong,
.agent-choice small {
  display: block;
}

.agent-choice small {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.requirements-document-lightbox {
  width: clamp(520px, 66vw, 980px);
  min-height: 320px;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.requirements-document-lightbox.note-lightbox {
  width: clamp(360px, 42vw, 620px);
  min-height: 220px;
  max-height: min(560px, calc(100vh - 44px));
}

.requirements-document-lightbox.note-lightbox .artifact-preview-pane {
  min-height: 120px;
}

.about-lightbox {
  width: min(780px, calc(100vw - 44px));
  grid-template-rows: auto auto minmax(0, 1fr);
}

.product-help-lightbox {
  width: min(780px, calc(100vw - 44px));
  max-height: min(760px, calc(100vh - 44px));
  grid-template-rows: auto minmax(0, 1fr);
}

.product-help-body {
  display: grid;
  grid-template-rows: minmax(220px, 1fr) auto auto;
  gap: 10px;
  min-height: 0;
}

.product-help-log {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 240px;
  max-height: 470px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.product-help-message {
  display: grid;
  justify-self: start;
  gap: 5px;
  max-width: 92%;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  font-size: 12px;
  line-height: 1.45;
}

.product-help-message.user {
  margin-left: 22px;
  border-color: var(--accent);
  background: var(--accent-soft);
}

.product-help-message.assistant {
  border-color: var(--line-strong);
  background: var(--surface-raised);
}

.product-help-message p,
.product-help-message ul,
.product-help-message ol {
  margin: 0;
}

.product-help-message ul,
.product-help-message ol {
  padding-left: 18px;
}

.product-help-citations {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.product-help-citations span {
  max-width: 100%;
  overflow: hidden;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-help-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.metric-lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

.metric-lightbox-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-right: 34px;
  align-items: start;
}

.metric-lightbox-head h2 {
  margin: 2px 0 4px;
  font-size: 18px;
}

.metric-lightbox-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.about-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.about-facts-grid div {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent-soft) 38%, transparent);
}

.about-facts-grid span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.about-facts-grid strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.about-notices {
  display: grid;
  min-height: 0;
  gap: 8px;
}

.about-notices-box {
  min-height: 260px;
  max-height: min(48vh, 440px);
  margin: 0;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-bg-subtle);
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.artifact-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.artifact-preview-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  padding: 3px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.artifact-preview-pane {
  min-height: 360px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg-subtle);
}

.artifact-preview-text {
  min-height: 100%;
  margin: 0;
  padding: 14px;
  color: var(--text-primary);
  font-family: "Open Sans", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.artifact-preview-image {
  display: block;
  max-width: 100%;
  max-height: min(68vh, 720px);
  margin: 0 auto;
  object-fit: contain;
}

.artifact-preview-frame {
  width: 100%;
  min-height: min(68vh, 720px);
  border: 0;
  background: var(--panel-bg);
}

.artifact-preview-empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 360px;
  padding: 22px;
  text-align: center;
}

.artifact-preview-empty p {
  max-width: 520px;
  margin: 8px 0 0;
  font-size: 13px;
}

.efficiency-narrative {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--accent-soft);
}

.efficiency-narrative > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
}

.efficiency-narrative div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.efficiency-narrative div.wide {
  grid-column: 1 / -1;
}

.efficiency-narrative strong {
  color: var(--accent-ink);
  font-size: 10px;
  text-transform: uppercase;
}

.efficiency-narrative span {
  color: var(--text-primary);
  font-size: 11px;
  line-height: 1.35;
}

.metric-sheet-wrap {
  overflow: auto;
  max-height: min(64vh, 620px);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.metric-sheet {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 11px;
}

.metric-sheet th,
.metric-sheet td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.metric-sheet thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 10px;
}

.metric-sheet tbody th {
  min-width: 170px;
  background: var(--panel-bg-subtle);
}

.metric-sheet strong,
.metric-sheet b,
.metric-sheet span {
  display: block;
}

.metric-sheet span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.metric-sheet td.active {
  background: var(--accent-soft);
}

.signal-row {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 7px;
}

.signal-row > span {
  width: 8px;
  height: 8px;
  margin-top: 3px;
  border-radius: 999px;
  background: var(--border-strong);
}

.signal-row.ok > span { background: var(--green); }
.signal-row.warn > span { background: var(--orange); }
.signal-row.danger > span { background: var(--danger); }

.system-log-textarea {
  width: 100%;
  min-height: 430px;
  max-height: 58vh;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--panel-bg-subtle);
  color: var(--text-primary);
  font-family: "Open Sans", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.55;
  resize: vertical;
  white-space: pre;
  overflow: auto;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--panel-bg) 55%, transparent);
}

.admin-actions-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.story-assignment-bar {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--titlebar);
}

.data-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--titlebar);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.data-head button {
  min-height: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  text-align: left;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
}

.user-table .data-row,
.user-sheet-row {
  grid-template-columns: minmax(110px, 1fr) 82px minmax(100px, .8fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(104px, .8fr) 84px;
}

.user-sheet-row.selected {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.cell-link {
  min-height: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.cell-link.muted {
  color: var(--muted);
}

.persona-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.persona-pills span {
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--panel-bg-subtle);
  padding: 2px 6px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 750;
}

.row-actions {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
}

.row-actions button {
  min-height: 26px;
  padding: 0 7px;
  font-size: 11px;
}

.mapping-table .data-row {
  grid-template-columns: minmax(130px, .8fr) minmax(150px, .9fr) minmax(220px, 1.2fr) minmax(180px, 1fr);
}

.mapping-add-row {
  display: grid;
  grid-template-columns: minmax(120px, .7fr) minmax(160px, 1fr) minmax(160px, 1fr) minmax(120px, auto);
  gap: 8px;
  align-items: end;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
}

.auth-domain-list {
  display: grid;
  gap: 6px;
}

.auth-domain-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(100px, 130px) minmax(150px, 1fr) minmax(84px, auto);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
}

.auth-domain-row > *,
.mapping-add-row > * {
  min-width: 0;
}

.auth-domain-row small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.mapping-table .data-row small {
  display: block;
}

.persona-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 4px 8px;
}

.mapping-table .persona-checks {
  gap: 3px 7px;
}

.mapping-table .approval-permission-checks {
  grid-template-columns: 1fr;
}

.mapping-table .check-row.compact {
  min-height: 22px;
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none;
}

.mapping-table .check-row.compact:has(input:checked) {
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none;
}

.mapping-table .check-row.compact:hover {
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
}

.check-row.compact {
  min-height: 24px;
  font-size: 12px;
}

.helper {
  margin: 6px 0 0;
  font-size: 11px;
}

.user-form-panel {
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 9px 10px;
  display: grid;
  gap: 7px;
  flex-shrink: 0;
}

.user-form-head {
  display: grid;
  grid-template-columns: minmax(130px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

.user-form-panel h3 {
  margin-bottom: 0;
}

.user-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr)) minmax(240px, 1.4fr);
  gap: 8px;
  align-items: start;
}

.form-label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}

.manager-picker {
  max-height: 112px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
}

.manager-picker label {
  min-height: 38px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}

.manager-picker label:last-child {
  border-bottom: 0;
}

.manager-picker input {
  width: 14px;
  min-height: 14px;
  padding: 0;
}

.manager-picker strong {
  display: block;
  font-size: 12px;
}

.manager-picker small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.form-personas {
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
}

.user-form-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.user-auth-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  min-width: 0;
}

.auth-check {
  width: fit-content;
  display: inline-grid;
  grid-template-columns: 14px auto;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.auth-check input {
  width: 14px;
  min-height: 14px;
  padding: 0;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 800;
}

.empty {
  padding: 16px;
  color: var(--muted);
  font-size: 14px;
}

.authorization-empty {
  margin: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  font-size: 12px;
}

.unauthorized-pane {
  min-height: 260px;
}

.authorization-message {
  max-width: 680px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: 18px;
}

.authorization-message strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  margin-bottom: 8px;
}

.authorization-message p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.executive-dashboard {
  display: grid;
  gap: 12px;
}

.executive-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.executive-kpis > div,
.executive-panel {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--panel-bg);
  color: var(--text-primary);
  padding: 12px;
}

.executive-kpis span,
.executive-kpis small {
  display: block;
  color: var(--text-secondary);
  font-size: 11px;
}

.executive-kpis strong {
  display: block;
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1.1;
  margin: 4px 0;
}

.executive-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 12px;
}

.executive-panel h3 {
  margin: 0 0 10px;
  font-size: 14px;
}

.executive-project-list,
.executive-movement-list,
.executive-risk-list {
  display: grid;
  gap: 8px;
}

.executive-project-list article,
.executive-movement-list article,
.executive-risk-list article {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--row-bg);
  color: var(--text-primary);
  padding: 10px;
}

.executive-project-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
}

.executive-project-list strong,
.executive-movement-list strong,
.executive-risk-list strong {
  display: block;
  font-size: 13px;
}

.executive-project-list span,
.executive-project-list small,
.executive-movement-list span,
.executive-movement-list small,
.executive-risk-list small {
  color: var(--text-secondary);
  font-size: 11px;
}

.executive-project-list p,
.executive-movement-list p,
.executive-risk-list p,
.executive-panel.narrative p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.executive-movement-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
}

.executive-movement-list p,
.executive-movement-list small {
  grid-column: 1 / -1;
}

.executive-confidence {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  height: 18px;
  margin-top: 2px;
}

.executive-confidence::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  height: 7px;
  border-radius: 999px;
  background: var(--panel-bg-muted);
  border: 1px solid var(--border-soft);
}

.executive-confidence span {
  grid-column: 1;
  grid-row: 1;
  height: 7px;
  min-width: 4px;
  border-radius: 999px;
  background: var(--green);
}

.executive-confidence.at-risk span { background: var(--orange); }
.executive-confidence.critical span { background: var(--danger); }

.executive-confidence b {
  font-size: 10px;
  color: var(--text-secondary);
}

.executive-forecast-list,
.executive-question-list,
.executive-recommendation-list,
.executive-transparency-grid {
  display: grid;
  gap: 8px;
}

.executive-forecast-list article,
.executive-question-list article,
.executive-recommendation-list article,
.executive-transparency-grid article {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--row-bg);
  color: var(--text-primary);
  padding: 9px;
}

.executive-forecast-list strong,
.executive-question-list strong,
.executive-transparency-grid strong {
  display: block;
  font-size: 12px;
}

.executive-forecast-list p,
.executive-question-list p,
.executive-transparency-grid p {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

.executive-forecast-cone {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.executive-forecast-cone span {
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: var(--panel-bg-subtle);
  padding: 6px;
  min-width: 0;
}

.executive-forecast-cone small,
.executive-question-list span {
  display: block;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.executive-forecast-cone b {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
}

.executive-mini-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}

.executive-mini-metrics span {
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  background: var(--panel-bg-subtle);
  padding: 5px;
  color: var(--text-secondary);
  font-size: 10px;
}

.executive-mini-metrics b {
  display: block;
  margin-top: 2px;
  color: var(--text-primary);
  font-size: 12px;
}

.executive-recommendation-list article {
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.45;
  border-left: 3px solid var(--accent);
}

.executive-token-panel {
  display: grid;
  gap: 10px;
}

.executive-token-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.executive-token-kpis span {
  display: grid;
  gap: 2px;
  min-height: 58px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--panel-bg-subtle);
}

.executive-token-kpis b {
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1;
}

.executive-token-kpis small {
  color: var(--text-secondary);
  font-size: 10px;
}

.executive-token-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 10px;
  align-items: start;
}

.executive-token-grid h4 {
  margin: 0 0 8px;
  color: var(--text-primary);
  font-size: 12px;
}

.executive-token-runway {
  display: grid;
  gap: 10px;
}

.executive-token-runway-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.executive-token-runway-head h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: 12px;
}

.executive-token-runway-head span {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.executive-token-chart,
.executive-token-table {
  display: grid;
  gap: 7px;
}

.executive-token-chart article {
  display: grid;
  grid-template-columns: minmax(84px, .24fr) minmax(160px, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--row-bg);
}

.executive-token-chart strong,
.executive-token-chart span {
  display: block;
  color: var(--text-primary);
  font-size: 11px;
}

.executive-token-chart span {
  color: var(--text-secondary);
  font-weight: 800;
}

.executive-token-stack-track {
  display: flex;
  align-items: center;
  height: 22px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--panel-bg-muted);
}

.executive-token-stack {
  display: flex;
  height: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: var(--project-stack-divider);
}

.executive-token-stack i {
  display: block;
  height: 100%;
  min-width: 6px;
}

.executive-token-stack i.color-1,
.executive-token-dot.color-1 { background: var(--project-stack-1); }

.executive-token-stack i.color-2,
.executive-token-dot.color-2 { background: var(--project-stack-2); }

.executive-token-stack i.color-3,
.executive-token-dot.color-3 { background: var(--project-stack-3); }

.executive-token-stack i.color-4,
.executive-token-dot.color-4 { background: var(--project-stack-4); }

.executive-token-stack i.color-5,
.executive-token-dot.color-5 { background: var(--project-stack-5); }

.executive-token-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.executive-token-table article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 3px 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--row-bg);
}

.executive-token-table span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.executive-token-table b {
  color: var(--text-primary);
  font-size: 12px;
}

.executive-token-table small {
  grid-column: 1 / 3;
  color: var(--text-secondary);
  font-size: 10px;
}

.executive-token-table em {
  justify-self: end;
  padding: 2px 7px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.executive-token-table em.ok {
  border-color: var(--ok);
  background: var(--green-soft);
  color: var(--green);
}

.executive-token-table em.warn {
  border-color: var(--orange);
  background: var(--orange-soft);
  color: var(--orange);
}

.executive-token-table em.danger {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}

@media (max-width: 1100px) {
  .executive-kpis,
  .executive-grid,
  .executive-token-kpis,
  .executive-token-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .executive-kpis,
  .executive-grid,
  .executive-token-kpis,
  .executive-token-grid,
  .executive-token-chart article {
    grid-template-columns: 1fr;
  }

  .executive-token-table article {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .executive-token-table small {
    grid-column: 1 / -1;
  }

  .executive-token-table em {
    justify-self: start;
  }
}

.state-counts i.planning { background: var(--accent); }
.state-counts i.requirements,
.state-counts i.requirements-gathering { background: var(--orange); }
.state-counts i.development { background: var(--green); }
.state-counts i.released { background: var(--purple); }

/* Border hierarchy: containing surfaces use the stronger outline; nested rows, inputs, and detail chips keep --line. */
.login-panel,
.auth-panel-inner,
.auth-status-row,
.project-row,
.queue-group,
.activity-pane,
.gateway-card,
.integration-icons,
.project-detail-head,
.gate-command-center,
.named-gate-panel,
.gate-runbook-panel,
.project-context-strip,
.workflow-column,
.workflow-map-panel,
.workspace-view-switcher,
.workflow-step-row,
.workflow-map-step,
.project-lifecycle-card,
.readiness-card,
.artifact-summary-card,
.artifact-declare-card,
.story-table,
.story-workspace-tabs,
.sprint-planner-card,
.sprint-gantt,
.manual-story-card,
.story-label-panel,
.story-label-grid,
.story-git-card,
.git-story-card,
.system-metric-card,
.metric-card,
.metric-panel,
.what-if-sprint-row,
.what-if-story-picker,
.artifact-lightbox,
.metric-lightbox,
.about-lightbox,
.product-help-lightbox,
.user-form-panel,
.manager-picker,
.operation-drawer,
.operation-panel,
.settings-card,
.support-card,
.context-upload-card {
  border-color: var(--line-strong);
}

.portfolio {
  border-right-color: var(--line-strong);
}

.assistant-pane {
  border-left-color: var(--line-strong);
}

.main-activity-feed {
  border-top-color: var(--line-strong);
}

.project-header,
.assistant-header,
.assistant-actions,
.composer,
.data-head,
.user-sheet-head {
  border-color: var(--line-strong);
}

@media (max-width: 1100px) {
  .auth-layout { grid-template-columns: minmax(320px, 42vw) minmax(360px, 1fr); }
  .auth-brand-panel { padding: 42px 36px 28px; }
  .auth-product strong { font-size: 51px; }
  .auth-panel { padding: 36px; }
  .workspace { grid-template-columns: 72px minmax(184px, 210px) minmax(420px, 1fr); }
  .workspace.assistant-collapsed { grid-template-columns: 72px minmax(184px, 210px) minmax(420px, 1fr); }
  .mission { min-width: min(420px, 100%); }
  .assistant-pane { display: none; }
  .assistant-peek { display: flex; }
  .project-thread-runbook-grid,
  .workflow-accountability-grid,
  .workspace-focus-grid {
    grid-template-columns: 1fr 1fr;
  }
  .workflow-map-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1280px) {
  .story-row-controls {
    grid-template-columns: repeat(3, minmax(96px, 1fr));
  }

  .work-thread-work-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pco-form-grid,
  .pco-summary-grid {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  .pco-layout {
    grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
  }
}

@media (min-width: 760px) and (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-brand-panel {
    min-height: auto;
    height: auto;
    grid-template-rows: auto auto;
    padding: 28px 22px;
    gap: 18px;
  }
  .auth-brand-top { gap: 20px; }
  .auth-logo {
    width: 60px;
    height: 14px;
  }
  .auth-product strong { font-size: 45px; }
  .auth-workflow {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
    object-position: center;
  }
  .auth-status-row,
  .auth-footer { display: none; }
  .auth-panel {
    min-height: auto;
    padding: 28px 20px 36px;
    place-items: start center;
  }
  .auth-copy h1 { font-size: 28px; }
  .sso-button {
    grid-template-columns: 26px minmax(0, 1fr);
  }
  .sso-button em {
    grid-column: 2;
    justify-self: start;
  }
  .app-shell { grid-template-rows: auto minmax(0, 1fr); }
  .topbar, .workspace, .split, .bottom-grid, .summary-grid {
    grid-template-columns: 1fr;
  }
  .topbar { height: auto; position: relative; }
  .workspace {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    height: auto;
    min-height: calc(100vh - 48px);
  }
  .workspace.assistant-collapsed {
    grid-template-columns: 1fr;
  }
  .icon-rail {
    grid-column: 1;
    grid-row: 1;
    min-height: auto;
    position: relative;
    top: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    grid-auto-flow: column;
    overflow: auto hidden;
    z-index: 12;
  }
  .rail-primary {
    display: flex;
    gap: 8px;
    overflow: auto hidden;
  }
  .rail-button { width: 72px; }
  .profile-menu { align-self: center; }
  .profile-popover { left: 0; bottom: auto; top: 64px; }
  .portfolio {
    grid-column: 1;
    grid-row: 2;
    grid-template-rows: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .portfolio .project-list,
  .portfolio .queue-list {
    max-height: none;
    overflow: visible;
  }
  .mission {
    grid-column: 1;
    grid-row: 3;
    min-height: 560px;
  }
  .project-header { grid-template-columns: 1fr; }
  .project-owner { justify-items: start; }
  .project-context-strip {
    align-items: stretch;
    flex-direction: column;
  }
  .project-context-strip button { width: 100%; }
  .project-thread-runbook-grid,
  .workflow-accountability-grid,
  .workspace-focus-grid {
    grid-template-columns: 1fr;
  }

  .workflow-map-panel {
    grid-column: auto;
    justify-items: stretch;
  }
  .developer-workbench-hero,
  .developer-panel-head,
  .gate-command-head,
  .gate-panel-head {
    align-items: stretch;
    flex-direction: column;
  }
  .gate-command-head {
    grid-template-columns: 1fr;
  }
  .gate-runbook-row {
    grid-template-columns: 18px minmax(0, 1fr);
  }
  .gate-runbook-row > b {
    grid-column: 2;
    justify-self: start;
  }
  .developer-workbench-hero > button,
  .developer-panel-head > button {
    width: 100%;
  }
  .work-thread-workbench,
  .work-thread-work-grid,
  .developer-work-jigsaw-grid,
  .work-thread-context-panels,
  .thread-artifacts-layout,
  .work-thread-panel.info,
  .developer-workbench-grid,
  .gate-command-grid,
  .gate-panel-facts,
  .developer-mode-strip,
  .mode-action-body,
  .developer-process-grid,
  .developer-workflow-graph {
    grid-template-columns: 1fr;
  }
  .developer-work-jigsaw-grid {
    grid-template-areas:
      "left"
      "process";
  }
  .work-thread-tabs {
    overflow: auto hidden;
  }
  .developer-case-step {
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
  }
  .developer-case-step > button,
  .developer-case-step > b {
    grid-column: 2;
    justify-self: start;
  }
  .developer-stage-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .developer-stage-actions label,
  .developer-stage-actions button,
  .developer-stage-actions select {
    width: 100%;
    min-width: 0;
  }
  .developer-evidence-row {
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: start;
  }
  .developer-evidence-row button,
  .developer-evidence-row b {
    grid-column: 2;
    justify-self: start;
  }
  .developer-artifact-list button {
    grid-template-columns: 1fr;
  }
  .workflow-map-step {
    grid-template-columns: minmax(84px, .55fr) minmax(0, 1fr);
  }
  .workflow-map-step p,
  .workflow-map-step .badge {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .project-detail-head { grid-template-columns: 1fr; }
  .user-settings-screen .pane-title {
    align-items: stretch;
    flex-direction: column;
  }
  .user-settings-search {
    width: 100%;
    max-width: none;
  }
  .credential-mode-grid {
    grid-template-columns: 1fr;
  }
  .auth-domain-row,
  .mapping-add-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .project-lifecycle, .project-readiness-grid, .artifact-summary-grid, .artifact-form-grid, .artifact-filter-bar, .metrics-grid, .metrics-two-column, .project-budget-summary-panel .metrics-grid, .pco-form-grid, .pco-layout, .pco-summary-grid, .confluence-import-panel, .requirements-workspace, .requirements-workbench-grid, .support-grid, .support-form, .support-issue-form, .support-chat-head, .support-chat-composer, .support-permission-panel, .agent-clarification-panel, .agent-task-chat-composer, .agent-task-focus-facts { grid-template-columns: 1fr; }
  .requirements-workbench-grid {
    grid-template-areas:
      "intent"
      "documents"
      "stories"
      "review";
  }
  .requirements-hero { align-items: stretch; flex-direction: column; }
  .requirements-hero-stats { justify-content: flex-start; }
  .pco-form-grid .wide { grid-column: auto; }
  .metric-bar-row { grid-template-columns: 1fr; }
  .artifact-declare-head { grid-template-columns: 1fr; }
  .project-stage { min-height: 70px; }
  .project-flow-arrow { width: 2px; height: 18px; justify-self: center; }
  .project-flow-arrow::after {
    right: 50%;
    top: auto;
    bottom: -1px;
    transform: translateX(50%) rotate(135deg);
  }
  .queue-table-head { display: none; }
  .queue-table-row { grid-template-columns: 1fr; gap: 5px; }
  .user-form-grid { grid-template-columns: 1fr; }
  .user-form-head,
  .user-form-footer {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .form-actions {
    justify-content: flex-start;
  }
  .user-management { min-height: auto; }
  .activity-table div { grid-template-columns: 1fr; }
  .integration-icons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kanban-head { grid-template-columns: 1fr; }
  .kanban-summary { grid-template-columns: repeat(4, minmax(64px, 1fr)); min-width: 0; }
  .kanban-board { grid-template-columns: repeat(5, minmax(172px, 172px)); }
  .a2a-agent-form,
  .crewai-automation-form,
  .a2a-agent-row,
  .agent-console-grid,
  .agent-dispatch-form,
  .agent-task-row,
  .agent-task-followup,
  .agent-task-execution-status { grid-template-columns: 1fr; }
  .a2a-agent-actions,
  .agent-task-actions { justify-content: flex-start; }
  .story-label-panel-head,
  .story-label-row { grid-template-columns: 1fr; }
  .sprint-form { grid-template-columns: 1fr; }
  .story-row,
  .story-sprint-table-head,
  .story-row-controls { grid-template-columns: 1fr; }
  .story-sprint-table-head span:last-child { text-align: left; }
  .story-row-action-cell {
    justify-items: start;
  }
  .story-status-stack { justify-items: start; }
  .story-form-grid { grid-template-columns: 1fr; }
  .git-lifecycle { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; }
  .git-stage { min-height: 68px; }
  .git-flow-arrow { width: 2px; height: 18px; justify-self: center; }
  .git-flow-arrow::after {
    right: 50%;
    top: auto;
    bottom: -1px;
    transform: translateX(50%) rotate(135deg);
  }
  .assistant-pane {
    position: fixed;
    top: 82px;
    right: 0;
    bottom: 0;
    z-index: 30;
    width: min(360px, calc(100vw - 18px));
    height: calc(100vh - 82px);
    box-shadow: -12px 0 28px color-mix(in srgb, var(--rail-bg) 18%, transparent);
  }
  .assistant-peek {
    position: fixed;
    top: 110px;
    right: 0;
    z-index: 31;
    grid-column: auto;
  }
}

.developer-issues-pane {
  gap: 12px;
}

.issue-table {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: auto;
  background: var(--surface-raised);
}

.issue-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(220px, 1.7fr) minmax(138px, 0.9fr) minmax(190px, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 760px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  background: var(--surface-raised);
}

.issue-row:first-child {
  border-top: 0;
}

.issue-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--titlebar);
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.issue-row strong,
.issue-row b {
  display: block;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.issue-row small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.issue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.issue-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.issue-link-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 20px;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--chip-muted);
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
}

.issue-link-chip a {
  overflow: hidden;
  max-width: 92px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.issue-link-chip small {
  max-width: 72px;
  margin: 0;
  font-size: 9px;
}

.issue-link-chip button {
  width: 16px;
  min-width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}

.issue-link-actions {
  align-items: center;
}

.inline-issue-key {
  display: inline-flex;
  align-items: center;
  width: 132px;
  gap: 4px;
  margin: 0;
  font-size: 10px;
}

.inline-issue-key span {
  color: var(--muted);
  font-weight: 800;
}

.inline-issue-key input {
  min-width: 0;
  height: 26px;
  padding: 4px 6px;
  font-size: 11px;
}

.project-jira-setup-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg-subtle) 86%, transparent);
}

.project-jira-setup-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.project-jira-setup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.mapping-panel,
.project-jira-user-mapping {
  display: grid;
  gap: 12px;
}

.project-jira-user-mapping {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.jira-user-map-groups {
  display: grid;
  gap: 12px;
}

.jira-user-map-groups h4 {
  margin: 0 0 8px;
  font-size: 12px;
}

.jira-user-map-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 260px) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.jira-user-map-row strong,
.jira-user-map-row small {
  display: block;
}

.jira-user-map-row small {
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 900px) {
  .project-jira-setup-grid {
    grid-template-columns: 1fr;
  }
  .project-jira-setup-actions {
    justify-content: flex-start;
  }
  .jira-user-map-row {
    grid-template-columns: 1fr;
  }
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.theme-option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  cursor: pointer;
}

.theme-option input {
  width: auto;
  min-height: 0;
  margin: 3px 0 0;
}

.theme-option span {
  display: grid;
  gap: 2px;
}

.theme-option small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
}

.theme-option.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

[data-theme="dark"] .topbar {
  background: var(--topbar-bg);
  border-bottom-color: var(--line);
}

[data-theme="dark"] .persona-chip,
[data-theme="dark"] .profile-menu summary,
[data-theme="dark"] .user-form-panel,
[data-theme="dark"] .manager-picker,
[data-theme="dark"] .form-personas,
[data-theme="dark"] .context-list,
[data-theme="dark"] .authorization-empty,
[data-theme="dark"] .authorization-message,
[data-theme="dark"] .project-row,
[data-theme="dark"] .queue-table-row,
[data-theme="dark"] .queue-row,
[data-theme="dark"] .requirements-source-card,
[data-theme="dark"] .requirements-story-card,
[data-theme="dark"] .support-card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .readiness-card,
[data-theme="dark"] .artifact-document,
[data-theme="dark"] .story-card,
[data-theme="dark"] .story-detail-card,
[data-theme="dark"] .integration-tile,
[data-theme="dark"] .integration-config,
[data-theme="dark"] .settings-section,
[data-theme="dark"] .project-jira-setup-card,
[data-theme="dark"] .data-row,
[data-theme="dark"] .data-table,
[data-theme="dark"] .operation-drawer,
[data-theme="dark"] .pane,
[data-theme="dark"] .login-panel {
  background-color: var(--surface-raised);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: none;
}

[data-theme="dark"] .workspace,
[data-theme="dark"] .mission,
[data-theme="dark"] .main-panel-stack,
[data-theme="dark"] .workspace-tab-panel,
[data-theme="dark"] .story-table,
[data-theme="dark"] .artifact-table,
[data-theme="dark"] .support-progress-list,
[data-theme="dark"] .artifact-registry,
[data-theme="dark"] .requirements-workbench,
[data-theme="dark"] .generated-documents,
[data-theme="dark"] .requirements-doc-list,
[data-theme="dark"] .requirements-review-panel {
  background-color: var(--surface-soft);
  color: var(--ink);
}

[data-theme="dark"] .icon-rail,
[data-theme="dark"] .auth-brand-panel {
  background-color: var(--rail-bg);
  color: var(--rail-ink);
}

[data-theme="dark"] .portfolio {
  background-color: var(--surface-soft);
  border-right-color: var(--line-strong);
}

[data-theme="dark"] .project-rail-head,
[data-theme="dark"] .state-counts,
[data-theme="dark"] .project-list {
  background: transparent;
  color: var(--ink);
}

[data-theme="dark"] .project-tabs {
  background: transparent;
  border-color: var(--line-strong);
}

[data-theme="dark"] .project-tabs button {
  color: var(--muted);
}

[data-theme="dark"] .project-tabs button:hover {
  background: var(--panel-bg-muted);
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] .project-tabs button.active {
  background: var(--surface-raised);
  border-color: var(--accent);
  color: var(--accent-ink);
}

[data-theme="dark"] .project-search,
[data-theme="dark"] .portfolio .project-list {
  background: var(--surface-raised);
  border-color: var(--line-strong);
  color: var(--ink);
}

[data-theme="dark"] .project-search input,
[data-theme="dark"] .portfolio .project-row {
  background: var(--surface-soft);
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] .state-counts div {
  color: var(--muted);
}

[data-theme="dark"] .state-counts strong,
[data-theme="dark"] .project-main strong {
  color: var(--ink);
}

[data-theme="dark"] .rail-button,
[data-theme="dark"] .project-row,
[data-theme="dark"] .system-tabs button,
[data-theme="dark"] .profile-menu-item {
  color: var(--ink);
}

[data-theme="dark"] .rail-button:hover,
[data-theme="dark"] .rail-button.active,
[data-theme="dark"] .project-row.selected,
[data-theme="dark"] .system-tabs button.active,
[data-theme="dark"] .data-row:hover,
[data-theme="dark"] .queue-table-row:hover {
  background-color: var(--surface-selected);
  border-color: var(--accent);
  color: var(--accent-ink);
}

[data-theme="dark"] .assistant-pane,
[data-theme="dark"] .assistant-peek,
[data-theme="dark"] .profile-popover,
[data-theme="dark"] .metric-lightbox-card,
[data-theme="dark"] .artifact-lightbox-card,
[data-theme="dark"] .about-lightbox-card {
  background-color: var(--surface-raised);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-strong);
}

[data-theme="dark"] .assistant-header,
[data-theme="dark"] .activity-pane .pane-title,
[data-theme="dark"] .gateway-card .pane-title,
[data-theme="dark"] .feed-head,
[data-theme="dark"] .integration-detail-head,
[data-theme="dark"] .integration-config > .settings-section > h4,
[data-theme="dark"] .project-detail-head,
[data-theme="dark"] .story-sprint-head,
[data-theme="dark"] .story-sprint-table-head {
  background: var(--titlebar);
  border-color: var(--line-strong);
  color: var(--ink);
}

[data-theme="dark"] .assistant-intro,
[data-theme="dark"] .assistant-actions,
[data-theme="dark"] .chat-message.assistant,
[data-theme="dark"] .message.assistant,
[data-theme="dark"] .message-body code,
[data-theme="dark"] .chat-log,
[data-theme="dark"] .composer,
[data-theme="dark"] .activity-stream,
[data-theme="dark"] .activity-table,
[data-theme="dark"] .validation-panel,
[data-theme="dark"] .empty,
[data-theme="dark"] .summary-grid,
[data-theme="dark"] .admin-summary-grid button,
[data-theme="dark"] .integration-foundation-row,
[data-theme="dark"] .requirements-doc-row,
[data-theme="dark"] .requirements-pco-row,
[data-theme="dark"] .comment,
[data-theme="dark"] .check-row,
[data-theme="dark"] .theme-option,
[data-theme="dark"] .support-progress-row {
  background-color: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] .mapping-table .check-row.compact {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
}

[data-theme="dark"] .mapping-table .check-row.compact:has(input:checked) {
  background: color-mix(in srgb, var(--accent-soft) 52%, transparent);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  color: var(--ink);
}

[data-theme="dark"] .mapping-table .check-row.compact:hover {
  background: color-mix(in srgb, var(--surface-muted) 48%, transparent);
  border-color: var(--line);
}

[data-theme="dark"] p,
[data-theme="dark"] small,
[data-theme="dark"] .helper,
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .activity-table span,
[data-theme="dark"] .state-counts span,
[data-theme="dark"] .manager-picker small,
[data-theme="dark"] .theme-option small {
  color: var(--muted);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] strong,
[data-theme="dark"] .data-head,
[data-theme="dark"] .project-title,
[data-theme="dark"] .story-title {
  color: var(--ink);
}

[data-theme="dark"] label,
[data-theme="dark"] .form-label,
[data-theme="dark"] .auth-form label,
[data-theme="dark"] .manager-picker strong,
[data-theme="dark"] .authorization-message strong {
  color: var(--ink);
}

[data-theme="dark"] button,
[data-theme="dark"] .button-link,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--field);
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--placeholder);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .auth-form input:focus,
[data-theme="dark"] .auth-form select:focus {
  outline: 2px solid rgba(155, 189, 242, .24);
  border-color: var(--accent);
}

[data-theme="dark"] button.primary,
[data-theme="dark"] .button-link.primary,
[data-theme="midnight-pastel"] button.primary,
[data-theme="midnight-pastel"] .button-link.primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #102033;
}

[data-theme="dark"] button.ghost {
  background-color: color-mix(in srgb, var(--panel-bg) 06%, transparent);
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] .project-state-pill.planning,
[data-theme="dark"] .project-state-pill.in-progress,
[data-theme="dark"] .badge.neutral,
[data-theme="dark"] .llm-status,
[data-theme="dark"] .count,
[data-theme="dark"] .integration-status-pill.neutral,
[data-theme="dark"] .integration-tile em.neutral,
[data-theme="dark"] .integration-status-pill.not-installed,
[data-theme="dark"] .integration-tile em.not-installed,
[data-theme="dark"] .integration-surface-row span {
  background-color: var(--surface-selected);
  border-color: var(--line-strong);
  color: var(--ink);
}

[data-theme="dark"] .assistant-bubbles button {
  background-color: var(--surface-selected);
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  color: var(--accent-ink);
}

[data-theme="dark"] .project-state-pill.development,
[data-theme="dark"] .badge.ok,
[data-theme="dark"] .llm-status.ok {
  background-color: var(--green-soft);
  border-color: #28543a;
  color: var(--green);
}

[data-theme="dark"] .project-state-pill.requirements,
[data-theme="dark"] .project-state-pill.requirements-gathering,
[data-theme="dark"] .badge.warn {
  background-color: var(--orange-soft);
  border-color: #6a4b22;
  color: var(--orange);
}

[data-theme="dark"] .project-state-pill.released {
  background-color: var(--purple-soft);
  border-color: #4f4278;
  color: var(--purple);
}

[data-theme="dark"] .project-state-pill.action-required,
[data-theme="dark"] .badge.danger,
[data-theme="dark"] button.danger {
  background-color: var(--danger-soft);
  border-color: #6c3434;
  color: var(--danger);
}

[data-theme="dark"] .system-metric-card,
[data-theme="dark"] .admin-summary-grid button,
[data-theme="dark"] .admin-detail-grid div,
[data-theme="dark"] .admin-project-table button.data-row,
[data-theme="dark"] .activity-pane,
[data-theme="dark"] .gateway-card,
[data-theme="dark"] .activity-table,
[data-theme="dark"] .activity-table div,
[data-theme="dark"] .integration-icons,
[data-theme="dark"] .integration-search-row,
[data-theme="dark"] .integration-detail,
[data-theme="dark"] .integration-fields,
[data-theme="dark"] .integration-tool-router,
[data-theme="dark"] .integration-config-summary,
[data-theme="dark"] .integration-test-credentials,
[data-theme="dark"] .integration-placeholder,
[data-theme="dark"] .foundation-row,
[data-theme="dark"] .audit-mini-log,
[data-theme="dark"] .api-key-form,
[data-theme="dark"] .api-key-row,
[data-theme="dark"] .queue-group,
[data-theme="dark"] .queue-table-row,
[data-theme="dark"] .queue-row,
[data-theme="dark"] .queue-group h3,
[data-theme="dark"] .requirements-hero,
[data-theme="dark"] .requirements-card,
[data-theme="dark"] .requirements-story-detail-head,
[data-theme="dark"] .requirements-doc-row,
[data-theme="dark"] .requirements-info-summary,
[data-theme="dark"] .requirements-info-list button,
[data-theme="dark"] .requirements-source-row,
[data-theme="dark"] .requirements-pco-row,
[data-theme="dark"] .requirements-workflow-active,
[data-theme="dark"] .requirements-impact-summary,
[data-theme="dark"] .requirements-mini-list,
[data-theme="dark"] .support-card,
[data-theme="dark"] .support-bundle-row,
[data-theme="dark"] .support-list-card,
[data-theme="dark"] .system-performance-panel,
[data-theme="dark"] .performance-row,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .metric-panel,
[data-theme="dark"] .signal-row,
[data-theme="dark"] .blocker-row,
[data-theme="dark"] .point-load-row,
[data-theme="dark"] .metric-sheet-wrap,
[data-theme="dark"] .metric-sheet tbody th,
[data-theme="dark"] .about-facts-grid div,
[data-theme="dark"] .about-notices-box,
[data-theme="dark"] .artifact-preview-pane,
[data-theme="dark"] .efficiency-narrative,
[data-theme="dark"] .story-assignment-bar {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] .integration-config,
[data-theme="dark"] .integration-config > .settings-section,
[data-theme="dark"] .integration-config > .integration-fields,
[data-theme="dark"] .project-lifecycle-card,
[data-theme="dark"] .main-activity-feed,
[data-theme="dark"] .activity-textbox,
[data-theme="dark"] .issue-table,
[data-theme="dark"] .issue-row,
[data-theme="dark"] .kanban-head,
[data-theme="dark"] .kanban-summary span,
[data-theme="dark"] .kanban-card,
[data-theme="dark"] .kanban-board,
[data-theme="dark"] .kanban-column,
[data-theme="dark"] .kanban-column-head,
[data-theme="dark"] .kanban-column-body,
[data-theme="dark"] .kanban-story button,
[data-theme="dark"] .what-if-impact,
[data-theme="dark"] .what-if-sprint-row,
[data-theme="dark"] .what-if-option,
[data-theme="dark"] .what-if-draft-change,
[data-theme="dark"] .story-row,
[data-theme="dark"] .story-label-grid,
[data-theme="dark"] .manual-story-card,
[data-theme="dark"] .story-label-panel,
[data-theme="dark"] .sprint-planner-card,
[data-theme="dark"] .sprint-gantt,
[data-theme="dark"] .sprint-gantt-label,
[data-theme="dark"] .sprint-gantt-track,
[data-theme="dark"] .artifact-summary-card,
[data-theme="dark"] .artifact-declare-card,
[data-theme="dark"] .artifact-registry,
[data-theme="dark"] .artifact-filter-bar,
[data-theme="dark"] .artifact-table {
  background: var(--surface-raised);
  border-color: var(--line-strong);
  color: var(--ink);
}

[data-theme="dark"] .git-overview-card,
[data-theme="dark"] .git-story-card,
[data-theme="dark"] .story-git-card {
  background: var(--surface-raised);
  border-color: var(--line-strong);
  color: var(--ink);
}

[data-theme="dark"] .git-story-list,
[data-theme="dark"] .git-lifecycle,
[data-theme="dark"] .git-story-card dl div,
[data-theme="dark"] .story-git-card dl div {
  background: var(--surface-soft);
  border-color: var(--line-strong);
  color: var(--ink);
}

[data-theme="dark"] .git-overview-card > div:first-child,
[data-theme="dark"] .git-story-head {
  background: var(--titlebar);
  border-color: var(--line-strong);
  color: var(--ink);
}

[data-theme="dark"] .git-stage span {
  background: var(--surface-raised);
  border-color: var(--line-strong);
  color: var(--muted);
}

[data-theme="dark"] .git-stage.done span {
  background: color-mix(in srgb, var(--green-soft) 72%, var(--surface-raised));
  border-color: color-mix(in srgb, var(--green) 58%, var(--line-strong));
  color: var(--green);
}

[data-theme="dark"] .git-stage.active {
  color: var(--accent-ink);
}

[data-theme="dark"] .git-stage.active span {
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface-raised));
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line-strong));
  color: var(--accent-ink);
}

[data-theme="dark"] .git-flow-arrow {
  background: var(--line-strong);
}

[data-theme="dark"] .git-flow-arrow::after {
  border-color: var(--line-strong);
}

[data-theme="dark"] .kanban-viewport {
  background: var(--surface-soft);
}

[data-theme="dark"] .kanban-board,
[data-theme="dark"] .kanban-column,
[data-theme="dark"] .kanban-column-body,
[data-theme="dark"] .what-if-impact,
[data-theme="dark"] .what-if-sprint-row,
[data-theme="dark"] .what-if-option-grid div {
  background: var(--surface-soft);
  border-color: var(--line-strong);
  color: var(--ink);
}

[data-theme="dark"] .kanban-empty {
  background: var(--surface-raised);
  border-color: var(--line-strong);
  color: var(--muted);
}

[data-theme="dark"] .kanban-head,
[data-theme="dark"] .kanban-column-head,
[data-theme="dark"] .sprint-planner-head,
[data-theme="dark"] .artifact-declare-head,
[data-theme="dark"] .what-if-page .metric-panel-head,
[data-theme="dark"] .requirements-card .metric-panel-head {
  background: var(--titlebar);
  border-color: var(--line-strong);
  color: var(--ink);
}

[data-theme="dark"] .kanban-column-head b,
[data-theme="dark"] .kanban-story-progress,
[data-theme="dark"] .sprint-gantt-bar,
[data-theme="dark"] .what-if-impact-head span,
[data-theme="dark"] .what-if-draft-meta span,
[data-theme="dark"] .what-if-examples button {
  background: var(--chip-muted);
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] .sprint-gantt,
[data-theme="dark"] .sprint-gantt-track {
  background: var(--surface-soft);
  border-color: var(--line-strong);
}

[data-theme="dark"] .sprint-gantt-label {
  background: var(--surface-raised);
  border-color: var(--line);
}

[data-theme="dark"] .sprint-gantt-axis {
  border-color: var(--line-strong);
  color: var(--muted);
}

[data-theme="dark"] .sprint-gantt-bar {
  background: color-mix(in srgb, var(--accent-soft) 74%, var(--surface-raised));
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line-strong));
  color: var(--accent-ink);
}

[data-theme="dark"] .sprint-gantt-bar:hover {
  background: var(--surface-selected);
  border-color: var(--accent);
}

[data-theme="dark"] .kanban-story button:hover {
  background: var(--surface-selected);
  border-color: var(--accent);
}

[data-theme="dark"] .kanban-blockers em {
  background: var(--orange-soft);
  border-color: color-mix(in srgb, var(--orange) 58%, var(--line-strong));
  color: var(--orange);
}

[data-theme="dark"] .what-if-story-picker,
[data-theme="dark"] .requirements-info-summary,
[data-theme="dark"] .requirements-info-list button {
  background: var(--surface-muted);
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] .story-row:hover,
[data-theme="dark"] .project-row:hover {
  background: var(--surface-selected);
  border-color: var(--accent);
}

[data-theme="dark"] .project-stage {
  background: rgba(34, 49, 73, .34);
}

[data-theme="dark"] .project-stage span {
  background: var(--surface-muted);
  border-color: var(--line-strong);
  color: var(--muted);
}

[data-theme="dark"] .project-stage.active {
  background: rgba(38, 59, 89, .48);
}

[data-theme="dark"] .issue-head {
  background: var(--titlebar);
  border-color: var(--line-strong);
  color: var(--muted);
}

[data-theme="dark"] .issue-link-chip {
  background: var(--surface-selected);
  border-color: var(--line-strong);
  color: var(--ink);
}

[data-theme="dark"] .project-flow-arrow {
  background: var(--line-strong);
}

[data-theme="dark"] .project-flow-arrow::after {
  border-color: var(--line-strong);
}

[data-theme="dark"] .integration-tile,
[data-theme="dark"] .integration-tool-card,
[data-theme="dark"] .integration-class-list b,
[data-theme="dark"] .integration-surface-row span,
[data-theme="dark"] .integration-tool-schema span,
[data-theme="dark"] .requirements-info-facts span,
[data-theme="dark"] .requirements-source-icon,
[data-theme="dark"] .comment-intent-marker {
  background: var(--surface-muted);
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] .integration-tile.not-configured {
  background: var(--surface-soft);
}

[data-theme="dark"] .integration-tile.not-installed {
  background: var(--not-installed-bg);
  border-color: var(--not-installed-border);
}

[data-theme="dark"] .integration-tile.enabled,
[data-theme="dark"] .integration-runtime-summary,
[data-theme="dark"] .requirements-source-row.context,
[data-theme="dark"] .requirements-source-row.document,
[data-theme="dark"] .requirements-source-row.approved {
  background: var(--green-soft);
  border-color: color-mix(in srgb, var(--green) 52%, var(--line));
}

[data-theme="dark"] .integration-emery-hook,
[data-theme="dark"] .requirements-doc-row.active,
[data-theme="dark"] .requirements-doc-open.selected,
[data-theme="dark"] .requirement-comment-row.selected,
[data-theme="dark"] .requirements-pco-row.active {
  background: var(--surface-selected);
  border-color: var(--accent);
}

[data-theme="dark"] .requirements-source-row.draft {
  background: var(--orange-soft);
  border-color: color-mix(in srgb, var(--orange) 52%, var(--line));
}

[data-theme="dark"] .requirements-source-row.pco {
  background: var(--purple-soft);
  border-color: color-mix(in srgb, var(--purple) 52%, var(--line));
}

[data-theme="dark"] .support-card-strong,
[data-theme="dark"] .support-progress-panel,
[data-theme="dark"] .metric-sheet td.active {
  background: var(--surface-selected);
  border-color: var(--line-strong);
  color: var(--ink);
}

[data-theme="dark"] .support-bundle-row:hover,
[data-theme="dark"] .support-bundle-row:focus-within {
  background: var(--surface-selected);
  border-color: var(--accent);
}

[data-theme="dark"] .support-progress-list,
[data-theme="dark"] .about-notices-box,
[data-theme="dark"] .artifact-preview-text,
[data-theme="dark"] .activity-table p,
[data-theme="dark"] .performance-row span,
[data-theme="dark"] .integration-detail-head h3,
[data-theme="dark"] .integration-tool-head strong,
[data-theme="dark"] .integration-tool-card strong,
[data-theme="dark"] .integration-config-summary span,
[data-theme="dark"] .foundation-row strong,
[data-theme="dark"] .foundation-row b,
[data-theme="dark"] .audit-mini-log p,
[data-theme="dark"] .requirements-info-summary p,
[data-theme="dark"] .intent-review-toolbar span,
[data-theme="dark"] .intent-review-toolbar strong,
[data-theme="dark"] .what-if-intent ul,
[data-theme="dark"] .what-if-narrative p,
[data-theme="dark"] .what-if-draft > p,
[data-theme="dark"] .efficiency-narrative span,
[data-theme="dark"] .metric-sheet,
[data-theme="dark"] .system-log-textarea {
  color: var(--ink);
}

[data-theme="dark"] .integration-search-row label,
[data-theme="dark"] .integration-search-row p,
[data-theme="dark"] .integration-group h3,
[data-theme="dark"] .integration-vendor,
[data-theme="dark"] .integration-tile small,
[data-theme="dark"] .integration-class-list b,
[data-theme="dark"] .integration-detail-head p:not(.eyebrow),
[data-theme="dark"] .integration-status-row span:last-child,
[data-theme="dark"] .integration-placeholder p,
[data-theme="dark"] .integration-surface-row span,
[data-theme="dark"] .integration-runtime-summary span,
[data-theme="dark"] .integration-tool-head p,
[data-theme="dark"] .integration-tool-card p,
[data-theme="dark"] .integration-tool-card small,
[data-theme="dark"] .integration-emery-hook ul,
[data-theme="dark"] .integration-test-credentials p,
[data-theme="dark"] .integration-config-summary b,
[data-theme="dark"] .foundation-row span,
[data-theme="dark"] .foundation-row small,
[data-theme="dark"] .foundation-row p,
[data-theme="dark"] .requirements-info-list h4,
[data-theme="dark"] .requirements-info-list p,
[data-theme="dark"] .requirements-source-row small,
[data-theme="dark"] .requirements-source-row p,
[data-theme="dark"] .requirements-pco-row span {
  color: var(--muted);
}

[data-theme="dark"] .metric-sheet thead th {
  background: var(--surface-muted);
  color: var(--ink);
}

[data-theme="dark"] .developer-load-track {
  background: var(--field);
  border-color: var(--line);
}

[data-theme="dark"] .developer-load-track span {
  background: var(--accent);
}

[data-theme="dark"] .system-tabs button.active,
[data-theme="dark"] .support-progress-list li:last-child,
[data-theme="dark"] .efficiency-narrative strong {
  color: var(--accent-ink);
}

[data-theme="dark"] .metric-lightbox,
[data-theme="dark"] .artifact-lightbox,
[data-theme="dark"] .about-lightbox {
  background: rgba(3, 8, 15, .66);
}

@media (max-width: 760px) {
  .theme-options {
    grid-template-columns: 1fr;
  }
}

/* Theme contract layer
   New screens should prefer these semantic surfaces over raw palette variables. */
.theme-surface-page {
  background: var(--pane-bg);
  color: var(--text-primary);
}

.theme-surface-pane,
.theme-surface-card,
.theme-surface-subcard,
.theme-surface-row,
.theme-surface-header,
.theme-surface-chip,
.theme-surface-log,
.theme-surface-callout,
.theme-field,
.theme-action {
  color: var(--text-primary);
}

.theme-surface-pane {
  border: 1px solid var(--border-strong);
  background: var(--panel-bg);
}

.theme-surface-card {
  border: 1px solid var(--border-soft);
  background: var(--panel-bg);
}

.theme-surface-subcard {
  border: 1px solid var(--border-soft);
  background: var(--panel-bg-subtle);
}

.theme-surface-row {
  border: 1px solid var(--border-soft);
  background: var(--row-bg);
}

.theme-surface-header {
  border-bottom: 1px solid var(--border-strong);
  background: var(--panel-header-bg);
}

.theme-surface-chip {
  border: 1px solid var(--border-soft);
  background: var(--chip-bg);
  color: var(--text-secondary);
}

.theme-surface-chip.is-active,
.theme-surface-chip[aria-pressed="true"],
.theme-surface-chip[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--row-bg-selected);
  color: var(--accent-ink);
}

.theme-surface-callout {
  border: 1px solid var(--border-soft);
  background: var(--accent-soft);
}

.theme-surface-log {
  border: 1px solid var(--terminal-border);
  background: var(--terminal-bg);
  color: var(--terminal-fg);
}

.theme-field {
  border: 1px solid var(--border-soft);
  background: var(--field-bg);
  color: var(--text-primary);
}

.theme-field::placeholder {
  color: var(--placeholder);
}

.theme-action {
  border: 1px solid var(--button-border);
  background: var(--button-bg);
  color: var(--button-fg);
}

.theme-action:hover,
.theme-action:focus-visible {
  background: var(--button-hover-bg);
  border-color: var(--button-hover-border);
  color: var(--button-hover-fg);
}

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

.theme-action.primary:hover,
.theme-action.primary:focus-visible {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

.theme-action.danger {
  border-color: var(--danger);
  background: var(--danger);
  color: var(--surface);
}

.theme-action.danger:hover,
.theme-action.danger:focus-visible {
  background: var(--status-danger-fg);
  border-color: var(--status-danger-fg);
}

.theme-text-primary {
  color: var(--text-primary);
}

.theme-text-secondary,
.theme-text-muted {
  color: var(--text-secondary);
}

.theme-text-accent {
  color: var(--accent-ink);
}

.theme-status-success {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
}

.theme-status-warning {
  border-color: var(--status-warn-border);
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
}

.theme-status-danger {
  border-color: var(--status-danger-border);
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
}

.theme-status-info {
  border-color: var(--status-neutral-border);
  background: var(--status-neutral-bg);
  color: var(--status-neutral-fg);
}

.theme-meter {
  background: var(--panel-bg-muted);
}

.theme-meter-fill {
  background: var(--accent);
}

body,
.workspace,
.mission,
.main-panel-stack,
.workspace-tab-panel,
.portfolio {
  background-color: var(--pane-bg);
  color: var(--text-primary);
}

.pane,
.assistant-pane,
.activity-pane,
.gateway-card,
.settings-section,
.operation-drawer,
.support-card,
.metric-card,
.metric-panel,
.executive-kpis > div,
.executive-panel,
.system-metric-card,
.readiness-card,
.story-detail-card,
.story-card,
.artifact-summary-card,
.artifact-declare-card,
.artifact-registry,
.integration-detail,
.integration-config,
.integration-fields,
.project-lifecycle-card,
.queue-group,
.kanban-card,
.what-if-impact,
.what-if-option,
.what-if-draft-change,
.sprint-planner-card,
.story-git-card,
.git-story-card,
.git-overview-card {
  background-color: var(--panel-bg);
  border-color: var(--border-soft);
  color: var(--text-primary);
}

.main-activity-feed,
.project-search,
.portfolio .project-list,
.data-table,
.story-table,
.issue-table,
.artifact-table,
.kanban-board,
.kanban-column,
.sprint-gantt,
.git-story-list,
.git-lifecycle,
.requirements-workbench,
.requirements-card,
.support-progress-list,
.system-performance-panel {
  background-color: var(--panel-bg-subtle);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.main-activity-feed {
  margin: 0 18px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}

.pane-title,
.feed-head,
.assistant-header,
.metric-panel-head,
.data-head,
.queue-group h3,
.kanban-head,
.kanban-column-head,
.sprint-planner-head,
.artifact-declare-head,
.git-story-head,
.git-overview-card > div:first-child,
.story-sprint-head,
.story-sprint-table-head,
.story-assignment-bar,
.integration-detail-head,
.integration-config > .settings-section > h4,
.project-detail-head,
.executive-panel .metric-panel-head {
  background-color: var(--panel-header-bg);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.data-row,
.queue-table-row,
.queue-row,
.story-row,
.issue-row,
.kanban-story button,
.support-bundle-row,
.a2a-agent-form,
.a2a-agent-row,
.requirements-doc-row,
.requirements-source-row,
.requirements-pco-row,
.requirements-info-summary,
.requirements-info-list button,
.git-story-card dl div,
.story-git-card dl div,
.performance-row,
.signal-row,
.blocker-row,
.point-load-row,
.activity-table div,
.foundation-row,
.api-key-row,
.executive-project-list article,
.executive-risk-list article,
.executive-forecast-list article,
.executive-question-list article,
.executive-recommendation-list article,
.executive-transparency-grid article {
  background-color: var(--row-bg);
  border-color: var(--border-soft);
  color: var(--text-primary);
}

.data-row:hover,
.queue-table-row:hover,
.queue-row:hover,
.story-row:hover,
.issue-row:hover,
.project-row:hover,
.kanban-story button:hover,
.support-bundle-row:hover,
.support-bundle-row:focus-within {
  background-color: var(--row-bg-hover);
  border-color: var(--border-strong);
}

.kanban-story button {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--row-bg));
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--accent) 76%, var(--border-strong)),
    0 2px 7px color-mix(in srgb, var(--rail-bg) 07%, transparent);
}

.kanban-story button:hover,
.kanban-story button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 74%, var(--border-strong));
  background: color-mix(in srgb, var(--accent-soft) 78%, var(--row-bg-hover));
  box-shadow:
    inset 3px 0 0 var(--accent),
    0 7px 18px color-mix(in srgb, var(--rail-bg) 12%, transparent);
}

.kanban-story-key {
  color: var(--accent-ink);
}

.kanban-story-points,
.kanban-mini-flags em {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border-soft));
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--chip-bg));
  color: var(--accent-ink);
}

.project-row.selected,
.system-tabs button.active,
.project-tabs button.active,
.requirements-doc-open.selected,
.requirement-comment-row.selected,
.requirements-pco-row.active,
.integration-emery-hook,
.metric-sheet td.active {
  background-color: var(--row-bg-selected);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.project-tabs,
.system-tabs {
  min-height: 31px;
  background-color: transparent;
  border: 0;
  align-items: flex-end;
  overflow-x: auto;
  overflow-y: visible;
}

.project-tabs button,
.system-tabs button {
  background-color: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

.project-tabs button:hover,
.system-tabs button:hover {
  background-color: var(--panel-bg-muted);
  border-color: var(--border-soft);
  color: var(--text-primary);
}

.project-tabs button.active,
.system-tabs button.active {
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
  background-color: var(--pane-bg);
  border-color: var(--accent);
  border-bottom-color: var(--pane-bg);
  color: var(--accent-ink);
  box-shadow: inset 0 2px 0 var(--accent);
}

button,
.button-link,
input,
select,
textarea {
  background-color: var(--field-bg);
  border-color: var(--border-soft);
  color: var(--text-primary);
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
}

.project-state-pill,
.badge,
.count,
.llm-status,
.sync-badge,
.integration-status-pill {
  background-color: var(--chip-bg);
  border-color: var(--border-soft);
}

.check-row {
  color: var(--text-primary);
}

.mapping-table .check-row.compact,
.mapping-table .check-row.compact:has(input:checked),
.mapping-table .check-row.compact:hover {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.theme-qa {
  display: grid;
  gap: 12px;
}

.theme-qa-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
  gap: 8px 14px;
  align-items: end;
}

.theme-qa-toolbar label {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-secondary);
}

.theme-qa-toolbar select {
  width: 100%;
}

.theme-qa-toolbar small {
  grid-column: 2;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.theme-qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.theme-qa-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--panel-bg);
}

.theme-qa-card h3 {
  margin: -10px -10px 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 8px 8px 0 0;
  background: var(--panel-header-bg);
  font-size: 13px;
}

.theme-qa-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.theme-qa-rail {
  width: 74px;
  min-height: 168px;
  display: grid;
  gap: 8px;
  justify-items: center;
  align-content: start;
  padding: 8px;
  border: 1px solid var(--rail-border);
  border-radius: 8px;
  background: var(--rail-bg);
}

.theme-qa-rail .profile-menu {
  justify-self: center;
  align-self: end;
}

.theme-qa-rail .profile-menu summary {
  width: 56px;
  min-height: 44px;
}

.theme-qa-surface {
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--panel-bg-subtle);
  color: var(--text-secondary);
  font-size: 11px;
}

.theme-qa-text-samples {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--panel-bg-subtle);
  font-size: 12px;
  line-height: 1.35;
}

.theme-qa-text-samples a {
  color: var(--accent-ink);
  font-weight: 800;
}

.theme-text-secondary { color: var(--text-secondary); }
.theme-text-helper { color: var(--placeholder); }
.theme-text-success { color: var(--green); font-weight: 800; }
.theme-text-warning { color: var(--orange); font-weight: 800; }
.theme-text-danger { color: var(--danger); font-weight: 800; }

/* Final tab seam override: active tabs must visually merge into the pane below. */
.project-header.pane:has(.project-tabs) {
  background-color: var(--pane-bg) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.project-tabs,
.system-tabs {
  position: relative;
  border-bottom: 0 !important;
}

.project-tabs::before,
.system-tabs::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: 1px;
  background: var(--border-strong);
  pointer-events: none;
}

.project-tabs > button,
.system-tabs > button {
  position: relative;
  z-index: 1;
}

.project-tabs > button.active,
.system-tabs > button.active {
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: -1px !important;
  background-color: var(--panel-bg) !important;
  border-bottom-color: transparent !important;
  box-shadow: inset 0 2px 0 var(--accent) !important;
}

.project-tabs > button.active::after,
.system-tabs > button.active::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -3px;
  z-index: 3;
  height: 6px;
  background: var(--panel-bg);
  pointer-events: none;
}

/* Rail contract: the vertical persona/navigation rail follows theme-owned tokens. */
.icon-rail {
  background-color: var(--rail-bg) !important;
  border-right-color: var(--rail-border) !important;
  color: var(--rail-ink) !important;
}

.rail-button {
  color: var(--rail-muted) !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

.rail-button:hover {
  background-color: var(--rail-hover-bg) !important;
  border-color: var(--rail-profile-border) !important;
  color: var(--rail-ink) !important;
}

.rail-button.active {
  background-color: var(--rail-active-bg) !important;
  border-color: var(--rail-profile-border) !important;
  color: var(--rail-ink) !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}

.rail-button .rail-icon {
  background-color: var(--rail-icon-bg) !important;
  color: var(--rail-icon-ink) !important;
}

.profile-menu summary {
  background-color: var(--rail-profile-bg) !important;
  border-color: var(--rail-profile-border) !important;
  color: var(--rail-ink) !important;
}

.profile-menu summary span {
  background-color: var(--rail-icon-bg) !important;
  color: var(--rail-icon-ink) !important;
}

html[data-theme] .profile-menu-item.danger {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--danger) !important;
}

html[data-theme] .profile-menu-item.danger:hover,
html[data-theme] .profile-menu-item.danger:focus-visible {
  background-color: var(--danger-soft) !important;
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border-soft)) !important;
  color: var(--danger) !important;
}

/* Topbar contract: product title and persona controls follow the active theme. */
.topbar {
  background-color: var(--topbar-bg) !important;
  border-bottom-color: var(--topbar-border) !important;
  color: var(--topbar-ink) !important;
}

.persona-chip {
  background-color: var(--topbar-control-bg) !important;
  border-color: var(--topbar-control-border) !important;
  color: var(--topbar-ink) !important;
}

.message-envelope-button {
  background-color: var(--topbar-control-bg) !important;
  border-color: var(--topbar-control-border) !important;
  color: var(--topbar-ink) !important;
}

.persona-chip:hover,
.message-envelope-button:hover,
.message-envelope-button:focus-visible {
  background-color: var(--topbar-control-hover-bg) !important;
  border-color: var(--topbar-active-border) !important;
}

.product-home {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--topbar-ink) !important;
  box-shadow: none !important;
}

.product-home:hover {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--topbar-ink) !important;
}

.persona-strip > span {
  color: var(--topbar-muted) !important;
}

.persona-chip.active {
  background-color: var(--topbar-active-bg) !important;
  border-color: var(--topbar-active-border) !important;
  color: var(--accent-ink) !important;
  box-shadow: inset 0 -2px 0 var(--accent) !important;
}

.message-envelope-button.has-unread {
  background-color: var(--topbar-active-bg) !important;
  border-color: var(--topbar-active-border) !important;
  color: var(--accent-ink) !important;
}

/* Assistant edge contract: open and collapsed Emery chrome follows the theme. */
.assistant-pane {
  background-color: var(--panel-bg) !important;
  border-left-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

.assistant-header,
.composer,
.assistant-foot {
  background-color: var(--panel-header-bg) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

.assistant-toggle {
  background-color: var(--field-bg) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}

.assistant-peek {
  background-color: var(--panel-header-bg) !important;
  border-color: var(--border-strong) !important;
  color: var(--accent-ink) !important;
  box-shadow: var(--shadow-card) !important;
}

.assistant-peek span {
  color: var(--accent-ink) !important;
}

/* Auth contract: login, first-use, and password-reset screens follow the active theme. */
.login-screen,
.auth-screen {
  background-color: var(--pane-bg) !important;
  color: var(--text-primary) !important;
}

.login-panel,
.auth-layout,
.auth-panel,
.auth-panel-inner {
  background-color: var(--panel-bg) !important;
  color: var(--text-primary) !important;
}

.login-panel {
  border-color: var(--border-soft) !important;
  box-shadow: var(--shadow-card) !important;
}

.auth-brand-panel {
  background-color: var(--rail-bg) !important;
  color: var(--rail-ink) !important;
}

.auth-product strong,
.auth-logo strong {
  color: var(--rail-ink) !important;
}

.auth-product > span,
.auth-status-row,
.auth-copyright {
  color: var(--rail-muted) !important;
}

.auth-status-row strong {
  color: var(--green) !important;
}

.auth-tabs {
  background-color: var(--panel-bg-subtle) !important;
  border-color: var(--border-soft) !important;
}

.auth-tabs span {
  color: var(--text-secondary) !important;
}

.auth-tabs span.active {
  background-color: var(--panel-bg) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-card) !important;
}

.auth-copy h1,
.auth-form label {
  color: var(--text-primary) !important;
}

.auth-copy p:not(.eyebrow),
.auth-help,
.auth-divider,
.sso-button,
.sso-button em {
  color: var(--text-secondary) !important;
}

.auth-form input,
.auth-form select {
  background-color: var(--field-bg) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--accent-ink) !important;
}

.auth-form input::placeholder,
.auth-form select::placeholder {
  color: var(--placeholder) !important;
  -webkit-text-fill-color: var(--placeholder) !important;
}

.auth-form input:focus,
.auth-form select:focus {
  outline: 2px solid var(--focus-ring) !important;
  border-color: var(--accent) !important;
}

.auth-submit.secondary,
.sso-button {
  background-color: var(--field-bg) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}

.auth-divider::before,
.auth-divider::after {
  background-color: var(--border-soft) !important;
}

.sso-button em {
  background-color: var(--chip-bg) !important;
  border-color: var(--border-soft) !important;
}

.sso-icon.google,
.sso-icon.enterprise {
  background-color: var(--panel-bg-subtle) !important;
  border-color: var(--border-soft) !important;
  color: var(--accent-ink) !important;
}

/* Emery response contract: chat and prompt bubbles follow the active theme. */
.chat-log,
.support-chat-log {
  background-color: var(--panel-bg) !important;
  color: var(--text-primary) !important;
}

.message,
.chat-message,
.support-chat-message {
  background-color: var(--row-bg) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}

.message.assistant,
.chat-message.assistant,
.support-chat-message.assistant {
  background-color: var(--panel-bg-subtle) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}

.message.user,
.support-chat-message.user {
  background-color: var(--accent-soft) !important;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft)) !important;
  color: var(--accent-ink) !important;
}

.message strong,
.chat-message strong,
.support-chat-message strong {
  color: inherit !important;
}

.message-body,
.message-body p,
.chat-message p,
.support-chat-message p {
  color: inherit !important;
}

.message-body code {
  background-color: var(--panel-bg-muted) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}

.assistant-actions {
  background-color: var(--panel-bg) !important;
  border-color: var(--border-strong) !important;
}

.assistant-bubbles button {
  background-color: var(--chip-bg) !important;
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft)) !important;
  color: var(--accent-ink) !important;
}

.assistant-bubbles button:hover {
  background-color: var(--panel-bg-selected) !important;
  border-color: var(--accent) !important;
}

.llm-working,
.support-working {
  background-color: var(--orange-soft) !important;
  border-color: color-mix(in srgb, var(--orange) 48%, var(--border-soft)) !important;
  border-left-color: var(--orange) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--orange) !important;
}

.llm-working > span,
.support-working > span {
  border-color: color-mix(in srgb, var(--orange) 32%, var(--panel-bg)) !important;
  border-top-color: var(--orange) !important;
}

.llm-working strong,
.llm-working p,
.support-working strong,
.support-working p {
  color: var(--orange) !important;
}

/* Agent Console contract: graph, status panels, and activity rows stay polished in every theme. */
.developer-agent-console {
  color: var(--text-primary) !important;
}

.agent-console-head,
.agent-attention-summary,
.agent-graph-card,
.agent-activity-panel,
.agent-console-task,
.agent-task-row {
  background-color: var(--panel-bg) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

.agent-console-head p,
.agent-graph-head p,
.agent-attention-summary p,
.agent-attention-summary li,
.agent-activity-head p,
.agent-activity-row small,
.agent-activity-row p,
.agent-console-task p {
  color: var(--text-secondary) !important;
}

.agent-console-metrics span,
.agent-graph-legend span,
.agent-task-jira,
.agent-node-status,
.kanban-agent-status {
  background-color: var(--panel-bg-muted) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-secondary) !important;
}

.agent-console-metrics strong,
.agent-flow-label strong,
.agent-console-task strong,
.agent-activity-row strong {
  color: var(--text-primary) !important;
}

.agent-flow-canvas {
  background-color: var(--panel-bg-subtle) !important;
  border-color: var(--border-strong) !important;
}

.agent-flow-group-box {
  background-color: color-mix(in srgb, var(--panel-bg-muted) 46%, transparent) !important;
  border-color: color-mix(in srgb, var(--border-strong) 74%, transparent) !important;
}

.agent-flow-group-box span,
.agent-flow-label span,
.agent-flow-label small,
.agent-flow-agent-label small {
  color: var(--text-secondary) !important;
}

.agent-flow-dev-icon {
  background-color: var(--panel-bg) !important;
  border-color: color-mix(in srgb, var(--accent) 66%, var(--border-strong)) !important;
}

.agent-flow-dev-icon::before,
.agent-flow-dev-icon::after {
  background-color: var(--accent) !important;
}

.agent-flow-canvas .react-flow__handle {
  background-color: var(--border-strong) !important;
  border-color: var(--panel-bg) !important;
}

.agent-flow-canvas .react-flow__edge-path {
  stroke: color-mix(in srgb, var(--accent) 44%, var(--border-strong)) !important;
}

.agent-flow-canvas .react-flow__edge-textbg {
  fill: var(--panel-bg) !important;
}

.agent-graph-legend .work,
.agent-node-status.work,
.agent-fallback-node.work {
  background-color: var(--green-soft) !important;
  border-color: color-mix(in srgb, var(--green) 60%, var(--border-soft)) !important;
  color: var(--green) !important;
}

.agent-graph-legend .input,
.agent-node-status.input,
.agent-fallback-node.input {
  background-color: var(--orange-soft) !important;
  border-color: color-mix(in srgb, var(--orange) 60%, var(--border-soft)) !important;
  color: var(--orange) !important;
}

.agent-graph-legend .error,
.agent-node-status.error,
.agent-fallback-node.error {
  background-color: var(--danger-soft) !important;
  border-color: color-mix(in srgb, var(--danger) 60%, var(--border-soft)) !important;
  color: var(--danger) !important;
}

.agent-node-status.done,
.agent-fallback-node.done {
  background-color: var(--green-soft) !important;
  border-color: color-mix(in srgb, var(--green) 60%, var(--border-soft)) !important;
  color: var(--green) !important;
}

.agent-node-status.idle,
.agent-fallback-node.idle {
  background-color: var(--accent-soft) !important;
  border-color: color-mix(in srgb, var(--accent) 54%, var(--border-soft)) !important;
  color: var(--accent-ink) !important;
}

.agent-attention-summary.ok {
  background-color: var(--green-soft) !important;
  border-color: color-mix(in srgb, var(--green) 58%, var(--border-soft)) !important;
}

.agent-attention-summary.warn {
  background-color: var(--orange-soft) !important;
  border-color: color-mix(in srgb, var(--orange) 58%, var(--border-soft)) !important;
}

.agent-attention-summary.danger {
  background-color: var(--danger-soft) !important;
  border-color: color-mix(in srgb, var(--danger) 58%, var(--border-soft)) !important;
}

.agent-attention-summary.neutral {
  background-color: var(--panel-bg-subtle) !important;
  border-color: var(--border-soft) !important;
}

/* Validation surfaces need state-specific contrast in every theme. */
html[data-theme] .validation-panel {
  background-color: var(--panel-bg-subtle) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}

html[data-theme] .validation-panel strong,
html[data-theme] .validation-panel b {
  color: var(--text-primary) !important;
}

html[data-theme] .validation-panel p,
html[data-theme] .validation-panel small {
  color: var(--text-secondary) !important;
}

html[data-theme] .validation-panel.success {
  background-color: var(--green-soft) !important;
  border-color: color-mix(in srgb, var(--green) 62%, var(--border-soft)) !important;
}

html[data-theme] .validation-panel.success strong {
  color: var(--green) !important;
}

html[data-theme] .validation-panel.danger {
  background-color: var(--danger-soft) !important;
  border-color: color-mix(in srgb, var(--danger) 62%, var(--border-soft)) !important;
}

html[data-theme] .validation-panel.danger strong {
  color: var(--danger) !important;
}

html[data-theme] .validation-panel.working {
  background-color: var(--accent-soft) !important;
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border-soft)) !important;
}

html[data-theme] .validation-panel.working strong {
  color: var(--accent-ink) !important;
}

/* Integration configuration surfaces follow the active theme, whether they are schema-driven or custom runtime panels. */
html[data-theme] .integration-config > .settings-section,
html[data-theme] .integration-config > .integration-fields,
html[data-theme] .integration-test-credentials,
html[data-theme] .integration-config-summary,
html[data-theme] .integration-placeholder,
html[data-theme] .integration-config .empty,
html[data-theme] .installed-setting-field,
html[data-theme] .a2a-registry-section,
html[data-theme] .a2a-agent-form {
  background-color: var(--panel-bg-subtle) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}

html[data-theme] .integration-config-summary span,
html[data-theme] .integration-placeholder strong,
html[data-theme] .integration-test-credentials h5 {
  color: var(--text-primary) !important;
}

html[data-theme] .integration-config-summary b,
html[data-theme] .integration-placeholder p,
html[data-theme] .integration-test-credentials p,
html[data-theme] .integration-config .helper {
  color: var(--text-secondary) !important;
}

html[data-theme] .integration-config .check-row,
html[data-theme] .a2a-agent-row {
  background-color: var(--row-bg) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}

html[data-theme] .a2a-agent-row strong,
html[data-theme] .a2a-agent-row p {
  color: var(--text-primary) !important;
}

html[data-theme] .a2a-agent-row small,
html[data-theme] .a2a-agent-row span {
  color: var(--text-secondary) !important;
}

html[data-theme] .a2a-agent-row em {
  color: var(--danger) !important;
}

/* Work-product contract: design, artifacts, story evidence, and handoff surfaces follow the active theme. */
html[data-theme] .artifact-document,
html[data-theme] .story-editor-card,
html[data-theme] .implementation-card,
html[data-theme] .implementation-summary,
html[data-theme] .implementation-interactions article,
html[data-theme] .figma-card,
html[data-theme] .figma-object-card,
html[data-theme] .story-context-list li,
html[data-theme] .story-evidence-row,
html[data-theme] .handoff-card,
html[data-theme] .handoff-detail-card,
html[data-theme] .agent-dispatch-card,
html[data-theme] .artifact-summary-card,
html[data-theme] .artifact-declare-card,
html[data-theme] .artifact-registry,
html[data-theme] .artifact-filter-bar,
html[data-theme] .artifact-form,
html[data-theme] .artifact-table,
html[data-theme] .artifact-lightbox,
html[data-theme] .artifact-preview-pane,
html[data-theme] .artifact-preview-empty {
  background: var(--panel-bg) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}

html[data-theme] .artifact-filter-bar,
html[data-theme] .artifact-table,
html[data-theme] .implementation-summary,
html[data-theme] .implementation-interactions article,
html[data-theme] .figma-object-card,
html[data-theme] .story-context-list li,
html[data-theme] .artifact-preview-pane {
  background: var(--panel-bg-subtle) !important;
  border-color: var(--border-strong) !important;
}

html[data-theme] .artifact-declare-head,
html[data-theme] .artifact-preview-meta span,
html[data-theme] .handoff-detail-card dl div,
html[data-theme] .handoff-detail-card section,
html[data-theme] .figma-object-preview,
html[data-theme] .artifact-preview-text,
html[data-theme] .button-like {
  background: var(--panel-header-bg) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}

html[data-theme] .story-evidence-row.figma,
html[data-theme] .figma-object-card {
  background: var(--accent-soft) !important;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft)) !important;
}

html[data-theme] .story-evidence-row.comment {
  background: var(--orange-soft) !important;
  border-color: color-mix(in srgb, var(--orange) 42%, var(--border-soft)) !important;
}

html[data-theme] .story-evidence-row.plan,
html[data-theme] .story-evidence-row.markdown {
  background: var(--green-soft) !important;
  border-color: color-mix(in srgb, var(--green) 42%, var(--border-soft)) !important;
}

html[data-theme] .handoff-card {
  background: var(--accent-soft) !important;
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft)) !important;
}

html[data-theme] .artifact-document p,
html[data-theme] .artifact-document li,
html[data-theme] .artifact-document ul,
html[data-theme] .artifact-summary-card span,
html[data-theme] .artifact-summary-card p,
html[data-theme] .artifact-declare-card p,
html[data-theme] .artifact-row small,
html[data-theme] .artifact-preview-meta span,
html[data-theme] .artifact-preview-empty p,
html[data-theme] .implementation-summary p,
html[data-theme] .implementation-summary li,
html[data-theme] .implementation-interactions small,
html[data-theme] .figma-object-card small,
html[data-theme] .figma-object-card p,
html[data-theme] .figma-file,
html[data-theme] .story-context-list span,
html[data-theme] .handoff-detail-card dt,
html[data-theme] .handoff-detail-card section span,
html[data-theme] .handoff-detail-card section p {
  color: var(--text-secondary) !important;
}

html[data-theme] .artifact-document h1,
html[data-theme] .artifact-document h2,
html[data-theme] .artifact-document h3,
html[data-theme] .artifact-summary-card strong,
html[data-theme] .artifact-row strong,
html[data-theme] .implementation-summary h1,
html[data-theme] .implementation-summary h2,
html[data-theme] .implementation-summary h3,
html[data-theme] .implementation-interactions strong,
html[data-theme] .figma-object-card strong,
html[data-theme] .story-context-list strong,
html[data-theme] .handoff-detail-card h4,
html[data-theme] .handoff-detail-card dd {
  color: var(--text-primary) !important;
}

html[data-theme] .artifact-preview-frame {
  background: var(--panel-bg) !important;
}

html[data-theme] .artifact-lightbox-backdrop {
  background: color-mix(in srgb, var(--rail-bg) 54%, transparent) !important;
}

/* Agent lightbox contract: overlay console surfaces follow the active theme, not legacy light defaults. */
html[data-theme] .agent-lightbox-backdrop {
  background: color-mix(in srgb, var(--rail-bg) 58%, transparent) !important;
}

html[data-theme] .agent-lightbox,
html[data-theme] .agent-lightbox .metric-lightbox-head,
html[data-theme] .agent-lightbox .agent-console-summary div,
html[data-theme] .agent-lightbox .agent-lightbox-details,
html[data-theme] .agent-lightbox .agent-lightbox-tasks,
html[data-theme] .agent-lightbox .agent-task-conversation,
html[data-theme] .agent-lightbox .agent-console-task,
html[data-theme] .agent-lightbox .agent-skill-cloud span,
html[data-theme] .agent-lightbox .agent-task-row {
  background: var(--panel-bg) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

html[data-theme] .agent-lightbox .agent-console-summary div,
html[data-theme] .agent-lightbox .agent-console-task,
html[data-theme] .agent-lightbox .agent-skill-cloud span,
html[data-theme] .agent-lightbox .agent-task-focus-facts div,
html[data-theme] .agent-lightbox .agent-task-focus-brief,
html[data-theme] .agent-lightbox .agent-task-chat,
html[data-theme] .agent-lightbox .agent-task-plan-card,
html[data-theme] .agent-lightbox .agent-task-followup textarea {
  background: var(--panel-bg-subtle) !important;
  border-color: var(--border-soft) !important;
}

html[data-theme] .agent-lightbox .agent-task-chat-message {
  background: var(--panel-bg) !important;
  border-color: var(--border-soft) !important;
}

html[data-theme] .agent-lightbox .agent-task-chat-message.user {
  background: var(--panel-bg-selected) !important;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft)) !important;
}

html[data-theme] .agent-lightbox .metric-lightbox-head p,
html[data-theme] .agent-lightbox .agent-console-summary span,
html[data-theme] .agent-lightbox .agent-lightbox-details p,
html[data-theme] .agent-lightbox .agent-lightbox-details dt,
html[data-theme] .agent-lightbox .agent-console-task small,
html[data-theme] .agent-lightbox .agent-console-task p,
html[data-theme] .agent-lightbox .agent-task-focus-title p,
html[data-theme] .agent-lightbox .agent-task-focus-facts span,
html[data-theme] .agent-lightbox .agent-task-focus-brief p,
html[data-theme] .agent-lightbox .agent-task-chat-message small,
html[data-theme] .agent-lightbox .agent-task-plan-card span,
html[data-theme] .agent-lightbox .agent-task-row small,
html[data-theme] .agent-lightbox .agent-task-row p {
  color: var(--text-secondary) !important;
}

html[data-theme] .agent-lightbox .metric-lightbox-head h2,
html[data-theme] .agent-lightbox .agent-console-summary strong,
html[data-theme] .agent-lightbox .agent-lightbox-details h4,
html[data-theme] .agent-lightbox .agent-lightbox-details dd,
html[data-theme] .agent-lightbox .agent-lightbox-tasks h4,
html[data-theme] .agent-lightbox .agent-task-focus-title h3,
html[data-theme] .agent-lightbox .agent-task-focus-facts strong,
html[data-theme] .agent-lightbox .agent-task-focus-brief strong,
html[data-theme] .agent-lightbox .agent-task-chat-message strong,
html[data-theme] .agent-lightbox .agent-task-chat-message div,
html[data-theme] .agent-lightbox .agent-task-plan-card pre,
html[data-theme] .agent-lightbox .agent-console-task strong,
html[data-theme] .agent-lightbox .agent-task-row strong {
  color: var(--text-primary) !important;
}

html[data-theme] .agent-lightbox .agent-task-followup textarea,
html[data-theme] .agent-lightbox .agent-task-chat-composer textarea {
  color: var(--text-primary) !important;
}

html[data-theme] .agent-lightbox .agent-task-followup textarea::placeholder,
html[data-theme] .agent-lightbox .agent-task-chat-composer textarea::placeholder {
  color: var(--placeholder) !important;
}

html[data-theme] .agent-lightbox .metric-lightbox-close,
html[data-theme] .agent-lightbox .agent-task-conversation-close {
  background: var(--panel-bg-muted) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}

html[data-theme] .agent-lightbox .metric-lightbox-close:hover,
html[data-theme] .agent-lightbox .agent-task-conversation-close:hover {
  background: var(--panel-bg-selected) !important;
  color: var(--accent-ink) !important;
}

html[data-theme] .agent-lightbox .agent-node-status {
  background: var(--panel-bg-muted) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}

html[data-theme] .agent-lightbox .agent-node-status.work {
  background: var(--green-soft) !important;
  border-color: color-mix(in srgb, var(--green) 56%, var(--border-soft)) !important;
  color: var(--green) !important;
}

html[data-theme] .agent-lightbox .agent-node-status.input {
  background: var(--orange-soft) !important;
  border-color: color-mix(in srgb, var(--orange) 56%, var(--border-soft)) !important;
  color: var(--orange) !important;
}

html[data-theme] .agent-lightbox .agent-node-status.error {
  background: var(--danger-soft) !important;
  border-color: color-mix(in srgb, var(--danger) 56%, var(--border-soft)) !important;
  color: var(--danger) !important;
}

html[data-theme] .agent-lightbox .agent-node-status.done,
html[data-theme] .agent-lightbox .agent-node-status.idle {
  background: var(--accent-soft) !important;
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-soft)) !important;
  color: var(--accent-ink) !important;
}

/* Stronger agent graph override: older graph shorthands should not leak another theme. */
html[data-theme] .developer-agent-console .agent-console-head,
html[data-theme] .developer-agent-console .agent-attention-summary,
html[data-theme] .developer-agent-console .agent-graph-card,
html[data-theme] .developer-agent-console .agent-activity-panel,
html[data-theme] .developer-agent-console .agent-console-task,
html[data-theme] .developer-agent-console .agent-task-row,
html[data-theme] .developer-agent-console .agent-console-metrics span,
html[data-theme] .developer-agent-console .agent-graph-legend span,
html[data-theme] .developer-agent-console .agent-fallback-node,
html[data-theme] .developer-agent-console .agent-task-jira,
html[data-theme] .kanban-agent-status {
  background: var(--panel-bg) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

html[data-theme] .developer-agent-console .agent-flow-canvas {
  background: var(--panel-bg-subtle) !important;
  border-color: var(--border-strong) !important;
}

html[data-theme] .developer-agent-console .agent-flow-group-box {
  background: color-mix(in srgb, var(--panel-bg-muted) 52%, transparent) !important;
  border-color: color-mix(in srgb, var(--border-strong) 78%, transparent) !important;
}

html[data-theme] .developer-agent-console .agent-flow-group-box span,
html[data-theme] .developer-agent-console .agent-flow-label span,
html[data-theme] .developer-agent-console .agent-flow-label small,
html[data-theme] .developer-agent-console .agent-console-task p,
html[data-theme] .developer-agent-console .agent-task-jira small,
html[data-theme] .developer-agent-console .agent-activity-row small,
html[data-theme] .developer-agent-console .agent-activity-row p,
html[data-theme] .kanban-agent-status em {
  color: var(--text-secondary) !important;
}

html[data-theme] .developer-agent-console .agent-flow-label strong,
html[data-theme] .developer-agent-console .agent-console-metrics strong,
html[data-theme] .developer-agent-console .agent-console-task strong,
html[data-theme] .developer-agent-console .agent-activity-row strong {
  color: var(--text-primary) !important;
}

html[data-theme] .developer-agent-console .agent-flow-dev-icon {
  background: var(--panel-bg) !important;
  border-color: color-mix(in srgb, var(--accent) 54%, var(--border-soft)) !important;
}

html[data-theme] .developer-agent-console .agent-flow-dev-icon::before,
html[data-theme] .developer-agent-console .agent-flow-dev-icon::after {
  background: var(--accent) !important;
}

html[data-theme] .developer-agent-console .agent-flow-canvas .react-flow__handle {
  background: var(--accent) !important;
  border-color: var(--panel-bg-subtle) !important;
}

html[data-theme] .developer-agent-console .agent-flow-canvas .react-flow__edge-textbg {
  fill: var(--panel-bg) !important;
}

html[data-theme] .developer-agent-console .agent-terminal-view {
  background: var(--panel-bg-subtle) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

html[data-theme] .developer-agent-console .agent-graph-warning,
html[data-theme] .developer-agent-console .agent-attention-summary.warn {
  background: var(--orange-soft) !important;
  border-color: color-mix(in srgb, var(--orange) 54%, var(--border-soft)) !important;
  color: var(--orange) !important;
}

html[data-theme] .developer-agent-console .agent-attention-summary.ok {
  background: var(--green-soft) !important;
  border-color: color-mix(in srgb, var(--green) 54%, var(--border-soft)) !important;
  color: var(--green) !important;
}

html[data-theme] .developer-agent-console .agent-attention-summary.danger {
  background: var(--danger-soft) !important;
  border-color: color-mix(in srgb, var(--danger) 54%, var(--border-soft)) !important;
  color: var(--danger) !important;
}

html[data-theme] .developer-agent-console .agent-attention-summary.neutral {
  background: var(--panel-bg-muted) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}

html[data-theme] .developer-agent-console .agent-graph-legend .work,
html[data-theme] .developer-agent-console .agent-fallback-node.work,
html[data-theme] .developer-agent-console .agent-node-status.work {
  background: var(--green-soft) !important;
  border-color: color-mix(in srgb, var(--green) 56%, var(--border-soft)) !important;
  color: var(--green) !important;
}

html[data-theme] .developer-agent-console .agent-graph-legend .input,
html[data-theme] .developer-agent-console .agent-fallback-node.input,
html[data-theme] .developer-agent-console .agent-node-status.input {
  background: var(--orange-soft) !important;
  border-color: color-mix(in srgb, var(--orange) 56%, var(--border-soft)) !important;
  color: var(--orange) !important;
}

html[data-theme] .developer-agent-console .agent-graph-legend .error,
html[data-theme] .developer-agent-console .agent-fallback-node.error,
html[data-theme] .developer-agent-console .agent-node-status.error {
  background: var(--danger-soft) !important;
  border-color: color-mix(in srgb, var(--danger) 56%, var(--border-soft)) !important;
  color: var(--danger) !important;
}

html[data-theme] .developer-agent-console .agent-fallback-node.done,
html[data-theme] .developer-agent-console .agent-node-status.done,
html[data-theme] .developer-agent-console .agent-fallback-node.idle,
html[data-theme] .developer-agent-console .agent-node-status.idle {
  background: var(--accent-soft) !important;
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-soft)) !important;
  color: var(--accent-ink) !important;
}

html[data-theme] .developer-agent-console .react-flow__controls {
  overflow: hidden !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  background: var(--panel-bg) !important;
  background-color: var(--panel-bg) !important;
  box-shadow: var(--shadow-card) !important;
}

html[data-theme] .developer-agent-console .react-flow__controls-button {
  width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-soft) !important;
  border-color: var(--border-soft) !important;
  border-radius: 0 !important;
  background: var(--panel-bg) !important;
  background-color: var(--panel-bg) !important;
  color: var(--text-primary) !important;
  fill: var(--text-primary) !important;
}

html[data-theme] .developer-agent-console .react-flow__controls-button:hover {
  background: var(--panel-bg-muted) !important;
  background-color: var(--panel-bg-muted) !important;
  color: var(--accent-ink) !important;
  fill: var(--accent-ink) !important;
}

html[data-theme] .developer-agent-console .react-flow__controls-button:last-child {
  border-bottom: 0 !important;
}

html[data-theme] .developer-agent-console .react-flow__controls-button svg {
  fill: currentColor !important;
  color: inherit !important;
}

html[data-theme] .developer-agent-console .react-flow__controls-button svg path {
  fill: currentColor !important;
}

html[data-theme] .agent-graph-card,
html[data-theme] .agent-graph-card .agent-graph-legend span,
html[data-theme] .agent-graph-card .agent-fallback-node {
  background: var(--panel-bg) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

html[data-theme] .agent-graph-card .agent-flow-canvas {
  background: var(--panel-bg-subtle) !important;
  border-color: var(--border-strong) !important;
}

html[data-theme] .agent-graph-card .agent-flow-group-box {
  background: color-mix(in srgb, var(--panel-bg-muted) 52%, transparent) !important;
  border-color: color-mix(in srgb, var(--border-strong) 78%, transparent) !important;
}

html[data-theme] .agent-graph-card .agent-flow-group-box span,
html[data-theme] .agent-graph-card .agent-flow-label span,
html[data-theme] .agent-graph-card .agent-flow-label small {
  color: var(--text-secondary) !important;
}

html[data-theme] .agent-graph-card .agent-flow-label strong {
  color: var(--text-primary) !important;
}

html[data-theme] .agent-graph-card .agent-flow-canvas .react-flow__handle {
  background: var(--accent) !important;
  border-color: var(--panel-bg-subtle) !important;
}

html[data-theme] .agent-graph-card .agent-flow-canvas .react-flow__edge-textbg {
  fill: var(--panel-bg) !important;
}

html[data-theme] .agent-graph-card .agent-graph-legend .work,
html[data-theme] .agent-graph-card .agent-fallback-node.work {
  background: var(--green-soft) !important;
  border-color: color-mix(in srgb, var(--green) 56%, var(--border-soft)) !important;
  color: var(--green) !important;
}

html[data-theme] .agent-graph-card .agent-graph-legend .input,
html[data-theme] .agent-graph-card .agent-fallback-node.input {
  background: var(--orange-soft) !important;
  border-color: color-mix(in srgb, var(--orange) 56%, var(--border-soft)) !important;
  color: var(--orange) !important;
}

html[data-theme] .agent-graph-card .agent-graph-legend .error,
html[data-theme] .agent-graph-card .agent-fallback-node.error {
  background: var(--danger-soft) !important;
  border-color: color-mix(in srgb, var(--danger) 56%, var(--border-soft)) !important;
  color: var(--danger) !important;
}

html[data-theme] .agent-graph-card .agent-fallback-node.done,
html[data-theme] .agent-graph-card .agent-fallback-node.idle {
  background: var(--accent-soft) !important;
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-soft)) !important;
  color: var(--accent-ink) !important;
}

html[data-theme] .agent-graph-card .react-flow__controls {
  overflow: hidden !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  background: var(--panel-bg) !important;
  background-color: var(--panel-bg) !important;
  box-shadow: var(--shadow-card) !important;
}

html[data-theme] .agent-graph-card .react-flow__controls-button {
  width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-soft) !important;
  border-color: var(--border-soft) !important;
  border-radius: 0 !important;
  background: var(--panel-bg) !important;
  background-color: var(--panel-bg) !important;
  color: var(--text-primary) !important;
  fill: var(--text-primary) !important;
}

html[data-theme] .agent-graph-card .react-flow__controls-button:hover {
  background: var(--panel-bg-muted) !important;
  background-color: var(--panel-bg-muted) !important;
  color: var(--accent-ink) !important;
  fill: var(--accent-ink) !important;
}

html[data-theme] .agent-graph-card .react-flow__controls-button:last-child {
  border-bottom: 0 !important;
}

html[data-theme] .agent-graph-card .react-flow__controls-button svg,
html[data-theme] .agent-graph-card .react-flow__controls-button svg path {
  fill: currentColor !important;
  color: inherit !important;
}

/* Project Details contract: lifecycle, readiness, and Jira mapping panels use active theme surfaces. */
html[data-theme] .project-detail-page,
html[data-theme] .project-lifecycle-card,
html[data-theme] .project-jira-setup-card {
  background: var(--panel-bg) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

html[data-theme] .project-detail-head {
  background: var(--panel-header-bg) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

html[data-theme] .project-detail-head p,
html[data-theme] .project-stage,
html[data-theme] .project-stage em,
html[data-theme] .readiness-card span,
html[data-theme] .readiness-card p,
html[data-theme] .project-jira-setup-card .helper {
  color: var(--text-secondary) !important;
}

html[data-theme] .project-stage {
  background: color-mix(in srgb, var(--panel-bg-muted) 32%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border-soft) 52%, transparent) !important;
}

html[data-theme] .project-stage span {
  background: var(--panel-bg-muted) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

html[data-theme] .project-stage strong,
html[data-theme] .readiness-card strong {
  color: var(--text-primary) !important;
}

html[data-theme] .project-stage.done {
  background: color-mix(in srgb, var(--green-soft) 56%, transparent) !important;
  border-color: color-mix(in srgb, var(--green) 44%, var(--border-soft)) !important;
}

html[data-theme] .project-stage.done span {
  background: var(--green-soft) !important;
  border-color: color-mix(in srgb, var(--green) 58%, var(--border-soft)) !important;
  color: var(--green) !important;
}

html[data-theme] .project-stage.active {
  background: var(--panel-bg-selected) !important;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft)) !important;
  color: var(--accent-ink) !important;
}

html[data-theme] .project-stage.active span {
  background: var(--accent-soft) !important;
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border-soft)) !important;
  color: var(--accent-ink) !important;
}

html[data-theme] .project-stage.active.requirements,
html[data-theme] .project-stage.active.requirements-gathering {
  background: var(--orange-soft) !important;
  border-color: color-mix(in srgb, var(--orange) 58%, var(--border-soft)) !important;
  color: var(--orange) !important;
}

html[data-theme] .project-stage.active.requirements span,
html[data-theme] .project-stage.active.requirements-gathering span {
  background: var(--orange-soft) !important;
  border-color: color-mix(in srgb, var(--orange) 62%, var(--border-soft)) !important;
  color: var(--orange) !important;
}

html[data-theme] .project-stage.active.development {
  background: var(--green-soft) !important;
  border-color: color-mix(in srgb, var(--green) 58%, var(--border-soft)) !important;
  color: var(--green) !important;
}

html[data-theme] .project-stage.active.development span {
  background: var(--green-soft) !important;
  border-color: color-mix(in srgb, var(--green) 62%, var(--border-soft)) !important;
  color: var(--green) !important;
}

html[data-theme] .project-stage.active.released {
  background: var(--purple-soft) !important;
  border-color: color-mix(in srgb, var(--purple) 58%, var(--border-soft)) !important;
  color: var(--purple) !important;
}

html[data-theme] .project-stage.active.released span {
  background: var(--purple-soft) !important;
  border-color: color-mix(in srgb, var(--purple) 62%, var(--border-soft)) !important;
  color: var(--purple) !important;
}

html[data-theme] .project-flow-arrow {
  background: var(--border-strong) !important;
}

html[data-theme] .project-flow-arrow::after {
  border-color: var(--border-strong) !important;
}

html[data-theme] .readiness-card,
html[data-theme] .project-jira-setup-grid {
  background: var(--panel-bg-subtle) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

html[data-theme] .readiness-card.ok {
  background: var(--green-soft) !important;
  border-color: color-mix(in srgb, var(--green) 58%, var(--border-soft)) !important;
}

html[data-theme] .readiness-card.warn {
  background: var(--orange-soft) !important;
  border-color: color-mix(in srgb, var(--orange) 58%, var(--border-soft)) !important;
}

html[data-theme] .readiness-card.neutral {
  background: var(--panel-bg-subtle) !important;
  border-color: var(--border-soft) !important;
}

.git-context-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  background: var(--panel-bg-subtle);
  color: var(--text-primary);
}

.git-context-banner.missing {
  background: var(--orange-soft);
  border-color: color-mix(in srgb, var(--orange) 48%, var(--border-soft));
}

.git-context-banner span {
  display: block;
  margin-bottom: 3px;
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.git-context-banner strong {
  display: block;
  color: var(--text-primary);
  font-size: 1rem;
}

.git-context-banner p {
  margin: 4px 0 0;
  color: var(--text-secondary);
}

.git-context-form {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(120px, 160px) auto auto;
  align-items: end;
  gap: 10px;
}

.git-context-form label {
  margin: 0;
}

@media (max-width: 760px) {
  .git-context-banner,
  .git-context-form {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .git-context-banner {
    display: grid;
  }
}