/* The console's own layer, composed on Nocturne's tokens and components
   (nocturne.css). Nothing here restyles a `.btn`, `.tag`, `.card` or `.hr` —
   the design system owns those, and the handoff is explicit that the console
   composes them rather than overriding them.

   Every colour, space and radius below is a token reference. The three
   interface grounds are colour mixes rather than new colours, exactly as
   specified, so retuning --color-surface retunes the whole console. */

:root {
  /* The one token the system does not carry. Used for every ticket key,
     count, timestamp, stat value and log line. */
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ground-panel: color-mix(in srgb, var(--color-surface) 24%, var(--color-bg));
  --ground-card: color-mix(in srgb, var(--color-surface) 34%, var(--color-bg));
  --ground-header: color-mix(in srgb, var(--color-surface) 45%, var(--color-bg));
  --ground-focused: color-mix(in srgb, var(--color-surface) 68%, var(--color-bg));
  --ground-gate-open: color-mix(in srgb, var(--color-accent-900) 62%, var(--color-bg));
}

body {
  margin: 0;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ── Shell ──────────────────────────────────────────────────────────────── */

.shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.shell-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.shell-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

/* ── Header (52px) ──────────────────────────────────────────────────────── */

.c-header {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: 52px;
  flex: none;
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--color-neutral-900);
  background: var(--ground-header);
}

.c-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
}
.c-brand i { font-size: 18px; color: var(--color-accent); }
.c-brand-name { font-size: 15px; font-weight: 500; letter-spacing: -0.015em; }
.c-brand-sub { font-size: 15px; font-weight: 400; color: var(--color-neutral-600); }

.c-header-track {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  flex: 1;
  max-width: 820px;
}

.c-counters {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-left: auto;
  font-size: 12.5px;
  color: var(--color-neutral-400);
}
.c-counter { display: flex; align-items: center; gap: var(--space-2); color: inherit; text-decoration: none; }
.c-counter i { font-size: 14px; color: var(--color-neutral-600); }
.c-counter-accent i { color: var(--color-accent); }

.c-streaming {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-accent-800);
  border-radius: 99px;
  font-size: 11.5px;
  color: var(--color-accent-300);
}
.c-streaming-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: pulse 2s infinite;
}
/* The console's only animation. An all-day tool should not animate on every
   state change, so nothing else here moves. */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .c-streaming-dot { animation: none; }
}

.c-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-neutral-900);
  font-size: 12.5px;
  color: var(--color-neutral-400);
}
.c-user i { font-size: 17px; }

/* ── Nav (176px) ────────────────────────────────────────────────────────── */

.c-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 176px;
  flex: none;
  padding: var(--space-6) var(--space-3);
  border-right: 1px solid var(--color-neutral-900);
  background: var(--ground-panel);
  overflow-y: auto;
}

.c-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px var(--space-4);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--color-neutral-500);
  text-decoration: none;
}
.c-nav-item i { font-size: 15px; }
.c-nav-item:hover { background: var(--color-surface); color: var(--color-text); }
.c-nav-item[aria-current="page"] {
  background: var(--color-accent-900);
  color: var(--color-accent-300);
  font-weight: 500;
}
.c-nav-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-neutral-700);
}
.c-nav-note {
  margin-top: auto;
  padding: var(--space-4);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--color-neutral-700);
}

/* ── Bench rail (278px) ─────────────────────────────────────────────────── */

.c-bench {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 278px;
  flex: none;
  padding: var(--space-6) var(--space-3);
  border-right: 1px solid var(--color-neutral-900);
  background: var(--ground-panel);
  overflow-y: auto;
}

.c-bench-head { padding: 0 var(--space-2); }
.c-bench-head-row { display: flex; align-items: baseline; gap: var(--space-3); }
.c-bench-head h6 { margin: 0; color: var(--color-neutral-600); font-size: 11px; }
.c-bench-keys {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--color-neutral-700);
}
.c-bench-sub {
  margin: var(--space-2) 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--color-neutral-700);
}

.c-bench-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-neutral-900);
  border-radius: var(--radius-md);
  background: var(--ground-card);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.c-bench-card[aria-current="true"] {
  border-color: var(--color-accent-700);
  background: var(--ground-focused);
  box-shadow: inset 2px 0 0 var(--color-accent);
}

