:root {
  color-scheme: dark;

  /* Color */
  --color-bg: #080d0f;
  --color-bg-deep: #060a0c;
  --color-surface: #0e1518;
  --color-surface-raised: #131d21;
  --color-surface-strong: #182429;
  --color-surface-inset: #0a1013;
  --color-surface-hover: #172329;
  --color-border: rgba(202, 224, 230, .10);
  --color-border-strong: rgba(202, 224, 230, .18);
  --color-border-bright: rgba(202, 224, 230, .28);
  --color-text: #f1f6f7;
  --color-text-secondary: #adbdc2;
  --color-text-muted: #72868e;
  --color-accent: #6ee7a8;
  --color-accent-strong: #8af2bb;
  --color-accent-soft: rgba(110, 231, 168, .11);
  --color-success: #69dba2;
  --color-success-soft: rgba(105, 219, 162, .10);
  --color-warning: #efbf67;
  --color-warning-soft: rgba(239, 191, 103, .11);
  --color-critical: #ff7d76;
  --color-critical-soft: rgba(255, 125, 118, .11);
  --color-info: #78baf1;
  --color-info-soft: rgba(120, 186, 241, .11);
  --color-neutral-soft: rgba(202, 224, 230, .055);

  /* Typography */
  --font-sans: "Segoe UI Variable Text", "Aptos", "Segoe UI", sans-serif;
  --font-display: "Segoe UI Variable Display", "Aptos Display", "Segoe UI", sans-serif;
  --font-mono: "Cascadia Code", "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --text-page: clamp(1.75rem, 2.4vw, 2.45rem);
  --text-section: 1.02rem;
  --text-body: .875rem;
  --text-compact: .765rem;
  --text-meta: .68rem;
  --text-label: .625rem;

  /* Spacing */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Shape, elevation, motion */
  --radius-control: .5rem;
  --radius-panel: .75rem;
  --radius-large: 1rem;
  --shadow-raised: 0 1rem 3rem rgba(0, 5, 7, .26);
  --shadow-overlay: 0 1.5rem 4rem rgba(0, 4, 6, .54);
  --motion-fast: 130ms;
  --motion-base: 190ms;
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --sidebar-width: 15.5rem;
  --topbar-height: 4.5rem;
  --z-nav: 20;
  --z-topbar: 30;
  --z-overlay: 50;
  --z-skip: 100;
}

* { box-sizing: border-box; }
html { min-width: 20rem; background: var(--color-bg); -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--color-text);
  background:
    radial-gradient(circle at 78% -20%, rgba(110, 231, 168, .055), transparent 34rem),
    linear-gradient(rgba(202, 224, 230, .018) 1px, transparent 1px),
    var(--color-bg);
  background-size: auto, 100% 2rem, auto;
  font: 400 var(--text-body)/1.5 var(--font-sans);
}
button, input, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3, p, dl, dd { margin-top: 0; }
h1 {
  margin-bottom: var(--space-2);
  font: 680 var(--text-page)/1.05 var(--font-display);
  letter-spacing: -.045em;
  text-wrap: balance;
}
h2 { margin-bottom: var(--space-1); font: 650 var(--text-section)/1.25 var(--font-display); letter-spacing: -.018em; }
h3 { margin-bottom: var(--space-1); font-size: .86rem; font-weight: 650; letter-spacing: -.01em; }
p { color: var(--color-text-secondary); text-wrap: pretty; }
strong, .metric-value, td { font-variant-numeric: tabular-nums; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}

.icon { width: 1.125rem; height: 1.125rem; display: inline-block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.skip-link {
  position: fixed;
  z-index: var(--z-skip);
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--color-bg-deep);
  background: var(--color-accent);
  border-radius: var(--radius-control);
  transform: translateY(-150%);
  transition: transform var(--motion-base) var(--ease-standard);
}
.skip-link:focus { transform: none; }

