/* Whale Solver control surface.
 *
 * One rule governs the whole sheet: a figure is never carried by colour alone.
 * The signal amber and the fault red sit below the colour-blind separation
 * floor against each other, so every state ships a glyph and a word as well,
 * and the layout stays readable with colour removed entirely.
 *
 * Fonts are system stacks. Nothing is fetched: the admin content security
 * policy allows only 'self', so an external font would simply not load and
 * the page would silently fall back anyway. */

:root {
  --ink-ocean: #060b14;
  --ink-deep: #0a1120;
  --ink-raise: #101a2d;
  --ink-line: #1b2740;
  --panel-fog: rgba(18, 28, 48, 0.72);
  --panel-fog-strong: rgba(14, 22, 40, 0.92);

  --text-bright: #eaf1ff;
  --text-plain: #bac8e4;
  --text-quiet: #7c8ba8;
  --text-faint: #566480;

  --signal-blue: #4da3ff;
  --signal-blue-soft: rgba(77, 163, 255, 0.14);
  --signal-green: #35d49b;
  --signal-green-soft: rgba(53, 212, 155, 0.14);
  --signal-amber: #ffb340;
  --signal-amber-soft: rgba(255, 179, 64, 0.14);
  --signal-fault: #ff5d6c;
  --signal-fault-soft: rgba(255, 93, 108, 0.14);
  --signal-violet: #a98bff;

  --font-display: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-data: "JetBrains Mono", "Cascadia Mono", ui-monospace, "SF Mono",
    "Consolas", monospace;

  --radius: 10px;
  --radius-small: 6px;
  --rail-width: 232px;
  --gutter: 20px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body.admin-page {
  background:
    radial-gradient(1200px 620px at 12% -8%, rgba(77, 163, 255, 0.08), transparent 70%),
    radial-gradient(900px 520px at 96% 4%, rgba(169, 139, 255, 0.06), transparent 68%),
    var(--ink-ocean);
  color: var(--text-plain);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--text-bright);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

h1 { font-size: 1.32rem; }
h2 { font-size: 1.18rem; }
h3 { font-size: 0.98rem; }

p { margin: 0; }

a { color: var(--signal-blue); }

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

:focus-visible {
  outline: 2px solid var(--signal-blue);
  outline-offset: 2px;
  border-radius: var(--radius-small);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 60;
  padding: 8px 14px;
  background: var(--signal-blue);
  color: var(--ink-ocean);
  border-radius: var(--radius-small);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 8px;
}

/* ---------------------------------------------------------------- shell */

.app-shell {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  min-height: 100vh;
}

.side-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 14px;
  background: linear-gradient(180deg, var(--ink-deep), var(--ink-ocean));
  border-right: 1px solid var(--ink-line);
  position: sticky;
  top: 0;
  height: 100vh;
}

.rail-brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
  font-family: var(--font-data);
  letter-spacing: 0.12em;
  font-size: 0.72rem;
}

.rail-brand span { color: var(--text-faint); }
.rail-brand strong { color: var(--text-bright); font-size: 0.9rem; }

.rail-state {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--panel-fog);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
}

.rail-state small {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.rail-state strong {
  display: block;
  font-size: 0.82rem;
  color: var(--text-bright);
}

.status-light {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--text-faint);
  box-shadow: 0 0 0 3px rgba(124, 139, 168, 0.16);
}

.status-light--good { background: var(--signal-green); box-shadow: 0 0 0 3px var(--signal-green-soft); }
.status-light--warn { background: var(--signal-amber); box-shadow: 0 0 0 3px var(--signal-amber-soft); }
.status-light--fault { background: var(--signal-fault); box-shadow: 0 0 0 3px var(--signal-fault-soft); }
.status-light--idle { background: var(--text-faint); }

.rail-warn {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius);
  background: var(--signal-amber-soft);
  border: 1px solid rgba(255, 179, 64, 0.3);
  color: var(--signal-amber);
  font-size: 0.74rem;
}

.rail-warn strong { font-family: var(--font-data); font-size: 1.05rem; }

