:root {
  color-scheme: dark;
  --ink-0: #050908;
  --ink-1: #07110f;
  --ink-2: #0b1714;
  --ink-3: #10201c;
  --ink-4: #142a24;
  --paper: #ecf4ef;
  --paper-soft: #b8c7bf;
  --muted: #84968d;
  --line: rgba(167, 201, 183, 0.17);
  --line-strong: rgba(167, 201, 183, 0.34);
  --line-hot: rgba(232, 176, 74, 0.62);
  --signal: #e8b04a;
  --signal-soft: #ffd88b;
  --gulf: #4ec9bb;
  --live: #75d897;
  --recent: #90a9ff;
  --stale-fill: #142333;
  --stale-text: #9bb3c9;
  --mock: #c18a52;
  --offline: #ff6b57;
  --actor-iran: #e8b04a;
  --actor-us: #90a9ff;
  --actor-israel: #e49bc0;
  --actor-uk: #b8c7bf;
  --actor-gcc: #4ec9bb;
  --actor-importer: #75d897;
  --critical: var(--offline);
  --radius: 2px;
  --rail-size: 248px;
  --topbar-size: 72px;
  --spine-size: 36px;
  --content-max: 1720px;
  --shadow-deep: 0 24px 70px rgba(0, 0, 0, 0.46);
  --font-display: "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  --font-body: "Bahnschrift", "Aptos", "Segoe UI", sans-serif;
  --font-mono: "Cascadia Mono", "IBM Plex Mono", "Consolas", monospace;
}

/* Route-level fit correction: instrument cards must never compress status + timestamp into collisions. */
.panel:not(.panel--wide) .service-grid {
  grid-template-columns: 1fr;
}

.panel:not(.panel--wide) .service-card {
  min-height: 92px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--ink-0);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--paper);
  background:
    linear-gradient(rgba(78, 201, 187, 0.025) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(78, 201, 187, 0.025) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(circle at 74% -18%, rgba(78, 201, 187, 0.11), transparent 38%),
    var(--ink-0);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.nav-open,
body.dialog-open,
body.drawer-open {
  overflow: hidden;
}

#app {
  min-height: 100vh;
}

noscript {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  color: var(--offline);
  background: var(--ink-0);
  font: 600 14px/1.6 var(--font-mono);
  text-align: center;
}

[hidden],
.is-hidden {
  display: none !important;
}

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

button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
select {
  min-height: 44px;
}

button,
a,
label,
select,
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
select:not(:disabled),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
input[type="range"]:not(:disabled) {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.46;
}

a {
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

table {
  border-spacing: 0;
}

::selection {
  color: var(--ink-0);
  background: var(--signal);
}

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  min-height: 44px;
  padding: 11px 15px;
  color: var(--ink-0);
  background: var(--signal);
  font: 700 12px var(--font-mono);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Authentication is deliberately stark: one secure station, not a marketing card. */
.login-screen,
.auth-screen {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  isolation: isolate;
  padding: 32px 18px;
  background:
    linear-gradient(90deg, transparent 0 49.9%, rgba(232, 176, 74, 0.08) 50%, transparent 50.1%),
    linear-gradient(rgba(167, 201, 183, 0.035) 1px, transparent 1px) 0 0 / 100% 48px,
    var(--ink-0);
}

.login-screen::before,
.auth-screen::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 50% 44%, rgba(78, 201, 187, 0.11), transparent 36%);
}

.login-panel,
.auth-panel {
  width: min(100%, 480px);
  border: 1px solid var(--line-strong);
  background: rgba(7, 17, 15, 0.98);
  box-shadow: var(--shadow-deep), inset 0 1px rgba(255, 255, 255, 0.025);
}

.login-plate,
.auth-plate {
  display: grid;
  grid-template-columns: 72px 1fr;
  min-height: 86px;
  border-bottom: 1px solid var(--line-strong);
}

.login-mark,
.auth-mark {
  display: grid;
  place-items: center;
  color: var(--signal);
  border-inline-end: 1px solid var(--line-strong);
  font: 700 15px var(--font-mono);
  letter-spacing: 0.06em;
}

.login-heading,
.auth-heading {
  align-self: center;
  padding: 16px 18px;
}

.login-heading small,
.auth-heading small {
  display: block;
  margin-block-end: 5px;
  color: var(--muted);
  font: 600 12px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.login-heading h1,
.auth-heading h1 {
  margin: 0;
  font: 680 26px/1 var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.login-body,
.auth-body {
  display: grid;
  gap: 16px;
  padding: 24px;
}

.login-form {
  display: grid;
  gap: 16px;
  padding: 24px;
}

.login-status {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 9px 12px;
  color: var(--paper-soft);
  border: 1px solid var(--line);
  background: var(--ink-1);
  font: 500 12px/1.5 var(--font-mono);
}

.login-status[data-status="offline"],
.login-status.is-error {
  color: #ffd1c9;
  border-color: rgba(255, 107, 87, 0.48);
  background: rgba(255, 107, 87, 0.055);
}

.login-foot,
.auth-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 8px 18px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font: 500 12px var(--font-mono);
}

.login-error,
.form-error {
  margin: 0;
  padding: 11px 12px;
  color: #ffd1c9;
  border-inline-start: 2px solid var(--offline);
  background: rgba(255, 107, 87, 0.07);
  font-size: 13px;
}

/* Fixed control shell and the memorable cross-product status spine. */
.admin-shell,
.app-shell,
.control-shell {
  min-height: 100vh;
}

.admin-topbar,
.shell-topbar,
.topbar {
  position: fixed;
  z-index: 90;
  inset: 0 0 auto;
  height: var(--topbar-size);
  display: grid;
  grid-template-columns: var(--rail-size) minmax(0, 1fr) auto;
  align-items: stretch;
  border-bottom: 1px solid var(--line-strong);
  background: rgba(5, 9, 8, 0.97);
  backdrop-filter: blur(14px);
}

.admin-brand,
.brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding-inline: 18px;
  border-inline-end: 1px solid var(--line-strong);
  text-decoration: none;
}

.brand-mark,
.brand-code {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--signal);
  border: 1px solid var(--signal);
  box-shadow: inset 0 0 0 3px rgba(232, 176, 74, 0.05);
  font: 700 12px var(--font-mono);
}

.brand-copy {
  min-width: 0;
}

