/* X-ADP v3 full mock: shared components (owner lane SH). Mockup look (T6) on the 4/8 grid (T5, IA D12).
   Other lanes ask for changes in requests.md. Lane classes use their own prefix (.rp-, .rd-, ...). */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: var(--fs-body)/1.5 Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button { font: inherit; cursor: pointer; color: inherit; }
input, select, textarea { font: inherit; color: var(--ink); }
a { color: var(--acc-tx); }
/* [KB T6 focus] one visible focus ring for every control */
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
svg text { font-family: Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.ic { flex: none; display: inline-block; vertical-align: middle; }
.shp { flex: none; display: inline-block; vertical-align: -1px; }
.muted { color: var(--muted); }
.pos { color: var(--acc-tx); } .neg { color: var(--loss); }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mid-cut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------- Shell: rail, main, header, tabs, state line slot, dock slot ---------- */
.xm-shell { display: flex; min-height: 100%; }
/* the rail column keeps its surface below the fold in full-page shots and print previews */
.xm-shell { background: linear-gradient(90deg, var(--card) calc(var(--rail-w) - 1px), var(--hair) calc(var(--rail-w) - 1px), var(--hair) var(--rail-w), transparent var(--rail-w)); }
/* [KB T7.3] frame on every screen; rail sticky with its own scroll (IA D6) */
.xm-rail { width: var(--rail-w); flex: none; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--card);
  border-right: 1px solid var(--hair); padding: 16px 12px; display: flex; flex-direction: column; scrollbar-width: thin; }
.xm-logo { display: block; padding: 4px 12px 16px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--gd-tx); text-decoration: none; white-space: nowrap; }
.xm-logo::first-letter { font-style: italic; font-weight: 800; color: var(--g); font-size: 21px; padding-right: 1px; }
/* tenant block: mark, name and chevron on line 1, kind on line 2 at the full block width, so "Plant A Producer" and
   "Producer with own plant" each take one line at 1280 and 1440 (no ellipsis, no wrap) [KB T2 no clipped label] */
.xm-tenant { display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; align-items: center; column-gap: 8px; row-gap: 4px; width: 100%; padding: 8px 4px 8px 8px; margin-bottom: 8px; border: 1px solid var(--hair); border-radius: var(--r-lg);
  background: var(--surface); text-align: left; transition: border-color var(--t-fast), background-color var(--t-fast); }
.xm-tenant:hover { border-color: var(--ctl); background: var(--added); }
.xm-tenant > svg { grid-column: 3; grid-row: 1; }
.xm-tenant .tm { width: 28px; height: 28px; border-radius: 8px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--gd); color: var(--gl); font-size: 12px; font-weight: 700; }
.xm-tenant .tm { grid-column: 1; grid-row: 1; }
.xm-tenant .tt { display: contents; line-height: 1.3; }
.xm-tenant .tt b { grid-column: 2; grid-row: 1; display: block; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.xm-tenant .tt span { grid-column: 1 / -1; grid-row: 2; display: block; padding-right: 4px; font-size: var(--fs-small); line-height: 1.3; color: var(--muted); overflow-wrap: break-word; }
.xm-rail h6 { margin: 16px 12px 4px; font-size: var(--fs-small); color: var(--muted-l); font-weight: 600; }
.xm-nav { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 2px; border-radius: var(--r-md); border: 0; background: transparent;
  color: var(--ink); text-decoration: none; font-size: var(--fs-body); font-weight: 500; line-height: 1.3; text-align: left; width: 100%; transition: background-color var(--t-rail); }
.xm-nav .ic { color: var(--muted); }
.xm-nav:hover { background: var(--page); }
/* [KB T7.4] two cues for the active item: fill plus bar plus weight */
.xm-nav.on { background: var(--acc-t); color: var(--acc-tx); font-weight: 600; }
.xm-nav.on .ic { color: var(--acc-tx); }
.xm-nav.on::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acc); }
.xm-nav kbd { margin-left: auto; font: 600 11px/1 Inter, system-ui, sans-serif; color: var(--muted-l); border: 1px solid var(--hair); border-radius: 4px; padding: 2px 4px; }
.xm-neo-btn { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 16px; padding: 8px 12px; border: 1px solid var(--hair); border-radius: var(--r-lg);
  background: var(--surface); text-align: left; font-weight: 600; font-size: var(--fs-body); transition: background-color var(--t-fast), border-color var(--t-fast); }
/* PORT73D SH2 (FIXED PORT73C-LAND open (d), (g)): the rail Neo item is the 4875 link a.neo-rl (proto r6/pg.css 13 to 16):
   a link with no underline in the ink colour; its on state is 4875 pg.css 16 (page background, border var(--gd), ink),
   dark 24 and 28 (border var(--acc)) */
