/* ============================================================
 * components.css — Listener Dashboard component library
 * Pipes, ports, gauges, manifolds. Industrial telemetry.
 * Depends on tokens.css.
 * ============================================================ */

/* ============================================================
 * PIPE HEADER — horizontal pipe across the top of the page
 * ============================================================ */
.pipe-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-32);
  padding: 0 var(--gutter);
  background:
    /* central pipe bore highlight */
    linear-gradient(
      to bottom,
      var(--color-steel-200) 0%,
      var(--color-surface) 30%,
      var(--color-surface) 70%,
      var(--color-steel-200) 100%
    );
  border-top: 1px solid var(--color-steel-400);
  border-bottom: 1px solid var(--color-steel-400);
  box-shadow: var(--shadow-inset-pipe);
}

/* end caps — bolt plates at each end of the pipe */
.pipe-header::before,
.pipe-header::after {
  content: "";
  position: absolute;
  top: 0;
  width: 6px;
  height: 100%;
  background: var(--color-steel-300);
  border-left: 1px solid var(--color-steel-400);
  border-right: 1px solid var(--color-steel-400);
}
.pipe-header::before { left: 0; }
.pipe-header::after  { right: 0; }

.pipe-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-widest);
  font-weight: 600;
  color: var(--color-text);
  text-transform: uppercase;
}

.pipe-header__brand-mark {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--color-brass-500);
  border-radius: var(--radius-pill);
  position: relative;
  background: var(--color-surface);
}
.pipe-header__brand-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-brass-500);
}

.pipe-header__spacer { flex: 1; }

.pipe-header__user {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--color-text-soft);
  letter-spacing: var(--tracking-wide);
}

.pipe-header__logout {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-soft);
  padding: 6px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.pipe-header__logout:hover {
  color: var(--color-text);
  border-color: var(--color-steel-600);
}

/* ============================================================
 * PIPE NAV — ports welded onto the pipe
 * ============================================================ */
.pipe-nav {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 0;
}

.pipe-nav__port {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 var(--space-20);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-soft);
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  background: transparent;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.pipe-nav__port + .pipe-nav__port { margin-left: -1px; }

/* tap nipple on top of the port */
.pipe-nav__port::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 4px;
  background: var(--color-steel-400);
  border-radius: 0 0 var(--radius-2) var(--radius-2);
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              height var(--dur-base) var(--ease-out);
}

.pipe-nav__port:hover {
  color: var(--color-text);
  background: var(--color-steel-100);
}

.pipe-nav__port--active {
  color: var(--color-text);
  background: var(--color-surface);
}
.pipe-nav__port--active::before {
  background: var(--color-electric-500);
  height: 6px;
  box-shadow:
    0 0 0 1px var(--color-electric-500),
    0 0 12px var(--color-electric-glow),
    0 4px 18px var(--color-electric-bloom);
}
.pipe-nav__port--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-electric-500);
  box-shadow: 0 1px 6px var(--color-electric-glow);
}

/* ============================================================
 * SECTION DIVIDER — pipe joint with bolted end caps
 * ============================================================ */
.section-divider {
  position: relative;
  height: 12px;
  margin: var(--space-32) 0;
}
.section-divider::before,
.section-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 14px;
  right: 14px;
  height: 1px;
  background: var(--color-rule);
}
.section-divider::after {
  top: calc(50% + 3px);
  opacity: 0.55;
}
/* end caps — bolted plates */
.section-divider > span {
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  background: var(--color-steel-200);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
}
.section-divider > span::before {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}
.section-divider > span:first-child { left: 0; }
.section-divider > span:last-child  { right: 0; }

/* a labeled divider variant: <div class="section-divider"><span></span><b>SECTION</b><span></span></div> */
.section-divider > b {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-bg);
  padding: 0 var(--space-12);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ============================================================
 * PAGE-SHELL — titled section wrapper
 * ============================================================ */
.page-shell { display: block; }

.page-shell__title {
  font-size: var(--fs-24);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-24);
  display: flex;
  align-items: baseline;
  gap: var(--space-16);
}
.page-shell__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-rule);
  position: relative;
  top: -4px;
}

/* ============================================================
 * KPI CARD — gauge-style readout
 * ============================================================ */
.kpi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-20);
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-strong);
}

/* small graduation marks at the top edge — looks like a gauge bezel */
.kpi-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--space-20);
  right: var(--space-20);
  height: 4px;
  background-image: repeating-linear-gradient(
    to right,
    var(--color-steel-400) 0,
    var(--color-steel-400) 1px,
    transparent 1px,
    transparent 8px
  );
}

.kpi-card__title {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}

.kpi-card__readout {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
}

