/* One token layer: canvas, ink, accent, spacing, radius, and type scale
   shared by the whole page instead of three separate palettes. */
:root {
  color-scheme: light;

  /* The page ground under the shell; `--surface` is the card, panel, and
     input background. */
  --canvas: #f5f4ef;
  --surface: #fffefa;
  --ink: #1d211d;
  --ink-soft: #5d625a;
  --line: #cbc4b7;
  --line-dark: #9e978b;
  --line-width: 1px;

  /* The workspace rail and the Live network stage: the one dark surface in
     an otherwise light theme, so it carries its own ink and rule tones. */
  --rail: #0d1218;
  --rail-panel: #151b22;
  --rail-line: #2b333c;
  --rail-ink: #f6f2e9;
  --rail-ink-soft: #9ea7af;

  /* --accent draws non-text on light surfaces, --accent-dark draws text
     (and is the alert colour for banners, the danger button, status text),
     and --accent-bright is the dark-surface form used on the rail and Live
     network stage. Ratios in docs/design/brand-identity.md. */
  --accent: #b4601f;
  --accent-dark: #974e15;
  --accent-bright: #ff5c00;
  /* Light surfaces inside the dark rail/Live network stage shadow
     --accent-bright down to --accent-dark locally. The attention column
     reads that same text-safe form on its own rule instead, since it alone
     turns dark again below 960px. */
  --alert: var(--accent-dark);

  /* Moss on light surfaces; a lighter, desaturated form on the rail and
     Live network stage. */
  --success: #435447;
  --success-bright: #9fc596;

  /* The network health traffic light's third state, between
     --success-bright and --accent-bright. */
  --warning: #e3ad50;

  /* One-off washes/rings for a status dot, severity badge, selected row,
     hover state, and the dark error strip — each bespoke, not reused widely
     enough to fold into the palette above. */
  --success-wash: #eef2e8;
  --success-ring: #c6d9c0;
  --alert-wash-soft: #f8ded4;
  --alert-wash-dark: #2b1714;
  --accent-wash: #fff3ec;
  --accent-wash-soft: #fffaf5;
  --accent-wash-pale: #fff8f4;
  --accent-border-soft: #e6b7a9;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: Avenir, "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Spacing scale: 4, 8, 12, 16, 20, 24, 32, 48px. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* The geometry is square everywhere. */
  --radius-0: 0;

  /* Type scale, plus two display sizes: the page title (52px cap) and the
     larger hero figures (Overview metrics). */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-display: 52px;
  --text-hero: 30px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--canvas);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  inset: 0 0 auto;
  height: 5px;
  background: var(--accent);
  content: "";
}

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

