/* ============================================================================
   redesign:web-F3 — shared component layer ("the kit").
   Loaded AFTER styles.css (tokens, fonts, themes, shell live there). Everything
   here is built from the --c-* tokens + legacy aliases, so a theme change
   (Day / Dusk / Night, live) re-colours every rule below with no JS. No hex
   literals: scripts/kit_test.js fails if one appears in this file.

   CONTENTS
     0  kit tokens + the six-state custom-property classes (.sev-*)
     1  blueprint frame (.blueprint + corner marks; CSS-only marks on .card)
     2  type primitives (kicker, headline, sub-line, section label)
     3  buttons (.btn family)
     4  inputs / forms / segmented strip (.seg) / tags / chips
     5  cards, notice / state bands / empty, toast, dialog, popover (Why?)
     6  six-state chip, banner, matrix cell, headline square
     7  tables (.table skin) + createDataTable tiers (stack / grid / table),
        compliance row, status + why columns, filter idiom, binding band
     8  board primitives: ladder / station / currency rows, needs-you card,
        hours-basis plate, timeline, people plate, A-Z list, provenance +
        advisory footers, commit tray rows
   RULES THE CSS ENCODES
     - radius 0 on every blueprint object; 1px hairline; 3px edge accents
     - caution as TEXT is --c-caution, never --c-caution-fill (2.2:1 at Day)
     - the WORD of "not tracked" / "no data" is ink-2; the dashed glyph keeps
       the --c-nottracked colour (outline only, never text)
     - controls whose only affordance is a border use --c-line-control (>=3:1)
     - web type floor: 11px for UPPERCASE tracked labels/chips only, 12px for
       everything else
     - nothing animates beyond 180ms ease-out; nothing flashes or pulses
   ============================================================================ */

:root {
  --kit-hit: 44px;                 /* invisible touch target around 30/34px visuals */
  --z-modal: 10000;                /* above every legacy overlay (<= 9999) */
  --z-popover: 10010;
  --z-toast: 10100;                /* toasts sit above modals (an error raised while a dialog is open must be visible) */
  --btn-h: 34px;
  --btn-h-sm: 30px;
  --btn-h-lg: 40px;
  --btn-h-xl: 48px;
  --c-corner: color-mix(in srgb, var(--c-ink) 55%, transparent);
  --c-hover-accent: color-mix(in srgb, var(--c-accent) 10%, transparent);
  --c-pressed-accent: color-mix(in srgb, var(--c-accent) 18%, transparent);
  --kit-trans: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

/* ---- 0. Six-state custom-property classes. Put one on any element and the
   kit components inside read --sev (fill / edge), --sev-text (text on the page
   ground), --sev-on (text printed ON the fill). Resolved per element, so a
   theme switch recolours live. "No data" is never a colour: --c-unknown is
   ink-2. "Not tracked": outline + glyph in --c-nottracked, WORD in ink-2. */
.sev-blocking    { --sev: var(--c-blocking);     --sev-text: var(--c-blocking); --sev-on: var(--c-on-blocking); }
.sev-caution     { --sev: var(--c-caution-fill); --sev-text: var(--c-caution);  --sev-on: var(--c-on-caution); }
.sev-advisory    { --sev: var(--c-advisory);     --sev-text: var(--c-advisory); --sev-on: var(--c-on-advisory); }
.sev-satisfied   { --sev: var(--c-satisfied);    --sev-text: var(--c-satisfied); --sev-on: var(--c-on-satisfied); }
.sev-notAnswered { --sev: var(--c-unknown);      --sev-text: var(--c-unknown);  --sev-on: var(--c-bg); }
.sev-notTracked  { --sev: var(--c-nottracked);   --sev-text: var(--c-ink-2);    --sev-on: var(--c-bg); }
.sev-text { color: var(--sev-text); }

/* ---- 1. Blueprint frame. `<div class="blueprint"><i class="corner tl"></i>…`
   (helper: bpFrame()). Marks are 11px @ 55% ink, offset -6px, drawn outside the
   box — so a frame that scrolls puts its scroller INSIDE (.bp-scroll): marks on
   an overflow:auto element would be clipped. */
.blueprint { position: relative; border: 1px solid var(--c-line); border-radius: 0; }
.blueprint > .corner { position: absolute; width: 11px; height: 11px; color: var(--c-corner); pointer-events: none; }
.blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }
.bp-scroll { overflow: auto; max-width: 100%; }
.bp-pad { padding: 12px 14px; }
/* CSS-only marks for legacy markup (384 `class="card"` literals) and `.bp-css`:
   eight 1px/11px gradient strokes on one pseudo-element — no extra DOM. */
.card::after, .bp-css::after {
  content: ""; position: absolute; inset: -6px; pointer-events: none; color: var(--c-corner);
  background-repeat: no-repeat;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px;
  background-position: left 5px top 0, left 0 top 5px, right 5px top 0, right 0 top 5px,
    left 5px bottom 0, left 0 bottom 5px, right 5px bottom 0, right 0 bottom 5px;
}
.blueprint::after, .card.nomarks::after, .bp-css.nomarks::after { content: none; }
.bp-css { position: relative; border: 1px solid var(--c-line); border-radius: 0; }