.kpi-card__value {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: var(--fs-40);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.kpi-card__unit {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.kpi-card__trend {
  height: 32px;
  width: 100%;
  display: block;
  color: var(--color-electric-500);
}
.kpi-card__trend path { fill: none; stroke: currentColor; stroke-width: 1.25; }
.kpi-card__trend .kpi-card__trend-fill {
  fill: var(--color-electric-bloom);
  stroke: none;
}

.kpi-card__status {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
}

/* grid container for KPI rows */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-20);
}

/* ============================================================
 * FUNNEL — horizontal pipeline manifold
 * ============================================================ */
.funnel {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: var(--space-24);
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-card);
  overflow-x: auto;
  position: relative;
}

.funnel__stage {
  flex: 1 1 0;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-16);
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
}
/* graduation marks on top of each stage card */
.funnel__stage::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 10px;
  right: 10px;
  height: 4px;
  background-image: repeating-linear-gradient(
    to right,
    var(--color-steel-400) 0,
    var(--color-steel-400) 1px,
    transparent 1px,
    transparent 6px
  );
}

.funnel__label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.funnel__value {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: var(--fs-32);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1;
}

.funnel__hint {
  font-size: var(--fs-12);
  color: var(--color-text-muted);
  margin-top: auto;
}

/* the connector between stages — a pipe with a flowing lozenge */
.funnel__arrow {
  flex: 0 0 96px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-soft);
}
/* pipe body */
.funnel__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 8px;
  transform: translateY(-50%);
  background: linear-gradient(
    to bottom,
    var(--color-steel-300) 0%,
    var(--color-surface) 45%,
    var(--color-surface) 55%,
    var(--color-steel-300) 100%
  );
  border-top: 1px solid var(--color-steel-400);
  border-bottom: 1px solid var(--color-steel-400);
}
/* arrowhead (chevron) at the right end of the connector */
.funnel__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 8px;
  height: 8px;
  transform: translateY(-50%) rotate(45deg);
  border-top: 1.5px solid var(--color-text-soft);
  border-right: 1.5px solid var(--color-text-soft);
}

/* conversion % label — sits above the pipe */
.funnel__arrow-label {
  position: relative;
  z-index: 2;
  background: var(--color-surface);
  padding: 2px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  transform: translateY(-18px);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--color-text-soft);
}

/* flowing particle — electric blue dot drifting through the pipe */
.funnel__arrow-particle {
  position: absolute;
  top: 50%;
  left: 4px;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-electric-500);
  box-shadow: 0 0 8px var(--color-electric-glow);
  transform: translateY(-50%);
  animation: funnelFlow var(--dur-particle) linear infinite;
}
@keyframes funnelFlow {
  0%   { left: 4px;            opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}

/* low-conversion variant — amber */
.funnel__arrow--low { color: var(--color-status-degraded); }
.funnel__arrow--low::before {
  background: linear-gradient(
    to bottom,
    var(--color-status-degraded-soft) 0%,
    var(--color-surface) 45%,
    var(--color-surface) 55%,
    var(--color-status-degraded-soft) 100%
  );
  border-top-color: var(--color-status-degraded);
  border-bottom-color: var(--color-status-degraded);
}
.funnel__arrow--low::after {
  border-top-color: var(--color-status-degraded);
  border-right-color: var(--color-status-degraded);
}
.funnel__arrow--low .funnel__arrow-label {
  color: var(--color-status-degraded);
  border-color: var(--color-status-degraded);
}
.funnel__arrow--low .funnel__arrow-particle {
  background: var(--color-status-degraded);
  box-shadow: 0 0 8px var(--color-status-degraded-soft);
}

@media (prefers-reduced-motion: reduce) {
  .funnel__arrow-particle { display: none; }
}

/* ============================================================
 * TABLE — meter-graduated rows, monospace numbers
 * ============================================================ */
.table {
  width: 100%;
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-4);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
  padding: var(--space-12) var(--space-16);
  background: var(--color-steel-100);
  border-bottom: 1px solid var(--color-border-strong);
}

.table tbody td {
  padding: var(--space-12) var(--space-16);
  font-size: var(--fs-14);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-rule);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }

/* row grid — subtle vertical hairlines, like meter graduations */
.table.table__grid tbody td {
  border-right: 1px solid var(--color-steel-200);
}
.table.table__grid tbody td:last-child { border-right: 0; }

.table tbody tr:hover td {
  background: var(--color-steel-100);
}

/* numeric variant — monospace, right-aligned, tabular nums */
.table--numeric td,
.table .numeric {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  text-align: right;
  letter-spacing: var(--tracking-tight);
}
.table--numeric th { text-align: right; }
.table .num { text-align: right; font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

/* ============================================================
 * FORMS — pipe-fitting dividers, machined inputs
 * ============================================================ */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-4);
  padding: var(--space-24);
  box-shadow: var(--shadow-card);
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.form__label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}

