/* Generated from meshcoreDashboard/web/ by scripts/sync-web.sh.
   Edit the source there, not this copy — the next sync overwrites it. */
/* ============================================================================
   MeshCore Console — "Mesh" design system

   A dark hub-and-spoke instrument board. A central server node with satellite
   panels around it, joined by glowing connector lines: the picture says "one
   private server, many capabilities, all yours" before a word is read.

   This replaces the earlier light "Mainframe Terminal" treatment, which
   inherited the marketing site's palette. This one is its own dark world and
   sits inside the site as a deliberate contrast — you are looking at the
   machine, not at a page about the machine.

   Rules that hold it together:
     - One ground: near-black navy. Panels are lifted, never outlined in white.
     - Cyan is structure and life (connectors, borders, live values). It is
       never a status colour, so a lit cyan line never reads as "healthy".
     - Status is its own scale: green / amber / red / slate. Slate is a
       first-class state, not an absence.
     - Every number is tabular. Nothing shifts on refresh.
     - Glow is earned: it marks live data, not chrome.

   Layout is narrow-first. The spec is explicit that "is my agent working" is a
   phone question, so the base rules are the 360px stack; the hub-and-spoke
   geometry and its connector lines only appear once there is room for them.
   ========================================================================== */

/* ── tokens ─────────────────────────────────────────────────────────────── */

.mc-console {
  /* Ground. Three depths, all cool near-black. */
  --bg: #070b14;
  --bg-panel: #0d1420;
  --bg-panel-2: #111a29;
  --bg-inset: #060a11;

  /* Structure. Cyan is the mesh itself. */
  --line: #1b2942;
  --line-bright: #263d5c;
  --cyan: #22d3ee;
  --cyan-dim: #0e7490;
  --cyan-glow: rgba(34, 211, 238, .35);

  /* Type. */
  --fg: #e8f0fa;
  --fg-mid: #8da2be;
  --fg-dim: #5b7192;

  /* Status. A separate scale from cyan on purpose: if the accent colour also
     meant "good", every connector line would read as a health claim. */
  --ok: #34d399;
  --warn: #fbbf24;
  --red: #f87171;
  --grey: #64748b;

  --r: 10px;          /* panels */
  --r-sm: 6px;        /* chips, cells */

  --mono: var(--font-mono, ui-monospace, 'Cascadia Mono', Consolas, monospace);

  color: var(--fg);
  background: var(--bg);
  /* The site's body is light; this page paints its own world edge to edge
     rather than sitting as a dark card on white. */
  margin: 0 calc(50% - 50vw);
  padding: 0 max(16px, calc(50vw - 50%));
  font-variant-numeric: tabular-nums;
  position: relative;
  overflow: hidden;
}

/* Faint grid: a machined surface under everything. Masked to a soft ellipse so
   it reads as depth rather than as graph paper. */
.mc-console::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  opacity: .16;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 40%, transparent 100%);
}

.mc-inner { position: relative; z-index: 1; padding: 32px 0 56px; }

/* ── header ─────────────────────────────────────────────────────────────── */

.mc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin-bottom: 18px;
}

.mc-head h1 {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  margin: 0;
  color: var(--fg);
  letter-spacing: -.01em;
  flex: 1 1 auto;
}

.mc-boxid {
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--fg-dim);
  letter-spacing: .03em;
  margin: 0;
}

/* ── status banner ──────────────────────────────────────────────────────────
   The loudest chrome on the page. A dashboard whose data has quietly stopped
   updating is worse than no dashboard. */

.mc-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border: 1px solid var(--line-bright);
  border-radius: var(--r);
  background: var(--bg-panel);
  font-family: var(--mono);
  font-size: .8125rem;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.mc-status-word { font-weight: 700; letter-spacing: .1em; }
.mc-status-detail { color: var(--fg-mid); }

.mc-status[data-state="live"] { border-color: rgba(52, 211, 153, .4); }
.mc-status[data-state="live"] .mc-status-word { color: var(--ok); }

.mc-status[data-state="stale"] {
  border-color: rgba(251, 191, 36, .5);
  background: rgba(251, 191, 36, .06);
}
.mc-status[data-state="stale"] .mc-status-word { color: var(--warn); }