/* ---- 2. Type primitives (handoff "Board grammar") */
.kicker { font: 600 12px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); }
.hl { font: 600 44px/1.05 var(--font-heading); margin: 6px 0 4px; color: var(--c-ink); text-wrap: balance; letter-spacing: 0; }
.hl.hl-screen { font-size: 40px; line-height: 1; margin: 6px 0 0; }
.hl .hl-q { color: var(--c-ink-2); font-weight: 400; }
.hl .hl-sum { font-size: 18px; font-weight: 400; color: var(--c-ink-2); }
.hl-sq { display: inline-grid; place-items: center; width: 38px; height: 38px; background: var(--sev); color: var(--sev-on); vertical-align: -6px; margin-right: 10px; box-sizing: border-box; }
.hl-sq.sev-notAnswered { background: transparent; color: var(--sev-text); border: 2px solid var(--sev); }
.hl-sq.sev-notTracked  { background: transparent; color: var(--sev-text); border: 2px dashed var(--sev); }
.hl-sq.sev-notTracked svg { color: var(--c-nottracked); }
.hl-sq svg { display: block; }
.sub-line { font-size: 13px; color: var(--c-ink-2); margin: 0; }
.sub-line a { color: var(--c-accent-ink); }
.sec-label { font: 600 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-2); margin: 0; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.sec-head .sec-note { font-size: 12px; color: var(--c-ink-3); }
.board-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.board-head > .bh-main { min-width: 0; flex: 1 1 360px; }
.board-head > .bh-aside { flex: 0 1 auto; max-width: 100%; min-width: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* redesign:web-integrator — may shrink and wrap (a wide action row overflowed a 390px page) */
@media (max-width: 767.98px) {
  .hl { font-size: 30px; }
  .hl.hl-screen { font-size: 28px; }
  .hl-sq { width: 28px; height: 28px; vertical-align: -4px; margin-right: 8px; }
  .hl-sq svg { width: 18px; height: 18px; }
}

/* ---- 3. Buttons. 34px visible (30px .sm/.xs/.small, 40px .lg, 48px .xl) with
   an invisible >=44px touch target (::before) so ground use stays reachable
   without making dense rows taller. `.btn` is the SECONDARY button (hairline
   control border). Legacy names kept: .primary .danger .xs .small .role-request
   .role-unavailable; handoff names added: .btn-primary .btn-secondary
   .btn-ghost .btn-icon .btn-block. */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--btn-h); padding: 5px 14px; box-sizing: border-box;
  font: 600 14px/1.2 var(--font-heading); letter-spacing: .02em; text-align: center;
  color: var(--c-ink); background: transparent; border: 1px solid var(--c-line-control); border-radius: 0;
  cursor: pointer; text-decoration: none; vertical-align: middle;
  transition: var(--kit-trans);
}
.btn::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--kit-hit)); height: var(--kit-hit);
  transform: translate(-50%, -50%);
}
.btn svg { display: block; flex: 0 0 auto; }
a.btn:hover { text-decoration: none; }
.btn:hover { background: var(--c-hover-btn); }
.btn:active { background: var(--c-pressed); }
.btn.primary, .btn-primary { background: var(--c-accent-solid); color: var(--c-on-accent); border-color: var(--c-accent-solid); }
.btn.primary:hover, .btn-primary:hover { background: color-mix(in srgb, var(--c-accent-solid) 88%, var(--c-ink)); }
.btn.primary:active, .btn-primary:active { background: color-mix(in srgb, var(--c-accent-solid) 76%, var(--c-ink)); }
.btn-secondary { /* explicit alias of the default */ }
.btn.ghost, .btn-ghost { color: var(--c-accent-ink); border-color: transparent; padding-inline: 8px; }
.btn.nowrap, .btn.xs, .btn.small, .btn.sm, .btn.icon { white-space: nowrap; }
.btn.ghost:hover, .btn-ghost:hover { background: var(--c-hover-accent); }
.btn.ghost:active, .btn-ghost:active { background: var(--c-pressed-accent); }
.btn.danger { color: var(--c-blocking); border-color: var(--c-blocking); }
.btn.danger:hover { background: color-mix(in srgb, var(--c-blocking) 8%, transparent); }
.btn.danger:active { background: color-mix(in srgb, var(--c-blocking) 16%, transparent); }
.btn.danger.primary { background: var(--c-blocking); color: var(--c-on-blocking); }
.btn.danger.primary:hover { background: color-mix(in srgb, var(--c-blocking) 88%, var(--c-ink)); }
.btn.xs, .btn.small, .btn.sm { min-height: var(--btn-h-sm); padding: 3px 10px; font-size: 13px; }
.btn.lg { min-height: var(--btn-h-lg); padding: 6px 18px; font-size: 16px; }
.btn.xl { min-height: var(--btn-h-xl); padding: 4px 18px; font-size: 16px; flex-direction: column; gap: 0; line-height: 1.1; }
.btn.xl .btn-sub { font: 400 12px/1.2 var(--font-body); opacity: .85; letter-spacing: 0; }
.btn.icon, .btn-icon { width: var(--btn-h); padding: 0; }
.btn.icon.sm, .btn.icon.xs, .btn.icon.small { width: var(--btn-h-sm); }
.btn.block, .btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; }
.btn.primary:disabled:hover, .btn-primary:disabled:hover { background: var(--c-accent-solid); }
/* Stage 17a role-resolver states (public/roles.js): "request" stays clickable but
   reads as caution-text; "unavailable" is disabled (above) + dashed border. */
.btn.role-request { border-color: var(--c-caution); color: var(--c-caution); }
.btn.role-unavailable { border-style: dashed; }
/* a <select class="btn xs"> has no ::before — give it the floor directly */
select.btn.xs, select.btn.small, select.btn.sm { min-height: var(--kit-hit); }
.ck-actions { display: inline-flex; gap: 5px; flex-wrap: nowrap; align-items: center; }
.sel-xs { font-size: 13px; padding: 2px 6px; max-width: 130px; height: auto; min-height: 30px; }