.brand-copy strong,
.brand b {
  display: block;
  overflow: hidden;
  font: 680 15px var(--font-mono);
  letter-spacing: 0.12em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-copy small,
.brand small {
  display: block;
  margin-block-start: 3px;
  overflow: hidden;
  color: var(--muted);
  font: 500 12px var(--font-mono);
  letter-spacing: 0.045em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-context,
.scope-ribbon {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline: 24px;
  overflow: hidden;
  color: var(--paper-soft);
  font: 600 12px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions,
.shell-actions {
  display: flex;
  align-items: stretch;
}

.topbar-cell,
.environment-cell,
.operator-cell,
.account-block,
.clock {
  min-width: 116px;
  display: grid;
  align-content: center;
  padding: 8px 16px;
  border-inline-start: 1px solid var(--line);
}

.topbar-cell small,
.environment-cell small,
.operator-cell small,
.account-block small,
.clock small {
  color: var(--muted);
  font: 500 12px var(--font-mono);
}

.topbar-cell strong,
.environment-cell strong,
.operator-cell strong,
.account-block strong,
.clock b {
  margin-block-start: 2px;
  font: 650 12px var(--font-mono);
}

.environment-badge {
  display: inline-flex;
  width: max-content;
  align-items: center;
  min-height: 28px;
  padding-inline: 9px;
  color: var(--signal-soft);
  border: 1px solid var(--line-hot);
  font: 650 12px var(--font-mono);
  letter-spacing: 0.08em;
}

.mobile-nav-toggle,
.nav-toggle,
.icon-button {
  width: 48px;
  min-width: 48px;
  min-height: 44px;
  padding: 0;
  color: var(--paper-soft);
  border: 0;
  border-inline-start: 1px solid var(--line);
  background: transparent;
  font: 700 12px var(--font-mono);
}

.mobile-nav-toggle,
.nav-toggle {
  display: none;
}

.mobile-nav-toggle:hover,
.nav-toggle:hover,
.icon-button:hover {
  color: var(--signal);
  background: rgba(232, 176, 74, 0.06);
}

.status-spine,
.ops-strip,
.control-strip,
.system-spine {
  position: fixed;
  z-index: 85;
  inset-inline: 0;
  inset-block-start: var(--topbar-size);
  height: var(--spine-size);
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--line-strong);
  background: #08110f;
  scrollbar-width: none;
}

.status-spine::-webkit-scrollbar,
.ops-strip::-webkit-scrollbar,
.control-strip::-webkit-scrollbar,
.system-spine::-webkit-scrollbar {
  display: none;
}

.spine-label,
.ops-strip-label,
.control-strip__label {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  min-width: var(--rail-size);
  display: grid;
  place-items: center start;
  padding-inline: 18px;
  color: var(--ink-0);
  background: var(--signal);
  font: 750 12px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.spine-item,
.ops-strip-item,
.control-strip__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 16px;
  color: var(--paper-soft);
  border-inline-end: 1px solid var(--line);
  font: 550 12px var(--font-mono);
  white-space: nowrap;
}

.spine-item b,
.ops-strip-item b,
.control-strip__item b {
  color: var(--paper);
  font-weight: 700;
}

.admin-workspace,
.workspace {
  min-height: 100vh;
  padding-block-start: calc(var(--topbar-size) + var(--spine-size));
}

.nav-scrim,
.rail-scrim,
.drawer-scrim,
.modal-scrim {
  position: fixed;
  z-index: 94;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  background: rgba(2, 5, 4, 0.74);
  transition: opacity 160ms ease, visibility 160ms ease;
}

.admin-nav,
.admin-rail,
.rail {
  position: fixed;
  z-index: 80;
  inset-block: calc(var(--topbar-size) + var(--spine-size)) 0;
  inset-inline-start: 0;
  width: var(--rail-size);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-inline-end: 1px solid var(--line-strong);
  background: rgba(6, 13, 11, 0.98);
  scrollbar-color: var(--line-strong) transparent;
}

.nav-header,
.nav-head,
.rail-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 50px;
  padding-inline: 18px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font: 650 12px var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-close {
  display: none;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--paper-soft);
  border: 0;
  background: transparent;
  font: 700 14px var(--font-mono);
}

.nav-sections,
.nav-groups,
.admin-nav nav,
.rail nav {
  display: flex;
  flex-direction: column;
}

.nav-section {
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
}

.nav-group {
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
}

.nav-section-label,
.nav-label,
.nav-group > h2,
.nav-group > h3 {
  margin: 0;
  padding: 8px 18px 6px;
  color: var(--muted);
  font: 650 12px var(--font-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.nav-link,
.admin-nav nav a,
.rail nav a {
  position: relative;
  min-height: 48px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding-inline: 17px;
  color: var(--paper-soft);
  border: 0;
  background: transparent;
  text-decoration: none;
}

.nav-link::before,
.admin-nav nav a::before,
.rail nav a::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 2px;
  content: "";
  background: transparent;
}

.nav-link:hover,
.admin-nav nav a:hover,
.rail nav a:hover {
  color: var(--paper);
  background: rgba(78, 201, 187, 0.045);
}

.nav-link.is-active,
.nav-link.active,
.nav-link[aria-current="page"],
.admin-nav nav a.active,
.admin-nav nav a[aria-current="page"],
.rail nav a.active,
.rail nav a[aria-current="page"] {
  color: var(--paper);
  background: linear-gradient(90deg, rgba(232, 176, 74, 0.1), transparent 92%);
}

.nav-link.is-active::before,
.nav-link.active::before,
.nav-link[aria-current="page"]::before,
.admin-nav nav a.active::before,
.admin-nav nav a[aria-current="page"]::before,
.rail nav a.active::before,
.rail nav a[aria-current="page"]::before {
  background: var(--signal);
}

.nav-index,
.nav-icon,
.nav-code {
  color: var(--muted);
  font: 650 12px var(--font-mono);
}

.nav-link.is-active .nav-index,
.nav-link.active .nav-index,
.nav-link[aria-current="page"] .nav-index {
  color: var(--signal);
}

.nav-link-label,
.nav-link b {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-count {
  min-width: 24px;
  padding: 2px 5px;
  color: var(--paper-soft);
  border: 1px solid var(--line);
  font: 650 12px var(--font-mono);
  text-align: center;
}

.nav-footer,
.rail-foot {
  margin-block-start: auto;
  padding: 16px 18px;
  color: var(--muted);
  border-top: 1px solid var(--line-strong);
  font: 500 12px/1.6 var(--font-mono);
}

.nav-footer strong,
.rail-foot b {
  display: block;
  color: var(--signal-soft);
  font-weight: 650;
}

.admin-main,
.admin-view,
.view {
  min-height: calc(100vh - var(--topbar-size) - var(--spine-size));
  margin-inline-start: var(--rail-size);
  padding: 30px clamp(18px, 3vw, 48px) 72px;
}

.page,
.view-inner {
  width: min(100%, var(--content-max));
  margin-inline: auto;
}

.page > *,
.view-inner > * {
  animation: station-enter 240ms ease both;
}

.page > *:nth-child(2),
.view-inner > *:nth-child(2) {
  animation-delay: 35ms;
}

.page > *:nth-child(3),
.view-inner > *:nth-child(3) {
  animation-delay: 70ms;
}

@keyframes station-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page hierarchy */
.page-header,
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  margin-block-end: 24px;
  padding-block-end: 20px;
  border-bottom: 1px solid var(--line);
}

.eyebrow,
.page-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-block-end: 10px;
  color: var(--signal);
  font: 650 12px var(--font-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eyebrow::before,
.page-kicker::before {
  width: 24px;
  height: 1px;
  content: "";
  background: currentColor;
}

.page-header h1,
.section-head h1,
.page-title {
  max-width: 980px;
  margin: 0;
  font: 680 clamp(34px, 4.2vw, 62px)/0.94 var(--font-display);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.page-header p,
.section-head p,
.page-description {
  max-width: 780px;
  margin: 13px 0 0;
  color: var(--paper-soft);
  font-size: 14px;
  line-height: 1.65;
}

.page-actions,
.header-actions,
.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.page-meta,
.head-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  border: 1px solid var(--line);
}

.page-meta > div,
.head-meta > div {
  min-height: 58px;
  padding: 10px 12px;
}

.page-meta > div + div,
.head-meta > div + div {
  border-inline-start: 1px solid var(--line);
}

.page-meta small,
.page-meta strong,
.head-meta small,
.head-meta b {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
}

.page-meta small,
.head-meta small {
  color: var(--muted);
}

.page-meta strong,
.head-meta b {
  margin-block-start: 5px;
}

.toolbar,
.filter-bar,
.command-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 58px;
  margin-block-end: 14px;
  padding: 7px;
  border: 1px solid var(--line);
  background: rgba(7, 17, 15, 0.86);
}

.toolbar-label,
.filter-label {
  padding-inline: 8px;
  color: var(--muted);
  font: 650 12px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.toolbar-spacer {
  flex: 1 1 auto;
}

.data-notice,
.honesty-banner,
.provenance-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-block-end: 16px;
  padding: 12px 14px;
  color: var(--paper-soft);
  border: 1px dashed rgba(193, 138, 82, 0.58);
  background: rgba(193, 138, 82, 0.055);
  font-size: 13px;
}

.data-notice p,
.honesty-banner p,
.provenance-banner p {
  margin: 0;
}

/* Operational state and data provenance stay textual as well as chromatic. */
.status-badge,
.status,
.ops-badge,
.state,
.state-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 28px;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  color: var(--paper-soft);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  font: 700 12px var(--font-mono);
  letter-spacing: 0.045em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
}

.status__mark,
.ops-badge__mark {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.status__label,
.ops-badge__label {
  color: inherit;
  font-weight: 700;
}

.status__time,
.ops-badge__time {
  color: var(--muted);
  font-weight: 500;
}

.status-badge::before,
.status.with-dot::before,
.state.with-dot::before {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  content: "";
  border-radius: 50%;
  background: currentColor;
}

.status-live,
.status--live,
.state-live,
.status-badge[data-status="live"],
.status-badge[data-state="live"] {
  color: var(--live);
  background: rgba(117, 216, 151, 0.045);
}

.status-recent,
.status--recent,
.state-recent,
.status-badge[data-status="recent"],
.status-badge[data-state="recent"] {
  color: var(--recent);
  background: rgba(144, 169, 255, 0.055);
}

.status-stale,
.status--stale,
.state-stale,
.status-badge[data-status="stale"],
.status-badge[data-state="stale"] {
  color: var(--stale-text);
  border-color: #314b65;
  background: var(--stale-fill);
}

.status-mock,
.status--mock,
.state-mock,
.status-badge[data-status="mock"],
.status-badge[data-state="mock"] {
  color: var(--mock);
  border-color: var(--mock);
  background: rgba(193, 138, 82, 0.08);
}

.status-offline,
.status--offline,
.state-offline,
.status-failed,
.state-failed,
.status-badge[data-status="offline"],
.status-badge[data-status="failed"],
.status-badge[data-state="offline"],
.status-badge[data-state="failed"] {
  color: var(--offline);
  background: rgba(255, 107, 87, 0.055);
}

/* Operational outcomes use a separate badge vocabulary from evidence freshness. */
.ops-badge--healthy {
  color: var(--live);
  background: rgba(117, 216, 151, 0.045);
}

.ops-badge--active {
  color: var(--recent);
  background: rgba(144, 169, 255, 0.055);
}

.ops-badge--idle {
  color: var(--stale-text);
  border-color: #314b65;
  background: var(--stale-fill);
}

.ops-badge--review,
.ops-badge--mock {
  color: var(--mock);
  border-color: var(--mock);
  background: rgba(193, 138, 82, 0.08);
}

.ops-badge--offline {
  color: var(--offline);
  background: rgba(255, 107, 87, 0.055);
}

.status-unknown,
.state-unknown {
  color: var(--muted);
}

.status-dot,
.health-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.provenance-live { color: var(--live); }
.provenance-recent { color: var(--recent); }
.provenance-stale { color: var(--stale-text); }
.provenance-mock,
.provenance-synthetic { color: #e3b88c; }
.provenance-offline { color: var(--offline); }

/* Layout primitives */
.grid {
  display: grid;
  gap: 14px;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-full { grid-column: 1 / -1; }

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

.cluster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Instrument panels carry station codes like engraved foundry plates. */
.panel,
.instrument-panel,
.card {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(16, 32, 28, 0.86), rgba(7, 17, 15, 0.94));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.022);
}

.panel-grid {
  display: grid;
  gap: 14px;
}

.panel::after,
.instrument-panel::after,
.card::after {
  position: absolute;
  inset-block-start: -1px;
  inset-inline-end: -1px;
  width: 14px;
  height: 14px;
  content: "";
  pointer-events: none;
  border-block-start: 1px solid var(--line-strong);
  border-inline-end: 1px solid var(--line-strong);
}

.panel[data-station]::before,
.instrument-panel[data-station]::before {
  position: absolute;
  z-index: 2;
  inset-block-start: -1px;
  inset-inline-end: 20px;
  min-width: 48px;
  padding: 2px 6px;
  content: attr(data-station);
  color: var(--muted);
  border: 1px solid var(--line);
  border-block-start: 0;
  background: var(--ink-1);
  font: 650 12px var(--font-mono);
  text-align: center;
}

.panel--critical,
.panel-critical {
  border-color: rgba(255, 107, 87, 0.42);
}

.panel--selected,
.panel-selected {
  border-color: var(--line-hot);
  box-shadow: inset 2px 0 var(--signal);
}

.panel-header,
.panel-head,
.panel__head,
.card-header {
  min-height: 52px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 15px;
  border-bottom: 1px solid var(--line);
}

.panel-title,
.panel-header h2,
.panel-header h3,
.panel-head h2,
.panel-head h3,
.panel__head h2,
.panel__head h3,
.card-header h2,
.card-header h3 {
  margin: 0;
  font: 650 14px/1.25 var(--font-body);
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.panel-header small,
.panel-head small,
.panel__head small,
.card-header small,
.panel-code {
  color: var(--muted);
  font: 550 12px var(--font-mono);
}

.panel-body,
.panel__body,
.card-body {
  padding: 16px;
}

.panel-footer,
.card-footer {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 15px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font: 500 12px var(--font-mono);
}

.panel-note,
.help-text,
.microcopy {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

/* KPI and service health */
.kpi-grid,
.health-grid,
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-block-end: 14px;
  border: 1px solid var(--line);
  background: var(--line);
}

.kpi-card,
.kpi,
.health-card,
.service-card {
  min-width: 0;
  min-height: 138px;
  padding: 16px;
  background: var(--ink-2);
}

.kpi-head,
.kpi-top,
.health-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kpi-label,
.health-label,
.metric-label {
  color: var(--paper-soft);
  font-size: 12px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.kpi-value,
.health-value,
.metric-value {
  margin-block-start: 14px;
  font: 550 clamp(29px, 3vw, 44px)/1 var(--font-mono);
  letter-spacing: -0.07em;
}

.kpi-unit,
.metric-unit {
  margin-inline-start: 5px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
}

.kpi-foot,
.health-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-block-start: 13px;
  color: var(--muted);
  font: 500 12px var(--font-mono);
}

.trend-positive,
.trend-up-good,
.trend-down-good { color: var(--live) !important; }
.trend-negative,
.trend-up-bad,
.trend-down-bad { color: var(--offline) !important; }
.trend-neutral { color: var(--recent) !important; }

.health-list,
.metric-list {
  display: flex;
  flex-direction: column;
}

.health-row,
.metric-row {
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(128px, 0.8fr) minmax(120px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding-block: 8px;
  border-bottom: 1px solid var(--line);
}

.health-row:last-child,
.metric-row:last-child {
  border-bottom: 0;
}

.meter,
.metric-track,
.budget-track,
.confidence-track {
  height: 6px;
  overflow: hidden;
  background: rgba(167, 201, 183, 0.12);
}

.meter > i,
.metric-track > i,
.budget-track > i,
.confidence-track > i {
  display: block;
  width: calc(var(--value, var(--score, 0)) * 1%);
  height: 100%;
  background: linear-gradient(90deg, var(--gulf), var(--signal));
}

/* Buttons and forms */
.button,
.btn,
.chip,
.filter-chip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  color: var(--ink-0);
  border: 1px solid var(--signal);
  border-radius: var(--radius);
  background: var(--signal);
  font: 700 12px var(--font-mono);
  letter-spacing: 0.065em;
  text-decoration: none;
  text-transform: uppercase;
}

.button--primary {
  color: var(--ink-0);
  border-color: var(--signal);
  background: var(--signal);
}

.button:hover,
.btn:hover {
  border-color: var(--signal-soft);
  background: var(--signal-soft);
}

.button-secondary,
.btn-secondary,
.button-ghost,
.button--ghost,
.btn-ghost,
.chip,
.filter-chip {
  color: var(--paper-soft);
  border-color: var(--line-strong);
  background: transparent;
}

.button-secondary:hover,
.btn-secondary:hover,
.button-ghost:hover,
.button--ghost:hover,
.btn-ghost:hover,
.chip:hover,
.filter-chip:hover {
  color: var(--paper);
  border-color: var(--paper-soft);
  background: var(--ink-4);
}

.button-danger,
.button--danger,
.btn-danger {
  color: #140504;
  border-color: var(--offline);
  background: var(--offline);
}

.button-danger:hover,
.button--danger:hover,
.btn-danger:hover {
  color: #fff;
  border-color: #ff8875;
  background: #c54232;
}

.button.is-active,
.btn.is-active,
.button[aria-pressed="true"],
.btn[aria-pressed="true"],
.chip[aria-pressed="true"],
.filter-chip[aria-pressed="true"] {
  color: var(--ink-0);
  border-color: var(--signal);
  background: var(--signal);
}

.button-icon,
.button--icon,
.button--small,
.btn-icon {
  width: 44px;
  min-width: 44px;
  padding: 0;
}

.button--small {
  width: auto;
  min-width: 44px;
  padding-inline: 11px;
  font-size: 12px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field,
.form-field {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.field-full,
.form-field-full {
  grid-column: 1 / -1;
}

.field label,
.form-field label,
.field-label {
  color: var(--paper-soft);
  font-size: 13px;
  font-weight: 620;
}

.field-hint {
  color: var(--muted);
  font: 500 12px/1.5 var(--font-mono);
}

.input,
.select,
.textarea,
.field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.field select,
.field textarea,
.form-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--ink-1);
  font-size: 14px;
}

.textarea,
.field textarea,
.form-field textarea {
  min-height: 112px;
  resize: vertical;
  line-height: 1.55;
}

.input::placeholder,
.textarea::placeholder,
.field input::placeholder,
.field textarea::placeholder,
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #65786e;
}

.input:hover,
.select:hover,
.textarea:hover,
.field input:hover,
.field select:hover,
.field textarea:hover,
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: var(--paper-soft);
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"],
.field [aria-invalid="true"],
.form-field [aria-invalid="true"] {
  border-color: var(--offline);
}

.check-row,
.radio-row,
.switch-row {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
}

input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: var(--signal);
}

input[type="range"] {
  width: 100%;
  min-height: 44px;
  accent-color: var(--signal);
}

.switch {
  position: relative;
  width: 48px;
  height: 26px;
  flex: 0 0 auto;
  display: inline-block;
}

.switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.switch-track {
  position: absolute;
  inset: 0;
  border: 1px solid var(--line-strong);
  background: var(--stale-fill);
}

.switch-track::after {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: 4px;
  width: 16px;
  height: 16px;
  content: "";
  background: var(--stale-text);
  transition: transform 140ms ease, background 140ms ease;
}

.switch input:checked + .switch-track {
  border-color: var(--live);
  background: rgba(117, 216, 151, 0.12);
}

.switch input:checked + .switch-track::after {
  background: var(--live);
  transform: translateX(22px);
}

[dir="rtl"] .switch input:checked + .switch-track::after {
  transform: translateX(-22px);
}

.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* Dense tables remain readable and expose a card mode for narrow screens. */
.table-wrap,
.table-scroll,
.matrix-scroll,
.matrix-wrap {
  max-width: 100%;
  overflow: auto;
  scrollbar-color: var(--line-strong) transparent;
}

.data-table,
.chart-table,
.source-table,
.audit-table,
.run-table,
.user-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--paper-soft);
  font-size: 13px;
}