a.xm-neo-btn { color: var(--ink); text-decoration: none; }
.xm-neo-btn:hover { background: var(--page); border-color: var(--ctl); }
.xm-neo-btn.on { background: var(--page); border-color: var(--gd); color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .xm-neo-btn.on { border-color: var(--acc); } }
:root[data-theme="dark"] .xm-neo-btn.on { border-color: var(--acc); }
.xm-neo-btn.over { border: 2px dashed var(--acc); background: var(--acc-t); padding: 7px 11px; }
.xm-rail-foot { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.xm-rail-foot .seg { width: 100%; } .xm-rail-foot .seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 2px 4px; }
.xm-main { flex: 1; min-width: 0; padding: 24px 32px 64px; }
.xm-main.has-dock { padding-right: 24px; }
.xm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 36px; }
/* [KB T7.4] breadcrumb with ">" and a bold, unlinked last item (IA D5) */
.xm-crumb { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--muted); font-size: 13px; width: 100%; margin-bottom: 4px; }
.xm-crumb a { color: var(--muted); text-decoration: none; } .xm-crumb a:hover { color: var(--acc-tx); text-decoration: underline; }
.xm-crumb .sep { color: var(--muted-l); padding: 0 2px; }
.xm-crumb b { color: var(--ink); font-weight: 600; }
/* SH-00 session 7: one line header as the mockup; the crumb sits before the name, the name is the bold end item (D5) */
.xm-crumb.in { width: auto; margin: 0 -4px 0 0; flex-wrap: nowrap; white-space: nowrap; line-height: 24px; }
.xm-head > .xm-title { line-height: 28px; }
.xm-acts > .btn, .xm-acts > .chip.lg { min-height: 32px; }
.xm-price { text-decoration: none; color: var(--ink); white-space: nowrap; }
.xm-price .xm-age { margin-left: 2px; padding-left: 8px; border-left: 1px solid var(--hair); color: var(--muted); font-weight: 500; }
.xm-price.old .xm-age { color: var(--ns-t); }
.xm-vrow { display: grid; grid-template-columns: 32px 1fr auto 16px; gap: 12px; align-items: center; }
.xm-vn { display: inline-flex; align-items: center; justify-content: center; height: 24px; border-radius: 6px; border: 1px solid var(--hair); background: transparent; color: var(--ink); font-size: var(--fs-label); font-weight: 650; font-variant-numeric: tabular-nums; }
.xm-vt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; } .xm-vt .muted { font-size: var(--fs-label); font-weight: 500; }
.xm-vv { font-weight: 650; text-align: right; white-space: nowrap; } .xm-vv .muted { font-weight: 500; font-size: var(--fs-label); }
.xm-vrow:hover .xm-vn { background: var(--acc-l); color: var(--ink); }
.xm-vnone { padding: 8px; color: var(--muted); font-size: 13px; }
.xm-vfoot { border-top: 1px solid var(--hair2); margin-top: 4px; padding: 8px 8px 4px; font-size: 13px; }
.xm-vfoot .lnk { color: var(--acc-tx); font-weight: 600; text-decoration: none; } .xm-vfoot .lnk:hover { text-decoration: underline; }
.xm-tabs .xm-bd:empty { display: none; }
.xm-tabs .badge.num, .xm-tabs .badge { font-variant-numeric: tabular-nums; }
.xm-title { margin: 0; font-size: var(--fs-title); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.xm-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.xm-tabs { position: sticky; top: 0; z-index: 30; display: flex; gap: 2px; border-bottom: 1px solid var(--hair); margin: 16px 0 0; overflow-x: auto; scrollbar-width: none; background: var(--page); }
.xm-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; cursor: pointer; text-decoration: none; transition: color var(--t-fast), border-color var(--t-fast); }
.xm-tabs a:hover { color: var(--ink); border-bottom-color: var(--hair); }
.xm-tabs a.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--acc); }
.xm-tabs .badge { font-size: var(--fs-label); font-weight: 600; color: var(--acc-tx); }
.xm-tabs .badge.neg { color: var(--loss); } .xm-tabs .badge.n { color: var(--muted); }
.xm-subtabs { display: flex; gap: 4px; margin: 8px 0 16px; max-width: 100%; overflow-x: auto; scrollbar-width: none; } /* IN request: a long row scrolls inside its own box, never the page */
/* COORDINATOR item 64 (1), 8.9 LOOK: the prototype sub tab is a pill (proto r6/kit.css 32 to 34), the open one dark */
.xm-subtabs a { flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 6px 12px; color: var(--ink2); font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid var(--hair); border-radius: 8px; background: var(--card); white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast); }
.xm-subtabs a:hover { color: var(--ink); border-color: var(--ctl); }
.xm-subtabs a.on { background: var(--gd); border-color: var(--gd); color: var(--on-acc); }
.xm-subtabs a:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; border-radius: 8px; }
.pill .spin { width: 10px; height: 10px; border-width: 1.5px; }
/* FA r2 S5: the tabs live in #xm-top and scroll away, so the step bar sticks at the very top. A page coloured
   backdrop under the bar (and 8 px below it) keeps cards from showing through around its round corners [KB T7.4] */
#xm-stateline { position: sticky; top: 0; z-index: 29; }
#xm-stateline::before { content: ''; position: absolute; inset: 0 0 -8px 0; background: var(--page); z-index: -1; pointer-events: none; }
#xm-stateline:empty { display: none; }
.xm-view { margin-top: 16px; min-width: 0; }
.xm-foot { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--hair2); font-size: var(--fs-label); color: var(--muted); }
#xm-dock { flex: none; width: var(--dock-w); position: sticky; top: 0; height: 100vh; background: var(--card); border-left: 1px solid var(--hair); overflow: hidden; }
#xm-dock:empty, #xm-dock[hidden] { display: none; }

/* ---------- Cards and chart frames (T6, IA D13) ---------- */
.card { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 24px; min-width: 0; box-shadow: var(--sh-card); }
.card.xf { position: relative; margin-bottom: 16px; transition: border-color var(--t-fast), opacity var(--t-fast); }
/* R2 FB S6 (FC row 481): a scroll to a card keeps its head clear of the sticky state line (48 px plus 16 px gap) [KB T2 no covered content] */
/* LIVE s146 (JUDGE Round 38 For the lanes 4): the room is the height of the one sticky step bar #xm-ibar (--ibar-h, written
   by the BAR-ROOM block of ui.js) plus the 16 px gap; with no observer it stays 48 px plus 16 px as before */
.card.xf, .xm-view .card { scroll-margin-top: calc(var(--ibar-h, 48px) + 16px); }
.card.xf.pv { border: 1.5px dashed var(--acc); }
.card.xf.upd .xf-body { opacity: .55; transition: opacity .2s; }
.xf-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; margin: 0 0 16px; }
.xf-text { flex: 1 1 240px; min-width: 0; }
.xf-title { font-size: var(--fs-title); font-weight: 600; line-height: 1.3; margin: 0; letter-spacing: -.01em; color: var(--ink); cursor: grab; display: inline-flex; align-items: center; gap: 8px; }
.xf-q { margin: 4px 0 0; font-size: var(--fs-q); line-height: 1.4; color: var(--ink2); }
.xf-tools { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; min-height: 32px; }
.xf-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: -8px 0 12px; font-size: var(--fs-label); color: var(--muted); }
.xf-key span { display: inline-flex; align-items: center; gap: 6px; }
.xf-body { min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; margin-bottom: 16px; align-items: stretch; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-bottom: 16px; align-items: stretch; }
.grid2 > .card.xf, .grid3 > .card.xf { margin-bottom: 0; }
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; margin-bottom: 16px; }
.xf-info, .ask-neo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; flex: none; transition: color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast); }
.xf-info { border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: help; }
.xf-info:hover { color: var(--acc-tx); background: var(--acc-t); }
.ask-neo { border-radius: 8px; border: 1px solid var(--ctl); background: transparent; color: var(--muted); }
.ask-neo:hover { color: var(--gd-tx); background: var(--page); border-color: var(--gd-tx); }
.chart { position: relative; width: 100%; min-width: 0; }
.chart svg { display: block; overflow: visible; }

