:root {
  color-scheme: light;
  /* Color tokens. Numbers are ink, never status; status lives on labels only. */
  --bg: #faf9f5;
  --input-bg: #ffffff;
  --ink: #14171d;
  --text: #14171d;
  --muted: #2d3441;
  --subtle: #5b6470;
  --line: #d8dbe0;
  --line-soft: #e8eaef;
  --soft: #f4f2ec;
  --soft-2: #f4f2ec;
  --blue: #2563eb;
  --accent: #2563eb;
  --blue-soft: #eef3ff;
  --ok: #2f7d4f;
  --warn: #a16207;
  --fail: #b32531;
  /* Type tokens — five sizes, three families.                              */
  /* System serif for h1/h2 (titles), sans for body and h3, mono for refs. */
  --size-xs: 12px;
  --size-s: 13px;
  --size-m: 14px;
  --size-l: 17px;
  --size-xl: 22px;
  --font: ui-sans-serif, system-ui, -apple-system, "Inter", "Helvetica Neue",
    Arial, sans-serif;
  --font-display: ui-serif, "New York", "Charter", "Iowan Old Style", "Sitka Text",
    Cambria, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
    monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--size-m);
  font-weight: 450;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Bionic-style word-start emphasis for prose detail. The first ~40% of each */
/* word renders heavier so scanning is faster without disturbing the body.    */
.bionic,
.bionic-num {
  font-weight: 600;
  color: var(--ink);
}

body {
  min-height: 100vh;
}

.reload-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--warn);
  color: #fff;
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 70%, black);
}

.reload-bar[hidden] {
  display: none;
}

.reload-bar-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 10px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reload-bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.reload-bar-actions .stamp,
.reload-bar-actions .subtle {
  color: rgba(255, 255, 255, 0.85);
}

.reload-bar .button.reload-bar-button {
  background: #fff;
  color: var(--warn);
  border-color: #fff;
  font-weight: 600;
}

.reload-bar .button.reload-bar-button:hover {
  background: var(--soft);
}

.reload-bar .notice,
.reload-bar .notice-warn,
.reload-bar .notice-fail {
  color: rgba(255, 255, 255, 0.95);
}

.gateway-reload-outcomes-toggle > summary {
  cursor: pointer;
  font-size: var(--size-s);
  color: rgba(255, 255, 255, 0.9);
  padding: 4px 0;
  list-style: none;
}

.gateway-reload-outcomes-toggle > summary::-webkit-details-marker {
  display: none;
}

.gateway-reload-outcomes-toggle > summary::after {
  content: " ▾";
  opacity: 0.7;
}

.gateway-reload-outcomes-toggle[open] > summary::after {
  content: " ▴";
}

.reload-bar .gateway-reload-outcomes {
  margin: 4px 0 0;
}

.reload-bar .gateway-reload-outcomes li {
  padding: 4px 0;
  color: rgba(255, 255, 255, 0.92);
}

.reload-bar .gateway-reload-outcomes .subtle {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--size-xs);
  word-break: break-word;
}

.page {
  max-width: 1220px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}

.top {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.subtitle {
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--size-m);
  line-height: 1.5;
}

.top-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 14px;
}

.gateway-reload-slot {
  flex: 1 1 320px;
  min-width: min(100%, 320px);
}

.gateway-reload-header {
  display: grid;
  gap: 6px;
  justify-items: end;
  max-width: 420px;
}

.gateway-reload-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.dashboard-refresh-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.refresh-toggle.linkish {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
  text-decoration: none;
}

.refresh-toggle .refresh-label {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.refresh-toggle .refresh-icon {
  display: inline-block;
  font-size: 70%;
  line-height: 1;
}

.refresh-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.gateway-reload-detail {
  display: grid;
  gap: 4px;
  width: 100%;
}

.gateway-reload-outcomes {
  width: 100%;
}

.gateway-reload-outcomes li {
  display: grid;
  gap: 2px;
}

.stamp {
  color: var(--muted);
  font-size: var(--size-xs);
  white-space: nowrap;
  padding-bottom: 3px;
}

.stamp-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
}

.stamp.stamp-strong {
  color: var(--ink);
}

.stamp[data-state="healthy"],
.stamp[data-state="available"],
.stamp[data-state="active"],
.stamp[data-state="ok"] {
  color: var(--ok);
}

.stamp[data-state="pressured"],
.stamp[data-state="attention"],
.stamp[data-state="partial"],
.stamp[data-state="loading"] {
  color: var(--warn);
}

.stamp[data-state="degraded"],
.stamp[data-state="error"],
.stamp[data-state="unavailable"] {
  color: var(--fail);
}

.lead-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.lead-row .lead {
  margin: 0;
  flex: 1;
}

.tab-state-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--muted);
  font-size: var(--size-s);
  font-weight: 500;
  white-space: nowrap;
}