.mc-status[data-state="down"] {
  border-color: rgba(248, 113, 113, .6);
  background: rgba(248, 113, 113, .08);
}
.mc-status[data-state="down"] .mc-status-word { color: var(--red); }

/* When the collector is presumed down the data stays on screen — last known
   good beats an error strip — but it must not read as current. */
.mc-console.is-down .mc-value,
.mc-console.is-down .mc-metric-value,
.mc-console.is-down .mc-hero-stat b {
  text-decoration: line-through;
  opacity: .5;
}

/* ── the mesh: hub and spokes ───────────────────────────────────────────── */

.mc-mesh { display: grid; gap: 16px; position: relative; }

/* ── the hub ────────────────────────────────────────────────────────────── */

.mc-hub {
  position: relative;
  border: 1px solid var(--line-bright);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 120% 100% at 50% 0%, rgba(34, 211, 238, .10), transparent 60%),
    linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  padding: 26px 22px 22px;
  text-align: center;
  overflow: hidden;
}

/* The server block: a stack of slabs drawn in CSS rather than shipped as an
   image, so it stays crisp at any size and follows the tokens. */
.mc-hub-server {
  width: 92px;
  height: 62px;
  margin: 0 auto 14px;
  border-radius: 8px;
  background: linear-gradient(160deg, #1d2b42, #0f1a2b);
  border: 1px solid var(--line-bright);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, .12),
    0 0 34px rgba(34, 211, 238, .18),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 0 14px;
}

/* Drive bays. */
.mc-hub-server i {
  display: block;
  height: 5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--line-bright), #16233a);
  position: relative;
}

.mc-hub-server i::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
}

.mc-hub h2 {
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  margin: 0 0 4px;
  color: var(--fg);
  letter-spacing: -.01em;
}

.mc-hub-sub {
  margin: 0;
  color: var(--cyan);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: var(--mono);
}

/* Headline figures inside the hub — the answer to "is it working" before any
   panel is read. */
.mc-hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.mc-hero-stat { text-align: center; min-width: 0; }

.mc-hero-stat b {
  display: block;
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cyan);
  text-shadow: 0 0 18px var(--cyan-glow);
  line-height: 1.15;
}

.mc-hero-stat span {
  display: block;
  font-size: .5625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-top: 3px;
}

/* ── satellite panels ───────────────────────────────────────────────────── */

.mc-panel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-panel);
  overflow: hidden;
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Hairline of cyan on the top edge — the connection to the hub, implied even
   on narrow screens where the drawn lines are absent. */
.mc-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan-dim), transparent);
  opacity: .6;
}

.mc-panel-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .015);
}

.mc-panel-head h2 {
  font-size: .75rem;
  margin: 0;
  color: var(--fg);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
}

/* Panel glyph: a cyan-tinted square holding an inline SVG mark. */
.mc-glyph {
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  background: rgba(34, 211, 238, .1);
  border: 1px solid rgba(34, 211, 238, .22);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--cyan);
}

.mc-glyph svg { width: 12px; height: 12px; display: block; }

.mc-panel-count {
  font-family: var(--mono);
  font-size: .625rem;
  color: var(--fg-dim);
  letter-spacing: .06em;
  white-space: nowrap;
}

.mc-panel-body { padding: 14px 15px; min-width: 0; flex: 1 1 auto; }