.data-table caption,
.chart-table caption,
.source-table caption,
.audit-table caption,
.run-table caption,
.user-table caption {
  padding: 12px 14px;
  color: var(--muted);
  font: 500 12px/1.5 var(--font-mono);
  text-align: start;
}

.data-table th,
.data-table td,
.chart-table th,
.chart-table td,
.source-table th,
.source-table td,
.audit-table th,
.audit-table td,
.run-table th,
.run-table td,
.user-table th,
.user-table td {
  min-height: 44px;
  padding: 12px 11px;
  border-bottom: 1px solid var(--line);
  text-align: start;
  vertical-align: middle;
}

.data-table th,
.chart-table th,
.source-table th,
.audit-table th,
.run-table th,
.user-table th {
  position: sticky;
  z-index: 2;
  inset-block-start: 0;
  color: var(--muted);
  background: var(--ink-2);
  font: 700 12px var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-table tbody tr:hover,
.chart-table tbody tr:hover,
.source-table tbody tr:hover,
.audit-table tbody tr:hover,
.run-table tbody tr:hover,
.user-table tbody tr:hover {
  background: rgba(78, 201, 187, 0.035);
}

.data-table tbody tr[aria-selected="true"],
.chart-table tbody tr[aria-selected="true"],
.source-table tbody tr[aria-selected="true"],
.audit-table tbody tr[aria-selected="true"],
.run-table tbody tr[aria-selected="true"],
.user-table tbody tr[aria-selected="true"] {
  background: rgba(232, 176, 74, 0.065);
  box-shadow: inset 2px 0 var(--signal);
}

.table-primary {
  color: var(--paper);
  font-weight: 650;
}

.table-meta,
.mono,
.event-time,
.trace-id,
.resource-id {
  font-family: var(--font-mono);
  font-size: 12px;
}

.table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.table-empty {
  padding: 38px 18px !important;
  color: var(--muted);
  text-align: center !important;
}

/* Charts */
.chart,
.chart-frame,
.trend-chart {
  position: relative;
  min-width: 0;
}

.chart-header,
.chart-toolbar,
.chart-legend,
.legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.chart-legend,
.legend {
  justify-content: flex-start;
  color: var(--muted);
  font: 500 12px var(--font-mono);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-swatch {
  width: 16px;
  height: 3px;
  background: var(--recent);
}

.legend-swatch.live { background: var(--live); }
.legend-swatch.recent { background: var(--recent); }
.legend-swatch.stale { background: var(--stale-text); }
.legend-swatch.mock { background: var(--mock); }
.legend-swatch.offline { background: var(--offline); }

.chart-canvas,
.chart-svg,
.chart__plot,
.line-chart {
  width: 100%;
  min-height: 190px;
  margin-block-start: 12px;
}

.chart-grid-line,
.line-chart .grid-line {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart-axis,
.line-chart .axis {
  stroke: var(--line-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart-line,
.line-chart .path {
  fill: none;
  stroke: var(--recent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.chart-line-live { stroke: var(--live); }
.chart-line-mock { stroke: var(--mock); stroke-dasharray: 5 4; }
.chart-line-offline { stroke: var(--offline); }

.chart-area {
  fill: rgba(144, 169, 255, 0.09);
}

.chart-label,
.axis-label {
  fill: var(--muted);
  font: 500 11px var(--font-mono);
}

.chart-summary {
  margin-block-start: 12px;
  padding: 11px 12px;
  color: var(--paper-soft);
  border-inline-start: 2px solid var(--recent);
  background: rgba(144, 169, 255, 0.045);
  font-size: 13px;
}

.bar-chart,
.mini-bars,
.spark-bars {
  min-height: 110px;
  display: flex;
  align-items: end;
  gap: 5px;
  padding-block-start: 10px;
}

.bar-chart > i,
.mini-bars > i,
.spark-bars > i {
  min-width: 4px;
  flex: 1;
  height: calc(var(--value, var(--v, 0)) * 1%);
  background: linear-gradient(180deg, var(--recent), rgba(144, 169, 255, 0.14));
}

.health-ring,
.radial-gauge {
  --gauge-value: 0;
  position: relative;
  width: min(170px, 100%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-inline: auto;
  border-radius: 50%;
  background: conic-gradient(var(--live) calc(var(--gauge-value) * 1%), rgba(117, 216, 151, 0.08) 0);
}

.health-ring::before,
.radial-gauge::before {
  position: absolute;
  inset: 10px;
  content: "";
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--ink-2);
}

.health-ring > *,
.radial-gauge > * {
  position: relative;
}

/* Pipeline control surface */
.pipeline,
.pipeline-board {
  min-width: 0;
}

.pipeline-flow,
.pipeline-stages {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--stage-count, 5), minmax(138px, 1fr));
  gap: 28px;
  padding: 12px 2px;
  overflow-x: auto;
  scrollbar-color: var(--line-strong) transparent;
}

.pipeline-stage,
.pipeline-node {
  position: relative;
  min-width: 138px;
  min-height: 126px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  background: var(--ink-1);
}

.pipeline-edge {
  position: relative;
  min-width: 28px;
  height: 1px;
  align-self: center;
  background: var(--line-strong);
}

.pipeline-edge::after {
  position: absolute;
  inset-block-start: -3px;
  inset-inline-end: 0;
  width: 7px;
  height: 7px;
  content: "";
  transform: rotate(45deg);
  border-block-start: 1px solid var(--line-strong);
  border-inline-end: 1px solid var(--line-strong);
}

.pipeline-edge.is-active {
  background: var(--recent);
}

.pipeline-edge.is-failed {
  background: var(--offline);
}

.pipeline-stage:not(:last-child)::after,
.pipeline-node:not(:last-child)::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: calc(100% + 1px);
  width: 28px;
  height: 1px;
  content: "";
  background: var(--line-strong);
}

.pipeline-stage:not(:last-child)::before,
.pipeline-node:not(:last-child)::before {
  position: absolute;
  z-index: 1;
  inset-block-start: calc(50% - 3px);
  inset-inline-start: calc(100% + 23px);
  width: 7px;
  height: 7px;
  content: "";
  transform: rotate(45deg);
  border-block-start: 1px solid var(--line-strong);
  border-inline-end: 1px solid var(--line-strong);
}

.pipeline-stage[data-status="live"],
.pipeline-node[data-status="live"],
.pipeline-stage.is-live,
.pipeline-node.is-live { border-color: rgba(117, 216, 151, 0.58); }
.pipeline-stage[data-status="recent"],
.pipeline-node[data-status="recent"],
.pipeline-stage.is-recent,
.pipeline-node.is-recent { border-color: rgba(144, 169, 255, 0.64); }
.pipeline-stage[data-status="stale"],
.pipeline-node[data-status="stale"],
.pipeline-stage.is-stale,
.pipeline-node.is-stale { border-color: #314b65; background: var(--stale-fill); }
.pipeline-stage[data-status="mock"],
.pipeline-node[data-status="mock"],
.pipeline-stage.is-mock,
.pipeline-node.is-mock { border-color: var(--mock); }
.pipeline-stage[data-status="offline"],
.pipeline-node[data-status="offline"],
.pipeline-stage.is-offline,
.pipeline-node.is-offline { border-color: var(--offline); }

.pipeline-index,
.stage-index {
  display: block;
  color: var(--muted);
  font: 650 12px var(--font-mono);
}

.pipeline-stage h3,
.pipeline-node h3 {
  margin: 16px 0 6px;
  font-size: 14px;
  line-height: 1.2;
  text-transform: uppercase;
}

.pipeline-stage p,
.pipeline-node p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.pipeline-metrics,
.stage-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-block-start: 12px;
  background: var(--line);
}

.pipeline-metrics > div,
.stage-metrics > div {
  padding: 8px;
  background: var(--ink-2);
}

.pipeline-metrics small,
.pipeline-metrics strong,
.stage-metrics small,
.stage-metrics strong {
  display: block;
  font: 500 12px var(--font-mono);
}

.pipeline-metrics small,
.stage-metrics small { color: var(--muted); }
.pipeline-metrics strong,
.stage-metrics strong { margin-block-start: 3px; color: var(--paper); }

.run-list,
.job-list,
.incident-list {
  display: flex;
  flex-direction: column;
}

.ledger {
  display: flex;
  flex-direction: column;
}

.ledger-item {
  min-height: 64px;
  display: grid;
  grid-template-columns: 104px 9px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.ledger-item:last-child {
  border-bottom: 0;
}

.ledger-item::before {
  grid-column: 2;
  width: 7px;
  height: 7px;
  margin-block-start: 5px;
  content: "";
  border-radius: 50%;
  background: var(--recent);
}

.ledger-item[data-status="live"]::before { background: var(--live); }
.ledger-item[data-status="stale"]::before { background: var(--stale-text); }
.ledger-item[data-status="mock"]::before { background: var(--mock); }
.ledger-item[data-status="offline"]::before { background: var(--offline); }

.metric {
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(110px, 0.7fr) minmax(120px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding-block: 8px;
  border-bottom: 1px solid var(--line);
}

.metric:last-child {
  border-bottom: 0;
}

.run-row,
.job-row,
.incident-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(110px, 0.6fr) minmax(160px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.run-row:last-child,
.job-row:last-child,
.incident-row:last-child { border-bottom: 0; }

/* Users and RBAC */
.user-cell {
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar,
.user-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--signal-soft);
  border: 1px solid var(--line-strong);
  background: var(--ink-4);
  font: 700 12px var(--font-mono);
}

.user-cell strong,
.user-cell small {
  display: block;
}

.user-cell small {
  margin-block-start: 2px;
  color: var(--muted);
  font-size: 12px;
}

.role-badge,
.permission-badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding-inline: 8px;
  color: var(--recent);
  border: 1px solid rgba(144, 169, 255, 0.46);
  font: 650 12px var(--font-mono);
  white-space: nowrap;
}

.rbac-matrix {
  width: 100%;
  border-collapse: collapse;
}

.rbac-matrix th,
.rbac-matrix td {
  min-width: 92px;
  min-height: 44px;
  padding: 11px;
  border: 1px solid var(--line);
  text-align: center;
}

.rbac-matrix th {
  color: var(--muted);
  background: var(--ink-2);
  font: 650 12px var(--font-mono);
}

.rbac-matrix th:first-child,
.rbac-matrix td:first-child {
  position: sticky;
  z-index: 2;
  inset-inline-start: 0;
  min-width: 170px;
  text-align: start;
  background: var(--ink-2);
}

.permission-cell {
  color: var(--muted);
  font: 700 12px var(--font-mono);
}

.permission-cell.is-allowed { color: var(--live); }
.permission-cell.is-limited { color: var(--mock); }
.permission-cell.is-denied { color: var(--offline); }

.permission-diff {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.permission-diff > section {
  padding: 14px;
  background: var(--ink-2);
}

/* Audit event ledger */
.event-stream,
.audit-stream {
  display: flex;
  flex-direction: column;
}

.event-row,
.audit-event {
  position: relative;
  min-height: 70px;
  display: grid;
  grid-template-columns: 110px 10px minmax(180px, 1fr) minmax(130px, 0.45fr) auto;
  align-items: start;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.event-row:last-child,
.audit-event:last-child { border-bottom: 0; }

.event-marker {
  width: 8px;
  height: 8px;
  margin-block-start: 5px;
  border-radius: 50%;
  background: var(--recent);
}

.event-marker.is-success { background: var(--live); }
.event-marker.is-warning { background: var(--mock); }
.event-marker.is-failed { background: var(--offline); }

.event-copy h3,
.audit-event h3 {
  margin: 0 0 4px;
  font-size: 13px;
}

.event-copy p,
.audit-event p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

/* AI settings and controlled secrets */
.model-grid,
.provider-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.model-card,
.provider-card {
  position: relative;
  min-height: 178px;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--ink-2);
}

.model-card.is-selected,
.provider-card.is-selected {
  border-color: var(--signal);
  box-shadow: inset 2px 0 var(--signal);
}

.model-card h3,
.provider-card h3 {
  margin: 16px 0 7px;
  font-size: 15px;
}

.model-card p,
.provider-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.secret-state,
.secret-presence {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  background: var(--ink-1);
}

.secret-state code,
.secret-presence code {
  overflow: hidden;
  color: var(--muted);
  font: 500 12px var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.budget-meter,
.quota-meter {
  display: grid;
  gap: 8px;
}

.budget-meta,
.quota-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font: 500 12px var(--font-mono);
}

/* Game-theory workbench: evidence and uncertainty surround every payoff. */
.game-workbench,
.game-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.58fr) minmax(0, 1.42fr);
  gap: 14px;
  align-items: start;
}

.game-sidebar,
.assumptions-panel {
  position: sticky;
  inset-block-start: calc(var(--topbar-size) + var(--spine-size) + 16px);
}

.actor-list,
.assumption-list,
.scenario-list {
  display: flex;
  flex-direction: column;
}

.actor-row,
.assumption-row,
.scenario-row {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.actor-row:last-child,
.assumption-row:last-child,
.scenario-row:last-child { border-bottom: 0; }

.game-matrix:not(table),
.payoff-grid {
  display: grid;
  grid-template-columns: minmax(120px, 0.55fr) repeat(var(--action-count, 3), minmax(148px, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

table.game-matrix {
  width: 100%;
  border-collapse: collapse;
}

table.game-matrix th,
table.game-matrix td {
  min-width: 148px;
  padding: 11px;
  border: 1px solid var(--line);
  vertical-align: top;
}

table.game-matrix th {
  color: var(--muted);
  background: var(--ink-2);
  font: 650 12px/1.4 var(--font-mono);
  text-align: start;
  text-transform: uppercase;
}

.matrix-header,
.matrix-axis,
.payoff-cell {
  min-width: 0;
  padding: 12px;
  background: var(--ink-2);
}

.payoff {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--ink-2);
}

.matrix-header,
.matrix-axis {
  color: var(--muted);
  font: 650 12px/1.4 var(--font-mono);
  text-transform: uppercase;
}

.payoff-cell {
  position: relative;
  min-height: 128px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.payoff-cell:hover,
.payoff-cell:focus-within,
.payoff-cell.is-selected {
  z-index: 1;
  background: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--signal);
}

.payoff-cell h3 {
  margin: 0;
  font-size: 13px;
}

.payoff-score,
.payoff-pair {
  color: var(--signal-soft);
  font: 650 20px var(--font-mono);
}

.payoff-meta,
.payoff-cell p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.payoff-confidence,
.confidence-meter {
  margin-block-start: auto;
}

.scenario-compare,
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.scenario-outcome,
.outcome {
  min-height: 116px;
  padding: 13px;
  background: var(--ink-2);
}

.scenario-outcome small,
.outcome small {
  display: block;
  min-height: 34px;
  color: var(--muted);
  font: 500 12px/1.4 var(--font-mono);
}

.scenario-outcome strong,
.outcome b {
  display: block;
  margin-block-start: 9px;
  font: 600 21px var(--font-mono);
}

.uncertainty-band,
.synthetic-label {
  color: #e3b88c;
  font: 650 12px var(--font-mono);
}

.signal-pair,
.ledger-item__signals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.signal-pair {
  justify-content: flex-end;
}

.signal-caption {
  color: var(--muted);
  font: 650 12px/1.25 var(--font-mono);
  letter-spacing: 0.04em;
}

.ledger-item > .ledger-item__signals {
  grid-column: 4;
  max-width: 250px;
  justify-content: flex-end;
  justify-self: end;
}

.game-interpretation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.game-interpretation-grid > article {
  min-height: 164px;
  padding: 16px;
  background: var(--ink-2);
}

.game-interpretation-grid span,
.scenario-outlook-card header span {
  color: var(--signal);
  font: 650 12px/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.game-interpretation-grid strong {
  display: block;
  margin-block-start: 12px;
  color: var(--paper);
  font-size: 15px;
  line-height: 1.45;
}

.game-interpretation-grid p,
.scenario-outlook-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.actor-position {
  margin: 0;
}

.actor-position__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-block-end: 12px;
}

.actor-position__head strong {
  color: var(--paper);
  font-size: 15px;
}

.actor-position__head p {
  max-width: 820px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.actor-position__plot {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(78, 201, 187, 0.035), transparent 55%),
    var(--ink-1);
  scrollbar-color: var(--line-strong) var(--ink-1);
}

.actor-position__plot:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.actor-position__plot svg {
  width: 100%;
  min-width: 680px;
  height: auto;
  display: block;
}

.actor-position__field {
  fill: rgba(7, 17, 15, 0.72);
  stroke: var(--line-strong);
}

.actor-position__grid line {
  stroke: var(--line);
  stroke-width: 1;
}

.actor-position__grid text,
.actor-position__axis {
  fill: var(--muted);
  font: 650 12px var(--font-mono);
  letter-spacing: 0.03em;
}

.actor-position__actor {
  color: var(--paper-soft);
}

.actor-position__actor--0 { color: var(--actor-iran); }
.actor-position__actor--1 { color: var(--actor-us); }
.actor-position__actor--2 { color: var(--actor-israel); }
.actor-position__actor--3 { color: var(--actor-uk); }
.actor-position__actor--4 { color: var(--actor-gcc); }
.actor-position__actor--5 { color: var(--actor-importer); }

.actor-position__actor line {
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.actor-position__actor text {
  fill: currentColor;
  font: 700 12px var(--font-mono);
  paint-order: stroke;
  stroke: var(--ink-1);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.actor-position__current {
  fill: var(--ink-1);
  stroke: currentColor;
  stroke-width: 2.5;
}

.actor-position__scenario {
  fill: currentColor;
  stroke: var(--ink-1);
  stroke-width: 2;
}

.actor-position__arrow-head {
  fill: var(--signal-soft);
}

.actor-position__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-block: 10px 14px;
  color: var(--muted);
  font: 600 12px var(--font-mono);
}

.actor-position__legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.actor-position__legend i {
  width: 10px;
  height: 10px;
  border: 2px solid var(--signal);
  border-radius: 50%;
}

.actor-position__legend-scenario {
  background: var(--signal);
}

.actor-position-table strong,
.scenario-outlook-table th {
  color: var(--paper);
}

.analysis-cell {
  min-width: 300px !important;
}

.analysis-cell strong,
.analysis-cell p,
.analysis-cell small {
  display: block;
  font-size: 12px;
  line-height: 1.45;
}

.analysis-cell strong {
  color: var(--paper);
}

.analysis-cell p {
  margin: 7px 0;
  color: var(--paper-soft);
}

.analysis-cell small {
  color: var(--muted);
}

table.game-matrix td.payoff--risk {
  color: var(--signal-soft);
}

.scenario-outlook-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.scenario-outlook-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--ink-2);
}

.scenario-outlook-card header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.scenario-outlook-card h3 {
  margin: 4px 0 0;
  color: var(--paper);
  font-size: 17px;
}

.scenario-outlook-card__boundary {
  min-height: 38px;
}

.scenario-outlook-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 14px 0 0;
  border: 1px solid var(--line);
  background: var(--line);
}

.scenario-outlook-metrics > div {
  min-width: 0;
  padding: 9px;
  background: var(--ink-1);
}

.scenario-outlook-metrics dt {
  color: var(--muted);
  font: 600 12px/1.35 var(--font-mono);
  text-transform: uppercase;
}

.scenario-outlook-metrics dd {
  margin: 6px 0 0;
  color: var(--signal-soft);
  font: 650 18px var(--font-mono);
  overflow-wrap: anywhere;
}

.scenario-outlook-conditions {
  margin: 14px 0;
  padding-inline-start: 20px;
  color: var(--paper-soft);
  font-size: 12px;
}

.scenario-outlook-conditions li + li {
  margin-block-start: 6px;
}

.scenario-outlook-actors {
  margin-block-start: 12px;
  border-block-start: 1px solid var(--line);
}

.scenario-outlook-actors > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--paper);
  font: 650 12px var(--font-mono);
  cursor: pointer;
}

.scenario-outlook-actors > summary:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.scenario-outlook-actors ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.scenario-outlook-actors li {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block: 6px;
  border-block-start: 1px solid var(--line);
  font-size: 12px;
}

.scenario-outlook-actors li span {
  color: var(--muted);
  font-family: var(--font-mono);
  text-align: end;
}

.scenario-outlook-table {
  margin-block-start: 14px;
}

.metric--compact > .status {
  justify-self: end;
}

/* Empty, error and boot states */
.loading-screen,
.boot-screen,
.loading-panel,
.loading-state,
.empty-state,
.error-state,
.error-panel {
  min-height: 280px;
  display: grid;
  place-content: center;
  gap: 12px;
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.boot-screen,
.loading-screen {
  min-height: 100vh;
  font: 600 12px var(--font-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.loading-bar {
  width: min(240px, 70vw);
  height: 3px;
  overflow: hidden;
  margin-inline: auto;
  background: var(--line);
}

.loading-bar::after {
  display: block;
  width: 38%;
  height: 100%;
  content: "";
  background: var(--signal);
  animation: scanner 900ms linear infinite;
}

@keyframes scanner {
  from { transform: translateX(-110%); }
  to { transform: translateX(280%); }
}

.empty-state h2,
.error-state h2,
.error-panel h1 {
  margin: 0;
  color: var(--paper);
  font: 650 28px/1 var(--font-display);
  text-transform: uppercase;
}

.error-state,
.error-panel {
  border: 1px solid rgba(255, 107, 87, 0.45);
  background: var(--ink-2);
}

.error-code {
  color: var(--offline);
  font: 650 12px var(--font-mono);
}

/* Trap-compatible drawers and dialogs; JavaScript owns focus and inert state. */
.detail-drawer,
.assistant-drawer,
.side-drawer {
  position: fixed;
  z-index: 111;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(540px, 100%);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  visibility: hidden;
  transform: translateX(102%);
  border-inline-start: 1px solid var(--line-strong);
  background: var(--ink-1);
  box-shadow: var(--shadow-deep);
  transition: transform 180ms ease, visibility 180ms ease;
}

[dir="rtl"] .detail-drawer,
[dir="rtl"] .assistant-drawer,
[dir="rtl"] .side-drawer {
  transform: translateX(-102%);
}

.detail-drawer.is-open,
.assistant-drawer.is-open,
.side-drawer.is-open,
body.drawer-open .detail-drawer,
body.assistant-open .assistant-drawer {
  visibility: visible;
  transform: translateX(0);
}

body.drawer-open .drawer-scrim,
body.assistant-open .drawer-scrim,
.drawer-scrim.is-open {
  visibility: visible;
  opacity: 1;
}

.drawer-header,
.assistant-head {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-strong);
}

.drawer-header h2,
.assistant-head h2 {
  margin: 0;
  font: 650 20px var(--font-display);
  text-transform: uppercase;
}

.drawer-body,
.assistant-body,
.assistant-messages {
  overflow-y: auto;
  padding: 18px;
}

.drawer-footer,
.assistant-footer,
.assistant-form {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
}

.dialog,
.modal {
  width: min(620px, calc(100vw - 32px));
  max-height: min(82vh, 800px);
  padding: 0;
  overflow: hidden;
  color: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--ink-1);
  box-shadow: var(--shadow-deep);
}

dialog.dialog,
dialog.modal {
  position: fixed;
  inset: 50% auto auto 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}

.dialog::backdrop,
.modal::backdrop {
  background: rgba(2, 5, 4, 0.78);
  backdrop-filter: blur(3px);
}

.dialog-layer {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: none;
  place-items: center;
  padding: 16px;
  background: rgba(2, 5, 4, 0.78);
}

.dialog-scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 4, 0.78);
  backdrop-filter: blur(3px);
}

.dialog-layer > .dialog,
.dialog-layer > .modal {
  z-index: 1;
}

.dialog-layer.is-open {
  display: grid;
}

body.dialog-open .dialog-layer {
  display: grid;
}

.dialog-header,
.dialog__head,
.modal-header {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-strong);
}

.dialog-header h2,
.dialog__head h2,
.modal-header h2 {
  margin: 0;
  font: 650 22px/1 var(--font-display);
  text-transform: uppercase;
}

.dialog-body,
.dialog__body,
.modal-body {
  max-height: calc(82vh - 136px);
  overflow-y: auto;
  padding: 18px;
}

.dialog-footer,
.dialog__actions,
.modal-footer {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}

.danger-zone {
  padding: 14px;
  border: 1px solid rgba(255, 107, 87, 0.5);
  background: rgba(255, 107, 87, 0.045);
}

.danger-zone h3 {
  margin: 0 0 7px;
  color: var(--offline);
  font-size: 14px;
  text-transform: uppercase;
}

/* Announcements */
.toast-region,
.notifications {
  position: fixed;
  z-index: 140;
  inset-inline-end: 18px;
  inset-block-end: 18px;
  width: min(390px, calc(100vw - 36px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  position: relative;
  min-height: 58px;
  padding: 12px 44px 12px 14px;
  pointer-events: auto;
  color: var(--paper-soft);
  border: 1px solid var(--line-strong);
  border-inline-start: 3px solid var(--recent);
  background: var(--ink-2);
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.4);
  font-size: 13px;
  animation: toast-enter 160ms ease both;
}

[dir="rtl"] .toast {
  padding: 12px 14px 12px 44px;
}

@keyframes toast-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.toast h3 {
  margin: 0 0 3px;
  color: var(--paper);
  font-size: 13px;
}

.toast p {
  margin: 0;
}

.toast-success,
.toast--success,
.toast-ok { border-inline-start-color: var(--live); }
.toast-info,
.toast--info { border-inline-start-color: var(--recent); }
.toast-warning,
.toast--warning,
.toast-warn { border-inline-start-color: var(--mock); }
.toast-error,
.toast--error { border-inline-start-color: var(--offline); }

.toast-close {
  position: absolute;
  inset-block-start: 7px;
  inset-inline-end: 7px;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--muted);
  border: 0;
  background: transparent;
}

.demo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  color: #e3b88c;
  border: 1px solid var(--mock);
  background: rgba(193, 138, 82, 0.075);
  font: 650 12px var(--font-mono);
  letter-spacing: 0.04em;
  text-align: center;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr)) auto;
  align-items: end;
  gap: 10px;
}