.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  color: var(--text-quiet);
  cursor: pointer;
  text-align: left;
  font-size: 0.84rem;
  transition: background 120ms ease, color 120ms ease;
}

.nav-item:hover { background: rgba(77, 163, 255, 0.08); color: var(--text-plain); }

.nav-item.is-active {
  background: var(--signal-blue-soft);
  border-color: rgba(77, 163, 255, 0.34);
  color: var(--text-bright);
}

.nav-glyph {
  font-family: var(--font-data);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  padding: 3px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-faint);
}

.nav-item.is-active .nav-glyph { background: rgba(77, 163, 255, 0.2); color: var(--signal-blue); }

.nav-tally {
  margin-left: auto;
  font-family: var(--font-data);
  font-size: 0.68rem;
  color: var(--text-faint);
}

.nav-tally[data-tone="warn"] { color: var(--signal-amber); }
.nav-tally[data-tone="fault"] { color: var(--signal-fault); }

.rail-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.68rem;
  color: var(--text-faint);
  font-family: var(--font-data);
  word-break: break-all;
}

.text-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--signal-blue);
  cursor: pointer;
  text-align: left;
  font-size: 0.72rem;
}

.workbench {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.command-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px var(--gutter);
  border-bottom: 1px solid var(--ink-line);
  background: var(--panel-fog-strong);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(8px);
}

.command-title { min-width: 0; flex: 1 1 auto; }

.command-eyebrow {
  font-family: var(--font-data);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.command-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-data);
  font-size: 0.72rem;
  color: var(--text-quiet);
  flex: 0 0 auto;
}

.stream-state {
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--ink-line);
  background: rgba(255, 255, 255, 0.03);
}

.stream-state[data-tone="good"] { color: var(--signal-green); border-color: rgba(53, 212, 155, 0.34); }
.stream-state[data-tone="warn"] { color: var(--signal-amber); border-color: rgba(255, 179, 64, 0.34); }
.stream-state[data-tone="fault"] { color: var(--signal-fault); border-color: rgba(255, 93, 108, 0.34); }

.mobile-nav-toggle {
  display: none;
  padding: 7px 12px;
  background: var(--ink-raise);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-small);
  color: var(--text-plain);
  cursor: pointer;
}

.global-notice {
  margin: 14px var(--gutter) 0;
  padding: 11px 14px;
  border-left: 3px solid var(--signal-amber);
  background: var(--signal-amber-soft);
  border-radius: var(--radius-small);
  color: var(--text-bright);
  font-size: 0.84rem;
}

.dashboard-main { padding: var(--gutter); min-width: 0; }

.view { display: none; flex-direction: column; gap: 18px; }
.view.is-visible { display: flex; }

.view-lede {
  max-width: 76ch;
  color: var(--text-quiet);
  font-size: 0.86rem;
}

.view-lede strong { color: var(--text-plain); }

/* --------------------------------------------------------------- panels */

.instrument-panel {
  background: var(--panel-fog);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.panel-index {
  font-family: var(--font-data);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 2px;
}

.panel-hint {
  font-size: 0.74rem;
  color: var(--text-faint);
  max-width: 54ch;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.section-heading--sub { margin-top: 6px; }

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

.state-chip {
  font-family: var(--font-data);
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ink-line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-quiet);
}

.state-chip[data-tone="good"] { color: var(--signal-green); border-color: rgba(53, 212, 155, 0.34); }
.state-chip[data-tone="warn"] { color: var(--signal-amber); border-color: rgba(255, 179, 64, 0.34); }
.state-chip[data-tone="fault"] { color: var(--signal-fault); border-color: rgba(255, 93, 108, 0.34); }

/* ------------------------------------------------------- attention band */

.attention-band { display: flex; flex-direction: column; gap: 8px; }
.attention-band:empty { display: none; }

.attention-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 13px;
  border-radius: var(--radius-small);
  border: 1px solid var(--ink-line);
  background: var(--panel-fog);
  font-size: 0.84rem;
  color: var(--text-plain);
}

.attention-row[data-tone="warn"] {
  border-color: rgba(255, 179, 64, 0.34);
  background: var(--signal-amber-soft);
}