.state-pill-slot {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.tab-state-pill[hidden] {
  display: none;
}

.counts-strip > .state-pill-slot.stat:empty {
  display: none;
}

.tab-state-pill .state-value,
.counts-strip > .state-pill-slot.stat .state-value {
  font-size: var(--size-l);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

.tab-state-pill[data-state="healthy"] .state-value,
.tab-state-pill[data-state="available"] .state-value,
.tab-state-pill[data-state="active"] .state-value,
.tab-state-pill[data-state="ok"] .state-value {
  color: var(--ok);
}

.tab-state-pill[data-state="pressured"] .state-value,
.tab-state-pill[data-state="attention"] .state-value,
.tab-state-pill[data-state="partial"] .state-value,
.tab-state-pill[data-state="loading"] .state-value {
  color: var(--warn);
}

.tab-state-pill[data-state="degraded"] .state-value,
.tab-state-pill[data-state="error"] .state-value,
.tab-state-pill[data-state="unavailable"] .state-value {
  color: var(--fail);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.tabs a,
.linkish,
button.linkish {
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.tabs a {
  font-size: var(--size-m);
  color: var(--muted);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}

.tabs a:hover {
  color: var(--ink);
}

.linkish,
button.linkish {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.linkish:hover,
button.linkish:hover {
  color: var(--ink);
}

.tab-icon {
  display: inline-block;
  margin-right: 6px;
  opacity: 0.85;
}

.tabs a.active {
  color: var(--ink);
  font-weight: 500;
  border-bottom-color: var(--ink);
}

.tabs .tab-right {
  margin-left: auto;
}

/* Subsequent tab-right items shouldn't also push to the right —
 * otherwise each one consumes its own slack and the visual result is a
 * gap between Setup and Settings. Reset margin-left so siblings of the
 * first tab-right sit immediately next to it with only the standard
 * .tabs `gap` between them.
 */
.tabs .tab-right + .tab-right {
  margin-left: 0;
}

/* When the first right-group item is hidden (for example Setup after
 * onboarding completes), let the next visible right-group item reclaim
 * the auto margin so Settings still hugs the right edge.
 */
.tabs .tab-right[hidden] + .tab-right {
  margin-left: auto;
}

.panel {
  display: none;
}

.panel.active {
  display: block;
}

.block {
  margin-top: 36px;
}

.block:first-child {
  margin-top: 0;
}

.block-quiet {
  color: var(--muted);
  font-size: var(--size-s);
}

h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: var(--size-l);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
}

h3 {
  margin: 0 0 6px;
  font-size: var(--size-l);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.sub {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: var(--size-m);
  line-height: 1.5;
}

.lead {
  margin: 0 0 28px;
  color: var(--ink);
  font-size: var(--size-m);
  font-weight: 500;
  line-height: 1.5;
}

.counts-strip {
  margin: 12px 0 0;
  font-size: var(--size-m);
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 28px;
  font-variant-numeric: tabular-nums;
}

.counts-strip > span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.counts-strip .subtle {
  color: var(--muted);
  font-size: var(--size-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.counts-strip .counts-value {
  font-size: var(--size-l);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}


.memory-lane-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 22px;
}

.memory-submenu {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 40px 0 0;
  border: 1px solid var(--line);
  border-radius: 2px;
}

.memory-submenu + .block {
  margin-top: 24px;
}

.memory-submenu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 16px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--size-s);
  letter-spacing: 0.01em;
  cursor: pointer;
}

.memory-submenu-button:last-child {
  border-right: 0;
}

.memory-submenu-button:hover {
  color: var(--ink);
  background: var(--soft);
}

.memory-submenu-button.active {
  color: var(--ink);
  background: var(--soft);
  font-weight: 600;
}

.memory-authored-note {
  margin: 0 0 14px;
}

.memory-authored-kind-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.memory-authored-kind {
  display: inline-grid;
  gap: 2px;
  min-width: 118px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.memory-authored-kind-description-line {
  margin: -6px 0 14px;
  line-height: 1.4;
}

.memory-authored-kind:hover {
  color: var(--ink);
  border-color: var(--muted);
  background: var(--soft);
}

.memory-authored-kind.active {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--soft);
}

.memory-authored-kind-label {
  font-size: var(--size-s);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.memory-authored-kind-meta {
  font-size: var(--size-xs);
  color: var(--subtle);
}

.memory-authored-editor-block {
  display: grid;
  gap: 18px;
}

.memory-authored-editor-header {
  display: grid;
  gap: 4px;
}

.memory-authored-editor-block h4,
.authored-context-versions h4 {
  margin: 0;
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.authored-context-body {
  max-height: 320px;
  margin-top: 10px;
  overflow: auto;
}

.memory-authored-status-note {
  margin: 0;
}

.memory-authored-editor textarea {
  min-height: 320px;
  resize: vertical;
}

.memory-authored-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.memory-authored-restore-select {
  width: auto;
  padding: 4px 10px;
  background: var(--input-bg);
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.memory-authored-restore-select:hover:not([disabled]) {
  background: var(--soft);
  border-color: var(--muted);
}

.memory-authored-restore-select[disabled] {
  cursor: default;
}

.memory-authored-collapsible {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.memory-authored-collapsible > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 0;
  list-style: none;
}

.memory-authored-collapsible > summary::-webkit-details-marker {
  display: none;
}

.memory-authored-collapsible > summary::before {
  content: "▸ ";
  color: var(--subtle);
}

.memory-authored-collapsible[open] > summary::before {
  content: "▾ ";
}

.memory-authored-collapsible[open] > summary {
  color: var(--ink);
  margin-bottom: 8px;
}

.memory-authored-collapsible > * + * {
  margin-top: 8px;
}

.memory-authored-version-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quiet-empty-line {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--size-s);
}

.inline-summary {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: var(--size-s);
}

.inline-summary .state-text {
  font-weight: 500;
}

.form-new {
  display: inline-block;
  margin: 8px 0 12px;
  font-size: var(--size-s);
}

.form-list {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

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

.form-row:first-child {
  border-top: 1px solid var(--line-soft);
}

.form-row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  min-width: 0;
}

.form-row-id {
  font-weight: 600;
  color: var(--ink);
}

.form-row-warn {
  color: var(--warn);
}

.form-card {
  display: grid;
  gap: 12px;
  margin: 10px 0 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--bg);
}

.form-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}

.form-card-header h4 {
  margin: 0;
  font-size: var(--size-m);
  font-weight: 600;
}

.form-duplicate {
  max-width: 320px;
}

.route-skill-bindings {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.route-skill-bindings-header {
  display: grid;
  gap: 2px;
}

.route-skill-bindings h4 {
  margin: 0;
  font-size: var(--size-m);
  font-weight: 600;
}

.route-skill-list {
  display: grid;
}

.route-skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid var(--line-soft);
}

.route-skill-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
}

.route-skill-state {
  color: var(--muted);
  font-size: var(--size-xs);
  white-space: nowrap;
}

.route-skill-row .button {
  min-width: 76px;
  white-space: nowrap;
}

.route-skill-bindings-header .subtle {
  margin: 0;
}

.cognition-wizard-source-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cognition-wizard-source-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border: 1px solid currentColor;
  font-size: var(--size-xs);
  color: var(--muted);
}

.cognition-wizard-source-badge.tone-ok {
  color: var(--ok);
}

.cognition-wizard-source-badge.tone-warn {
  color: var(--warn);
}

.cognition-wizard-source-badge.tone-fail {
  color: var(--fail);
}


.skill-profile-skill-list {
  display: grid;
  border-top: 1px solid var(--line-soft);
}

.skill-profile-skill-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}

.skill-profile-skill-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
}

.skill-profile-skill-state {
  color: var(--muted);
  font-size: var(--size-xs);
  white-space: nowrap;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.button-primary:hover {
  background: color-mix(in srgb, var(--ink) 88%, white);
  border-color: var(--ink);
}

.button-danger {
  color: var(--fail);
  border-color: var(--line);
}

.button-danger:hover {
  background: color-mix(in srgb, var(--fail) 6%, var(--bg));
  border-color: var(--fail);
}

.cognition-agents {
  display: grid;
  gap: 14px;
}

.cognition-agents-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 16px;
}

.cognition-agents-filter {
  display: grid;
  gap: 4px;
  flex: 1 1 280px;
  max-width: 420px;
}

.cognition-agents-list {
  display: grid;
  gap: 12px;
}

.cognition-agent-card {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--bg);
}

.cognition-agent-card[hidden] {
  display: none;
}

.cognition-agent-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 12px 16px;
}

.cognition-agent-title {
  display: flex;
  gap: 10px;
  min-width: 0;
}

.cognition-agent-dot {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border: 1px solid var(--line);
  background: var(--soft);
  flex: 0 0 auto;
}

.cognition-agent-dot[data-state="ok"] {
  background: var(--ok);
  border-color: var(--ok);
}

.cognition-agent-dot[data-state="attention"],
.cognition-agent-dot[data-state="partial"] {
  background: var(--warn);
  border-color: var(--warn);
}

.cognition-agent-dot[data-state="error"] {
  background: var(--fail);
  border-color: var(--fail);
}

.cognition-agent-heading {
  min-width: 0;
}

.cognition-agent-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.cognition-agent-subtitle,
.cognition-agent-description,
.cognition-agent-meta p {
  margin: 0;
}

.cognition-agent-subtitle,
.cognition-agent-description,
.cognition-agent-meta {
  color: var(--muted);
  font-size: var(--size-s);
}

.cognition-agent-meta {
  display: grid;
  gap: 6px;
}

.cognition-agent-meta .subtle {
  margin-right: 6px;
}

.cognition-agent-status {
  flex: 0 0 auto;
}

.cognition-agent-status .state-value {
  font-size: var(--size-s);
  font-weight: 600;
  line-height: 1.2;
}

.cognition-agent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cognition-bound-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cognition-advanced {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.cognition-advanced > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 0;
  list-style: none;
}

.cognition-advanced > summary::-webkit-details-marker {
  display: none;
}

.cognition-advanced > summary::before {
  content: "▸ ";
  color: var(--subtle);
}

.cognition-advanced[open] > summary::before {
  content: "▾ ";
}