.filter-grid label {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: var(--paper-soft);
  font-size: 12px;
  font-weight: 620;
}

.filter-grid input,
.filter-grid select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--ink-1);
  font-size: 14px;
}

details {
  border: 1px solid var(--line);
  background: var(--ink-1);
}

summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  color: var(--paper-soft);
  font-weight: 620;
  cursor: pointer;
}

summary::after {
  content: "+";
  color: var(--signal);
  font: 700 16px var(--font-mono);
}

details[open] > summary::after {
  content: "−";
}

details > :not(summary) {
  margin: 0;
  padding: 12px;
  border-top: 1px solid var(--line);
}

/* Exact SPA markup contract. These rules deliberately sit after the shared primitives. */
.topbar > .control-strip {
  position: static;
  inset: auto;
  height: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  overflow: hidden;
  padding-inline: 24px;
  color: var(--muted);
  border: 0;
  background: transparent;
  font: 600 12px var(--font-mono);
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.topbar > .control-strip > span:not(.ops-badge):not(#state-durability-slot) {
  overflow: hidden;
  text-overflow: ellipsis;
}

#state-durability-slot {
  min-width: 0;
  display: inline-flex;
}

.topbar > .account-block {
  min-width: 310px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
}

.account-block > span {
  color: var(--recent);
  font: 700 12px var(--font-mono);
  letter-spacing: 0.06em;
}