.attention-row[data-tone="fault"] {
  border-color: rgba(255, 93, 108, 0.34);
  background: var(--signal-fault-soft);
}

.attention-row .glyph {
  font-family: var(--font-data);
  font-weight: 700;
  flex: 0 0 auto;
}

.attention-row strong { color: var(--text-bright); }

.attention-row button {
  margin-left: auto;
  flex: 0 0 auto;
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  border-radius: var(--radius-small);
  padding: 3px 10px;
  font-size: 0.72rem;
  cursor: pointer;
}

/* ----------------------------------------------------------- fleet band */

.fleet-band {
  background: linear-gradient(135deg, rgba(77, 163, 255, 0.09), rgba(169, 139, 255, 0.05));
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 16px;
}

.fleet-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
}

.fleet-figures--compact { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); }

.stat-tile {
  background: var(--panel-fog-strong);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-small);
  padding: 11px 13px;
  min-width: 0;
}

.figure-label {
  font-family: var(--font-data);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.stat-tile strong {
  display: block;
  font-family: var(--font-data);
  font-size: 1.44rem;
  color: var(--text-bright);
  line-height: 1.2;
  margin: 3px 0 1px;
  word-break: break-word;
}

.stat-tile small { display: block; font-size: 0.7rem; color: var(--text-faint); }

.stat-tile[data-tone="good"] strong { color: var(--signal-green); }
.stat-tile[data-tone="warn"] strong { color: var(--signal-amber); }
.stat-tile[data-tone="fault"] strong { color: var(--signal-fault); }
.stat-tile[data-tone="info"] strong { color: var(--signal-blue); }

/* -------------------------------------------------------- machine strip */

.machine-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
  gap: 12px;
}

.machine-card {
  background: var(--panel-fog-strong);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.machine-card[data-state="stale"] { border-color: rgba(255, 179, 64, 0.4); }
.machine-card[data-state="down"] { border-color: rgba(255, 93, 108, 0.46); }

.machine-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.machine-card__head h4 { font-size: 0.92rem; }

.machine-card__role {
  font-family: var(--font-data);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.machine-card__meta {
  font-family: var(--font-data);
  font-size: 0.66rem;
  color: var(--text-faint);
  word-break: break-all;
}

.meter-row {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  align-items: center;
  gap: 9px;
  font-size: 0.74rem;
}

.meter-row > span:first-child { color: var(--text-faint); }

.meter-row strong {
  font-family: var(--font-data);
  font-size: 0.78rem;
  color: var(--text-bright);
  justify-self: end;
}

.meter {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.meter i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--signal-blue);
  transition: width 220ms ease;
}

.meter i[data-tone="good"] { background: var(--signal-green); }
.meter i[data-tone="warn"] { background: var(--signal-amber); }
.meter i[data-tone="fault"] { background: var(--signal-fault); }

.core-grid {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 26px;
}

.core-grid i {
  flex: 1 1 auto;
  min-width: 2px;
  background: var(--signal-blue);
  border-radius: 1px;
  opacity: 0.85;
}

.core-grid i[data-tone="warn"] { background: var(--signal-amber); }
.core-grid i[data-tone="fault"] { background: var(--signal-fault); }

.machine-card__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px;
  font-size: 0.72rem;
}

.machine-card__facts div { min-width: 0; }
.machine-card__facts dt, .machine-card__facts span:first-child { color: var(--text-faint); display: block; font-size: 0.64rem; }
.machine-card__facts dd, .machine-card__facts strong {
  margin: 0;
  font-family: var(--font-data);
  color: var(--text-bright);
  font-size: 0.8rem;
}

/* --------------------------------------------------------- command grid */

.command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.command-grid > *:nth-child(3) { grid-column: 1 / -1; }

.sonar-figure { margin: 0; display: flex; flex-direction: column; gap: 5px; }

.sonar-figure figcaption {
  font-size: 0.7rem;
  color: var(--text-faint);
  font-family: var(--font-data);
}

.sonar-rail {
  height: 108px;
  border-radius: var(--radius-small);
  background: rgba(6, 11, 20, 0.6);
  border: 1px solid var(--ink-line);
  overflow: hidden;
}