.form__hint {
  font-size: var(--fs-12);
  color: var(--color-text-muted);
}

/* pipe-fitting divider — a thin double rule with small bolted end caps */
.form__divider {
  position: relative;
  height: 8px;
  margin: var(--space-8) 0;
}
.form__divider::before,
.form__divider::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1px;
  background: var(--color-rule);
}
.form__divider::before { top: 2px; }
.form__divider::after  { top: 5px; opacity: 0.55; }

.input,
.textarea,
.select {
  width: 100%;
  padding: 10px 12px;
  font-size: var(--fs-14);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  box-shadow: inset 0 1px 0 rgba(15,20,25,0.02);
}
.input.mono, .textarea.mono { font-family: var(--font-mono); }

.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--color-electric-500);
  box-shadow: 0 0 0 3px var(--color-electric-bloom);
}

.textarea { resize: vertical; min-height: 120px; font-family: var(--font-mono); }

.select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-soft) 50%),
    linear-gradient(135deg, var(--color-text-soft) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  box-shadow: var(--shadow-inset-pipe);
}
.button:hover {
  border-color: var(--color-steel-600);
  background: var(--color-steel-100);
}
.button:active { transform: translateY(1px); }

.button--primary {
  color: var(--color-surface);
  background: var(--color-brass-500);
  border-color: var(--color-brass-600);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 1px 0 var(--color-brass-700);
}
.button--primary:hover {
  background: var(--color-brass-600);
  border-color: var(--color-brass-700);
}

.button--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-soft);
  box-shadow: none;
}
.button--ghost:hover {
  background: var(--color-steel-100);
  color: var(--color-text);
}

.button--danger {
  color: var(--color-surface);
  background: var(--color-status-dead);
  border-color: var(--color-status-dead);
}

/* ============================================================
 * STATUS DOT
 * ============================================================ */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-text-muted);
  vertical-align: middle;
  position: relative;
}

.status-dot.status--healthy   { background: var(--color-status-healthy); box-shadow: 0 0 0 3px var(--color-status-healthy-soft); }
.status-dot.status--degraded  { background: var(--color-status-degraded); box-shadow: 0 0 0 3px var(--color-status-degraded-soft); }
.status-dot.status--dead      { background: var(--color-status-dead); box-shadow: 0 0 0 3px var(--color-status-dead-soft); }

/* subtle pulse on healthy */
.status-dot.status--healthy::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-status-healthy);
  opacity: 0;
  animation: pulse 2400ms var(--ease-out) infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);    opacity: 0.6; }
  100% { transform: scale(2.2);  opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot.status--healthy::after { display: none; }
}

/* ============================================================
 * PROGRESS BAR — thin top loading indicator
 * ============================================================ */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  z-index: var(--z-toast);
  overflow: hidden;
}
.progress-bar__fill {
  position: absolute;
  height: 100%;
  width: 30%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-electric-500) 50%,
    transparent 100%
  );
  animation: progressIndeterminate 1400ms var(--ease-in-out) infinite;
  box-shadow: 0 0 8px var(--color-electric-glow);
}
@keyframes progressIndeterminate {
  0%   { left: -30%; }
  100% { left: 100%; }
}

/* ============================================================
 * FOOTER
 * ============================================================ */
.footer {
  max-width: var(--page-max);
  margin: var(--space-48) auto 0;
  padding: var(--space-20) var(--gutter);
  border-top: 1px solid var(--color-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.footer__refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-soft);
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.footer__refresh:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.footer__refresh::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-status-healthy);
  box-shadow: 0 0 0 2px var(--color-status-healthy-soft);
}

/* ============================================================
 * CONFIG AREA — control panel for the pipeline's settings
 * Industrial-instrumentation extensions:
 *   - landing grid of "instrument bays"
 *   - CRUD tables sharing the meter-graduated table look
 *   - forms with pipe-joint dividers, primary/danger button hierarchy
 *   - "Needs Review" callout treated as an alert manifold
 *   - versioned editors (prompts / scoring rules) with active stamps
 *   - settings inline-edit reading like a key/value valve bank
 * ============================================================ */

/* ---------- shared helpers ---------- */
.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-20);
}
.row-between h1,
.row-between h2 { margin: 0; }