/* ---- 4. Forms. Bare element selectors (438 inputs / 123 selects / 35
   textareas are unclassed). Checkbox / radio / range / file / color keep their
   native box. The base rule lives in :where() — specificity 0 — so ANY class rule
   (the shell's .search-input, a page's own sizing) overrides it without a fight. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
select, textarea) {
  width: 100%; min-height: 36px; padding: 6px 10px; box-sizing: border-box; border-radius: 0;
  font: inherit; font-size: 14px; color: var(--c-ink); caret-color: var(--c-accent);
  background: var(--c-surface); border: 1px solid var(--c-line-control);
  transition: var(--kit-trans);
}
:where(textarea) { min-height: 90px; resize: vertical; }
:where(input, select, textarea):hover { border-color: var(--c-ink-2); }
:where(input, select, textarea):focus-visible { border-color: var(--c-accent); outline: 2px solid var(--c-accent); outline-offset: 0; }
:where(input, textarea)::placeholder { color: var(--c-ink-2); opacity: 1; }
:where(input, select, textarea):disabled { opacity: .55; cursor: not-allowed; }
:where(input[type="checkbox"], input[type="radio"]) { width: 16px; height: 16px; margin: 0 6px 0 0; padding: 0; accent-color: var(--c-accent-solid); vertical-align: -3px; flex: 0 0 auto; }
:where(input[type="file"]) { width: auto; max-width: 100%; font: inherit; font-size: 13px; color: var(--c-ink); }
:where(input[type="range"]) { width: 100%; accent-color: var(--c-accent-solid); }
:where(label) { font-size: 12px; color: var(--c-ink-2); display: block; margin: 0 0 6px; }
:where(label) > :where(input[type="checkbox"], input[type="radio"]) { display: inline-block; }
.field { margin-bottom: 14px; }
.field > label { margin-bottom: 5px; }
.field-hint { font-size: 12px; color: var(--c-ink-3); margin-top: 4px; }
.field-error { font-size: 12px; color: var(--c-blocking); margin-top: 4px; }
.field-error::before { content: "\2715  "; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--c-blocking); }
/* Rich-text editor + emoji picker (admin banners): blueprint controls, not rounded boxes. */
.rt-btn { width: 30px; height: 30px; border-radius: 0; border: 1px solid var(--c-line-control); background: var(--c-surface); color: var(--c-ink); cursor: pointer; font-size: 13px; }
.rt-btn:hover { border-color: var(--c-accent); }
.richtext-editor { border-radius: 0; border: 1px solid var(--c-line-control); background: var(--c-surface); }
.richtext-editor:focus { outline: 2px solid var(--c-accent); border-color: var(--c-accent); }
.richtext-editor a { color: var(--c-accent-ink); }
.emoji-picker { border-radius: 0; border: 1px solid var(--c-line); background: var(--c-surface); }
.emoji-opt { border-radius: 0; }
.emoji-opt:hover { background: var(--c-hover-btn); }
/* Admin collapsible tree + modal (acd-*): the hover wash and the modal take the tokens / blueprint look. */
.acd-toggle { border-radius: 0; }
.acd-toggle:hover { background: var(--c-hover-row); }
.acd-modal { background: var(--c-backdrop); }
.acd-modal-box { border-radius: 0; background: var(--c-bg); border: 1px solid var(--c-line); box-shadow: var(--shadow-lg); }

/* Segmented strip: 36px hairline cells, accent-solid active cell. The scroller
   is the OUTER .seg-wrap so the 44px hit area (::before) is not clipped. */
.seg-wrap { display: block; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 4px 0; margin: 0 0 10px; scrollbar-width: thin; }
.seg { display: inline-flex; flex-wrap: nowrap; border: 1px solid var(--c-line-control); border-radius: 0; background: transparent; vertical-align: middle; }
.seg > .seg-opt, .seg > button, .seg > a {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px; margin: 0; border: 0; border-left: 1px solid var(--c-line-control); border-radius: 0;
  background: transparent; color: var(--c-ink-2); cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 600 13px/1 var(--font-heading); letter-spacing: .08em; text-transform: uppercase;
  transition: var(--kit-trans);
}
.seg > :first-child { border-left: 0; }
.seg > .seg-opt::before, .seg > button::before, .seg > a::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--kit-hit); transform: translateY(-50%); }
.seg > .seg-opt:hover:not(.active):not([aria-selected="true"]), .seg > button:hover:not(.active):not([aria-selected="true"]), .seg > a:hover:not(.active):not([aria-current]) {
  background: var(--c-hover-btn); color: var(--c-ink); text-decoration: none;
}
.seg > .active, .seg > [aria-selected="true"], .seg > [aria-current] { background: var(--c-accent-solid); color: var(--c-on-accent); }
.seg > .gated { border-left-style: dashed; color: var(--c-ink-3); }
.seg > :disabled { opacity: .45; cursor: not-allowed; }
.seg.sz-34 > .seg-opt, .seg.sz-34 > button, .seg.sz-34 > a { height: 34px; font-size: 12px; padding: 0 12px; }
.seg .seg-count { font-weight: 400; opacity: .85; letter-spacing: 0; }
.seg-right { display: flex; justify-content: flex-end; }

/* Tags / chips (neutral labels — NOT severity; use .sev-chip for state). The
   login screen's `.tag` tagline is a different thing, so the base rule hangs
   off the .tag-* modifiers, never bare `.tag`. */
.chip, .tag-neutral, .tag-accent, .tag-outline, .mode-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; box-sizing: border-box;
  font: 600 11px/1 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--c-ink-2); background: transparent; border: 1px solid var(--c-line-control); border-radius: 0; vertical-align: middle;
}
.tag-neutral { background: var(--c-surface); border-color: var(--c-line); color: var(--c-ink); }
.tag-accent { background: var(--c-accent-tint); border-color: var(--c-line); color: var(--c-accent-ink); }
.tag-outline { border-color: var(--c-accent); color: var(--c-accent-ink); }
.mode-chip { height: 30px; padding: 0 10px; border-color: var(--c-line); }
.chip.info { color: var(--c-accent-ink); border-color: var(--c-accent); }
.chip.medium, .chip.high { color: var(--c-caution); border-color: var(--c-caution); }
.chip.critical { color: var(--c-blocking); border-color: var(--c-blocking); background: color-mix(in srgb, var(--c-blocking) 8%, transparent); }
.chip.role { color: var(--c-ink-2); }
/* Keyword-alert pills — a tinted fill per severity (TranscriptRow alert strip). */
.chip.alert-chip.info { background: color-mix(in srgb, var(--c-ink-2) 12%, transparent); border-color: var(--c-line-control); color: var(--c-ink-2); }
/* redesign:web-integrator — caution TEXT on its own 16-22% caution tint was 4.17:1 (Day) / 4.33:1 (Dusk): the word is ink, the level stays in the border + tint */
.chip.alert-chip.medium { background: color-mix(in srgb, var(--c-caution-fill) 16%, transparent); color: var(--c-ink); }
.chip.alert-chip.high { background: color-mix(in srgb, var(--c-caution-fill) 22%, transparent); color: var(--c-ink); }
.chip.alert-chip.critical { background: color-mix(in srgb, var(--c-blocking) 16%, transparent); }
.badge-cat { display: inline-block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-2); }
.pill { display: inline-block; padding: 2px 8px; border-radius: 0; font-size: 12px; font-weight: 600; }
.fc { display: inline-block; padding: 2px 8px; border-radius: 0; font-weight: 700; font-size: 12px; }
.fc.VFR { background: var(--fc-vfr-bg); color: var(--fc-vfr-text); }
.fc.MVFR { background: var(--fc-mvfr-bg); color: var(--fc-mvfr-text); }
.fc.IFR { background: var(--fc-ifr-bg); color: var(--fc-ifr-text); }
.fc.LIFR { background: var(--fc-lifr-bg); color: var(--fc-lifr-text); }
/* Hover/focus tooltip (never hover-only: reachable by keyboard focus). Computed
   values use Why? instead; this is for glossary-style hints. */