.cognition-advanced[open] > summary {
  color: var(--ink);
  margin-bottom: 12px;
}

.cognition-advanced > .block + .block {
  margin-top: 28px;
}

.cognition-wizard {
  display: grid;
  gap: 14px;
}

.cognition-wizard-banner {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.cognition-wizard-stepper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.cognition-wizard-step {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--bg);
}

.cognition-wizard-step[data-state="active"] {
  border-color: var(--blue);
}

.cognition-wizard-step[data-state="complete"] {
  background: var(--soft);
}

.cognition-wizard-step-index {
  font-family: var(--mono);
  font-size: var(--size-xs);
  color: var(--muted);
}

.cognition-wizard-step-label {
  font-size: var(--size-s);
  font-weight: 600;
}

.cognition-wizard-step-body {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--bg);
}

.cognition-wizard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cognition-wizard-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 720px) {
  .cognition-agents-toolbar {
    align-items: stretch;
  }

  .cognition-agents-filter {
    max-width: none;
  }

  .cognition-agent-status {
    width: fit-content;
  }

  .cognition-wizard-actions {
    justify-content: stretch;
  }

  .cognition-wizard-actions .button {
    flex: 1 1 160px;
  }
}

.memory-action-section {
  margin: 22px 0 0;
}

.memory-action-section h3 {
  margin: 0 0 6px;
  font-size: var(--size-m);
  font-weight: 600;
  color: var(--ink);
}

.memory-action-list {
  display: grid;
  gap: 4px;
}

.memory-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 8px 0 8px 12px;
  border-top: 1px solid var(--line-soft);
  position: relative;
}

.memory-action-row:first-child {
  border-top: 0;
}

.memory-action-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--muted);
}

.memory-action-row[data-tone="warn"]::before {
  background: var(--warn);
}

.memory-action-row[data-tone="fail"]::before {
  background: var(--fail);
}

.memory-action-row[data-tone="fail"] .memory-action-title {
  color: var(--fail);
}

.memory-action-row[data-tone="warn"] .memory-action-title {
  color: var(--warn);
}

.memory-action-title {
  font-size: var(--size-m);
  font-weight: 500;
  color: var(--ink);
}

.memory-action-detail {
  color: var(--ink);
  font-size: var(--size-s);
  line-height: 1.4;
}

.memory-action-meta {
  color: var(--muted);
  font-size: var(--size-xs);
  margin-top: 2px;
}

.memory-action-overflow > summary {
  cursor: pointer;
  color: var(--blue);
  font-size: 12px;
  padding: 6px 0;
}

.memory-action-overflow[open] > summary::after {
  content: "";
}

.memory-lane {
  display: grid;
  gap: 8px;
}

.memory-lane-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: var(--size-l);
  font-weight: 600;
}

.memory-lane-state {
  font-weight: 400;
  font-size: var(--size-s);
  white-space: nowrap;
}

.memory-lane-summary {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: var(--size-s);
  line-height: 1.4;
}

.memory-lane-stack {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.memory-lane-stack h4 {
  margin: 0;
  font-size: var(--size-xs);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.memory-lane table {
  font-size: var(--size-s);
}

.memory-lane thead th,
.memory-lane tbody td {
  padding: 6px 6px;
}

.memory-lane-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(128px, 0.42fr);
  gap: 8px;
  align-items: end;
  margin-top: 4px;
}

.memory-lane-filters label {
  display: grid;
  gap: 4px;
}

.memory-lane-filters span {
  color: var(--muted);
  font-size: var(--size-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.memory-lane-filters input,
.memory-lane-filters select {
  width: 100%;
  min-height: 30px;
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--size-s);
  padding: 5px 7px;
}

.memory-ref {
  display: inline-block;
  font-size: 11px;
  word-break: break-all;
  white-space: normal;
  user-select: all;
  -webkit-user-select: all;
  cursor: text;
}

.memory-ref-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
}

.memory-counter-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px 16px;
  margin: 4px 0 0;
}

.memory-counter-header {
  margin: 0 0 10px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}

.memory-counter-footnote {
  margin: 10px 0 0;
  line-height: 1.4;
}

.memory-counter-tile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}

.memory-counter-tile-label {
  color: var(--muted);
  font-size: var(--size-xs);
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.memory-counter-tile-value {
  font-size: var(--size-s);
  font-weight: 500;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.memory-filter-empty {
  padding-top: 2px;
}

[data-memory-row].is-hidden,
.memory-filter-empty.is-hidden {
  display: none;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-s);
}

thead th {
  text-align: left;
  font-size: var(--size-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  vertical-align: bottom;
}

tbody td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

tbody tr:hover {
  background: var(--soft);
}

tr.row-warn td:first-child {
  box-shadow: inset 2px 0 0 var(--warn);
}

tr.row-fail td:first-child {
  box-shadow: inset 2px 0 0 var(--fail);
}

details.failure-row > summary {
  cursor: pointer;
  list-style: revert;
  font-size: var(--size-s);
}

details.failure-row[open] > summary {
  margin-bottom: 6px;
}

pre.failure-fields {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--size-xs);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  margin: 0;
  padding: 6px 8px;
  background: var(--soft);
  border-left: 2px solid var(--line);
}

.conversation-policy-control {
  display: grid;
  gap: 4px;
  min-width: 170px;
}

.conversation-policy-selector-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.conversation-policy-control select {
  min-width: 150px;
}

.conversation-policy-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--fail);
  color: var(--fail);
  font-size: var(--size-xs);
  font-weight: 700;
  line-height: 1;
  cursor: help;
}

.conversation-policy-warning {
  color: var(--muted);
  font-size: var(--size-xs);
  line-height: 1.25;
}

.conversation-policy-runtime {
  font-size: var(--size-xs);
  line-height: 1.25;
}

.conversation-upload-stack {
  display: grid;
  gap: 6px;
}

.conversation-upload-detail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.conversation-upload-drawer {
  gap: 10px;
}

.startup-readiness-summary {
  display: grid;
  gap: 10px;
}

.startup-readiness-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.startup-readiness-meta .memory-counter-header,
.startup-readiness-note {
  margin: 0;
}

.startup-readiness-group {
  display: grid;
  gap: 6px;
}

.startup-readiness-group h4 {
  margin: 0;
  font-size: var(--size-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.startup-readiness-table td:nth-child(2),
.startup-readiness-table td:nth-child(4) {
  white-space: nowrap;
}

.startup-readiness-detail {
  color: var(--muted);
  white-space: normal;
  word-break: break-word;
}

.conversation-upload-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 7px;
  border: 1px solid var(--line-soft);
  background: var(--soft);
}

.conversation-upload-meta {
  color: var(--muted);
  font-size: var(--size-xs);
  line-height: 1.25;
}

.button-small {
  padding: 4px 8px;
  font-size: var(--size-xs);
}

.route-permission-profile-control {
  gap: 6px;
}

.route-permission-profile-notice {
  margin: 0;
}

.route-permission-profile-notice p {
  margin: 0;
}

.route-permission-profile-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.state-text {
  font-weight: 500;
  white-space: nowrap;
}

.state-ok {
  color: var(--ok);
}

.state-warn {
  color: var(--warn);
}

.state-fail {
  color: var(--fail);
}

.mono {
  font-family: var(--mono);
  font-size: var(--size-s);
}

.trace-ref {
  white-space: normal;
  word-break: break-word;
}

.memory-payload {
  margin: 6px 0 0;
  padding: 8px;
  border: 1px solid var(--line-soft);
  background: var(--soft);
  white-space: pre-wrap;
  word-break: break-word;
}

.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
}