.sonar-rail--short { height: 62px; }
.sonar-rail canvas { display: block; width: 100%; height: 100%; }

.chart-summary { font-size: 0.76rem; color: var(--text-quiet); }

.lifetime-list { display: flex; flex-direction: column; gap: 9px; }

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

.lifetime-row:last-child { border-bottom: none; padding-bottom: 0; }
.lifetime-row span { font-size: 0.76rem; color: var(--text-faint); }
.lifetime-row strong { font-family: var(--font-data); font-size: 1.04rem; color: var(--text-bright); }
.lifetime-row small { display: block; font-size: 0.66rem; color: var(--text-faint); }

.compact-readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 9px;
  margin: 0;
}

.compact-readout div { min-width: 0; }
.compact-readout dt { font-size: 0.64rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.compact-readout dd { margin: 1px 0 0; font-family: var(--font-data); font-size: 0.8rem; color: var(--text-bright); word-break: break-word; }

.crash-list { display: flex; flex-direction: column; gap: 6px; }

.crash-row {
  font-family: var(--font-data);
  font-size: 0.7rem;
  color: var(--text-quiet);
  padding: 7px 9px;
  border-radius: var(--radius-small);
  background: rgba(255, 93, 108, 0.07);
  border: 1px solid rgba(255, 93, 108, 0.2);
  word-break: break-word;
}

.pool-glance { display: flex; flex-direction: column; gap: 8px; }

.pool-glance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--radius-small);
  border: 1px solid var(--ink-line);
  background: rgba(255, 255, 255, 0.02);
}

.pool-glance-row > div { min-width: 0; }
.pool-glance-row b { display: block; color: var(--text-bright); font-size: 0.82rem; font-weight: 600; }
.pool-glance-row small { display: block; font-size: 0.66rem; color: var(--text-faint); }
.pool-glance-row .count { font-family: var(--font-data); font-size: 1.1rem; color: var(--signal-blue); }
.pool-glance-row .bytes { font-family: var(--font-data); font-size: 0.78rem; color: var(--text-quiet); }
.pool-glance-row[data-orphan="yes"] { border-color: rgba(255, 179, 64, 0.38); }

/* --------------------------------------------------------- solver cards */

.filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px;
  background: var(--panel-fog);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
}

.filter-bar label,
.inline-create-form label,
.control-form label,
.inline-select {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--text-faint);
  min-width: 0;
}

.filter-bar label span,
.inline-create-form label span,
.control-form label span { color: var(--text-faint); }

.filter-search { flex: 1 1 200px; }

input,
select {
  padding: 7px 10px;
  background: rgba(6, 11, 20, 0.7);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-small);
  color: var(--text-bright);
  font-family: var(--font-data);
  font-size: 0.8rem;
  min-width: 0;
}

input:hover, select:hover { border-color: rgba(77, 163, 255, 0.4); }

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

.chip {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--ink-line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-quiet);
  font-size: 0.74rem;
  cursor: pointer;
}

.chip:hover { color: var(--text-bright); border-color: rgba(77, 163, 255, 0.4); }

.chip.is-active {
  background: var(--signal-blue-soft);
  border-color: rgba(77, 163, 255, 0.46);
  color: var(--text-bright);
}

.solver-groups { display: flex; flex-direction: column; gap: 18px; }

.solver-group { display: flex; flex-direction: column; gap: 10px; }

.solver-group__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.solver-group__head h3 { font-size: 0.9rem; }
.solver-group__head p { font-size: 0.74rem; color: var(--text-faint); }

.solver-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(314px, 1fr));
  gap: 12px;
}

.solver-card {
  background: var(--panel-fog);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
  position: relative;
}

.solver-card[data-enabled="no"] {
  background: rgba(10, 16, 28, 0.6);
  border-style: dashed;
}

.solver-card[data-enabled="no"] .solver-card__body { opacity: 0.56; }

.solver-card[data-protected="yes"] { border-left: 2px solid var(--signal-violet); }