.tip { position: relative; cursor: help; border-bottom: 1px dotted var(--c-ink-3); }
.tip[data-tip]:hover::after, .tip[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: var(--z-popover);
  width: max-content; max-width: 260px; padding: 6px 10px; font: 400 12px/1.4 var(--font-body); text-transform: none; letter-spacing: 0;
  color: var(--c-ink); background: var(--c-bg); border: 1px solid var(--c-line); box-shadow: var(--shadow-md); white-space: normal;
}

/* ---- 5. Cards, notice / state bands, toast, dialog, popover */
.card {
  position: relative; background: transparent; border: 1px solid var(--c-line); border-radius: 0; padding: 18px;
}
.card h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: 0; }
.card .meta { color: var(--c-ink-2); font-size: 13px; }
.card.link { cursor: pointer; transition: var(--kit-trans); }
.card.link:hover { border-color: var(--c-accent); }
.card.link:active { background: var(--c-hover-row); }
.card.link:focus-visible { outline-offset: 4px; }
.card.surface { background: var(--c-surface); }
/* Neutral capability band (capabilityBand): a capability BOUNDARY, never a
   severity colour — accent tint + accent edge only. */
.notice {
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px; padding: 10px 14px; font-size: 13px; color: var(--c-ink);
  background: var(--c-accent-tint); border: 1px solid var(--c-line); border-left: 3px solid var(--c-accent); border-radius: 0;
}
.notice svg { flex: 0 0 auto; margin-top: 1px; color: var(--c-accent-ink); }
/* State bands: loading / empty / couldn't-load (INCOMPLETE) / error / stale. A
   failed fetch is NEVER rendered as an empty-green state: .state-band.incomplete
   is the NO DATA vocabulary (dashed square) with Retry. */
.state-band {
  display: flex; align-items: flex-start; gap: 10px 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px;
  color: var(--c-ink); font-size: 13px; background: transparent; border: 1px solid var(--c-line); border-left: 3px solid var(--sev, var(--c-line-control)); border-radius: 0;
}
.state-band .sb-main { flex: 1 1 220px; min-width: 0; }
.state-band .sb-title { font: 600 16px/1.25 var(--font-heading); }
.state-band .sb-msg { font-size: 13px; color: var(--c-ink-2); margin-top: 2px; overflow-wrap: anywhere; }
.state-band .sb-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.state-band.loading { border-left-color: var(--c-accent); }
.state-band.empty { border-style: dashed; border-left-style: dashed; justify-content: center; text-align: center; padding: 28px 18px; color: var(--c-ink-2); }
.state-band.empty .sb-main { flex: 0 1 520px; }
.state-band.empty .sb-actions { margin: 6px 0 0; flex-basis: 100%; justify-content: center; }
.empty { color: var(--c-ink-2); padding: 30px; text-align: center; border: 1px dashed var(--c-line-control); border-radius: 0; }
.divider { height: 1px; background: var(--c-line); margin: 18px 0; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; font-size: 14px; }
.kv .k { color: var(--c-ink-2); }
/* Inline error band shown next to a failed button (withBusy / showInlineError). */
.inline-error { margin: 8px 0 0; }

/* Toast — above modals; stacks; role=status (polite) / role=alert (errors). */
.toast-host {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end; max-width: min(420px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  pointer-events: auto; position: static; background: var(--c-surface); color: var(--c-ink);
  border: 1px solid var(--c-line-control); border-left: 3px solid var(--c-accent); padding: 10px 14px; font-size: 14px; border-radius: 0;
  box-shadow: var(--shadow-md); animation: kit-fade-in var(--dur-1) var(--ease-out);
}
.toast.error { border-left-color: var(--c-blocking); }
@keyframes kit-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 767.98px) { .toast-host { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); right: 12px; } }

/* Dialog: 560px blueprint card on a per-theme backdrop. */
.kit-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 16px; overflow: auto;
  background: var(--c-backdrop);
}
.kit-backdrop.top { align-items: start; padding-top: 60px; }
.kit-dialog {
  position: relative; display: flex; flex-direction: column; width: min(560px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  padding: 18px; box-sizing: border-box; background: var(--c-bg); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: 0; box-shadow: var(--shadow-lg);
}
.kit-dialog.sz-sm { width: min(440px, 100%); }
.kit-dialog.sz-lg { width: min(720px, 100%); }
.kit-dialog:focus { outline: none; }
.kit-dialog .kd-kicker { font: 600 12px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); }
.kit-dialog .kd-title { margin: 4px 0 12px; font: 600 26px/1.15 var(--font-heading); letter-spacing: 0; }
.kit-dialog.sz-sm .kd-title { font-size: 22px; }
.kit-dialog .kd-body { overflow: auto; overscroll-behavior: contain; font-size: 14px; min-height: 0; flex: 1 1 auto; }
.kit-dialog .kd-body p { margin: 0 0 10px; }
.kit-dialog .kd-msg { white-space: pre-wrap; overflow-wrap: anywhere; }
.kit-dialog .kd-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 16px; }
.kit-dialog.danger { border-top: 3px solid var(--c-blocking); }
html.kit-modal-open { overflow: hidden; }