.account-block > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell > .admin-nav {
  inset-block-start: var(--topbar-size);
}

.app-shell > .workspace {
  width: auto;
  min-height: 100vh;
  margin-inline-start: var(--rail-size);
  padding: calc(var(--topbar-size) + 30px) clamp(18px, 3vw, 48px) 72px;
}

.demo-banner {
  position: fixed;
  z-index: 130;
  inset: 0 0 auto;
  height: 44px;
}

.demo-banner + .app-shell > .topbar {
  inset-block-start: 44px;
}

.demo-banner + .app-shell > .admin-nav {
  inset-block-start: calc(var(--topbar-size) + 44px);
}

.demo-banner + .app-shell > .workspace {
  padding-block-start: calc(var(--topbar-size) + 74px);
}

.login-panel__head {
  min-height: 88px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--line-strong);
}

.login-panel__head .brand-mark {
  width: 72px;
  height: 88px;
  border: 0;
  border-inline-end: 1px solid var(--line-strong);
}

.login-panel__head > div:last-child {
  min-width: 0;
  padding: 15px 18px;
}

.login-panel__head span {
  display: block;
  color: var(--muted);
  font: 650 12px var(--font-mono);
  letter-spacing: 0.09em;
}

.login-panel__head h1 {
  margin: 5px 0 0;
  font: 680 28px/1 var(--font-display);
  text-transform: uppercase;
}

