/* RaceIntake-v2 base and shell components (UI_PLAN.md §3). Colours and sizes come only from
   tokens.css (var(--…)); this file holds no colour literal. T13 adds the table, tiles,
   segmented, chip and panel classes below these. */

/* Base */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.45; color: var(--text); background: var(--bg-page); }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.mono { font-family: var(--font-mono); }
.icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 10; padding: 8px 12px; border-radius: var(--r-control); background: var(--bg-card); color: var(--text); }
.skip-link:focus { top: 12px; }

/* AppShell + Sidebar */
.app { display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; flex: 0 0 var(--w-sidebar); width: var(--w-sidebar); height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 20px 12px; background: var(--sidebar-bg); color: var(--sidebar-text); }
.sidebar :focus-visible { outline-color: var(--sidebar-icon-active); }
.brand { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; margin-bottom: 18px; color: var(--sidebar-text-active); font-size: 16px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; }
.brand:hover { color: var(--sidebar-text-active); }
.brand .icon { width: 22px; height: 22px; color: var(--sidebar-icon-active); }
.nav-section { margin: 22px 12px 8px; font-size: var(--fs-small); font-weight: 500; color: var(--sidebar-heading); }
.nav-link { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: var(--r-control); color: var(--sidebar-text); font-size: var(--fs-body); text-decoration: none; }
.nav-link:hover { color: var(--sidebar-text-active); background: var(--sidebar-active); }
.nav-link .icon { color: var(--sidebar-heading); }
.nav-link[aria-current] { background: var(--sidebar-active); color: var(--sidebar-text-active); font-weight: 500; }
.nav-link[aria-current] .icon { color: var(--sidebar-icon-active); }
.nav-badge { margin-left: auto; padding: 1px 8px; border-radius: var(--r-pill); background: var(--sidebar-divider); color: var(--sidebar-badge-text); font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 400; }
.nav-badge--warn { background: var(--sidebar-badge-warn-bg); color: var(--sidebar-badge-warn-text); }

/* ServicesPanel: data-state = checking | unknown | ok | busy | warn | error (set by ri.js) */
.services { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; border: 1px solid var(--sidebar-divider); border-radius: var(--r-inner); font-size: var(--fs-small); }
.services__title { margin: 0; font-size: var(--fs-small); font-weight: 500; color: var(--sidebar-heading); }
.svc { display: flex; align-items: center; gap: 8px; color: var(--svc-text); text-decoration: none; }
.svc:hover { color: var(--sidebar-text-active); }
.svc__dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--sidebar-heading); }
.svc__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc__text { margin-left: auto; color: var(--svc-text-dim); white-space: nowrap; }
.svc[data-state="ok"] .svc__dot { background: var(--svc-dot-ok); }
.svc[data-state="busy"] .svc__dot { background: var(--svc-dot-busy); }
.svc[data-state="warn"], .svc[data-state="warn"] .svc__text { color: var(--svc-text-warn); }
.svc[data-state="warn"] .svc__dot { background: var(--svc-dot-warn); }
.svc[data-state="error"], .svc[data-state="error"] .svc__text { color: var(--svc-text-error); }
.svc[data-state="error"] .svc__dot { background: var(--svc-dot-error); }

/* Page area + PageHeader */
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-section); padding: var(--pad-top) var(--pad-x) 32px; }
.main:focus { outline: none; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-header__titles { display: flex; flex-direction: column; gap: 6px; }
.page-header__tools { display: flex; align-items: center; gap: 12px; }
.page-header h1 { margin: 0; font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.01em; }
.eyebrow { font-size: var(--fs-meta); color: var(--text-secondary); }
.back-link { font-size: var(--fs-body); font-weight: 500; text-decoration: none; }
.page-root { display: flex; flex-direction: column; gap: var(--gap-section); }
.empty-state { margin: 0; padding: 32px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-card); color: var(--text-secondary); text-align: center; }

/* Card, Notice */
.card { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-card); }
.notice { margin: 0; padding: 12px 16px; border: 1px solid var(--info-border); border-radius: var(--r-card); background: var(--info-bg); color: var(--info-text); font-size: var(--fs-meta); }
.notice--warn { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-text); }
.notice--error { border-color: var(--error-border); background: var(--error-bg); color: var(--error-text); }
.notice--ok { border-color: var(--pill-accepted-bg); background: var(--pill-accepted-bg); color: var(--ok-text); }