/* redesign:web-integrator — whyLinkHtml() is an inline <button> that reads as a link (text token, underlined); the delegated handler opens the popover. */
.why-link { all: unset; box-sizing: border-box; cursor: pointer; font: inherit; color: var(--c-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.why-link:hover { text-decoration-thickness: 2px; }
.why-link:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
/* "Why?" popover (one shared handler, kit.js openWhy). */
.why-pop {
  position: fixed; z-index: var(--z-popover); width: min(380px, calc(100vw - 24px)); max-height: min(70vh, 520px); overflow: auto; box-sizing: border-box;
  padding: 12px 14px; background: var(--c-bg); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: 0; box-shadow: var(--shadow-lg);
}
.why-pop:focus { outline: none; }
.why-pop .wp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.why-pop .wp-kicker { font: 600 11px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); }
.why-pop .wp-title { font: 600 19px/1.15 var(--font-heading); margin: 2px 0 0; }
.why-pop .wp-value { margin-top: 6px; }
.why-pop .wp-sec { margin-top: 12px; }
.why-pop .wp-sec > .sec-label { margin-bottom: 4px; font-size: 12px; }
.why-pop .wp-rule { font-size: 13px; }
.why-pop .wp-cite { font-size: 12px; color: var(--c-ink-2); }
.why-pop dl { display: grid; grid-template-columns: minmax(80px, auto) 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.why-pop dt { color: var(--c-ink-2); }
.why-pop dd { margin: 0; overflow-wrap: anywhere; }
.why-pop .wp-fresh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.why-pop .wp-note { margin-top: 10px; padding: 8px 10px; font-size: 12px; background: var(--c-accent-tint); }
.why-pop .wp-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }
@media (max-width: 599.98px) {
  .why-pop { left: 12px !important; right: 12px; width: auto; top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-height: 60vh; }
}

/* Legacy overlays (media viewer, admin modal) take the blueprint look. */
.media-ov { position: fixed; inset: 0; background: var(--c-backdrop); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px; }
.media-box { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 0; width: min(1000px, 96vw); height: min(90vh, 900px); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-lg); }
.media-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--c-line); }
.media-name { font-size: 13px; color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-body { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; background: var(--c-surface); }
.media-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
.media-body iframe { width: 100%; height: 100%; border: 0; }

/* Upload field (uploadFieldHtml). */
.upload-prog { height: 8px; background: var(--c-line); border-radius: 0; overflow: hidden; }
.upload-prog > div { height: 100%; width: 0; background: var(--c-accent); transition: width var(--dur-1) var(--ease-out); }

/* ---- 6. Six-state chip / banner / matrix cell.
   <span class="chip sev-chip sev-caution"><svg class="sev-glyph">…</svg>CAUTION</span>
   Class-based: no render-time hex, so a theme switch recolours live. */
.sev-chip { color: var(--sev-on); background: var(--sev); border: 1px solid transparent; }
.sev-chip.sev-notAnswered { color: var(--sev-text); background: transparent; border: 1px solid var(--sev); }
.sev-chip.sev-notTracked { color: var(--sev-text); background: transparent; border: 1px dashed var(--sev); }
.sev-chip.sev-notTracked .sev-glyph { color: var(--c-nottracked); }
.sev-chip .sev-glyph { flex: 0 0 auto; display: block; margin: 0; }
.sev-glyph { vertical-align: -2px; margin-right: 4px; }
.sev-chip.sz-22 { height: 22px; }
.sev-chip.sz-26 { height: 26px; }
.sev-chip.sz-28 { height: 28px; font-size: 12px; }
.sev-chip.sz-34 { height: 34px; padding: 0 12px; font-size: 16px; letter-spacing: .1em; }
.sev-chip.sz-44 { height: 44px; padding: 0 16px; font-size: 20px; letter-spacing: .06em; gap: 8px; }
button.sev-chip { cursor: pointer; font-family: var(--font-heading); }
button.sev-chip::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--kit-hit); transform: translateY(-50%); }
button.sev-chip { position: relative; }
/* Banner (severityBanner): chip + text on a hairline frame with a 3px severity edge. */
.sev-banner {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 10px; padding: 10px 14px; box-sizing: border-box;
  font-size: 13px; color: var(--c-ink); background: color-mix(in srgb, var(--sev) 6%, var(--c-bg));
  border: 1px solid var(--c-line); border-left: 3px solid var(--sev); border-radius: 0;
}
.sev-banner.sev-notTracked { border-left-style: dashed; }
.sev-banner .bn-text { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.sev-banner .bn-sub { display: block; font-size: 12px; color: var(--c-ink-2); }
/* Matrix glyph cell: 26px; fill states solid, no-data outline, not-tracked dashed. */
.sev-cell {
  display: inline-grid; place-items: center; width: 26px; height: 26px; box-sizing: border-box; vertical-align: middle;
  color: var(--sev-on); background: var(--sev); border: 1px solid transparent; border-radius: 0;
}
.sev-cell.sev-notAnswered { color: var(--sev-text); background: transparent; border: 1px solid var(--sev); }
.sev-cell.sev-notTracked { color: var(--sev-text); background: transparent; border: 1px dashed var(--sev); }
.sev-cell.sev-notTracked svg { color: var(--c-nottracked); }
.sev-cell svg { display: block; }
.sev-dot { display: inline-block; width: 8px; height: 8px; background: var(--sev); vertical-align: middle; }
.sev-dot.sev-notAnswered, .sev-dot.sev-notTracked { background: transparent; border: 1px solid var(--sev); box-sizing: border-box; }

/* ---- 7. Tables. `.table` is the handoff skin; the bare element selectors give
   the same look to the ~100 hand-built <table>s. No zebra. */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 6.8px 10px; border-bottom: 1px solid var(--c-line-2); }
th {
  color: var(--c-ink-2); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  border-bottom-color: var(--c-line);
}
tbody tr:hover td { background: var(--c-hover-row); }
.table { font-size: 14px; }

/* createDataTable renderer: the CONTAINER decides, never the device.
   Stack < 520 · Grid 520-899 · Table >= 900 (same constants as iOS). */