.bar-track {
  width: 140px;
  height: 10px;
  background: var(--soft-2);
  border: 1px solid var(--line);
  position: relative;
  flex: 0 0 auto;
}

.bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--blue);
}

.bar-value {
  white-space: nowrap;
  font-size: 13px;
}

.empty-state,
.notice {
  padding: 8px 0 0;
  color: var(--muted);
  font-size: var(--size-s);
}

.notice {
  color: var(--muted);
}

/* Inline empty pattern: heading and "— none" share a row, muted. */
.quiet-empty {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--muted);
  font-size: var(--size-s);
}

.quiet-empty h4 {
  margin: 0;
  font-size: var(--size-xs);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.quiet-empty .quiet-empty-detail {
  color: var(--muted);
}

.notice-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.notice-list li {
  padding: 3px 0;
}

.notice-warn {
  color: var(--warn);
}

.notice-fail {
  color: var(--fail);
}

.button {
  display: inline-block;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 4px 10px;
  font: inherit;
  font-size: var(--size-s);
  cursor: pointer;
  text-decoration: none;
}

.button:hover {
  background: var(--soft);
  border-color: var(--muted);
}

.button[disabled] {
  color: var(--subtle);
  border-color: var(--line-soft);
  background: var(--bg);
  cursor: default;
}

input,
select,
textarea {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--size-s);
  padding: 6px 8px;
}

input[disabled],
select[disabled],
textarea[disabled] {
  background: var(--input-bg);
  color: var(--subtle);
  cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  max-width: none;
  margin: 0 6px 0 0;
  padding: 0;
  vertical-align: middle;
  background: transparent;
  border: 1px solid var(--line);
}

input[type="checkbox"][disabled],
input[type="radio"][disabled] {
  background: transparent;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--ink);
}

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

.small,
.muted,
.subtle {
  color: var(--muted);
}

.small,
.subtle {
  font-size: var(--size-s);
}

.preview-text {
  max-width: 420px;
  white-space: normal;
  word-break: break-word;
}

.nowrap {
  white-space: nowrap;
}

.telegram-setup {
  display: grid;
  gap: 14px;
}