/* Authentication */
.login-shell { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6); position: relative; overflow: hidden; }
.login-frame { position: absolute; inset: 0; pointer-events: none; opacity: .55; }
.login-frame::before, .login-frame::after { content: ""; position: absolute; border: 1px solid var(--color-border); border-radius: 50%; }
.login-frame::before { width: min(60rem, 90vw); aspect-ratio: 1; inset: auto auto -52rem -24rem; }
.login-frame::after { width: min(42rem, 70vw); aspect-ratio: 1; inset: -30rem -18rem auto auto; border-color: rgba(110, 231, 168, .13); }
.login-frame span { position: absolute; display: block; background: var(--color-border); }
.login-frame span:nth-child(1) { width: 40vw; height: 1px; top: 22%; left: 0; }
.login-frame span:nth-child(2) { width: 1px; height: 38vh; right: 22%; bottom: 0; }
.login-frame span:nth-child(3) { width: .35rem; height: .35rem; top: 22%; left: 40vw; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 .35rem var(--color-accent-soft); }
.login-panel {
  width: min(28rem, 100%);
  padding: var(--space-8);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-large);
  background: linear-gradient(145deg, rgba(19, 29, 33, .98), rgba(10, 16, 19, .98));
  box-shadow: var(--shadow-raised);
  position: relative;
}
.login-panel::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; border-radius: var(--radius-large) 0 0 var(--radius-large); background: linear-gradient(var(--color-accent), transparent 72%); }
.brand-lockup { display: flex; align-items: center; min-width: 0; gap: var(--space-3); font-weight: 720; letter-spacing: .09em; }
.brand-lockup > span:last-child { min-width: 0; }
.brand-lockup b, .brand-lockup small { display: block; }
.brand-lockup small { margin-top: 1px; color: var(--color-text-muted); font-size: .56rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.brand-mark {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(110, 231, 168, .42);
  border-radius: .55rem;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0;
}
.brand-lockup--login { margin-bottom: var(--space-10); }
.eyebrow { margin: 0 0 var(--space-2); color: var(--color-accent); font-size: var(--text-label); font-weight: 760; letter-spacing: .16em; text-transform: uppercase; }
.lede { max-width: 45rem; line-height: 1.65; }
.field { display: grid; min-width: 0; gap: var(--space-2); margin-top: var(--space-4); color: var(--color-text-secondary); font-size: var(--text-compact); font-weight: 560; }
.field > span, .field > label { color: var(--color-text-secondary); }
input, select {
  width: 100%;
  min-height: 2.65rem;
  padding: .6rem .75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  color: var(--color-text);
  background: var(--color-surface-inset);
  transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}
input::placeholder { color: var(--color-text-muted); }
input:hover, select:hover { border-color: var(--color-border-bright); }
input:focus, select:focus { border-color: rgba(120, 186, 241, .6); background: var(--color-surface); box-shadow: 0 0 0 3px var(--color-info-soft); }
.button, .icon-button, .identity-button {
  min-height: 2.5rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface-raised);
  cursor: pointer;
  transition: color var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast);
}
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: .55rem .85rem; font-size: var(--text-compact); font-weight: 650; }
.button:hover, .icon-button:hover, .identity-button:hover { border-color: var(--color-border-bright); background: var(--color-surface-hover); }
.button:active, .icon-button:active, .identity-button:active { transform: translateY(1px); }
.button.primary { width: 100%; justify-content: space-between; margin-top: var(--space-5); color: var(--color-bg-deep); border-color: var(--color-accent); background: var(--color-accent); }
.button.primary:hover { background: var(--color-accent-strong); }
.button.quiet { color: var(--color-text-secondary); background: transparent; }
.button.small { min-height: 2.15rem; padding: .4rem .7rem; }
.button.icon-label { justify-content: flex-start; }
.form-message { min-height: 1.25rem; margin: var(--space-3) 0 0; color: var(--color-critical); font-size: var(--text-compact); }
.login-footnote { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-5) 0 0; color: var(--color-text-muted); font-size: var(--text-meta); }
.login-footnote .icon { width: .85rem; height: .85rem; }