.datatable-wrap { container-type: inline-size; container-name: table; max-width: 100%; }
/* the TABLE scrolls in .dt-scroll; the band, toolbar and frame corner marks around it never clip */
.dt-scroll { overflow-x: auto; max-width: 100%; }
.dt-scroll.dt-scroll-y { overflow-y: auto; }
#secpanels_list .dt-scroll { overflow-x: visible; }
.datatable-wrap .dt-collapse-chip { display: none; }
/* Toolbar (filter idiom, facets, search, scope note, mode chip). */
.dt-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.dt-toolbar .seg { flex: 0 0 auto; }
.dt-toolbar .seg-wrap { margin: 0; padding: 0; overflow: visible; }
.dt-toolbar input[type="search"], .dt-toolbar input[data-dtq] { width: 240px; max-width: 100%; min-height: 34px; height: 34px; }
.dt-toolbar select { width: auto; max-width: 200px; min-height: 34px; height: 34px; font-size: 13px; color: var(--c-ink-2); padding: 0 10px; }
.dt-toolbar .dt-scope-note { margin-left: auto; font-size: 12px; color: var(--c-ink-3); }
.dt-toolbar .mode-chip { margin-left: auto; }
.dt-toolbar .dt-scope-note ~ .mode-chip { margin-left: 0; }
.dt-viewsbar select { min-height: 30px; padding: 0 8px; width: auto; max-width: 200px; font-size: 13px; }
.dt-bulkbar { border: 1px solid var(--c-line); border-radius: 0; background: var(--c-surface); padding: 8px 10px; }
.dt-viewsbar, .dt-bulkbar { margin-bottom: 8px; }
/* Sticky leading/trailing action column + frozen identity column keep an OPAQUE ground, and a hovered row
   gets the same 4% wash blended in (a translucent wash would let scrolled cells show through). */
.datatable td.dt-sticky, .datatable th.dt-sticky { position: sticky; left: 0; z-index: 1; background: var(--c-bg); }
.datatable td.dt-sticky-end, .datatable th.dt-sticky-end { left: auto; right: 0; }
.datatable thead th.dt-sticky { z-index: 3; }
.datatable tbody tr:hover td.dt-sticky, .datatable tbody tr:hover td.col-id { background: color-mix(in srgb, var(--c-bg) 96%, var(--c-ink)); }
.dt-tiles { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
/* Frame option (cfg.frame): blueprint frame with an inner scroller. */
.dt-frame { margin-top: 12px; }
/* redesign:web-integrator — the 640px floor belongs to the grid/table tiers only; at the stack tier (< 520px container) it clipped the label cards */
@container table (min-width: 520px) { .dt-frame > .bp-scroll > table { min-width: 640px; } }
.datatable thead th { white-space: nowrap; }
.datatable th[data-dtsort] { cursor: pointer; user-select: none; }
.datatable th[data-dtsort]:hover { color: var(--c-ink); }
.datatable th .dt-sortbtn { all: unset; cursor: pointer; display: inline; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.datatable th .dt-sortbtn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.datatable tr[data-dtrow] { cursor: pointer; }
.datatable tr[data-dtrow]:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.datatable td.dt-status, .datatable th.dt-status { white-space: nowrap; width: 1%; }
.datatable td.dt-why, .datatable th.dt-why { white-space: nowrap; text-align: right; width: 1%; }
.datatable td.dt-why .btn + .btn { margin-left: 6px; }
.datatable td .sub-cell { display: block; font-size: 12px; color: var(--c-ink-3); font-weight: 400; }
.datatable .dt-cr { display: none; }
.datatable tr.dt-grouprow { cursor: pointer; background: var(--c-surface); }
.datatable tr.dt-grouprow td { font-weight: 700; padding-top: 7px; padding-bottom: 7px; }
.dt-groupcaret { display: inline-block; width: 14px; color: var(--c-ink-2); }
.datatable td.dt-empty { color: var(--c-ink-2); }

/* STACK: container < 520 — label cards (default) or Compliance Rows. display:block on
   table/tr/td drops native table semantics; createDataTable re-asserts roles. */
@container table (max-width: 519.98px) {
  .datatable-wrap .dt-collapse-chip { display: flex; }
  .datatable, .datatable tbody, .datatable tr, .datatable td { display: block; }
  .datatable thead { display: none; }
  .datatable tr { border: 1px solid var(--c-line); border-radius: 0; margin-bottom: 8px; padding: 4px 2px; }
  .datatable tr:last-child { margin-bottom: 0; }
  .datatable td { border-bottom: none; padding: 5px 8px; }
  .datatable td[data-label]:not([data-label=""])::before {
    content: attr(data-label); display: block; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-2); margin-bottom: 1px;
  }
  .datatable td.dt-why, .datatable td.dt-status { width: auto; text-align: left; }
  .datatable tr.dt-grouprow { border: none; }
  .datatable tr.dt-grouprow td { padding: 6px 8px; }
  /* Compliance Row (only rows that carry a .dt-cr cell): one 72px row, three lines. */
  .datatable tr.dt-cr-row { border: 0; border-bottom: 1px solid var(--c-line-2); margin: 0; padding: 0; min-height: 72px; }
  .datatable tr.dt-cr-row > td:not(.dt-cr) { display: none; }
  .datatable tr.dt-cr-row > td.dt-cr { display: block; padding: 8px 2px; }
  .datatable td.dt-cr::before { content: none; }
}
/* GRID: 520-899 — 44px rows, sticky 32px header, frozen identity column, horizontal scroll. */
@container table (min-width: 520px) {
  .datatable thead th { position: sticky; top: 0; z-index: 2; background: var(--c-bg); }
  .datatable td.col-id, .datatable th.col-id { position: sticky; left: 0; z-index: 1; background: var(--c-bg); }
  .datatable thead th.col-id { z-index: 3; }
  .datatable-wrap { scrollbar-width: thin; }
}
@container table (min-width: 520px) and (max-width: 899.98px) {
  .datatable { font-size: 13px; }
  .datatable th { height: 32px; padding: 0 8px; }
  .datatable td { height: 44px; padding: 0 8px; }
  .datatable tr.dt-grouprow td { height: auto; padding: 6px 8px; }
}
/* TABLE: >= 900 */
@container table (min-width: 900px) {
  .datatable { font-size: 14px; }
  .datatable th, .datatable td { padding: 6.8px 10px; }
}
/* Compliance Row internals (line 1 name + citation | chip; line 2 20px condensed
   in the severity colour with glyph + word; line 3 13px other basis + "n more"). */
.cr-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; min-height: 56px; }
.cr-name { font: 600 16px/1.2 var(--font-heading); overflow-wrap: anywhere; }
.cr-cite { font: 400 12px/1.2 var(--font-body); color: var(--c-ink-3); margin-left: 6px; }
.cr-basis { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font: 600 20px/1.15 var(--font-heading); color: var(--sev-text); }
.cr-basis .sev-glyph { margin: 0; flex: 0 0 auto; }
.cr-basis .cr-word { letter-spacing: .04em; }
.cr-other { grid-column: 1 / -1; font-size: 13px; color: var(--c-ink-2); }
.cr-more { all: unset; position: relative; cursor: pointer; color: var(--c-accent-ink); font-size: 13px; }
.cr-more::before { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: var(--kit-hit); transform: translateY(-50%); }
.cr-more:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.cr-extra { grid-column: 1 / -1; margin: 2px 0 0; padding: 6px 0 0; border-top: 1px solid var(--c-line-2); font-size: 13px; color: var(--c-ink-2); }
.cr-extra[hidden] { display: none; }
.cr-extra dl { display: grid; grid-template-columns: minmax(80px, auto) 1fr; gap: 2px 12px; margin: 0; }
.cr-extra dt { color: var(--c-ink-3); }
.cr-extra dd { margin: 0; }
/* Hand-built tables that carry their own widths: skin only. */
.aw-table { table-layout: fixed; width: 100%; }
.aw-table th, .aw-table td { overflow-wrap: anywhere; vertical-align: top; }
.adl-table { table-layout: fixed; width: 100%; }
.adl-table td.trunc, .adl-table td .trunc { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.pp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 2px 0 4px; border: 1px solid var(--c-line); border-radius: 0; }
.pp-table { border-collapse: collapse; width: auto; min-width: 100%; font-size: 13px; table-layout: auto; }
.pp-table th, .pp-table td { padding: 5px 14px; white-space: nowrap; border-bottom: 1px solid var(--c-line-2); text-align: left; vertical-align: top; }
.pp-table thead th { position: sticky; top: 0; background: var(--c-bg); color: var(--c-ink-2); z-index: 1; border-bottom: 1px solid var(--c-line); }
.pp-table td.num, .pp-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pp-kv { border-collapse: collapse; width: 100%; font-size: 13px; }
.pp-kv > tr > th, .pp-kv > tbody > tr > th { text-align: left; vertical-align: top; color: var(--c-ink-2); font-weight: 600; padding: 4px 14px 4px 0; white-space: nowrap; }
.pp-kv > tr > td, .pp-kv > tbody > tr > td { vertical-align: top; padding: 4px 0; overflow-wrap: anywhere; }
.pp-table.pp-kv td { white-space: normal; }
.ad-results { table-layout: fixed; width: 100%; border-collapse: collapse; font-size: 13px; }
.ad-results th, .ad-results td { padding: 5px 10px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--c-line-2); }
.ad-results thead th { color: var(--c-ink-2); font-weight: 600; border-bottom: 1px solid var(--c-line); }
.ad-results .chip { max-width: 100%; }
tr[data-insview]:hover td { background: var(--c-hover-row); }
/* Key/value grid (kv(): .pvkv/.pvk/.pvv). */
.pvkv { display: grid; grid-template-columns: minmax(150px, 240px) 1fr; gap: 6px 16px; align-items: start; width: 100%; }
.pvk { color: var(--c-ink-2); font-weight: 500; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--c-line-2); }
.pvv { font-size: 13px; overflow-wrap: anywhere; padding: 4px 0; border-bottom: 1px solid var(--c-line-2); }
.pvcard { border: 1px solid var(--c-line); border-radius: 0; padding: 6px 10px; margin: 6px 0; background: var(--c-surface); }