.telegram-setup-disclosure {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.telegram-setup-disclosure summary {
  display: grid;
  gap: 4px;
  cursor: pointer;
  list-style: none;
}

.telegram-setup-disclosure summary::-webkit-details-marker {
  display: none;
}

.telegram-setup-disclosure[open] summary {
  margin-bottom: 12px;
}

.telegram-setup-summary-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.telegram-setup-toggle-link {
  font-weight: 600;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.telegram-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eaf4ff;
  color: #1682d4;
  flex: 0 0 28px;
}

.telegram-icon svg {
  width: 16px;
  height: 16px;
}

/* Slack uses its own multi-colour pinwheel mark; the rounded blue bg the
 * Telegram icon uses clashes with the brand colours, so render it on a
 * plain transparent disc instead. */
.slack-icon {
  background: transparent;
}

.slack-icon svg {
  width: 22px;
  height: 22px;
}

.telegram-setup-form {
  display: grid;
  gap: 12px;
}

.telegram-setup {
  display: grid;
  gap: 14px;
}

.telegram-setup-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.telegram-setup-meta-card,
.telegram-setup-panel {
  border: 1px solid var(--line);
  background: #fff;
}

.telegram-setup-meta-card {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
}

.telegram-setup-meta-label,
.telegram-setup-meta-note {
  color: var(--muted);
}

.telegram-setup-meta-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.telegram-setup-meta-value {
  font-size: 16px;
  line-height: 1.2;
}

.telegram-setup-meta-note {
  font-size: 12px;
  line-height: 1.35;
}

.telegram-setup-editor,
.telegram-setup-sidecars,
.telegram-setup-context-grid,
.telegram-setup-context-stack {
  gap: 14px;
}

.telegram-setup-editor {
  display: grid;
}

.telegram-setup-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Lifted out of the disclosure: pending/approved/seen contexts stack
 * full-width below the bridge-settings details so they stay visible at
 * section level. Each section is itself a collapsible <details>; the
 * stack uses the same minimal border-top/border-bottom pattern as the
 * Workflows tab card list rather than a nested box per section. */
.telegram-setup-context-stack {
  display: block;
  margin-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.telegram-setup-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.telegram-setup-panel-accent {
  background: #fbfdff;
}

.telegram-setup-panel-header {
  display: grid;
  gap: 4px;
}

.telegram-setup-panel-header h4 {
  margin: 0;
  font-size: 15px;
}

.telegram-activation-form {
  display: grid;
  gap: 12px;
}

.telegram-setup-instructions,
.telegram-setup-identities {
  display: grid;
  gap: 8px;
}

.telegram-setup-guide {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--soft);
}

.telegram-setup-guide-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.telegram-setup-guide-row strong {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Single state-aware instruction line replacing the older four-row guide
 * for the Connections tab Slack/Telegram setup blocks. Kept inline + quiet
 * so it doesn't waste vertical real estate. */
.telegram-setup-guide-line {
  margin: 0;
  color: var(--muted);
  font-size: var(--size-s);
  line-height: 1.4;
}

/* Operator-names alias tables: contact identity occupies the left side,
 * name input and action buttons hug the right so each row reads as
 * "[who]                  [name field]  [Save] [Clear]". */
.channel-aliases td:nth-child(2),
.channel-aliases td:nth-child(3),
.channel-aliases th:nth-child(2),
.channel-aliases th:nth-child(3) {
  text-align: right;
  white-space: nowrap;
}

.channel-aliases td:nth-child(2) input[type="text"] {
  width: 200px;
  text-align: left;
}

.channel-aliases td:nth-child(3) {
  width: 1%;
}

.channel-aliases td:nth-child(3) button + button {
  margin-left: 6px;
}

.telegram-setup-field {
  display: grid;
  gap: 6px;
}

.telegram-setup-inline-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.telegram-setup-inline-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.telegram-setup-toggle {
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  gap: 8px;
}

.telegram-setup-toggle input {
  width: auto;
}

.telegram-setup-actions {
  display: grid;
  gap: 6px;
  justify-items: start;
}

/* Mirrors the Workflows tab card pattern: no nested box, just one
 * border-bottom per row in the stack, chevron + heading inline at
 * baseline, indented body. */
.telegram-context-section {
  display: block;
  border-bottom: 1px solid var(--line-soft);
}

.telegram-context-section[open] > .telegram-context-section-header::before {
  transform: rotate(90deg);
}

.telegram-context-section-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.telegram-context-section-header::-webkit-details-marker {
  display: none;
}

.telegram-context-section-header::before {
  content: "▸";
  display: inline-block;
  width: 12px;
  flex: 0 0 12px;
  color: var(--subtle);
  font-size: 12px;
  transition: transform 80ms ease-out;
}

.telegram-context-section-header .stacked {
  flex: 1 1 auto;
  min-width: 0;
}

.telegram-context-section > .telegram-context-list,
.telegram-context-section > .notice {
  padding: 4px 0 12px 22px;
}

.telegram-context-section-header h4 {
  margin: 0;
  font-size: 15px;
}

.telegram-context-count {
  min-width: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.telegram-context-list {
  display: grid;
  gap: 10px;
}

.telegram-context-row {
  display: grid;
  gap: 5px;
  padding: 10px 11px;
  border: 1px solid var(--line-soft);
  background: var(--soft);
}

.telegram-context-row-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 10px;
}

.telegram-context-kind {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.telegram-context-key,
.telegram-context-ids,
.telegram-context-row-foot {
  font-size: 12px;
  line-height: 1.4;
}

.telegram-context-key {
  color: var(--muted);
  font-family: var(--mono);
  word-break: break-all;
}

.telegram-context-ids,
.telegram-context-row-foot {
  color: var(--muted);
}

.telegram-context-row-foot {
  display: grid;
  gap: 2px;
}

.telegram-denied-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.telegram-denied-card {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid var(--line-soft);
  background: var(--soft);
}

.stacked {
  display: grid;
  gap: 2px;
}

.conversations-table .conversation-title-cell {
  padding: 0;
}

.conversation-title-button {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  padding: 8px 8px;
  margin: 0;
  border: none;
  background: transparent;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.conversation-title-button:hover,
.conversation-title-button:focus-visible {
  background: var(--soft);
  outline: none;
}

.conversation-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 0 4px;
}

.conversation-title-text {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.conversation-detail-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  color: var(--subtle);
  font-size: var(--size-xs);
  line-height: 1;
}

.conversation-title-button:hover .conversation-detail-marker,
.conversation-title-button:focus-visible .conversation-detail-marker,
.conversation-title-button[aria-expanded="true"] .conversation-detail-marker {
  color: var(--ink);
}

.conversations-table tbody td {
  border-bottom: 0;
}

.conversations-table tbody tr[data-row-parity="even"] > td {
  background: rgba(0, 0, 0, 0.025);
}

.conversations-table tbody tr.conversation-row[data-row-parity="even"]:hover > td,
.conversations-table tbody tr.conversation-row[data-row-parity="odd"]:hover > td {
  background: var(--soft);
}

.conversations-table tbody tr.conversation-detail-row:hover > td {
  background: inherit;
}

.conversations-table tr.row-selected {
  outline: none;
}

.conversation-detail-row > td {
  padding: 4px 8px 14px 8px;
}

.conversation-detail-drawer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 12px;
  margin-left: 1.5rem;
  border-left: 2px solid var(--line);
}

.conversation-detail-grid {
  display: grid;
  grid-template-columns:
    max-content minmax(0, 1fr)
    max-content minmax(0, 1fr)
    max-content minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  align-items: baseline;
}

@media (max-width: 1200px) {
  .conversation-detail-grid {
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
  }
}

@media (max-width: 800px) {
  .conversation-detail-grid {
    grid-template-columns: max-content minmax(0, 1fr);
  }
}

.conversation-detail-pair {
  display: contents;
}

.conversation-detail-label {
  color: var(--muted);
  font-size: var(--size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.conversation-detail-value {
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--size-xs);
  overflow-wrap: anywhere;
  user-select: all;
}

.conversation-detail-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.conversation-preview[data-conversation-preview] {
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: none;
}

.conversation-preview[data-conversation-preview].is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}

.conversation-preview[data-conversation-preview]:hover,
.conversation-preview[data-conversation-preview]:focus-visible {
  border-color: var(--line);
}

.conversation-preview {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  background: var(--soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

@media (max-width: 1024px) {
  .two-col {
    grid-template-columns: 1fr;
  }

  .route-skill-row,
  .skill-profile-skill-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .route-skill-row .button {
    justify-self: start;
  }

  .memory-lane-grid {
    grid-template-columns: 1fr;
  }

  .memory-triage-grid {
    grid-template-columns: 1fr;
  }

  .telegram-setup-meta,
  .telegram-setup-context-grid,
  .telegram-denied-grid,
  .telegram-setup-guide-row,
  .telegram-setup-inline-fields,
  .telegram-setup-inline-action {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .page {
    padding: 16px 14px 40px;
  }

  .top {
    display: block;
  }

  .top-meta {
    justify-content: flex-start;
    margin-top: 10px;
  }

  .gateway-reload-header {
    justify-items: start;
  }

  .gateway-reload-actions {
    justify-content: flex-start;
  }

  .dashboard-refresh-controls {
    justify-content: flex-start;
  }

  .refresh-stack {
    align-items: flex-start;
  }

  h1 {
    font-size: 24px;
  }

  .bar {
    min-width: 160px;
  }

  .bar-track {
    width: 110px;
  }

  .memory-action-row,
  .memory-lane-filters,
  .memory-freshness-cell {
    grid-template-columns: 1fr;
  }

  .memory-freshness-cell strong,
  .memory-freshness-cell small {
    grid-column: 1;
    text-align: left;
  }
}

[data-dashboard-action="workflow-detail"] {
  cursor: pointer;
}

[data-dashboard-action="workflow-detail"]:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

tr.row-selected {
  outline: 1px solid currentColor;
}

.workflows-detail-drawer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.workflows-detail-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workflows-respond-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid currentColor;
}

.workflows-respond-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.workflows-respond-modal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid currentColor;
  background-color: rgba(0, 0, 0, 0.02);
}

.workflows-respond-modal label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.workflows-respond-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.agent-provider-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

.agent-provider-card {
  border: 1px solid var(--line);
  background: var(--soft);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.agent-provider-card.row-warn {
  border-left: 3px solid var(--warn);
}

.agent-provider-card.row-fail {
  border-left: 3px solid var(--fail);
}

.agent-provider-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.agent-provider-head h4 {
  margin: 0;
  font-size: var(--size-m);
  font-weight: 600;
}

.agent-provider-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.agent-provider-badge {
  font-size: var(--size-xs);
  padding: 1px 6px;
  border: 1px solid currentColor;
  color: var(--muted);
}

.agent-provider-experimental {
  color: var(--warn);
}

.agent-provider-install-state {
  font-size: var(--size-xs);
  color: var(--muted);
}

.agent-provider-install-found {
  color: var(--ok);
}

.agent-provider-install-missing {
  color: var(--warn);
}

.agent-provider-install-error {
  color: var(--fail);
}

.agent-provider-meta {
  margin: 0;
  font-size: var(--size-xs);
  color: var(--muted);
}

.agent-provider-policy {
  margin: 0;
  font-size: var(--size-xs);
  color: var(--warn);
}

.agent-provider-guidance {
  margin: 0;
  font-size: var(--size-xs);
}

.agent-provider-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.agent-provider-connection-state {
  font-size: var(--size-xs);
  padding: 1px 6px;
  border: 1px solid currentColor;
  color: var(--muted);
}

.agent-provider-connection-disconnected {
  color: var(--muted);
}

.agent-provider-connection-login_pending {
  color: var(--warn);
}

.agent-provider-connection-connected {
  color: var(--ok);
}

.agent-provider-connection-experimental {
  color: var(--warn);
}

.agent-provider-connection-policy_warning {
  color: var(--fail);
}

.agent-provider-login-prompt {
  margin: 0;
  font-size: var(--size-xs);
  color: var(--ink);
}

.agent-provider-login-prompt .mono {
  user-select: all;
}

.agent-provider-flash {
  margin: 0;
  font-size: var(--size-xs);
}

.agent-provider-flash.tone-ok {
  color: var(--ok);
}

.agent-provider-flash.tone-warn {
  color: var(--warn);
}

.agent-provider-flash.tone-fail {
  color: var(--fail);
}

.agent-provider-experimental-banner {
  border: 1px solid var(--warn);
  background: rgba(0, 0, 0, 0.02);
  padding: 8px 10px;
  font-size: var(--size-xs);
  color: var(--ink);
}

.agent-provider-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.agent-provider-modal {
  background: var(--soft);
  border: 1px solid var(--line);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
  width: 100%;
}

.agent-provider-modal h4 {
  margin: 0;
  font-size: var(--size-m);
}

.agent-provider-modal-body {
  margin: 0;
  font-size: var(--size-xs);
  color: var(--ink);
}

.agent-provider-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.agent-provider-mode-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-top: 4px;
}

.agent-provider-mode-tab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 4px 10px;
  font-size: var(--size-xs);
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
}

.agent-provider-mode-tab.active {
  background: var(--soft);
  border-color: var(--line);
  color: var(--ink);
  margin-bottom: -1px;
}

.agent-provider-mode-tab:hover:not(.active) {
  color: var(--ink);
}

.agent-provider-api-key-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0;
}

.agent-provider-form-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--size-xs);
}