.mc-note {
  font-size: .6875rem;
  line-height: 1.6;
  color: var(--fg-dim);
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.mc-empty {
  color: var(--fg-dim);
  margin: 0;
  padding: 18px 0;
  text-align: center;
  font-size: .8125rem;
}

/* ── connectors ─────────────────────────────────────────────────────────────
   One absolutely-positioned SVG behind the grid, with endpoints measured from
   the live DOM. SVG rather than pseudo-element borders because the lines curve
   toward the hub and must be re-measured on resize, which CSS alone cannot do.
   Purely decorative: aria-hidden, and the layout is complete without it. */

.mc-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* Panels sit above the cables. The SVG is excluded from this rule: it is a
   grid child too, and giving it position:relative would take it out of the
   absolute positioning that makes it span the whole mesh — which is exactly
   what happened, leaving it sized to one grid cell with the paths drawn off
   its edge. */
.mc-mesh > *:not(.mc-links) { position: relative; z-index: 1; }
.mc-links { z-index: 0; }

.mc-link { fill: none; stroke: var(--cyan-dim); stroke-width: 1.25; opacity: .45; }
.mc-link-dot { fill: var(--cyan); opacity: 0; }

/* ── status lamps ───────────────────────────────────────────────────────────
   Never the sole carrier of meaning: every lamp sits beside a text state,
   because colour alone excludes readers and a printed page has none. */

.mc-lamp {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
  background: var(--grey);
}

.mc-lamp--ok   { background: var(--ok);   box-shadow: 0 0 8px rgba(52, 211, 153, .7); }
.mc-lamp--warn { background: var(--warn); box-shadow: 0 0 8px rgba(251, 191, 36, .7); }
.mc-lamp--red  { background: var(--red);  box-shadow: 0 0 9px rgba(248, 113, 113, .8); }

/* The three greys look identical on purpose: to a reader "not measured", "not
   provisioned" and "cannot apply here" all mean the same thing — draw no
   conclusion from this row. The text says which. */
.mc-lamp--unknown,
.mc-lamp--not_configured,
.mc-lamp--not_applicable { background: var(--grey); box-shadow: none; }

/* ── health rows ────────────────────────────────────────────────────────── */

.mc-health {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.mc-hrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "lamp label value"
    "lamp detail detail"
    "spark spark spark";
  align-items: baseline;
  column-gap: 10px;
  row-gap: 2px;
  padding: 10px 12px;
  background: var(--bg-panel);
  min-width: 0;
}

.mc-hrow > .mc-lamp { grid-area: lamp; align-self: center; }

.mc-hrow[data-state="warn"] { background: rgba(251, 191, 36, .05); }
.mc-hrow[data-state="red"]  { background: rgba(248, 113, 113, .07); }

.mc-hrow-label {
  grid-area: label;
  font-weight: 500;
  font-size: .8125rem;
  color: var(--fg);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-hrow-detail {
  grid-area: detail;
  font-size: .6875rem;
  line-height: 1.4;
  color: var(--fg-dim);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-hrow-value {
  grid-area: value;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 600;
  color: var(--fg);
  text-align: right;
  white-space: nowrap;
  justify-self: end;
  min-width: 0;
}

/* The rule that produced the colour, shown rather than hidden — a reader
   should be able to check the threshold instead of trusting the lamp. One
   ellipsised line; the full text is in the title attribute. */
.mc-hrow-threshold {
  display: block;
  font-size: .5625rem;
  font-weight: 400;
  color: var(--fg-dim);
  opacity: .8;
  margin-top: 1px;
  max-width: 20ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.mc-hrow-spark { grid-area: spark; margin-top: 6px; }

/* ── metric tiles ───────────────────────────────────────────────────────── */

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

.mc-metric {
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px;
  min-width: 0;
}

.mc-metric-label {
  display: block;
  font-size: .5625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.mc-metric-value {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--cyan);
  line-height: 1.15;
  margin-top: 4px;
  text-shadow: 0 0 16px var(--cyan-glow);
}

.mc-metric-sub { display: block; font-size: .625rem; color: var(--fg-dim); margin-top: 3px; }

/* ── agent cards ────────────────────────────────────────────────────────── */

.mc-agents { display: grid; gap: 12px; min-width: 0; }

.mc-agent {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-inset);
  min-width: 0;
  overflow: hidden;
}

.mc-agent-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.mc-agent-name { font-weight: 600; font-size: .9375rem; color: var(--fg); }

.mc-agent-role {
  font-size: .5625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.mc-agent-body { padding: 12px; min-width: 0; }

.mc-agent-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.mc-agent-stat { min-width: 0; }

.mc-agent-stat b {
  display: block;
  font-family: var(--mono);
  font-size: .9375rem;
  color: var(--fg);
  line-height: 1.2;
}

.mc-agent-stat span {
  display: block;
  font-size: .5625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-top: 2px;
}

.mc-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.mc-chip {
  font-family: var(--mono);
  font-size: .625rem;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-bright);
  background: rgba(255, 255, 255, .02);
  color: var(--fg-mid);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.mc-chip--connected { border-color: rgba(52, 211, 153, .4); color: var(--ok); }

.mc-subhead {
  font-size: .5625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 14px 0 7px;
}

/* ── data surfaces ──────────────────────────────────────────────────────── */

.mc-screen {
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px;
  /* Wide charts scroll inside their own container. The page body must never
     scroll horizontally on a phone. */
  overflow-x: auto;
}

.mc-spark-area { fill: rgba(34, 211, 238, .14); }
.mc-spark-line { fill: none; stroke: var(--cyan); stroke-width: 1.5; }
.mc-spark-head { fill: var(--cyan); }

.mc-gauge-cell { fill: rgba(139, 162, 190, .16); }
.mc-gauge-cell.is-lit { fill: var(--cyan); }
.mc-gauge-cell--warn.is-lit { fill: var(--warn); }
.mc-gauge-cell--red.is-lit  { fill: var(--red); }

.mc-hm-label, .mc-tl-label { font-family: var(--mono); font-size: 8px; fill: var(--fg-dim); }

.mc-heatmap, .mc-timeline { display: block; }
.mc-heatmap { min-width: 300px; }
.mc-timeline { min-width: 520px; }

.mc-tl-grid { stroke: var(--line-bright); stroke-width: 1; opacity: .5; }
.mc-tl-bar { fill: var(--cyan-dim); }
.mc-tl-bar.is-over { fill: var(--red); }
.mc-tl-overflow { fill: rgba(248, 113, 113, .12); }

.mc-tl-count { font-family: var(--mono); font-size: 9px; font-weight: 700; fill: var(--fg-dim); }
.mc-tl-count.is-over { fill: var(--red); }

/* ── bar lists ──────────────────────────────────────────────────────────── */

.mc-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }

.mc-bar {
  display: grid;
  grid-template-columns: minmax(58px, 1fr) 2fr auto;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: .6875rem;
}

.mc-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-mid); }

.mc-bar-track { background: rgba(139, 162, 190, .12); height: 7px; border-radius: 4px; overflow: hidden; }
.mc-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); border-radius: 4px; }

