:root {
  --color-tally-red: #B02E4A;
  --color-pending-amber: #96650C;
  --color-settled-jade: #14654E;
  --color-scheduled-lavender: #D9CCED;
  --color-mineral-ground: #F6F4FA;
  --color-raised-panel: #FCFBFE;
  --color-graphite-ink: #241A33;
  --color-quiet-copy: #5C5470;
  --color-graphite-rule: #D9D2E4;
  --color-incident-wash: #F9E8EA;
  --color-pending-wash: #FAF2DE;
  --color-settled-wash: #E2F0EA;
  --color-paper-white: #FFFFFF;
  --color-brand-deep: #5B2D8E;
  --color-brand-mid: #3D1E63;
  --color-brand-night: #2A1845;
  --color-brand-light: #C9A0F0;
  --color-moon: #F5D78E;
  --page-surface: linear-gradient(180deg, color-mix(in srgb, var(--color-scheduled-lavender) 26%, var(--color-mineral-ground)) 0%, var(--color-mineral-ground) 42%, color-mix(in srgb, var(--color-brand-light) 14%, var(--color-mineral-ground)) 100%);
  --nav-surface: linear-gradient(168deg, rgba(42, 24, 69, 0.97) 0%, rgba(91, 45, 142, 0.94) 55%, rgba(123, 79, 184, 0.88) 100%);
  --ledger-surface: linear-gradient(135deg, var(--color-brand-mid) 0%, var(--color-brand-deep) 62%, color-mix(in srgb, var(--color-brand-deep) 78%, var(--color-brand-light)) 100%);
  --panel-surface: rgba(252, 251, 254, 0.88);
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --text-display: 26px;
  --text-title: 17px;
  --text-body: 13.5px;
  --text-label: 12.5px;
  --text-caption: 11px;
  --line-display: 1.2;
  --line-title: 1.3;
  --line-body: 1.5;
  --line-label: 1.35;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-small: 5px;
  --radius-medium: 9px;
  --rule-width: 1px;
  --border-strong-width: 2px;
  --accent-rule-width: 3px;
  --nav-active-rail-width: 4px;
  --status-rail-width: 4px;
  --focus-outline-width: 3px;
  --focus-outline-offset: 3px;
  --a11y-clip-size: 1px;
  --a11y-clip-offset: -1px;
  --target-min: 44px;
  --target-primary: 52px;
  --icon-size: 16px;
  --icon-stroke-width: 1.8;
  --shell-nav-inline-size: 176px;
  --shell-nav-inline-size-compact: 132px;
  --content-max-inline-size: 1440px;
  --header-min-block-size: 56px;
  --banner-min-block-size: 32px;
  --persistent-scroll-offset: calc(var(--header-min-block-size) + var(--banner-min-block-size) + var(--space-5));
  --player-header-reserve-block-size: 80px;
  --player-scroll-offset: calc(var(--banner-min-block-size) + var(--player-header-reserve-block-size) + var(--space-4));
  --elevation-panel: 0 1px 2px rgba(42, 24, 69, 0.06), 0 12px 32px rgba(42, 24, 69, 0.12);
  --motion-fast: 140ms ease;
  --status-min-block-size: 28px;
  --handoff-min-inline-size: 104px;
  --grid-rail-min: 240px;
  --grid-rail-max: 300px;
  --event-label-inline-size: 72px;
  --player-content-max-inline-size: 520px;
  --player-textarea-min-block-size: 88px;
  --layer-persistent: 1;
  --bp-shell-narrow: 1060px;
  --bp-shell-compact: 780px;
  --bp-player-compact: 420px;
  --staff-shell-min-inline-size: 980px;
  --staff-row-index-inline-size: 48px;
  --staff-row-content-min-inline-size: 390px;
  --staff-row-action-min-inline-size: 212px;
  --staff-row-action-max-inline-size: 276px;
  --staff-row-grid: var(--staff-row-index-inline-size) minmax(var(--staff-row-content-min-inline-size), 1fr) minmax(var(--staff-row-action-min-inline-size), var(--staff-row-action-max-inline-size));
  --staff-row-index-inline-size-narrow: 40px;
  --staff-row-index-inline-size-compact: 32px;
  --staff-row-grid-narrow: var(--staff-row-index-inline-size-narrow) minmax(0, 1fr);
  --staff-row-grid-compact: var(--staff-row-index-inline-size-compact) minmax(0, 1fr);
}

* { box-sizing: border-box; }

html, body { block-size: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--page-surface);
  color: var(--color-graphite-ink);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--line-body);
}

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

button, a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: var(--focus-outline-width) solid var(--color-tally-red);
  outline-offset: var(--focus-outline-offset);
}