.agent-provider-form-row input {
  padding: 4px 6px;
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--size-s);
}

.settings-api-keys {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.settings-api-keys-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.settings-api-keys-row > .settings-api-keys-label:first-child {
  grid-column: 1 / -1;
  max-width: 280px;
}

.settings-api-keys-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--size-xs);
}

.settings-api-keys-label select,
.settings-api-keys-label input {
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--size-s);
}

.settings-api-keys-secret {
  min-width: 0;
}

.settings-api-keys-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  min-width: 0;
  align-items: end;
}

.settings-api-keys-inline-actions {
  align-self: end;
}

.settings-api-keys-field-note {
  grid-column: 1 / -1;
}

.settings-api-keys-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.settings-api-keys-hint,
.settings-api-keys-flash {
  margin: 0;
}

.settings-api-keys-connected {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-api-keys-title {
  margin: 0;
  font-size: var(--size-m);
}

.settings-api-keys-table th,
.settings-api-keys-table td {
  vertical-align: top;
}

.settings-api-key-status {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border: 1px solid currentColor;
  font-size: var(--size-xs);
  color: var(--muted);
}

.settings-api-key-status-saved {
  color: var(--muted);
}

.settings-api-key-status-verified {
  color: var(--ok);
}

.settings-api-key-status-error {
  color: var(--fail);
}

.settings-api-keys-error {
  margin-top: 4px;
  color: var(--fail);
}

.settings-api-keys-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.settings-api-keys-pending {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .settings-api-keys-row {
    grid-template-columns: 1fr;
  }

  .settings-api-keys-fields {
    grid-template-columns: 1fr;
  }
}

.settings-skills-plan {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  padding: 10px;
}

.settings-skills-install {
  margin-bottom: 12px;
}

.settings-skills-install-row {
  display: grid;
  grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.settings-skills-install-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--size-xs);
}

.settings-skills-install-label select,
.settings-skills-install-label input {
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--size-s);
}

.settings-skills-install-source {
  min-width: 0;
}

.settings-skills-install-source input {
  width: 100%;
}

.settings-skills-install-review {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0 0;
  font-size: var(--size-s);
  color: var(--muted);
  cursor: pointer;
}

.settings-skills-install-flash {
  margin: 6px 0 0 0;
  min-height: 1em;
}

.settings-skills-attach-block {
  margin-top: 10px;
}

.settings-skills-attach-heading {
  margin-bottom: 6px;
}

.settings-skills-attach {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-skills-attach-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-skills-attach-option,
.settings-skills-attach-profile {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--size-s);
  color: var(--ink);
  cursor: pointer;
}

.settings-skills-attach-option-copy,
.settings-skills-attach-profile-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.settings-skills-attach-profiles {
  margin-left: 24px;
  padding-left: 10px;
  border-left: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-skills-attach-profile-routes {
  font-size: var(--size-xs);
}

.settings-skills-block {
  margin: 10px 0;
}

.settings-skills-search-results,
.settings-skills-plan-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-skills-block-title {
  margin: 0 0 6px 0;
  font-size: var(--size-m);
}

.settings-skills-search-table,
.settings-skills-sources,
.settings-skills-installed {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-s);
}

.settings-skills-search-table th,
.settings-skills-search-table td,
.settings-skills-sources th,
.settings-skills-sources td,
.settings-skills-installed th,
.settings-skills-installed td {
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.settings-skills-name {
  font-weight: 600;
}

.settings-skills-version {
  margin-top: 2px;
}

.settings-skills-id {
  font-family: ui-monospace, monospace;
}

.settings-skills-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.settings-skills-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border: 1px solid currentColor;
  font-size: var(--size-xs);
  color: var(--muted);
}

.settings-skills-badge.tone-ok {
  color: var(--ok);
}

.settings-skills-badge.tone-warn {
  color: var(--warn);
}

.settings-skills-badge.tone-fail {
  color: var(--fail);
}

.settings-skills-risk-label {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--line);
  margin-right: 4px;
  font-size: var(--size-xs);
}

.settings-skills-compat-badge {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--muted);
  font-size: var(--size-xs);
  margin-top: 4px;
}

.settings-skills-provenance {
  font-size: var(--size-xs);
}

.settings-skills-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(76px, 1fr));
  gap: 6px;
  min-width: 172px;
}

.settings-skills-actions .button {
  width: 100%;
  white-space: nowrap;
}

.settings-skills-command {
  margin: 0;
  padding: 6px 8px;
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  background: var(--soft);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--size-xs);
  line-height: 1.45;
  white-space: pre-wrap;
}

.settings-skills-command code {
  font: inherit;
}

.settings-skills-plan-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.settings-skills-plan h5 {
  margin: 0;
  font-size: var(--size-s);
}

.settings-skills-plan-approval {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--size-s);
}

.settings-skills-plan-errors {
  margin: 8px 0;
}

.settings-skills-plan-error-detail {
  padding: 8px 10px;
  border: 1px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 7%, var(--bg));
}

.settings-skills-plan-error-detail p {
  margin: 6px 0 0;
}

.settings-skills-plan-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

@media (max-width: 760px) {
  .settings-skills-install-row {
    grid-template-columns: 1fr;
  }

  .settings-skills-actions {
    grid-template-columns: 1fr;
    min-width: 0;
  }
}

/* Workflow cards (Workflows tab) — minimal: dividers, no boxes */

.workflow-card-list {
  display: block;
  border-top: 1px solid var(--line-soft);
}

.workflow-card {
  border-bottom: 1px solid var(--line-soft);
}

.workflow-card-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--size-m);
}

.workflow-card-summary::-webkit-details-marker {
  display: none;
}

.workflow-card-summary::before {
  content: "▸";
  display: inline-block;
  width: 12px;
  color: var(--subtle);
  font-size: 12px;
  transition: transform 80ms ease-out;
}

.workflow-card[open] > .workflow-card-summary::before {
  transform: rotate(90deg);
}

.workflow-card-id {
  font-family: var(--mono);
  font-size: var(--size-s);
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}