.solver-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.solver-card__name { min-width: 0; }
.solver-card__name h4 { font-size: 0.98rem; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.solver-card__path {
  font-family: var(--font-data);
  font-size: 0.64rem;
  color: var(--text-faint);
  word-break: break-all;
  display: block;
}

.solver-tag {
  font-family: var(--font-data);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(169, 139, 255, 0.16);
  color: var(--signal-violet);
}

/* A switch, with the state written beside it. The knob alone would be a
   colour-only signal, which this sheet does not allow anywhere. */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.switch__track {
  width: 38px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--ink-line);
  position: relative;
  transition: background 150ms ease, border-color 150ms ease;
  flex: 0 0 auto;
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-quiet);
  transition: transform 150ms ease, background 150ms ease;
}

.switch[aria-pressed="true"] .switch__track {
  background: var(--signal-green-soft);
  border-color: rgba(53, 212, 155, 0.5);
}

.switch[aria-pressed="true"] .switch__track::after {
  transform: translateX(18px);
  background: var(--signal-green);
}

.switch__label {
  font-family: var(--font-data);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  min-width: 2.2em;
}

.switch[aria-pressed="true"] .switch__label { color: var(--signal-green); }
.switch[aria-pressed="false"] .switch__label { color: var(--signal-amber); }
.switch[disabled] { cursor: progress; opacity: 0.6; }

.solver-card__body { display: flex; flex-direction: column; gap: 11px; }

.solver-card__summary { font-size: 0.76rem; color: var(--text-quiet); }

.solver-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(66px, 1fr));
  gap: 8px;
}

.solver-stats div { min-width: 0; }
.solver-stats span { display: block; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.solver-stats strong { display: block; font-family: var(--font-data); font-size: 0.9rem; color: var(--text-bright); }
.solver-stats strong[data-tone="good"] { color: var(--signal-green); }
.solver-stats strong[data-tone="warn"] { color: var(--signal-amber); }
.solver-stats strong[data-tone="fault"] { color: var(--signal-fault); }
.solver-stats strong[data-tone="quiet"] { color: var(--text-faint); }

/* The browser count the operator asked for, per solve type, with the pool it
   belongs to named -- because seven endpoints share one pool and a bare
   number would be the same number on seven cards with no explanation. */
.solver-browsers { display: flex; flex-direction: column; gap: 6px; }

.browser-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-radius: var(--radius-small);
  background: rgba(77, 163, 255, 0.06);
  border: 1px solid rgba(77, 163, 255, 0.16);
  font-size: 0.72rem;
}

.browser-line--none {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--ink-line);
  color: var(--text-faint);
  grid-template-columns: 1fr;
}

.browser-line--orphan { background: var(--signal-amber-soft); border-color: rgba(255, 179, 64, 0.34); }

.browser-line b { font-family: var(--font-data); font-size: 0.94rem; color: var(--signal-blue); }
.browser-line--orphan b { color: var(--signal-amber); }
.browser-line span { color: var(--text-quiet); min-width: 0; }
.browser-line em { font-style: normal; font-family: var(--font-data); font-size: 0.68rem; color: var(--text-faint); }

.solver-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.68rem;
  color: var(--text-faint);
  font-family: var(--font-data);
  border-top: 1px solid var(--ink-line);
  padding-top: 9px;
}

.disabled-note {
  font-size: 0.72rem;
  color: var(--signal-amber);
  background: var(--signal-amber-soft);
  border: 1px solid rgba(255, 179, 64, 0.28);
  border-radius: var(--radius-small);
  padding: 7px 9px;
}

.empty-note {
  padding: 22px;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.82rem;
  border: 1px dashed var(--ink-line);
  border-radius: var(--radius);
}

/* -------------------------------------------------------- browser pools */

.browser-pools { display: flex; flex-direction: column; gap: 12px; }

.pool-panel {
  background: var(--panel-fog);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pool-panel[data-orphan="yes"] { border-color: rgba(255, 179, 64, 0.36); }

.pool-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pool-panel__head h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pool-panel__users { font-size: 0.72rem; color: var(--text-faint); max-width: 62ch; }

.pool-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 9px;
}

