@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/barlow-condensed-600.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/barlow-condensed-700.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/barlow-condensed-800.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-sans-latin.woff2") format("woff2");
}

:root {
  --navy: #09213d;
  --navy-2: #0d2a4b;
  --navy-3: #12385f;
  --canvas: #eef4f8;
  --surface: #ffffff;
  --surface-soft: #f5f9fc;
  --ink: #09213d;
  --ink-soft: #526b84;
  --muted: #62798f;
  --line: #c8d6e2;
  --line-strong: #aebfd0;
  --cyan: #43d7ff;
  --cyan-soft: #e6f9ff;
  --orange: #e96435;
  --orange-dark: #c64d25;
  --blue: #0b63f6;
  --blue-soft: #eaf2ff;
  --green: #00a97f;
  --green-soft: #e5f7f1;
  --amber: #b97800;
  --amber-soft: #fff5df;
  --red: #c43f46;
  --red-soft: #fff0f1;
  --shadow-sm: 0 1px 2px rgb(9 33 61 / 4%), 0 10px 28px rgb(25 68 105 / 5%);
  --shadow-md: 0 24px 70px rgb(9 33 61 / 16%);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-ui: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-data: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { min-width: 320px; color-scheme: light; background: var(--canvas); }
body { margin: 0; min-height: 100vh; overflow-anchor: none; color: var(--ink); background: var(--canvas); font: 15px/1.5 var(--font-ui); font-synthesis: none; }
button, input, select, textarea { color: inherit; font: inherit; }
button, select, input[type="radio"], input[type="file"] { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgb(11 99 246 / 42%); outline-offset: 2px; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { color: var(--ink); font-family: var(--font-display); letter-spacing: -.012em; line-height: 1.02; }
h1 { font-size: clamp(2rem, 4vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); }
h3 { font-size: 1.16rem; }
h1, h2 { font-weight: 800; }
h3, h4 { font-weight: 700; }
code { font: 12px/1.5 var(--font-data); overflow-wrap: anywhere; }

.skip-link { position: fixed; z-index: 200; top: 8px; left: 8px; transform: translateY(-160%); padding: 10px 14px; border-radius: var(--radius-sm); color: white; background: var(--navy); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.eyebrow, .section-number, .stamp, .ticket-number, .workflow-title, .ledger-header span,
.action-context span, .status-block span, .manifest-strip span, .current-release-card > span,
.remote-action-deck > div:first-child > span {
  color: var(--muted);
  font: 700 11px/1.3 var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Entry and access states */
.system-gate { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 14% 4%, var(--cyan-soft) 0, white 28%, var(--canvas) 65%); }
.gate-card, .auth-ledger { width: min(980px, 100%); border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow-md); overflow: hidden; }
.gate-card { width: min(660px, 100%); padding: clamp(30px, 6vw, 62px); }
.gate-card h1 { margin: 16px 0 12px; }
.gate-card p { max-width: 56ch; color: var(--ink-soft); }
.gate-card--warning { box-shadow: inset 0 4px var(--orange), var(--shadow-md); }
.fine-print { color: var(--muted); font-size: 12px; }
.meter { height: 4px; margin-top: 28px; border-radius: 999px; background: #edf0f4; overflow: hidden; }
.meter span { display: block; width: 38%; height: 100%; border-radius: inherit; background: var(--orange); animation: loading-sweep 1.35s ease-in-out infinite alternate; }
@keyframes loading-sweep { to { transform: translateX(165%); } }

.auth-ledger { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); }
.auth-ledger > div:first-child { padding: clamp(38px, 6vw, 72px); background: linear-gradient(145deg, white, #f7f9fc); }
.auth-ledger > div:first-child h1 { max-width: 10ch; margin: 18px 0; }
.auth-ledger > div:first-child p { max-width: 48ch; color: var(--ink-soft); font-size: 17px; }
.auth-ticket { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 5vw, 52px); border-left: 1px solid var(--line); background: white; }
.auth-ticket h2 { margin: 18px 0 8px; font-size: 1.75rem; }
.auth-ticket p { color: var(--ink-soft); }
.pin-form { display: grid; gap: 12px; margin-top: 18px; }
.pin-field { display: grid; gap: 7px; color: var(--ink-soft); font-size: 12px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.pin-field input { width: 100%; min-height: 46px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; background: white; color: var(--ink); font-family: var(--font-data); font-size: 18px; letter-spacing: .18em; }
.pin-field input:focus { border-color: var(--blue); outline: 3px solid rgb(11 99 246 / 14%); }
.pin-form .fine-print { margin: -2px 0 2px; }
.ticket-number, .stamp, .account-stamp { display: inline-flex; width: max-content; padding: 5px 9px; border-radius: 999px; color: var(--blue); background: var(--blue-soft); }

/* Buttons and form controls */
.button, .icon-button { min-height: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 14px; background: white; font-weight: 700; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.button:hover:not(:disabled), .icon-button:hover:not(:disabled) { transform: translateY(-1px); border-color: #aeb7c5; box-shadow: 0 6px 18px rgb(23 32 51 / 9%); }
.button--primary { border-color: var(--blue); color: white; background: var(--blue); box-shadow: 0 7px 18px rgb(11 99 246 / 18%); }
.button--primary:hover:not(:disabled) { border-color: #074fc9; background: #074fc9; }
.button--danger { border-color: #f0bdc0; color: var(--red); background: var(--red-soft); }
.button--quiet { background: white; }
.button--compact { min-height: 34px; padding: 6px 10px; }
.button--wide { width: 100%; margin-top: 10px; }
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.form-error { margin: 12px 0 0; padding: 11px 13px; border-left: 4px solid var(--red); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--red); background: var(--red-soft); }

/* Global shell */
.portal { min-height: 100vh; display: grid; grid-template-columns: 228px minmax(0, 1fr); grid-template-rows: 72px auto minmax(0, 1fr); background: var(--canvas); }
.masthead { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 18px; min-height: 72px; padding: 0 28px; border-bottom: 1px solid var(--line); color: var(--ink); background: rgb(255 255 255 / 78%); backdrop-filter: blur(16px); }
.masthead .brand-lockup { display: none; }
.masthead-controls { width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.brand-lockup, .sidebar-brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: var(--navy); background: var(--cyan); box-shadow: 8px 8px 0 rgb(67 215 255 / 12%); font-weight: 800; }
.network-state { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.network-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgb(0 169 127 / 13%); }
.network-state.is-offline i { background: var(--orange); }
.account-control { display: grid; gap: 3px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.account-control select { min-width: 148px; min-height: 40px; padding: 7px 30px 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: white; font-weight: 700; box-shadow: 0 5px 16px rgb(27 67 105 / 4%); }
.identity-control { display: grid; padding-left: 14px; border-left: 1px solid var(--line); color: var(--ink); font-size: 12px; }
.identity-control span:last-child { color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.icon-button { border-color: transparent; color: var(--ink); background: transparent; }
.separation-note { grid-column: 2; grid-row: 2; margin: 0; padding: 8px 28px; border-bottom: 1px solid #cfe7df; color: #08785c; background: #edfaf6; font-size: 11px; font-weight: 650; }
.workspace { display: contents; }

/* Navigation */
.workflow { position: sticky; z-index: 10; top: 0; grid-column: 1; grid-row: 1 / 4; align-self: start; height: 100vh; display: flex; flex-direction: column; padding: 22px 14px 16px; background: var(--navy); overflow-y: auto; }
.sidebar-brand { margin: 0 8px 20px; padding-bottom: 20px; border-bottom: 1px solid rgb(255 255 255 / 12%); }
.sidebar-brand > div { min-width: 0; display: grid; }
.sidebar-brand strong { color: white; font-size: 19px; letter-spacing: -.02em; }
.sidebar-brand h1 { margin: 2px 0 0; color: #aeb8c8; font-size: 11px; font-weight: 500; letter-spacing: .01em; }
.workflow-title { padding: 0 10px; color: #9aa6b8; font-size: 10px; }
.workflow nav { display: grid; gap: 4px; margin-top: 12px; }
.workflow-step { width: 100%; min-height: 56px; display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 10px; padding: 9px 10px; border: 0; border-radius: 9px; color: #bec7d5; background: transparent; text-align: left; }
.workflow-step > span { grid-row: 1 / 3; align-self: center; color: #93a0b3; font: 700 10px var(--font-data); }
.workflow-step strong { align-self: end; color: #e0e6ee; font-size: 14px; letter-spacing: -.01em; }
.workflow-step small { color: #a7b1c0; font-size: 11px; }
.workflow-step:hover:not(.is-active) { background: rgb(255 255 255 / 7%); }
.workflow-step.is-active { box-shadow: 0 10px 24px rgb(2 16 32 / 18%); background: white; }
.workflow-step.is-active > span { color: var(--blue); }
.workflow-step.is-active strong { color: var(--navy); }
.workflow-step.is-active small { color: var(--muted); }
.workflow-substep { margin: -2px 8px 2px 36px; padding: 7px 8px; border: 0; border-left: 1px solid #4b5a70; color: #b4becb; background: transparent; text-align: left; font-size: 11px; }
.workflow-substep:hover, .workflow-substep.is-active { color: white; border-left-color: var(--cyan); }
.rail-note { position: relative; margin: auto 8px 0; padding: 14px 12px 14px 20px; border: 1px solid rgb(255 255 255 / 13%); border-radius: 10px; color: #dce8f3; background: rgb(255 255 255 / 4%); }
.rail-note::before { content: ""; position: absolute; top: 18px; left: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgb(67 215 255 / 12%); }
.rail-note span, .rail-note strong, .rail-note small { display: block; }
.rail-note span { color: #758196; font-size: 9px; }
.rail-note strong { margin: 6px 0; font-size: 12px; }
.rail-note small { color: #a4afbf; font-size: 11px; line-height: 1.5; }

/* Main content */
main { grid-column: 2; grid-row: 3; min-width: 0; padding: clamp(22px, 3vw, 38px); }
.live-status:not(:empty) { max-width: 1280px; margin: 0 auto 14px; padding: 11px 14px; border: 1px solid #cbdcf3; border-radius: 10px; color: #315981; background: var(--blue-soft); }
.live-status.is-error { border-color: #efc5c8; color: var(--red); background: var(--red-soft); }
.operation-panel { position: relative; max-width: 1280px; margin: 0 auto; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; animation: panel-in .18s ease; }
.operation-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
@keyframes panel-in { from { opacity: 0; transform: translateY(3px); } }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 6px 0 6px; }
.panel-heading p { max-width: 70ch; margin: 0; color: var(--ink-soft); }
.section-number { color: #8490a1; font-size: 9px; }
.account-stamp { font: 700 10px var(--font-data); }

/* Summary cards */
.command-kpi-grid, .summary-grid { display: grid; gap: 12px; margin-bottom: 16px; }
.command-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.summary-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.command-kpi-grid > article, .command-kpi-grid > button, .summary-grid article { position: relative; min-width: 0; padding: 19px 17px 17px; border: 1px solid var(--line); border-radius: var(--radius-md); background: white; box-shadow: 0 8px 24px rgb(25 68 105 / 4.5%); overflow: hidden; text-align: left; }
.command-kpi-grid > article::before, .command-kpi-grid > button::before, .summary-grid article::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 46px; height: 3px; background: var(--blue); }
.command-kpi-grid > :nth-child(2)::before, .summary-grid > :nth-child(2)::before { background: var(--green); }
.command-kpi-grid > :nth-child(3)::before, .summary-grid > :nth-child(3)::before { background: var(--cyan); }
.command-kpi-grid > :nth-child(4)::before, .summary-grid > :nth-child(4)::before { background: var(--orange); }
.command-kpi-grid > button { cursor: pointer; }
.command-kpi-grid span, .summary-grid span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.command-kpi-grid strong, .summary-grid strong { display: block; margin: 7px 0 4px; color: var(--ink); font-size: 31px; line-height: 1; letter-spacing: -.04em; }
.command-kpi-grid small { color: var(--muted); font-size: 10px; }
.summary-grid .summary-warning { box-shadow: inset 0 3px var(--orange); }
.command-overview-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr); gap: 14px; }
.command-card, .station-catalogue-health, .drop-ledger, .checklist-card, .import-history, .remote-batch-docket, .remote-job-ledger { border: 1px solid var(--line); border-radius: var(--radius-md); background: white; box-shadow: 0 8px 24px rgb(25 68 105 / 4.5%); overflow: hidden; }
.ledger-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.ledger-header h3 { margin: 3px 0 0; }
.ledger-header small { color: var(--muted); font-size: 11px; }
.command-empty { min-height: 138px; display: grid; place-items: center; padding: 24px; color: var(--muted); text-align: center; }

/* Device and catalogue cards */
.station-catalogue-health, .device-enrollment-card { margin-bottom: 20px; }
.station-catalogue-health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; background: var(--surface-soft); }
.catalogue-health-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.catalogue-health-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.catalogue-health-card__heading small { display: block; margin-top: 4px; color: var(--muted); }
.catalogue-health-card__counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.catalogue-health-card__counts span { min-width: 0; padding: 9px; border-radius: 8px; color: var(--muted); background: #f2f5f8; font-size: 9px; text-transform: uppercase; }
.catalogue-health-card__counts strong { display: block; margin-top: 3px; color: var(--ink); font-size: 18px; }
.catalogue-health-card details, .technical-identity { margin-top: 10px; color: var(--muted); font-size: 10px; }
.catalogue-health-card summary, .technical-identity summary { width: max-content; max-width: 100%; cursor: pointer; font-weight: 750; }
.catalogue-health-card code, .technical-identity code { display: block; margin-top: 6px; max-height: 100px; padding: 7px 8px; border-radius: 6px; color: #4d5b6f; background: #f2f5f8; overflow: auto; white-space: pre-wrap; }
.station-heartbeat-heading { margin: 2px 0 10px; padding: 0 2px; border-bottom: 0; }
.station-primary-cell > strong, .station-primary-cell > small, .station-stack-cell > strong, .station-stack-cell > small { display: block; overflow-wrap: anywhere; }
.station-primary-cell > small, .station-stack-cell > small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.station-account-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.station-scope-chip, .station-account-badge { display: inline-flex; align-items: center; width: max-content; border-radius: 999px; font-weight: 800; }
.station-scope-chip { padding: 8px 11px; color: #355475; background: #edf4fb; font-size: 10px; }
.station-account-badge { padding: 3px 7px; color: #31506e; background: #eef3f8; font-size: 9px; }
.station-account-badge--active { color: #08744b; background: var(--green-soft); }
.station-ping-button { width: 100%; min-width: 0; padding-inline: 9px; white-space: normal; line-height: 1.25; }
.command-station-row { width: 100%; min-height: 58px; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px 16px; border-bottom: 1px solid #edf0f4; }
.command-station-row:last-child { border-bottom: 0; }
.command-station-row > i { width: 9px; height: 9px; border-radius: 50%; }
.command-station-row > i.is-online { background: var(--green); box-shadow: 0 0 0 4px rgb(15 138 95 / 10%); }
.command-station-row > i.is-offline { background: var(--red); box-shadow: 0 0 0 4px rgb(196 63 70 / 10%); }
.command-station-row > div { display: grid; min-width: 0; }
.command-station-row small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.command-station-row > span { color: var(--muted); font-size: 10px; font-weight: 800; }
.command-member-row, .command-audit-row { min-height: 62px; display: grid; align-items: center; gap: 11px; padding: 12px 16px; border-bottom: 1px solid #edf0f4; }
.command-member-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
.command-member-row > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--navy); font-weight: 800; }
.command-member-row > div, .command-audit-row > div { display: grid; min-width: 0; }
.command-member-row small, .command-audit-row small, .command-audit-row time { color: var(--muted); font-size: 10px; }
.command-member-row mark { padding: 4px 7px; border-radius: 20px; color: var(--green); background: var(--green-soft); font-size: 9px; font-weight: 800; }
.command-audit-row { grid-template-columns: minmax(0, 1fr) auto; }

/* Catalogue update flow */
.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; padding: 0; border: 0; }
.mode-grid legend { margin-bottom: 9px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mode-card { position: relative; min-height: 100px; display: grid; align-content: center; gap: 4px; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: 0 3px 14px rgb(23 32 51 / 3%); cursor: pointer; }
.mode-card input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.mode-card:has(input:checked) { border-color: var(--blue); box-shadow: inset 3px 0 var(--blue), 0 8px 22px rgb(11 99 246 / 9%); }
.mode-card:has(input:focus-visible) { outline: 3px solid rgb(37 99 216 / 30%); }
.mode-index { display: none; }
.mode-card strong { font-size: 16px; }
.mode-card small { color: var(--ink-soft); }
.intake-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr); gap: 16px; }
.format-chip, .status-chip, .row-chip { display: inline-flex; align-items: center; width: max-content; padding: 4px 7px; border: 0; border-radius: 999px; color: #596476 !important; background: #eef1f5; font: 750 9px var(--font-data) !important; text-transform: uppercase; }
.status-chip--ready, .row-chip--accepted, .row-chip--ready, .row-chip--published { color: var(--green) !important; background: var(--green-soft); }
.status-chip--error, .row-chip--blocked, .row-chip--failed { color: var(--red) !important; background: var(--red-soft); }
.row-chip--pending, .row-chip--partial, .row-chip--warning, .row-chip--queued, .row-chip--processing, .row-chip--validating, .row-chip--building, .row-chip--uploading { color: var(--amber) !important; background: var(--amber-soft); }
.file-drop { min-height: 195px; display: grid; place-items: center; margin: 16px; padding: 24px; border: 1px dashed #a9b6c8; border-radius: 10px; background: var(--surface-soft); text-align: center; cursor: pointer; }
.file-drop:hover { border-color: var(--blue); background: #f0f5fd; }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-drop small { max-width: 48ch; color: var(--ink-soft); }
.drop-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--blue); background: #eaf3ff; font-size: 27px; }
.file-list { border-top: 1px solid var(--line); }
.file-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 11px 18px; border-bottom: 1px solid #edf0f4; }
.file-row strong { overflow-wrap: anywhere; font: 12px var(--font-data); }
.file-row span, .empty-line, .history-note { color: var(--muted); font-size: 12px; }
.empty-line, .history-note { margin: 0; padding: 14px 18px; }
.source-checklist { display: grid; gap: 7px; margin: 0; padding: 16px 18px; list-style: none; }
.source-checklist li { position: relative; padding: 8px 10px 8px 32px; border-bottom: 1px solid #edf0f4; }
.source-checklist li::before { content: "○"; position: absolute; left: 9px; color: var(--line-strong); }
.source-checklist li.is-done::before { content: "●"; color: var(--green); }
.source-checklist li.is-missing::before { content: "!"; color: var(--red); font-weight: 900; }
.callout { margin: 0 18px 18px; padding: 12px; border-left: 4px solid var(--blue); border-radius: 0 8px 8px 0; color: var(--ink-soft); background: var(--blue-soft); }
.import-history, .remote-batch-docket, .remote-job-ledger { margin-top: 16px; }
.action-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: rgb(255 255 255 / 96%); box-shadow: 0 -8px 24px rgb(23 32 51 / 6%); }
.action-context { display: grid; }
.upload-progress { min-width: 230px; display: grid; gap: 5px; font-size: 12px; }
.upload-progress progress { width: 100%; accent-color: var(--blue); }
.manifest-strip { display: grid; grid-template-columns: 1fr 1fr 2fr; margin: 15px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); overflow: hidden; }
.manifest-strip > div { min-width: 0; padding: 10px 13px; border-right: 1px solid var(--line); }
.manifest-strip > div:last-child { border-right: 0; }
.manifest-strip span, .manifest-strip code { display: block; }
.manifest-strip code { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
.current-release-card, .publish-docket { margin-bottom: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.current-release-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 16px; border-left: 4px solid var(--blue); }
.current-release-card small { grid-column: 2; color: var(--muted); }
.publish-docket { display: flex; justify-content: space-between; gap: 24px; margin-top: 18px; }
.publish-control { display: flex; align-items: end; gap: 10px; }
.publish-control label { display: grid; gap: 5px; font-size: 12px; }
.publish-control input { width: 180px; padding: 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--font-data); text-transform: uppercase; }

/* Tables and ledgers */
.table-shell { overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: white; }
table { width: 100%; min-width: 720px; border-collapse: collapse; }
th { position: sticky; z-index: 1; top: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); color: #687487; background: #f7f9fb; text-align: left; font: 750 9px var(--font-data); letter-spacing: .06em; text-transform: uppercase; }
td { padding: 12px; border-bottom: 1px solid #edf0f4; vertical-align: top; }
td code { display: block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
tbody tr:hover { background: #fafbfc; }
.empty-cell { height: 110px; color: var(--muted); text-align: center; vertical-align: middle; }
.station-table-shell table { min-width: 780px; table-layout: fixed; }
.device-membership-table th:nth-child(1) { width: 32%; }
.device-membership-table th:nth-child(2) { width: 20%; }
.device-membership-table th:nth-child(3) { width: 19%; }
.device-membership-table th:nth-child(4) { width: 17%; }
.device-membership-table th:nth-child(5) { width: 12%; }
.live-station-table th:nth-child(1) { width: 31%; }
.live-station-table th:nth-child(2) { width: 17%; }
.live-station-table th:nth-child(3) { width: 21%; }
.live-station-table th:nth-child(4) { width: 18%; }
.live-station-table th:nth-child(5) { width: 13%; }
.device-membership-actions { text-align: right; }
.ledger-toolbar, .pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ledger-toolbar { padding: 13px 0; }
.ledger-toolbar label { display: grid; gap: 5px; font-weight: 700; }
.ledger-toolbar select, .dialog-sheet input, .dialog-sheet textarea, .dialog-sheet select,
.remote-input-grid input, .remote-input-grid select, .remote-schedule-controls input, .remote-schedule-controls select { min-height: 42px; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: white; }
.pagination-bar { padding: 12px 0 20px; color: var(--muted); font-size: 12px; }
.integrity-flow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.integrity-flow > div { flex: 1; display: flex; align-items: center; gap: 8px; }
.integrity-flow > div > b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: white; background: var(--navy); font: 700 9px var(--font-data); }
.integrity-flow > div > span { display: grid; font-size: 11px; font-weight: 800; }
.integrity-flow small { color: var(--muted); font-size: 9px; font-weight: 500; }
.integrity-flow > i { color: #aab2bf; font-style: normal; }

/* Remote printing */
.remote-safety-seal { flex: 0 0 auto; padding: 8px 11px; border-radius: 999px; color: var(--green); background: var(--green-soft); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.remote-state-line { margin-bottom: 15px; padding: 11px 14px; border-left: 4px solid var(--blue); border-radius: 0 8px 8px 0; background: var(--blue-soft); }
.remote-state-line--empty { border-left-color: var(--amber); background: var(--amber-soft); }
.remote-print-form { display: grid; gap: 14px; }
.remote-dispatch-ticket { border: 1px solid var(--line); border-radius: var(--radius-md); background: white; box-shadow: 0 3px 14px rgb(23 32 51 / 3%); overflow: hidden; }
.remote-ticket-index { display: none; }
.remote-ticket-body { min-width: 0; padding-bottom: 16px; }
.remote-station-control { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.remote-station-toggle-note, .remote-preview-disclaimer, .remote-mode-explanation { margin: 8px 18px 0; color: var(--muted); font-size: 11px; }
.remote-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; padding: 16px 18px; }
.remote-input-grid--label { grid-template-columns: minmax(260px, 1fr) 105px 175px auto; align-items: end; }
.remote-input-grid label, .remote-schedule-controls label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.remote-fsn-field, .remote-fsn-combobox { position: relative; min-width: 0; }
.remote-fsn-field { display: grid; gap: 6px; }
.remote-fsn-combobox > input { width: 100%; }
.remote-fsn-hint { color: var(--muted); font-size: 10px; text-transform: none; }
.remote-fsn-suggestions { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; left: 0; max-height: 320px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: 9px; background: white; box-shadow: 0 16px 38px rgb(23 32 51 / 18%); }
.remote-fsn-suggestion { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 11px 12px; border: 0; border-bottom: 1px solid #edf0f4; background: white; text-align: left; }
.remote-fsn-suggestion:hover, .remote-fsn-suggestion.is-active { box-shadow: inset 3px 0 var(--blue); background: var(--blue-soft); }
.remote-fsn-suggestion strong { overflow-wrap: anywhere; font: 800 12px var(--font-data); }
.remote-fsn-suggestion span { grid-column: 1; overflow: hidden; color: var(--ink-soft); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.remote-fsn-suggestion small { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--muted); font: 700 10px var(--font-data); }
.remote-fsn-suggestion-state { padding: 13px 12px; color: var(--muted); font-size: 12px; }
.remote-evidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 18px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.remote-evidence-grid > div { padding: 10px; border-right: 1px solid var(--line); }
.remote-evidence-grid > div:last-child { border-right: 0; }
.remote-evidence-grid dt { color: var(--muted); font: 700 10px var(--font-data); text-transform: uppercase; }
.remote-evidence-grid dd { margin: 4px 0 0; overflow-wrap: anywhere; font: 700 13px var(--font-data); }
.remote-label-preview { width: min(860px, calc(100% - 36px)); min-height: 190px; margin: 0 auto; padding: 14px; border-radius: 9px; background: #edf1f6; overflow: hidden; }
.remote-preview-empty { min-height: 186px; display: grid; place-items: center; padding: 24px; color: var(--muted); text-align: center; }
.remote-label-sheet { position: relative; width: 100%; display: grid; grid-template-columns: 1.35fr .65fr; aspect-ratio: 75 / 50; border: 2px solid var(--ink); background: white; overflow: hidden; }
.remote-label-sheet[data-label-size="50x38"] { aspect-ratio: 50 / 38; }
.remote-preview-proof { position: absolute; top: 10px; right: 12px; color: var(--green); font: 800 9px var(--font-data); letter-spacing: .06em; text-transform: uppercase; }
.remote-preview-state { min-height: 18px; margin: 8px 18px 0; color: var(--green); font: 800 11px var(--font-data); }
.remote-label-main { padding: 20px; border-right: 1px solid var(--ink); }
.remote-label-main h4 { margin: 0 0 5px; font-size: 22px; }
.remote-label-main > p { margin: 0 0 14px; font: 700 12px var(--font-data); }
.remote-label-fields { display: grid; grid-template-columns: 100px 1fr; margin: 0; font-size: 12px; }
.remote-label-fields dt, .remote-label-fields dd { margin: 0; padding: 4px 0; border-top: 1px dotted var(--line); }
.remote-label-fields dt { color: var(--muted); font: 700 9px var(--font-data); text-transform: uppercase; }
.remote-label-compliance { display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 20px; font-size: 10px; }
.remote-label-compliance p { margin: 0; overflow-wrap: anywhere; }
.remote-machine-readable { display: grid; grid-template-columns: 1.5fr .75fr; gap: 8px; margin-top: 3px; }
.remote-barcode, .remote-qr { min-height: 54px; display: grid; align-content: end; padding: 6px; border: 1px solid var(--ink); overflow: hidden; }
.remote-barcode, .remote-qr { background: #f7f8fa; }
.remote-machine-readable span, .remote-machine-readable code { width: max-content; max-width: 100%; padding: 2px 3px; background: white; font: 800 8px var(--font-data); }
.remote-mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 16px 18px; border: 0; }
.remote-mode-card { position: relative; min-height: 102px; display: grid; align-content: end; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); cursor: pointer; }
.remote-mode-card input { position: absolute; top: 12px; right: 12px; }
.remote-mode-card strong { padding-right: 22px; font-size: 15px; }
.remote-mode-card small { margin-top: 5px; color: var(--muted); }
.remote-mode-card:has(input:checked) { border-color: var(--blue); box-shadow: inset 3px 0 var(--blue); }
.remote-mode-card:has(input:disabled) { cursor: not-allowed; opacity: .56; }
.remote-schedule-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 0 18px 4px; padding: 14px; border-left: 4px solid var(--amber); border-radius: 0 9px 9px 0; background: var(--amber-soft); }
.remote-action-deck { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 14px 16px; border-radius: 10px; color: white; background: var(--navy); }
.remote-action-deck > div:first-child { display: grid; }
.remote-action-deck .button--quiet { color: white; background: transparent; }
.remote-batch-docket > ol { margin: 0; padding: 12px 42px; }
.remote-batch-docket > .button-row, .remote-batch-docket > .form-error { margin: 0 18px 18px; }
.remote-job-ledger .table-shell { margin: 0 18px 18px; }
#remote-print-job-status:not(:empty) { margin: 12px 18px; padding: 10px 12px; border-left: 4px solid var(--green); background: var(--green-soft); }
.remote-job-mode { color: var(--muted); font-size: 11px; }

/* Dialogs */
dialog { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: 14px; color: var(--ink); background: white; box-shadow: 0 24px 90px rgb(0 0 0 / 28%); overflow: hidden; }
dialog::backdrop { background: rgb(10 16 27 / 62%); backdrop-filter: blur(3px); }
.dialog-sheet { max-height: calc(100vh - 42px); display: grid; overflow: auto; }
.dialog-sheet > header { padding: 21px; border-bottom: 1px solid var(--line); }
.dialog-sheet > header h2 { margin: 7px 0 0; }
.dialog-sheet > p, .dialog-sheet > label, .dialog-sheet > div { margin-left: 21px; margin-right: 21px; }
.dialog-sheet label { display: grid; gap: 6px; margin-top: 13px; font-weight: 700; }
.dialog-sheet textarea { min-height: 90px; resize: vertical; }
.dialog-sheet footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 21px; padding: 15px 21px; border-top: 1px solid var(--line); background: var(--surface-soft); }
.detail-grid, .remote-confirm-summary { display: grid; grid-template-columns: 140px 1fr; gap: 0; margin-top: 17px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.detail-grid dt, .detail-grid dd, .remote-confirm-summary dt, .remote-confirm-summary dd { margin: 0; padding: 9px 11px; border-bottom: 1px solid var(--line); }
.detail-grid dt, .remote-confirm-summary dt { color: var(--muted); background: var(--surface-soft); font: 700 10px var(--font-data); text-transform: uppercase; }
.detail-grid dd { overflow-wrap: anywhere; font: 12px var(--font-data); }
.diff-values { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.diff-values section { padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.diff-values dt { color: var(--muted); font-size: 11px; }
.diff-values dd { margin: 0 0 8px; overflow-wrap: anywhere; font-family: var(--font-data); }

@media (max-height: 720px) and (min-width: 761px) {
  .workflow { padding-block: 12px; }
  .sidebar-brand { margin-bottom: 8px; padding-bottom: 10px; }
  .workflow-title, .workflow-step small, .rail-note { display: none; }
  .workflow nav { gap: 1px; margin-top: 5px; }
  .workflow-step { min-height: 43px; grid-template-rows: 1fr; padding-block: 5px; }
  .workflow-step > span { grid-row: 1; }
  .workflow-step strong { align-self: center; }
}

@media (max-width: 1050px) {
  .portal { grid-template-columns: 184px minmax(0, 1fr); }
  .sidebar-brand { margin-inline: 4px; }
  .workflow-step small, .rail-note { display: none; }
  .workflow { padding-inline: 10px; }
  .workflow-step { padding-inline: 9px; }
  .intake-grid { grid-template-columns: 1fr; }
  .command-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .remote-input-grid--label { grid-template-columns: minmax(240px, 1fr) 100px 170px; }
  .remote-input-grid--label .button { grid-column: 1 / -1; }
  .remote-evidence-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .system-gate { padding: 16px; }
  .auth-ledger { grid-template-columns: 1fr; }
  .auth-ticket { border-top: 1px solid var(--line); border-left: 0; }
  .portal { display: block; }
  .masthead { display: block; padding: 13px 14px; }
  .masthead-controls { justify-content: flex-start; flex-wrap: wrap; }
  .network-state, .identity-control { display: none; }
  .account-control { flex: 1; }
  .account-control select { width: 100%; }
  .separation-note { padding: 8px 14px; }
  .workflow { position: sticky; z-index: 60; top: 0; width: 100%; height: auto; min-height: 0; padding: 7px; border-bottom: 1px solid #2c394e; }
  .sidebar-brand, .workflow-title, .rail-note { display: none; }
  .workflow nav { display: flex; margin: 0; overflow-x: auto; scrollbar-width: thin; }
  .workflow-step { min-width: 118px; min-height: 48px; grid-template-columns: 18px 1fr; grid-template-rows: 1fr; padding: 7px 9px; }
  .workflow-step > span { display: block; grid-row: 1; align-self: center; }
  .workflow-step strong { display: block; align-self: center; font-size: 12px; line-height: 1.2; }
  .workflow-step small { display: none; }
  .workflow-substep { min-width: 118px; min-height: 48px; display: grid; place-items: center; margin: 0; padding: 7px 9px; border: 0; border-radius: 9px; font-size: 12px; text-align: center; }
  main { padding: 14px 10px 28px; }
  .operation-panel { padding: 18px 14px; border-radius: 12px; }
  .panel-heading, .publish-docket, .action-bar, .ledger-toolbar, .publish-control, .remote-action-deck { align-items: stretch; flex-direction: column; }
  .panel-heading .button-row .button { flex: 1; }
  .command-kpi-grid, .summary-grid, .command-overview-grid, .station-catalogue-health-grid, .mode-grid, .remote-mode-grid { grid-template-columns: 1fr; }
  .catalogue-health-card__counts { grid-template-columns: repeat(2, 1fr); }
  .manifest-strip { grid-template-columns: 1fr; }
  .manifest-strip > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .current-release-card { grid-template-columns: 1fr; }
  .current-release-card small { grid-column: 1; }
  .publish-control input { width: 100%; }
  .integrity-flow { align-items: stretch; overflow-x: auto; }
  .integrity-flow > div { min-width: 150px; }
  .remote-input-grid, .remote-input-grid--label, .remote-schedule-controls { grid-template-columns: 1fr; }
  .remote-input-grid--label .button { grid-column: auto; }
  .remote-evidence-grid { grid-template-columns: 1fr; }
  .remote-evidence-grid > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .remote-label-sheet { grid-template-columns: 1fr; }
  .remote-label-main { border-right: 0; border-bottom: 1px solid var(--ink); }
  .detail-grid, .remote-confirm-summary, .diff-values { grid-template-columns: 1fr; }
}

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

@media (prefers-contrast: more) {
  :root { --line: #8f98a6; --ink-soft: #354052; --muted: #3f4b5c; }
  .button, .mode-card, .command-card, .table-shell { border-width: 2px; }
}