.mc-bar-value { font-weight: 600; text-align: right; color: var(--fg); }

/* ── tables ─────────────────────────────────────────────────────────────── */

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

.mc-table { width: 100%; border-collapse: collapse; font-size: .75rem; min-width: 560px; }

.mc-table th {
  text-align: left;
  font-size: .5625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-bright);
  white-space: nowrap;
}

.mc-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--fg-mid);
  vertical-align: middle;
}

.mc-table tbody tr:hover { background: rgba(255, 255, 255, .02); }
.mc-table td:first-child { color: var(--fg); }

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

/* Drift is the point of the schedule panel, so it is tinted, not just tagged. */
.mc-row--drift { background: rgba(251, 191, 36, .05); }
.mc-row--system td { opacity: .55; }

.mc-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.mc-tag--matched { color: var(--ok); }
.mc-tag--drift   { color: var(--warn); }
.mc-tag--system  { color: var(--grey); }
.mc-tag--error   { color: var(--red); }
.mc-tag--unknown { color: var(--grey); }

.mc-warnbar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(251, 191, 36, .35);
  background: rgba(251, 191, 36, .07);
  border-radius: var(--r-sm);
  margin-bottom: 12px;
  font-size: .75rem;
  color: var(--fg-mid);
  line-height: 1.5;
}

.mc-warnbar .mc-lamp { margin-top: 4px; }
.mc-warnbar strong { display: block; color: var(--fg); margin-bottom: 2px; font-size: .8125rem; }

/* ── activity feed ──────────────────────────────────────────────────────── */

.mc-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.mc-filter {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-mid);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.mc-filter:hover:not(:disabled) { border-color: var(--cyan-dim); color: var(--fg); }

.mc-filter[aria-pressed="true"] {
  background: rgba(34, 211, 238, .12);
  border-color: var(--cyan);
  color: var(--cyan);
}

/* A class with no entries stays visible and disabled: the reader learns that
   guarded actions exist as a concept and that none have occurred. Hiding the
   chip would teach nothing. */
.mc-filter:disabled { opacity: .35; cursor: not-allowed; }

.mc-feed { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow-y: auto; }