/* App shell */
.topbar {
  position: sticky;
  z-index: var(--z-topbar);
  inset-block-start: 0;
  min-height: var(--topbar-height);
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(20rem, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  padding-inline: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: rgba(8, 13, 15, .93);
  backdrop-filter: blur(1rem);
}
.site-context { min-width: 0; display: flex; align-items: center; gap: var(--space-3); }
.site-context__icon { width: 2rem; height: 2rem; display: grid; place-items: center; flex: 0 0 auto; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); }
.site-context__copy { min-width: 0; }
.site-context__copy small, .site-context__copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-context__copy small { color: var(--color-text-muted); font-size: var(--text-label); font-weight: 650; letter-spacing: .11em; text-transform: uppercase; }
.site-context__copy strong { max-width: 20rem; margin-top: 1px; font-size: .79rem; font-weight: 650; }
.site-context__meta { max-width: 20rem; overflow: hidden; color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-label); text-overflow: ellipsis; white-space: nowrap; }
.context-signal { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; padding: .28rem .45rem; border: 1px solid var(--color-border); border-radius: .35rem; color: var(--color-text-muted); background: var(--color-neutral-soft); font-size: .56rem; font-weight: 750; letter-spacing: .08em; }
.context-signal i { width: .38rem; height: .38rem; border-radius: 50%; background: currentColor; }
.context-signal.success { color: var(--color-success); border-color: rgba(105, 219, 162, .2); background: var(--color-success-soft); }
.context-signal.warning { color: var(--color-warning); border-color: rgba(239, 191, 103, .2); background: var(--color-warning-soft); }
.context-signal.critical { color: var(--color-critical); border-color: rgba(255, 125, 118, .2); background: var(--color-critical-soft); }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.site-picker { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.site-picker select { width: min(15rem, 22vw); min-height: 2.35rem; padding-block: .35rem; color: var(--color-text); font-size: var(--text-compact); letter-spacing: normal; text-transform: none; }
.icon-button { width: 2.5rem; display: grid; place-items: center; padding: 0; color: var(--color-text-secondary); }
.identity-button { min-width: 10.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: .35rem .55rem; text-align: start; }
.identity-avatar { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: .45rem; color: var(--color-accent); background: var(--color-accent-soft); font-size: .65rem; font-weight: 750; }
.identity-copy { min-width: 0; }
.identity-copy strong, .identity-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identity-copy strong { font-size: var(--text-compact); }
.identity-copy small { color: var(--color-text-muted); font-size: .56rem; letter-spacing: .07em; text-transform: uppercase; }
.identity-chevron { display: grid; place-items: center; color: var(--color-text-muted); }
.identity-chevron .icon { width: .85rem; height: .85rem; }
.identity-popover {
  position: fixed;
  z-index: var(--z-overlay);
  inset-block-start: calc(var(--topbar-height) - .25rem);
  inset-inline-end: var(--space-5);
  width: min(23rem, calc(100vw - 2rem));
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-panel);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-overlay);
}
.identity-popover header { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.identity-popover header strong, .identity-popover header small { display: block; }
.identity-popover header small { color: var(--color-text-muted); font-size: var(--text-meta); }
.identity-popover dl { display: grid; gap: var(--space-3); margin: var(--space-4) 0; }
.identity-popover dl div { min-width: 0; }
.identity-popover dt { color: var(--color-text-muted); font-size: var(--text-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.identity-popover dd { margin: .15rem 0 0; overflow-wrap: anywhere; color: var(--color-text-secondary); font: var(--text-meta)/1.45 var(--font-mono); }
.identity-popover .button { width: 100%; }
.workspace { min-height: calc(100dvh - var(--topbar-height)); display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar { position: sticky; z-index: var(--z-nav); inset-block-start: var(--topbar-height); height: calc(100dvh - var(--topbar-height)); display: flex; flex-direction: column; padding: var(--space-4) var(--space-3); border-inline-end: 1px solid var(--color-border); background: rgba(8, 13, 15, .77); }
.sidebar-label { padding: var(--space-1) var(--space-3) var(--space-3); color: var(--color-text-muted); font-size: .56rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sidebar nav { display: grid; gap: 2px; }
.nav-group { margin: var(--space-5) var(--space-3) var(--space-2); color: var(--color-text-muted); font-size: .56rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.nav-link { min-height: 2.65rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: .55rem .65rem; border: 1px solid transparent; border-radius: var(--radius-control); color: var(--color-text-secondary); font-size: .79rem; font-weight: 560; transition: color var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast); }
.nav-link:hover { color: var(--color-text); background: var(--color-neutral-soft); transform: translateX(2px); }
.nav-link.active { color: var(--color-text); border-color: var(--color-border); background: var(--color-surface-raised); }
.nav-link.active::after { content: ""; width: .35rem; height: .35rem; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 .25rem var(--color-accent-soft); }
.nav-link .icon { width: 1rem; height: 1rem; color: var(--color-text-muted); }
.nav-link.active .icon { color: var(--color-accent); }
.sidebar footer { margin-top: auto; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-3) var(--space-1); border-top: 1px solid var(--color-border); color: var(--color-text-muted); }
.sidebar footer strong, .sidebar footer small { display: block; }
.sidebar footer strong { font-size: var(--text-meta); font-weight: 600; }
.sidebar footer small { font-size: .56rem; }
.connection-dot { width: .45rem; height: .45rem; flex: 0 0 auto; border-radius: 50%; background: var(--color-warning); box-shadow: 0 0 0 .3rem var(--color-warning-soft); }
.connection-dot.live { background: var(--color-success); box-shadow: 0 0 0 .3rem var(--color-success-soft); }
.connection-dot.error { background: var(--color-critical); box-shadow: 0 0 0 .3rem var(--color-critical-soft); }
.content { width: 100%; max-width: 100rem; min-width: 0; padding: var(--space-8) clamp(1.25rem, 3.2vw, 3.5rem) var(--space-12); overflow: hidden; }
.page { display: grid; gap: var(--space-5); animation: page-in var(--motion-base) var(--ease-standard) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(.25rem); } to { opacity: 1; transform: none; } }

/* Reusable composition */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--color-text-muted); font-size: var(--text-meta); }
.breadcrumb a { color: var(--color-text-secondary); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb .icon { width: .7rem; height: .7rem; }
.page-head { min-height: 5.25rem; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); }
.page-head__copy { min-width: 0; }
.page-head p:not(.eyebrow) { max-width: 48rem; margin-bottom: 0; color: var(--color-text-secondary); }
.page-head__aside { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-2); }
.panel { min-width: 0; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); }
.panel.strong { border-color: var(--color-border-strong); background: var(--color-surface-raised); box-shadow: var(--shadow-raised); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.panel-head p { margin: 0; color: var(--color-text-muted); font-size: var(--text-compact); }
.panel-head__actions { display: flex; align-items: center; gap: var(--space-2); }
.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(19rem, .85fr); gap: var(--space-4); }
.split.equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack { display: grid; gap: var(--space-3); }
.section-kicker { color: var(--color-text-muted); font-size: var(--text-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.technical { font-family: var(--font-mono); font-size: .92em; font-variant-numeric: tabular-nums; }
.truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrap { overflow-wrap: anywhere; }

/* Status system */
.quality, .chip, .severity {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  gap: .35rem;
  border: 1px solid var(--color-border);
  border-radius: .35rem;
  color: var(--color-text-secondary);
  background: var(--color-neutral-soft);
  font-size: .56rem;
  font-weight: 750;
  letter-spacing: .065em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.quality { padding: .3rem .45rem; }
.chip, .severity { padding: .25rem .4rem; }
.quality .icon, .chip .icon, .severity .icon { width: .72rem; height: .72rem; }
.tone-success { color: var(--color-success); border-color: rgba(105, 219, 162, .2); background: var(--color-success-soft); }
.tone-warning { color: var(--color-warning); border-color: rgba(239, 191, 103, .2); background: var(--color-warning-soft); }
.tone-critical { color: var(--color-critical); border-color: rgba(255, 125, 118, .22); background: var(--color-critical-soft); }
.tone-info { color: var(--color-info); border-color: rgba(120, 186, 241, .2); background: var(--color-info-soft); }
.tone-muted { color: var(--color-text-muted); background: var(--color-neutral-soft); }
.state-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-3) 0 0; padding: .65rem .75rem; border-inline-start: 2px solid currentColor; border-radius: 0 var(--radius-control) var(--radius-control) 0; font-size: var(--text-compact); }
.state-note .icon { margin-top: .05rem; }
.state-note.tone-warning { background: var(--color-warning-soft); }
.state-note.tone-critical { background: var(--color-critical-soft); }
.state-note.tone-info { background: var(--color-info-soft); }

/* Data quality and states */
.source-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; color: var(--color-text-muted); font: var(--text-label)/1.5 var(--font-mono); }
.source-line .icon { width: .75rem; height: .75rem; }
.source-line span + span::before { content: "·"; margin-inline-end: var(--space-2); color: var(--color-border-bright); }
.state-view { min-height: 14rem; display: grid; place-items: center; padding: var(--space-8); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-panel); background: var(--color-surface-inset); text-align: center; }
.state-view.compact { min-height: 9rem; }
.state-view__content { max-width: 30rem; }
.state-view__icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; margin: 0 auto var(--space-3); border: 1px solid var(--color-border); border-radius: .75rem; color: var(--color-text-muted); background: var(--color-neutral-soft); }
.state-view__icon .icon { width: 1.15rem; height: 1.15rem; }
.state-view strong { display: block; font-size: .95rem; }
.state-view p { margin: var(--space-2) auto var(--space-4); color: var(--color-text-muted); font-size: var(--text-compact); }
.skeleton-stack { width: min(34rem, 100%); }
.skeleton { height: .8rem; margin: var(--space-2) 0; border-radius: .25rem; background: linear-gradient(90deg, var(--color-surface), var(--color-surface-strong), var(--color-surface)); background-size: 220% 100%; animation: shimmer 1.35s infinite; }
.skeleton:first-child { width: 38%; height: 1.5rem; margin-bottom: var(--space-4); }
.skeleton:nth-child(3) { width: 78%; }
.skeleton:nth-child(4) { width: 58%; }
@keyframes shimmer { to { background-position: -220% 0; } }