.row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  white-space: nowrap;
}
.row-actions a {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-soft);
  border-bottom: 1px dotted var(--color-border-strong);
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.row-actions a:hover {
  color: var(--color-electric-700);
  border-bottom-color: var(--color-electric-500);
}
.row-actions form.inline { display: inline; margin: 0; }
.row-actions form.inline button {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: transparent;
  border: 1px solid transparent;
  padding: 2px 8px;
  border-radius: var(--radius-2);
  color: var(--color-text-soft);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.row-actions form.inline button:hover {
  color: var(--color-text);
  background: var(--color-steel-100);
  border-color: var(--color-border);
}
.row-actions form.inline button.danger {
  color: var(--color-status-dead);
}
.row-actions form.inline button.danger:hover {
  color: var(--color-surface);
  background: var(--color-status-dead);
  border-color: var(--color-status-dead);
}

/* Channels: one-click contextual status button + compact inline status select */
.channel-actions {
  gap: var(--space-8);
}
button.status-quick {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--color-border);
  padding: 2px 10px;
  border-radius: var(--radius-2);
  color: var(--color-text-soft);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
button.status-quick.btn-block {
  color: var(--color-status-dead);
  border-color: var(--color-status-dead-soft);
}
button.status-quick.btn-block:hover {
  color: var(--color-surface);
  background: var(--color-status-dead);
  border-color: var(--color-status-dead);
}
button.status-quick.btn-activate {
  color: var(--color-electric-700);
  border-color: var(--color-electric-500);
}
button.status-quick.btn-activate:hover {
  color: var(--color-surface);
  background: var(--color-electric-500);
  border-color: var(--color-electric-500);
}
select.status-select {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  padding: 2px 4px;
  border-radius: var(--radius-2);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-soft);
  max-width: 9.5rem;
  cursor: pointer;
}

.empty {
  padding: var(--space-32);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  background:
    repeating-linear-gradient(
      135deg,
      var(--color-steel-100) 0,
      var(--color-steel-100) 8px,
      var(--color-surface) 8px,
      var(--color-surface) 16px
    );
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-4);
}

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

/* ---------- BADGES — enamelled plates / version stamps ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-soft);
  background: var(--color-steel-100);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
  line-height: 1.4;
  white-space: nowrap;
}
.badge--active {
  color: var(--color-status-healthy);
  background: var(--color-status-healthy-soft);
  border-color: var(--color-status-healthy);
}
.badge--active::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-status-healthy);
  box-shadow: 0 0 6px var(--color-status-healthy-soft);
}
.badge--danger {
  color: var(--color-status-dead);
  background: var(--color-status-dead-soft);
  border-color: var(--color-status-dead);
}
.badge--warn {
  color: var(--color-status-degraded);
  background: var(--color-status-degraded-soft);
  border-color: var(--color-status-degraded);
}
.badge--muted {
  color: var(--color-text-muted);
}
.badge--version {
  font-feature-settings: "tnum" 1, "zero" 1;
  color: var(--color-brass-700);
  background: var(--color-brass-100);
  border-color: var(--color-brass-500);
}

/* ---------- channel status badges — 5 graded levels ---------- */
/* level-1: active-real-time — brass plate with electric accent (top priority) */
.badge--level-1 {
  color: var(--color-brass-700);
  background: var(--color-brass-100);
  border-color: var(--color-brass-500);
  box-shadow: inset 0 0 0 1px var(--color-electric-bloom);
}
.badge--level-1::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-electric-500);
  box-shadow: 0 0 6px var(--color-electric-glow);
}
/* level-2: active — green / healthy */
.badge--level-2 {
  color: var(--color-status-healthy);
  background: var(--color-status-healthy-soft);
  border-color: var(--color-status-healthy);
}
.badge--level-2::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-status-healthy);
  box-shadow: 0 0 6px var(--color-status-healthy-soft);
}
/* level-3: evaluating — neutral gray */
.badge--level-3 {
  color: var(--color-text-muted);
  background: var(--color-steel-100);
  border-color: var(--color-border-strong);
}
.badge--level-3::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-text-muted);
}
/* level-4: suspect — amber / caution */
.badge--level-4 {
  color: var(--color-status-degraded);
  background: var(--color-status-degraded-soft);
  border-color: var(--color-status-degraded);
}
.badge--level-4::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-status-degraded);
  box-shadow: 0 0 6px var(--color-status-degraded-soft);
}
/* level-5: blocked — red / danger */
.badge--level-5 {
  color: var(--color-status-dead);
  background: var(--color-status-dead-soft);
  border-color: var(--color-status-dead);
}
.badge--level-5::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-status-dead);
  box-shadow: 0 0 6px var(--color-status-dead-soft);
}

/* ---------- CALLOUT — alert manifold strip ---------- */
.callout {
  position: relative;
  padding: var(--space-12) var(--space-20) var(--space-12) var(--space-32);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-left: 4px solid var(--color-text-soft);
  border-radius: var(--radius-2);
  font-size: var(--fs-14);
  color: var(--color-text-soft);
  box-shadow: var(--shadow-card);
}
.callout strong {
  color: var(--color-text);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--fs-12);
  margin-right: var(--space-8);
}
.callout::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: currentColor;
  transform: translateY(-50%);
  opacity: 0.7;
}
.callout--warn {
  border-left-color: var(--color-status-degraded);
  background: linear-gradient(
    to right,
    var(--color-status-degraded-soft) 0%,
    var(--color-surface) 18%
  );
  color: var(--color-brass-700);
}
.callout--danger {
  border-left-color: var(--color-status-dead);
  background: linear-gradient(
    to right,
    var(--color-status-dead-soft) 0%,
    var(--color-surface) 18%
  );
  color: var(--color-status-dead);
}