/* Button: one .btn--primary per view */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h-control); padding: 0 16px; border: 1px solid var(--border-control); border-radius: var(--r-control); background: var(--bg-card); color: var(--text); font-size: var(--fs-body); font-weight: 500; text-decoration: none; cursor: pointer; }
.btn:disabled { cursor: not-allowed; opacity: 0.55; }
.btn--primary { border-color: var(--accent); background: var(--accent); color: var(--bg-card); }
.btn--primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: var(--bg-card); }
.btn--info { border-color: var(--info-control-border); background: var(--info-bg); color: var(--info-strong); }
.btn--link { height: auto; padding: 0; border: 0; background: none; color: var(--accent); }
.btn--icon { width: 32px; height: 32px; padding: 0; }
.btn--table { height: var(--h-control-table); }

/* Field */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: var(--fs-meta); color: var(--text-secondary); }
.field input, .field select, .field textarea { height: var(--h-control); padding: 0 12px; border: 1px solid var(--border-control); border-radius: var(--r-control); background: var(--bg-card); color: var(--text); font-size: var(--fs-body); }
.field textarea { height: auto; padding: 8px 12px; }

/* StatusPill (the eight ui_status values) + PipelineTrack segments */
.pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 500; white-space: nowrap; }
.pill--loaded { background: var(--pill-loaded-bg); color: var(--pill-loaded-fg); }
.pill--building { background: var(--pill-building-bg); color: var(--pill-building-fg); }
.pill--built { background: var(--pill-built-bg); color: var(--pill-built-fg); }
.pill--needs_review { background: var(--pill-needs_review-bg); color: var(--pill-needs_review-fg); }
.pill--sending { background: var(--pill-sending-bg); color: var(--pill-sending-fg); }
.pill--retrying { background: var(--pill-retrying-bg); color: var(--pill-retrying-fg); }
.pill--accepted { background: var(--pill-accepted-bg); color: var(--pill-accepted-fg); }
.pill--rejected { background: var(--pill-rejected-bg); color: var(--pill-rejected-fg); }
.track { display: inline-flex; gap: 3px; }
.track__seg { width: 20px; height: 6px; border-radius: 3px; background: var(--track-todo); }
.track__seg--done { background: var(--track-done); }
.track__seg--active { background: var(--track-active); }
.track__seg--warn { background: var(--track-warn); }
.track__seg--fail { background: var(--track-fail); }

/* ReasonBox (RI.reasonBox) */
.reason-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reason-box input { flex: 1 1 12rem; height: var(--h-control-table); padding: 0 12px; border: 1px solid var(--border-control); border-radius: var(--r-control); background: var(--bg-card); }
.reason-box__msg { font-size: var(--fs-small); color: var(--error-text); }

/* Login */
.login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 20px; }
.login__brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: var(--fs-panel-title); font-weight: 600; }
.login__brand .icon { width: 22px; height: 22px; color: var(--accent); }
.login__card { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-card); }
.login__title { margin: 0; font-size: var(--fs-panel-title); font-weight: 600; }
.login__card .btn { width: 100%; }

/* ---- T13: RI.ui / RI.panels components. T11's rules above already style .mono .btn* .field .notice*
   .pill--* and .track__seg--*; these add the rest. var(--…) only: every colour lives in tokens.css. ---- */
.why, .field-hint { font-size: var(--fs-small); color: var(--text-secondary); }

.status { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.pill-sub { max-width: 100%; font-size: var(--fs-tiny); color: var(--text-secondary); overflow-wrap: anywhere; }  /* wraps, never cut */

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--r-chip);
        background: var(--bg-chip); font-size: var(--fs-small); color: var(--text); white-space: nowrap; }