/* ---------- State chip in a card head (updating, quick, preview, failed) ---------- */
.stc { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 999px; font-size: var(--fs-label); font-weight: 600; white-space: nowrap; }
.stc.full { background: var(--acc-t); color: var(--acc-tx); }
.stc.quick { background: var(--ns-f); color: var(--ns-t); }
.stc.updating { background: var(--hair2); color: var(--ink2); }
.stc.preview { background: var(--surface); color: var(--acc-tx); border: 1.5px dashed var(--acc); }
.stc.failed, .stc.noplan { background: var(--loss-l); color: var(--err); }
.spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: xm-spin .8s linear infinite; flex: none; }
@keyframes xm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } .skel { animation: none !important; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; margin: 0; padding: 6px 16px; border: 1px solid var(--ctl); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.btn .ic { margin: 0 -2px; }
.btn:hover:not(:disabled) { border-color: var(--acc); color: var(--acc-tx); }
.btn:active:not(:disabled) { background: var(--added); transform: translateY(1px); }
.btn.primary { background: var(--acc-fill); border-color: var(--acc-fill); color: var(--on-acc); }
.btn.primary:hover:not(:disabled) { background: var(--acc-fill-h); border-color: var(--acc-fill-h); color: var(--on-acc); }
.btn.danger { color: var(--loss); border-color: var(--loss-b); } .btn.danger:hover:not(:disabled) { background: var(--loss-l); color: var(--err); border-color: var(--loss-b); }
.btn.go { border-color: var(--acc); color: var(--acc-tx); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover:not(:disabled) { background: var(--acc-t); border-color: transparent; }
.btn.sm { min-height: 28px; padding: 4px 12px; font-size: var(--fs-chip); }
.btn.icon { width: 32px; padding: 0; } .btn.icon.sm { width: 28px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.busy { pointer-events: none; }

/* ---------- Pills, chips, segmented, switches, rule pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-label); font-weight: 600; line-height: 1.5; white-space: nowrap; }
.pill.ok, .st-succeeded { background: var(--acc-t); color: var(--acc-tx); }
.pill.bad, .st-failed { background: var(--loss-l); color: var(--err); }
.pill.draft, .st-draft { background: var(--hair2); color: var(--muted); }
.pill.amber { background: var(--ns-f); color: var(--ns-t); }
.pill.info { background: var(--info-t); color: var(--info); }
.pill.line { background: transparent; border: 1px solid var(--hair); color: var(--ink2); padding: 1px 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hair); border-radius: 12px; padding: 2px 8px 2px 6px; font-size: var(--fs-label); line-height: 1.5;
  white-space: nowrap; background: var(--surface); color: var(--ink); }
.chip > i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.chip.lg { font-size: var(--fs-chip); font-weight: 600; padding: 4px 12px 4px 8px; border-radius: 16px; }
.chip.btnlike { cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); }
.chip.btnlike:hover { border-color: var(--acc); background: var(--acc-t); }
.chip .ic { color: var(--muted); }
.chip.ok { border-color: var(--acc-l); background: var(--acc-t); color: var(--acc-tx); }
.chip.amber { border-color: var(--ns-b); background: var(--ns-f); color: var(--ns-t); }
/* position chip (IA section 8): code + colour mark, company, side icon */
.pc { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pc .code { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px 0 4px; border-radius: 6px; border: 1px solid var(--hair); background: var(--surface); font-size: var(--fs-tick); font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.pc .co { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc .role { color: var(--muted); font-size: var(--fs-label); white-space: nowrap; }
.side { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: 999px; font-size: var(--fs-label); font-weight: 600; white-space: nowrap; border: 1px solid var(--hair); background: var(--surface); color: var(--ink2); }
.side.long .ic, .side.short .ic { color: var(--ink); }
.kind { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--hair); font-size: var(--fs-tick); font-weight: 600; color: var(--ink2); letter-spacing: .02em; }
.seg { display: inline-flex; background: var(--track); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 4px 12px; border-radius: 7px; font-weight: 500; color: var(--muted); line-height: 1.4; white-space: nowrap; transition: color var(--t-fast), background-color var(--t-fast); }
.seg button:hover:not(.on) { color: var(--ink); }
.seg button.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--sh-thumb); }
.seg.sm { padding: 2px; border-radius: 7px; } .seg.sm button { padding: 2px 8px; font-size: var(--fs-label); border-radius: 5px; }
.xtoggle { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 16px; border: 1px solid var(--hair); background: var(--surface); font-size: var(--fs-chip); font-weight: 600; color: var(--ink); }
.xtoggle > i, .rpill .sw { width: 28px; height: 16px; border-radius: 8px; background: var(--ctl); position: relative; flex: none; transition: background-color var(--t-fast); }
.xtoggle > i::after, .rpill .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 6px; background: var(--on-acc); transition: left var(--t-fast); }
.xtoggle.on > i, .rpill.on .sw { background: var(--acc); } .xtoggle.on > i::after, .rpill.on .sw::after { left: 14px; }
.rpill { display: inline-flex; align-items: stretch; border: 1px solid var(--hair); border-radius: 16px; background: var(--surface); overflow: hidden; }
.rpill.on { border-color: var(--acc-l); background: var(--acc-t); }
.rpill.clash { border-color: var(--loss); box-shadow: 0 0 0 2px var(--loss-l); }
.rpill > button { border: 0; background: transparent; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; font-size: var(--fs-chip); font-weight: 600; color: var(--ink); min-height: 28px; }
.rpill > button.rv { padding: 4px 12px; border-left: 1px solid var(--hair); color: var(--muted); font-variant-numeric: tabular-nums; }
.rpill.on > button.rv { color: var(--acc-tx); border-left-color: var(--acc-l); }
.rpill > button:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }

/* ---------- KPI tiles (T6; one hero number per tile) ---------- */
.kpi { position: relative; background: var(--card); border: 1px solid var(--hair); border-radius: 10px; padding: 12px 16px; min-width: 0; display: flex; flex-direction: column; }
.kpi .lab { font-size: var(--fs-chip); color: var(--muted); font-weight: 500; line-height: 1.4; }
.kpi .val { font-size: var(--fs-hero); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 4px 0; white-space: nowrap; }
.kpi .val small { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.kpi .val.pos { color: var(--acc-tx); } .kpi .val.neg { color: var(--loss); } .kpi .val.sm { font-size: var(--fs-title); }
.kpi .sub { font-size: var(--fs-label); color: var(--muted); margin-top: auto; }
.kpi.click { cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.kpi.click:hover { border-color: var(--acc-l); box-shadow: var(--sh-lift); }

/* ---------- Tables ---------- */
.tscroll { position: relative; overflow-x: auto; container-type: inline-size; } /* NOTE NEO to LIVE 10:42: the scroller clips its absolute parts (.sr) */
table.t { width: 100%; border-collapse: collapse; }
table.t th { text-align: left; font-size: var(--fs-label); color: var(--muted); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--hair); line-height: 1.35; vertical-align: bottom; white-space: nowrap; }
table.t td { padding: 12px; border-bottom: 1px solid var(--hair2); vertical-align: middle; }
table.t.tight td { padding: 8px 12px; }
table.t th.num, table.t td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.t tr.click { cursor: pointer; } table.t tr.click:hover td { background: var(--added); }
table.t tr.sel td { background: var(--acc-t); }
table.t tfoot td { border-bottom: 0; border-top: 1px solid var(--hair); font-weight: 700; }
table.t th .t-u { display: block; font-size: var(--fs-tick); font-weight: 500; color: var(--muted-l); letter-spacing: 0; margin-top: 2px; } /* polish PA2: unit line under a column head */
table.t th.sort { cursor: pointer; } table.t th.sort:hover { color: var(--ink); }
.vbar { display: inline-block; width: 64px; height: 8px; margin-right: 8px; background: var(--track); border-radius: 4px; vertical-align: middle; position: relative; overflow: hidden; }
.vbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--acc-l); }
.vbar.neg i { background: var(--loss); opacity: .7; }