.u-visually-hidden {
  block-size: var(--a11y-clip-size);
  clip: rect(0 0 0 0);
  inline-size: var(--a11y-clip-size);
  margin: var(--a11y-clip-offset);
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

.ops-shell { min-block-size: 100%; }

.ops-nav {
  background: var(--nav-surface);
  block-size: 100dvh;
  color: var(--color-paper-white);
  display: flex;
  flex-direction: column;
  inset-block-start: 0;
  inset-inline-start: 0;
  padding: var(--space-4) var(--space-2);
  position: fixed;
  width: var(--shell-nav-inline-size);
}

.ops-nav__brand {
  border-block-end: var(--rule-width) solid var(--color-quiet-copy);
  font-size: var(--text-title);
  font-weight: 700;
  line-height: var(--line-title);
  margin: 0 0 var(--space-3);
  padding: 0 0 var(--space-3) var(--space-2);
}

.ops-nav__list { display: grid; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }

.ops-nav__link {
  align-items: center;
  border-inline-start: var(--nav-active-rail-width) solid transparent;
  color: inherit;
  display: flex;
  font-size: var(--text-label);
  font-weight: 700;
  gap: var(--space-2);
  min-block-size: var(--target-min);
  padding: var(--space-2);
  text-decoration: none;
}

.ops-nav__link[aria-current="page"] { background: var(--color-paper-white); border-inline-start-color: var(--color-brand-deep); color: var(--color-graphite-ink); }
.ops-nav__glyph { block-size: var(--icon-size); fill: none; flex: 0 0 var(--icon-size); stroke: currentColor; stroke-width: var(--icon-stroke-width); inline-size: var(--icon-size); }
.ops-nav__footer { color: var(--color-graphite-rule); font-size: var(--text-caption); margin-block-start: auto; padding: var(--space-2); }

.ops-main { block-size: 100dvh; margin-inline-start: var(--shell-nav-inline-size); overflow: auto; overscroll-behavior: contain; scroll-padding-block-start: var(--persistent-scroll-offset); }
.ops-persistent { inset-block-start: 0; position: sticky; z-index: var(--layer-persistent); }
.ops-header { align-items: center; background: var(--color-raised-panel); border-block-end: var(--rule-width) solid var(--color-graphite-rule); display: flex; gap: var(--space-3); justify-content: space-between; min-block-size: var(--header-min-block-size); padding: var(--space-2) var(--space-4); }
.ops-header__title { font-size: var(--text-title); font-weight: 700; margin: 0; }
.ops-header__meta { color: var(--color-quiet-copy); font-size: var(--text-label); margin: 0; }
.ops-banner { background: var(--color-incident-wash); border-block-end: var(--rule-width) solid var(--color-tally-red); color: var(--color-graphite-ink); font-size: var(--text-label); font-weight: 700; padding: var(--space-2) var(--space-4); text-align: center; }
.ops-content { margin-inline: auto; max-inline-size: var(--content-max-inline-size); padding: var(--space-4); }

.panel { background: var(--panel-surface); border: var(--rule-width) solid var(--color-graphite-rule); border-radius: var(--radius-medium); overflow-wrap: anywhere; padding: var(--space-4); }
.panel__heading { align-items: baseline; border-block-end: var(--rule-width) solid var(--color-graphite-rule); display: flex; gap: var(--space-2); justify-content: space-between; margin: 0 0 var(--space-3); padding-block-end: var(--space-2); }
.panel__title { font-size: var(--text-title); line-height: var(--line-title); margin: 0; }
.panel__caption { color: var(--color-quiet-copy); font-size: var(--text-caption); margin: 0; }

.ops-button { align-items: center; background: var(--color-paper-white); border: var(--border-strong-width) solid var(--color-brand-deep); border-radius: var(--radius-medium); color: var(--color-brand-deep); cursor: pointer; display: inline-flex; font-size: var(--text-label); font-weight: 700; gap: var(--space-2); justify-content: center; min-block-size: var(--target-min); padding: var(--space-2) var(--space-3); }
.ops-button--primary { background: var(--color-brand-deep); color: var(--color-paper-white); }
.ops-button[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }

.status, .error-message { align-items: center; border-inline-start: var(--status-rail-width) solid var(--color-graphite-ink); display: flex; gap: var(--space-2); min-block-size: var(--status-min-block-size); padding: var(--space-1) var(--space-2); }
.status { background: var(--color-raised-panel); }
.status--pending { background: var(--color-pending-wash); border-inline-start-color: var(--color-pending-amber); }
.status--settled { background: var(--color-settled-wash); border-inline-start-color: var(--color-settled-jade); }
.status--scheduled { background: var(--color-scheduled-lavender); border-inline-start-color: var(--color-scheduled-lavender); }
.status--incident, .error-message { background: var(--color-incident-wash); border-inline-start-color: var(--color-tally-red); }
.status__icon { block-size: var(--icon-size); fill: none; flex: 0 0 var(--icon-size); stroke: currentColor; stroke-width: var(--border-strong-width); inline-size: var(--icon-size); }
.status__text, .error-message__text { font-size: var(--text-label); font-weight: 700; }

.flow-table { border-collapse: collapse; inline-size: 100%; }
.flow-table caption { caption-side: top; color: var(--color-quiet-copy); font-size: var(--text-caption); padding-block-end: var(--space-2); text-align: start; }
.flow-table td, .flow-table th { border-block-end: var(--rule-width) solid var(--color-graphite-rule); padding: var(--space-2); text-align: start; vertical-align: top; }
.flow-table th { font-size: var(--text-label); }
.flow-table td { font-size: var(--text-body); overflow-wrap: anywhere; }
.flow-table th:first-child, .flow-table td:first-child { white-space: nowrap; }

.replacement-strip { border: var(--rule-width) solid var(--color-graphite-ink); display: grid; grid-template-columns: 1fr auto 1fr; margin-block: var(--space-3); }
.replacement-strip__person { background: var(--color-tally-red); color: var(--color-paper-white); padding: var(--space-3); }
.replacement-strip__person--new { text-align: end; }
.replacement-strip__label { display: block; font-size: var(--text-caption); font-weight: 700; }
.replacement-strip__name { display: block; font-size: var(--text-title); font-weight: 700; }
.replacement-strip__handoff { align-items: center; background: var(--color-graphite-ink); color: var(--color-paper-white); display: flex; flex-direction: column; justify-content: center; min-inline-size: var(--handoff-min-inline-size); padding: var(--space-2); text-align: center; }
.replacement-strip__handoff strong { font-size: var(--text-title); }
.replacement-strip__handoff span { font-size: var(--text-caption); }
.allocation-note { color: var(--color-tally-red); font-size: var(--text-label); font-weight: 700; margin: 0; }

.event-tape { border-block-start: var(--accent-rule-width) solid var(--color-tally-red); margin-block-start: var(--space-4); }
.event-tape__table { inline-size: 100%; table-layout: fixed; }
.event-tape__time { color: var(--color-settled-jade); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.event-tape__table th:nth-child(2), .event-tape__table td:nth-child(2) { white-space: nowrap; }
.event-tape__incident { color: var(--color-tally-red); font-weight: 700; }
.foundation-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(var(--grid-rail-min), var(--grid-rail-max)) minmax(0, 1fr) minmax(var(--grid-rail-min), var(--grid-rail-max)); }
.foundation-stack { display: grid; gap: var(--space-4); }
.data-note { color: var(--color-quiet-copy); font-size: var(--text-caption); margin: 0 0 var(--space-2); }

/* Media-query values stay physical because custom properties cannot be consumed in @media. The matching named breakpoints above are the documented source of truth. */
@media (max-width: 780px) {
  .ops-nav { padding-inline: var(--space-1); width: var(--shell-nav-inline-size-compact); }
  .ops-nav__brand { font-size: var(--text-caption); padding-inline-start: var(--space-1); }
  .ops-nav__link { justify-content: flex-start; padding: var(--space-2); }
  .ops-nav__link-label { display: inline; }
  .ops-nav__footer { display: none; }
  .ops-main { margin-inline-start: var(--shell-nav-inline-size-compact); }
  .ops-header { align-items: flex-start; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3); }
  .ops-content { padding: var(--space-3); }
  .foundation-grid { grid-template-columns: minmax(0, 1fr); }
  .replacement-strip { grid-template-columns: 1fr; }
  .replacement-strip__person--new { text-align: start; }
  .replacement-strip__handoff { min-block-size: var(--target-min); }
  .event-tape__table, .event-tape__table tbody, .event-tape__table tr, .event-tape__table th, .event-tape__table td { display: block; }
  .event-tape__table thead { block-size: 1px; clip: rect(0 0 0 0); inline-size: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; }
  .event-tape__table tbody { display: grid; gap: var(--space-2); }
  .event-tape__table tr { border: var(--rule-width) solid var(--color-graphite-rule); padding: var(--space-2); }
  .event-tape__table td { align-items: start; border: 0; display: grid; gap: var(--space-2); grid-template-columns: var(--event-label-inline-size) minmax(0, 1fr); min-inline-size: 0; overflow-wrap: anywhere; padding: var(--space-1) 0; }
  .event-tape__table td::before { color: var(--color-quiet-copy); content: attr(data-label); font-size: var(--text-caption); font-weight: 700; }
  .event-tape__table td:nth-child(2) { white-space: normal; }
}