/* Binding-item band (record screens): blueprint, 3px severity edge, chip + 16px
   text + sub + Why?. */
.binding-band {
  display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; margin-top: 16px; padding: 10px 14px;
  border-left: 3px solid var(--sev);
}
.binding-band { margin-bottom: 12px; }
.binding-band .bb-text { font: 600 16px/1.25 var(--font-heading); }
.binding-band .bb-sub { font-size: 13px; color: var(--c-ink-2); }
.binding-band .bb-why { margin-left: auto; }
.binding-band.sev-notTracked { border-left-style: dashed; }

/* ---- 8. Board primitives. Compact rows key off the CONTAINER (.bp-rows), not the device. */
.bp-rows { container-type: inline-size; container-name: rows; }
.row-line { display: grid; align-items: center; gap: 8px 12px; padding: 11px 14px; border-bottom: 1px solid var(--c-line-2); color: inherit; text-decoration: none; position: relative; }
.bp-rows > .row-line:last-child, .bp-rows > a.row-line:last-child { border-bottom: 0; }
.row-line.navigable:hover { background: var(--c-hover-row); }
/* A navigable row is a stretched link on its title (so a Why? button can sit in the same row —
   a button inside an <a> is invalid): the ::after covers the row, .row-end floats above it and
   lets clicks on the chip fall through to the link. */