.login-panel__signal {
  height: 5px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1.6fr 0.5fr 2fr;
  gap: 2px;
  background: var(--ink-0);
}

.login-panel__signal i:nth-child(1) { background: var(--live); }
.login-panel__signal i:nth-child(2) { background: var(--recent); }
.login-panel__signal i:nth-child(3) { background: var(--stale-text); }
.login-panel__signal i:nth-child(4) { background: var(--mock); }
.login-panel__signal i:nth-child(5) { background: var(--offline); }

.login-panel__lede {
  margin: 0;
  padding: 20px 24px 0;
  color: var(--paper-soft);
  font-size: 14px;
  line-height: 1.65;
}

.login-panel > footer {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 18px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font: 500 12px var(--font-mono);
}

.login-status--error {
  color: #ffd1c9;
  border-color: rgba(255, 107, 87, 0.48);
  background: rgba(255, 107, 87, 0.055);
}

.login-status strong,
.login-status p {
  margin: 0;
}

.login-status strong {
  flex: 0 0 auto;
  color: inherit;
}

.login-form label,
.control-form label {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: var(--paper-soft);
  font-size: 13px;
  font-weight: 620;
}

.login-form input,
.control-form input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
.control-form select,
.control-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--ink-1);
  font-size: 14px;
}

.control-form {
  display: grid;
  gap: 16px;
}

.range-control > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.range-control output {
  color: var(--signal-soft);
  font: 650 12px var(--font-mono);
}

.demo-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 14px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: rgba(193, 138, 82, 0.045);
}

.demo-entry > span {
  color: #e3b88c;
  font: 700 12px var(--font-mono);
}

.demo-entry > p {
  grid-column: 1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.demo-entry > .button {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.nav-link > span,
.nav-link > small {
  color: var(--muted);
  font: 650 12px var(--font-mono);
}

.nav-link > strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-link.is-active > span,
.nav-link[aria-current="page"] > span {
  color: var(--signal);
}

.nav-foot {
  margin-block-start: auto;
  display: grid;
  gap: 3px;
  padding: 16px 18px;
  color: var(--muted);
  border-top: 1px solid var(--line-strong);
  font: 500 12px var(--font-mono);
}

.nav-foot strong {
  color: var(--signal-soft);
}

.nav-foot small {
  font-size: 12px;
}

.page-meta {
  min-width: 284px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  padding: 11px 12px;
}

.page-meta > span:not(.status):not(.ops-badge) {
  color: var(--muted);
  font: 500 12px var(--font-mono);
}

.page-meta > strong {
  grid-column: 1;
  font: 650 12px var(--font-mono);
}

.page-meta > .status,
.page-meta > .ops-badge {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.page-header__lede {
  max-width: 760px;
}

.honesty-banner--critical {
  border-color: rgba(255, 107, 87, 0.6);
  background: rgba(255, 107, 87, 0.045);
}

.honesty-banner--critical > strong {
  color: var(--offline);
  font: 700 12px var(--font-mono);
}

.durability-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
  margin-block: -2px 16px;
  padding: 12px 14px;
  color: #ffd1c9;
  border: 1px solid rgba(255, 107, 87, 0.72);
  background: rgba(255, 107, 87, 0.07);
}

.durability-warning strong {
  color: var(--offline);
  font: 750 12px var(--font-mono);
  letter-spacing: 0.045em;
}

.durability-warning__signal {
  min-width: 188px;
  display: grid;
  gap: 4px;
}

.durability-warning__signal > span {
  color: #ffd1c9;
  font: 650 12px var(--font-mono);
  letter-spacing: 0.035em;
  overflow-wrap: anywhere;
}

.durability-warning p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.durability-warning code {
  max-width: 220px;
  overflow-wrap: anywhere;
  color: var(--paper-soft);
  font: 500 12px var(--font-mono);
}

.button__glyph {
  color: currentColor;
  font: 700 14px var(--font-mono);
}

.button-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.panel--wide {
  margin-block-start: 14px;
}

.panel-grid--asymmetric {
  grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
}

.panel-grid--controls {
  grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr);
}

.panel__head > div {
  min-width: 0;
}

.panel__head > div > span {
  display: block;
  margin-block-end: 4px;
  color: var(--muted);
  font: 650 12px var(--font-mono);
  letter-spacing: 0.075em;
}

.panel__head--stack {
  align-items: flex-end;
}

.kpi__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--paper-soft);
  font-size: 12px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.kpi > strong {
  display: block;
  margin-block-start: 14px;
  font: 550 clamp(29px, 3vw, 44px)/1 var(--font-mono);
  letter-spacing: -0.07em;
}

.kpi > strong small {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
}

.kpi > p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.service-grid {
  gap: 1px;
  background: var(--line);
}

.service-card {
  min-height: 108px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 13px;
}

.service-card > div > strong {
  color: var(--paper);
  font-size: 13px;
}

.service-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.service-card dl {
  grid-column: 1;
  margin: 0;
}

.service-card dl div {
  display: flex;
  gap: 8px;
}

.service-card dt,
.service-card dd {
  margin: 0;
  color: var(--muted);
  font: 500 12px var(--font-mono);
}

.service-card > .status,
.service-card > .ops-badge {
  grid-column: 1;
  grid-row: auto;
  justify-self: start;
}

.pipeline-flow {
  margin: 0;
  list-style: none;
}

.pipeline-node__index {
  display: block;
  color: var(--muted);
  font: 650 12px var(--font-mono);
}

.pipeline-node > strong {
  display: block;
  margin-block-start: 15px;
  color: var(--paper);
  font-size: 13px;
  text-transform: uppercase;
}

.pipeline-node > b {
  display: block;
  margin-block: 8px;
  color: var(--signal-soft);
  font: 650 22px var(--font-mono);
}

.ledger-item__index {
  grid-column: 1;
  color: var(--muted);
  font: 650 12px var(--font-mono);
  text-transform: uppercase;
}

.ledger-item > div:nth-of-type(2) {
  grid-column: 3;
  min-width: 0;
}

.ledger-item > div:nth-of-type(2) strong {
  color: var(--paper);
  font-size: 13px;
}

.ledger-item > div:nth-of-type(2) p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.ledger-item > .status,
.ledger-item > .ops-badge,
.ledger-item > time,
.ledger-item > b:last-child {
  grid-column: 4;
  justify-self: end;
}

.chart {
  margin: 0;
}

.chart figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.chart figcaption strong {
  color: var(--paper);
  font-size: 13px;
}

.chart__plot svg {
  width: 100%;
  height: 190px;
}