.c-bench-row { display: flex; align-items: center; gap: var(--space-2); }
.c-bench-key { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; }
.c-bench-age {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--color-neutral-600);
}
.c-bench-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-neutral-400);
}
.c-bench-phase {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11.5px;
  color: var(--color-neutral-500);
  min-width: 0;
}
/* One line, ellipsed. The full phase is in the gate banner the moment the
   card is focused, so a card that grows to fit the longest label would cost
   rail density for something the detail pane already says in full. */
.c-bench-phase span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-bench-phase i { font-size: 13px; color: var(--color-neutral-600); }
.c-bench-phase.is-gated { color: var(--color-accent-300); }
.c-bench-phase.is-gated i { color: var(--color-accent); }

.c-progress { height: 3px; border-radius: 99px; background: var(--color-neutral-900); }
.c-progress-fill { height: 100%; border-radius: 99px; background: var(--color-neutral-700); }
.c-progress-fill.is-running { background: var(--color-accent); }

.c-bench-reason {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10.5px;
  color: var(--color-neutral-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-bench-reason i { font-size: 11px; flex: none; }
.c-bench-reason span { overflow: hidden; text-overflow: ellipsis; }

.c-bench-group { padding: 0 var(--space-2); }
.c-bench-group-label {
  font-size: 11.5px;
  color: var(--color-neutral-700);
  margin-bottom: var(--space-2);
}
.c-bench-group-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-neutral-600);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-bench-group-item:hover { color: var(--color-neutral-400); }
.c-bench-group-item i { font-size: 12px; flex: none; }
.c-bench-empty { font-size: 11.5px; color: var(--color-neutral-700); padding: 0 var(--space-2); }

/* ── Main: header block ─────────────────────────────────────────────────── */

.c-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: none;
  padding: var(--space-6) var(--space-8) 0;
}

.c-title-row { display: flex; align-items: flex-start; gap: var(--space-4); }
.c-title-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.c-title-key { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-accent); text-decoration: none; }
.c-title-line {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-neutral-700);
  white-space: nowrap;
}
.c-head h3 {
  margin: var(--space-2) 0 0;
  font-size: 21px;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.c-title-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex: none; }
.c-title-actions .btn { font-size: 12.5px; }