.chip--rule { font-family: var(--font-mono); }
.chip--template { background: var(--bg-card); border: 1px solid var(--border-control); }
.chip--accent { background: var(--bg-card); border: 1.5px solid var(--accent); }
.chip--dashed, .chip--pending { border: 1px dashed var(--border-control); background: var(--bg-card); color: var(--text-muted); }
.chip--ok, .chip--step { background: var(--pill-loaded-bg); color: var(--pill-loaded-fg); }
.chip--done { background: var(--pill-accepted-bg); color: var(--pill-accepted-fg); }
.chip--miss, .chip--warn, .chip--no_template { background: var(--warn-bg); color: var(--warn-text); }
.chip--no_match { background: var(--pill-needs_review-bg); color: var(--pill-needs_review-fg); }
.chip--edited, .chip--by_hand, .chip--info { background: var(--info-bg); color: var(--info-text); }
.chip--skip, .chip--skipped, .chip--muted { background: var(--bg-group); color: var(--text-muted); }

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

.field--edited select, .field--edited input { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }
.field--missing select, .field--missing input { background: var(--warn-control-bg); border-color: var(--warn-border); }
.field--accent select, .field--accent input { border: 1.5px solid var(--accent); }

.notice-title { font-size: var(--fs-body); font-weight: 500; }
.notice-text { font-size: var(--fs-meta); }
.notice-actions { display: flex; gap: 8px; margin-top: 4px; }
.notice--warn .notice-title { color: var(--warn-text); }
.notice--error .notice-title { color: var(--error-text); }

.tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 84px; padding: 14px 16px;
        border-radius: var(--r-card); border: 1.5px solid var(--border); background: var(--bg-subtle);
        font: inherit; text-align: left; cursor: pointer; }
.tile[aria-pressed="true"] { border-color: var(--accent); background: var(--bg-card); }
.tile-label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--text-strong-secondary); }
.tile-count { font-size: 28px; font-weight: 500; line-height: 1; color: var(--text); }
.tile[aria-pressed="true"] .tile-count { color: var(--accent); }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot--all { background: var(--tile-dot-all); }
.dot--loaded { background: var(--tile-dot-loaded); }
.dot--built { background: var(--tile-dot-built); }
.dot--dispatching { background: var(--tile-dot-dispatching); }
.dot--accepted { background: var(--tile-dot-accepted); }
.dot--review { background: var(--tile-dot-review); }
.dot--rejected { background: var(--tile-dot-rejected); }

.segmented { display: inline-flex; border: 1px solid var(--border-control); border-radius: var(--r-control); overflow: hidden; }
/* Load.dc.html / Build.dc.html: 500 weight, a 1 px divider between segments, the count in the label's font */
.segmented-btn { height: var(--h-control); padding: 0 16px; border: 0; border-right: 1px solid var(--border-control);
                 background: var(--bg-card); font: inherit; font-size: var(--fs-body); font-weight: 500; color: var(--text);
                 cursor: pointer; }
.segmented-btn:last-child { border-right: 0; }
.segmented-btn[aria-pressed="true"] { background: var(--segmented-active-bg); color: var(--bg-card); }
.segmented-btn[aria-pressed="true"] .seg-count { color: var(--segmented-active-count); }

/* The table's geometry (column widths, the gaps and row padding as cell padding-left/right) is set by RI.ui.table
   through CSSOM from the page's mockup grid; these rules never set a horizontal padding or a column width. */
.dt { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-body); }
.dt thead th { position: sticky; top: 0; height: var(--h-thead); padding-block: 0; background: var(--bg-subtle);
               border-bottom: 1px solid var(--border); font-size: var(--fs-small); font-weight: 400;
               color: var(--text-secondary); text-align: left; white-space: nowrap; }
.dt td { height: var(--h-row); padding-block: 0; border-bottom: 1px solid var(--border-row); vertical-align: middle;
         overflow: hidden; text-overflow: ellipsis; }
.dt .num { text-align: right; }
.dt .select { text-align: center; }
/* The mockups' checkboxes: 18 px, accent; the select-all box sits on its header text's line ("Build") */
.dt input[type="checkbox"] { width: 18px; height: 18px; margin: 0; vertical-align: middle; accent-color: var(--accent); }
.dt .select-head { margin-left: 6px; }
.dt td .chip { max-width: 100%; white-space: normal; }       /* a long chip wraps inside its cell, never under the next */
.dt tr.group th { height: var(--h-group); padding-block: 0; background: var(--bg-group); border-bottom: 1px solid var(--border);
                  font-size: var(--fs-meta); font-weight: 400; text-align: left; }