.chart__grid {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart__line {
  fill: none;
  stroke: var(--recent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.chart__line--live { stroke: var(--live); }
.chart__line--recent { stroke: var(--recent); }
.chart__line--stale { stroke: var(--stale-text); stroke-dasharray: 3 4; }
.chart__line--mock { stroke: var(--mock); stroke-dasharray: 7 4; }
.chart__line--offline { stroke: var(--offline); }

.chart-legend {
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

.chart-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chart-legend__key {
  width: 16px;
  height: 3px;
  background: var(--recent);
}

.chart-legend__key--live { background: var(--live); }
.chart-legend__key--recent { background: var(--recent); }
.chart-legend__key--stale { background: var(--stale-text); }
.chart-legend__key--mock { background: var(--mock); }
.chart-legend__key--offline { background: var(--offline); }

.data-table--responsive th > strong,
.data-table--responsive th > small,
.data-table--responsive td > strong,
.data-table--responsive td > small,
.data-table--responsive td > span {
  display: block;
}

.data-table--responsive th > small,
.data-table--responsive td > small {
  margin-block-start: 3px;
  color: var(--muted);
  font-size: 12px;
}

.ops-state {
  display: block;
  margin-block-end: 5px;
  color: var(--paper-soft);
  font: 650 12px var(--font-mono);
  letter-spacing: 0.045em;
}

.schedule-cell {
  min-width: 190px;
  display: grid;
  justify-items: start;
  gap: 4px;
}

.schedule-cell small {
  color: var(--muted);
  font: 550 12px var(--font-mono);
  white-space: nowrap;
}

.schedule-cell .schedule-cell__error {
  color: var(--offline);
  white-space: normal;
  overflow-wrap: anywhere;
}

.release-spine {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: stretch;
  gap: 1px;
  margin-block-end: 14px;
  border: 1px solid var(--line);
  background: var(--line);
}

.release-spine > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 13px;
  background: var(--ink-2);
}

.release-spine > div > span,
.release-spine > div > strong {
  overflow: hidden;
  font: 550 12px var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.release-spine > div > span { color: var(--muted); }
.release-spine > .status,
.release-spine > .ops-badge { align-self: center; margin-inline: 12px; }

.audit-retention {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-block-end: 14px;
  border: 1px solid var(--line);
  background: var(--line);
}

.audit-retention > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 12px 13px;
  background: var(--ink-2);
}

.audit-retention span {
  color: var(--muted);
  font: 550 12px var(--font-mono);
}

.audit-retention strong {
  color: var(--paper);
  font: 650 12px var(--font-mono);
}

.gate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.gate-card {
  min-height: 118px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: space-between;
  gap: 10px;
  padding: 13px;
  background: var(--ink-2);
}

.gate-card > span {
  color: var(--muted);
  font: 650 12px var(--font-mono);
}

.gate-card > strong {
  font-size: 13px;
}

.gate-card > .status,
.gate-card > .ops-badge {
  grid-column: 1 / -1;
}

.ai-runtime-grid {
  margin-block-end: 14px;
}

.secret-presence {
  grid-template-columns: minmax(150px, 0.55fr) minmax(0, 1fr);
}

.mutation-state {
  min-height: 52px;
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  background: rgba(144, 169, 255, 0.035);
}

.mutation-state strong {
  color: var(--paper);
  font: 700 12px var(--font-mono);
  letter-spacing: 0.045em;
}

.mutation-state span {
  color: var(--muted);
  font-size: 12px;
}

.mutation-state[data-state="verifying"] {
  color: var(--recent);
  border-color: var(--recent);
}

.mutation-state[data-state="reconciling"],
.mutation-state[data-state="refreshed"] {
  color: var(--recent);
  border-color: var(--recent);
}

.mutation-state[data-state="verified"] {
  color: var(--live);
  border-color: var(--live);
}

.mutation-state[data-state="mock"] {
  color: var(--mock);
  border-color: var(--mock);
}

.mutation-state[data-state="error"] {
  color: var(--offline);
  border-color: var(--offline);
}

.mutation-state[data-state="changed"],
.mutation-state[data-state="unknown"] {
  color: var(--offline);
  border-color: var(--offline);
  background: rgba(255, 107, 87, 0.055);
}

.mutation-state[data-state] strong {
  color: currentColor;
}

.logout-lock {
  border-color: rgba(255, 107, 87, 0.78);
}

.logout-lock .dialog__head {
  background: rgba(255, 107, 87, 0.055);
}

.logout-lock .dialog__head span {
  display: block;
  margin-block-end: 5px;
  color: var(--offline);
  font: 700 12px var(--font-mono);
  letter-spacing: 0.045em;
}

.logout-lock .dialog__body {
  display: grid;
  gap: 12px;
}

.logout-lock .dialog__body p {
  margin: 0;
  color: var(--paper-soft);
  font-size: 14px;
  line-height: 1.6;
}

.logout-lock .dialog__body code {
  overflow-wrap: anywhere;
  color: var(--muted);
  font: 600 12px var(--font-mono);
}

.logout-lock__signal {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 107, 87, 0.62);
  background: rgba(255, 107, 87, 0.065);
}

.logout-lock__signal strong,
.logout-lock__signal span {
  color: var(--offline);
  font: 700 12px var(--font-mono);
  letter-spacing: 0.04em;
}

.secret-presence span,
.secret-presence strong {
  display: block;
  font: 600 12px var(--font-mono);
}

.secret-presence span { color: var(--muted); }
.secret-presence strong { margin-block-start: 4px; color: var(--live); }
.secret-presence p { margin: 0; color: var(--muted); font-size: 12px; }

.metric-list--horizontal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.metric-list--horizontal .metric {
  min-height: 106px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9px;
  padding: 13px;
  border: 0;
  background: var(--ink-2);
}

.meter > span {
  display: block;
  width: var(--meter-value, 0%);
  height: 100%;
  background: linear-gradient(90deg, var(--gulf), var(--signal));
}

.meter-native {
  width: 100%;
  border: 0;
  appearance: none;
}

.meter-native::-webkit-meter-bar {
  border: 0;
  background: rgba(167, 201, 183, 0.12);
}

.meter-native::-webkit-meter-optimum-value,
.meter-native::-webkit-meter-suboptimum-value,
.meter-native::-webkit-meter-even-less-good-value {
  background: linear-gradient(90deg, var(--gulf), var(--signal));
}

.meter-native::-moz-meter-bar {
  background: linear-gradient(90deg, var(--gulf), var(--signal));
}

.metric--compact > span {
  color: var(--muted);
  font: 600 12px var(--font-mono);
}

.metric--compact > strong {
  color: var(--paper);
  font: 650 18px var(--font-mono);
}

.role-chip {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding-inline: 8px;
  color: var(--recent);
  border: 1px solid rgba(144, 169, 255, 0.46);
  font: 650 12px var(--font-mono);
  text-transform: uppercase;
}

.role-matrix .permission-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 650 12px var(--font-mono);
  white-space: nowrap;
}

.permission-mark > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.permission-mark--grant { color: var(--live); }
.permission-mark--deny { color: var(--offline); }

table.game-matrix td.payoff {
  min-height: 0;
  display: table-cell;
  padding: 11px;
  color: var(--signal-soft);
  background: rgba(232, 176, 74, 0.035);
  font: 650 15px var(--font-mono);
  text-align: end;
}

.empty-state__code,
.error-state__code {
  color: var(--muted);
  font: 650 12px var(--font-mono);
  letter-spacing: 0.09em;
}

.loading-state__bar {
  width: min(240px, 70vw);
  height: 3px;
  overflow: hidden;
  margin-inline: auto;
  background: var(--line);
}

.loading-state__bar::after {
  display: block;
  width: 38%;
  height: 100%;
  content: "";
  background: var(--signal);
  animation: scanner 900ms linear infinite;
}

.error-state__code {
  color: var(--offline);
}

.dialog__description {
  margin: 0 0 16px;
  color: var(--paper-soft);
  font-size: 13px;
  line-height: 1.6;
}

.dialog__error {
  margin-block-start: 14px;
  padding: 11px 12px;
  color: #ffd1c9;
  border-inline-start: 2px solid var(--offline);
  background: rgba(255, 107, 87, 0.06);
  font-size: 13px;
}

.field-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.check-field {
  min-height: 44px;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 10px;
}

@media (max-width: 1200px) {
  :root {
    --rail-size: 216px;
  }

  .topbar-context,
  .scope-ribbon {
    display: none;
  }

  .topbar > .control-strip > span:first-child {
    display: none;
  }

  .admin-topbar,
  .shell-topbar,
  .topbar {
    grid-template-columns: var(--rail-size) 1fr auto;
  }

  .kpi-grid,
  .health-grid,
  .service-grid,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .span-3 {
    grid-column: span 2;
  }

  .model-grid,
  .provider-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pipeline-flow,
  .pipeline-stages {
    grid-template-columns: repeat(var(--stage-count, 5), minmax(160px, 1fr));
  }
}

@media (max-width: 768px) {
  :root {
    --rail-size: min(86vw, 320px);
    --topbar-size: 64px;
    --spine-size: 34px;
  }

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

  .admin-brand,
  .brand {
    border-inline-end: 0;
  }

  .topbar-cell,
  .environment-cell,
  .operator-cell,
  .account-block,
  .clock {
    display: none;
  }

  .topbar > .control-strip {
    display: none;
  }

  .topbar > .account-block {
    display: none;
  }

  .mobile-nav-toggle,
  .nav-toggle {
    display: block;
  }

  .spine-label,
  .ops-strip-label {
    min-width: 106px;
    padding-inline: 12px;
  }

  .admin-nav,
  .admin-rail,
  .rail {
    z-index: 150;
    inset-block-start: 0;
    transform: translateX(-103%);
    box-shadow: 24px 0 70px rgba(0, 0, 0, 0.55);
    transition: transform 180ms ease;
  }

  [dir="rtl"] .admin-nav,
  [dir="rtl"] .admin-rail,
  [dir="rtl"] .rail {
    transform: translateX(103%);
  }

  body.nav-open .admin-nav,
  body.nav-open .admin-rail,
  body.nav-open .rail,
  .admin-nav.is-open,
  .admin-rail.is-open,
  .rail.is-open {
    transform: translateX(0);
  }

  body.nav-open .nav-scrim,
  body.nav-open .rail-scrim,
  .nav-scrim.is-open,
  .rail-scrim.is-open {
    z-index: 149;
    visibility: visible;
    opacity: 1;
  }

  .nav-close {
    display: block;
  }

  .admin-main,
  .admin-view,
  .view {
    margin-inline-start: 0;
    padding: 24px 16px 64px;
  }

  .app-shell > .workspace {
    margin-inline-start: 0;
    padding: calc(var(--topbar-size) + 24px) 16px 64px;
  }

  .demo-banner + .app-shell > .admin-nav {
    inset-block-start: 0;
  }

  .demo-banner + .app-shell > .workspace {
    padding-block-start: calc(var(--topbar-size) + 68px);
  }

  .page-header,
  .section-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .page-actions,
  .header-actions {
    justify-content: flex-start;
  }

  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .span-2,
  .span-3 {
    grid-column: auto;
  }

  .game-workbench,
  .game-layout {
    grid-template-columns: 1fr;
  }

  .game-sidebar,
  .assumptions-panel {
    position: static;
  }

  .panel-grid--asymmetric,
  .panel-grid--controls {
    grid-template-columns: 1fr;
  }

  .scenario-compare,
  .outcome-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-row,
  .audit-event {
    grid-template-columns: 90px 8px minmax(0, 1fr) auto;
  }

  .event-row > :nth-child(4),
  .audit-event > :nth-child(4) {
    grid-column: 3;
  }

  .run-row,
  .job-row,
  .incident-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (max-width: 767px) {
  .logout-lock__signal {
    align-items: flex-start;
    flex-direction: column;
  }

  .durability-warning {
    grid-template-columns: 1fr;
  }

  .durability-warning code {
    max-width: 100%;
  }

  .audit-retention {
    grid-template-columns: 1fr;
  }

  .brand-copy small,
  .brand small {
    display: none;
  }

  .brand-mark,
  .brand-code {
    width: 40px;
    height: 40px;
  }

  .page-header h1,
  .section-head h1,
  .page-title {
    font-size: clamp(34px, 12vw, 50px);
  }

  .page-meta,
  .head-meta {
    width: 100%;
  }

  .toolbar,
  .filter-bar,
  .command-bar {
    align-items: stretch;
  }

  .toolbar-spacer {
    display: none;
  }

  .toolbar .input,
  .toolbar .select,
  .filter-bar .input,
  .filter-bar .select {
    flex: 1 1 100%;
  }

  .data-notice,
  .honesty-banner,
  .provenance-banner {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .data-notice > :last-child,
  .honesty-banner > :last-child,
  .provenance-banner > :last-child {
    grid-column: 2;
  }

  .kpi-grid,
  .health-grid,
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid,
  .model-grid,
  .provider-grid,
  .permission-diff,
  .filter-grid {
    grid-template-columns: 1fr;
  }

  .release-spine {
    grid-template-columns: 1fr;
  }

  .release-spine > .status,
  .release-spine > .ops-badge {
    margin-block: 11px;
    justify-self: start;
  }

  .gate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-list--horizontal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-full,
  .form-field-full {
    grid-column: auto;
  }

  .health-row,
  .metric-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .health-row .meter,
  .metric-row .metric-track {
    grid-column: 1 / -1;
  }

  .pipeline-flow,
  .pipeline-stages {
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow: visible;
  }

  .pipeline-stage,
  .pipeline-node {
    width: 100%;
    min-width: 0;
    min-height: 112px;
  }

  .pipeline-stage:not(:last-child)::after,
  .pipeline-node:not(:last-child)::after {
    inset-block-start: 100%;
    inset-inline-start: 24px;
    width: 1px;
    height: 18px;
  }

  .pipeline-stage:not(:last-child)::before,
  .pipeline-node:not(:last-child)::before {
    inset-block-start: calc(100% + 12px);
    inset-inline-start: 21px;
    transform: rotate(135deg);
  }

  .pipeline-edge {
    width: 1px;
    min-width: 1px;
    height: 18px;
    margin-inline-start: 24px;
    align-self: flex-start;
  }

  .pipeline-edge::after {
    inset-block-start: auto;
    inset-block-end: 0;
    inset-inline-end: -3px;
    transform: rotate(135deg);
  }

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

  .metric .meter {
    grid-column: 1 / -1;
  }

  .ledger-item {
    grid-template-columns: 76px 8px minmax(0, 1fr);
  }

  .ledger-item > .status,
  .ledger-item > .ops-badge,
  .ledger-item > time,
  .ledger-item > b:last-child {
    grid-column: 3;
    justify-self: start;
  }

  .game-matrix:not(table),
  .payoff-grid {
    grid-template-columns: 1fr;
  }

  .matrix-header,
  .matrix-axis {
    min-height: 44px;
  }

  .payoff-cell {
    min-height: 112px;
  }

  .data-table.is-responsive,
  .data-table.responsive,
  .data-table--responsive,
  .audit-table.is-responsive,
  .user-table.is-responsive {
    display: block;
  }

  .data-table.is-responsive thead,
  .data-table.responsive thead,
  .data-table--responsive thead,
  .audit-table.is-responsive thead,
  .user-table.is-responsive thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .data-table.is-responsive tbody,
  .data-table.is-responsive tr,
  .data-table.is-responsive td,
  .data-table.responsive tbody,
  .data-table.responsive tr,
  .data-table.responsive td,
  .data-table--responsive tbody,
  .data-table--responsive tr,
  .data-table--responsive td,
  .audit-table.is-responsive tbody,
  .audit-table.is-responsive tr,
  .audit-table.is-responsive td,
  .user-table.is-responsive tbody,
  .user-table.is-responsive tr,
  .user-table.is-responsive td {
    display: block;
    width: 100%;
  }

  .data-table.is-responsive tr,
  .data-table.responsive tr,
  .data-table--responsive tr,
  .audit-table.is-responsive tr,
  .user-table.is-responsive tr {
    margin-block-end: 12px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    background: var(--ink-2);
  }

  .data-table.is-responsive td,
  .data-table.responsive td,
  .data-table--responsive td,
  .audit-table.is-responsive td,
  .user-table.is-responsive td {
    min-height: 44px;
    display: grid;
    grid-template-columns: minmax(98px, 0.55fr) minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
  }

  .data-table.is-responsive td::before,
  .data-table.responsive td::before,
  .data-table--responsive td::before,
  .audit-table.is-responsive td::before,
  .user-table.is-responsive td::before {
    content: attr(data-label);
    color: var(--muted);
    font: 650 12px var(--font-mono);
    text-transform: uppercase;
  }

  .table-actions {
    justify-content: flex-start;
  }

  .game-matrix:not(.role-matrix) {
    display: block;
  }

  .game-matrix:not(.role-matrix) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .game-matrix:not(.role-matrix) tbody,
  .game-matrix:not(.role-matrix) tr,
  .game-matrix:not(.role-matrix) th,
  .game-matrix:not(.role-matrix) td {
    display: block;
    width: 100%;
  }

  .game-matrix:not(.role-matrix) tr {
    margin-block-end: 12px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    background: var(--ink-2);
  }

  .game-matrix:not(.role-matrix) th,
  .game-matrix:not(.role-matrix) td,
  .game-matrix:not(.role-matrix) td.payoff {
    min-height: 44px;
    display: grid;
    grid-template-columns: minmax(105px, 0.55fr) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    text-align: start;
  }

  .game-matrix:not(.role-matrix) th::before,
  .game-matrix:not(.role-matrix) td::before {
    content: attr(data-label);
    color: var(--muted);
    font: 650 12px var(--font-mono);
    text-transform: uppercase;
  }

  .detail-drawer,
  .assistant-drawer,
  .side-drawer {
    width: min(100%, 520px);
  }

  .dialog,
  .modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .dialog-body,
  .modal-body {
    max-height: calc(100vh - 156px);
  }
}

@media (max-width: 480px) {
  .status-badge,
  .status,
  .ops-badge,
  .state,
  .state-badge {
    gap: 4px;
    padding-inline: 6px;
    letter-spacing: 0.01em;
  }

  .admin-brand,
  .brand {
    gap: 8px;
    padding-inline: 10px;
  }

  .login-status {
    align-items: flex-start;
    flex-direction: column;
  }

  .brand-copy strong,
  .brand b {
    max-width: 150px;
    font-size: 13px;
  }

  .admin-main,
  .admin-view,
  .view {
    padding: 20px 12px 56px;
  }

  .app-shell > .workspace {
    padding: calc(var(--topbar-size) + 20px) 12px 56px;
  }

  .demo-banner + .app-shell > .workspace {
    padding-block-start: calc(var(--topbar-size) + 64px);
  }

  .demo-banner {
    justify-content: flex-start;
    overflow: hidden;
    white-space: nowrap;
  }

  .demo-banner > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .page-header,
  .section-head {
    gap: 16px;
    margin-block-end: 18px;
    padding-block-end: 16px;
  }

  .page-header p,
  .section-head p,
  .page-description {
    font-size: 13px;
  }

  .page-actions,
  .header-actions,
  .toolbar-actions {
    width: 100%;
  }

  .page-actions .button,
  .page-actions .btn,
  .header-actions .button,
  .header-actions .btn {
    flex: 1 1 auto;
  }

  .page-meta,
  .head-meta {
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .page-meta > .status,
  .page-meta > .ops-badge {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .page-meta > div + div,
  .head-meta > div + div {
    border-inline-start: 0;
    border-top: 1px solid var(--line);
  }

  .kpi-grid,
  .health-grid,
  .service-grid,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .kpi-card,
  .kpi,
  .health-card,
  .service-card {
    min-height: 120px;
  }

  .service-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .service-card > .status,
  .service-card > .ops-badge {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .panel-header,
  .panel-head,
  .card-header {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 12px;
  }

  .panel-header .cluster,
  .panel-head .cluster,
  .card-header .cluster {
    width: 100%;
  }

  .panel-body,
  .card-body {
    padding: 13px;
  }

  .scenario-compare,
  .outcome-grid {
    grid-template-columns: 1fr;
  }

  .gate-grid,
  .metric-list--horizontal {
    grid-template-columns: 1fr;
  }

  .demo-entry {
    grid-template-columns: 1fr;
  }

  .demo-entry > p,
  .demo-entry > .button {
    grid-column: 1;
    grid-row: auto;
  }

  .demo-entry > .button {
    width: 100%;
    margin-block-start: 7px;
  }

  .event-row,
  .audit-event {
    grid-template-columns: 72px 8px minmax(0, 1fr);
  }

  .event-row > :nth-child(n + 4),
  .audit-event > :nth-child(n + 4) {
    grid-column: 3;
  }

  .login-body,
  .auth-body {
    padding: 18px;
  }

  .login-foot,
  .auth-foot {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 12px;
  }

  .dialog-footer,
  .modal-footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .dialog-footer .button,
  .dialog-footer .btn,
  .modal-footer .button,
  .modal-footer .btn {
    width: 100%;
  }

  .toast-region,
  .notifications {
    inset-inline: 10px;
    inset-block-end: 10px;
    width: auto;
  }
}

@media (max-width: 1200px) {
  .scenario-outlook-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .game-interpretation-grid,
  .scenario-outlook-grid {
    grid-template-columns: 1fr;
  }

  .actor-position__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .signal-pair {
    width: 100%;
    justify-content: flex-start;
  }

  .ledger-item > .ledger-item__signals {
    grid-column: 3;
    max-width: 100%;
    justify-content: flex-start;
    justify-self: start;
  }

  .metric--compact > .status {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .analysis-cell {
    min-width: 0 !important;
  }
}

@media (max-width: 480px) {
  .scenario-outlook-metrics {
    grid-template-columns: 1fr;
  }

  .scenario-outlook-card,
  .game-interpretation-grid > article {
    padding: 12px;
  }

  .scenario-outlook-actors li {
    align-items: flex-start;
    flex-direction: column;
  }

  .scenario-outlook-actors li span {
    text-align: start;
  }
}

@media (hover: none) and (pointer: coarse) {
  .nav-link,
  .admin-nav nav a,
  .rail nav a {
    min-height: 52px;
  }

  .chip,
  .filter-chip {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight;
  }

  .status-badge,
  .status,
  .ops-badge,
  .state,
  .state-badge,
  .panel,
  .instrument-panel,
  .card,
  .pipeline-stage,
  .pipeline-node {
    border-color: CanvasText;
  }

  .nav-link.is-active::before,
  .nav-link.active::before,
  .nav-link[aria-current="page"]::before {
    background: Highlight;
  }
}

@media print {
  .admin-topbar,
  .shell-topbar,
  .topbar,
  .status-spine,
  .ops-strip,
  .system-spine,
  .admin-nav,
  .admin-rail,
  .rail,
  .toast-region,
  .notifications,
  .detail-drawer,
  .assistant-drawer,
  .side-drawer,
  .nav-scrim,
  .drawer-scrim,
  .page-actions,
  .toolbar {
    display: none !important;
  }

  body {
    color: #111;
    background: #fff;
  }

  .admin-workspace,
  .workspace {
    padding: 0;
  }

  .admin-main,
  .admin-view,
  .view {
    margin: 0;
    padding: 16px;
  }

  .panel,
  .instrument-panel,
  .card,
  .kpi-card,
  .kpi,
  .health-card,
  .service-card {
    break-inside: avoid;
    color: #111;
    border-color: #777;
    background: #fff;
    box-shadow: none;
  }
}