/* Gate banner — the most important element on the screen. */
.c-gate {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) 14px;
  border: 1px solid var(--color-neutral-900);
  border-radius: var(--radius-md);
  background: var(--ground-card);
}
.c-gate > i { font-size: 20px; color: var(--color-neutral-600); line-height: 1.2; }
.c-gate-text { flex: 1; min-width: 0; }
.c-gate-title-row { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.c-gate-title { font-size: 14.5px; font-weight: 500; }
.c-gate-stamp { font-family: var(--font-mono); font-size: 11px; color: var(--color-neutral-600); }
.c-gate-detail {
  margin: var(--space-2) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-neutral-400);
  text-wrap: pretty;
}
.c-gate-actions { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.c-gate-actions .btn-secondary { font-size: 12.5px; }
.c-gate-actions .btn-primary { font-size: 13px; }

/* The pickup form: the auto-run checkboxes stacked above the button. */
.c-gate-pickup { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.c-gate-plan { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.c-gate-plan-legend { padding: 0; margin-bottom: var(--space-1); font-size: 12.5px; }
.c-gate-plan-row { display: flex; align-items: baseline; gap: var(--space-2); font-size: 12.5px; }
.c-gate-plan-hint { color: var(--color-neutral-600); font-size: 12px; }
.c-gate-plan-status { margin: 0; font-size: 12.5px; }
.c-gate-plan-row.is-static { color: var(--color-neutral-600); }
.c-gate-pickup.htmx-request .c-gate-plan { opacity: 0.6; }

/* The read-only plan strip (DEV-1901): the plan panel's static-row markup,
   laid out as a horizontal row of chips instead of a vertical column. */
.c-gate-plan-strip { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.c-gate-plan-chip {
  padding: 2px var(--space-2);
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-sm);
}
.c-gate-plan-chip.is-dim { color: var(--color-neutral-700); border-color: var(--color-neutral-900); }
.c-gate-plan-chip.is-armed { color: var(--color-neutral-300); border-color: var(--color-neutral-700); }
.c-gate-plan-chip.is-done { color: var(--color-accent-300); border-color: var(--color-accent-700); }
.c-gate-plan-chip.is-running { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent-800); }

/* On pr_open the chips that can still run are checkboxes (DEV-1945): the
   input is visually hidden, the chip is the control. `:has(:checked)` mirrors
   the armed/dim look from the live input, so a tick reads instantly, before
   the server's redraw. */
.c-gate-plan-form { display: contents; }
.c-gate-plan-form.htmx-request .c-gate-plan { opacity: 0.6; }
.c-gate-plan-chip.is-editable { cursor: pointer; }
.c-gate-plan-chip.is-editable input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.c-gate-plan-chip.is-editable:has(input:checked) { color: var(--color-neutral-300); border-color: var(--color-neutral-700); }
.c-gate-plan-chip.is-editable:not(:has(input:checked)) { color: var(--color-neutral-700); border-color: var(--color-neutral-900); }
.c-gate-plan-chip.is-editable:hover { border-color: var(--color-neutral-600); }
.c-gate-plan-chip.is-editable:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.c-gate-plan-status-row { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-2); }

/* The pr_open gate's overflow menu: a native details, no script. */
.c-gate-more { position: relative; }
.c-gate-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); }
.c-gate-more > summary::-webkit-details-marker { display: none; }
.c-gate-more-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
  display: flex; flex-direction: column; gap: var(--space-1);
  min-width: 13rem; padding: var(--space-2);
  background: var(--ground-header); border: 1px solid var(--color-neutral-800); border-radius: var(--radius-sm);
}
.c-gate-more-menu form { display: flex; }
.c-gate-more-menu .btn { flex: 1; justify-content: flex-start; white-space: nowrap; }

/* The Close form (DEV-1972): the reason and the side-effect sentence follow the
   scope radio, so the form needs no script. */
.c-close-form { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); min-width: 22rem; }
.c-close-scope { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.c-close-buttons { display: flex; gap: var(--space-2); justify-content: flex-end; }
.c-close-form .c-close-effect-pr { display: none; }
.c-close-form:has(input[name="scope"][value="pr"]:checked) .c-close-effect-pr { display: block; }
.c-close-form:has(input[name="scope"][value="pr"]:checked) .c-close-effect-ticket,
.c-close-form:has(input[name="scope"][value="pr"]:checked) .c-close-reason { display: none; }
.c-close-slot-row > td { padding-top: 0; padding-bottom: 0; }
.c-gate-note { white-space: pre-wrap; border-left: 2px solid var(--color-neutral-800); padding-left: var(--space-3); margin-left: 0; }

.c-gate.is-gated {
  border-color: var(--color-accent-700);
  background: var(--ground-gate-open);
  box-shadow: var(--shadow-md);
}
.c-gate.is-gated > i { color: var(--color-accent); }

/* Stat strip */
.c-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}
.c-stat {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-neutral-900);
  border-radius: var(--radius-md);
  background: var(--ground-card);
}
.c-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral-600);
}
.c-stat-value {
  font-family: var(--font-mono);
  font-size: 16px;
  margin-top: var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tabs */
.c-tabs {
  display: flex;
  gap: var(--space-6);
  border-bottom: 1px solid var(--color-neutral-900);
}
.c-tab {
  padding: 6px 0;
  margin-bottom: -1px;
  font-size: 13px;
  color: var(--color-neutral-600);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  background: none;
  border-top: 0; border-left: 0; border-right: 0;
  cursor: pointer;
  font-family: inherit;
}
.c-tab:hover { color: var(--color-text); }
.c-tab[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--color-accent); }

/* ── Main: detail grid ──────────────────────────────────────────────────── */

.c-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-6);
  padding: 14px var(--space-8);
  flex: 1;
  min-height: 0;
  overflow: auto;
  align-content: start;
}