.mc-event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 11px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.mc-event-time { font-family: var(--mono); font-size: .6875rem; color: var(--fg-dim); white-space: nowrap; }
.mc-event-title { font-weight: 500; font-size: .8125rem; color: var(--fg); }
.mc-event-detail { font-size: .6875rem; color: var(--fg-dim); overflow-wrap: anywhere; margin-top: 1px; }
.mc-event-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; align-items: center; }
.mc-ref { font-family: var(--mono); font-size: .625rem; color: var(--cyan-dim); }

/* ── P21 write-flag plate ───────────────────────────────────────────────────
   The spec requires this to be explicit and prominent: a customer should never
   be unsure whether their agents can write to the ERP. Full width, and never
   blank — NOT CONFIGURED is a state, not an absence. */

.mc-plate {
  border: 1px solid var(--line-bright);
  border-radius: var(--r-sm);
  background: var(--bg-inset);
  padding: 18px;
  text-align: center;
  margin-bottom: 12px;
}

.mc-plate-label {
  display: block;
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.mc-plate-value {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.05rem, 3.4vw, 1.5rem);
  letter-spacing: .06em;
  margin-top: 6px;
  color: var(--grey);
}

.mc-plate--true  { border-color: rgba(248, 113, 113, .5); }
.mc-plate--true .mc-plate-value { color: var(--red); }
.mc-plate--false { border-color: rgba(52, 211, 153, .4); }
.mc-plate--false .mc-plate-value { color: var(--ok); }

/* ── definition lists ───────────────────────────────────────────────────── */

.mc-deflist { display: grid; gap: 0; margin: 0; min-width: 0; }

.mc-deflist > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.mc-deflist > div:last-child { border-bottom: 0; }

.mc-deflist dt {
  font-size: .5625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}

.mc-deflist dd {
  margin: 0;
  font-size: .8125rem;
  color: var(--fg);
  text-align: right;
  min-width: 0;
  /* Unit names and paths have no spaces to break at, so break anywhere rather
     than widen the page. */
  overflow-wrap: anywhere;
}

/* ── capability rail ────────────────────────────────────────────────────────
   The four things the box provides, echoing the reference's base plate. Static
   product labels, not live readings — dressing them up as measurements would
   be inventing telemetry. */

.mc-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.mc-rail-item {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-panel);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mc-rail-item b {
  display: block;
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg);
}

.mc-rail-item span { display: block; font-size: .625rem; color: var(--fg-dim); margin-top: 2px; }

/* ── footer bar ─────────────────────────────────────────────────────────── */

.mc-footbar {
  margin-top: 24px;
  padding: 14px 18px;
  border: 1px solid var(--line-bright);
  border-radius: var(--r);
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .05), transparent);
  text-align: center;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-mid);
}

.mc-footbar b { color: var(--cyan); font-weight: 600; }

/* ── responsive ─────────────────────────────────────────────────────────── */

/* Narrow screens: the label matters more than keeping the value on the same
   line, and a value column squeezed to a few characters wastes the width it
   costs. Below 640px the value drops beneath the label and the label takes the
   full width. */
@media (max-width: 639px) {
  .mc-hrow {
    grid-template-areas:
      "lamp label label"
      "lamp value value"
      "lamp detail detail"
      "spark spark spark";
    row-gap: 3px;
  }

  .mc-hrow-label { white-space: normal; overflow: visible; }

  .mc-hrow-value {
    justify-self: start;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    /* A flex row will not shrink below its longest child without this, and the
       threshold text would push the page wide. */
    min-width: 0;
    max-width: 100%;
  }

  .mc-hrow-threshold {
    margin-top: 0;
    max-width: none;
    text-align: left;
    min-width: 0;
  }

  .mc-hrow-detail { white-space: normal; }
}