/* ============================================================
 * CONFIG LANDING — instrument bays
 * ============================================================ */
.config-landing { display: block; }

.config-landing__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-16);
  margin-bottom: var(--space-8);
}
.config-landing__header h1 {
  font-size: var(--fs-24);
  letter-spacing: var(--tracking-tight);
}
.config-landing__header .kicker {
  padding: 2px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
  background: var(--color-steel-100);
}
.config-landing__lede {
  font-size: var(--fs-13);
  color: var(--color-text-muted);
  margin-bottom: var(--space-24);
  max-width: 64ch;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-20);
  margin-top: var(--space-24);
}

.config-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-20);
  min-height: 132px;
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  overflow: hidden;
}
/* gauge bezel — graduation tick strip across the top */
.config-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--space-20);
  right: var(--space-20);
  height: 4px;
  background-image: repeating-linear-gradient(
    to right,
    var(--color-steel-400) 0,
    var(--color-steel-400) 1px,
    transparent 1px,
    transparent 8px
  );
}
/* hover affordance — electric tap glow at top-right corner port */
.config-card::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-steel-300);
  border: 1px solid var(--color-steel-400);
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.config-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-strong);
}
.config-card:hover::after {
  background: var(--color-electric-500);
  border-color: var(--color-electric-500);
  box-shadow: 0 0 0 1px var(--color-electric-500), 0 0 10px var(--color-electric-glow);
}

.config-card h3 {
  font-size: var(--fs-16);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
}
.config-card h3 small {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-brass-600);
  background: var(--color-brass-100);
  border: 1px solid var(--color-brass-500);
  padding: 1px 6px;
  border-radius: var(--radius-2);
}

.config-card p {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin-top: auto;
}

/* ============================================================
 * CRUD LIST — meter-graduated table
 * ============================================================ */
.crud-list { display: block; }

table.crud,
table.posts,
table.channels,
table.prompts,
table.settings-list {
  width: 100%;
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-4);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border-collapse: separate;
  border-spacing: 0;
}

table.crud thead th,
table.posts thead th,
table.channels thead th,
table.prompts thead th,
table.settings-list thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
  padding: var(--space-12) var(--space-16);
  background: var(--color-steel-100);
  border-bottom: 1px solid var(--color-border-strong);
  white-space: nowrap;
}
table.crud thead th a,
table.channels thead th a,
table.prompts thead th a {
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
table.crud thead th a:hover,
table.channels thead th a:hover,
table.prompts thead th a:hover { color: var(--color-text); }

table.crud tbody td,
table.posts tbody td,
table.channels tbody td,
table.prompts tbody td,
table.settings-list tbody td {
  padding: var(--space-12) var(--space-16);
  font-size: var(--fs-14);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-rule);
  vertical-align: middle;
}
table.crud tbody tr:last-child td,
table.posts tbody tr:last-child td,
table.channels tbody tr:last-child td,
table.prompts tbody tr:last-child td,
table.settings-list tbody tr:last-child td { border-bottom: 0; }

table.crud tbody tr,
table.channels tbody tr,
table.prompts tbody tr {
  transition: background var(--dur-fast) var(--ease-out);
}
table.crud tbody tr:hover td,
table.channels tbody tr:hover td,
table.prompts tbody tr:hover td {
  background: var(--color-steel-100);
}

/* monospace numeric-feeling cells for the trailing meta columns */
table.crud tbody td:nth-last-child(2),
table.channels tbody td.numeric,
table.prompts tbody td:nth-child(3),
table.prompts tbody td:nth-child(5) {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  color: var(--color-text-soft);
}

/* "Active" small column — dot indicator */
table.crud tbody td:nth-last-child(2) {
  width: 64px;
  text-align: center;
  font-size: var(--fs-16);
  color: var(--color-text-muted);
}

table.crud tbody td:last-child,
table.channels tbody td:last-child,
table.prompts tbody td:last-child {
  text-align: right;
  width: 1%;
}

/* active prompt rows — brass-tinted side band */
table.prompts tbody tr.is-active td {
  background: linear-gradient(
    to right,
    var(--color-brass-100) 0%,
    var(--color-brass-100) 3px,
    var(--color-surface) 3px
  );
}
table.prompts tbody tr.is-active:hover td {
  background: linear-gradient(
    to right,
    var(--color-brass-500) 0%,
    var(--color-brass-500) 3px,
    var(--color-steel-100) 3px
  );
}