.dt tr.row.is-selected td { background: var(--accent-tint); }
.dt tr.row.is-selected td:first-child { box-shadow: inset 1.5px 0 0 var(--accent); }
.dt .row-btn { all: unset; display: block; width: 100%; cursor: pointer; }
.dt .row-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dt tr.note td { height: auto; padding-block: 8px; font-size: var(--fs-meta); box-shadow: inset 3px 0 0 var(--border-control); }
.dt tr.note--info td { box-shadow: inset 3px 0 0 var(--info-border); color: var(--info-text); }
.dt tr.note--busy td { box-shadow: inset 3px 0 0 var(--info-border); color: var(--info-text); }
.dt tr.note--busy .note-text::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px;
  vertical-align: -1px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dt tr.note--busy .note-text::before { animation-duration: 2.4s; } }
.dt tr.note--warn td { box-shadow: inset 3px 0 0 var(--warn-border); color: var(--warn-text); }
.dt tr.note--error td { box-shadow: inset 3px 0 0 var(--error-border); color: var(--error-text); background: var(--error-row-tint); }
.dt .note-actions { display: inline-flex; gap: 8px; margin-left: 12px; }
.dt tr.note .why { margin-left: 12px; }
.dt tr.empty td { height: 96px; text-align: center; color: var(--text-secondary); }
.dt .skeleton-bar { display: block; height: 12px; border-radius: 6px; background: var(--bg-group); }

.dp { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--r-card); }
.dp-empty { margin: 0; padding: 20px; color: var(--text-secondary); font-size: var(--fs-body); }
.dp-head { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 16px; border-bottom: 1px solid var(--border-row); }
.dp-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px;
           font-size: var(--fs-small); color: var(--text-secondary); }
.dp-head h2 { margin: 0; font-size: var(--fs-panel-title); font-weight: 600; }
.dp-sub { font-size: var(--fs-body); color: var(--text-strong-secondary); }
.keyblock { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px 12px; margin: 0; padding: 16px 20px;
            border-bottom: 1px solid var(--border-row); font-size: var(--fs-meta); }
.keyblock dt { color: var(--text-secondary); }
.keyblock dd { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0; }
.kb-note { font-size: var(--fs-small); color: var(--text-muted); }
.kb-edited { color: var(--info-text); }
.errcard { display: flex; flex-direction: column; gap: 8px; margin: 16px 20px 0; padding: 14px 16px;
           border-radius: var(--r-inner); border: 1px solid var(--warn-border); background: var(--warn-bg); }
.errcard--error { border-color: var(--error-border); background: var(--error-bg); }
.errcard-head { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-small); font-weight: 500;
                color: var(--warn-text); }
.errcard-code { font-size: var(--fs-body); font-weight: 500; color: var(--warn-text); }
.errcard--error .errcard-head, .errcard--error .errcard-code { color: var(--error-text); }
.errcard-msg { font-size: var(--fs-body); line-height: 1.45; }
.errcard-field { font-size: var(--fs-small); color: var(--text-strong-secondary); }
.errcard-hint { padding-top: 8px; border-top: 1px solid var(--warn-border); font-size: var(--fs-meta); line-height: 1.45;
                color: var(--text-strong-secondary); }
.errcard--error .errcard-hint { border-top-color: var(--error-border); }
.errcard-pre { max-height: 18em; margin: 0; overflow: auto; font-size: var(--fs-small); white-space: pre-wrap; }
.errcard-more, .errcard-note { font-size: var(--fs-small); color: var(--text-secondary); }
.dp-io { padding: 16px 20px 4px; border-bottom: 1px solid var(--border-row); }
.dp-io h3 { margin: 0 0 8px; font-size: var(--fs-small); font-weight: 400; color: var(--text-secondary); }
.io { margin: 0 0 10px; font-size: var(--fs-meta); }
.io summary { cursor: pointer; color: var(--text-strong-secondary); }
.io-pre { max-height: 24em; margin: 6px 0 0; padding: 8px 10px; overflow: auto; font-size: var(--fs-small);
          white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg-subtle); border: 1px solid var(--border-row);
          border-radius: var(--r-inner); }
