/* GENERATED by scripts/sync-design-system.mjs from design-system/ (artifact v59) — do not edit by hand. 2026-09-30 */
/* Unlayered: must beat app CSS everywhere (focus ring; numeric/identifier utilities). */
:where(.op-btn, .op-input, .feature-item):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.op-num, .is-num { font-family: var(--font-primary); font-variant-numeric: tabular-nums lining-nums; }
.op-id, .is-id { font-family: var(--font-mono); color: var(--blue-muted); }
.op-tab:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.filter-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.filter-active-count .op-tag button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.op-link-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; }
.nr-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.nr-avatar:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.mt-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.sidebar-drawer-header:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.op-segmented button:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.upload-dropzone:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.op-check input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.op-switch input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.op-search .op-search-clear:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.op-load-more:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.op-pager button:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.op-menu-item:hover, .op-menu-item:focus-visible { background: var(--muted); outline: none; }
.op-menu-item:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.op-exception:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

/* Layered: unlayered app rules win until a module deletes its own CSS and lets these show through. */
@layer ds {
  
  /* Operable components. Components read SEMANTIC roles only (background, card, foreground, muted-foreground,
     primary, border, input, ring, destructive…). Primitives such as grey-N, coral and slate-N are never
     referenced here, except the modality/status hues that ARE their own role (type-*, success, warning, info).
     Timing tokens carry fallbacks. */
  
  /* Baseline. The system assumes border-box and no user-agent margins or padding, the same ground the app's reset gives it,
     so a preview here and the app render the same. In the app the bundle sits in `@layer ds`; the app's own reset must sit in a
     layer declared BEFORE it (`@layer reset, ds;`) — an unlayered reset would beat every padding and margin below. */
  * { margin: 0; padding: 0; }
  dialog.op-overlay { border: 0; padding: 0; max-width: none; max-height: none; width: auto; height: auto; color: inherit; }
  dialog.op-overlay::backdrop { background: transparent; }
  /* Preview stages. The artifact frame paints its own (light) ground behind a preview, so every preview root carries the product's: .op-stage or .op-row. */
  .op-stage, .op-row { background: var(--card); min-height: 100vh; box-sizing: border-box; }
  .op-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding: var(--sp-4); }
  
  
  /* Elements (elements.js) are wrappers: they take no box of their own, so the markup they emit sits in the parent's layout exactly as hand-written markup would. */
  op-badge, op-type-badge, op-button, op-tabs, op-panel, op-section, op-detail-card, op-data-list, op-field, op-table, op-empty-state, op-alert, op-freshness, op-feature-item, op-segmented, op-switch, op-progress, op-stat, op-exception-list, op-movement, op-movement-row, op-movement-list, op-chart, op-workbench { display: contents; }
  op-tab, op-data-item, op-option { display: none; }
  
  /* ── Workbench: the one frame for Inventory, Supply, Demand, Intelligence and Grades — title, freshness, actions, tabs, filter row, body ── */
  .op-workbench { display: flex; flex-direction: column; background: var(--card); min-height: 100%; }
  .op-workbench-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
  .op-workbench-title { margin: 0; font: 600 16px/24px var(--font-primary); color: var(--foreground); display: inline-flex; align-items: center; gap: var(--sp-icon); }
  .op-workbench-title .i { width: 20px; height: 20px; color: var(--muted-foreground); }
  .op-workbench-head .op-fresh { margin-left: var(--sp-2); }
  .op-workbench-actions { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-2); }
  .op-workbench-actions + [data-close], .op-workbench-head > .op-btn-icon:last-child { margin-left: var(--sp-2); }
  .op-workbench-head > .op-btn-icon:only-of-type { margin-left: auto; }
  .op-workbench-tabs { display: block; } /* the Tabs row brings its own padding and rule */
  .op-workbench-filters { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
  .op-workbench-body { flex: 1; min-height: 0; padding: var(--sp-4); min-width: 0; overflow: auto; }
  @media (max-width: 639px) { .op-workbench-head { flex-wrap: wrap; } .op-workbench-body { padding: var(--sp-3); } }
  /* ── Icons (unified spec: 20×20 viewBox, 1.75 stroke, round caps and joins, currentColor) ── */
  .i { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .i-20 { width: 20px; height: 20px; }
  .i-24 { width: 24px; height: 24px; }
  
  /* ── Buttons ── */
  .op-btn {
    --t: var(--duration-default, 150ms) var(--ease-standard, cubic-bezier(0.2,0,0,1));
    min-height: 32px; padding: 0 var(--sp-4); box-sizing: border-box;
    font: 600 13px/18px var(--font-primary);
    border-radius: var(--r-control); cursor: pointer;
    border: 1px solid transparent;
    transition: background-color var(--t), color var(--t), border-color var(--t), transform var(--duration-fast, 100ms) var(--ease-standard, ease);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-icon);
  }
  .op-btn:active:not(:disabled) { transform: scale(0.98); }
  .op-btn-primary { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
  .op-btn-primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
  .op-btn-primary:active:not(:disabled) { background: var(--primary-active); border-color: var(--primary-active); }
  .op-btn-ghost { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--border); }
  .op-btn-ghost:hover:not(:disabled) { background: var(--secondary-hover); color: var(--foreground); }
  .op-btn-ghost:active:not(:disabled) { background: var(--muted); }
  .op-btn-outline-blue { background: none; border-color: var(--blue-muted); color: var(--blue-muted); }
  .op-btn-outline-blue:hover:not(:disabled) { background: color-mix(in srgb, var(--blue-muted) 10%, transparent); }
  .op-btn-outline-blue:active:not(:disabled) { background: color-mix(in srgb, var(--blue-muted) 16%, transparent); }
  .op-btn-danger { background: color-mix(in srgb, var(--destructive) 12%, transparent); color: var(--destructive-foreground); border-color: color-mix(in srgb, var(--destructive) 40%, transparent); }
  .op-btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--destructive) 20%, transparent); }
  .op-btn:disabled, .op-btn[aria-disabled="true"] { background: var(--disabled); color: var(--disabled-foreground); border-color: var(--border); cursor: not-allowed; }
  .op-btn[aria-busy="true"] { cursor: progress; }
  .op-btn-icon { padding: 0; width: 32px; }
  .op-btn.is-sm { min-height: 28px; padding: 0 var(--sp-3); font-size: 12px; line-height: 16px; } /* the compact tier inside cards, alerts and rows */
  .op-btn-icon.is-sm { width: 28px; }
  .op-spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--r-full); animation: op-spin 700ms linear infinite; box-sizing: border-box; }
  @keyframes op-spin { to { transform: rotate(360deg); } }
  
  /* ── Inputs ── */
  .op-input {
    min-height: 36px; box-sizing: border-box; width: 100%;
    font: 400 14px/20px var(--font-primary);
    background: var(--secondary); border: 1px solid var(--input);
    border-radius: var(--r-control); color: var(--foreground); padding: 0 var(--sp-3); outline: none;
    transition: border-color var(--duration-default, 150ms) var(--ease-standard, ease);
  }
  .op-input:hover:not(:disabled):not([readonly]) { border-color: var(--muted-foreground); }
  .op-input:focus { border-color: var(--primary); }
  .op-input::placeholder { color: var(--subtle-foreground); }
  .op-input[readonly] { background: var(--muted); border-color: var(--border); color: var(--muted-foreground); }
  .op-input:disabled { background: var(--disabled); border-color: var(--border); color: var(--disabled-foreground); cursor: not-allowed; }
  .op-input[aria-invalid="true"] { border-color: var(--destructive-foreground); }
  .op-field { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
  .op-field > label { font: 400 13px/18px var(--font-primary); color: var(--muted-foreground); width: 104px; flex-shrink: 0; text-align: right; }
  .op-field-help, .op-field-error { display: flex; align-items: center; gap: var(--sp-icon); font: 400 12px/16px var(--font-primary); margin: calc(-1 * var(--sp-2)) 0 var(--sp-3) calc(104px + var(--sp-3)); }
  .op-field-help { color: var(--subtle-foreground); }
  .op-field-error { color: var(--destructive-foreground); }
  
  /* ── Asset type pills: .type-badge.{asset_type} ── */
  .type-badge {
    --tb: var(--type-default);
    display: inline-block;
    padding: var(--sp-pair) var(--sp-2); border-radius: var(--r-sm);
    font: 500 12px/16px var(--font-primary); white-space: nowrap;
    color: var(--tb);
    background: color-mix(in srgb, var(--tb) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--tb) 30%, transparent);
  }
  .type-badge.terminal, .type-badge.port { --tb: var(--type-terminal); } /* a port is the Terminal family: same hue, its own word and icon */
  .type-badge.plant    { --tb: var(--type-plant); }
  .type-badge.refinery { --tb: var(--type-refinery); }
  .type-badge.pipeline { --tb: var(--type-pipeline); }
  .type-badge.station  { --tb: var(--type-station); }
  .type-badge.rail     { --tb: var(--type-rail); }
  .type-badge.airport  { --tb: var(--type-airport); }
  .type-badge.default  { --tb: var(--type-default); }
  
  /* ── Status badges ── */
  .op-badge {
    --bd: var(--muted-foreground);
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: var(--sp-pair) var(--sp-2); border-radius: var(--r-full);
    font: 500 12px/16px var(--font-primary);
    color: var(--bd);
    background: color-mix(in srgb, var(--bd) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--bd) 30%, transparent);
  }
  .op-badge .i { width: 12px; height: 12px; }
  .op-badge-success { --bd: var(--success); }
  .op-badge-warning { --bd: var(--warning); }
  .op-badge-error   { --bd: var(--destructive-foreground); }
  .op-badge-info    { --bd: var(--info); }
  .op-badge-neutral { background: var(--secondary-hover); border-color: var(--border); }
  
  /* ── Tag / chip ── */
  .op-tag {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: var(--sp-pair) var(--sp-2); border-radius: var(--r-full);
    background: var(--secondary); border: 1px solid var(--border);
    font: 400 12px/16px var(--font-primary); color: var(--muted-foreground);
  }
  
  /* ── Panel anatomy ── */
  .op-panel { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border-strong); border-radius: var(--r-lg); overflow: hidden; width: 100%; box-sizing: border-box; }
  .op-panel-header { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
  .op-panel-title { margin: 0; font: 600 16px/24px var(--font-primary); color: var(--foreground); }
  .op-panel-body { padding: var(--sp-4); }
  .op-panel-status { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); } /* a band between header and body that stays put while the body changes: a wizard's steps, a ProcessStatus strip; the strip brings its own ground */
  .op-overlay > .op-panel > .op-panel-body, .pt-modal > .op-panel > .op-panel-body { padding: var(--sp-5); }
  .op-panel-footer { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); display: flex; gap: var(--sp-2); justify-content: flex-end; background: var(--footer-shade); }
  .op-panel-footer .op-btn-danger { margin-right: auto; } /* the destructive action sits alone on the left, away from the primary */
  .op-section { margin-bottom: var(--sp-5); }
  .op-section:last-child:not(op-section > .op-section), op-section:last-child > .op-section { margin-bottom: 0; }
  .op-section-heading { margin: 0 0 var(--sp-3); font: 500 13px/18px var(--font-primary); color: var(--muted-foreground); display: flex; align-items: center; gap: var(--sp-icon); }
  .op-count { font-weight: 400; color: var(--subtle-foreground); } /* a count beside a heading or title: "Exceptions · 6 open" */
  .op-panel ::-webkit-scrollbar { width: 4px; }
  .op-panel ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-sm); }
  .op-panel ::-webkit-scrollbar-track { background: transparent; }
  
  /* ── Overlay backdrop ── */
  .op-overlay:not([open]):is(dialog) { display: none; }
  .op-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--scrim); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: var(--sp-4); animation: op-fade var(--duration-moderate, 200ms) var(--ease-standard, ease); }
  .op-overlay > .op-panel { max-width: 480px; animation: op-enter var(--duration-moderate, 200ms) var(--ease-standard, ease); }
  .op-overlay-demo { background: var(--background); background-image: linear-gradient(var(--scrim), var(--scrim)); padding: var(--sp-4); display: flex; align-items: center; justify-content: center; min-height: 100vh; box-sizing: border-box; }
  @keyframes op-fade { from { opacity: 0; } }
  @keyframes op-enter { from { opacity: 0; transform: scale(0.98); } }
  @keyframes op-sheet { from { transform: translateY(100%); } }
  
  /* ── Table ── */
  .op-table { width: 100%; border-collapse: collapse; font: 400 13px/18px var(--font-primary); }
  .op-table th { text-align: left; padding: var(--sp-2) var(--sp-3); font-weight: 500; color: var(--muted-foreground); border-bottom: 1px solid var(--border); }
  .op-table td { padding: var(--sp-2) var(--sp-3); color: var(--foreground); font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--row-divider); vertical-align: top; }
  .op-table tr:last-child td { border-bottom: none; }
  /* Numbers are not code. Quantities, prices, dates, times and percentages wear the primary face with tabular figures (.op-num);
     only identifiers — coordinates, IDs, codes, references — wear mono (.op-id). */
  .op-table td code { font: 400 12px/16px var(--font-mono); background: var(--secondary-hover); padding: 0 var(--sp-1); border-radius: var(--r-sm); color: var(--blue-muted); }
  .op-table-wrap { overflow-x: auto; }
  
  /* ── Feature list item (sidebar + every dropdown; see DESIGN_RULES) ── */
  .feature-list { list-style: none; margin: 0; padding: var(--sp-1) 0; }
  .feature-item { display: flex; align-items: center; gap: var(--sp-icon); min-height: 32px; padding: var(--sp-2) var(--sp-3); cursor: pointer; background: none; border: 0; width: 100%; text-align: left; font-family: var(--font-primary); box-sizing: border-box; color: var(--foreground); transition: background-color var(--duration-default, 150ms) var(--ease-standard, ease); }
  .feature-item:hover { background: var(--muted); }
  .feature-item[aria-selected="true"] { background: var(--accent); }
  .feature-item .name { flex: 1; display: flex; align-items: center; gap: var(--sp-icon); font: 500 13px/18px var(--font-primary); color: var(--foreground); }
  .feature-item .type-badge { flex-shrink: 0; }
  .feature-item .fav { color: var(--warning); margin-left: auto; display: inline-flex; }
  .feature-item .name-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .feature-sep { border-top: 1px solid var(--border); margin: var(--sp-1) 0; }
  
  /* ── Loader + wordmark ── */
  .op-wordmark { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .op-wordmark-brand { font-family: var(--font-wordmark); font-size: 22px; font-weight: 700; /* brand mark: the one 700 besides page titles */ letter-spacing: 0.5px; color: var(--primary); line-height: 1; }
  .op-product-tag { font: 500 12px/16px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-muted); background: color-mix(in srgb, var(--blue-muted) 15%, transparent); border: 1px solid color-mix(in srgb, var(--blue-muted) 30%, transparent); padding: var(--sp-pair) var(--sp-2); border-radius: var(--r-sm); }
  .op-loader { background: var(--background); display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .op-loader .op-wordmark { margin-bottom: var(--sp-5); }
  .op-progress-track { width: 140px; height: 4px; background: var(--secondary-hover); border-radius: var(--r-full); overflow: hidden; margin-bottom: var(--sp-3); }
  .op-progress-bar { height: 100%; width: 0%; background: var(--primary); border-radius: var(--r-full); transition: width var(--duration-moderate, 200ms) var(--ease-standard, ease); }
  .op-progress-bar.is-indeterminate { width: 40%; animation: op-slide 1.2s ease-in-out infinite; }
  @keyframes op-slide { 0% { margin-left: -50%; } 100% { margin-left: 110%; } }
  .op-loader-status { font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); text-align: center; min-height: 16px; }
  
  /* ── Touch: comfortable targets on coarse pointers ── */
  @media (pointer: coarse) {
    .op-btn, .op-btn-icon { min-height: 44px; }
    .op-btn-icon { width: 44px; }
    .op-input { min-height: 44px; }
    .feature-item { min-height: 44px; }
  }
  
  /* ── Mobile (< sm 640px): fields stack, overlays become bottom sheets ── */
  @media (max-width: 639px) {
    .op-field { flex-direction: column; align-items: stretch; gap: var(--sp-icon); }
    .op-field > label { width: auto; text-align: left; }
    .op-field-help, .op-field-error { margin-left: 0; }
    .op-overlay { align-items: flex-end; padding: 0; }
    .op-overlay > .op-panel { max-width: none; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; animation: op-sheet var(--duration-slow, 300ms) var(--ease-standard, ease); }
    .op-panel-footer { flex-direction: column-reverse; }
    .op-panel-footer .op-btn { width: 100%; }
  }
  
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  }
  
  /* ══ Components built from the app's stylesheets (base, panels, audit, detail-card, review, suggestions, ui-utils, workbench, route-card).
     Geometry, layout and class names are the app's. Colour, type size, radius and states follow the system's roles and scale. ══ */
  
  /* ── Tabs (audit-tab / bulk-tab / dc-access-tab: 2px underline, flex:1 in modals) ── */
  .op-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 var(--sp-4); }
  .op-tabs.is-fill .op-tab { flex: 1; justify-content: center; }
  .op-tab { display: inline-flex; align-items: center; gap: var(--sp-icon); min-height: 40px; padding: var(--sp-2) var(--sp-4); margin-bottom: -1px; background: none; border: 0; border-bottom: 2px solid transparent; font: 400 13px/18px var(--font-primary); color: var(--muted-foreground); cursor: pointer; transition: color var(--duration-default, 150ms) var(--ease-standard, ease), border-color var(--duration-default, 150ms) var(--ease-standard, ease); }
  .op-tab:hover { color: var(--foreground); background: var(--secondary); }
  .op-tab[aria-selected="true"] { color: var(--accent-foreground); border-bottom-color: var(--primary); font-weight: 500; }
  .op-tabs-vertical { display: flex; flex-direction: column; gap: var(--sp-pair); border: 0; padding: var(--sp-2); min-width: 160px; }
  .op-tabs-vertical .op-tab { justify-content: flex-start; border-bottom: 0; margin: 0; border-radius: var(--r-control); min-height: 32px; padding: 0 var(--sp-3); }
  .op-tabs-vertical .op-tab[aria-selected="true"] { background: var(--accent); }
  .op-tabpanel { padding: var(--sp-4); }
  
  /* ── Filter toggles (panels.css .filter-toggle, 32px tall, flex:1 in a row, --_toggle-color) ── */
  .filter-toggles { display: flex; gap: var(--sp-2); }
  .filter-toggle { --_toggle-color: var(--muted-foreground); position: relative; display: flex; align-items: center; justify-content: center; gap: var(--sp-icon); flex: 1; min-height: 32px; padding: 0 var(--sp-2); border-radius: var(--r-control); border: 1px solid var(--border); background: var(--secondary); color: var(--subtle-foreground); font: 500 12px/16px var(--font-primary); cursor: pointer; transition: background-color var(--duration-default, 150ms) var(--ease-standard, ease), color var(--duration-default, 150ms) var(--ease-standard, ease), border-color var(--duration-default, 150ms) var(--ease-standard, ease); }
  .filter-toggle:hover { border-color: var(--_toggle-color); color: var(--foreground); }
  .filter-toggle[aria-pressed="true"] { color: var(--_toggle-color); border-color: var(--_toggle-color); background: color-mix(in srgb, var(--_toggle-color) 12%, transparent); }
  .filter-toggle .i { width: 20px; height: 20px; }
  .filter-active-count { font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
  .filter-active-count strong { color: var(--blue-muted); font-weight: 500; }
  .filter-active-count .op-tag { gap: var(--sp-pair); padding-right: var(--sp-1); }
  .filter-active-count .op-tag button { all: unset; display: inline-flex; padding: var(--sp-pair); cursor: pointer; border-radius: var(--r-full); color: var(--subtle-foreground); }
  .filter-active-count .op-tag button:hover { color: var(--foreground); }
  .op-link-btn { all: unset; cursor: pointer; font: 500 13px/18px var(--font-primary); color: var(--accent-foreground); }
  
  /* ── Empty state (workbench.css .empty-state: centred, 36px icon at stroke 1.25) ── */
  .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sp-6) var(--sp-4); gap: var(--sp-2); color: var(--muted-foreground); }
  .empty-state .icon { color: var(--subtle-foreground); margin-bottom: var(--sp-1); }
  .empty-state .icon .i { width: 36px; height: 36px; }
  .empty-state h3 { margin: 0; font: 600 16px/24px var(--font-primary); color: var(--foreground); }
  .empty-state p { margin: 0; font: 400 14px/20px var(--font-primary); max-width: 320px; }
  .empty-state .op-btn { margin-top: var(--sp-2); }
  
  /* ── Tooltip (data-tip ::after on nr-btn, mt-btn, filter-toggle; here as a real element) ── */
  .op-tip-anchor { position: relative; display: inline-flex; }
  .op-tooltip { position: absolute; background: var(--popover); color: var(--foreground); border: 1px solid var(--border-strong); border-radius: var(--r-control); padding: var(--sp-1) var(--sp-2); font: 400 12px/16px var(--font-primary); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--duration-default, 150ms) var(--ease-standard, ease); z-index: var(--z-modal); }
  .op-tooltip.is-top { left: 50%; bottom: calc(100% + var(--sp-2)); transform: translateX(-50%); }
  .op-tooltip.is-right { left: calc(100% + var(--sp-2)); top: 50%; transform: translateY(-50%); }
  .op-tip-anchor:hover .op-tooltip, .op-tip-anchor:focus-within .op-tooltip, .op-tooltip.is-open { opacity: 1; }
  
  /* ── Toast ── */
  .op-toast-region { position: fixed; bottom: var(--sp-4); right: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); z-index: var(--z-critical); max-width: min(360px, calc(100vw - 32px)); }
  .op-toast { display: flex; align-items: flex-start; gap: var(--sp-icon); padding: var(--sp-2) var(--sp-3); background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border-strong); border-radius: var(--r-md); font: 400 13px/18px var(--font-primary); animation: op-toast-in var(--duration-moderate, 200ms) var(--ease-standard, ease); }
  .op-toast .i { margin-top: calc((18px - 16px) / 2); /* centre a 16px icon on the 18px first line */ }
  .op-toast-success .i { color: var(--success); }
  .op-toast-error .i { color: var(--destructive-foreground); }
  .op-toast-info .i { color: var(--info); }
  .op-toast .op-link-btn { margin-left: auto; white-space: nowrap; }
  @keyframes op-toast-in { from { opacity: 0; transform: translateY(4px); } }
  @media (max-width: 639px) { .op-toast-region { left: var(--sp-4); right: var(--sp-4); bottom: 80px; max-width: none; } }
  
  /* ── Save status ── */
  .op-save-status { display: inline-flex; align-items: center; gap: var(--sp-icon); font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); min-height: 16px; }
  .op-save-status .i { width: 12px; height: 12px; }
  .op-save-status.is-saved .i { color: var(--success); }
  .op-save-status.is-saving { color: var(--muted-foreground); }
  .op-save-status.is-failed { color: var(--destructive-foreground); }
  
  /* ── Skeleton ── */
  .op-skeleton { display: block; background: var(--muted); border-radius: var(--r-sm); position: relative; overflow: hidden; }
  .op-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--secondary-hover), transparent); animation: op-shimmer 1.4s ease-in-out infinite; }
  @keyframes op-shimmer { to { transform: translateX(100%); } }
  .op-skeleton-text { height: 16px; margin: var(--sp-pair) 0; }
  .op-skeleton-title { height: 18px; width: 60%; margin-bottom: var(--sp-2); }
  .op-skeleton-badge { height: 20px; width: 72px; border-radius: var(--r-sm); display: inline-block; }
  
  /* ── Process status (workbench.css .enrich-status: a text line with .loading / .error; ProcessStatus adds a strip) ── */
  .enrich-status { font: 400 13px/18px var(--font-primary); color: var(--muted-foreground); padding: var(--sp-2) 0; display: flex; align-items: center; gap: var(--sp-icon); }
  .enrich-status.is-loading { color: var(--info); }
  .enrich-status.is-error { color: var(--destructive-foreground); }
  .op-process { display: flex; align-items: center; gap: var(--sp-icon); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--muted); font: 400 13px/18px var(--font-primary); color: var(--foreground); }
  .op-process .op-spinner { color: var(--blue-muted); }
  .op-process-ready .i { color: var(--subtle-foreground); }
  .op-process-done .i { color: var(--success); }
  .op-process-stopped .i { color: var(--warning); }
  .op-process-failed { border-color: color-mix(in srgb, var(--destructive) 40%, transparent); }
  .op-process-failed .i { color: var(--destructive-foreground); }
  .op-process .meta { color: var(--muted-foreground); }
  .op-process .actions { margin-left: auto; display: flex; gap: var(--sp-1); }
  
  /* ── Nav rail (base.css .nav-rail / .nr-btn: 48px rail, 36px buttons; one selected colour) ── */
  .nav-rail { width: 48px; background: var(--card); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; padding: var(--sp-3) 0; gap: var(--sp-pair); box-sizing: border-box; }
  .nr-btn { --acc: var(--accent-foreground); position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--secondary-foreground); cursor: pointer; border-radius: var(--r-control); transition: background-color var(--duration-default, 150ms) var(--ease-standard, ease), color var(--duration-default, 150ms) var(--ease-standard, ease); }
  .nr-btn .i { width: 20px; height: 20px; }
  .nr-btn:hover { background: var(--secondary-hover); color: var(--foreground); }
  .nr-btn[aria-pressed="true"], .nr-btn.is-active { background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--acc); }
  .nr-sep { width: 24px; height: 1px; background: var(--border); margin: var(--sp-1) 0; }
  .nr-spacer { flex: 1; }
  .nr-avatar { width: 32px; height: 32px; border-radius: var(--r-full); background: var(--muted); border: 1px solid var(--border-strong); color: var(--foreground); font: 600 12px/1 var(--font-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .nr-avatar:hover { background: var(--secondary-hover); }
  
  /* ── Map toolbar (base.css .map-toolbar: floating, vertical, 36px buttons, 8px group labels → 12px here) ── */
  .map-toolbar { display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-pair); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-1); }
  .mt-group-label { font: 500 12px/16px var(--font-primary); color: var(--subtle-foreground); text-align: center; padding: var(--sp-1) 0 0; user-select: none; }
  .mt-btn { position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--subtle-foreground); cursor: pointer; border-radius: var(--r-control); transition: background-color var(--duration-default, 150ms) var(--ease-standard, ease), color var(--duration-default, 150ms) var(--ease-standard, ease); }
  .mt-btn .i { width: 16px; height: 16px; }
  .mt-btn:hover { background: var(--secondary-hover); color: var(--foreground); }
  .mt-btn[aria-pressed="true"], .mt-btn.is-active { background: var(--accent); color: var(--accent-foreground); }
  .mt-sep { height: 1px; width: 28px; background: var(--border); margin: var(--sp-pair) var(--sp-1); }
  
  /* ── Sidebar drawer (base.css .sidebar-drawer: accordion inside the side panel / detail card) ── */
  .sidebar-drawer { border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: var(--sp-2); overflow: hidden; background: var(--secondary); }
  .sidebar-drawer-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--sp-2) var(--sp-3); background: none; border: 0; color: inherit; cursor: pointer; user-select: none; font-family: var(--font-primary); transition: background-color var(--duration-default, 150ms) var(--ease-standard, ease); }
  .sidebar-drawer-header:hover { background: var(--secondary-hover); }
  .sidebar-drawer-label { font: 500 13px/18px var(--font-primary); color: var(--muted-foreground); }
  .sidebar-drawer-chevron { color: var(--subtle-foreground); transition: transform var(--duration-moderate, 200ms) var(--ease-standard, ease); }
  .sidebar-drawer-header[aria-expanded="true"] .sidebar-drawer-chevron { transform: rotate(180deg); }
  .sidebar-drawer-body { display: none; padding: 0 var(--sp-3) var(--sp-3); }
  .sidebar-drawer-header[aria-expanded="true"] + .sidebar-drawer-body { display: block; }
  .toolbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
  .toolbar .op-btn { flex: 1; }
  
  /* ── Status bar (ui-utils.css .status-bar: floating, bottom-centre, mono coords) ── */
  .status-bar { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: 32px; background: color-mix(in srgb, var(--background) 92%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-4); font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); white-space: nowrap; }
  .status-bar .sep { width: 1px; height: 12px; background: var(--border); }
  .status-bar .coord { color: var(--secondary-foreground); font-family: var(--font-mono); }
  .status-bar .count { color: var(--blue-muted); font-weight: 500; }
  .status-bar .draw-status { font-weight: 500; }
  .status-bar .draw-status.is-active { color: var(--accent-foreground); animation: pulse-coral 1.5s ease-in-out infinite; }
  .status-bar kbd { display: inline-block; padding: 0 var(--sp-1); font: inherit; font-size: 12px; background: var(--secondary-hover); border: 1px solid var(--border-strong); border-radius: var(--r-sm); line-height: 16px; }
  @keyframes pulse-coral { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
  
  /* ── Segmented control (basemap-toggle, pw-view-switch: joined buttons, radius on the group only) ── */
  .op-segmented { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--r-control); overflow: hidden; background: var(--card); }
  .op-segmented button { padding: 0 var(--sp-3); min-height: 32px; font: 500 12px/16px var(--font-primary); background: transparent; border: 0; border-right: 1px solid var(--border); color: var(--muted-foreground); cursor: pointer; transition: background-color var(--duration-default, 150ms) var(--ease-standard, ease), color var(--duration-default, 150ms) var(--ease-standard, ease); }
  .op-segmented button:last-child { border-right: 0; }
  .op-segmented button:hover:not([aria-pressed="true"]) { background: var(--secondary-hover); color: var(--foreground); }
  .op-segmented button[aria-pressed="true"] { background: var(--accent); color: var(--accent-foreground); }
  .op-segmented.is-neutral button[aria-pressed="true"] { background: var(--secondary-hover); color: var(--foreground); }
  
  /* ── Detail card: a Panel (header, body, footer, sections) with an accent stripe, a hero strip and a subtitle. 420px. ── */
  .detail-card { --acc: var(--muted-foreground); width: 420px; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; }
  .detail-card > .op-panel-header { position: relative; display: block; border-left: 3px solid var(--acc); }
  .detail-card > .op-panel-header .op-panel-title { letter-spacing: -0.2px; padding-right: calc(2 * 28px + var(--sp-1) + var(--sp-3)); }
  .dc-operator { margin: var(--sp-pair) 0 0; font: 400 13px/18px var(--font-primary); color: var(--muted-foreground); padding-right: calc(2 * 28px + var(--sp-1) + var(--sp-3)); }
  .dc-header-actions { position: absolute; top: var(--sp-3); right: var(--sp-3); display: flex; gap: var(--sp-1); }
  .dc-header-actions .op-btn-icon.is-fav { color: var(--warning); }
  .ac-hero-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .ac-hero-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-2) var(--sp-1); border-right: 1px solid var(--border); min-width: 0; }
  .ac-hero-cell:last-child { border-right: 0; }
  .ac-hero-val { font: 500 14px/1 var(--font-primary); color: var(--foreground); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .ac-hero-cell.is-alert .ac-hero-val { color: var(--warning); }
  .ac-hero-lbl { font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); margin-top: var(--sp-pair); white-space: nowrap; }
  .dc-status-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--subtle-foreground); display: inline-block; }
  .dc-status-dot.is-operational { background: var(--success); }
  .detail-card .op-tabs { padding: 0; background: var(--muted); }
  .detail-card > .op-panel-body { flex: 1; overflow-y: auto; }
  .op-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  
  /* ── Suggestion card (suggestions.css / review.css .suggestion-card / .rq-card: type badge, title, desc, confidence, approve/reject/defer) ── */
  .suggestion-card { padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: var(--sp-2); background: var(--card); transition: border-color var(--duration-default, 150ms) var(--ease-standard, ease); }
  .suggestion-card:hover { border-color: var(--border-strong); }
  .suggestion-card[aria-selected="true"] { border-color: var(--primary); background: var(--accent); }
  .suggestion-card .s-header { display: flex; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-2); }
  .suggestion-card .s-title { flex: 1; min-width: 0; font: 500 13px/18px var(--font-primary); color: var(--foreground); }
  .suggestion-card .s-confidence { font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); flex-shrink: 0; font-variant-numeric: tabular-nums; }
  .suggestion-card .s-desc { font: 400 13px/18px var(--font-primary); color: var(--muted-foreground); margin-bottom: var(--sp-2); }
  /* ── Diff block: shared by SuggestionCard and the audit entry ── */
  .op-diff { margin: var(--sp-2) 0; padding: var(--sp-3); background: var(--secondary); border-radius: var(--r-sm); font: 400 12px/18px var(--font-mono); color: var(--muted-foreground); }
  .op-diff .field { color: var(--muted-foreground); font-weight: 500; margin-bottom: var(--sp-pair); }
  .op-diff .old { color: var(--destructive-foreground); text-decoration: line-through; }
  .op-diff .new { color: var(--success); }
  .op-diff .arrow { color: var(--subtle-foreground); margin: 0 var(--sp-1); }
  .suggestion-card .s-source { font: 400 12px/16px var(--font-primary); color: var(--subtle-foreground); font-style: italic; }
  .suggestion-card .s-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--row-divider); }
  .suggestion-card.is-approved, .suggestion-card.is-rejected, .suggestion-card.is-deferred { background: var(--secondary); }
  .suggestion-card.is-approved .s-title::after, .suggestion-card.is-rejected .s-title::after, .suggestion-card.is-deferred .s-title::after { display: inline-block; margin-left: var(--sp-2); font: 500 12px/16px var(--font-primary); padding: 0 var(--sp-2); border-radius: var(--r-full); }
  .suggestion-card.is-approved .s-title::after { content: "Approved"; color: var(--success); background: color-mix(in srgb, var(--success) 15%, transparent); }
  .suggestion-card.is-rejected .s-title::after { content: "Rejected"; color: var(--destructive-foreground); background: color-mix(in srgb, var(--destructive) 15%, transparent); }
  .suggestion-card.is-deferred .s-title::after { content: "Deferred"; color: var(--warning); background: color-mix(in srgb, var(--warning) 15%, transparent); }
  
  /* ── Progress bar (bt-progress-bar, ac-bar-track, ivw-prog steps) ── */
  .op-progress { display: flex; flex-direction: column; gap: var(--sp-1); }
  .op-progress-label { display: flex; justify-content: space-between; align-items: baseline; font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); }
  .op-progress-label .pct { font-variant-numeric: tabular-nums; color: var(--secondary-foreground); }
  .op-bar-track { height: 4px; background: var(--secondary-hover); border-radius: var(--r-full); overflow: hidden; }
  .op-bar-fill { height: 100%; border-radius: var(--r-full); background: var(--blue-muted); transition: width var(--duration-slow, 300ms) var(--ease-standard, ease); }
  .op-bar-fill.is-success { background: var(--success); }
  .op-bar-fill.is-warning, .op-bar-fill.is-near { background: var(--warning); }
  .op-bar-fill.is-breach { background: var(--destructive); }
  .op-steps { display: flex; gap: var(--sp-1); }
  .op-step { height: 4px; border-radius: var(--r-full); flex: 1; background: var(--border-strong); }
  .op-step.is-done { background: var(--success); }
  .op-step.is-on { background: var(--primary); }
  .op-step.is-error { background: var(--destructive); }
  
  /* ── Dropzone (modals-core.css .upload-dropzone) ── */
  .upload-dropzone { border: 2px dashed var(--border-strong); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-4); text-align: center; cursor: pointer; background: transparent; width: 100%; color: inherit; font-family: var(--font-primary); transition: border-color var(--duration-moderate, 200ms) var(--ease-standard, ease), background-color var(--duration-moderate, 200ms) var(--ease-standard, ease); }
  .upload-dropzone:hover, .upload-dropzone.is-dragover { border-color: var(--primary); background: var(--accent); }
  .upload-dropzone.has-file { border-color: var(--blue-muted); background: color-mix(in srgb, var(--blue-muted) 4%, transparent); }
  .upload-dropzone .icon { color: var(--subtle-foreground); margin-bottom: var(--sp-1); }
  .upload-dropzone .icon .i { width: 24px; height: 24px; }
  .upload-dropzone.has-file .icon { color: var(--blue-muted); }
  .upload-dropzone .label { font: 500 13px/18px var(--font-primary); color: var(--secondary-foreground); }
  .upload-dropzone .hint { font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); margin-top: var(--sp-1); }
  
  /* ── Diff / audit entry: a Badge for the action, an .op-diff block, a small ghost Undo ── */
  .audit-entry { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--row-divider); }
  .audit-entry:last-child { border-bottom: 0; }
  .audit-entry-body { flex: 1; min-width: 0; }
  .audit-entry-title { margin: 0 0 var(--sp-pair); font: 500 13px/18px var(--font-primary); color: var(--foreground); }
  .audit-entry-meta { font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); }
  .audit-entry > .op-badge { min-width: 56px; justify-content: center; } /* the action column lines up */
  .audit-entry .op-btn.is-undone { text-decoration: line-through; color: var(--disabled-foreground); border-color: var(--border); pointer-events: none; }
  
  /* ══ Round three: status icons, form controls, confirm dialog, search + pagination, menu ══ */
  
  /* ── Badge icons: every status badge carries a 12px icon so the state never depends on hue ── */
  .op-badge .i { width: 12px; height: 12px; stroke-width: 2; }
  
  /* ── Checkbox and radio (replaces accent-color natives) ── */
  .op-check { display: inline-flex; align-items: center; gap: var(--sp-icon); min-height: 32px; font: 400 13px/18px var(--font-primary); color: var(--foreground); cursor: pointer; }
  .op-check input { appearance: none; margin: 0; width: 16px; height: 16px; flex-shrink: 0; border: 1px solid var(--input); border-radius: var(--r-sm); background: var(--secondary); display: grid; place-content: center; cursor: pointer; transition: background-color var(--duration-fast, 100ms) var(--ease-standard, ease), border-color var(--duration-fast, 100ms) var(--ease-standard, ease); }
  .op-check input[type="radio"] { border-radius: var(--r-full); }
  .op-check input::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform var(--duration-fast, 100ms) var(--ease-standard, ease); background: var(--primary-foreground); clip-path: polygon(14% 50%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 66%); }
  .op-check input[type="radio"]::before { clip-path: none; border-radius: var(--r-full); width: 6px; height: 6px; background: var(--primary-foreground); }
  .op-check input:checked { background: var(--primary); border-color: var(--primary); }
  .op-check input:checked::before { transform: scale(1); }
  .op-check input:indeterminate { background: var(--primary); border-color: var(--primary); }
  .op-check input:indeterminate::before { transform: scale(1); clip-path: none; width: 8px; height: 2px; }
  .op-check input:hover:not(:disabled) { border-color: var(--muted-foreground); }
  .op-check input:disabled { background: var(--disabled); border-color: var(--border); cursor: not-allowed; }
  .op-check input:disabled + span { color: var(--disabled-foreground); }
  .op-check input:disabled:checked { background: var(--disabled-foreground); border-color: var(--disabled-foreground); }
  .op-check .hint { display: block; font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); }
  .op-check-group { display: flex; flex-direction: column; gap: var(--sp-pair); }
  .op-check-group.is-row { flex-direction: row; flex-wrap: wrap; gap: var(--sp-4); }
  
  /* ── Switch: an immediate on/off setting ── */
  .op-switch { display: inline-flex; align-items: center; gap: var(--sp-icon); min-height: 32px; font: 400 13px/18px var(--font-primary); color: var(--foreground); cursor: pointer; }
  .op-switch input { appearance: none; margin: 0; width: 32px; height: 18px; flex-shrink: 0; border-radius: var(--r-full); background: var(--input); position: relative; cursor: pointer; transition: background-color var(--duration-default, 150ms) var(--ease-standard, ease); }
  .op-switch input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--r-full); background: var(--card); transition: transform var(--duration-default, 150ms) var(--ease-standard, ease); }
  .op-switch input:checked { background: var(--primary); }
  .op-switch input:checked::before { transform: translateX(14px); background: var(--primary-foreground); }
  .op-switch input:hover:not(:disabled):not(:checked) { background: var(--muted-foreground); }
  .op-switch input:disabled { background: var(--disabled); cursor: not-allowed; }
  .op-switch input:disabled::before { background: var(--disabled-foreground); }
  .op-switch input:disabled + span { color: var(--disabled-foreground); }
  .op-switch .state { font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); min-width: 22px; }
  
  /* ── Select: the native select with one chevron ── */
  .op-select { position: relative; display: block; width: 100%; }
  .op-select select { appearance: none; width: 100%; padding-right: calc(var(--sp-3) + var(--sp-4) + var(--sp-1)); cursor: pointer; }
  .op-select .i { position: absolute; right: var(--sp-3); top: 50%; transform: translateY(-50%) rotate(90deg); pointer-events: none; color: var(--subtle-foreground); }
  .op-select select:disabled + .i { color: var(--disabled-foreground); }
  
  /* ── Confirm dialog: a Panel for one decision ── */
  .op-confirm { max-width: 420px; }
  .op-confirm .op-panel-body { font: 400 14px/20px var(--font-primary); color: var(--muted-foreground); }
  .op-confirm .op-panel-body strong { color: var(--foreground); font-weight: 500; }
  .op-confirm .op-panel-footer { justify-content: flex-end; }
  .op-confirm .op-check { min-height: 24px; margin-top: var(--sp-3); font-size: 13px; color: var(--foreground); }
  
  /* ── Search field (panels.css .filter-search-wrap) ── */
  .op-search { position: relative; display: flex; align-items: center; }
  .op-search > .i { position: absolute; left: var(--sp-3); color: var(--subtle-foreground); pointer-events: none; }
  .op-search .op-input { padding-left: calc(var(--sp-3) + var(--sp-4) + var(--sp-2)); padding-right: calc(var(--sp-1) + 28px + var(--sp-1)); } /* room for the small clear button */
  .op-search .op-search-clear { position: absolute; right: var(--sp-1); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: var(--r-sm); color: var(--subtle-foreground); cursor: pointer; }
  .op-search .op-search-clear:hover { color: var(--foreground); background: var(--secondary-hover); }
  .op-search .op-input:placeholder-shown + .op-search-clear { display: none; }
  .op-search-meta { font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); margin-top: var(--sp-2); }
  .op-search-meta strong { color: var(--blue-muted); font-weight: 500; }
  
  /* ── Pagination: load more (review.css .rq-load-more) and pager ── */
  .op-load-more { display: block; width: 100%; padding: var(--sp-2) var(--sp-3); min-height: 36px; margin-top: var(--sp-2); background: var(--secondary); border: 1px dashed var(--border-strong); border-radius: var(--r-control); color: var(--blue-muted); font: 500 13px/18px var(--font-primary); cursor: pointer; text-align: center; transition: background-color var(--duration-default, 150ms) var(--ease-standard, ease), border-color var(--duration-default, 150ms) var(--ease-standard, ease); }
  .op-load-more:hover { background: var(--secondary-hover); border-color: var(--blue-muted); }
  .op-load-more[aria-busy="true"] { color: var(--muted-foreground); cursor: progress; }
  .op-showing { font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); font-variant-numeric: tabular-nums; text-align: center; padding: var(--sp-icon) 0; }
  .op-pager { display: flex; align-items: center; gap: var(--sp-1); font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); }
  .op-pager .op-showing { margin-right: auto; padding: 0; text-align: left; }
  .op-pager button { min-width: 32px; min-height: 32px; padding: 0 var(--sp-2); display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent; border-radius: var(--r-control); color: var(--secondary-foreground); font: 400 13px/18px var(--font-primary); cursor: pointer; }
  .op-pager button:hover:not(:disabled) { background: var(--secondary-hover); color: var(--foreground); }
  .op-pager button[aria-current="page"] { background: var(--accent); color: var(--accent-foreground); }
  .op-pager button:disabled { color: var(--disabled-foreground); cursor: not-allowed; }
  .op-pager .prev .i { transform: rotate(180deg); }
  
  /* ── Menu (suggestions.css #rq-actions-menu / .rq-action-item) ── */
  .op-menu { min-width: 200px; padding: var(--sp-1); background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border-strong); border-radius: var(--r-md); }
  .op-menu-item { display: flex; align-items: center; gap: var(--sp-icon); width: 100%; min-height: 32px; padding: var(--sp-2) var(--sp-3); background: none; border: 0; border-radius: var(--r-control); font: 400 13px/18px var(--font-primary); color: var(--foreground); cursor: pointer; text-align: left; white-space: nowrap; }
  .op-menu-item .i { color: var(--subtle-foreground); }
  .op-menu-item .shortcut { margin-left: auto; font: 400 12px/16px var(--font-mono); color: var(--subtle-foreground); }
  .op-menu-item[aria-disabled="true"] { color: var(--disabled-foreground); cursor: not-allowed; }
  .op-menu-item[aria-disabled="true"] .i { color: var(--disabled-foreground); }
  .op-menu-item.is-danger, .op-menu-item.is-danger .i { color: var(--destructive-foreground); }
  .op-menu-item.is-danger:hover { background: color-mix(in srgb, var(--destructive) 12%, transparent); }
  .op-menu-sep { height: 1px; margin: var(--sp-1) 0; background: var(--border); }
  .op-menu-label { padding: var(--sp-1) var(--sp-3); font: 500 12px/16px var(--font-primary); color: var(--muted-foreground); }
  
  /* ── Movement: one cargo from origin to destination, with its loading/discharge timings ── */
  .mv { --mode: var(--muted-foreground); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-3); }
  .mv-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
  .mv-id { font: 400 12px/16px var(--font-mono); color: var(--blue-muted); }
  .mv-grade { font: 500 13px/18px var(--font-primary); color: var(--foreground); }
  .mv-vol { font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  .mv-status { margin-left: auto; }
  /* lane: origin ─ modality ─ destination */
  .mv-lane { display: grid; grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr); align-items: start; gap: var(--sp-3); }
  .mv-end { min-width: 0; display: flex; align-items: center; gap: var(--sp-icon); }
  .mv-end.dest { justify-content: flex-end; }  /* badge first at both ends: type · location · operator code, as FeatureItem */
  .mv-end .name { display: block; font: 500 13px/18px var(--font-primary); color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mv-end .type-badge { flex-shrink: 0; }
  .mv-mode { display: flex; flex-direction: column; align-items: center; gap: var(--sp-pair); color: var(--mode); }
  .mv-mode-line { position: relative; width: 100%; height: 18px; display: flex; align-items: center;
    /* the connector: a 2px line from a hollow ring (origin) to a filled dot (destination). No arrowhead: direction is the layout. */
    background: linear-gradient(color-mix(in srgb, var(--mode) 60%, transparent), color-mix(in srgb, var(--mode) 60%, transparent)) center / calc(100% - 8px) 2px no-repeat; }
  .mv-mode-line::before { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; box-sizing: border-box; border-radius: var(--r-full); background: var(--card); border: 2px solid var(--mode); }
  .mv-mode-line::after { content: ""; position: absolute; right: 0; top: 4px; width: 10px; height: 10px; box-sizing: border-box; border-radius: var(--r-full); background: var(--mode); }
  .mv-mode-line .i { position: relative; margin: 0 auto; background: var(--card); padding: 0 var(--sp-1); box-sizing: content-box; width: 20px; height: 20px; }
  /* in transit: the line is a track filled to the cargo's position (--pos); the destination is still hollow */
  .mv.is-transit .mv-mode-line { background: linear-gradient(to right, var(--mode) 0 var(--pos, 50%), var(--border-strong) var(--pos, 50%)) center / calc(100% - 8px) 2px no-repeat; }
  .mv.is-transit .mv-mode-line::after { background: var(--card); border: 2px solid var(--border-strong); }
  .mv-mode .label { font: 500 12px/16px var(--font-primary); color: var(--mode); }
  .mv-mode .meta { font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  /* narrow: the lane stands up. The card is a container, so a DetailCard (380px) gets the vertical form whatever the viewport. */
  .mv { container-type: inline-size; }
  .mv-lane.is-stacked { grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: auto auto auto; position: relative; row-gap: var(--sp-2); }
  .mv-lane.is-stacked::before { content: ""; position: absolute; left: 9px; top: 17px; bottom: 17px; width: 2px; background: color-mix(in srgb, var(--mode) 60%, transparent); }
  .mv-lane.is-stacked > * { grid-column: 2; position: relative; }
  .mv-lane.is-stacked .mv-end.dest { justify-content: flex-start; }
  .mv-lane.is-stacked .mv-end::before { content: ""; position: absolute; left: calc(-1 * (20px + var(--sp-3)) + 5px); top: 7px; width: 10px; height: 10px; box-sizing: border-box; border-radius: var(--r-full); background: var(--card); border: 2px solid var(--mode); }
  .mv-lane.is-stacked .mv-end.dest::before { background: var(--mode); }
  .mv-lane.is-stacked .mv-mode { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--sp-icon); row-gap: 0; padding: var(--sp-1) 0; }
  .mv-lane.is-stacked .mv-mode-line { width: auto; height: 20px; background: none; }
  .mv-lane.is-stacked .mv-mode-line::before, .mv-lane.is-stacked .mv-mode-line::after { display: none; }
  .mv-lane.is-stacked .mv-mode-line .i { padding: 0; margin: 0; }
  .mv-lane.is-stacked .mv-mode .meta { flex-basis: 100%; }
  .mv.is-transit .mv-lane.is-stacked::before { background: linear-gradient(to bottom, var(--mode) 0 var(--pos, 50%), var(--border-strong) var(--pos, 50%)); }
  .mv.is-transit .mv-lane.is-stacked .mv-end.dest::before { background: var(--card); border-color: var(--border-strong); }
  .mv[data-mode="pipeline"] { --mode: var(--edge-pipeline); }
  .mv[data-mode="rail"] { --mode: var(--edge-rail); }
  .mv[data-mode="truck"] { --mode: var(--edge-truck); }
  .mv[data-mode="vessel"], .mv[data-mode="barge"] { --mode: var(--edge-marine); }
  /* timings: loading and discharge, planned vs actual */
  .mv-times { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .mv-time { background: var(--secondary); border: 1px solid var(--border); border-radius: var(--r-control); padding: var(--sp-3); display: grid; grid-template-columns: 64px 1fr; align-content: start; gap: var(--sp-pair) var(--sp-3); font: 400 12px/16px var(--font-primary); }
  .mv-time h4 { grid-column: 1 / -1; margin: 0 0 var(--sp-pair); font: 500 12px/16px var(--font-primary); color: var(--foreground); display: flex; align-items: center; gap: var(--sp-icon); }
  .mv-time h4 .i { width: 12px; height: 12px; color: var(--subtle-foreground); }
  .mv-time .k { color: var(--muted-foreground); }
  .mv-time .v { color: var(--foreground); font-variant-numeric: tabular-nums; }
  .mv-time .v.is-pending { color: var(--subtle-foreground); }
  /* movement lifecycle states are named Badge states: each resolves to a tone, never a seventh colour */
  .op-badge.st-planned, .op-badge.st-nominated { --bd: var(--muted-foreground); }
  .op-badge.st-scheduled { --bd: var(--info); }
  .op-badge.st-in-transit { --bd: var(--info); }
  .op-badge.st-completed { --bd: var(--success); }
  .op-badge.st-actualised { --bd: var(--foreground); }
  /* compact row for lists */
  /* rows: every column but the two names has a fixed width, so rows line up without sharing a grid */
  .mv-list { display: block; }
  .mv-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 16px minmax(0, 1fr) 96px 104px; align-items: center; gap: 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--row-divider); font: 400 13px/18px var(--font-primary); color: var(--foreground); }
  .mv-row .op-badge { justify-self: start; }
  .mv-row.is-compact { grid-template-columns: 20px minmax(0, 1fr) 16px minmax(0, 1fr) 52px 84px; gap: 0 var(--sp-2); padding-left: 0; padding-right: 0; } /* inside a 380px detail card */
  .mv-row:last-child:not(op-movement-row > .mv-row), op-movement-row:last-child > .mv-row { border-bottom: 0; } /* the wrapper element is the sibling, so last-child is read on it */
  .mv-row > .i { color: var(--mode, var(--muted-foreground)); width: 20px; height: 20px; }
  .mv-row .arrow { position: relative; height: 16px; color: transparent; font-size: 0; }
  .mv-row .arrow::before { content: ""; position: absolute; left: 0; right: 4px; top: 7px; height: 2px; background: color-mix(in srgb, var(--mode, var(--muted-foreground)) 60%, transparent); }
  .mv-row .arrow::after { content: ""; position: absolute; right: 0; top: 5px; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--mode, var(--muted-foreground)); }
  .mv-row .end { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mv-row .when { font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .mv-row[data-mode="pipeline"] { --mode: var(--edge-pipeline); } .mv-row[data-mode="rail"] { --mode: var(--edge-rail); } .mv-row[data-mode="truck"] { --mode: var(--edge-truck); } .mv-row[data-mode="vessel"], .mv-row[data-mode="barge"] { --mode: var(--edge-marine); }
  @media (max-width: 639px) { .mv-times { grid-template-columns: 1fr; } }
  @container (max-width: 479px) {
    .mv-lane { grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: auto auto auto; position: relative; row-gap: var(--sp-2); }
    .mv-lane::before { content: ""; position: absolute; left: 9px; top: 17px; bottom: 17px; width: 2px; background: color-mix(in srgb, var(--mode) 60%, transparent); }
    .mv-lane > * { grid-column: 2; position: relative; }
    .mv-lane .mv-end.dest { justify-content: flex-start; }
    .mv-lane .mv-end::before { content: ""; position: absolute; left: calc(-1 * (20px + var(--sp-3)) + 5px); top: 7px; width: 10px; height: 10px; box-sizing: border-box; border-radius: var(--r-full); background: var(--card); border: 2px solid var(--mode); }
    .mv-lane .mv-end.dest::before { background: var(--mode); }
    .mv-lane .mv-mode { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--sp-icon); row-gap: 0; padding: var(--sp-1) 0; }
    .mv-lane .mv-mode-line { width: auto; height: 20px; background: none; }
    .mv-lane .mv-mode-line::before, .mv-lane .mv-mode-line::after { display: none; }
    .mv-lane .mv-mode-line .i { padding: 0; margin: 0; }
    .mv-lane .mv-mode .meta { flex-basis: 100%; }
    .mv.is-transit .mv-lane::before { background: linear-gradient(to bottom, var(--mode) 0 var(--pos, 50%), var(--border-strong) var(--pos, 50%)); }
    .mv.is-transit .mv-lane .mv-end.dest::before { background: var(--card); border-color: var(--border-strong); }
    .mv-times { grid-template-columns: 1fr; }
  }
  
  /* ── Alert: one exception the operator must see. Four kinds (data quality, constraint breach, anomaly, data refresh) on one anatomy;
     the icon carries severity (info / warning / error / success), the kind is a word. ── */
  .op-alert { --al: var(--info); display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--sp-pair) var(--sp-3); padding: var(--sp-3); background: color-mix(in srgb, var(--al) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--al) 30%, transparent); border-left: 3px solid var(--al); border-radius: var(--r-md); font: 400 13px/18px var(--font-primary); color: var(--foreground); }
  .op-alert > .i { grid-row: 1 / span 3; width: 20px; height: 20px; color: var(--al); margin-top: -1px; }
  .op-alert-title { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; font-weight: 500; }
  .op-alert-kind { font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); }
  .op-alert-body { grid-column: 2; color: var(--muted-foreground); }
  .op-alert-evidence { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-pair); font-variant-numeric: tabular-nums; font: 400 12px/16px var(--font-primary); color: var(--foreground); font-variant-numeric: tabular-nums; }
  .op-alert-evidence .bound { color: var(--muted-foreground); }
  .op-alert-evidence .delta { color: var(--al); }
  .op-alert-meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); font: 400 12px/16px var(--font-primary); color: var(--subtle-foreground); }
  .op-alert-actions { grid-column: 3; grid-row: 1 / span 3; display: flex; align-items: flex-start; gap: var(--sp-1); }
  .op-alert-info    { --al: var(--info); }
  .op-alert-warning { --al: var(--warning); }
  .op-alert-error   { --al: var(--destructive-foreground); }
  .op-alert-success { --al: var(--success); }
  .op-alert.is-acknowledged { --al: var(--subtle-foreground); background: var(--secondary); }
  .op-alert.is-acknowledged .op-alert-title { color: var(--muted-foreground); }
  .op-alert-stack { display: grid; gap: var(--sp-2); }
  @media (max-width: 639px) { .op-alert { grid-template-columns: 20px minmax(0, 1fr); } .op-alert-actions { grid-column: 2; grid-row: auto; margin-top: var(--sp-1); } }
  
  /* ── ExceptionList: the queue of open alerts. Every column but "what" is fixed, so rows line up: severity, kind, what, where, age, state ── */
  .op-exceptions { display: block; }
  .op-exception { display: grid; grid-template-columns: 16px 80px minmax(0, 1fr) 168px 48px 104px; gap: 0 var(--sp-3); align-items: center; min-height: 40px; padding: var(--sp-2) var(--sp-3); border: 0; border-bottom: 1px solid var(--row-divider); background: none; width: 100%; text-align: left; font: 400 13px/18px var(--font-primary); color: var(--foreground); cursor: pointer; transition: background-color var(--duration-default, 150ms) var(--ease-standard, ease); }
  .op-exception:hover { background: var(--muted); }
  .op-exception[aria-selected="true"] { background: var(--accent); }
  .op-exception > .i { color: var(--sev, var(--muted-foreground)); }
  .op-exception.sev-error { --sev: var(--destructive-foreground); }
  .op-exception.sev-warning { --sev: var(--warning); }
  .op-exception.sev-info { --sev: var(--info); }
  .op-exception .kind { font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); white-space: nowrap; }
  .op-exception .what { min-width: 0; display: flex; flex-direction: column; }
  .op-exception .what .msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .op-exception .what .ev { font: 400 12px/16px var(--font-primary); font-variant-numeric: tabular-nums; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .op-exception .where { display: flex; align-items: center; gap: var(--sp-icon); min-width: 0; }
  .op-exception .where .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted-foreground); }
  .op-exception .age { font: 400 12px/16px var(--font-primary); color: var(--subtle-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .op-exception .op-badge { justify-self: start; }
  .op-exception.is-done { color: var(--muted-foreground); }
  .op-exception.is-done > .i { color: var(--subtle-foreground); }
  .op-exceptions-head { display: grid; grid-template-columns: 16px 80px minmax(0, 1fr) 168px 48px 104px; gap: 0 var(--sp-3); padding: var(--sp-1) var(--sp-3); font: 500 12px/16px var(--font-primary); color: var(--muted-foreground); border-bottom: 1px solid var(--border); }
  .op-exceptions.is-compact .op-exception { grid-template-columns: 16px minmax(0, 1fr) 52px; gap: 0 var(--sp-2); padding: var(--sp-2) var(--sp-3); min-height: 36px; }
  .op-exceptions.is-compact .op-exception .what .ev { display: none; }
  /* alert lifecycle as Badge modifiers */
  .op-badge.al-open { --bd: var(--foreground); } /* the row's icon already carries severity; the state pill does not repeat it */
  .op-badge.al-acknowledged { --bd: var(--info); }
  .op-badge.al-snoozed { --bd: var(--muted-foreground); }
  .op-badge.al-resolved { --bd: var(--success); }
  /* a count on a nav or toolbar button (the same thing on the rail and the map toolbar) */
  .nr-badge, .mt-badge { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; background: var(--warning); color: var(--primary-foreground); font: 500 12px/16px var(--font-primary); font-variant-numeric: tabular-nums; text-align: center; border-radius: var(--r-full); padding: 0 var(--sp-1); pointer-events: none; box-sizing: border-box; }
  .nr-badge.is-error, .mt-badge.is-error { background: var(--destructive); color: var(--foreground); }
  
  /* ── Freshness: when the data was last true. fresh (within one cycle) · ageing (one to two) · stale (over two) · refreshing · failed ── */
  .op-fresh { display: inline-flex; align-items: center; gap: var(--sp-icon); font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); white-space: nowrap; }
  .op-fresh .dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--success); flex-shrink: 0; }
  .op-fresh time, .op-fresh .t { color: var(--secondary-foreground); font-variant-numeric: tabular-nums; }
  .op-fresh .src { color: var(--subtle-foreground); }
  .op-fresh.is-ageing .dot { background: var(--warning); }
  .op-fresh.is-stale .dot, .op-fresh.is-failed .dot { background: var(--destructive-foreground); }
  .op-fresh.is-stale, .op-fresh.is-failed { color: var(--foreground); }
  .op-fresh .op-spinner { width: 10px; height: 10px; border-width: 1.5px; color: var(--blue-muted); }
  .op-fresh .op-link-btn { font-size: 12px; }
  
  /* ── DataList flags: a value that is unverified, estimated, conflicting or anomalous says so beside itself ── */
  .op-dl dd .flag { display: inline-flex; align-items: center; gap: var(--sp-1); margin-left: var(--sp-2); font: 400 12px/16px var(--font-primary); color: var(--warning); vertical-align: baseline; white-space: nowrap; }
  .op-dl dd .flag .i { width: 12px; height: 12px; margin: 0; vertical-align: baseline; }
  .op-dl dd .flag.is-error { color: var(--destructive-foreground); }
  .op-dl dd .flag.is-info { color: var(--muted-foreground); }
  .op-dl dd .delta { margin-left: var(--sp-2); font: 400 12px/16px var(--font-primary); color: var(--warning); font-variant-numeric: tabular-nums; }
  .op-dl dd .delta.is-ok { color: var(--success); }
  .op-dl > .src { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); font: 400 12px/16px var(--font-primary); color: var(--subtle-foreground); }
  
  /* ── ProgressBar with a limit: the tick marks the limit, the fill turns warning near it and error past it ── */
  .op-bar-track.has-limit { position: relative; overflow: visible; }
  .op-bar-limit { position: absolute; top: -3px; width: 2px; height: 10px; background: var(--foreground); border-radius: var(--r-full); }
  .op-bar-fill.near { background: var(--warning); }
  .op-bar-fill.breach { background: var(--destructive); }
  
  /* ── Chart: the chrome around a plot, and the mark classes an SVG plot uses. Colour comes from series-*, seq-*, div-*
     and chart-* roles; marks are thin; text wears text tokens, never the series colour. ── */
  .op-chart { display: grid; grid-template-rows: auto 1fr auto; gap: var(--sp-3); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); min-width: 0; }
  .op-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
  .op-chart-title { margin: 0; font: 500 13px/18px var(--font-primary); color: var(--foreground); }
  .op-chart-title .unit { font-weight: 400; color: var(--muted-foreground); margin-left: var(--sp-icon); }
  .op-chart-head .op-fresh { margin-left: auto; }
  .op-chart-plot { position: relative; min-width: 0; }
  .op-chart-plot svg { display: block; width: 100%; height: auto; font-family: var(--font-primary); }
  .op-chart-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; font: 400 12px/16px var(--font-primary); color: var(--subtle-foreground); }
  .op-chart.is-refreshing .op-chart-plot { opacity: 0.6; transition: opacity var(--duration-moderate, 200ms) var(--ease-standard, ease); }
  .op-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-3); }
  .op-chart.is-full { grid-column: 1 / -1; }
  /* legend: always present for two or more series; a rect key for bars and areas, a line key for lines */
  .op-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); }
  .op-legend > span { display: inline-flex; align-items: center; gap: var(--sp-icon); }
  .op-legend .key { width: 12px; height: 12px; border-radius: 2px; background: var(--k, var(--muted-foreground)); flex-shrink: 0; }
  .op-legend .key.is-line { height: 2px; border-radius: var(--r-full); width: 14px; }
  .op-legend .key.is-limit { height: 1px; width: 14px; background: var(--chart-limit); }
  .op-legend .key.is-wash { background: color-mix(in srgb, var(--k, var(--series-1)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--k, var(--series-1)) 50%, transparent); }
  /* axes and grid */
  .ch-grid { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
  .ch-axis { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
  .ch-tick { font: 400 12px/1 var(--font-primary); fill: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  .ch-tick.is-y { text-anchor: end; }
  .ch-tick.is-x { text-anchor: middle; }
  .ch-label { font: 400 12px/1 var(--font-primary); fill: var(--muted-foreground); }
  .ch-value { font: 500 12px/1 var(--font-primary); fill: var(--foreground); font-variant-numeric: tabular-nums; }
  /* marks */
  .ch-line { fill: none; stroke: var(--k, var(--series-1)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .ch-line.is-plan { stroke: var(--series-other); stroke-width: 1.5; }
  .ch-line.is-forecast { stroke-dasharray: 4 3; }
  .ch-area { fill: var(--k, var(--series-1)); fill-opacity: 0.1; stroke: none; }
  .ch-area.is-stack { fill-opacity: 0.45; }
  .ch-bar { fill: var(--k, var(--series-1)); }
  .ch-bar.is-breach { fill: var(--chart-breach); }
  .ch-bar.is-near { fill: var(--warning); }
  .ch-dot { fill: var(--k, var(--series-1)); stroke: var(--card); stroke-width: 2; }
  .ch-dot.is-anomaly { fill: var(--warning); stroke: var(--card); }
  .ch-ring { fill: none; stroke: var(--warning); stroke-width: 2; }
  .ch-limit { stroke: var(--chart-limit); stroke-width: 1; shape-rendering: crispEdges; }
  .ch-breach { fill: var(--chart-breach); fill-opacity: 0.12; }
  .ch-today { stroke: var(--muted-foreground); stroke-width: 1; stroke-dasharray: 2 3; }
  .ch-crosshair { stroke: var(--chart-crosshair); stroke-width: 1; shape-rendering: crispEdges; }
  .ch-hit { fill: transparent; pointer-events: all; }
  /* tooltip: one readout, every series at that x; values lead, series follow; line keys not boxes */
  .ch-readout { position: absolute; pointer-events: none; background: var(--popover); border: 1px solid var(--border-strong); border-radius: var(--r-control); padding: var(--sp-1) var(--sp-2); font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); white-space: nowrap; }
  .ch-readout .when { color: var(--foreground); font-variant-numeric: tabular-nums; margin-bottom: var(--sp-pair); }
  .ch-readout .row { display: flex; align-items: center; gap: var(--sp-icon); }
  .ch-readout .row .key { width: 10px; height: 2px; border-radius: var(--r-full); background: var(--k, var(--series-1)); }
  .ch-readout .row .v { color: var(--foreground); font-weight: 500; font-variant-numeric: tabular-nums; margin-left: auto; padding-left: var(--sp-3); }
  /* filters: one row above the charts, date range first */
  .op-chart-filters { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
  .op-chart-filters .op-segmented { flex-shrink: 0; }
  .op-chart-filters .op-select { width: auto; min-width: 160px; } /* a filter Select is sized by its longest option, not the row */
  
  /* ── StatTile: one headline number, an optional delta against a named period, and a 12-point sparkline ── */
  .op-stat { display: grid; gap: var(--sp-pair); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); min-width: 0; }
  .op-stat-label { font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); }
  .op-stat-value { font: 600 24px/32px var(--font-primary); color: var(--foreground); letter-spacing: -0.2px; font-variant-numeric: tabular-nums; }
  .op-stat-value .unit { font: 400 13px/18px var(--font-primary); color: var(--muted-foreground); margin-left: var(--sp-icon); }
  .op-stat-delta { display: inline-flex; align-items: center; gap: var(--sp-1); font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  .op-stat-delta.is-up-good, .op-stat-delta.is-down-good { color: var(--success); }
  .op-stat-delta.is-up-bad, .op-stat-delta.is-down-bad { color: var(--warning); }
  .op-stat-delta .vs { color: var(--subtle-foreground); }
  .op-stat .op-spark { margin-top: var(--sp-1); }
  .op-stat.is-hero .op-stat-value { font-size: 48px; line-height: 56px; letter-spacing: -0.5px; }
  .op-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); }
  /* sparkline: the de-emphasis hue, the current period in the accent, no axes */
  .op-spark { display: block; width: 100%; height: 28px; }
  .op-spark .ch-line { stroke: var(--series-other); stroke-width: 1.5; }
  .op-spark .ch-area { fill: var(--series-other); fill-opacity: 0.1; }
  .op-spark .ch-dot { r: 3; fill: var(--series-selected); stroke-width: 1.5; }
  .op-spark .ch-limit { stroke: var(--chart-limit); stroke-opacity: 0.5; }
  
  /* ── MapLegend: the key to the map, and the layers it can switch ── */
  .op-map-legend { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); display: grid; gap: var(--sp-2); min-width: 200px; }
  .op-map-legend h4 { margin: 0; font: 500 12px/16px var(--font-primary); color: var(--muted-foreground); }
  .op-map-legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
  .op-map-legend li { display: flex; align-items: center; gap: var(--sp-2); min-height: 20px; color: var(--foreground); }
  .op-map-legend .sw { --k: var(--muted-foreground); width: 20px; height: 14px; border-radius: 3px; flex-shrink: 0; background: color-mix(in srgb, var(--k) 30%, transparent); border: 1.5px solid color-mix(in srgb, var(--k) 80%, transparent); }
  .op-map-legend .mk { --k: var(--muted-foreground); width: 20px; height: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
  .op-map-legend .mk::before { content: ""; width: 10px; height: 10px; border-radius: var(--r-full); background: var(--k); border: 2px solid var(--map-halo); box-sizing: content-box; }
  .op-map-legend .mk.is-select::before { border-color: var(--map-select); }
  .op-map-legend .mk.is-alert::before { border-color: var(--destructive-foreground); border-width: 3px; width: 8px; height: 8px; }
  .op-map-legend .mk.is-warn::before { border-color: var(--warning); border-width: 3px; width: 8px; height: 8px; }
  .op-map-legend .mk.is-station::before { width: 5px; height: 5px; border: 0; background: var(--map-station); }
  .op-map-legend .mk.is-cluster::before { width: 14px; height: 14px; border: 1.5px solid var(--border-strong); background: var(--map-cluster); }
  .op-map-legend .ed { --k: var(--muted-foreground); width: 20px; height: 14px; flex-shrink: 0; display: flex; align-items: center; }
  .op-map-legend .ed::before { content: ""; width: 100%; height: 2px; background: var(--k); border-radius: var(--r-full); }
  .op-map-legend .ed.is-thick::before { height: 4px; }
  .op-map-legend li .i { width: 14px; height: 14px; color: var(--muted-foreground); }
  .op-map-legend .ly { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
  .op-map-legend .ly .op-switch { min-height: 24px; }
  .op-map-legend .ly .op-switch input { width: 26px; height: 14px; }
  .op-map-legend .ly .op-switch input::before { width: 10px; height: 10px; }
  .op-map-legend .ly .op-switch input:checked::before { transform: translateX(12px); }
  .op-map-legend .op-fresh { margin-top: var(--sp-1); }
  .op-range { accent-color: var(--primary); height: 16px; margin: 0; } /* the basemap Dim slider and any other range: the native control in the brand accent */
  /* pattern-page map primitives (the static stand-in for MapLibre layers) */
  .pt-map .marker.is-select { border-color: var(--map-select); }
  .pt-map .poly.is-select { opacity: 0.5; outline: 2px solid var(--map-select); outline-offset: 0; border-radius: inherit; }
  
  /* ── DataList: label/value pairs, the one way to lay out a record's fields (dc-kv-grid is its alias in the app) ── */
  .op-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); margin: 0; }
  .op-dl.is-1 { grid-template-columns: minmax(0, 1fr); }
  .op-dl.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .op-dl > div { display: flex; flex-direction: column; gap: var(--sp-pair); min-width: 0; }
  .op-dl > div.is-wide { grid-column: 1 / -1; }
  .op-dl dt { font: 400 12px/16px var(--font-primary); color: var(--muted-foreground); }
  .op-dl dd { margin: 0; font: 500 13px/18px var(--font-primary); color: var(--foreground); overflow-wrap: anywhere; }
  .op-dl dd.is-id { font: 400 13px/18px var(--font-mono); color: var(--blue-muted); }
  .op-dl dd.is-num { font-variant-numeric: tabular-nums; }
  .op-dl dd.is-empty { color: var(--subtle-foreground); font-weight: 400; }
  .op-dl dd.is-success { color: var(--success); }
  .op-dl dd.is-warning { color: var(--warning); }
  .op-dl dd.is-error { color: var(--destructive-foreground); }
  .op-dl .unit { font-size: 12px; font-weight: 400; color: var(--subtle-foreground); margin-left: var(--sp-pair); }
  .op-dl dd .i { vertical-align: -3px; margin-right: var(--sp-1); }
  /* rows: one pair per line, label left, value right; a hairline between repeats (timings, totals, a settings summary) */
  .op-dl.is-rows { display: block; }
  .op-dl.is-rows > div { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--row-divider); }
  .op-dl.is-rows > div:last-child { border-bottom: 0; }
  .op-dl.is-rows dd { text-align: right; }
  /* well: the list is one object among other content (a file summary, a totals block) */
  .op-dl.is-well { background: var(--secondary); border: 1px solid var(--border); border-radius: var(--r-control); padding: var(--sp-3); }
  .op-dl.is-rows.is-well > div:first-child { padding-top: 0; }
  .op-dl.is-rows.is-well > div:last-child { padding-bottom: 0; }
  @media (max-width: 639px) { .op-dl, .op-dl.is-3 { grid-template-columns: minmax(0, 1fr); } }
  
  /* ── Pattern pages: layout scaffolding only (the map is a placeholder) ── */
  .pt-app { position: relative; display: flex; height: 100%; min-height: 560px; background: var(--background); overflow: hidden; font-family: var(--font-primary); }
  .pt-map { position: absolute; inset: 0; background: var(--map-water); background-image: radial-gradient(ellipse 40% 50% at 60% 55%, var(--map-land) 0 60%, transparent 61%), radial-gradient(ellipse 25% 30% at 82% 25%, var(--map-land) 0 60%, transparent 61%); }
  .pt-map .poly { position: absolute; border-radius: 40% 60% 55% 45%; opacity: 0.35; }
  .pt-map .marker { position: absolute; width: 10px; height: 10px; border-radius: var(--r-full); border: 2px solid var(--background); }
  .pt-map .edge { position: absolute; height: 2px; transform-origin: left center; opacity: 0.7; }
  .pt-layer { position: relative; z-index: 1; }
  .side-panel { width: 280px; flex-shrink: 0; background: var(--card); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
  .sp-header { padding: var(--sp-3) var(--sp-4) var(--sp-2); border-bottom: 1px solid var(--border); display: grid; gap: var(--sp-2); }
  .sp-scroll { flex: 1; overflow-y: auto; padding: 0 0 var(--sp-3); }
  .pt-floating { position: absolute; }
  .pt-modal-stage { position: relative; min-height: 640px; background: var(--background); background-image: linear-gradient(var(--scrim), var(--scrim)); display: flex; align-items: flex-start; justify-content: center; padding: var(--sp-6) var(--sp-5); }
  .pt-modal { width: 100%; }
  .rq-body { display: flex; min-height: 420px; }
  .rq-list { width: 420px; flex-shrink: 0; overflow-y: auto; padding: var(--sp-3) var(--sp-4); border-right: 1px solid var(--border); }
  .rq-map { flex: 1; position: relative; background: var(--map-water); }
  .up-mapping-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-2) var(--sp-3); align-items: center; }
  .up-map-col { font: 400 12px/16px var(--font-mono); color: var(--foreground); padding: var(--sp-2) var(--sp-3); min-height: 36px; box-sizing: border-box; display: flex; align-items: center; background: var(--secondary); border-radius: var(--r-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 2px solid transparent; }
  .up-map-col.is-matched { border-left-color: var(--success); }
  .up-map-col.is-skipped { border-left-color: var(--border-strong); color: var(--muted-foreground); }
  .up-map-arrow { color: var(--subtle-foreground); text-align: center; }
  .preview-table { width: 100%; border-collapse: collapse; font: 400 12px/16px var(--font-mono); }
  .preview-table th { text-align: left; padding: var(--sp-1) var(--sp-2); color: var(--muted-foreground); font-family: var(--font-primary); font-weight: 500; border-bottom: 1px solid var(--border); white-space: nowrap; }
  .preview-table td { padding: var(--sp-1) var(--sp-2); color: var(--secondary-foreground); border-bottom: 1px solid var(--row-divider); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}