/* Metrics and attention */
.metric-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); overflow: hidden; }
.metric { min-width: 0; min-height: 6.6rem; padding: var(--space-4) var(--space-5); border-inline-end: 1px solid var(--color-border); }
.metric:last-child { border-inline-end: 0; }
.metric-label { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-label); font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.metric-label .icon { width: .8rem; height: .8rem; }
.metric-value { display: block; margin-top: var(--space-2); overflow: hidden; color: var(--color-text); font: 700 clamp(1.35rem, 2vw, 1.8rem)/1 var(--font-mono); letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.metric small { display: block; margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-meta); }
.metric.tone-warning .metric-value { color: var(--color-warning); }
.metric.tone-critical .metric-value { color: var(--color-critical); }
.attention-band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid rgba(239, 191, 103, .24); border-radius: var(--radius-panel); background: linear-gradient(90deg, var(--color-warning-soft), rgba(239, 191, 103, .025)); }
.attention-band.critical { border-color: rgba(255, 125, 118, .28); background: linear-gradient(90deg, var(--color-critical-soft), rgba(255, 125, 118, .025)); }
.attention-band.clear { border-color: rgba(105, 219, 162, .19); background: linear-gradient(90deg, var(--color-success-soft), transparent); }
.attention-band__icon { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; border-radius: .65rem; color: var(--color-warning); background: var(--color-warning-soft); }
.attention-band.critical .attention-band__icon { color: var(--color-critical); background: var(--color-critical-soft); }
.attention-band.clear .attention-band__icon { color: var(--color-success); background: var(--color-success-soft); }
.attention-band h2 { margin: 0; }
.attention-band p { margin: .2rem 0 0; color: var(--color-text-secondary); font-size: var(--text-compact); }