.shell {
  width: min(100% - 40px, 1080px);
  margin: 0 auto;
  padding: 44px 0 54px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  gap: 11px;
  align-items: center;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* The mark carries its own two ember colours in both themes, as a logo does,
   rather than inheriting the surrounding text colour. */
.brand-mark {
  width: 21px;
  height: 30px;
}

.mode-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 -16px;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

/* The hero sizing (max-width, the 50-88px clamp, the tight 0.94 line-height)
   moved to `.page-header h1`, which is now self-contained; this bare rule
   only backs the sign-in heading, which still needs the serif family,
   weight, and letter-spacing below. */
h1 {
  margin-bottom: 0;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.055em;
}

.operations-section,
.machines-section,
.job-inspector-section {
  padding: 92px 0 10px;
}

.job-inspector-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.job-inspector-form label {
  display: grid;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.job-inspector-form input {
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--line-dark);
  border-radius: 0;
  color: var(--ink);
  background: var(--canvas);
  font: 13px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.job-detail {
  margin-top: 18px;
}

.job-detail-heading {
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}

.job-detail-heading h3,
.job-detail-heading p {
  margin: 0;
}

.job-decision-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.job-detail-heading h3 {
  overflow-wrap: anywhere;
  font-family: var(--serif);
  font-size: 22px;
}

.job-detail-heading p {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 12px;
}

/* Scoped to the raw field list's own hook, not the bare `dl` tag: the job
   detail also carries a `.operations-grid` summary and a `.timeline` above
   this list, and both are `dl`/`ol` siblings inside `.job-detail` that must
   keep their own primitive's styling instead of inheriting this grid. */
.job-detail > [data-job-detail-fields] {
  display: grid;
  grid-template-columns: minmax(160px, 0.45fr) minmax(0, 1fr);
  margin: 0;
}

[data-job-detail-fields] dt,
[data-job-detail-fields] dd {
  margin: 0;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}

[data-job-detail-fields] dt {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

[data-job-detail-fields] dd {
  overflow-wrap: anywhere;
  border-left: 1px solid var(--line);
  font: 12px/1.5 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* The request's chronology, above the raw field list: one thin rule down the
   left edge, one ink dot per step, no colour but ink and its muted form —
   lot 6's plan explicitly withholds the accent from this primitive, unlike
   the coloured dots (`.mode-dot`, `.live-dot`) elsewhere in this file. */
.timeline {
  position: relative;
  margin: 0;
  padding: var(--space-5) var(--space-6) var(--space-2);
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.timeline::before {
  content: "";
  position: absolute;
  top: calc(var(--space-5) + 4px);
  bottom: calc(var(--space-2) + 4px);
  left: calc(var(--space-6) + 4px);
  width: var(--line-width);
  background: var(--line);
}

.timeline__step {
  position: relative;
  padding: 0 0 var(--space-5) var(--space-6);
}

.timeline__step:last-child {
  padding-bottom: 0;
}

.timeline__dot {
  position: absolute;
  top: 4px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
}

.timeline__label {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 600;
}

.timeline__meta,
.timeline__note {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: var(--text-xs);
}

.timeline__receipts {
  display: grid;
  gap: 2px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
  font-size: var(--text-xs);
}

.member-creation-result {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--success);
  font-size: 12px;
  line-height: 1.5;
}

.member-creation-result[data-state="error"] {
  color: var(--accent-dark);
}

/* One button system, three variants, sharing one `:focus-visible` ring with
   the form fields below. `.button--primary` is the filled-ink action. */
.button {
  display: inline-flex;
  width: fit-content;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-4);
  border: var(--line-width) solid transparent;
  border-radius: var(--radius-0);
  font: 700 var(--text-xs)/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
}

.button:disabled {
  cursor: wait;
  opacity: 0.55;
}

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

.button--primary:hover:not(:disabled) {
  color: var(--ink);
  background: transparent;
}

.button--danger {
  border-color: var(--alert);
  color: var(--alert);
  background: transparent;
}

.button--danger:hover:not(:disabled) {
  color: var(--surface);
  background: var(--alert);
}

.button--text {
  min-height: auto;
  padding: var(--space-1) 0;
  border: 0;
  border-bottom: var(--line-width) solid var(--line-dark);
  border-radius: var(--radius-0);
  color: var(--ink-soft);
  background: transparent;
  font-size: 11px;
  line-height: 1.2;
}

.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.page-segments a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 3px;
}

.machines-note {
  margin: 0;
  padding: 0 var(--space-3) 4px;
  color: var(--ink-soft);
  font-size: 13px;
}


.directory-filters {
  display: grid;
  flex: 1 1 100%;
  grid-template-columns: minmax(240px, 1fr) minmax(150px, 0.4fr) minmax(150px, 0.4fr);
  gap: 12px;
}

.account-containment {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.account-status {
  padding: 6px 9px;
  border: 1px solid var(--success);
  color: var(--success);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-status[data-status="quarantined"] {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.account-quarantine-detail {
  max-width: 240px;
  overflow-wrap: anywhere;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.35;
}

.account-containment-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.account-containment-controls select,
.account-containment-controls input {
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--line-dark);
  border-radius: 0;
  color: var(--ink-soft);
  background: var(--surface);
  font: 11px/1.2 var(--sans);
}

.account-containment-controls select {
  max-width: 190px;
}

.account-containment-controls input {
  width: 130px;
}

.account-containment-action {
  color: var(--accent-dark);
}

.machine-status,
.shared-request-status {
  padding: 7px 10px;
  border: 1px solid var(--line-dark);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.machine-status[data-status="ready"] {
  border-color: var(--success);
  color: var(--success);
}

.machine-status[data-status="revoked"],
.machine-status[data-status="offline"] {
  opacity: 0.62;
}

.machine-remove {
  color: var(--accent-dark);
}

.machine-actions,
.machine-drain-control,
.machine-quarantine-control,
.machine-stop-control {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}

.machine-drain-control select,
.machine-quarantine-control select,
.machine-quarantine-control input,
.machine-stop-control select,
.machine-stop-control input {
  max-width: 170px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--line-dark);
  border-radius: 0;
  color: var(--ink-soft);
  background: var(--surface);
  font: 11px/1.2 var(--sans);
}

.machine-quarantine-control select {
  max-width: 170px;
}

.machine-quarantine-control input {
  max-width: 150px;
}

.machine-stop-control input {
  max-width: 150px;
}

.machine-route {
  color: var(--success);
}

.node-detail {
  margin: 24px 34px 34px;
}

.node-detail-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.node-detail-fields {
  display: grid;
  grid-template-columns: minmax(130px, 0.3fr) minmax(0, 1fr);
  gap: 8px 20px;
  margin: 20px 0 28px;
}

.node-detail-fields dt {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.node-detail-fields dd {
  margin: 0;
  overflow-wrap: anywhere;
  font: 11px/1.45 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.node-detail h4 {
  margin: 24px 0 8px;
  font: 700 11px/1.2 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.node-detail-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.node-detail-item {
  display: grid;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.45;
}

.node-detail-item span {
  color: var(--ink-soft);
}

.machine-status[data-status="draining"] {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.machine-status[data-status="quarantined"] {
  border-color: var(--accent-dark);
  color: var(--accent-dark);
}

.machine-quarantine {
  color: var(--accent-dark);
}

.shared-requests-section,
.holds-section {
  padding: 92px 0 10px;
}

.operations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}

.alias-routing-heading,
.alias-routing-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.alias-routing-heading {
  margin-top: 1.5rem;
}

.alias-routing-heading h3 {
  margin: 0;
}

.alias-digest {
  overflow-wrap: anywhere;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.78rem;
}

.alias-evidence {
  color: var(--ink-soft);
}

.catalog-heading-actions,
.catalog-admission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.toolbar label,
.catalog-admission fieldset > label {
  display: grid;
  gap: var(--space-2);
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.025em;
}

.toolbar input,
.toolbar select,
.catalog-admission fieldset > label input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: var(--line-width) solid var(--line-dark);
  border-radius: var(--radius-0);
  color: var(--ink);
  background: var(--surface);
  font: 500 var(--text-sm)/1.3 var(--sans);
}

.catalog-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 22px;
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--surface);
}

.catalog-summary > div {
  padding: 16px 18px 18px;
  border-right: 1px solid var(--line);
}

.catalog-summary > div:last-child {
  border-right: 0;
}

.catalog-summary dt,
.catalog-admission-preview dt {
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.catalog-summary dd {
  margin: 6px 0 0;
  font: 680 24px/1 var(--sans);
  font-variant-numeric: tabular-nums;
}

.catalog-status {
  flex: 0 0 auto;
  padding: 5px 7px;
  border: 1px solid currentcolor;
  color: var(--success);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.catalog-status[data-state="paused"],
.catalog-status[data-state="temporarily_unavailable"] {
  color: var(--accent-dark);
}

.catalog-admission-preview dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.45;
}

.alias-routing-form {
  justify-content: flex-end;
}

.alias-routing-form select {
  max-width: 190px;
  min-height: 38px;
  border: 1px solid var(--line-dark);
  background: var(--surface);
}

.models-section .node-detail {
  margin: 26px 0;
  padding: 30px;
  border-color: var(--accent-dark);
}

.catalog-admission {
  margin: 38px 0 30px;
  padding: 30px;
  border: 1px solid var(--ink);
  background: var(--surface);
}

.catalog-admission-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: start;
}

.catalog-admission-heading h3 {
  margin: 4px 0 8px;
  font: 700 27px/1.08 var(--sans);
  letter-spacing: -0.035em;
}

.catalog-admission-heading p {
  max-width: 64ch;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.catalog-admission-heading .eyebrow {
  color: var(--accent-dark);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.catalog-admission-progress {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 28px 0 34px;
  padding: 0;
  background: var(--line);
  list-style: none;
}

.catalog-admission-progress li {
  min-height: 52px;
  padding: 12px;
  color: var(--ink-soft);
  background: var(--canvas);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.35;
}

.catalog-admission-progress li[data-state="current"] {
  color: var(--surface);
  background: var(--ink);
}

.catalog-admission-progress li[data-state="complete"] {
  color: var(--success);
  background: var(--success-wash);
}

.catalog-admission fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.catalog-admission legend {
  padding: 0;
  font: 680 20px/1.2 var(--sans);
  letter-spacing: -0.025em;
}

.catalog-admission fieldset > p {
  max-width: 68ch;
  margin: 8px 0 22px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
}

/* `.form__grid` adds a two-column layout where a form is already a field
   grid; `.form` below supplies the label/field styling itself. */
.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.catalog-admission fieldset > .catalog-policy-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20px;
}

.catalog-admission fieldset > .catalog-policy-check input {
  width: auto;
  min-height: auto;
}

.catalog-admission-preview {
  display: grid;
  grid-template-columns: minmax(150px, 0.35fr) minmax(0, 1fr);
  gap: 10px 18px;
  margin: 0 0 24px;
  padding: 20px;
  background: var(--canvas);
}

.catalog-admission-actions {
  justify-content: flex-end;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.model-governance {
  margin-top: 38px;
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.model-governance .alias-routing-heading {
  margin-top: 0;
}

.routing-control {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(190px, 0.8fr) auto;
  gap: 28px;
  align-items: end;
  padding: 25px 20px;
}

.routing-control[data-state="paused"] {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.routing-control-heading {
  display: flex;
  gap: 12px;
  align-items: center;
}

.routing-control h3,
.routing-control p {
  margin: 0;
}

.routing-control h3 {
  font-family: var(--serif);
  font-size: 20px;
}

.routing-control-copy > p {
  max-width: 520px;
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

.routing-status {
  padding: 4px 9px;
  border: 1px solid var(--line-dark);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.routing-control[data-state="enabled"] .routing-status {
  border-color: var(--success);
  color: var(--success);
}

.routing-control[data-state="paused"] .routing-status {
  border-color: var(--accent-dark);
  color: var(--accent-dark);
}

.routing-reason-field {
  display: grid;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.routing-reason-field select {
  min-height: 40px;
  padding: 8px 34px 8px 10px;
  border: 1px solid var(--line-dark);
  border-radius: 0;
  color: var(--ink);
  background: var(--surface);
  font: 13px/1.2 var(--sans);
}

.routing-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.routing-submit {
  white-space: nowrap;
}

/* One metric tile, one `dt`/`dd` shape, shared by Operations, Machines,
   Overview, and Finance. `.stat--hero` sizes up the Overview metrics'
   larger figures. */
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 18px;
  background: var(--canvas);
}

.stat dt {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
}

.stat dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.stat--hero dd {
  font-size: var(--text-hero);
  font-weight: 720;
  letter-spacing: -0.04em;
}

/* A single sentence remains here since the refresh button that used to sit
   beside it moved to the top bar's one global Refresh; the flex layout that
   spaced the two apart is gone with it. */
/* One toolbar: filters on the left, a submit button pushed to the right,
   below the section header. A lone note paragraph just spans the row. */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  align-items: center;
  padding: var(--space-5) 0;
  border-bottom: var(--line-width) solid var(--line);
}

.toolbar > p {
  flex: 1 1 100%;
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.toolbar label {
  flex: 1 1 200px;
}

.toolbar label:has(input[type="search"]) {
  flex: 2 1 260px;
}

.toolbar button[type="submit"] {
  margin-left: auto;
}

.hold-countdown {
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hold-decisions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.shared-request-status[data-status="authorized"],
.shared-request-status[data-status="claimed"] {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.shared-request-status[data-status="settled"] {
  border-color: var(--success);
  color: var(--success);
}

.shared-request-status[data-status="released"],
.shared-request-status[data-status="expired"] {
  opacity: 0.62;
}

.shared-request-status[data-status="disputed"],
.shared-request-status[data-status="held"] {
  border-color: var(--accent-dark);
  color: var(--accent-dark);
}

/* One banner: text on the left, a "Try again" `.button--text` on the right
   where one exists, the same border throughout. */
.banner {
  display: flex;
  gap: var(--space-5);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-6) 2px;
  border-bottom: var(--line-width) solid var(--line);
}

.banner p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.banner--error p {
  color: var(--alert);
}

.compensation-workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px 48px;
  margin: 34px 0;
  padding: 30px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.compensation-workspace h3,
.toolbar h3 {
  margin: 0 0 8px;
  font: 600 20px/1.2 var(--serif);
}

/* `.form` is the sole source of label and field styling; `.form__grid`
   (above) adds only the two-column layout where one applies. */
.form {
  display: grid;
  gap: 16px;
}

.form label {
  display: grid;
  gap: var(--space-2);
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.025em;
}

.form input,
.form select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: var(--line-width) solid var(--line-dark);
  border-radius: var(--radius-0);
  color: var(--ink);
  background: var(--surface);
  font: 500 var(--text-sm)/1.3 var(--sans);
}

.form .button--primary {
  grid-column: 1 / -1;
}

.compensation-workspace .member-creation-result {
  grid-column: 1 / -1;
}

/* One section header: a heading block on the left, an optional action on
   the right, one divider. */
.section-header {
  display: grid;
  grid-template-columns: 1fr minmax(250px, 0.55fr);
  gap: 40px;
  align-items: end;
  padding-bottom: 24px;
  border-bottom: var(--line-width) solid var(--ink);
}

.section-header > div {
  display: flex;
  gap: 19px;
  align-items: baseline;
}

.section-index {
  margin-bottom: 0;
  color: var(--accent-dark);
  font: 700 11px/1 var(--sans);
  letter-spacing: 0.1em;
}

h2 {
  margin-bottom: 0;
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, var(--text-display));
  font-weight: 500;
  letter-spacing: -0.035em;
}

.section-header > p {
  margin-bottom: 4px;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* The dossier and list headings size their trailing column to content,
   not the page heading's wide intro-paragraph column. */
.section-header:has(h3) {
  grid-template-columns: 1fr auto;
  align-items: baseline;
}

.section-header h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.audit-section {
  padding: 92px 0 74px;
}

.action-queue-section {
  padding: 92px 0 74px;
}

.incidents-section {
  padding: 92px 0 74px;
}

.incident-create {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.incident-create label,
.incident-filters label,
.incident-transition label {
  display: grid;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.incident-create input,
.incident-create select,
.incident-filters select,
.incident-transition select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line-dark);
  border-radius: 0;
  color: var(--ink);
  background: var(--surface);
  font: 12px/1.2 var(--sans);
}

.action-queue-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.action-queue-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, auto);
  gap: 6px 24px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-dark);
  background: var(--surface);
}

.action-queue-item[data-severity="1"],
.action-queue-item[data-severity="2"] {
  border-left-color: var(--accent);
}

.action-queue-item p {
  grid-column: 1;
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
}

.action-queue-item > a {
  grid-column: 2;
  grid-row: 2 / span 6;
  align-self: center;
  justify-self: end;
}

.action-queue-load-more {
  margin-top: 20px;
}

.incident-create .incident-check,
.incident-transition label:has(input[type="checkbox"]) {
  display: flex;
  gap: 9px;
  align-items: center;
  align-self: center;
  text-transform: none;
}

.incident-check input,
.incident-transition input[type="checkbox"] {
  width: auto;
  min-height: auto;
}

.incident-filters {
  display: flex;
  gap: 16px;
  align-items: end;
}

.incident-status {
  color: var(--accent-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Shared by every directory row whose decision needs more than one control
   stacked in a narrow action cell: a fixed width narrow enough for the
   column, one column of controls, and a full-width button so it reads as
   one decision rather than a scattered row of inputs. */
.table__action-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 200px;
}

.table__action-stack .button--text {
  width: 100%;
}

/* Lives in the incidents table's narrow action cell now, not a wide card,
   so its fields stack in one column instead of two and its submit button
   wraps its own label rather than stretching the table wider. */
.incident-transition {
  align-items: flex-end;
}

.incident-transition label {
  width: 100%;
}

.incident-transition .button--text {
  height: auto;
  min-height: 42px;
  padding-block: 8px;
  white-space: normal;
  text-align: center;
}

.incident-load-more {
  margin-top: 20px;
}


/* Lives in the support table's narrow action cell now, not a wide card, so
   the note select, the status select, and the submit button stack in one
   column at a fixed width wide enough to read a select's chosen option,
   instead of splitting a card's full width two ways. */
.admin-session-controls {
  margin-top: 10px;
}

.admin-session-controls select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line-dark);
  border-radius: 0;
  color: var(--ink);
  background: var(--surface);
}

.audit-load-more {
  margin: 20px 0;
}

.empty-state {
  margin: 0;
  padding: 30px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
}

footer {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: center;
  color: var(--ink-soft);
}

footer p {
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.footer-rule {
  width: 48px;
  height: 1px;
  background: var(--accent);
}

.toast {
  /* Dark ground. */
  --accent: var(--accent-bright);

  position: fixed;
  right: 24px;
  bottom: 24px;
  max-width: min(380px, calc(100vw - 48px));
  padding: 15px 18px;
  border-left: 4px solid var(--accent);
  color: var(--surface);
  background: var(--ink);
  box-shadow: 0 16px 45px rgb(29 33 29 / 22%);
  font-size: 13px;
  line-height: 1.5;
}

[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .shell {
    width: min(100% - 28px, 1080px);
    padding-top: 34px;
  }

  .eyebrow {
    margin-bottom: 0;
  }

  h1 {
    font-size: clamp(46px, 15vw, 70px);
  }

  .section-header {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .routing-control {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: stretch;
    padding: 24px;
  }

  .routing-actions {
    justify-content: space-between;
  }

  .machines-section {
    padding-top: 70px;
  }

  .directory-filters {
    grid-template-columns: 1fr;
  }

  .account-containment,
  .account-containment-controls {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .account-containment-controls {
    width: 100%;
  }

  .account-containment-controls select {
    width: 100%;
    max-width: none;
  }

  .account-containment-controls input {
    flex: 1 1 180px;
    width: auto;
  }

  .machine-actions {
    grid-column: 1 / -1;
    justify-self: start;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .node-detail {
    margin: 24px;
  }

  /* `.panel.node-detail` outweighs the bare `.panel--roomy` it sits beside in
     the markup, so this shrink wins regardless of the two rules' order in
     the file. */
  .panel.node-detail {
    padding: 20px;
  }

  .node-detail-fields,
  .node-detail-item {
    grid-template-columns: 1fr;
  }

  .node-detail-item .button--text {
    justify-self: start;
  }

  .shared-requests-section,
  .holds-section,
  .job-inspector-section {
    padding-top: 70px;
  }

  .job-inspector-form,
  .job-detail > [data-job-detail-fields] {
    grid-template-columns: 1fr;
  }

  [data-job-detail-fields] dd {
    border-left: 0;
  }

  .hold-decisions {
    justify-content: flex-start;
  }

  .compensation-workspace,
  .form__grid {
    grid-template-columns: 1fr;
  }

  .audit-section {
    padding: 70px 0 60px;
  }

  .admin-session-controls {
    grid-template-columns: 1fr;
  }

  .action-queue-section {
    padding: 70px 0 60px;
  }

  .action-queue-item {
    grid-template-columns: 1fr;
  }

  .action-queue-item > a {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .incidents-section {
    padding: 70px 0 60px;
  }

  .incident-create,
  .incident-transition {
    grid-template-columns: 1fr;
  }

  .incident-filters {
    align-items: stretch;
    flex-direction: column;
  }

  [data-audit-filters] .button--primary {
    width: 100%;
  }
}

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

/* Dashboard shell v2: operational navigation and decision-first overview. */
body::before {
  display: none;
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: var(--surface);
  background: var(--accent-dark);
  transform: translateY(-160%);
}

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

.dashboard-app {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--canvas);
}

.dashboard-sidebar {
  /* The rail is dark; this accent's default form is the light one. */
  --accent-dark: var(--accent-bright);

  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 28px 20px 22px;
  color: var(--rail-ink);
  background: var(--rail);
}

.dashboard-brand,
.topbar .brand {
  color: inherit;
}

.dashboard-brand {
  display: inline-flex;
  align-self: flex-start;
  margin: 0 10px 38px;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 760;
}

.dashboard-nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.dashboard-nav-label {
  margin: 0 12px 8px;
  color: var(--rail-ink-soft);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dashboard-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 12px;
  border-left: 2px solid transparent;
  color: var(--rail-ink-soft);
  font-size: 13px;
  font-weight: 620;
  text-decoration: none;
}

.dashboard-nav a:hover {
  color: var(--surface);
  background: rgb(255 255 255 / 5%);
}

.dashboard-nav a[aria-current="page"] {
  border-left-color: var(--accent-dark);
  color: var(--surface);
  background: rgb(255 255 255 / 8%);
}

.dashboard-nav-spacer {
  flex: 1;
  min-height: 28px;
}

.nav-badge {
  padding: 3px 6px;
  border: 1px solid var(--rail-line);
  color: var(--rail-ink-soft);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-boundary {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 18px 12px 0;
  border-top: 1px solid var(--rail-line);
  color: var(--rail-ink-soft);
  font-size: 11px;
}

.sidebar-boundary .mode-dot {
  background: var(--success-bright);
  box-shadow: 0 0 0 3px rgb(120 167 132 / 15%);
}

.dashboard-workspace {
  min-width: 0;
}

.shell {
  width: min(100% - 64px, 1240px);
  margin: 0 auto;
  padding: 22px 0 48px;
}

.topbar {
  justify-content: flex-end;
  min-height: 44px;
  padding: 0 0 20px;
}

/* The dashboard writes its brand in the sidebar, so its top bar drops the
   duplicate. */
.dashboard-app .topbar .brand {
  display: none;
}

main [data-dashboard-route]:not(.is-route-active) {
  display: none !important;
}

/* Lot 2: Requests, Incidents, and Governance stack several segments behind
   one route; a `data-segment-panel` is one segment's content (the whole
   section for a plain segment, or the wrapper below the page-header and
   its `page-segments` nav for the route's opening segment, so the header
   and the nav that switches segments never disappear with the segment
   they belong to). Only the active panel stays in the reading and
   keyboard order. This is the same class-driven `display: none` as the
   route rule above, not the native `hidden` attribute, which permission
   checks already own for these same sections. */
main [data-segment-panel]:not(.is-segment-active) {
  display: none;
}

.overview-section {
  padding: 38px 0 0;
}

/* One page-header per route: eyebrow (workspace name), h1, an optional
   intro sentence, and the page-status line. `.page-header--dark` is the
   modifier Network carries, since its canvas is the one deliberately dark,
   full-bleed surface the visual system keeps. */
.page-header {
  margin-bottom: var(--space-7);
}

/* Self-contained rather than inherited from the bare `h1` rule (which now
   only backs the sign-in heading): a promoted title (e.g. "Recent shared
   requests", "Policies and controlled changes") wraps onto two lines at the
   hero's 50-88px size far more often than the short titles that size was
   drawn for, so this caps the size and opens up the line-height instead of
   the hero's tight 0.94. */
.page-header h1 {
  max-width: none;
  margin-bottom: 12px;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.055em;
  font-size: clamp(2.5rem, 3.4vw, var(--text-display));
  line-height: 1.05;
}

.page-header .eyebrow,
.overview-card .eyebrow,
.dossier-actions .eyebrow {
  margin: 0 0 8px;
  color: var(--accent-dark);
}

.page-header p {
  max-width: 620px;
  margin: 0 0 8px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.page-header p:last-child {
  margin-bottom: 0;
  font-size: 13px;
}

.page-header .button--text {
  margin-left: 10px;
}

/* Lot 2: the in-page segmented control for the three stacked routes. It
   sits below the page-status line, in the same 14px sans body type, and
   marks the active segment with a 2px coral underline rather than a filled
   background — no surface, no radius, matching the rest of this flat,
   restrained visual system. No dark variant exists: none of the three
   routes it appears on carries the dark canvas. */
.page-segments {
  display: flex;
  gap: 20px;
  margin: 20px 0 0;
  font-family: var(--sans);
  font-size: 14px;
}

.page-segments a {
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  text-decoration: none;
}

.page-segments a[aria-selected="true"] {
  border-bottom-color: var(--accent-dark);
  color: var(--ink);
}

.overview-status-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.overview-status-strip > div {
  display: grid;
  gap: 7px;
  padding: 17px 20px;
  border-right: 1px solid var(--line);
}

.overview-status-strip > div:last-child {
  border-right: 0;
}

.overview-status-strip [data-state="enabled"] {
  color: var(--success);
}

.overview-status-strip [data-state="paused"],
.overview-status-strip [data-state="unavailable"] {
  color: var(--accent-dark);
}

.overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
  gap: 18px;
  align-items: start;
}

.overview-primary {
  display: grid;
  gap: 18px;
}

.overview-metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  border: 1px solid var(--line);
  background: var(--surface);
}

.overview-metrics > div {
  padding: 22px;
  border-right: 1px solid var(--line);
}

.overview-metrics > div:last-child {
  border-right: 0;
}

.overview-metrics dd[data-state="empty"] {
  max-width: 12ch;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.35;
}

.overview-card-heading {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.overview-card-heading h2 {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--text-xl);
  letter-spacing: -0.025em;
}

.overview-card-heading a {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
}

.overview-capacity,
.overview-attention ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.overview-capacity li {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(80px, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}

.overview-capacity li > div {
  display: grid;
  gap: 4px;
}

.overview-capacity li span,
.overview-capacity > li > span {
  color: var(--ink-soft);
  font-size: 12px;
}

.bar {
  display: block;
  height: 3px;
  background: var(--line);
}

.bar__fill {
  display: block;
  height: 100%;
  background: var(--ink);
}

.chart {
  display: block;
  width: 100%;
  height: auto;
}

.chart rect {
  fill: var(--ink);
}

.chart .chart__baseline {
  stroke: var(--line);
  stroke-width: 1;
}

.chart .chart__axis {
  fill: var(--ink-soft);
  font: 600 11px/1 var(--sans);
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.overview-attention {
  position: sticky;
  top: 24px;
  border-top: 3px solid var(--accent-dark);
}

.overview-attention li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px 10px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.overview-attention li > span:not(.attention-severity) {
  grid-column: 2;
  color: var(--ink-soft);
  font-size: 12px;
}

.attention-severity {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  padding: 4px 6px;
  color: var(--alert);
  background: var(--alert-wash-soft);
  font-size: 10px;
  font-weight: 800;
}

/* A dedicated action zone (the grid's third column) instead of placing each
   text button at the same explicit cell: a "Credit hold" row carries both
   Review and Inspect request, and two buttons pinned to the same
   grid-column/grid-row used to overlap instead of sitting side by side. */
.attention-actions {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  align-self: start;
  gap: var(--space-3);
  justify-content: flex-end;
  flex-wrap: wrap;
}

.overview-attention .button--text {
  padding: 0;
}

.operations-section,
.machines-section,
.shared-requests-section,
.holds-section,
.job-inspector-section,
.action-queue-section,
.incidents-section,
.audit-section {
  padding: 38px 0 0;
}

.section-header {
  gap: 24px;
  margin-bottom: 24px;
}

.section-header h2 {
  font-family: var(--sans);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 720;
  letter-spacing: -0.035em;
}

.section-index {
  color: var(--accent-dark);
}

.action-queue-item {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
}

/* One surface primitive: a fine border, the surface background, square
   geometry, no shadow. A companion whose own rule only set padding or
   margin takes `.panel--roomy` instead; one that carries its own grid
   keeps its name alongside `.panel`, without its own border, background,
   or shadow. */
.panel {
  border: var(--line-width) solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-0);
  box-shadow: none;
}

.panel--roomy {
  padding: var(--space-6);
}

/* Directory rows compared at a glance: one fact per column instead of a
   stacked sentence per row. Lives inside a .panel; .table-scroll absorbs a
   narrow viewport's overflow so the table scrolls instead of the page. */
.table-scroll {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: var(--text-md);
}

.table th,
.table td {
  padding: var(--space-3) var(--space-2);
  text-align: left;
  vertical-align: middle;
  border-top: var(--line-width) solid var(--line);
}

.table th:first-child,
.table td:first-child {
  padding-left: var(--space-3);
}

.table th:last-child,
.table td:last-child {
  padding-right: var(--space-3);
}

.table thead th {
  padding-top: 0;
  padding-bottom: var(--space-2);
  border-top: 0;
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* A second, muted fact under the identity cell: what does not earn its own
   column (a runbook, an operator reason, a paused-at instant) but must not
   be dropped either. */
.table__note {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-variant-numeric: normal;
  line-height: 1.4;
  white-space: normal;
}

/* Facts longer-lived than the note (a runbook, an incident's recovery
   criteria and communications) sit behind a native disclosure instead of
   stretching the identity cell — a dossier's job until incidents and alerts
   get one of their own. No border, radius, or fill: it reads as more text
   revealed, not a card opening. */
.table__more {
  margin-top: 6px;
}

.table__more summary {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  text-decoration: underline;
  cursor: pointer;
}

.table__more dl {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.table__more ul {
  margin: 6px 0 0;
  padding-left: 1.25em;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.table__number {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table__number--alert {
  color: var(--alert);
}

/* The recent-requests Credits cell carries two amounts joined by "·"
   ("reserved · reward"), long enough at 1440px that it can crowd the
   Actions column out of frame if held to one line the way a bare number
   is. Folding it onto its own two lines keeps every column, Actions
   included, inside the frame. */
.table__number--wrap {
  white-space: normal;
}

.finance-reconciliation-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

/* A timestamp column: the short "Sep 5, 1:50 PM" form always fits on one
   line, so it never needs the wrap room a longer sentence would. */
.table__time {
  white-space: nowrap;
}

.table__action {
  text-align: right;
  white-space: nowrap;
}

/* An action cell carrying more than one control (a decision plus a reason
   select, say): the controls wrap onto their own lines rather than forcing
   the table wider, since `white-space: nowrap` above governs the cell's own
   text, not a flex child's layout. */
.table__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
  align-items: center;
  white-space: normal;
}

/* A technical value an operator compares or types: a node, job, or change
   identifier. Breaks only where `breakableId` marks a boundary, after a
   slash or a colon, so a narrow column wraps the id into its parts instead
   of into letters. Stays inline where it is one word inside a sentence
   (a note); the first-column identity wrapper below puts it on its own
   line instead. */
.mono {
  font-family: var(--mono);
  overflow-wrap: break-word;
}

/* The first column's identity: a readable name, and the technical id that
   proves it, one under the other rather than run together. */
.table__identity .mono {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
}

.table__empty td {
  padding: 30px 2px;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  text-align: center;
}

.table__skeleton-bar {
  display: block;
  height: 12px;
  background: var(--line);
  opacity: 0.5;
  animation: table-skeleton-pulse 1.2s ease-in-out infinite;
}

@keyframes table-skeleton-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.65;
  }
}

/* The row `revealAttentionItem` scrolled to and focused: still findable
   after the browser's own focus ring fades. */
.table__row--highlight {
  background: var(--accent-wash-soft);
}

/* The two highest severities carried a coloured left edge as a card; a row
   keeps the same signal on its leading cell instead. */
.table tr[data-severity="1"] td:first-child,
.table tr[data-severity="2"] td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* The machines directory panel has no padding of its own, so its section
   header and toolbar restore a gutter here, matching the table's own
   first/last-column inset so the header and the rows line up. */
[data-machines-panel] > .section-header,
[data-machines-panel] > .toolbar {
  padding-inline: var(--space-3);
}

.dossier-actions {
  display: grid;
  gap: 16px;
  margin-top: 26px;
  padding: 22px;
  border: 1px solid var(--accent-border-soft);
  background: var(--accent-wash-pale);
}

.dossier-actions h4 {
  margin: 0;
}

.dossier-actions .machine-actions,
.dossier-actions .account-containment-controls {
  display: grid;
  gap: 12px;
}

footer {
  margin-top: var(--space-8);
}

@media (max-width: 920px) {
  .dashboard-app {
    display: block;
  }

  .dashboard-sidebar {
    position: relative;
    z-index: 5;
    display: block;
    overflow-x: auto;
    height: auto;
    padding: 15px 18px 12px;
  }

  .dashboard-brand {
    margin: 0 0 12px;
  }

  .dashboard-nav {
    flex-direction: row;
    width: max-content;
  }

  .dashboard-nav-label,
  .dashboard-nav-spacer,
  .sidebar-boundary {
    display: none;
  }

  .dashboard-nav a {
    min-height: 36px;
    border: 0;
    border-bottom: 2px solid transparent;
  }

  .dashboard-nav a[aria-current="page"] {
    border-bottom-color: var(--accent-dark);
  }

  .shell {
    width: min(100% - 32px, 760px);
  }

  .overview-layout {
    grid-template-columns: 1fr;
  }

  .overview-attention {
    position: static;
  }

  .form__grid {
    grid-template-columns: 1fr;
  }

  .catalog-admission-progress {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .overview-status-strip,
  .overview-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .overview-status-strip > div:nth-child(2),
  .overview-metrics > div:nth-child(2) {
    border-right: 0;
  }

  .overview-status-strip > div:nth-child(-n + 2),
  .overview-metrics > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .catalog-admission-heading {
    grid-template-columns: 1fr;
  }

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

  .catalog-summary > div:nth-child(2) {
    border-right: 0;
  }

  .catalog-summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .catalog-admission,
  .model-governance {
    padding: 20px;
  }

  .alias-routing-form {
    align-items: stretch;
    flex-direction: column;
  }

  .alias-routing-form select,
  .alias-routing-form .button--text {
    width: 100%;
    max-width: none;
  }
}

/* Dashboard mission control: selected Product Design direction 1. */

/* These controls and panels use light grounds inside the dark network layout,
   so they carry the light-surface form of the accent and every rule inside
   them is right without naming a different token. `.network-attention` reads
   its own text-safe accent directly instead (it turns dark again below
   960px, where it needs the true bright form back). */
.command-palette,
.global-tools,
.network-table-view {
  --accent-bright: var(--accent-dark);
}

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

.dashboard-app {
  grid-template-columns: 104px minmax(0, 1fr);
}

.dashboard-sidebar {
  z-index: 15;
  width: 104px;
  padding: 28px 0 20px;
  overflow: visible;
  background: var(--rail);
  border-right: 1px solid var(--rail-line);
}

/* The mission sidebar is 104px wide, so the mark sits above the word rather
   than beside it. */
.dashboard-brand {
  align-self: center;
  flex-direction: column;
  margin: 0 0 34px;
  gap: 9px;
  color: var(--rail-ink);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-brand .brand-mark {
  width: 17px;
  height: 24px;
}

.dashboard-nav {
  gap: 0;
}

.workspace-nav {
  position: relative;
}

.workspace-nav > button {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 84px;
  place-items: center;
  padding: 12px 8px;
  border: 0;
  border-left: 3px solid transparent;
  color: var(--rail-ink-soft);
  background: transparent;
  font: 650 12px/1.2 var(--sans);
  cursor: pointer;
}

.workspace-nav > button:hover,
.workspace-nav > button:focus-visible {
  color: var(--surface);
  background: var(--rail-panel);
}

.workspace-nav.is-workspace-active > button,
.workspace-nav > button[aria-expanded="true"] {
  border-left-color: var(--accent-bright);
  color: var(--accent-bright);
  background: var(--rail-panel);
}

.workspace-nav > button:focus-visible,
.workspace-menu a:focus-visible,
.global-tools button:focus-visible,
.global-tools select:focus-visible,
.live-network-view-actions button:focus-visible,
.network-attention button:focus-visible,
.network-inspector a:focus-visible,
.network-table-view button:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: -2px;
}

.workspace-menu {
  position: absolute;
  z-index: 25;
  top: 0;
  left: calc(100% - 1px);
  display: none;
  width: 250px;
  padding: 20px;
  color: var(--rail-ink);
  background: var(--rail-panel);
  border: 1px solid var(--rail-line);
  box-shadow: 16px 18px 40px rgb(0 0 0 / 25%);
}

.workspace-nav.is-workspace-open .workspace-menu {
  display: grid;
}

.network-table-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0 20px 16px;
}

.network-table-links a {
  color: inherit;
  font-size: 12px;
  font-weight: 700;
}

.workspace-menu p {
  margin: 0 0 12px;
  color: var(--rail-ink-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.workspace-menu a {
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  border-top: 1px solid var(--rail-line);
  color: var(--rail-ink);
}

.workspace-menu a[aria-current="page"] {
  color: var(--accent-bright);
  background: transparent;
}

.sidebar-boundary {
  display: grid;
  justify-items: center;
  margin: 0 16px;
  padding: 18px 4px 0;
  text-align: center;
  font-size: 9px;
  line-height: 1.35;
}

.shell {
  width: 100%;
  max-width: none;
  padding: 0 28px 48px;
}

.topbar {
  justify-content: space-between;
  min-height: 86px;
  margin: 0 -28px;
  padding: 0 28px;
  border-color: var(--line);
  background: var(--surface);
}

.global-live-state,
.global-tools {
  display: flex;
  gap: 14px;
  align-items: center;
}

.global-live-state {
  color: var(--ink-soft);
  font-size: 12px;
}

.global-live-state strong {
  color: var(--success);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.global-live-state time::before {
  margin-right: 14px;
  color: var(--line);
  content: "•";
}

.live-dot {
  width: 8px;
  height: 8px;
  border: 2px solid var(--success-ring);
  border-radius: 50%;
  background: var(--success);
}

.command-search {
  display: flex;
  min-height: 42px;
  min-width: 280px;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink-soft);
  background: var(--surface);
  font: 600 12px/1 var(--sans);
  cursor: pointer;
}

.command-search kbd {
  color: var(--ink-soft);
  font: 600 11px/1 var(--sans);
}

.release-phase-label {
  padding: 7px 9px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-palette {
  width: min(620px, calc(100vw - 40px));
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 28px 80px rgb(0 0 0 / 28%);
}

.command-palette::backdrop {
  background: rgb(13 18 24 / 72%);
}

.command-palette__surface {
  padding: 24px;
}

.command-palette__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.command-palette h2 {
  margin: 0;
  font: 720 22px/1.2 var(--sans);
}

.command-palette__heading button,
.command-palette input,
.command-palette li button {
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: var(--surface);
  font: 600 13px/1.3 var(--sans);
}

.command-palette__heading button {
  min-height: 34px;
  padding: 0 10px;
}

.command-palette input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
}

.command-palette ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.command-palette li button {
  width: 100%;
  min-height: 45px;
  padding: 0 14px;
  border-top: 0;
  text-align: left;
  cursor: pointer;
}

.command-palette li:first-child button {
  border-top: 1px solid var(--line);
}

.command-palette li button:hover,
.command-palette li button:focus-visible {
  color: var(--accent-bright);
  background: var(--accent-wash-soft);
}

.overview-section,
.operations-section,
.machines-section,
.shared-requests-section,
.holds-section,
.job-inspector-section,
.action-queue-section,
.incidents-section,
.audit-section {
  width: min(100%, 1240px);
  margin-inline: auto;
}

.overview-section {
  padding-top: 42px;
}

.live-network-section {
  min-height: calc(100vh - 86px);
  margin: 0 -28px;
  color: var(--rail-ink);
  background: var(--rail);
}

/* `.page-header--dark` is the one deliberately dark, full-bleed scene the
   validated visual system carries: Network's page-header keeps the compact
   bar it always had instead of the light-canvas hero, and reads its text in
   the mission-control tokens. No other route uses this modifier. */
.page-header--dark {
  display: flex;
  min-height: 82px;
  align-items: center;
  margin-bottom: 0;
  padding: 18px 28px;
  border-bottom: 1px solid var(--rail-line);
}

.page-header--dark .eyebrow,
.network-attention .eyebrow,
.network-inspector .eyebrow,
.network-table-heading .eyebrow {
  margin: 0 0 6px;
  color: var(--accent-bright);
  font-size: 9px;
}

.page-header--dark h1 {
  max-width: none;
  margin: 0;
  color: var(--rail-ink);
  font: 700 26px/1 var(--sans);
  letter-spacing: -0.03em;
}

.page-header--dark p {
  color: var(--rail-ink-soft);
}

.page-header--dark .button--text {
  color: var(--rail-ink);
  border-bottom-color: var(--rail-line);
}

.live-network-view-actions {
  display: flex;
  padding: 14px 28px;
  border-bottom: 1px solid var(--rail-line);
}

.live-network-view-actions button,
.network-fallback button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--rail-line);
  border-radius: 0;
  color: var(--rail-ink);
  background: transparent;
  font: 650 12px/1 var(--sans);
  cursor: pointer;
}

.live-network-view-actions button + button {
  border-left: 0;
}

.live-network-stage {
  display: grid;
  grid-template-columns: minmax(220px, 242px) minmax(420px, 1fr) minmax(240px, 272px);
  min-height: calc(100vh - 250px);
}

.network-attention {
  z-index: 2;
  margin: 24px 0 24px 18px;
  padding: 22px 16px;
  color: var(--ink);
  background: var(--surface);
}

.network-attention h2,
.network-inspector h2,
.network-table-heading h2 {
  margin: 0;
  font: 700 18px/1.2 var(--sans);
  letter-spacing: -0.02em;
}

.network-attention > div > span {
  display: block;
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 11px;
}

.network-attention ol {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.network-attention li {
  display: grid;
  gap: 6px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.network-attention li > span:first-child {
  overflow: hidden;
  color: var(--accent-dark);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.network-attention li > span:not(:first-child) {
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.4;
}

.network-attention button,
.network-attention > a {
  justify-self: start;
  padding: 0;
  border: 0;
  color: var(--accent-dark);
  background: transparent;
  font: 700 11px/1.2 var(--sans);
  text-decoration: underline;
  cursor: pointer;
}

.network-attention > a {
  display: inline-block;
  margin-top: 12px;
}

.network-globe {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.network-globe canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 620px;
  cursor: grab;
  touch-action: none;
}

.network-globe canvas:active {
  cursor: grabbing;
}

.network-unassigned {
  position: absolute;
  right: 18px;
  bottom: 18px;
  max-width: 320px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--rail-line);
  color: var(--rail-ink-soft);
  background: var(--rail-panel);
  font-size: 10px;
  line-height: 1.4;
}

.network-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 40px;
  text-align: center;
}

.network-fallback[hidden] {
  display: none;
}

.network-fallback h2 {
  margin-bottom: 8px;
}

.network-fallback p {
  max-width: 46ch;
  color: var(--rail-ink-soft);
  line-height: 1.5;
}

.network-inspector {
  margin: 24px 18px 24px 0;
  padding: 22px 18px;
  border: 1px solid var(--rail-line);
  background: var(--rail-panel);
}

.network-inspector__empty p:last-child {
  margin-top: 10px;
  color: var(--rail-ink-soft);
  font-size: 12px;
  line-height: 1.55;
}

.network-inspector__heading {
  display: flex;
  gap: 14px;
  align-items: start;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rail-line);
}

.network-inspector__heading > span,
.network-table-view td[data-state] {
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

[data-state="healthy"] {
  color: var(--success-bright);
}

[data-state="degraded"] {
  color: var(--warning);
}

[data-state="unhealthy"] {
  color: var(--accent-bright);
}

.network-region-facts {
  margin: 0;
}

.network-region-facts > div {
  display: grid;
  gap: 5px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rail-line);
}

.network-region-facts dt {
  color: var(--rail-ink-soft);
  font-size: 10px;
}

.network-region-facts dd {
  margin: 0;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.network-inspector__links {
  display: grid;
  margin-top: 10px;
}

.network-inspector__links a {
  padding: 14px 0;
  border-bottom: 1px solid var(--rail-line);
  color: var(--rail-ink);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.network-table-view {
  min-height: calc(100vh - 168px);
  padding: 30px;
  color: var(--ink);
  background: var(--surface);
}

.network-table-fallback {
  display: grid;
  gap: 4px;
  margin-bottom: 22px;
  padding: 14px 16px;
  border-left: 2px solid var(--warning);
  color: var(--rail-ink);
  background: var(--rail-panel);
}

.network-table-fallback[hidden] {
  display: none;
}

.network-table-fallback span {
  color: var(--rail-ink-soft);
  font-size: 11px;
  line-height: 1.45;
}

.network-table-heading {
  display: flex;
  gap: 30px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 22px;
}

.network-table-heading p:last-child {
  max-width: 52ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.network-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
}

.network-table-view table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 12px;
}

.network-table-view th,
.network-table-view td {
  padding: 15px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.network-table-view thead th {
  color: var(--ink-soft);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.network-table-view tbody tr.is-selected {
  background: var(--accent-wash);
}

.network-table-view tbody button {
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font: 700 12px/1.2 var(--sans);
  text-decoration: underline;
  cursor: pointer;
}

.network-metric-ribbon {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 0.55fr)) minmax(320px, 1.4fr);
  border-top: 1px solid var(--rail-line);
  border-bottom: 1px solid var(--rail-line);
  background: var(--rail);
}

.network-metric-ribbon > div {
  display: grid;
  gap: 4px;
  padding: 15px 20px;
  border-right: 1px solid var(--rail-line);
}

.network-metric-ribbon strong {
  font-size: 21px;
  font-variant-numeric: tabular-nums;
}

.network-metric-ribbon span {
  color: var(--rail-ink-soft);
  font-size: 10px;
}

.network-metric-ribbon .network-legend {
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: flex-end;
  border-right: 0;
}

.network-legend span::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border: 1px solid currentcolor;
  border-radius: 50%;
  content: "";
}

/* The Live network stage is the one dark surface this system keeps, so its
   error banner reads in the rail's own tones instead of `.banner--error`'s
   light-theme colours. */
.banner--dark {
  justify-content: center;
  padding: 14px 28px;
  border-bottom-color: var(--accent-bright);
  color: var(--rail-ink);
  background: var(--alert-wash-dark);
}

.banner--dark p {
  color: inherit;
}

.banner--dark .button--text {
  color: var(--rail-ink);
  border-bottom-color: var(--rail-line);
}

@media (max-width: 1180px) {
  .live-network-stage {
    grid-template-columns: 220px minmax(380px, 1fr) 240px;
  }

  .network-attention {
    margin-left: 12px;
  }

  .network-inspector {
    margin-right: 12px;
  }

  .network-metric-ribbon {
    grid-template-columns: repeat(4, 1fr);
  }

  .network-metric-ribbon .network-legend {
    grid-column: 1 / -1;
    justify-content: flex-start;
    border-top: 1px solid var(--rail-line);
  }

}

@media (max-width: 960px) {
  .table {
    min-width: 720px;
  }

  .dashboard-app {
    display: block;
  }

  .dashboard-sidebar {
    position: relative;
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 0 14px;
    overflow: visible;
  }

  /* The sidebar is a horizontal bar here, so the brand goes back to a row. */
  .dashboard-brand {
    flex-direction: row;
    margin: 0 20px 0 0;
    gap: 8px;
  }

  .dashboard-nav {
    display: flex;
    width: auto;
    flex: 1;
    flex-direction: row;
  }

  .workspace-nav {
    flex: 1;
  }

  .workspace-nav > button {
    min-height: 58px;
    border-left: 0;
    border-bottom: 3px solid transparent;
  }

  .workspace-nav.is-workspace-active > button,
  .workspace-nav > button[aria-expanded="true"] {
    border-bottom-color: var(--accent-bright);
  }

  .workspace-menu {
    top: 100%;
    left: 0;
  }

  .sidebar-boundary {
    display: none;
  }

  .topbar {
    flex-wrap: wrap;
    gap: 12px;
    height: auto;
    padding-block: 12px;
  }

  .live-network-stage {
    grid-template-columns: 1fr;
  }

  .network-globe {
    grid-row: 1;
    min-height: 520px;
  }

  .network-attention,
  .network-inspector {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--rail-line);
  }

  /* The same panel turns dark here, so its one accent-bright rule needs the
     dark-surface ember back. */
  .network-attention {
    color: var(--rail-ink);
    background: var(--rail-panel);
  }

  .network-attention li > span:first-child {
    color: var(--accent-bright);
  }

  .network-attention li,
  .network-attention button,
  .network-attention > a {
    color: inherit;
  }
}

@media (max-width: 700px) {
  .shell {
    padding-inline: 16px;
  }

  .topbar,
  .live-network-section {
    margin-inline: -16px;
  }

  .global-tools {
    width: 100%;
  }

  .command-search {
    min-width: 0;
    flex: 1;
  }

  .release-phase-label,
  .global-live-state time {
    display: none;
  }

  .network-table-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .live-network-view-actions {
    flex-wrap: wrap;
  }

  .live-network-view-actions button {
    flex: 1;
  }

  .network-metric-ribbon {
    grid-template-columns: repeat(2, 1fr);
  }

  .network-metric-ribbon .network-legend {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }

}

/* Sign-in overlay.
   Deliberately plain: it is the one screen shown before anything is known
   about the operator, so it borrows the dashboard's own surfaces rather than
   introducing a look of its own. */
.sign-in-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: var(--canvas);
}

/* The sign-in panel uses the same square geometry, tokens, and px sizing as
   the rest of the dashboard. */
.sign-in-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: min(416px, 100%);
  padding: 28px;
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius-0);
  background: var(--surface);
  color: var(--ink);
}

.sign-in-panel h1 {
  margin: 0;
  font-size: 18px;
}

.sign-in-panel p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-md);
}

.sign-in-panel label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.sign-in-panel input {
  padding: var(--space-2) 10px;
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius-0);
  background: var(--canvas);
  color: inherit;
  font: inherit;
}

.sign-in-remember {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 400;
}

.sign-in-remember input {
  width: 1rem;
  height: 1rem;
  margin: 0;
}

.sign-in-panel .button {
  margin-top: var(--space-1);
}

.sign-in-message:empty {
  display: none;
}