.pool-figures div span { display: block; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.pool-figures div strong { display: block; font-family: var(--font-data); font-size: 0.96rem; color: var(--text-bright); }

.browser-groups { display: flex; flex-direction: column; gap: 7px; }

.browser-group {
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-small);
  background: rgba(6, 11, 20, 0.5);
  overflow: hidden;
}

.browser-group[data-orphan="yes"] { border-color: rgba(255, 179, 64, 0.4); }

.browser-group > summary {
  cursor: pointer;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) repeat(3, auto);
  align-items: center;
  gap: 10px;
  font-family: var(--font-data);
  font-size: 0.72rem;
  list-style: none;
}

.browser-group > summary::-webkit-details-marker { display: none; }
.browser-group > summary:hover { background: rgba(77, 163, 255, 0.06); }
.browser-group > summary .profile { color: var(--text-quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-group > summary .pid { color: var(--signal-blue); }
.browser-group > summary .tag { color: var(--signal-amber); }

.process-table { width: 100%; border-collapse: collapse; font-family: var(--font-data); font-size: 0.68rem; }
.process-table th, .process-table td { padding: 5px 9px; text-align: left; border-top: 1px solid var(--ink-line); }
.process-table th { color: var(--text-faint); font-weight: 500; text-transform: uppercase; font-size: 0.58rem; letter-spacing: 0.08em; }
.process-table td { color: var(--text-plain); }
.process-table tr[data-role="root"] td { color: var(--text-bright); }

.group-actions { display: flex; gap: 8px; padding: 9px 11px; border-top: 1px solid var(--ink-line); flex-wrap: wrap; }

/* ------------------------------------------------------- machine detail */

.machine-detail { display: flex; flex-direction: column; gap: 14px; }

.machine-panel {
  background: var(--panel-fog);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.machine-panel[data-state="stale"] { border-color: rgba(255, 179, 64, 0.4); }
.machine-panel[data-state="down"] { border-color: rgba(255, 93, 108, 0.46); }

.machine-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.detail-block { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.detail-block h4 { font-size: 0.78rem; color: var(--text-plain); font-family: var(--font-data); letter-spacing: 0.06em; text-transform: uppercase; }

.kv-table { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
.kv-table th { text-align: left; font-weight: 400; color: var(--text-faint); padding: 3px 0; font-size: 0.7rem; }
.kv-table td { text-align: right; font-family: var(--font-data); color: var(--text-bright); padding: 3px 0; }
.kv-table td[data-tone="good"] { color: var(--signal-green); }
.kv-table td[data-tone="warn"] { color: var(--signal-amber); }
.kv-table td[data-tone="fault"] { color: var(--signal-fault); }
.kv-table td[data-tone="quiet"] { color: var(--text-faint); }

/* ------------------------------------------------------- tables & forms */

.table-shell {
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  overflow: auto;
  background: var(--panel-fog);
  max-width: 100%;
}

.table-shell table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }

.table-shell th {
  text-align: left;
  padding: 10px 13px;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: rgba(6, 11, 20, 0.55);
  position: sticky;
  top: 0;
}

.table-shell td {
  padding: 9px 13px;
  border-top: 1px solid var(--ink-line);
  color: var(--text-plain);
  font-family: var(--font-data);
  font-size: 0.74rem;
}

.table-shell tr:hover td { background: rgba(77, 163, 255, 0.04); }

.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 14px;
  align-items: start;
}

.settings-fields { display: flex; flex-direction: column; gap: 16px; }

.settings-section { display: flex; flex-direction: column; gap: 9px; }
.settings-section > h4 { font-size: 0.7rem; font-family: var(--font-data); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(192px, 1fr));
  gap: 10px;
}

.control-form { gap: 11px; }

.capacity-equation {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 13px;
  border-radius: var(--radius-small);
  background: rgba(6, 11, 20, 0.5);
  border: 1px solid var(--ink-line);
}

.capacity-equation div { display: flex; flex-direction: column; }
.capacity-equation span { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.capacity-equation strong { font-family: var(--font-data); font-size: 1.04rem; color: var(--text-bright); }
.capacity-equation b { color: var(--text-faint); }
.capacity-result strong { color: var(--signal-blue); }

.inline-warning {
  padding: 9px 12px;
  border-radius: var(--radius-small);
  background: var(--signal-amber-soft);
  border: 1px solid rgba(255, 179, 64, 0.32);
  color: var(--signal-amber);
  font-size: 0.76rem;
}

.change-brief { margin: 0; padding-left: 18px; font-size: 0.74rem; color: var(--text-faint); display: flex; flex-direction: column; gap: 3px; }

.inline-create-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px;
  background: var(--panel-fog);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
}

.security-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.session-control { display: flex; flex-direction: column; gap: 11px; }
.session-control p { font-size: 0.78rem; color: var(--text-quiet); }

.primary-button,
.secondary-button,
.danger-button {
  padding: 8px 15px;
  border-radius: var(--radius-small);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  align-self: flex-start;
}

.primary-button { background: var(--signal-blue); color: var(--ink-ocean); }
.primary-button:hover { filter: brightness(1.08); }
.primary-button--compact { padding: 7px 12px; font-size: 0.76rem; }

.secondary-button { background: rgba(255, 255, 255, 0.04); border-color: var(--ink-line); color: var(--text-plain); }
.secondary-button:hover { border-color: rgba(77, 163, 255, 0.42); color: var(--text-bright); }

.danger-button { background: var(--signal-fault-soft); border-color: rgba(255, 93, 108, 0.42); color: var(--signal-fault); }
.danger-button:hover { background: rgba(255, 93, 108, 0.2); }

.row-button {
  padding: 4px 9px;
  font-size: 0.68rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ink-line);
  color: var(--text-plain);
  cursor: pointer;
}

.row-button:hover { border-color: rgba(77, 163, 255, 0.42); }
.row-button--danger { color: var(--signal-fault); border-color: rgba(255, 93, 108, 0.32); }

/* ------------------------------------------------------------- dialogs */

.secret-dialog {
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  background: var(--ink-deep);
  color: var(--text-plain);
  max-width: min(640px, 92vw);
  width: 100%;
  padding: 16px;
}

.secret-dialog::backdrop { background: rgba(3, 6, 12, 0.76); }

.dialog-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-line);
  margin-bottom: 11px;
}