/* Site directory */
.directory-toolbar { display: grid; grid-template-columns: minmax(15rem, 1fr) auto; align-items: end; gap: var(--space-3); }
.directory-toolbar .field { margin: 0; }
.site-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.site-row {
  min-width: 0;
  display: grid;
  grid-template-columns: .25rem minmax(0, 1fr) auto;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  transition: border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast);
}
.site-row:hover { border-color: var(--color-border-strong); background: var(--color-surface-raised); transform: translateY(-1px); }
.site-row__rail { width: .25rem; min-height: 100%; border-radius: .25rem; background: var(--color-success); }
.site-row__rail.warning { background: var(--color-warning); }
.site-row__rail.critical { background: var(--color-critical); }
.site-row__main { min-width: 0; }
.site-row__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.site-row__header h2 { max-width: 28rem; margin-bottom: .2rem; overflow-wrap: anywhere; }
.entity-id { display: block; max-width: 100%; overflow: hidden; color: var(--color-text-muted); font: var(--text-label)/1.4 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.site-row__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.compact-stat span, .compact-stat strong { display: block; }
.compact-stat span { color: var(--color-text-muted); font-size: var(--text-label); letter-spacing: .07em; text-transform: uppercase; }
.compact-stat strong { margin-top: .2rem; font: 650 .86rem/1.2 var(--font-mono); }
.site-row__network { min-width: 9rem; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; text-align: end; }
.site-row__network > div { display: grid; justify-items: end; gap: .15rem; }
.site-row__network strong { max-width: 10rem; overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.site-row__network small { color: var(--color-text-muted); font-size: var(--text-meta); }
.site-row__network .icon { margin-top: auto; color: var(--color-text-muted); }

/* Fleet and tables */
.filter-shell { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); }
.filters { display: grid; grid-template-columns: minmax(13rem, 1.45fr) repeat(3, minmax(8.5rem, .72fr)) auto; gap: var(--space-2); align-items: end; }
.filters .field { margin: 0; gap: var(--space-1); font-size: var(--text-meta); }
.filters input, .filters select { min-height: 2.35rem; padding-block: .4rem; font-size: var(--text-compact); }
.filter-more { margin-top: var(--space-2); }
.filter-more summary { width: fit-content; cursor: pointer; color: var(--color-text-secondary); font-size: var(--text-compact); }
.filter-more[open] summary { margin-bottom: var(--space-2); }
.filter-more__grid { display: grid; grid-template-columns: repeat(3, minmax(8.5rem, 1fr)); gap: var(--space-2); }
.active-filters { min-height: 1.8rem; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.active-filters:empty { display: none; }
.filter-token { display: inline-flex; align-items: center; gap: var(--space-2); padding: .3rem .45rem; border: 1px solid rgba(120, 186, 241, .2); border-radius: .35rem; color: var(--color-info); background: var(--color-info-soft); font-size: var(--text-meta); }
.filter-reset { border: 0; color: var(--color-text-muted); background: transparent; cursor: pointer; font-size: var(--text-meta); text-decoration: underline; text-underline-offset: .18rem; }
.table-panel { padding: 0; overflow: hidden; }
.table-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.table-meta p { margin: 0; color: var(--color-text-muted); font-size: var(--text-compact); }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .72rem .8rem; border-bottom: 1px solid var(--color-border); text-align: start; vertical-align: middle; }
th { color: var(--color-text-muted); background: var(--color-surface-inset); font-size: var(--text-label); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
td { color: var(--color-text-secondary); font-size: var(--text-compact); }
td strong { display: block; color: var(--color-text); font-size: .79rem; }
td small { display: block; margin-top: .15rem; color: var(--color-text-muted); font-size: var(--text-label); }
td .technical { display: block; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tbody tr { transition: background var(--motion-fast); }
tbody tr:hover { background: var(--color-neutral-soft); }
tbody tr:last-child td { border-bottom: 0; }
.machine-link { display: block; min-width: 9rem; }
.machine-link strong { transition: color var(--motion-fast); }
.machine-link:hover strong { color: var(--color-accent); }
.status-cell { display: grid; justify-items: start; gap: .25rem; }
.flag-stack { display: flex; flex-wrap: wrap; gap: .3rem; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); }

/* Lists and incidents */
.list { display: grid; gap: var(--space-2); }
.list-item { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: .8rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-inset); transition: border-color var(--motion-fast), background var(--motion-fast); }
a.list-item:hover { border-color: var(--color-border-strong); background: var(--color-surface-hover); }
.list-item p { margin: .2rem 0 0; color: var(--color-text-muted); font-size: var(--text-meta); }
.list-item aside { text-align: end; }
.list-item aside small { display: block; margin-top: .3rem; color: var(--color-text-muted); font-size: var(--text-label); }
.incident-list { display: grid; gap: 1px; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-border); overflow: hidden; }
.incident-row { min-width: 0; display: grid; grid-template-columns: .22rem minmax(0, 1.7fr) minmax(8rem, .7fr) minmax(7rem, .55fr) auto; align-items: center; gap: var(--space-4); padding: .85rem var(--space-4); background: var(--color-surface); transition: background var(--motion-fast); }
.incident-row:hover { background: var(--color-surface-raised); }
.incident-row__rail { align-self: stretch; border-radius: .2rem; background: var(--color-info); }
.incident-row__rail.warning, .incident-row__rail.high { background: var(--color-warning); }
.incident-row__rail.critical { background: var(--color-critical); }
.incident-row__title { min-width: 0; }
.incident-row__title strong { display: block; overflow-wrap: anywhere; }
.incident-row__title small, .incident-row__meta small { display: block; margin-top: .15rem; color: var(--color-text-muted); font-size: var(--text-label); }
.incident-row__meta { min-width: 0; color: var(--color-text-secondary); font-size: var(--text-compact); }
.incident-row__time { color: var(--color-text-muted); font-size: var(--text-meta); text-align: end; white-space: nowrap; }
.split .incident-row { grid-template-columns: .22rem minmax(0, 1fr) auto; gap: var(--space-3); }
.split .incident-row__meta { grid-column: 2; }
.split .incident-row__status { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.split .incident-row__time { grid-column: 2 / -1; text-align: start; }

/* Fleet health / machine cockpit */
.fleet-health { display: grid; grid-template-columns: minmax(13rem, .7fr) minmax(0, 1.3fr); gap: var(--space-6); align-items: center; }
.fleet-health__headline strong { display: block; font: 700 clamp(2.2rem, 4vw, 3.6rem)/1 var(--font-mono); letter-spacing: -.055em; }
.fleet-health__headline span { display: block; margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-compact); }
.distribution { height: .55rem; display: flex; overflow: hidden; border-radius: .25rem; background: var(--color-neutral-soft); }
.distribution i { min-width: 2px; height: 100%; }
.distribution .online { background: var(--color-success); }
.distribution .stale { background: var(--color-warning); }
.distribution .offline { background: var(--color-critical); }
.distribution .degraded { background: var(--color-info); }
.distribution-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.distribution-legend span { color: var(--color-text-muted); font-size: var(--text-label); }
.distribution-legend strong { display: block; margin-top: .15rem; color: var(--color-text); font: 650 .86rem var(--font-mono); }
.machine-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); padding: var(--space-5); border: 1px solid var(--color-border-strong); border-radius: var(--radius-panel); background: linear-gradient(135deg, var(--color-surface-raised), var(--color-surface)); }
.machine-hero__title { display: flex; align-items: flex-start; gap: var(--space-4); min-width: 0; }
.machine-hero__glyph { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--color-border-strong); border-radius: .7rem; color: var(--color-accent); background: var(--color-accent-soft); }
.machine-hero h1 { margin: 0; font-size: clamp(1.65rem, 2.5vw, 2.25rem); }
.machine-hero p { margin: .35rem 0 0; color: var(--color-text-muted); font: var(--text-compact)/1.5 var(--font-mono); overflow-wrap: anywhere; }
.machine-hero__signals { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; gap: var(--space-2); }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.detail { min-width: 0; padding: .72rem .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-inset); }
.detail span, .detail strong { display: block; }
.detail span { color: var(--color-text-muted); font-size: var(--text-label); font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.detail strong { margin-top: .3rem; overflow-wrap: anywhere; color: var(--color-text); font: 600 var(--text-compact)/1.45 var(--font-mono); }
.hardware-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.hardware-item { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: .65rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-text-secondary); background: var(--color-surface-inset); font-size: var(--text-compact); }
.hardware-item .icon { color: var(--color-text-muted); }