/* ============================================================
 * FORMS — CRUD edit / new, channels edit, scoring rule form
 * Pipe-joint dividers between groups, machined inputs.
 * ============================================================ */
.crud-edit,
.channels-edit,
.rule-form,
.prompts-edit {
  display: block;
}

.crud-edit form,
.channels-edit form,
.prompts-edit form {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-4);
  padding: var(--space-24);
  box-shadow: var(--shadow-card);
  position: relative;
}
/* graduation strip on top of the form panel */
.crud-edit form::before,
.channels-edit form::before,
.prompts-edit form::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--space-24);
  right: var(--space-24);
  height: 4px;
  background-image: repeating-linear-gradient(
    to right,
    var(--color-steel-400) 0,
    var(--color-steel-400) 1px,
    transparent 1px,
    transparent 10px
  );
}

.crud-edit form > label,
.channels-edit form > label,
.prompts-edit form > label {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.crud-edit form > label > span:first-child,
.channels-edit form > label > span:first-child,
.prompts-edit form > label > span:first-child {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}

.crud-edit form input[type="text"],
.crud-edit form input[type="number"],
.crud-edit form input[type="email"],
.crud-edit form input:not([type]),
.crud-edit form textarea,
.crud-edit form select,
.channels-edit form input[type="text"],
.channels-edit form input[type="number"],
.channels-edit form input:not([type]),
.channels-edit form textarea,
.channels-edit form select,
.prompts-edit form input[type="text"],
.prompts-edit form input[type="number"],
.prompts-edit form input:not([type]),
.prompts-edit form textarea,
.prompts-edit form select {
  width: 100%;
  padding: 10px 12px;
  font-size: var(--fs-14);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  box-shadow: inset 0 1px 0 rgba(15,20,25,0.02);
}
.crud-edit form textarea,
.channels-edit form textarea,
.prompts-edit form textarea {
  font-family: var(--font-mono);
  line-height: 1.55;
  min-height: 140px;
  resize: vertical;
}
.crud-edit form input:focus,
.crud-edit form textarea:focus,
.crud-edit form select:focus,
.channels-edit form input:focus,
.channels-edit form textarea:focus,
.channels-edit form select:focus,
.prompts-edit form input:focus,
.prompts-edit form textarea:focus,
.prompts-edit form select:focus {
  outline: none;
  border-color: var(--color-electric-500);
  box-shadow: 0 0 0 3px var(--color-electric-bloom);
}

/* "Active" checkbox row */
.crud-edit form label.inline,
.channels-edit form label.inline {
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-soft);
  padding: var(--space-8) 0 0;
}

.readonly-value {
  display: inline-block;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  background: var(--color-steel-100);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-2);
  color: var(--color-text-soft);
}

/* form actions strip — primary brass + secondary ghost */
.form-actions,
.form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-rule);
  margin-top: var(--space-8);
}
.form-actions button,
.form-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: 8px 18px;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  box-shadow: var(--shadow-inset-pipe);
}
.form-actions button:hover,
.form-actions a:hover {
  border-color: var(--color-steel-600);
  background: var(--color-steel-100);
}
.form-actions button:active { transform: translateY(1px); }
.form-actions button[type="submit"],
.form-actions .primary,
.form-actions button.primary {
  color: var(--color-surface);
  background: var(--color-brass-500);
  border-color: var(--color-brass-600);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 1px 0 var(--color-brass-700);
}
.form-actions button[type="submit"]:hover,
.form-actions .primary:hover,
.form-actions button.primary:hover {
  background: var(--color-brass-600);
  border-color: var(--color-brass-700);
}
.form-actions button.danger,
.form-actions .danger {
  color: var(--color-surface);
  background: var(--color-status-dead);
  border-color: var(--color-status-dead);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.08);
}
.form-actions a {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-soft);
  box-shadow: none;
}
.form-actions a:hover {
  background: var(--color-steel-100);
  color: var(--color-text);
}

/* ---------- scoring rule form (uses .field semantic) ---------- */
.rule-form .form {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-4);
  padding: var(--space-24);
  box-shadow: var(--shadow-card);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.field--narrow { max-width: 180px; }
.field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.field__label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}
.field__hint {
  font-size: var(--fs-12);
  color: var(--color-text-muted);
}
.field input[type="text"],
.field input[type="number"],
.field textarea,
.field select {
  width: 100%;
  padding: 10px 12px;
  font-size: var(--fs-14);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea {
  font-family: var(--font-mono);
  line-height: 1.55;
  min-height: 140px;
  resize: vertical;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-electric-500);
  box-shadow: 0 0 0 3px var(--color-electric-bloom);
}

/* ============================================================
 * NEEDS-REVIEW QUEUE — alert manifold at the top of channels
 * ============================================================ */