/* ---------- Fields ---------- */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; min-width: 0; }
.field > label, .lbl { font-size: var(--fs-label); color: var(--muted); font-weight: 500; }
.inp, select.inp { min-height: 32px; border: 1px solid var(--ctl); border-radius: 7px; padding: 4px 8px; background: var(--surface); font-weight: 600; width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast); }
select.inp { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: var(--sel-chev); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px 14px; cursor: pointer; } /* polish PA2: one chevron in the icon style, both themes */
select.inp:disabled { cursor: default; opacity: .6; }
.inp:hover { border-color: var(--muted-l); }
.inp::placeholder { font-weight: 400; color: var(--muted-l); opacity: 1; } /* polish PA2: a hint reads quieter than a typed value */
.inp:focus { outline: 0; border-color: var(--acc); box-shadow: var(--focus); }
.inp.bad { border-color: var(--loss); }
.hint { font-size: var(--fs-label); color: var(--muted); }
.hint.bad { color: var(--loss); display: inline-flex; gap: 4px; align-items: center; }
.search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--ctl); border-radius: var(--r-md); background: var(--surface); color: var(--muted); min-width: 200px; }
.search:focus-within { border-color: var(--acc); box-shadow: var(--focus); }
.search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; font-weight: 500; }
.search input::placeholder { color: var(--muted-l); }

/* ---------- Popover, tips, dialog, drawer, toast ---------- */
.pop { position: fixed; z-index: 70; width: 264px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--sh-pop); padding: 8px;
  animation: xm-pop .12s ease-out; }
.pop.wide { width: 372px; } .pop.rule { width: 300px; }
@keyframes xm-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.pop-h { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px; border-bottom: 1px solid var(--hair2); margin-bottom: 4px; font-weight: 650; font-size: var(--fs-body); }
.pop-h .r { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pop-b { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-weight: 600; font-size: 13px; text-align: left; }
.pop-b .ic { color: var(--muted); }
.pop-b:hover:not(:disabled) { background: var(--acc-t); color: var(--acc-tx); } .pop-b:hover:not(:disabled) .ic { color: var(--acc-tx); }
.pop-b:disabled { color: var(--dis); cursor: default; }
.pop-b .n { margin-left: auto; font-size: var(--fs-chip); font-weight: 600; font-variant-numeric: tabular-nums; }
.pop-sep { height: 1px; background: var(--hair2); margin: 4px 2px; }
.pop-note { padding: 4px 8px; font-size: var(--fs-label); color: var(--muted); }
.chart-tip { position: fixed; z-index: 85; pointer-events: none; padding: 8px 12px; border-radius: 7px; background: var(--gd); color: var(--on-acc); font-size: 13px; font-weight: 500; line-height: 1.4; box-shadow: var(--sh-pop); max-width: 360px; }
.tw-tip { position: fixed; z-index: 80; pointer-events: none; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-tip); box-shadow: var(--sh-pop); padding: 12px 12px 12px; font-size: 13px; line-height: 1.45; max-width: 360px; color: var(--ink); }
.tw-tip .h { font-weight: 650; font-size: var(--fs-body); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tw-tip .s { color: var(--muted); font-size: var(--fs-chip); margin-top: 2px; }
.tw-tip table { border-collapse: collapse; margin-top: 8px; width: 100%; }
.tw-tip td { padding: 2px 0; font-size: var(--fs-chip); } .tw-tip td.n { text-align: right; font-weight: 600; padding-left: 16px; }
.tw-tip tr.tot td { border-top: 1px solid var(--hair2); padding-top: 4px; font-weight: 700; }
/* kit/hover (COORDINATOR item 21 (a)): the small picture of the white card #tipW sits under its text (demo .tw-tip svg.pic) */
.tw-tip svg.pic { display: block; margin-top: 8px; overflow: visible; max-width: 100%; }
.tw-tip[hidden] { display: none; }
dialog.xdlg { border: 1px solid var(--hair); border-radius: 14px; padding: 24px; width: min(440px, calc(100vw - 32px)); box-shadow: var(--sh-pop); color: var(--ink); background: var(--card); }
dialog.xdlg.wide { width: min(720px, calc(100vw - 32px)); }
dialog.xdlg::backdrop { background: var(--backdrop); }
.xdlg h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.xdlg .dq { margin: 0 0 16px; color: var(--ink2); font-size: 13.5px; }
.xdlg .acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.xdrawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 75; width: min(480px, 100vw); background: var(--card); border-left: 1px solid var(--hair); box-shadow: var(--sh-pop);
  display: flex; flex-direction: column; animation: xm-slide .18s ease-out; }
@keyframes xm-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.xdrawer > header { display: flex; align-items: center; gap: 8px; padding: 16px 16px 12px 24px; border-bottom: 1px solid var(--hair2); }
.xdrawer > header b { font-size: 16px; font-weight: 600; flex: 1; }
.xdrawer > .body { flex: 1; overflow-y: auto; padding: 16px 24px 24px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 10px;
  background: var(--gd); color: var(--on-acc); font-size: 13px; font-weight: 600; box-shadow: var(--sh-pop); animation: xm-toast .18s ease-out; max-width: calc(100vw - 32px); }
.toast .btn { min-height: 28px; padding: 4px 12px; background: transparent; color: var(--gl); border-color: color-mix(in srgb, var(--gl) 40%, transparent); }
.toast .btn:hover:not(:disabled) { color: var(--on-acc); border-color: var(--gl); }
@keyframes xm-toast { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- Designed states: skeleton, empty, error (IA 7.10) [QR 18, QR 33, QR 47] ---------- */
.skel { background: linear-gradient(90deg, var(--track) 0, var(--added) 40%, var(--track) 80%); background-size: 240% 100%; animation: xm-shim 1.4s ease-in-out infinite; border-radius: 6px; }
@keyframes xm-shim { from { background-position: 100% 0; } to { background-position: -40% 0; } }
.skel-line { height: 12px; margin: 8px 0; } .skel-kpi { height: 88px; border-radius: 10px; } .skel-chart { height: 240px; border-radius: 8px; }
.empty-st { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 48px 24px; text-align: center; color: var(--muted); }
.empty-st .em-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--acc-t); color: var(--acc-tx); display: inline-flex; align-items: center; justify-content: center; }
.empty-st b { color: var(--ink); font-size: 15px; font-weight: 600; }
.empty-st p { margin: 0; max-width: 420px; font-size: 13.5px; }
/* FINDING-PLAT-37: the readiness rows of a live empty start read like the line of text they replace */
.empty-st .in-ready { margin: 0; padding: 0; list-style: none; max-width: 420px; font-size: 13.5px; }
.err-st { display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; padding: 16px; border: 1px solid var(--loss-b); border-radius: var(--r-lg); background: var(--loss-l); color: var(--ink); }
.err-st .em-ic { grid-row: span 3; width: 40px; height: 40px; border-radius: 10px; background: var(--surface); color: var(--loss); display: inline-flex; align-items: center; justify-content: center; }
.err-st b { font-size: 14px; font-weight: 600; } .err-st p { margin: 0; font-size: 13px; color: var(--ink2); }
.err-st .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.err-st > :not(.em-ic) { grid-column: 2; }
.err-st .err-note { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--muted); font-size: var(--fs-label); } .err-st .err-note .ic { color: var(--acc-tx); flex: none; }