.io-issues { margin: 6px 0 0; padding-left: 18px; font-size: var(--fs-small); color: var(--warn-text); }
.io-link { display: inline-block; margin-top: 6px; font-size: var(--fs-small); color: var(--accent); }
.dp-timeline { padding: 16px 20px 4px; }
.dp-timeline h3 { margin: 0 0 12px; font-size: var(--fs-small); font-weight: 400; color: var(--text-secondary); }
.timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.tl { display: grid; grid-template-columns: 14px minmax(0, 1fr) 44px; column-gap: 12px; padding-bottom: 14px; }
.tl-dot { width: 12px; height: 12px; margin-top: 4px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--track-done);
          background: var(--track-done); }
.tl--active .tl-dot { border-color: var(--track-active); background: var(--track-active); }
.tl--warn .tl-dot { border-color: var(--track-warn); background: var(--track-warn); }
.tl--fail .tl-dot { border-color: var(--track-fail); background: var(--track-fail); }
.tl--todo .tl-dot { border-color: var(--timeline-todo-ring); background: var(--bg-card); }
.tl-text { display: flex; flex-direction: column; gap: 2px; }
.tl-label { font-size: var(--fs-body); }
.tl--todo .tl-label { color: var(--text-muted); }
.tl-detail { font-size: var(--fs-small); color: var(--text-muted); }
.tl-time { font-size: var(--fs-small); color: var(--text-secondary); text-align: right; }
.actionbar { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px 20px; border-top: 1px solid var(--border-row); }
.ab-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ab-logs { margin-left: auto; font-weight: 500; text-decoration: none; }
.ab-result:empty { display: none; }
.ab-result { font-size: var(--fs-meta); }
.ab-result[role="alert"] { color: var(--error-text); }

/* ---- Day board (T14): layout only; cards, buttons, pills, tracks and tables come from the shell and the UI kit ---- */
.db-daynav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }  /* + the titles' 6 px = the mockup's 8 */
.db-chev { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.db-day { font-size: 15px; font-weight: 500; }
.db-summary { font-size: var(--fs-body); color: var(--text-secondary); white-space: nowrap; }
.db-label { font-size: var(--fs-meta); color: var(--text-secondary); }
.db-control { height: var(--h-control); padding: 0 12px; border: 1px solid var(--border-control); border-radius: var(--r-control); background: var(--bg-card); color: var(--text); font-size: var(--fs-body); }
.db-search { width: 180px; box-sizing: border-box; }
.db-updated { font-size: var(--fs-small); color: var(--text-secondary); white-space: nowrap; }
.db-updated.is-stale { color: var(--warn-text); }
.db-body { display: flex; gap: var(--gap-section); align-items: flex-start; min-height: 0; }
.db-races { flex: 1 1 auto; min-width: 0; overflow: clip; }
.db-races .is-skipped { color: var(--text-muted); }
.db-panel { width: var(--w-panel); flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; position: sticky; top: var(--pad-top); max-height: calc(100vh - 2 * var(--pad-top)); overflow: auto; }
.db-empty { margin: 0; padding: 20px; font-size: var(--fs-body); color: var(--text-secondary); }
.db-group { display: flex; align-items: center; gap: 10px; font-size: var(--fs-meta); }
.db-group__meeting { font-weight: 600; color: var(--text); white-space: nowrap; }
.db-group__meta { color: var(--text-secondary); white-space: nowrap; }
.db-group__tpl { margin-left: auto; }
.db-group__count { min-width: 52px; text-align: right; font-size: var(--fs-small); color: var(--text-secondary); }
.db-doc { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.db-doc__name, .db-doc__pre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-doc__fmt { color: var(--text-muted); }
.db-doc__pre { font-size: var(--fs-small); color: var(--text-secondary); }
.db-doc__pre.is-unset { color: var(--warn-text); }
.db-at { font-size: var(--fs-small); color: var(--text-secondary); }
@media (max-width: 1279px) {
  .db-body { flex-direction: column; align-items: stretch; }
  .db-panel { width: auto; position: static; max-height: none; }
}

/* ---- Load (T15): layout only; cards, fields, buttons, pills, chips and tables come from the shell and the UI kit ---- */
.ld-pane { display: flex; flex-direction: column; gap: var(--gap-section); }
.ld-tz { font-size: var(--fs-meta); color: var(--text-secondary); }
.ld-settings { display: flex; flex-direction: column; gap: 18px; padding: 20px 24px; }
.ld-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.5fr) auto; gap: 16px; align-items: end; }
.ld-note { margin: 0; font-size: var(--fs-meta); color: var(--text-secondary); }
.ld-note:empty { display: none; }
.ld-preview { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border-row); }
.ld-preview__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ld-preview__title { font-size: var(--fs-body); font-weight: 500; }
/* Load.dc.html's preview is a plain grid: no header band, no row rules, 8 px between rows, values 13 px (mono 12) */
.ld-preview .dt thead th { position: static; height: auto; padding-block: 0 4px; background: none; border-bottom: 0; }
.ld-preview .dt td { height: auto; padding-block: 4px; border-bottom: 0; font-size: var(--fs-meta); }
.ld-preview .dt td.mono { font-size: var(--fs-small); }
.ld-step { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: var(--r-chip); background: var(--text); color: var(--bg-card); font-size: var(--fs-small); }
.ld-results { overflow: clip; }
.ld-results__head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.ld-results__title { font-size: var(--fs-card-title); font-weight: 600; }
.ld-results__meta { font-size: var(--fs-body); color: var(--text-secondary); }
.ld-loaded { margin-left: auto; }
.ld-empty { margin: 0; padding: 20px; font-size: var(--fs-body); color: var(--text-secondary); }
.ld-results .is-muted { background: var(--bg-subtle); color: var(--text-muted); }
.ld-meeting { font-weight: 500; }
.ld-day { font-weight: 400; color: var(--text-muted); }
.ld-docs { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.ld-match { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-meta); }
.ld-match--ok { color: var(--ok-text); }
.ld-match--warn { color: var(--warn-text); }
.ld-match--muted { color: var(--text-muted); }
.ld-match__trx { font-size: var(--fs-small); color: var(--text-muted); }
.ld-trx { color: var(--text-muted); }
.ld-trx.is-on { color: var(--ok-text, inherit); font-weight: 600; }
.ld-footer { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 20px; background: var(--bg-subtle); }
.ld-footer__sum { font-size: var(--fs-body); font-weight: 500; }
.ld-footer__warn { font-size: var(--fs-meta); color: var(--warn-text); }
.ld-footer__note, .ld-footer__why { font-size: var(--fs-meta); color: var(--text-secondary); }
.ld-footer__why { margin-left: auto; }