.workflow-card-summary-hint {
  font-size: var(--size-s);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.workflow-card-active-pill {
  font-size: var(--size-xs);
  color: var(--ok);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.workflow-card-body {
  padding: 4px 0 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.workflow-card-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 2px;
  margin: 0;
}

.workflow-card-meta dt {
  color: var(--subtle);
  font-size: var(--size-s);
}

.workflow-card-meta dd {
  margin: 0;
  font-size: var(--size-s);
  word-break: break-word;
}

.workflow-card-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.workflow-card-section-label {
  margin: 0;
  font-size: var(--size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--subtle);
  font-weight: 500;
}

.workflow-card-runs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.workflow-card-run-row {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  column-gap: 12px;
  align-items: baseline;
  padding: 4px 0;
  cursor: pointer;
  border-top: 1px dotted var(--line-soft);
}

.workflow-card-runs > li:first-child {
  border-top: none;
}

.workflow-card-run-row-selected {
  background: color-mix(in srgb, var(--accent) 5%, var(--bg));
}

.workflow-card-run-id {
  font-family: var(--mono);
  font-size: var(--size-s);
}

.workflow-card-audit-log {
  padding-top: 8px;
  border-top: 1px dotted var(--line-soft);
}

.workflow-card-studio[data-workflow-studio-form] {
  /* No box, no border. Heading + native form controls. */
  padding: 0;
  background: transparent;
}

.workflow-card-group {
  margin-top: 10px;
}

.workflow-card-group > summary {
  padding: 6px 0;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
  list-style: none;
  font-size: var(--size-s);
  color: var(--subtle);
}

.workflow-card-group > summary::-webkit-details-marker {
  display: none;
}

.workflow-card-group > summary::before {
  content: "▸";
  display: inline-block;
  width: 12px;
  color: var(--subtle);
  font-size: 12px;
  transition: transform 80ms ease-out;
}

.workflow-card-group[open] > summary::before {
  transform: rotate(90deg);
}

.workflow-card-group-label {
  font-weight: 500;
}

.workflow-directory-selector {
  display: flex;
  gap: 16px;
  margin: 6px 0 12px;
  border-bottom: 1px solid var(--line-soft);
}

.workflow-directory-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 4px 0;
  margin-bottom: -1px;
  cursor: pointer;
  color: var(--subtle);
  font-size: var(--size-s);
  font-family: var(--font);
}

.workflow-directory-tab:hover {
  color: var(--text);
}

.workflow-directory-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

@media (max-width: 760px) {
  .workflow-card-summary {
    flex-wrap: wrap;
  }

  .workflow-card-summary-hint {
    flex: 1 1 100%;
    white-space: normal;
  }

  .workflow-card-meta {
    grid-template-columns: 1fr;
  }

  .workflow-card-meta dt {
    margin-top: 4px;
  }
}

.login-body {
  background: var(--bg);
  color: var(--ink);
}

.login-main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

.login-panel {
  width: 100%;
  max-width: 360px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 4px 28px;
}

.login-mark {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -1px;
  color: transparent;
  margin: 0 0 6px;
  position: relative;
  width: 100%;
  max-width: 360px;
  height: 1.4em;
  user-select: none;
  container-type: inline-size;
}

.login-mark::before {
  content: "v(--)v";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink);
  animation: login-mark-blink 7s steps(1, end) infinite;
}

/*
 * The migrating `login-mark-march` translateX keyframe only fires on the
 * login page itself. Onboarding pages render `<body class="login-body
 * onboarding-body">`, which suppresses the march animation so the mascot
 * can sit at the fixed milestone positions D36 introduces.
 */
body.login-body:not(.onboarding-body) .login-mark::before {
  animation:
    login-mark-blink 7s steps(1, end) infinite,
    login-mark-march 10s steps(12, jump-none) infinite alternate;
}

.login-mark--milestone-0::before {
  animation: login-mark-blink 7s steps(1, end) infinite;
  transform: translateX(0%);
  transition: transform 600ms ease-out;
}

.login-mark--milestone-1::before {
  animation: login-mark-blink 7s steps(1, end) infinite;
  transform: translateX(33%);
  transition: transform 600ms ease-out;
}

.login-mark--milestone-2::before {
  animation: login-mark-blink 7s steps(1, end) infinite;
  transform: translateX(66%);
  transition: transform 600ms ease-out;
}

.login-mark--milestone-3::before {
  animation: login-mark-blink 7s steps(1, end) infinite;
  transform: translateX(100%);
  transition: transform 600ms ease-out;
}

/*
 * Milestone-3 success snapshot: when the onboarding shell is about to
 * unmount, dashboard.js toggles `.login-mark--milestone-3-success`
 * for ~1.5s to flash `v(oo)v` in `var(--ok)` before the surface goes
 * away. The `prefers-reduced-motion` block below replaces this with
 * an instant snap.
 */
.login-mark--milestone-3-success::before {
  content: "v(oo)v";
  color: var(--ok);
}

@keyframes login-mark-blink {
  0%,
  72% {
    content: "v(--)v";
    color: var(--ink);
  }
  74%,
  77% {
    content: "v(..)v";
    color: var(--blue);
  }
  79%,
  86% {
    content: "v(--)v";
    color: var(--ink);
  }
  88%,
  92% {
    content: "v(oo)v";
    color: var(--ok);
  }
  94%,
  100% {
    content: "v(--)v";
    color: var(--ink);
  }
}

@keyframes login-mark-march {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(100cqw - 100%));
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-mark {
    color: var(--ink);
    width: max-content;
    height: auto;
  }

  .login-mark::before {
    animation: none;
    content: "v(--)v";
    color: var(--ink);
    position: static;
    transition: none;
    transform: none;
  }

  body.login-body:not(.onboarding-body) .login-mark::before {
    animation: none;
  }

  .login-mark--milestone-3-success::before {
    content: "v(oo)v";
    color: var(--ok);
  }
}

/*
 * Onboarding shell layout. Reuses the shared `.login-*` typography while
 * arranging the Setup Center card grid as a flat document.
 */
.onboarding-panel {
  width: 100%;
}

.onboarding-form .login-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.login-field-hint {
  color: var(--ink-muted, #5a6066);
  font-size: var(--size-sm, 13px);
}

/* RFC-0018 D38: workspace_root input renders a static `~/` prefix so the
 * operator only types the folder portion. The wrapper keeps the prefix
 * and the input visually attached by sharing a single border + baseline.
 */
.login-field-with-prefix {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  background: var(--bg);
}

.login-field-with-prefix .login-field-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  font-family: var(--mono);
  color: var(--muted, #888);
  background: transparent;
  border-right: 1px solid var(--line);
  user-select: none;
}

.login-field-with-prefix input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 6px 8px;
}

.login-field-with-prefix input:focus {
  outline: none;
}