/* ---------- Search palette (SH-14) ---------- */
.pal-back { position: fixed; inset: 0; z-index: 95; background: var(--backdrop); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; animation: xm-fade .12s; }
@keyframes xm-fade { from { opacity: 0; } to { opacity: 1; } }
.pal { width: min(640px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--hair); border-radius: 14px; box-shadow: var(--sh-pop); overflow: hidden; }
.pal-in { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 52px; border-bottom: 1px solid var(--hair2); color: var(--muted); }
.pal-in input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 15px; font-weight: 500; color: var(--ink); }
.pal-scope { display: flex; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--hair2); flex-wrap: wrap; }
.pal-list { max-height: 52vh; overflow-y: auto; padding: 8px; }
.pal-grp { padding: 8px 8px 4px; font-size: var(--fs-small); font-weight: 600; color: var(--muted-l); }
.pal-it { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; color: var(--ink); }
.pal-it .ic { color: var(--muted); }
.pal-it .t { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-it .w { font-size: var(--fs-label); color: var(--muted); white-space: nowrap; }
.pal-it.on, .pal-it:hover { background: var(--acc-t); } .pal-it.on .t { color: var(--acc-tx); }
.pal mark { background: transparent; color: var(--acc-tx); font-weight: 700; }

/* ---------- Dev state switch (only with ?dev=1) ---------- */
.xm-dev { position: fixed; left: 16px; bottom: 16px; z-index: 99; display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 10px; background: var(--card); border: 1px dashed var(--ctl); box-shadow: var(--sh-pop); font-size: var(--fs-label); color: var(--muted); }

/* ---------- Breakpoints (T8) ---------- */
@media (max-width: 1199px) { #xm-dock { position: fixed; right: 0; z-index: 60; box-shadow: var(--sh-pop); } }
@media (max-width: 900px) {
  .xm-shell { flex-direction: column; background: none; }
  .xm-rail { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px 16px; gap: 4px; border-right: 0; border-bottom: 1px solid var(--hair); }
  .xm-rail h6, .xm-rail-foot { display: none; } .xm-logo { padding: 4px 8px; } .xm-tenant { width: auto; margin: 0; } .xm-nav { width: auto; } .xm-neo-btn { width: auto; margin: 0; }
  .xm-main { padding: 16px 16px 48px; } .card { padding: 16px; }
}
@media print {
  .xm-rail, #xm-dock, .xm-tabs, .xf-tools, #xm-stateline, .xm-dev, .toast, #tipW, .chart-tip { display: none !important; }
  body { background: #fff; } .card { box-shadow: none; break-inside: avoid; }
}
/* CARD-MENU (LIVE done item 10, 8.3 CC S-11): "Print or save as PDF" of one card. While it prints, html.xf-printing
   hides every part of the page but the card .xf-print; the card prints from the top of the page at full width, its
   table unrolled (no inner scroll), its head tools left out. The server PDF of the export job prints this layout. */
.xf-menu-pop { width: 224px; }
@media print {
  html.xf-printing body * { visibility: hidden; }
  html.xf-printing .card.xf-print, html.xf-printing .card.xf-print * { visibility: visible; }
  html.xf-printing .card.xf-print { position: absolute; left: 0; top: 0; width: 100%; margin: 0; border: 0; box-shadow: none; }
  html.xf-printing .card.xf-print .tscroll { overflow: visible; }
  html.xf-printing .card.xf-print .xf-tools { display: none !important; }
}
/* CARD-MENU end */

/* SH: the state line shows only on scenario screens (a platform page has no scenario) */
#xm-stateline:not([data-scenario]) { display: none; }

/* fixer S1 (F5) [KB 1522 repeated information]: the steady "Full result" chip lives in the step bar only.
   A card head shows its chip only while the card is not the full result (updating, quick, preview, error). */
.xf-tools .stc.full, .xf-tools .rp-state:not(.busy) { display: none; }
/* REQ PLAT to LIVE 1 of s48 (remote LOOK s41, SH-04-drop at 390): a head with no tool draws no tools row (the head
   wraps at 390 and the empty tools div took its own 32 px row). Only :empty: a tools div can hold a bare text tool,
   which no element selector sees. */
.xf-tools:empty { display: none; }
/* fixer S1 (F2) [UI-Review R1.5]: a rounding key line, so a visible sum that is off by the last digit is not read as an error */
.xm-rnd { margin: 0 0 12px; font-size: 12px; line-height: 16px; color: var(--muted); }
.xm-rnd-i { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--muted); }

/* R3 QA (FINAL-R2 shell row): a tab row with no room folds the unit words of its badges (frame.js fitTabs); a row that
   still has no room scrolls with an edge fade, so the hidden tab reads as "more to the right" [KB T2, KB T3 affordance] */
.xm-tabs.tight .xm-u { display: none; }
.xm-tabs.cut { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); padding-right: 24px; }
/* LIVE JUDGE R1 IN-a9: the sub tab row (frame.js .xm-subtabs) gets the same cue when it has no room (PLAT sets .cut) */
.xm-subtabs.cut { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); padding-right: 24px; }
/* LIVE s74 (JUDGE Round 7 IN-f5 390: the row cut at the LEFT, "al and demand", with no cue; frame.js scrolls the open tab
   into view): the fade sits on each edge that has more tabs behind it, driven by the scroll of the row itself (at the
   start the right edge, in the middle both, at the end the left edge). Without scroll timelines the right fade stays. */
@property --xm-cue-l { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --xm-cue-r { syntax: '<length>'; inherits: false; initial-value: 32px; }
@keyframes xm-cue-lr { 0% { --xm-cue-l: 0px; --xm-cue-r: 32px; } 3% { --xm-cue-l: 32px; } 97% { --xm-cue-r: 32px; } 100% { --xm-cue-l: 32px; --xm-cue-r: 0px; } }
@supports (animation-timeline: scroll()) {
  .xm-subtabs.cut { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--xm-cue-l), #000 calc(100% - var(--xm-cue-r)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--xm-cue-l), #000 calc(100% - var(--xm-cue-r)), transparent);
    animation-name: xm-cue-lr; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(self inline); }
}