/* Network */
.network-hero { display: grid; grid-template-columns: minmax(15rem, 1.25fr) repeat(4, minmax(7rem, .55fr)); border: 1px solid var(--color-border-strong); border-radius: var(--radius-panel); background: var(--color-surface-raised); overflow: hidden; }
.network-verdict { min-width: 0; padding: var(--space-6); border-inline-start: .25rem solid var(--color-info); }
.network-verdict.success { border-inline-start-color: var(--color-success); }
.network-verdict.warning { border-inline-start-color: var(--color-warning); }
.network-verdict.critical { border-inline-start-color: var(--color-critical); }
.network-verdict__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.network-verdict h2 { margin: var(--space-3) 0 .15rem; font-size: clamp(1.25rem, 2vw, 1.65rem); }
.network-verdict p { margin: 0; color: var(--color-text-muted); font-size: var(--text-compact); }
.network-verdict__provider { margin-top: var(--space-4); color: var(--color-text-secondary); font-size: var(--text-compact); }
.network-verdict__provider strong { color: var(--color-text); font-family: var(--font-mono); }
.network-metric { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: var(--space-5); border-inline-start: 1px solid var(--color-border); }
.network-metric span { color: var(--color-text-muted); font-size: var(--text-label); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.network-metric strong { display: block; margin-top: var(--space-2); overflow: hidden; font: 680 1.05rem/1.2 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.network-metric small { display: block; margin-top: .2rem; color: var(--color-text-muted); font-size: var(--text-label); }
.network-compact { display: grid; gap: var(--space-4); }
.network-compact__head { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.network-compact__head > div { min-width: 0; }
.network-compact__head > .icon { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; color: var(--color-text-muted); }
.network-compact h3 { margin: var(--space-3) 0 .2rem; overflow: hidden; color: var(--color-text); font: 650 1rem/1.25 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.network-compact p { margin: 0; color: var(--color-text-muted); font-size: var(--text-compact); }
.chart-shell { position: relative; min-height: 17rem; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-inset); }
.chart-shell svg { width: 100%; height: 17rem; display: block; }
.chart-grid { stroke: var(--color-border); stroke-width: 1; }
.chart-line { fill: none; stroke: var(--color-info); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-area { fill: url(#latency-area); opacity: .42; }
.chart-axis { position: absolute; z-index: 1; color: var(--color-text-muted); font: .58rem var(--font-mono); pointer-events: none; }
.chart-axis--top { inset: .65rem auto auto .75rem; }
.chart-axis--bottom { inset: auto .75rem .65rem auto; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--text-meta); }
.chart-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.chart-legend i { width: .8rem; height: 2px; background: var(--color-info); }
.chart-empty { height: 17rem; display: grid; place-items: center; color: var(--color-text-muted); font-size: var(--text-compact); }
.live-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, .65fr); gap: var(--space-4); }
.live-now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.live-feed { max-height: 20rem; overflow: auto; }
.live-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: .7rem 0; border-bottom: 1px solid var(--color-border); }
.live-row:last-child { border-bottom: 0; }
.live-row__pulse { width: .45rem; height: .45rem; border-radius: 50%; background: var(--color-info); }
.live-row strong, .live-row small { display: block; }
.live-row strong { font-size: var(--text-compact); }
.live-row small { margin-top: .15rem; color: var(--color-text-muted); font-size: var(--text-label); }

/* Timeline and System Health */
.timeline { position: relative; display: grid; }
.timeline-item { position: relative; display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-4); padding: 0 0 var(--space-5) var(--space-6); border-inline-start: 1px solid var(--color-border-strong); }
.timeline-item::before { content: ""; position: absolute; inset: .2rem auto auto -.32rem; width: .58rem; height: .58rem; border: 2px solid var(--color-surface); border-radius: 50%; background: var(--color-info); box-shadow: 0 0 0 1px var(--color-info); }
.timeline-item.warning::before, .timeline-item.high::before { background: var(--color-warning); box-shadow: 0 0 0 1px var(--color-warning); }
.timeline-item.critical::before { background: var(--color-critical); box-shadow: 0 0 0 1px var(--color-critical); }
.timeline-item:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
.timeline-item time { color: var(--color-text-muted); font: var(--text-label)/1.45 var(--font-mono); }
.timeline-item p { margin: .2rem 0 0; color: var(--color-text-muted); font-size: var(--text-compact); }
.health-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.health-component { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); }
.health-component__icon { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: .6rem; color: var(--color-text-muted); background: var(--color-neutral-soft); }
.health-component__copy { min-width: 0; }
.health-component h2 { margin: 0; }
.health-component p { margin: .25rem 0 0; color: var(--color-text-muted); font-size: var(--text-compact); overflow-wrap: anywhere; }
.health-component .source-line { margin-top: var(--space-2); }
.health-component__status { display: grid; justify-items: end; gap: .35rem; }
.health-component__status small { color: var(--color-text-muted); font-size: var(--text-label); text-align: end; }
.deferred-summary { padding: var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-panel); color: var(--color-text-muted); background: var(--color-surface-inset); font-size: var(--text-compact); }