.login-field-with-prefix:focus-within {
  outline: 1px solid var(--accent, #4a6cf7);
  outline-offset: -1px;
}

.onboarding-banner {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  margin: 12px 0;
}

.onboarding-banner-title {
  margin: 0;
  font-size: var(--size-md, 15px);
  font-weight: 600;
}

.onboarding-banner-text {
  margin: 4px 0 0;
  color: var(--ink-muted, #5a6066);
}

.setup-center-main {
  padding: 24px 4px;
}

.setup-center-header {
  margin-bottom: 16px;
}

.setup-center-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

/* RFC-0018 D38 wizard panel — one centered panel per step, in the same
 * `.login-main` shell the Create-First-Admin page uses. Override the narrow
 * `.login-panel` max-width because the model picker carries dropdowns plus a
 * memory-level fieldset that wouldn't fit in 360px.
 */
.setup-step-panel {
  max-width: 520px;
}

.setup-step-footer {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}

/* Mascot + step number row — sits above the panel and aligns with the
 * panel's horizontal extent. The row's flex justify-content shifts the
 * mascot pair left → center → right across the three onboarding steps;
 * the mascot itself is static (no transform / no transition) inside the
 * row, so each page load shows it pinned at a fixed position.
 */
.setup-mascot-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  max-width: 520px;
  margin: 0 0 14px 0;
}

.setup-mascot-row .login-mark {
  /* The base .login-mark hides the inner text via `color: transparent` and
   * paints a hardcoded blinking `v(--)v` through `::before`. The wizard
   * wants the inner text visible per step (`v(--)v` / `v(oo)v` / `v(..)v`)
   * and the mascot static, so disable the overlay entirely here.
   */
  margin: 0;
  color: var(--ink);
  max-width: none;
  height: auto;
  transform: none;
  transition: none;
  animation: none;
}

.setup-mascot-row .login-mark::before {
  content: none;
  display: none;
  animation: none;
  transform: none;
  transition: none;
}

.setup-step-number {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  color: var(--muted, #888);
}

/* Shared bootstrap transition message shown alongside the mascot while a
 * step-changing request is in flight. Hidden by default; the page-local
 * script reveals it and hides the active panel in the same beat so the
 * operator sees a clean mascot + "Working..." line.
 */
.setup-pending-message {
  width: 100%;
  max-width: 520px;
  margin: 0 0 12px 0;
  color: var(--muted, #888);
  font-family: var(--mono);
  font-size: var(--size-sm, 13px);
}

body.setup-pending .onboarding-panel {
  display: none;
}

.setup-mascot-row--step-1 {
  justify-content: flex-start;
}

.setup-mascot-row--step-2 {
  justify-content: center;
}

.setup-mascot-row--step-2b {
  justify-content: center;
}

.setup-mascot-row--step-3 {
  justify-content: flex-end;
}

/* All three onboarding panels share the same horizontal extent so the
 * mascot row above each one aligns with the panel's left edge regardless
 * of step. Without this, the Create-First-Admin panel (.login-panel)
 * stays at 360px and step 1's mascot row extends further left than the
 * panel below it.
 */
.login-body.onboarding-body .login-panel {
  max-width: 520px;
}

/* Setup Center step panels carry richer forms than the standard login
 * panel — give the sections + form rows enough breathing room so the
 * Telegram step doesn't feel cramped.
 */
.setup-step-panel .setup-card-section {
  margin-top: 14px;
}

.setup-step-panel .setup-card-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.setup-step-panel .setup-card-section + .setup-card-section {
  margin-top: 18px;
}

.setup-step-panel .setup-card-section-header {
  margin-bottom: 8px;
}

.setup-step-panel .setup-card-form,
.setup-step-panel .setup-card-modal-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.setup-step-panel .setup-card-actions {
  margin-top: 14px;
}

.setup-codex-login-idle {
  min-height: 176px;
  justify-content: center;
}

.setup-codex-login-idle-actions {
  display: flex;
  justify-content: center;
  margin-top: 0;
}

.setup-codex-login-start {
  width: min(100%, 320px);
  min-height: 56px;
  padding-inline: 24px;
  font-size: var(--size-m);
  font-weight: 600;
}

.setup-step-panel .setup-card-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.setup-step-panel .setup-card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
}

.setup-codex-login-link-row,
.setup-codex-login-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.setup-codex-login-link {
  display: block;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.setup-codex-login-code-target {
  justify-content: center;
  min-height: 52px;
  font-family: var(--mono);
  font-size: 20px;
}

.setup-codex-login-countdown {
  margin: 0;
  color: var(--muted, #888);
  font-family: var(--mono);
}

/* RFC-0018 D38: post-validate result block on the Telegram step. Gives
 * the validated bot username + the two next-step instructions room to
 * breathe instead of running everything together as a single paragraph.
 */
.setup-validate-result {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--bg-soft, rgba(0, 0, 0, 0.02));
}

.setup-validate-result-headline {
  margin: 0;
  font-weight: 700;
}

.setup-validate-next-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  line-height: 1.55;
}

.setup-validate-next-steps li code {
  font-family: var(--mono);
}

.setup-step-panel .setup-card-instructions,
.setup-step-panel .setup-card-hint,
.setup-step-panel .setup-card-row-bound {
  line-height: 1.6;
}

.setup-validate-result .setup-card-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* Legacy stepper layout — kept only for any pages that still link to it. */
.setup-center-stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 720px;
}

.setup-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
}

.setup-step-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-weight: 600;
  font-size: var(--size-sm, 13px);
}

.setup-step[data-step-state="done"] .setup-step-marker {
  background: var(--ok, #2a9d8f);
  color: white;
  border-color: var(--ok, #2a9d8f);
}

.setup-step[data-step-state="active"] .setup-step-marker {
  background: var(--accent, #4a6cf7);
  color: white;
  border-color: var(--accent, #4a6cf7);
}

.setup-step[data-step-state="pending"] {
  opacity: 0.55;
  pointer-events: none;
}

.setup-step[data-step-state="pending"] .setup-step-marker {
  background: transparent;
  color: var(--muted, #888);
  border-color: var(--line);
}

.setup-step-title {
  margin: 0 0 2px 0;
  font-size: var(--size-md, 15px);
  font-weight: 600;
}

.setup-step-subtitle {
  margin: 0 0 8px 0;
  color: var(--muted, #888);
  font-size: var(--size-sm, 13px);
}

.setup-pick-list {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.setup-pick-row {
  border: 1px solid var(--line);
  padding: 10px 12px;
}

.setup-pick-radio {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  align-items: baseline;
  cursor: pointer;
}

.setup-pick-name {
  font-weight: 600;
}

.setup-pick-version {
  color: var(--muted, #888);
  font-size: var(--size-sm, 13px);
}

.setup-pick-detail {
  margin-top: 8px;
  padding-left: 26px;
}

.setup-pick-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.setup-pick-field span {
  font-size: var(--size-sm, 13px);
  color: var(--muted, #888);
}

.setup-memory-level {
  border: 1px solid var(--line);
  padding: 8px 12px;
  margin: 12px 0;
}

.setup-memory-level legend {
  padding: 0 4px;
  font-weight: 600;
  font-size: var(--size-sm, 13px);
}

.setup-memory-level label {
  display: block;
  padding: 4px 0;
  cursor: pointer;
}

.setup-memory-hint {
  color: var(--muted, #888);
  font-size: var(--size-sm, 13px);
  margin-left: 4px;
}

details[data-setup-card-section="api-key"] {
  margin-top: 16px;
  border: 1px solid var(--line);
  padding: 8px 12px;
}

details[data-setup-card-section="api-key"] > summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
}

details[data-setup-card-section="api-key"] > summary::-webkit-details-marker {
  display: none;
}

details[data-setup-card-section="api-key"] .setup-card-section-hint {
  color: var(--muted, #888);
  font-size: var(--size-sm, 13px);
}

details[data-setup-card-section="api-key"] .setup-card-section-body {
  margin-top: 10px;
}

.setup-card {
  border: 1px solid var(--line);
  padding: 16px;
}

.setup-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.setup-card-title {
  margin: 0;
  font-size: var(--size-md, 15px);
  font-weight: 600;
}

.setup-card-state {
  font-family: var(--mono);
  font-size: var(--size-sm, 13px);
}

.setup-card-state--pending {
  color: var(--warn, #b56a00);
}

.setup-card-state--ok {
  color: var(--ok);
}

.setup-card-summary {
  margin: 8px 0 4px;
}

.setup-card-follow-on {
  margin: 0;
  color: var(--ink-muted, #5a6066);
}

.login-heading {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}

.login-subtitle {
  color: var(--subtle);
  font-size: var(--size-s);
  margin: 0 0 20px;
}

.login-error {
  color: var(--fail);
  font-size: var(--size-s);
  margin: 0 0 16px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.login-field-label {
  color: var(--muted);
  font-size: var(--size-s);
}

.login-submit {
  margin-top: 8px;
  padding: 8px 12px;
  font-size: var(--size-m);
}