.needs-review {
  position: relative;
  margin-bottom: var(--space-32);
  padding: var(--space-20) var(--space-20) var(--space-24);
  background: var(--color-surface);
  border: 1px solid var(--color-status-degraded);
  border-left: 4px solid var(--color-status-degraded);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-card);
}
.needs-review::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--space-20);
  right: var(--space-20);
  height: 4px;
  background-image: repeating-linear-gradient(
    to right,
    var(--color-status-degraded) 0,
    var(--color-status-degraded) 1px,
    transparent 1px,
    transparent 8px
  );
  opacity: 0.7;
}
.needs-review h2 {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  letter-spacing: var(--tracking-tight);
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
  color: var(--color-text);
}
.needs-review h2::before {
  content: "ALERT";
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  font-weight: 500;
  color: var(--color-status-degraded);
  background: var(--color-status-degraded-soft);
  border: 1px solid var(--color-status-degraded);
  padding: 2px 8px;
  border-radius: var(--radius-2);
}
.needs-review table.channels {
  border-color: var(--color-status-degraded);
}
.needs-review .needs-review-row td {
  background: linear-gradient(
    to right,
    var(--color-status-degraded-soft) 0%,
    var(--color-surface) 6%
  );
}
.needs-review .needs-review-row:hover td {
  background: linear-gradient(
    to right,
    var(--color-status-degraded-soft) 0%,
    var(--color-steel-100) 6%
  );
}
.needs-review .empty {
  background: var(--color-surface);
  border-color: var(--color-border);
  border-style: dashed;
  color: var(--color-text-muted);
}

.all-channels h2,
.metadata h2 {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-16);
  display: flex;
  align-items: baseline;
  gap: var(--space-16);
}
.all-channels h2::after,
.metadata h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-rule);
  position: relative;
  top: -4px;
}

/* ---------- channels metadata (kv pairs) ---------- */
.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-24);
  row-gap: var(--space-8);
  padding: var(--space-20) var(--space-24);
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-24);
  font-size: var(--fs-13);
}
.kv dt {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  align-self: center;
}
.kv dd {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  color: var(--color-text);
  align-self: center;
  margin: 0;
}

/* ---------- filters bar (channels + posts) ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-20);
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-4);
  margin-bottom: var(--space-16);
  box-shadow: var(--shadow-card);
}
.filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}
.filters input,
.filters select {
  padding: 6px 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
  min-width: 140px;
}
.filters select[multiple] { min-height: 80px; }
.filters input:focus,
.filters select:focus {
  outline: none;
  border-color: var(--color-electric-500);
  box-shadow: 0 0 0 3px var(--color-electric-bloom);
}
.filters button {
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-surface);
  background: var(--color-brass-500);
  border: 1px solid var(--color-brass-600);
  border-radius: var(--radius-2);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 1px 0 var(--color-brass-700);
}
.filters button:hover {
  background: var(--color-brass-600);
  border-color: var(--color-brass-700);
}
.filters > a {
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-soft);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.filters > a:hover {
  color: var(--color-text);
  border-color: var(--color-steel-600);
}

/* ---------- pager ---------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-20);
  padding: var(--space-16) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pager a {
  color: var(--color-text-soft);
  padding: 4px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.pager a:hover {
  color: var(--color-text);
  border-color: var(--color-steel-600);
}

/* ============================================================
 * SCORING RULES LIST — drag-handle stack
 * ============================================================ */
.rules-list { display: block; }

ol.rules {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  list-style: none;
  padding: 0;
  margin: var(--space-20) 0 0;
}
ol.rules li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-16);
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
ol.rules li:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-card-hover);
}
ol.rules li.is-inactive {
  opacity: 0.55;
  background:
    repeating-linear-gradient(
      135deg,
      var(--color-steel-100) 0,
      var(--color-steel-100) 6px,
      var(--color-surface) 6px,
      var(--color-surface) 12px
    );
}
ol.rules li .handle {
  cursor: grab;
  color: var(--color-text-muted);
  font-size: var(--fs-16);
  letter-spacing: 1px;
  user-select: none;
  text-align: center;
  font-family: var(--font-mono);
}
ol.rules li .handle:active { cursor: grabbing; }
ol.rules li a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-12);
  color: var(--color-text);
}
ol.rules li a strong {
  font-family: var(--font-display);
  font-size: var(--fs-15);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
ol.rules li .muted {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--color-text-muted);
  letter-spacing: 0;
  text-transform: none;
}
ol.rules li.dragging {
  opacity: 0.6;
  box-shadow: var(--shadow-port-glow);
}

/* ============================================================
 * PROMPTS DIFF
 * ============================================================ */