/* DOCK-RULE start (COORDINATOR item 14 (1), LOOK 8.9: no card wider than the main at 1280 and 1440 with the Neo dock
   open; the narrow card form of RD-01 is the pattern). The view column never grows past the main; a card keeps to the
   column; a table wider than its card scrolls inside its .tscroll and keeps its key column (the first column stays). */
.xm-view { min-width: 0; max-width: 100%; }
.xm-view .card { min-width: 0; max-width: 100%; }
/* the tool row of a card head (filters, toggles, card menu) wraps inside the card, never past it */
.xm-view .xf-tools { flex: 0 1 auto; min-width: 0; max-width: 100%; justify-content: safe flex-end; }
/* a segmented control wider than its card scrolls inside its own line (never past the left edge of the main) */
.xm-view .xf-tools > .seg { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
/* .tscroll is an inline-size container: the key column stays only where the table can scroll (narrow), and keeps
   the row states (hover, selected) of the row it belongs to */
@container (max-width: 759.98px) {
  .xm-view .tscroll > table.t th:first-child, .xm-view .tscroll > table.t td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }
  .xm-view .tscroll > table.t tr.click:hover td:first-child { background: var(--added); }
  .xm-view .tscroll > table.t tr.sel td:first-child { background: var(--acc-t); }
}
/* LOOK R1 cross item 1 (one narrow table form, 390 px and the dock width): a table wider than its .tscroll scrolls inside
   its card with a cue (a shade at the edge that has more; local backgrounds hide it at the end), and its cells keep
   their words on one line. Only at a phone width or with the dock open (the dock form of in.css; the shell class for the
   dock is set by no script): the 1440 view with no dock keeps its layout. */