/* Timeline */
.c-event {
  display: grid;
  grid-template-columns: 58px 16px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
}
.c-event-when { font-family: var(--font-mono); font-size: 11px; color: var(--color-neutral-700); }
.c-event-icon { font-size: 13px; color: var(--color-neutral-700); }
.c-event-icon.is-agent { color: var(--color-accent-400); }
.c-event-icon.is-gate { color: var(--color-accent); }
.c-event-kind { font-family: var(--font-mono); font-size: 12px; color: var(--color-accent-300); }
.c-event-body { font-size: 13px; line-height: 1.5; color: var(--color-neutral-400); }
.c-event-detail {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-neutral-600);
  margin-top: 2px;
}
.c-event-body a { color: var(--color-accent-300); }

/* Right-hand cards. `.card` is the system's; only the padding the handoff
   names and this column's own rows are set here. */
.c-side { display: flex; flex-direction: column; gap: var(--space-4); }
.c-side .card { padding: var(--space-4) 14px; background: var(--ground-card); border: 1px solid var(--color-neutral-900); }
.c-side .card-kicker {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}
.c-side-body { font-size: 13px; line-height: 1.55; color: var(--color-neutral-300); }
.c-files {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--color-neutral-600);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}
.c-run-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-decoration: none;
}
.c-run-id { color: var(--color-accent-300); }
.c-run-type { color: var(--color-neutral-400); }
.c-run-stats { margin-left: auto; color: var(--color-neutral-600); white-space: nowrap; }
.c-limit-row { display: flex; align-items: center; gap: var(--space-3); font-size: 12.5px; }
.c-limit-value { margin-left: auto; font-family: var(--font-mono); }
.c-limit-row .btn { font-size: 11.5px; padding: 2px 8px; }
.c-footnote { font-size: 11.5px; line-height: 1.45; color: var(--color-neutral-700); }

/* ── Main: docked log tail ──────────────────────────────────────────────── */

.c-tail { flex: none; border-top: 1px solid var(--color-neutral-900); background: var(--color-bg); }
.c-tail-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 6px var(--space-8);
  border-bottom: 1px solid var(--color-neutral-900);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-neutral-400);
}
.c-tail-bar i { color: var(--color-accent); font-size: 13px; }
.c-tail-count { color: var(--color-neutral-600); }
.c-toggle {
  padding: 1px 7px;
  border-radius: 99px;
  border: 1px solid var(--color-neutral-800);
  background: none;
  font: inherit;
  color: var(--color-neutral-600);
  cursor: pointer;
}
.c-tail-right { margin-left: auto; color: var(--color-neutral-700); }
.c-tail-pane {
  height: 148px;
  overflow: auto;
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.7;
}
.c-tail.is-collapsed .c-tail-pane { display: none; }
/* The Live logs page reuses the docked tail's markup, so it only overrides
   what "docked" means: a bordered card that fills the page instead of a
   fixed-height strip pinned to the bottom. */
.c-tail-full {
  border: 1px solid var(--color-neutral-900);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.c-tail-full .c-tail-pane { height: min(66vh, 720px); }
.c-log-line { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-neutral-300); }
.c-log-line.lvl-DEBUG { color: var(--color-neutral-700); }
.c-log-line.lvl-WARNING { color: var(--color-accent-300); }
.c-log-line.lvl-ERROR { color: var(--color-accent-200); }

/* Level filter: :checked on an <option> is native, no JS needed, and applies
   equally to a line that arrives after the level was picked since it is
   evaluated on every render, including a live SSE append. */
.c-tail:has(#log-level option[value="ERROR"]:checked) .c-log-line:not(.lvl-ERROR) { display: none; }
.c-tail:has(#log-level option[value="WARNING"]:checked) .c-log-line:is(.lvl-DEBUG, .lvl-INFO) { display: none; }
.c-tail:has(#log-level option[value="INFO"]:checked) .c-log-line.lvl-DEBUG { display: none; }

/* Past the cap, the oldest lines are hidden rather than removed, so the line
   count (an hx-live binding on .children.length) still reports every line the
   pane holds. 400 on the docked tail, 600 on Live logs (.c-tail-full). */
.c-tail:not(.c-tail-full) .c-log-line:nth-last-child(n+401) { display: none; }
.c-tail-full .c-log-line:nth-last-child(n+601) { display: none; }

/* ── Ordinary pages (work queue, jobs, limits, tokens) ──────────────────── */

.c-page {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--space-6) var(--space-8);
}
.c-page-head { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4); }
.c-page-head h3 { margin: 0; font-size: 21px; letter-spacing: -0.015em; }
.c-page-sub { font-size: 12.5px; color: var(--color-neutral-600); margin-top: var(--space-1); }
.c-page-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }

.c-filters { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.c-filters .input { min-height: 30px; padding: 4px 8px; font-size: 12.5px; background: var(--ground-card); border-color: var(--color-neutral-800); }
.c-filters .field > label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-neutral-600); }
.c-filters .field { display: flex; flex-direction: column; }

.c-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.c-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 400;
  color: var(--color-neutral-600);
  border-bottom: 1px solid var(--color-neutral-900);
  white-space: nowrap;
}
.c-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-neutral-900);
  vertical-align: top;
}
.c-table tbody tr:hover { background: var(--ground-card); }
.c-table a { color: var(--color-accent-300); text-decoration: none; }
.c-table .mono { font-family: var(--font-mono); font-size: 11.5px; }
.c-muted { color: var(--color-neutral-600); }
.c-empty { padding: var(--space-8); text-align: center; color: var(--color-neutral-600); font-size: 13px; }

.c-panel {
  padding: var(--space-4) 14px;
  border: 1px solid var(--color-neutral-900);
  border-radius: var(--radius-md);
  background: var(--ground-card);
}
.c-pre {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 28rem;
  overflow: auto;
  margin: 0;
  color: var(--color-neutral-300);
}

/* Rendered markdown (`console.markdown_render.markdown_to_html`) — headings, bold
   and lists inside a plan, as opposed to `.c-pre`'s literal monospace dump. */
.c-prose {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-neutral-300);
  max-height: 28rem;
  overflow: auto;
}
.c-prose h1, .c-prose h2, .c-prose h3, .c-prose h4, .c-prose h5, .c-prose h6 {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--color-neutral-100);
  font-weight: 600;
  line-height: 1.3;
}
.c-prose h1 { font-size: 17px; }
.c-prose h2 { font-size: 15.5px; }
.c-prose h3, .c-prose h4, .c-prose h5, .c-prose h6 { font-size: 13px; }
.c-prose p { margin: 0 0 var(--space-3); }
.c-prose ul, .c-prose ol { margin: 0 0 var(--space-3); padding-left: 1.4em; }
.c-prose li { margin-bottom: var(--space-1); }
.c-prose strong { color: var(--color-neutral-100); font-weight: 600; }
.c-prose > *:first-child { margin-top: 0; }
.c-prose > *:last-child { margin-bottom: 0; }

/* ── Toasts ─────────────────────────────────────────────────────────────── */

.c-toasts {
  position: fixed;
  top: var(--space-6);
  right: var(--space-6);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 380px;
}
.c-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  font-size: 12.5px;
  line-height: 1.45;
  animation: toast-fade-out 300ms ease 8s forwards;
}
.c-toast.is-error { border-color: var(--color-accent-700); }
.c-toast.is-closing { animation: toast-fade-out 300ms ease forwards; }
.c-toast button { background: none; border: 0; color: var(--color-neutral-600); cursor: pointer; font-size: 14px; line-height: 1; }
@keyframes toast-fade-out { to { opacity: 0; } }

/* ── Responsive fallback ────────────────────────────────────────────────── */
/* Not a designed breakpoint. The handoff's instruction for under ~1100px:
   collapse the nav to an icon rail and drop the detail grid to one column;
   the bench is the last thing to go. */

@media (max-width: 1100px) {
  .c-nav { width: 56px; padding: var(--space-6) var(--space-2); }
  .c-nav-item { justify-content: center; padding: 6px; }
  .c-nav-item span, .c-nav-count, .c-nav-note { display: none; }
  .c-detail { grid-template-columns: minmax(0, 1fr); }
  .c-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .c-bench { display: none; }
  .c-counters { display: none; }
  .c-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}