.prompts-diff { display: block; }
.prompts-diff h1 {
  font-size: var(--fs-20);
  margin-bottom: var(--space-20);
}
.diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  margin-bottom: var(--space-20);
}
.diff-grid article {
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.diff-grid article h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-muted);
  padding: var(--space-12) var(--space-16);
  background: var(--color-steel-100);
  border-bottom: 1px solid var(--color-border-strong);
  margin: 0;
}
.diff-pane {
  margin: 0;
  padding: var(--space-16);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-surface);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 70vh;
  overflow: auto;
}

/* ============================================================
 * SETTINGS — key/value valve bank, inline editable
 * ============================================================ */
.settings { display: block; }
.settings > h1 + p {
  margin-bottom: var(--space-16);
}

table.settings-list code {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--color-brass-700);
  background: var(--color-brass-100);
  border: 1px solid var(--color-brass-300);
  padding: 2px 8px;
  border-radius: var(--radius-2);
  letter-spacing: 0;
}
table.settings-list form.inline {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  margin: 0;
}
table.settings-list form.inline input {
  flex: 1;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  min-width: 160px;
}
table.settings-list form.inline input:focus {
  outline: none;
  border-color: var(--color-electric-500);
  box-shadow: 0 0 0 3px var(--color-electric-bloom);
}
table.settings-list form.inline button {
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
table.settings-list form.inline button:hover {
  color: var(--color-surface);
  background: var(--color-brass-500);
  border-color: var(--color-brass-600);
}
table.settings-list td small {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--color-text-muted);
}

/* ============================================================
 * INLINE forms (small wrappers used in CRUD list delete)
 * ============================================================ */
form.inline { display: inline-block; margin: 0; }

/* ============================================================
 * RANGE TABS (overview) — also used by config sub-tabs if needed
 * ============================================================ */
.range-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
  overflow: hidden;
  background: var(--color-surface);
}
.range-tabs a {
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-soft);
  border-right: 1px solid var(--color-border);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.range-tabs a:last-of-type { border-right: 0; }
.range-tabs a:hover { background: var(--color-steel-100); color: var(--color-text); }
.range-tabs a.is-active {
  background: var(--color-electric-bloom);
  color: var(--color-electric-700);
}
.range-tabs form.inline button {
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--color-text-soft);
  background: var(--color-steel-100);
  border-left: 1px solid var(--color-border-strong);
  cursor: pointer;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .config-card,
  ol.rules li {
    transition: none;
  }
}

/* ============================================================
 * TENANT FILTER — compact inline dropdown on the overview page
 * ============================================================ */
.tenant-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-20);
  padding: var(--space-8) var(--space-16);
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-card);
}

.tenant-filter__label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.tenant-filter__select {
  padding: 6px 28px 6px 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
  min-width: 180px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-soft) 50%),
    linear-gradient(135deg, var(--color-text-soft) 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 9px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.tenant-filter__select:focus {
  outline: none;
  border-color: var(--color-electric-500);
  box-shadow: 0 0 0 3px var(--color-electric-bloom);
}

.tenant-filter__clear {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-soft);
  padding: 4px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.tenant-filter__clear:hover {
  color: var(--color-text);
  border-color: var(--color-steel-600);
}

/* Chart card "By tenant ->" link */
.chart-link {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-left: var(--space-12);
  padding-bottom: 1px;
  border-bottom: 1px dotted var(--color-border-strong);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.chart-link:hover {
  color: var(--color-electric-700);
  border-bottom-color: var(--color-electric-500);
}

/* ============================================================
 * COST BY-TENANT PAGE
 * ============================================================ */
.cost-by-tenant { display: block; }

.cost-by-tenant__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-24);
}
.cost-by-tenant__header h1 {
  font-size: var(--fs-24);
  letter-spacing: var(--tracking-tight);
  display: flex;
  align-items: baseline;
  gap: var(--space-16);
}
.cost-by-tenant__header h1::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-rule);
  position: relative;
  top: -4px;
}

table.cost-table {
  width: 100%;
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-4);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border-collapse: separate;
  border-spacing: 0;
}
table.cost-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
  padding: var(--space-12) var(--space-16);
  background: var(--color-steel-100);
  border-bottom: 1px solid var(--color-border-strong);
  white-space: nowrap;
}
table.cost-table thead th.num { text-align: right; }
table.cost-table tbody td {
  padding: var(--space-12) var(--space-16);
  font-size: var(--fs-14);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-rule);
  vertical-align: middle;
}
table.cost-table tbody tr:last-child td { border-bottom: 0; }
table.cost-table tbody tr:hover td { background: var(--color-steel-100); }
table.cost-table td.num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  text-align: right;
  letter-spacing: var(--tracking-tight);
}
table.cost-table tfoot td {
  padding: var(--space-12) var(--space-16);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-steel-100);
  border-top: 2px solid var(--color-border-strong);
}
table.cost-table tfoot td.num {
  text-align: right;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: var(--tracking-tight);
}