.xm-view .tscroll { --t-cue-sh: color-mix(in srgb, var(--ink) 24%, transparent); --t-cue: linear-gradient(90deg, var(--card) 30%, transparent) left center / 32px 100% no-repeat local, linear-gradient(270deg, var(--card) 30%, transparent) right center / 32px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, var(--t-cue-sh), transparent) left center / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, var(--t-cue-sh), transparent) right center / 12px 100% no-repeat scroll; }
@media (max-width: 760px) {
  .xm-view .tscroll { background: var(--t-cue); }
  .xm-view .tscroll > table.t td { white-space: nowrap; }
}
body:has(#xm-dock:not(:empty):not([hidden])) .xm-view .tscroll { background: var(--t-cue); }
@container (max-width: 759.98px) {
  body:has(#xm-dock:not(:empty):not([hidden])) .xm-view .tscroll > table.t td { white-space: nowrap; }
}
/* DOCK-RULE end */
/* HV-7 (LIVE done item 11): shared highlight across charts. ui.js XM.ui.hl lights the marks of one cargo or source
   code (hl-on) and fades the other marks of the view while the pointer or focus is on a mark. No motion under
   reduced motion. */
#xm-view.hl-fade [data-hc]:not(.hl-on), #xm-view.hl-fade [data-hs]:not(.hl-on) { opacity: .35; }
#xm-view [data-hc].hl-on, #xm-view [data-hs].hl-on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  #xm-view [data-hc], #xm-view [data-hs] { transition: opacity .12s ease-out; }
}

/* BEFORE-NOW (spec 4.1 H9, SENSE-1-1): Before, Now and Change of a draft, from XM.ui.beforeNowHtml (LIVE s22) */
.bn { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: flex-start; }
.bn-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bn-k { font-size: 12px; line-height: 16px; color: var(--muted-l); }
.bn-v { font-size: 20px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.bn-v.loss { color: var(--loss); }
.bn-u { font-size: 12px; color: var(--muted-l); }
.bn-s { font-size: 12px; line-height: 16px; color: var(--muted-l); overflow-wrap: anywhere; }
.bn-r { flex-basis: 100%; margin: 0; font-size: 12px; line-height: 16px; color: var(--muted-l); }
/* AUD-H34-1: the name of each change in the Change tile (cargo margin, net after ship hire) */
.bn-n { font-size: 12px; line-height: 16px; color: var(--muted-l); }
/* REQ GATE2 to LIVE (17:01), D-LIVE2: the loading line of index.html while the synchronous boot GET waits
   (live/boot.js removes it before the views or the fault draw) */
.xm-boot-wait { max-width: 560px; margin: 15vh auto; padding: 0 16px; color: var(--muted); font-size: 14px; line-height: 20px; text-align: center; }

/* REQ GATE2 to LIVE (18:48), spec 8.1 CC V4: the state line note of another user's save (views/vn/stateline.js savedHtml) */
.vn-line .vn-note { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--ink-2, var(--ink)); }
.vn-line .vn-note svg { flex: none; color: var(--info, currentColor); }
.vn-line .vn-note span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* VN-FIT start. REQ PLAT to LIVE (20:18) and ADDENDUM (20:21), spec 4.1b H8: the state line never runs past the main.
   views/vn/stateline.js marks a problem in the line (data-problem yes: a No plan or Failed draft, a live fault) and a
   line that still runs past its box after the chip fold (data-fit wrap). vn.css (lane NEO) loads after this file and
   keeps the line in one row from 900 px by a rule of 4 class level parts, so these rules carry one id level part
   (:not(#vn-fit); no element has that id). The problem gets a full row of its own and its words wrap [QR 33, KB T7.4]. */
.vn-line[data-problem="yes"]:not(#vn-fit), .vn-line[data-fit="wrap"]:not(#vn-fit) { flex-wrap: wrap; row-gap: 8px; }
.vn-line[data-problem="yes"]:not(#vn-fit) > .vn-problem { order: 30; flex: 1 1 100%; min-width: 0; margin: 0 -12px -8px; padding: 8px 12px;
  border-top: 1px solid var(--hair2); background: var(--loss-l); border-radius: 0 0 11px 11px; align-items: flex-start; }
.vn-line[data-problem="yes"]:not(#vn-fit) > .vn-problem span { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.vn-line[data-problem="yes"]:not(#vn-fit) > .vn-problem svg { flex: none; margin-top: 2px; }
.vn-line[data-status="preview"][data-problem="yes"]:not(#vn-fit) > .vn-problem { margin: 0 -11.5px -7.5px; border-radius: 0 0 10.5px 10.5px; }
.vn-line[data-problem="yes"]:not(#vn-fit) > .vn-dchips, .vn-line[data-problem="yes"]:not(#vn-fit) > .vn-chips { flex: 1 1 0; min-width: 56px; }
.vn-line[data-problem="yes"]:not(#vn-fit) > .vn-grow { flex: 0 0 0; min-width: 0; }
.vn-line:not(#vn-fit) > .vn-note { flex-shrink: 1; min-width: 0; }
/* JUDGE Round 10 cross finding 3 (REQ INT to LIVE 56): with the dock (line 608 px at 1280) the applied line kept the 4 px
   floor of its spacer (vn.css) and cut "Best plan" by 2 px. Under 820 px the spacer gives up its floor first; the gaps
   still part the groups, so the step name keeps its words (test stateline-dock.page.mjs) [KB T2 truncation keeps meaning] */
@container vnline (max-width: 820px) {
  .vn-line:not([data-status="preview"]):not(#vn-fit) > .vn-grow { min-width: 0; }
  /* LIVE s81: a longer state text ("Quick result 80 ms, full result running", a server head) gives up its room before the
     step name: it ends with an ellipsis (the whole text stays in its tip) and keeps its dot and its first word (96 px).
     The step shrinks with factor 1 (vn.css FE-18), shrink is shared by factor times width, so the state takes a factor of
     10000: it gives way first, the step name only after the state is at 96 px */
  .vn-line:not([data-status="preview"]):not(#vn-fit) > .vn-st { flex: 0 10000 auto; min-width: 96px; overflow: hidden; }
  .vn-line:not([data-status="preview"]):not(#vn-fit) > .vn-st > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* LIVE s103 (REQ NEO to LIVE 5, box live103a-ws): "Compare with Base ADP" is 54 px wider than "Compare with base" and
     cut "Best plan" by 5 px at 1280 with the dock. Under 820 px the quiet Compare button takes 8 px side padding and a 6 px
     icon gap (10 px back); its words stay whole (test stateline-dock.page.mjs) */
  .vn-line:not([data-status="preview"]):not(#vn-fit) > .vn-btn.quiet[data-a="compare"] { padding: 0 8px; gap: 6px; }
}
/* VN-FIT end */
/* DRAG (LIVE, BUILD-SPEC 3.7 and 8 row B17, J1, J11; web/live/kit/drag.js): cargo drag onto a window on every window grid.
   dg-src the cargo in hand; dg-on a window it can reach (its change from the server probe in .dg-v); dg-no a window it
   cannot reach, hatched, with the reason in .dg-v; dg-over the window under the pointer or the key focus; dg-fault a
   probe that did not price the move. */
[data-drag-cargo] { cursor: grab; touch-action: none; }
.dg-src { opacity: .55; cursor: grabbing; }
.dg-on { outline: 1.5px dashed var(--acc); outline-offset: -2px; }
.dg-over { outline: 2px solid var(--acc-d); outline-offset: -2px; background: var(--acc-t); }
.dg-no { background-image: repeating-linear-gradient(45deg, transparent 0 5px, color-mix(in srgb, var(--muted) 22%, transparent) 5px 7px); cursor: not-allowed; }
/* REQ GATE2 to LIVE (13:58): the label takes no pointer hits, so the window under the hand is the hit (drag.js targetAt) */
.dg-v { display: block; margin-top: 2px; font-size: 11px; line-height: 1.3; color: var(--ink2); white-space: normal; pointer-events: none; }
.dg-no .dg-v { color: var(--muted); }
.dg-fault .dg-v { color: var(--warn); }
.dg-busy, .dg-busy * { -webkit-user-select: none; user-select: none; }
/* DRAG end */
/* STEPS (LIVE, COORDINATOR item 64 (1)): the timeline drawer is the Steps table of the 4875 prototype (proto/app/ui/r6
   draft.css .ap-steps): #, Step, Value, Change, Result, Time, one action; "Applied" as green words, "Undone" as a tag.
   vn.css (lane NEO) loads after this file, so each rule carries .vn-steps (one class level part more). */
.vn-drawer.vn-steps { width: min(820px, 100vw); }
.vn-steps .vn-tl th, .vn-steps .vn-tl td { padding-left: 8px; padding-right: 8px; }
.vn-steps .vn-tl .vn-sn { width: 28px; }
.vn-steps .vn-tl .vn-v { width: 92px; }
.vn-steps .vn-tl .vn-c { width: 80px; }
.vn-steps .vn-tl .vn-lk { width: 96px; color: var(--ink2); }
.vn-steps .vn-tl .vn-res { width: 120px; font-size: 12.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-steps .vn-tl .vn-res-bad { color: var(--loss); }
.vn-steps .vn-tl .vn-tm { width: 48px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.vn-steps .vn-tl .vn-go { width: 150px; }
.vn-steps .vn-tl .vn-sl b { display: inline; }
.vn-steps .vn-tl .vn-sl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-steps .vn-tag { font-size: 11.5px; font-weight: 500; color: var(--ns-t, var(--ink2)); background: var(--ns-f, var(--track)); border: 1px solid var(--ns-b, var(--hair)); border-radius: 6px; padding: 0 5px; margin-left: 4px; }
.vn-steps .vn-cur { background: none; color: var(--acc-tx); padding: 0; height: auto; font-size: 12.5px; }
@media (max-width: 600px) {
  .vn-steps .vn-tl, .vn-steps .vn-tl tbody, .vn-steps .vn-tl tr, .vn-steps .vn-tl td { display: block; width: auto; height: auto; }
  .vn-steps .vn-tl thead { display: none; }
  .vn-steps .vn-tl tr { padding: 6px 0; border-bottom: 1px solid var(--hair); }
  .vn-steps .vn-tl td { border: 0; padding: 2px 4px; white-space: normal; text-align: left; }
  .vn-steps .vn-tl td[data-h]:not(:empty)::before { content: attr(data-h) " "; color: var(--muted); }
}
/* STEPS end */
/* LIVE s73, JUDGE Round 6 VN-05: a read form step with no name shows its number alone, no colon (vn.css .vn-n::after) */
.vn-step .vn-n.vn-solo::after { content: none; }
/* LIVE s78, REQ ENM to LIVE 01:57 (JUDGE Round 8 cross finding 4 shared half; IN-d1, IN-d2, RP-05, RP-06): ONE shared
   stack form for a table box with class t-stack (the RUV H57 form of ru.css .ru-rcw, made shared). .tscroll is an
   inline-size container: under 720 px of box (390, and 1280 with the dock, main about 630 px) each row is a block, the
   key cell on top and each other cell on its own line under its column name (td data-lab), so no table scrolls
   sideways and no word stands alone on a line; the 1440 view keeps the table. The selectors beat the sticky key column
   (ui.css DOCK-RULE), the 390 and dock nowrap rules (the dock rule counts an id, so it gets its own line) and the cell
   height and min-width rules of the page sheets. [KB T2 layout by container width; UI-Review: content never runs past
   its frame] */
@container (max-width: 719.98px) {
  .xm-view .tscroll.t-stack > table.t, .xm-view .tscroll.t-stack > table.t > thead, .xm-view .tscroll.t-stack > table.t > tbody,
  .xm-view .tscroll.t-stack > table.t > tfoot, .xm-view .tscroll.t-stack > table.t tr { display: block; width: auto; min-width: 0; }
  .xm-view .tscroll.t-stack > table.t > thead { display: none; }
  .xm-view .tscroll.t-stack > table.t tr { padding: 8px 0; border-bottom: 1px solid var(--hair2); }
  .xm-view .tscroll.t-stack > table.t th, .xm-view .tscroll.t-stack > table.t td,
  .xm-view .tscroll.t-stack > table.t th:first-child, .xm-view .tscroll.t-stack > table.t td:first-child {
    display: block; position: static; width: auto; min-width: 0; height: auto; border: 0; padding: 2px 0; white-space: normal; text-align: left; background: none; }
  body:has(#xm-dock:not(:empty):not([hidden])) .xm-view .tscroll.t-stack > table.t td { white-space: normal; }
  .xm-view .tscroll.t-stack > table.t td[data-lab]::before { content: attr(data-lab); display: block; font-size: var(--fs-label); color: var(--muted); }
  .xm-view .tscroll.t-stack > table.t td:empty { display: none; }
}
/* LIVE s78, JUDGE Round 9 cross finding 3 (item 59 (4)): the rail tenant card cut the company name ("Calypso
   Commodities..." at 1440 and 1280: the name column is about 110 px, and "Calypso Commodities (demo)" needs 3 lines).
   The name now breaks between words on up to 3 lines (sh.css keeps its clamp form; this rule only raises the count), so
   every seed tenant name shows whole; a longer name still ends with an ellipsis and the full name stays in the tenant
   menu. [KB T2 no clipped label] */
.xm-rail .xm-tenant .tt b { -webkit-line-clamp: 3; line-clamp: 3; overflow-wrap: break-word; }

/* LIVE s133 SHELL-PROTO (JUDGE Round 32 For the lanes 6, COORDINATOR item 72 P2): the applied step line in the 4875
   form (proto/app/ui/style.css 90 to 93 and 308, r6/draft.js stepLineHtml): row 1 Undo, Redo, the bold step text, the
   plan mode, the change, Steps and Compare; row 2 the state; row 3 "In force:" and the chips. vn.css (lane NEO) loads
   after this file, so each rule carries [data-shell="proto"] (one attribute level more than the vn.css rules). */
/* LIVE s135: vn.css keeps the applied line in one row from 900 px by a rule of 4 class level parts, so the proto rows
   carry one id level part (:not(#vn-fit), as VN-FIT). The chips take the rest of row 3 and fold by its room. */
.vn-line[data-shell="proto"]:not(#vn-fit) { flex-wrap: wrap; row-gap: 6px; }
.vn-line[data-shell="proto"]:not(#vn-fit) > .vn-chips { flex: 1 1 0; min-width: 0; overflow: hidden; }
.vn-line[data-shell="proto"]:not(#vn-fit) > .vn-now { flex: 0 1 auto; }
.vn-line[data-shell="proto"] > .vn-br { flex: 0 0 100%; height: 0; margin: 0; padding: 0; }
.vn-line[data-shell="proto"] > .vn-now { font-weight: 650; color: var(--ink); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vn-line[data-shell="proto"] > .vn-now .vn-n { color: inherit; font-weight: inherit; }
.vn-line[data-shell="proto"] > .vn-st, .vn-line[data-shell="proto"] > .vn-inf { font-size: 12.5px; color: var(--muted); }
/* LIVE s151 HEAD-GROUP (D-UT73 and addendum, ANS LIVE to PLAT 5 and 6 (c)): the words that left the 4875 head (New draft,
   the state pill, the open version name, the price set chip) sit in one group of the step line; under 600 px the group
   takes a row of its own and the chip drops its age part (the head rule of before; the chip tip keeps the age) */
.vn-line > .vn-hd { display: inline-flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.vn-line > .vn-hd:empty { display: none; }
.vn-line > .vn-hd .xm-vname { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.vn-line > .vn-hd .xm-price { white-space: nowrap; }
@media (max-width: 600px) {
  .vn-line > .vn-hd { flex: 0 0 100%; order: -1; }
  .vn-line > .vn-hd .xm-price .xm-age { display: none; }
}
/* REQ NEO to LIVE 7 (LIVE s137): the Calculation log link in the head of the Steps list (the 4875 tab row has no log tab) */
.vn-dh a.vn-tl-log { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-top: 4px; padding: 4px 8px; border-radius: 6px; font-size: 13px; font-weight: 550; color: var(--acc-tx); text-decoration: none; white-space: nowrap; }
.vn-dh a.vn-tl-log:hover, .vn-dh a.vn-tl-log:focus-visible { background: var(--acc-t); text-decoration: underline; }
.vn-dh a.vn-tl-log svg { width: 14px; height: 14px; }
/* ANS PLAT to LIVE 12 (LIVE s137, item 72 P2): one sticky step bar as the 4875 .ibar (proto style.css 90): the state line
   and the Results pills stay in view together. The bar holds its own margins (flow root) with the gaps of before (16 px
   under the tabs, between the line and the pills, and above the view); the state line in it is no sticky layer of its
   own; a page coloured band 8 px under the bar keeps cards from showing through when it sticks. */
#xm-main > .xm-ibar { display: flow-root; position: sticky; top: 0; z-index: 30; background: var(--page); }
#xm-ibar > #xm-stateline { position: static; margin-bottom: 0; }
#xm-ibar > #xm-stateline::before { content: none; }
#xm-ibar > .vn-line + #xm-subs .xm-subtabs { margin-top: 16px; }
#xm-ibar .xm-subtabs { margin-bottom: 0; }
#xm-ibar:has(> #xm-stateline.vn-line), #xm-ibar:has(.xm-subtabs) { box-shadow: 0 8px 0 var(--page); }
/* PORT73 CHROME (item 73, s89 Luecke 6): die Schrittleiste steht wie 4875 .ibar inline unter den Reitern (proto/app/ui/
   style.css 90 bis 93: padding 10px 0, eine Haarlinie darunter, keine Karte; 308 .ibar .pmode). Die Linie selbst zeichnet
   keinen Rahmen, keinen Schatten und kein Polster; der Abstand zu den Reitern ist das Polster der Leiste (der sh.css-
   Bruecken-Abstand 16 px faellt weg). Der Problemblock (No plan, Failed, Lesefehler) wird ein eigener Kasten statt der
   Kartenunterkante. Die Entwurfsform (data-shell draft, gestrichelter Rahmen) bleibt, wie sie ist. Test chrome73-stateline */
.vn-line[data-shell="proto"]:not(#vn-fit) { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; min-height: 0; margin: 0; }
#xm-main > .xm-ibar:has(> #xm-stateline[data-shell="proto"]) { padding: 10px 0; border-bottom: 1px solid var(--hair); }
.vn-line[data-shell="proto"] > .vn-mode { height: auto; font-size: 12px; font-weight: 500; color: var(--muted); background: transparent; box-shadow: none; border: 1px solid var(--hair); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.vn-line[data-shell="proto"]:not(#vn-fit) > .vn-problem { margin: 0; border: 1px solid var(--loss-b, #E7C3BE); border-radius: 8px; }