/* ---- Build, P1 read-only (T16): layout only; cards, fields, chips and tables come from the shell and the UI kit ---- */
.bd-updated { font-size: var(--fs-small); color: var(--text-secondary); }
.bd-updated.is-stale { color: var(--warn-text); }
.bd-context { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px; }
.bd-context__text { display: flex; flex-direction: column; gap: 4px; }
.bd-context__title { font-size: var(--fs-card-title); font-weight: 600; }
.bd-context__meta, .bd-context__label { font-size: var(--fs-meta); color: var(--text-secondary); }
.bd-context__tpl { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.bd-table { overflow: clip; }
.bd-table .is-pinned { box-shadow: inset 3px 0 0 var(--accent); }
.bd-table .is-skipped { color: var(--text-muted); }
.bd-meeting { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bd-meeting__name { font-weight: 500; }
.bd-file { font-size: var(--fs-tiny); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-empty { margin: 0; padding: 20px; font-size: var(--fs-body); color: var(--text-secondary); }
.bd-footer { padding: 14px 20px; background: var(--bg-subtle); font-size: var(--fs-meta); color: var(--text-secondary); }

/* Build: in-row edit controls; Prompts page */
.bd-select { width: 100%; max-width: 100%; font: inherit; font-size: 12px; }
.bd-warn { color: var(--warn-text); }
.bd-muted { color: var(--text-muted); }
.bd-link { font-size: 12px; }
.bd-footer { display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
.pr-card { padding: 20px 24px; }
.pr-card .card__title { margin: 0 0 12px; font-size: 16px; }
.pr-list { display: grid; gap: 6px; }
.pr-row .row-btn { text-align: left; width: 100%; }
.pr-editor { display: grid; gap: 12px; margin-top: 16px; }
.pr-name, .pr-text { width: 100%; font: inherit; }
.pr-text { font-family: var(--font-mono); font-size: 12px; }
.pr-hint { color: var(--text-muted); font-size: 12px; margin: 0; }
.pr-actions { display: flex; gap: 12px; align-items: center; }
.bd-key { display: flex; gap: 6px; align-items: baseline; min-width: 0; font-size: var(--fs-tiny); }
.bd-key .btn { font-size: var(--fs-tiny); padding: 0; }
.bd-panel { padding: 16px 20px; gap: 10px; width: min(760px, calc(100vw - 32px)); border: 1px solid var(--border); }
.bd-panel[open] { display: grid; }
.bd-panel::backdrop { background: var(--backdrop); }
.bd-drawer { margin: 0 0 0 auto; padding: 0; width: min(560px, 100vw); max-width: 100vw; height: 100vh;
             max-height: 100vh; border: none; border-left: 1px solid var(--border); background: var(--bg-page); }
.bd-drawer[open] { display: flex; flex-direction: column; }
.bd-drawer::backdrop { background: var(--backdrop); }
.bd-drawer__head { display: flex; justify-content: flex-end; padding: 8px 12px; }
.bd-drawer .dp { margin: 0 12px 12px; }
.bd-panel__head { display: flex; justify-content: space-between; align-items: center; }
.bd-panel__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bd-races { display: grid; gap: 4px; max-height: 320px; overflow: auto; }
.bd-race { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.bd-footer { flex-wrap: wrap; }
.bd-bulk { display: flex; gap: 8px; align-items: center; margin-right: auto; flex-wrap: wrap; }
.bd-bulk .bd-select { width: auto; max-width: 200px; }
.bd-bulk__label { font-size: 12px; color: var(--text-muted); }

/* Manual upload (Load) and Dispatch (PIPELINE_DESIGN, 2026-10-02) */
.ld-upform { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.5fr) minmax(0, 0.5fr) minmax(0, 1fr) minmax(0, 1.1fr) auto; }
.ld-uplist { margin: 6px 0 10px; padding-left: 18px; font-size: var(--fs-meta); }
.dp-banner { margin-bottom: var(--gap-section); }
.dx-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dx-reason:empty { display: none; }
.dx-reason { margin-right: auto; }
.io-url { margin-top: 6px; font-size: var(--fs-small); color: var(--text-secondary); overflow-wrap: anywhere; }
@media (max-width: 1279px) { .ld-upform { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* How to use (/help): the operator guide */
.guide { display: flex; flex-direction: column; gap: var(--gap-section); max-width: 880px; }
.guide-sec { padding: 20px 24px; font-size: var(--fs-body); line-height: 1.55; }
.guide-sec h2 { margin: 0 0 8px; font-size: var(--fs-card-title); font-weight: 600; }
.guide-sec h2 a { color: inherit; text-decoration: none; }
.guide-sec h2 a:hover { color: var(--accent); }
.guide-sec h3 { margin: 16px 0 4px; font-size: var(--fs-body); font-weight: 600; color: var(--text-strong-secondary); }
.guide-sec p { margin: 0 0 8px; }
.guide-sec ul, .guide-sec ol { margin: 0; padding-left: 20px; }
.guide-sec li + li { margin-top: 4px; }
.guide-sec li > ul { margin-top: 4px; }
.guide-sec b { font-weight: 600; }
.guide-flow li::marker { color: var(--accent); font-weight: 600; }
.guide-note { margin: 12px 0 0; color: var(--text-secondary); }

/* ---- Dark theme components (navy redesign, 2026-10-02): colour, shadow and weight only, never geometry ---- */
.sidebar { box-shadow: inset -1px 0 0 var(--sidebar-divider); }
.nav-link[aria-current] { box-shadow: inset 2px 0 0 var(--sidebar-icon-active); }
.card, .dp, .empty-state { box-shadow: inset 0 1px 0 var(--edge-hi), 0 1px 3px var(--shadow); }
.btn:not(.btn--primary):not(.btn--link):not(.btn--info) { background: var(--bg-raised); }
.btn:not(.btn--primary):not(.btn--link):not(.btn--info):not(:disabled):hover { background: var(--row-hover); border-color: var(--border-control-hover); }

/* Stage tiles: a status rail and dot; the pressed tile takes its status colour (zero-count alarms stay calm) */
.tile { background: var(--bg-card); box-shadow: inset 0 2px 0 var(--tile-c); }
.tile:hover { background: var(--row-hover); }
.tile[aria-pressed="true"] { border-color: var(--tile-c); box-shadow: inset 0 2px 0 var(--tile-c), 0 0 0 3px var(--tile-r);
                             background: linear-gradient(180deg, var(--tile-t), transparent 80%), var(--bg-card); }
.tile[aria-pressed="true"] .tile-label { color: var(--tile-c); font-weight: 500; }
.tile[aria-pressed="true"] .tile-count { color: var(--tile-c); }
.tile--all { --tile-c: var(--accent); --tile-t: var(--status-all-bg); --tile-r: var(--accent-tint); }
.tile--loaded { --tile-c: var(--status-loaded); --tile-t: var(--status-loaded-bg); --tile-r: var(--status-loaded-tint); }
.tile--built { --tile-c: var(--status-built); --tile-t: var(--status-built-bg); --tile-r: var(--status-built-tint); }
.tile--dispatching { --tile-c: var(--status-building); --tile-t: var(--status-building-bg); --tile-r: var(--status-building-tint); }
.tile--accepted { --tile-c: var(--status-accepted); --tile-t: var(--status-accepted-bg); --tile-r: var(--status-accepted-tint); }
.tile--review { --tile-c: var(--status-review); --tile-t: var(--status-review-bg); --tile-r: var(--status-review-tint); }
.tile--rejected { --tile-c: var(--status-rejected); --tile-t: var(--status-rejected-bg); --tile-r: var(--status-rejected-tint); }

/* Pills: tinted fill + a 1px ring in the status hue */
.pill { box-shadow: inset 0 0 0 1px var(--pill-ring); }
.pill--loaded { --pill-ring: var(--status-loaded-tint); }
.pill--building, .pill--sending { --pill-ring: var(--status-building-tint); }
.pill--built { --pill-ring: var(--status-built-tint); }
.pill--needs_review, .pill--retrying { --pill-ring: var(--status-review-tint); }
.pill--accepted { --pill-ring: var(--status-accepted-tint); }
.pill--rejected { --pill-ring: var(--status-rejected-tint); }

/* Segmented: quiet inactive, accent-tinted active with an underline (not a near-white block) */
.segmented-btn { background: var(--bg-raised); color: var(--text-secondary); }
.segmented-btn:hover { background: var(--row-hover); color: var(--text); }
.segmented-btn[aria-pressed="true"] { background: var(--segmented-active-surface); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.segmented-btn[aria-pressed="true"] .seg-count { color: var(--accent-hover); }

/* Tables: recessed header band, lifted meeting band, quiet hover; repeated warnings readable, not shouty */
.dt thead th { color: var(--text-secondary); font-weight: 500; }
.dt tr.group th { box-shadow: inset 0 1px 0 var(--border); }
.dt tbody tr.row:not(.is-selected):hover td { background: var(--row-hover); }
.dt tr.note--warn td { background: linear-gradient(90deg, var(--status-review-bg), transparent 55%); color: var(--warn-note-text); }
.chip--no_template { background: var(--status-review-bg); color: var(--warn-note-text); }
.db-doc__pre.is-unset { color: var(--warn-note-text); }

/* Controls: dark wells, never OS-grey */
.bd-select, .db-control, .field input, .field select, .field textarea, .reason-box input, .pr-name, .pr-text {
  background-color: var(--bg-control); border-color: var(--border-control); color: var(--text); }
.bd-select { border-radius: var(--r-chip); }
.bd-select:hover, .db-control:hover, .field input:hover, .field select:hover { border-color: var(--border-control-hover); }
.field--edited select, .field--edited input { background-color: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }
.field--missing select, .field--missing input { background-color: var(--warn-control-bg); border-color: var(--warn-border); }
.field--accent select, .field--accent input { border-color: var(--accent); }
.pr-row .row-btn { padding: 8px 12px; border: 1px solid var(--border-row); border-radius: var(--r-control); background: var(--bg-subtle);
                   color: var(--text); cursor: pointer; }
.pr-row .row-btn:hover { background: var(--row-hover); border-color: var(--border-control); }