.dialog-bar strong { color: var(--text-bright); }

.secret-dialog p { font-size: 0.78rem; color: var(--text-quiet); margin-bottom: 11px; }

.secret-dialog pre {
  font-family: var(--font-data);
  font-size: 0.72rem;
  background: rgba(6, 11, 20, 0.7);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-small);
  padding: 11px;
  overflow: auto;
  max-height: 46vh;
  color: var(--text-bright);
  white-space: pre-wrap;
  word-break: break-word;
}

.secret-dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; color: var(--text-faint); margin-bottom: 11px; }
.secret-dialog code { font-family: var(--font-data); color: var(--signal-amber); }

.confirm-effects { margin: 0 0 12px; padding-left: 18px; font-size: 0.78rem; color: var(--text-quiet); display: flex; flex-direction: column; gap: 4px; }
.confirm-effects li strong { color: var(--text-bright); }
.confirm-effects li[data-tone="warn"] { color: var(--signal-amber); }

.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; }
.dialog-actions button { align-self: auto; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1180px) {
  .command-grid { grid-template-columns: minmax(0, 1fr); }
  .command-grid > *:nth-child(3) { grid-column: auto; }
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  :root { --gutter: 14px; }

  .app-shell { grid-template-columns: minmax(0, 1fr); }

  .side-rail {
    position: fixed;
    inset: 0 auto 0 0;
    width: 258px;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 180ms ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
  }

  .side-rail.is-open { transform: translateX(0); }
  .mobile-nav-toggle { display: inline-block; }
  .solver-grid { grid-template-columns: minmax(0, 1fr); }
  .machine-strip { grid-template-columns: minmax(0, 1fr); }
  .browser-group > summary { grid-template-columns: auto minmax(0, 1fr); row-gap: 4px; }
  .meter-row { grid-template-columns: 62px 1fr auto; }
  .command-bar { flex-wrap: wrap; }
  .command-meta { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}