@media (min-width: 720px) {
  .mc-mesh { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-hub { grid-column: 1 / -1; }
  .mc-panel--wide { grid-column: 1 / -1; }
}

/* The hub-and-spoke geometry. Below this width there is not room for two
   satellite columns either side of the hub without squeezing all three, so the
   layout stays a plain grid and the connectors stay hidden. */
@media (min-width: 1080px) {
  .mc-mesh {
    /* The centre column is narrower than the flanks: the hub is a focal point,
       not a content panel, and giving it equal width left it marooned in empty
       space while the health list ran on beneath it. */
    grid-template-columns: minmax(0, 1fr) minmax(250px, .62fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
  }

  /* Hub in the middle column, spanning the two satellite rows and centred
     vertically between them.

     Not sticky. Sticky kept it on screen while a long list scrolled, but it
     also detached the hub from the panels it is supposed to be wired to: the
     lower cables became long vertical runs down the gutters instead of short
     links to something beside them. A hub-and-spoke picture only reads if the
     spokes are visibly short. */
  .mc-hub { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

  .mc-panel--l1 { grid-column: 1; grid-row: 1; }
  .mc-panel--l2 { grid-column: 1; grid-row: 2; }
  .mc-panel--r1 { grid-column: 3; grid-row: 1; }
  .mc-panel--r2 { grid-column: 3; grid-row: 2; }
  .mc-panel--wide { grid-column: 1 / -1; }

  /* Cap the satellites so the four rows stay balanced around the hub — an
     8000px page with a hub stranded at the top is not a hub-and-spoke view.

     The cap is on the panel BODY, not on an inner list, so whatever overflows
     scrolls as one region and the panel's own explanatory note stays anchored
     at the bottom. Capping an inner list instead cut a bar in half mid-row,
     which reads as a rendering fault rather than as a list that continues. */
  .mc-panel--l1 .mc-panel-body,
  .mc-panel--l2 .mc-panel-body,
  .mc-panel--r1 .mc-panel-body,
  .mc-panel--r2 .mc-panel-body {
    max-height: 560px;
    overflow-y: auto;
    /* Scrollbars styled to the panel rather than the OS default, which is a
       bright slab on a dark ground. */
    scrollbar-width: thin;
    scrollbar-color: var(--line-bright) transparent;
  }

  .mc-panel--l1 .mc-panel-body::-webkit-scrollbar,
  .mc-panel--l2 .mc-panel-body::-webkit-scrollbar,
  .mc-panel--r1 .mc-panel-body::-webkit-scrollbar,
  .mc-panel--r2 .mc-panel-body::-webkit-scrollbar { width: 8px; }

  .mc-panel--l1 .mc-panel-body::-webkit-scrollbar-thumb,
  .mc-panel--l2 .mc-panel-body::-webkit-scrollbar-thumb,
  .mc-panel--r1 .mc-panel-body::-webkit-scrollbar-thumb,
  .mc-panel--r2 .mc-panel-body::-webkit-scrollbar-thumb {
    background: var(--line-bright);
    border-radius: 4px;
  }

  /* The feed has its own cap on narrow screens; inside a capped panel it would
     be a scroll region within a scroll region, which traps the wheel. */
  .mc-panel--r2 .mc-feed { max-height: none; overflow: visible; }
}

/* ── motion ─────────────────────────────────────────────────────────────────
   Three animations, all decorative: the hub's drive lamp, the pulse travelling
   each connector, and the live lamp. A reader who asked for reduced motion gets
   none of them, and the page is complete without them. */

@media (prefers-reduced-motion: no-preference) {
  .mc-hub-server i:nth-child(2)::after { animation: mc-blink 2.6s ease-in-out infinite; }

  @keyframes mc-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
  }

  .mc-status[data-state="live"] .mc-lamp--ok { animation: mc-pulse 2.4s ease-in-out infinite; }

  @keyframes mc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .mc-link-dot { display: none; }
}

/* ── print ──────────────────────────────────────────────────────────────────
   A printed console is a record of a moment: the timestamp must survive, the
   interactive chrome must not, and the dark ground must not empty a cartridge. */

@media print {
  .mc-console { background: #fff; color: #000; margin: 0; padding: 0; }
  .mc-console::before, .mc-links, .mc-filters { display: none; }
  .mc-panel, .mc-hub, .mc-metric, .mc-screen, .mc-rail-item {
    background: #fff; border-color: #999; break-inside: avoid;
  }
  .mc-panel-head h2, .mc-hrow-label, .mc-metric-value, .mc-hero-stat b,
  .mc-hub h2, .mc-agent-name { color: #000; text-shadow: none; }
  .mc-feed { max-height: none; overflow: visible; }
}