.row-link { color: inherit; text-decoration: none; }
.row-link:hover { text-decoration: none; }
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-link:focus-visible { outline: none; }
.row-link:focus-visible::after { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.row-end { position: relative; z-index: 1; pointer-events: none; }
.row-end .btn, .row-end a, .row-end button { pointer-events: auto; }
.row-n { font: 600 20px/1 var(--font-heading); color: var(--c-ink-3); }
.row-title { font: 600 16px/1.2 var(--font-heading); }
.row-cite { font-size: 12px; color: var(--c-ink-3); }
.row-detail { font-size: 13px; color: var(--c-ink-2); }
.row-end { display: flex; align-items: center; gap: 10px; }
.row-chev { color: var(--c-ink-3); flex: 0 0 auto; }
.row-ladder { grid-template-columns: 34px minmax(0, 1fr) auto; min-height: 56px; }
.row-ladder .row-main { min-width: 0; }
.row-ladder .row-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.row-station { grid-template-columns: 34px minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 6px 12px; padding: 10px 14px; min-height: 64px; }
.row-station .row-name { font: 600 15px/1.2 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; }
.row-station .row-reason { font: 500 15px/1.3 var(--font-heading); font-variant-numeric: tabular-nums; }
.row-currency { grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 6px 12px; padding: 10px 14px; min-height: 60px; }
.row-currency .row-name { font: 600 15px/1.2 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; }
.cur-bar { position: relative; height: 30px; }
.cur-bar .cb-track { position: absolute; left: 0; right: 0; top: 20px; height: 2px; background: var(--c-line); }
.cur-bar .cb-fill { position: absolute; left: 0; top: 20px; height: 2px; background: var(--sev); }
.cur-bar .cb-mark { position: absolute; top: 14px; width: 3px; height: 14px; transform: translateX(-50%); background: var(--sev); }
.cur-bar .cb-basis { position: absolute; left: 0; top: 0; font: 500 11px/1 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); white-space: nowrap; }
.cur-bar.nodata .cb-track { background: none; border-top: 2px dashed var(--c-line-control); height: 0; }
@container rows (max-width: 600px) {
  .row-ladder { grid-template-columns: 28px minmax(0, 1fr); }
  .row-ladder > .row-end { grid-column: 2; }
  .row-station, .row-currency { grid-template-columns: 28px minmax(0, 1fr); }
  .row-station > .row-reason, .row-currency > .cur-bar { grid-column: 1 / -1; }
  .row-station > .row-end, .row-currency > .row-end { grid-column: 1 / -1; flex-wrap: wrap; }
}
/* Needs-you card. */
.needs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 22px; }
.needs-card { padding: 12px 14px; border-left: 3px solid var(--sev); }
.needs-card .nc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.needs-card .nc-kicker { font: 600 11px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--sev-text); display: inline-flex; align-items: center; gap: 5px; }
.needs-card .nc-rule { font: 600 11px/1.2 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); }
.needs-card .nc-cond { font: 600 19px/1.15 var(--font-heading); margin: 4px 0 2px; }
.needs-card .nc-basis { font-size: 13px; color: var(--c-ink-2); }
.needs-card .nc-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.needs-card.sev-notTracked { border-left-style: dashed; }
/* Hours-basis plate. */
.basis-plate { padding: 10px 14px; min-width: 230px; display: grid; grid-template-columns: auto auto; gap: 2px 16px; align-items: baseline; }
.basis-plate .bp-label { font: 600 11px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); }
.basis-plate .bp-value { font: 600 26px/1.1 var(--font-heading); color: var(--c-ink); }
.basis-plate .bp-src, .basis-plate a { font-size: 12px; color: var(--c-ink-2); }
.basis-plate a { color: var(--c-accent-ink); }
.basis-plate .bp-est { font-size: 12px; color: var(--c-caution); grid-column: 1 / -1; }
/* Next-90-days timeline: positions come from real due dates (kit.js timelineHtml);
   an item is a zero-width anchor at its x%, so the diamond is exactly on the date and
   the label slides left/right at the edges. */
.timeline { padding: 14px 14px 10px; }
.timeline .tl-stage { position: relative; margin: 0 10px; }
.timeline .tl-axis { position: absolute; left: 0; right: 0; height: 1px; background: var(--c-ink-3); }
.timeline .tl-tick { position: absolute; width: 1px; height: 9px; background: var(--c-ink-3); }
.timeline .tl-tick-label { position: absolute; transform: translateX(-50%); font: 500 11px/1 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); white-space: nowrap; }
.timeline .tl-tick-label.first { transform: none; }
.timeline .tl-tick-label.today { color: var(--c-accent-ink); font-weight: 600; }
.timeline .tl-tick-label.last { transform: translateX(-100%); }
.timeline .tl-item { position: absolute; width: 0; }
.timeline .tl-item::after { content: ""; position: absolute; left: 0; top: 28px; bottom: 0; width: 1px; background: var(--sev); opacity: .55; }
.timeline .tl-label { position: absolute; left: 0; top: 0; transform: translateX(-50%); font: 600 12px/1 var(--font-heading); letter-spacing: .04em; color: var(--sev-text); white-space: nowrap; }
.timeline .tl-item.first .tl-label { transform: none; }
.timeline .tl-item.last .tl-label { transform: translateX(-100%); }
.timeline .tl-diamond { position: absolute; left: -5px; top: 17px; width: 10px; height: 10px; background: var(--sev); transform: rotate(45deg); }
.timeline .tl-diamond.sev-notAnswered, .timeline .tl-diamond.sev-notTracked { background: var(--c-bg); border: 1px solid var(--sev); box-sizing: border-box; }
.timeline .tl-empty { padding: 10px 4px 4px; font-size: 13px; color: var(--c-ink-2); }
/* People plate + A-Z list. */
.people-plate { padding: 12px 14px; }
.people-plate .pp-count { font: 600 24px/1.1 var(--font-heading); }
.people-plate .pp-count small { font: 400 14px/1.2 var(--font-body); color: var(--c-ink-2); }
.people-plate a { font-size: 13px; }
.az-list a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--c-line-2); color: var(--c-ink); font-size: 14px; }
.az-list a:hover { text-decoration: none; background: var(--c-hover-row); }
.az-list .az-count { font: 600 12px/1 var(--font-heading); color: var(--c-ink-3); }
/* Provenance + advisory footers. */
.prov-footer { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 22px; font-size: 13px; color: var(--c-ink-2); }
.prov-footer a { color: var(--c-accent-ink); }
.prov-footer .sep { color: var(--c-ink-3); }
.adv-footer { margin-top: 18px; font-size: 13px; color: var(--c-ink-2); }
.adv-footer .pic { color: var(--c-ink); font-weight: 600; }
/* Commit tray rows (commitStepRowHtml / commitTrayHtml). */
.commitq-row { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; padding: 5px 0; border-bottom: 1px solid var(--c-line-2); font-size: 13px; }
.commitq-row:last-child { border-bottom: 0; }
.commitq-row .cq-label { min-width: 64px; font-size: 13px; font-weight: 600; flex: 1 1 120px; }
.commitq-row .cq-msg { flex: 1 1 160px; min-width: 120px; font-size: 12px; color: var(--c-ink-2); }
.commit-tray { padding: 12px 14px; }
.commit-tray .ct-chip { margin-bottom: 6px; }
.commit-tray .ct-sum { font: 600 20px/1.15 var(--font-heading); }
.commit-tray .ct-note { font-size: 12px; color: var(--c-ink-3); margin-top: 6px; }