.toast-region { position: fixed; z-index: var(--z-overlay); inset: auto var(--space-5) var(--space-5) auto; display: grid; gap: var(--space-2); pointer-events: none; }
.toast { max-width: 24rem; padding: .7rem .85rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); color: var(--color-text-secondary); background: var(--color-surface-raised); box-shadow: var(--shadow-overlay); font-size: var(--text-compact); animation: toast-in var(--motion-base) var(--ease-standard); }
@keyframes toast-in { from { opacity: 0; transform: translateY(.35rem); } }

@media (max-width: 80rem) {
  :root { --sidebar-width: 13.5rem; }
  .topbar { grid-template-columns: var(--sidebar-width) minmax(13rem, 1fr) auto; gap: var(--space-3); padding-inline: var(--space-4); }
  .site-context__meta { display: none; }
  .site-picker span { display: none; }
  .identity-button { min-width: 3rem; }
  .identity-copy { display: none; }
  .network-hero { grid-template-columns: minmax(15rem, 1.2fr) repeat(4, minmax(6rem, .5fr)); }
  .network-metric { padding: var(--space-4); }
  .filters { grid-template-columns: minmax(13rem, 1.35fr) repeat(2, minmax(8rem, .7fr)) auto; }
}

@media (max-width: 64rem) {
  .topbar { grid-template-columns: auto minmax(12rem, 1fr) auto; }
  .brand-lockup > span:last-child { display: none; }
  .site-context__copy strong { max-width: 13rem; }
  .site-context__icon { display: none; }
  .site-picker { display: none; }
  .site-list { grid-template-columns: 1fr; }
  .split, .split.equal, .live-layout { grid-template-columns: 1fr; }
  .network-hero { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .network-verdict { grid-column: 1 / -1; }
  .network-metric:first-of-type { border-inline-start: 0; }
  .health-list { grid-template-columns: 1fr; }
  .filters { grid-template-columns: minmax(13rem, 1.4fr) repeat(2, minmax(8rem, .7fr)) auto; }
  .filters .field:nth-of-type(n+4) { display: none; }
}

@media (max-width: 48rem) {
  :root { --topbar-height: 4rem; }
  .topbar { min-height: var(--topbar-height); grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2); padding-inline: var(--space-3); }
  .brand-mark { width: 1.9rem; height: 1.9rem; }
  .site-context { justify-content: center; gap: var(--space-2); }
  .site-context__copy small, .context-signal, .site-context__meta { display: none; }
  .site-context__copy strong { max-width: 44vw; font-size: var(--text-compact); text-align: center; }
  .top-actions { gap: var(--space-1); }
  .identity-button { min-width: 2.5rem; padding: .25rem; grid-template-columns: auto; }
  .identity-chevron { display: none; }
  .workspace { display: block; min-height: calc(100dvh - var(--topbar-height)); }
  .sidebar { position: fixed; z-index: var(--z-topbar); inset: auto 0 0; width: 100%; height: auto; padding: .35rem .5rem max(.35rem, env(safe-area-inset-bottom)); border: 1px solid var(--color-border-strong); border-width: 1px 0 0; background: rgba(10, 16, 19, .97); backdrop-filter: blur(1rem); }
  .sidebar-label, .nav-group, .sidebar footer { display: none; }
  .sidebar nav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(3.5rem, 1fr); gap: .1rem; overflow-x: auto; scrollbar-width: none; }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .nav-link { min-height: 3.25rem; display: flex; flex-direction: column; justify-content: center; gap: .18rem; padding: .35rem .15rem; font-size: .55rem; white-space: nowrap; }
  .nav-link:hover { transform: none; }
  .nav-link.active::after { position: absolute; inset: 0 auto auto 50%; width: 1.3rem; height: 2px; border-radius: 0 0 2px 2px; transform: translateX(-50%); box-shadow: none; }
  .nav-link { position: relative; }
  .content { padding: var(--space-6) var(--space-3) 6rem; }
  .page { gap: var(--space-4); }
  .page-head { min-height: auto; display: block; }
  .page-head__aside { margin-top: var(--space-3); padding: 0; }
  .breadcrumb { margin-bottom: var(--space-2); overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { min-height: 5.8rem; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
  .metric:nth-child(2n) { border-inline-end: 0; }
  .metric:nth-last-child(-n+2) { border-bottom: 0; }
  .attention-band { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-4); }
  .attention-band .button { grid-column: 1 / -1; width: 100%; }
  .directory-toolbar { grid-template-columns: 1fr; }
  .directory-toolbar .button { width: 100%; }
  .site-row { grid-template-columns: .2rem minmax(0, 1fr); padding: var(--space-4); }
  .site-row__network { grid-column: 2; min-width: 0; align-items: flex-start; text-align: start; flex-direction: row; }
  .site-row__network > div { justify-items: start; }
  .site-row__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-3); }
  .panel { padding: var(--space-4); }
  .panel-head { margin-bottom: var(--space-3); }
  .fleet-health { grid-template-columns: 1fr; gap: var(--space-4); }
  .filter-shell { padding: var(--space-3); }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters .field:first-child { grid-column: 1 / -1; }
  .filters .field:nth-of-type(n+4) { display: none; }
  .filters .button { grid-column: 1 / -1; }
  .filter-more__grid { grid-template-columns: 1fr; }
  .machine-hero { grid-template-columns: 1fr; padding: var(--space-4); }
  .machine-hero__signals { justify-content: flex-start; }
  .detail-grid, .hardware-list { grid-template-columns: 1fr; }
  .incident-row { grid-template-columns: .2rem minmax(0, 1fr) auto; gap: var(--space-3); }
  .incident-row__meta { grid-column: 2; }
  .incident-row__status { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .incident-row__time { grid-column: 2 / -1; text-align: start; }
  .network-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .network-verdict { padding: var(--space-5) var(--space-4); }
  .network-metric { padding: var(--space-4); border-top: 1px solid var(--color-border); }
  .network-metric:nth-of-type(odd) { border-inline-start: 0; }
  .live-now { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .timeline-item { grid-template-columns: 1fr; gap: var(--space-1); padding-inline-start: var(--space-5); }
  .health-component { grid-template-columns: auto minmax(0, 1fr); }
  .health-component__status { grid-column: 2; justify-items: start; }
  .table-panel { padding: 0; }
  table.responsive thead { display: none; }
  table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display: block; width: 100%; }
  table.responsive tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
  table.responsive tr:last-child { border-bottom: 0; }
  table.responsive td { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: var(--space-2); padding: .32rem var(--space-4); border: 0; }
  table.responsive td::before { content: attr(data-label); color: var(--color-text-muted); font-size: var(--text-label); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
  table.responsive td:first-child { display: block; padding-block: var(--space-2) var(--space-3); }
  table.responsive td:first-child::before { display: none; }
  .table-meta, .pager { padding-inline: var(--space-4); }
  .toast-region { inset: auto var(--space-3) 5rem; }
}

@media (max-width: 27rem) {
  .topbar .icon-button { display: none; }
  .site-context__copy strong { max-width: 50vw; }
  .metric-value { font-size: 1.2rem; }
  .distribution-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-now { grid-template-columns: 1fr; }
  .network-hero { grid-template-columns: 1fr 1fr; }
  .network-metric strong { font-size: .9rem; }
}

@media (forced-colors: active) {
  .quality, .chip, .severity, .context-signal, .nav-link.active { border: 1px solid currentColor; }
  .site-row__rail, .incident-row__rail, .distribution i { forced-color-adjust: none; }
}

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