/* assets/css/ru.css · Lane RU · template (f) cards. Class prefix .ru-. Colours only from tokens.css. */
.ru-kpis { margin-bottom: 0; }
.ru-stc .ru-dot, .ru-stage .ru-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.stc.quick .ru-dot, .ru-quick .ru-dot { background: transparent; border: 1.5px solid currentColor; animation: ru-pulse 1.2s ease-in-out infinite; }
@keyframes ru-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .stc.quick .ru-dot, .ru-quick .ru-dot { animation: none; } }
/* U5 What if */
.ru-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ru-ev { min-height: 32px; }
.ru-ev:focus-visible { outline: none; box-shadow: var(--focus); }
.ru-answer { border: 1px solid var(--hair); border-radius: var(--r-md); padding: 16px; background: var(--surface-2); transition: border-color var(--t-fast), background-color var(--t-fast); }
.ru-answer.bad { border-color: var(--loss-b); background: var(--loss-l); }
.ru-answer.warn { border-color: var(--ns-b); background: var(--ns-f); }
.ru-answer.ru-quick { border-style: dashed; }
.ru-ans-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ru-ans-h b { font-size: var(--fs-body); font-weight: 600; }
.ru-ans-edit { color: var(--ink2); font-size: var(--fs-tab); }
.ru-ans-h .ru-rm { margin-left: auto; }
.ru-stage { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; font-size: var(--fs-label); font-weight: 600; color: var(--muted); }
.ru-answer.bad .ru-stage { color: var(--loss); }
.ru-lines { margin: 4px 0 12px; padding-left: 20px; font-size: var(--fs-body); line-height: 1.5; font-variant-numeric: tabular-nums; }
.ru-moves { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: var(--fs-label); color: var(--muted); }
.ru-idle { margin: 0; color: var(--muted); font-size: var(--fs-body); }
/* U3 Terminal tank */
.ru-tank svg text { font-family: inherit; font-variant-numeric: tabular-nums; }
.ru-tick { font-size: 11px; fill: var(--muted); }
.ru-lab { font-size: 12px; fill: var(--ink2); }
.ru-lab.strong { font-weight: 600; fill: var(--ink); }
.ru-grid { stroke: var(--grid); stroke-width: 1; }
.ru-slot { fill: var(--acc-t); opacity: .7; }
.ru-ref { fill: none; stroke: var(--plain-d); stroke-width: 1.2; stroke-dasharray: 4 4; } /* RUV H44 PV-14: the U3 floor is a step path; no fill, no black block */
.ru-ref.warn { stroke: var(--warn); }
.ru-ref.bad { stroke: var(--loss); }
.ru-line { fill: none; stroke: var(--acc); stroke-width: 2; stroke-linejoin: round; }
.ru-lo { fill: var(--card); stroke: var(--acc-d); stroke-width: 2; }
.ru-arr circle { stroke: var(--card); stroke-width: 2; }
.ru-arr.spa circle { fill: var(--src-4); } .ru-arr.std circle { fill: var(--src-6); } /* same colour per seller as data/names.js */
.ru-arr text:first-of-type { font-size: 11px; font-weight: 700; fill: var(--on-acc); }
.ru-arr:focus-visible circle { stroke: var(--acc); stroke-width: 3; outline: none; }
.ru-cross { stroke: var(--axis); stroke-width: 1; }
.ru-line.base { stroke: var(--plain); stroke-width: 1.5; }
.ru-line.ev { stroke: var(--acc); stroke-width: 2.2; }
.ru-line.ev.bad { stroke: var(--loss); }
.ru-lo.bad { stroke: var(--loss); }
.ru-lab.bad { fill: var(--loss); font-weight: 600; }
.ru-arr.ghost circle { fill: var(--plain-d); } .ru-arr.ghost text.ru-lab { fill: var(--muted); font-weight: 500; }
.ru-go { cursor: pointer; font: inherit; font-size: var(--fs-label); font-weight: 600; transition: border-color var(--t-fast), color var(--t-fast); }
.ru-go:hover { border-color: var(--acc); color: var(--acc-tx); }
.ru-go:focus-visible { outline: none; box-shadow: var(--focus); }
.card.xf.ru-flash { border-color: var(--acc); box-shadow: var(--focus); }
/* U22 One ADP, three cases */
.ru-weights { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; font-size: var(--fs-label); color: var(--muted); }
.ru-weights .muted { margin-left: 8px; }
.ru-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-tab); font-variant-numeric: tabular-nums; }
.ru-tbl th, .ru-tbl td { padding: 8px 12px; border-bottom: 1px solid var(--hair2); text-align: right; white-space: nowrap; }
.ru-tbl th:first-child { text-align: left; }
.ru-tbl thead th { font-size: var(--fs-label); font-weight: 600; color: var(--muted); }
.ru-tbl tbody th { font-weight: 600; color: var(--ink); }
.ru-tbl tbody th .pill { margin-left: 8px; }
.ru-tbl tr.ref td, .ru-tbl tr.ref th { color: var(--muted); }
.ru-tbl td.strong { font-weight: 600; background: var(--added); }
.ru-dcell { display: inline-flex; align-items: center; gap: 12px; justify-content: flex-end; }
.ru-dtrack { position: relative; width: 96px; height: 8px; border-radius: 4px; background: var(--track); }
.ru-dtrack::after { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--axis); }
.ru-db { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.ru-db.p { background: var(--acc); } .ru-db.n { background: var(--loss); opacity: .8; }
.ru-dcell > span:last-child { min-width: 56px; display: inline-block; }
.ru-verdict { margin: 16px 0 0; font-size: var(--fs-body); color: var(--ink2); line-height: 1.5; }
.ru-verdict b { color: var(--ink); font-weight: 600; }

/* U2 Gas balance, U4 Arrival windows (session 2). [KB T5 4/8 grid] [KB T6.11 direct labels] */
.ru-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 40px; padding: 4px 0 12px; margin-bottom: 4px; border-bottom: 1px solid var(--hair2); font-size: var(--fs-body); }
.ru-st-day { font-weight: 700; min-width: 48px; }
.ru-st-eq { font-weight: 600; margin-right: 4px; }
.ru-strip .ru-try { margin-left: auto; }
.ru-st-k { display: inline-flex; flex-direction: column; gap: 2px; }
.ru-st-k .lab { font-size: var(--fs-label); color: var(--muted); }
.ru-st-k b { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.ru-st-op { font-size: 18px; color: var(--muted); align-self: flex-end; padding-bottom: 1px; }
.ru-st-u { align-self: flex-end; font-size: var(--fs-label); margin-left: 4px; padding-bottom: 3px; }
.ru-bal svg text, .ru-wgrid { font-variant-numeric: tabular-nums; }
.ru-b.pipe { fill: var(--src-5); } .ru-b.send { fill: var(--acc); } .ru-b.fuel { fill: var(--plain-d); }
/* [KB T6 emphasis by contrast] quiet days at 0.6, the picked and the hovered day at full colour */
.ru-day .ru-b { opacity: .6; transition: opacity var(--t-fast); }
.ru-day .ru-b.unmet { fill: var(--loss); opacity: .75; }
.ru-day.sel .ru-b, .ru-day.hov .ru-b { opacity: 1; }
.ru-day.step0 .ru-b { opacity: .28; }
.ru-day.sel .ru-b { stroke: var(--ink); stroke-width: 1.5; }
.ru-dem { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 3; }
.ru-tick.neg { fill: var(--loss); }
.ru-mb.dem { fill: var(--plain); } .ru-mb.lng { fill: var(--acc); }
.ru-k { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; }
.ru-k .lab { font-size: var(--fs-label); color: var(--muted); margin-right: 4px; }
.ru-kb { min-width: 28px; height: 28px; border: 1px solid var(--hair); border-radius: 8px; background: var(--card); color: var(--ink2); font: inherit; font-size: var(--fs-label); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); }
.ru-kb:hover { border-color: var(--acc); }
.ru-kb.on { background: var(--acc-t); border-color: var(--acc-l); color: var(--acc-tx); }
.ru-kb:focus-visible { outline: none; box-shadow: var(--focus); }
.ru-wwrap { overflow-x: auto; }
.ru-wgrid { display: grid; gap: 4px; min-width: 720px; }
.ru-wh { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 0 0 4px; font-size: var(--fs-label); }
.ru-wh b { font-weight: 600; color: var(--ink); }
.ru-mts { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; min-height: 20px; }
.ru-mt { font-size: 11px; font-weight: 600; line-height: 18px; padding: 0 4px; border-radius: 4px; color: var(--ink2); background: var(--surface-2); border-left: 3px solid var(--c, var(--plain)); }
.ru-mt.drop { text-decoration: line-through; color: var(--muted); border-left-color: var(--plain); }
.ru-mt.maybe { border-left-style: dashed; color: var(--muted); }
.ru-wl { display: flex; align-items: center; font-size: var(--fs-label); color: var(--muted); white-space: nowrap; }
.ru-wc { position: relative; height: 48px; border: 1px solid var(--hair2); border-radius: 8px; background: var(--card); display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; padding: 4px; font: inherit; cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast); }
.ru-wc:hover { border-color: var(--acc-l); box-shadow: var(--sh-lift); }
.ru-wc:focus-visible { outline: none; box-shadow: var(--focus); }
.ru-wc.has { background: var(--acc-t); border-color: var(--acc-l); }
.ru-wc.has.ev { background: var(--added); }
.ru-wc.noslot { background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--card) 6px 12px); }
.ru-ns { font-size: 11px; color: var(--muted); font-weight: 500; }
.ru-wv { font-size: 13px; font-weight: 700; }
.ru-wv.pos { color: var(--acc-tx); } .ru-wv.neg { color: var(--acc-tx); }
.ru-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; background: var(--c); color: var(--on-acc); font-size: 11px; font-weight: 700; }
.ru-held .ru-wc { opacity: .55; }
.ru-pop .ru-pt { display: flex; align-items: center; gap: 8px; color: var(--ink2); }
/* RUV H51: U4 window popover, Move here row (cargo name) and its day buttons (u-move drafts) */
.ru-pop .ru-pm { display: flex; align-items: center; gap: 8px; color: var(--ink2); }
.ru-pop .ru-pmd { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px 8px; }
/* RUV H52 (FINDING-RUV-20): the value of each popover op (probe root upop) next to its button */
.ru-pop .ru-opw { display: inline-flex; align-items: center; gap: 4px; }
.ru-pop .ru-opv { font-size: 12px; color: var(--ink2); padding: 0 8px; }
.ru-pop .ru-opw .ru-opv { padding: 0 4px 0 0; }
.ru-pop .ru-opv:empty { display: none; }
.pop-h .r.pos { color: var(--acc-tx); } .pop-h .r.neg { color: var(--acc-tx); }
.ru-evbar { stroke: var(--loss); stroke-width: 2; stroke-linecap: round; }
.ru-wc.s0 { background: var(--card); border-style: dashed; } .ru-wc.s0 .ru-wv { color: var(--muted); }
/* RU-04 Prices */
.ru-pl { fill: none; stroke-width: 2; stroke-linejoin: round; opacity: .9; }
.ru-pl.best { stroke-width: 3; opacity: 1; }
.ru-ptbl { margin-bottom: 24px; }
.ru-ptbl td.ru-hi { font-weight: 700; color: var(--loss); } .ru-ptbl td.ru-lo2 { font-weight: 700; color: var(--acc-tx); }
.ru-flat { display: flex; align-items: center; gap: 12px; color: var(--ink2); font-weight: 600; }
.ru-flat i { flex: 1; height: 1px; background: var(--hair); }
.ru-sub { margin: 0 0 8px; font-size: var(--fs-label); font-weight: 600; color: var(--muted); text-transform: none; }
.ru-f { font-variant-numeric: tabular-nums; color: var(--ink2); }
.ru-note { margin: 0 0 12px; font-size: var(--fs-body); color: var(--ink2); font-variant-numeric: tabular-nums; }
.ru-note b { color: var(--ink); margin-right: 4px; }
/* RUV H55 (REQ ENU to RUV 51): the surplus rule line of U1 sits under the KPI tiles */
.ru-note.ru-surplus { margin: 12px 0 0; }
.ru-sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.ru-pl.dash { stroke-dasharray: 6 4; } /* Spot and STD-1 both follow JKM: the dash keeps them apart without colour alone [QR 22] */
/* RU-02 Supply */
.ru-two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 1100px) { .ru-two { grid-template-columns: 1fr; gap: 24px; } }
.ru-k1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.ru-k1 .lab { flex-basis: 100%; font-size: var(--fs-label); color: var(--muted); }
.ru-k1 b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ru-k1 small { font-size: 13px; color: var(--muted); font-weight: 600; }
.ru-range { padding: 4px 0 24px; }
.ru-rt { position: relative; height: 8px; border-radius: 4px; background: var(--track); }
.ru-rb { position: absolute; top: 0; bottom: 0; background: var(--acc-t); border: 1px solid var(--acc-l); border-radius: 4px; }
/* range mark (was .ru-rm, which clashed with the U5 Remove event button) */
.ru-rmk { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--axis); }
.ru-rml { position: absolute; top: 14px; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ru-rml.l { transform: translateX(-100%); } .ru-rml.r { transform: translateX(-100%); }
.ru-rml.up { top: -22px; } /* a middle mark goes above the track so no label overlaps [QR no overlap] */
.ru-range { padding-top: 20px; }
.ru-rd { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--acc); border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--acc-d); }
.ru-rcell { width: 30%; min-width: 200px; } .ru-rcell .ru-range { padding: 0; }
.ru-ctbl td { vertical-align: middle; }
.ru-co { margin-left: 8px; font-size: var(--fs-label); }
.ru-scroll { max-height: 480px; overflow: auto; }
.ru-blk td { background: var(--loss-l); }
/* RUV H39 (LOOK s41 RU-02 "num neg" 4.14:1): a negative number on the loss tint takes --err, as LIVE's token rule (ui.css) */
.ru-answer.bad .neg, .ru-blk td .neg, .ru-wk.bad .neg, .ru-st-hero.bad .neg { color: var(--err); }

/* ---------- RU-03 Security and sales (session 3) ---------- */
/* [KB T2 one hero number per card] hero line, quiet hint at the end of the same baseline */
.ru-hint { font-size: var(--fs-label); margin-left: 8px; }
.ru-k1 .pill { align-self: center; }
/* U14 weekly lowest strip: five equal cells, 8 px grid */
.ru-wks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.ru-wk { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border: 1px solid var(--hair2); border-radius: 8px; background: var(--card); min-height: 72px; box-sizing: border-box; }
.ru-wk .lab { font-size: var(--fs-label); color: var(--muted); }
.ru-wk b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.ru-wk b small { font-size: 12px; font-weight: 600; color: var(--muted); }
.ru-wk > small { font-size: 11px; color: var(--muted); }
.ru-wk.bad { border-color: var(--loss-b); background: var(--loss-l); }
.ru-wk.bad b { color: var(--loss); }
.ru-wk.none b { color: var(--muted); font-weight: 600; }
.ru-zone { fill: var(--loss-l); opacity: .55; }
.ru-wkl { stroke: var(--hair2); stroke-width: 1; stroke-dasharray: 2 4; }
.ru-axis { stroke: var(--axis); stroke-width: 1; }
/* U15 stress table: before as quiet track, after as red bar on one 0 to 1.5 scale */
.ru-stbl td { vertical-align: middle; }
.ru-stbl td .sub { display: block; font-size: var(--fs-label); color: var(--muted); margin-top: 2px; white-space: normal; }
.ru-stbl tr.ref td { color: var(--muted); }
.ru-srow { cursor: pointer; transition: background-color .12s ease; }
.ru-srow:hover td { background: var(--hover, var(--acc-t)); }
.ru-srow:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.ru-srow.open td { background: var(--acc-t); border-bottom-color: transparent; }
.ru-sexp td { background: var(--acc-t); padding-top: 0; }
.ru-sexp .ru-lines { margin: 0 0 8px; }
/* RUV H180 (REQ INT to RUV 113): live, the event line of an open Stress tests row leads the lines with no number */
.ru-sexp .ru-lines li.ru-lev { list-style: none; margin-left: -20px; font-weight: 600; }
.ru-sbar { display: inline-flex; align-items: center; gap: 12px; }
.ru-strk { position: relative; width: 160px; height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.ru-strk i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.ru-strk i.b { background: var(--plain-d); opacity: .55; }
.ru-strk i.a { background: var(--loss); }
.ru-sbar .num { min-width: 104px; font-variant-numeric: tabular-nums; }
.ru-acts { text-align: right; white-space: nowrap; }
.ru-acts .btn { margin-right: 8px; }
.ru-chev { display: inline-block; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .15s ease; margin: 0 4px 2px; }
.ru-srow.open .ru-chev { transform: rotate(225deg); margin-bottom: -2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* U18 hero row of four, horizontal waterfall */
.ru-k3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 24px; margin: 0 0 8px; }
.ru-k3 .ru-k1 { margin: 0 0 8px; }
.ru-k1.q b { font-size: 18px; color: var(--ink2); }
.ru-whit { fill: transparent; }
.ru-wrow:hover .ru-whit, .ru-wrow:focus .ru-whit { fill: var(--acc-t); }
.ru-wrow:focus { outline: none; }
.ru-wb.up { fill: var(--acc); } .ru-wb.down { fill: var(--loss); opacity: .85; } .ru-wb.end { fill: var(--acc-d); stroke: var(--ink); stroke-width: 1; }
.ru-wcon { stroke: var(--axis); stroke-dasharray: 2 3; }
/* U19 sales rows */
.ru-sale { padding: 16px 0; border-top: 1px solid var(--ctl); }
.ru-sale:first-of-type { border-top: 0; padding-top: 8px; }
.ru-sh { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ru-sh .muted { font-size: var(--fs-label); }
.ru-sbarw { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.ru-hb { flex: 0 0 60%; height: 20px; border-radius: 4px; background: var(--track); position: relative; align-self: center; overflow: hidden; }
.ru-hb i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; transition: width .25s ease; }
.ru-sbarw b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 8px; }
.ru-sbarw small { font-size: 12px; color: var(--muted); font-weight: 600; }
.ru-dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; }
.ru-dl dt { font-size: var(--fs-label); color: var(--muted); margin-bottom: 4px; }
.ru-dl dd { margin: 0; font-size: var(--fs-body); color: var(--ink); line-height: 1.4; }
@media (max-width: 1100px) { .ru-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ru-k3 { grid-template-columns: 1fr 1fr; } }
/* U24 lanes */
.ru-in { font-size: 11.5px; font-weight: 600; fill: #fff; }
.ru-gap { fill: none; stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 5 4; }
.ru-bseg { cursor: default; }
.ru-bseg:hover rect, .ru-bseg:focus rect { filter: brightness(1.08); }
.ru-bseg:focus { outline: none; }
/* U15 at 1280: event column keeps two lines at most, no inner scroll */
.ru-stbl th:first-child, .ru-stbl td:first-child { min-width: 232px; white-space: normal; }
.ru-stbl td:first-child b { white-space: nowrap; }
@media (max-width: 1360px) {
  .ru-strk { width: 96px; } .ru-sbar { gap: 8px; } .ru-sbar .num { min-width: 0; white-space: nowrap; }
  /* session 8: the table fits the card at 1280; long verdicts wrap inside their pill [QR no clipped label] */
  .ru-stbl th:first-child, .ru-stbl td:first-child { min-width: 0; width: 216px; }
  .ru-stbl thead th { white-space: normal; vertical-align: bottom; }
  .ru-stbl td .pill { white-space: nowrap; }
  .ru-stbl .ru-acts .btn { margin-right: 4px; }
}
/* U11 January berth lanes: 31 day columns on one grid [KB T6 Gantt lanes] */
.ru-gantt { display: flex; flex-direction: column; gap: 4px; }
.ru-gl { display: grid; grid-template-columns: 168px 1fr; align-items: center; gap: 16px; }
.ru-gh b { display: block; font-size: var(--fs-body); }
.ru-gh .muted { font-size: var(--fs-label); }
.ru-gd { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 2px; }
.ru-gc { height: 28px; border-radius: 3px; background: var(--track); border: 0; padding: 0; font: inherit; }
.ru-gc.ours { background: var(--acc-l); }
.ru-gc.other { background: repeating-linear-gradient(135deg, var(--plain) 0 3px, transparent 3px 7px), var(--added); }
.ru-gc.free { background: var(--added); outline: 1px dashed var(--hair); outline-offset: -1px; }
.ru-gc.ship { background: var(--c); color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.ru-gc.ship:hover, .ru-gc.ship:focus-visible { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.18); outline: none; }
.ru-gc.ship.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.ru-gc.buf { background: transparent; outline: 1.5px dashed var(--c); outline-offset: -2px; }
.ru-gl.ticks .ru-gd { height: 16px; }
.ru-gt { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ru-glg { display: flex; gap: 16px; margin: 12px 0 0 184px; font-size: var(--fs-label); color: var(--muted); flex-wrap: wrap; }
.ru-glg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
.ru-glg i.ours { background: var(--acc-l); } .ru-glg i.other { background: repeating-linear-gradient(135deg, var(--plain) 0 3px, transparent 3px 6px), var(--added); }
.ru-glg i.free { background: var(--added); outline: 1px dashed var(--hair); } .ru-glg i.buf { outline: 1.5px dashed var(--plain-d); }
.ru-gsel { margin: 12px 0 0 184px; }
/* U23 slots */
.ru-slk { margin-bottom: 8px; }
.ru-cap { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; font-size: var(--fs-label); }
.ru-cap .lab { color: var(--muted); margin-right: 6px; }
.ru-cap i { width: 20px; height: 8px; border-radius: 4px; background: var(--track); }
.ru-cap i.on { background: var(--warn); }
.ru-cap .muted { margin-left: 6px; }
.ru-req td { background: var(--added); }
.ru-mg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.ru-mc { display: flex; flex-direction: column; gap: 8px; min-height: 112px; padding: 8px; border: 1px solid var(--hair2); border-radius: 8px; box-sizing: border-box; transition: border-color .12s ease; }
.ru-mc:hover, .ru-mc:focus-visible { border-color: var(--ctl); outline: none; }
.ru-mc.req { border-color: var(--warn); background: var(--added); }
.ru-mc b { font-size: var(--fs-body); }
.ru-mk { display: flex; gap: 4px; }
.ru-mk i, .ru-mlg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.ru-mk i.u, .ru-mlg i.u { background: var(--acc-l); }
.ru-mk i.x, .ru-mlg i.x { background: transparent; outline: 1.5px solid var(--warn); outline-offset: -1.5px; }
/* RUV H26: a free granted slot of the month (views.f.slots.byMonth[i].release) */
.ru-mk i.f, .ru-mlg i.f { background: transparent; outline: 1.5px solid var(--acc-l); outline-offset: -1.5px; }
.ru-mtx { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ru-mlg { margin-left: 0; }
/* U23 at every width: 2 rows of 6 months, so a request chip never clips */
.ru-mg { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ru-mc { min-height: 96px; }
.ru-mts { font-size: 12px; line-height: 1.35; }
.ru-mtx .pill { white-space: nowrap; }
.ru-mts { display: block; } .ru-mts::first-letter { text-transform: uppercase; }

/* ---------- session 4: designed states (IA 7.10), U25 Unmet gas, U12 build-up rows ---------- */
/* [QR 18] loading keeps each card frame; the head shows its real title, the body pulses */
.ru-skc .xf-tools { visibility: hidden; }
.ru-skc .xf-body { min-height: 96px; }

/* [KB T6 one hero number] U25: the unmet total is the hero, two classes on one scale, the way out on the right */
.ru-unmet { border-color: var(--loss-b); box-shadow: inset 3px 0 0 var(--loss); }
.ru-um { display: grid; grid-template-columns: 200px minmax(0, 1fr) 280px; gap: 32px; align-items: start; }
@media (max-width: 1180px) { .ru-um { grid-template-columns: 200px minmax(0, 1fr); } .ru-um-x { grid-column: 1 / -1; } }
.ru-um-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ru-um-k .lab { flex-basis: 100%; font-size: var(--fs-label); color: var(--muted); }
.ru-um-k b { font-size: var(--fs-hero); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ru-um-k small { font-size: 13px; color: var(--muted); font-weight: 600; }
.ru-um-k .pill { margin-top: 8px; }
.ru-um-r { display: grid; grid-template-columns: 136px minmax(0, 1fr) 56px; gap: 12px; align-items: center; height: 40px; }
.ru-um-l { display: flex; flex-direction: column; line-height: 16px; font-size: var(--fs-body); }
.ru-um-l .muted { font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.ru-um-t { height: 12px; border-radius: 6px; background: var(--loss-l); position: relative; overflow: hidden; }
.ru-um-t i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--loss); }
.ru-um-t i.i { opacity: .7; }
.ru-um-r .num { text-align: right; font-variant-numeric: tabular-nums; }
.ru-um-why, .ru-um-fix { margin: 8px 0 0; font-size: var(--fs-body); color: var(--ink2); line-height: 20px; }
.ru-um-fix { margin: 0; }
.ru-um-a { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* overflow state: long name form, cut in the middle; the full text is the tooltip */
.ru-mid { cursor: help; border-bottom: 1px dotted var(--muted-l); }

/* [KB T6 drill-down in place] U12 rows open their landed build-up */
.ru-xt tbody tr.ru-xrow { cursor: pointer; transition: background-color .12s; }
.ru-xt tbody tr.ru-xrow:hover { background: var(--acc-t); }
.ru-xt tbody tr.ru-xrow:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.ru-xt tbody tr.ru-xrow.on { background: var(--acc-t); }
.ru-car { display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 0; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.ru-xrow.on .ru-car { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .ru-car, .ru-xt tbody tr.ru-xrow { transition: none; } }
.ru-xr td { background: var(--acc-t); padding-top: 4px; padding-bottom: 12px; }
.ru-bu { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ru-bt { display: inline-flex; flex-direction: column; gap: 2px; min-width: 112px; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--hair); }
.ru-bt .lab { font-size: var(--fs-label); color: var(--muted); }
.ru-bt b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ru-bt .muted { font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.ru-bt.hi b { color: var(--acc-tx); }
.ru-op { font-size: 16px; font-weight: 600; color: var(--muted); }
.ru-sep { width: 1px; align-self: stretch; background: var(--acc-l); margin: 0 4px; }
.ru-bf { margin: 8px 0 0; font-size: var(--fs-small); }

.ru-xt .ru-cid { width: 72px; text-align: left; white-space: nowrap; }
.ru-xt th.ru-cid { padding-left: 30px; }
/* RUV H203 (REQ INT to RUV 120 (4), RU-02 Cargo plan): live with the hover kit the cargo mark is the row head th.ru-rh; it keeps
   the look of the td it replaces (table.t.tight td: 8 px 12 px, hair2 line, middle) and takes the focus ring of the row */
.ru-xt tbody th.ru-rh { padding: 8px 12px; font-size: inherit; font-weight: 400; line-height: inherit; color: var(--muted); border-bottom: 1px solid var(--hair2); vertical-align: middle; text-align: left; }
.ru-xt tbody th.ru-rh:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
@container rucard (max-width: 759.98px) { .ru-xt tbody th.ru-rh { font-size: var(--fs-label); } }

/* U3 Cargo late band (quick answer, cargoes held) */
.ru-lateb { fill: var(--warn); fill-opacity: .14; stroke: var(--warn); stroke-opacity: .5; stroke-dasharray: 4 3; }
.ru-lab.warn { fill: var(--ns-t); font-weight: 600; }

/* U4 session 5: row of the month's cargoes without a day (G3) */
.ru-wl.mrow { color: var(--ink2); }
.ru-wc.mc { height: auto; min-height: 48px; cursor: pointer; }
.ru-wc.mc.none { cursor: default; background: transparent; border-style: dashed; color: var(--muted); font-size: var(--fs-label); }
.ru-wc.mc.none:hover { box-shadow: none; border-color: var(--hair2); }
.ru-tag.x { box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--c); }
.ru-wnote { margin-top: 8px; font-size: var(--fs-label); color: var(--muted); display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ru-wnote .ru-tag { min-width: 22px; }
.ru-wnote span.k { display: inline-flex; gap: 6px; align-items: center; }

/* Session 5: event outside January on a January chart */
.ru-offj { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); color: var(--ink2); font-size: var(--fs-body); line-height: 20px; }
.ru-offj svg { flex: none; margin-top: 2px; color: var(--muted); }
.ru-offj b { color: var(--ink); font-weight: 600; }
/* RUV H102 (item 70 (a)): live, the January note is two status chips, no sentence */
.ru-offj.ru-offj-c { flex-wrap: wrap; gap: 6px; padding: 0; background: none; }

/* ---------- Session 6: U10 and U13 drill-down, U12 sticky head and foot ---------- */
/* [KB T6 small multiples] twelve month cells on one scale inside a build-up row */
.ru-ms { margin-top: 12px; }
.ru-msl { display: block; margin-bottom: 4px; font-size: var(--fs-label); color: var(--muted); }
.ru-msg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; max-width: 720px; }
.ru-msc { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; border-radius: 6px; background: var(--surface); border: 1px solid var(--hair); }
.ru-msc b { font-size: var(--fs-small); font-weight: 600; line-height: 16px; }
.ru-msc b.neg { color: var(--loss); }
.ru-msc .lab { font-size: var(--fs-small); color: var(--muted); line-height: 16px; }
.ru-msb { position: relative; width: 12px; height: 32px; display: flex; align-items: flex-end; }
.ru-msb i { display: block; width: 12px; border-radius: 2px; background: var(--acc); opacity: .55; }
.ru-msc.hi .ru-msb i.p { opacity: 1; }
.ru-msb.s { height: 40px; align-items: stretch; }
.ru-msb.s::after { content: ''; position: absolute; left: -4px; right: -4px; top: 20px; border-top: 1px solid var(--ctl); }
.ru-msb.s i { position: absolute; left: 0; }
.ru-msb.s i.p { bottom: 20px; }
.ru-msb.s i.n { top: 20px; background: var(--loss); opacity: 1; }
.ru-bf .btn { margin-left: 8px; vertical-align: baseline; }
.ru-spa { display: flex; gap: 8px; align-items: baseline; margin: 12px 0 0; }
.ru-spa .chip { flex: none; }
.ru-spa b { margin-right: 4px; }
.ru-ctbl.ru-xt td.ru-cid { white-space: nowrap; }
/* U12: the head and the total stay in view while the 26 rows scroll */
.ru-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--card); }
.ru-scroll tfoot td { position: sticky; bottom: 0; z-index: 1; background: var(--card); box-shadow: 0 -1px 0 var(--hair); }
/* a pill keeps its own fill on a picked or a red row (same tint as the row otherwise) */
.ru-xrow.on .pill, .ru-blk .pill { background: var(--card); box-shadow: inset 0 0 0 1px var(--hair); }
/* a jump to a card lands below the sticky step bar */
.ru-page .ru-card { scroll-margin-top: 88px; }
/* RU-04 U21: the answer band (months where STD-1 lands below pipeline gas) and the JKM year range */
.ru-band { fill: var(--acc-t); }
.ru-ans { margin-bottom: 8px; }
.ru-bym { margin-left: 8px; font-size: var(--fs-label); }
/* U2 Months under Cold spell: the added May demand, dashed on top of the step 0 bar */
.ru-mb.add { fill: var(--warn); fill-opacity: .22; stroke: var(--warn); stroke-width: 1.2; stroke-dasharray: 3 2; }

/* ---------- Session 7: U3 Daily ledger ---------- */
.ru-ledger .ru-scroll { max-height: 432px; border: 1px solid var(--hair); border-radius: 8px; }
.ru-lg { width: 100%; }
.ru-lg th[scope="row"] { white-space: nowrap; font-weight: 500; }
.ru-lg th[scope="row"] .pill { margin-left: 8px; }
.ru-lg tr.arr td, .ru-lg tr.arr th { background: var(--acc-t); }
.ru-lg tr.low td, .ru-lg tr.low th { background: var(--ns-f); }
.ru-lg tr.ru-lg-none th { color: var(--muted); font-weight: 400; }
.ru-lg .ru-lg-id { color: var(--ink2); font-size: var(--fs-label); margin-left: 4px; }
.ru-lg .ru-lg-sub { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-small); }
.ru-lg tfoot th, .ru-lg tfoot td { position: sticky; bottom: 0; z-index: 1; background: var(--card); box-shadow: 0 -1px 0 var(--hair); font-weight: 600; }
.ru-lg-cap { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 0 0 12px; color: var(--ink2); font-size: var(--fs-body); line-height: 20px; }
/* row heads sit on the same line and padding as the cells (shared th is a column head style) */
.ru-lg tbody th, .ru-lg tfoot th { padding: 8px 12px; font-size: var(--fs-body); color: var(--ink); vertical-align: middle; border-bottom: 1px solid var(--hair2); line-height: 20px; }
.ru-lg tbody td { line-height: 20px; }
.ru-lg tr.ru-lg-none td.muted { font-size: var(--fs-label); }
/* U18 under Price move: the added STD-1 cost and the spot cargo that drops out (session 7) */
.ru-wb.add { fill: var(--warn); fill-opacity: .25; stroke: var(--warn); stroke-width: 1.2; stroke-dasharray: 3 2; }
.ru-wb.out { fill: none; stroke: var(--loss); stroke-width: 1.2; stroke-dasharray: 4 3; }
.ru-pm { margin-top: 12px; }

/* U19 session 8: revenue build-up per GSA [KB T6 drill-down in place] */
.ru-sh .ru-bub { margin-left: auto; }
.ru-bub[aria-expanded="true"] .ru-car { transform: rotate(45deg); }
.ru-bub .ru-car { margin: 0 8px 2px 0; }
.ru-sbu { margin-top: 16px; padding: 16px; border-radius: var(--r-md); background: var(--acc-t); }
.ru-sbu .ru-bf .lab { font-size: var(--fs-label); color: var(--muted); margin-right: 4px; }
.ru-sbu .ru-bf b { font-variant-numeric: tabular-nums; }

/* U3 session 8: a ledger row marks its day in the chart [KB T6 linked views] */
.ru-pinl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 32px; margin: 0 0 8px; font-size: var(--fs-small); }
.ru-pinl .num { font-variant-numeric: tabular-nums; color: var(--ink); }
.ru-pinl .btn { margin-left: auto; }
.ru-cross.ru-pin { stroke: var(--acc); stroke-width: 1.5; stroke-dasharray: 3 3; }
.ru-pind { fill: var(--card); stroke: var(--acc); stroke-width: 2; pointer-events: none; }
.ru-lg tbody tr.ru-lgr { cursor: pointer; transition: background-color .12s; }
.ru-lg tbody tr.ru-lgr:hover td, .ru-lg tbody tr.ru-lgr:hover th { background: var(--acc-l); }
.ru-lg tbody tr.ru-lgr:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.ru-lg tbody tr.ru-lgr.on td, .ru-lg tbody tr.ru-lgr.on th { box-shadow: inset 0 -1px 0 var(--acc), inset 0 1px 0 var(--acc); }
@media (prefers-reduced-motion: reduce) { .ru-lg tbody tr.ru-lgr { transition: none; } }
/* U24 session 8: one part in focus, the others quiet */
.ru-bseg { transition: opacity .12s; }
.ru-bseg.dim { opacity: .38; }
.ru-bseg:focus-visible rect { stroke: var(--ink); stroke-width: 2; }
.ru-gap { pointer-events: all; }
@media (prefers-reduced-motion: reduce) { .ru-bseg { transition: none; } }
.ru-bseg text { pointer-events: none; }
/* U22 session 8: weighted value as a build-up above the table */
.ru-wsum { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; font-size: var(--fs-small); color: var(--muted); }
.ru-wsum b { color: var(--ink); font-weight: 600; }
.ru-wsum .num { font-variant-numeric: tabular-nums; margin-left: 8px; }
.ru-wsum b.neg { color: var(--loss); } .ru-wsum b.pos { color: var(--gain, var(--acc-tx)); }
.ru-wsum { align-items: stretch; text-align: left; }
.ru-wsum > span:not(.lab) { display: grid; grid-template-columns: 80px auto; align-items: baseline; }
.ru-wsum > .lab { font-size: var(--fs-label); color: var(--muted); }
.ru-wl .num { margin-left: 0; }

/* polish PC (round 2): tie line of an arrival mark in the Gas balance chart (1 px, dashed, half strength) */
.ru-arr .ru-arr-tie { stroke-width: 1; stroke-dasharray: 2 2; opacity: .55; }
/* polish PC (round 2): with the Neo dock open the four value tiles go 2 by 2 (before: 3 plus 1 orphan tile, and the
   "Total cost 1,502.52 USD million" line wrapped) [QUALITY BAR consistent card heights in a row] */
.xm-shell:has(> #xm-dock:not([hidden])) .ru-kpis { grid-template-columns: 1fr 1fr; }

/* ---------- R2 FD: U7 Next best ADPs, U8 Steady plan (IA 7.3; same look as RP-01 rp-alt) ---------- */
.ru-cap { margin: 0 0 12px; font-size: 12px; line-height: 16px; color: var(--muted); }
.ru-nbs { display: grid; gap: 4px; }
.ru-nb { display: grid; grid-template-columns: 32px minmax(240px, 1.3fr) minmax(160px, 1fr) 168px 104px 136px; align-items: center; gap: 16px; min-height: 48px; padding: 4px 8px; border-radius: 8px; border: 1px solid transparent; transition: background-color var(--t-fast, .12s), border-color var(--t-fast, .12s); }
.ru-nb.ru-nb-h { min-height: 24px; padding-top: 0; padding-bottom: 0; }
.ru-nb .lab { font-size: var(--fs-label, 12px); font-weight: 600; color: var(--muted); }
.ru-nb .lab.num { text-align: right; }
.ru-nb[data-nb="try"] { cursor: pointer; }
.ru-nb[data-nb="try"]:hover, .ru-nb[data-nb="try"]:focus-visible { background: var(--acc-t); outline: none; }
.ru-nb[data-nb="try"]:focus-visible { border-color: var(--acc); }
.ru-nb[data-nb="try"]:active { background: var(--acc-l); }
.ru-nb.cur { background: var(--surface-2); }
.ru-nb.pv { border: 1.5px dashed var(--acc); background: var(--acc-t); }
.ru-nb.bad .ru-nbn b { color: var(--loss); }
.ru-nbr { font-size: 13px; font-weight: 700; color: var(--ink); }
.ru-nbn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ru-nbn b { font-size: 13px; font-weight: 600; color: var(--ink); }
.ru-nbn small { font-size: 12px; line-height: 16px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ru-nbt { position: relative; height: 12px; border-radius: 4px; background: var(--track); }
.ru-nbt > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--loss); opacity: .85; }
.ru-nbt > i.zero { width: 2px; left: 0; top: -3px; bottom: -3px; background: var(--ink); opacity: 1; border-radius: 1px; }
.ru-nbt.ru-nbx { display: inline-flex; align-items: center; gap: 6px; height: auto; background: none; color: var(--loss); font-size: 12px; font-weight: 600; }
.ru-nbax { height: 16px; background: none; border-bottom: 1px solid var(--axis); border-radius: 0; }
.ru-nbax em { position: absolute; bottom: 3px; transform: translateX(-50%); font: 500 11px/1 Inter, system-ui, sans-serif; font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ru-nbax em:first-child { transform: none; }
.ru-nbax em:last-child { transform: translateX(-100%); }
.ru-nbv { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ru-nbv b { font-weight: 700; color: var(--ink); }
.ru-nbv em { font-style: normal; font-weight: 600; font-size: 12px; }
.ru-nbc { text-align: right; font-size: 13px; color: var(--ink2, var(--ink)); }
.ru-nba { display: flex; justify-content: flex-end; }
/* R2 S2: Try is a visible button on every row (ET rule: visible buttons, not hover shortcuts) [KB T8 affordance] */
.ru-nb-try { transition: border-color var(--t-fast, .12s), background-color var(--t-fast, .12s); }
.ru-nb:hover .ru-nb-try, .ru-nb:focus-visible .ru-nb-try { border-color: var(--acc); color: var(--acc-tx); }
.ru-same { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px 56px; height: 24px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--acc-tx); font: 500 12px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.ru-same:hover { background: var(--acc-t); }
.ru-same-t { margin: 0 0 8px 56px; font-size: 12px; line-height: 16px; color: var(--ink2, var(--ink)); }
.ru-dtag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-right: 8px; border-radius: 10px; border: 1px dashed var(--acc); color: var(--acc-tx); font-size: 11.5px; font-weight: 600; }
.ru-st { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 24px; align-items: start; }
/* RUV H55 (s49 box LOOK 390 RU-01 U8: the event table 37 px past the main): the table scrolls in its own box (test u8-narrow) */
.ru-st-tw { min-width: 0; max-width: 100%; overflow-x: auto; }
.ru-st-hero { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--hair); border-radius: var(--r-md, 8px); background: var(--surface-2); }
.ru-st-hero.bad { border-color: var(--loss-b); background: var(--loss-l); }
.ru-st-hero .lab { font-size: var(--fs-label, 12px); color: var(--muted); font-weight: 600; }
.ru-st-v { display: inline-flex; align-items: baseline; gap: 6px; font-size: 26px; font-weight: 700; line-height: 32px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ru-st-v small { font-size: 13px; font-weight: 500; color: var(--muted); }
.ru-st-v svg { align-self: center; }
.ru-st-hero p { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink2, var(--ink)); }
.ru-st-btns { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.ru-st-now { font-size: 12px; color: var(--muted); }
.ru-st-tbl tbody tr { cursor: pointer; transition: background-color var(--t-fast, .12s); }
.ru-st-tbl tbody tr:hover, .ru-st-tbl tbody tr:focus-visible { background: var(--acc-t); outline: none; }
.ru-st-tbl tbody tr.on { background: var(--added); }
.ru-st-tbl tbody th small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.ru-brk { display: inline-flex; align-items: center; gap: 4px; color: var(--loss); font-weight: 600; }
@media (max-width: 1360px) { .ru-st { grid-template-columns: minmax(0, 1fr); } .ru-nb { grid-template-columns: 32px minmax(200px, 1.3fr) minmax(120px, 1fr) 152px 96px 128px; gap: 12px; } }

/* R2 FD S2: RU-02 findings. FD-6 the gain bar fills its column, Verdict keeps a fixed width (no 220 px hole) [KB T5 grid, T6 bar length].
   FD-7 every month card has a head, marks and two text lines, so all twelve cards share one height [KB T5 equal heights in a row]. */
.ru-u13t th.ru-cid { width: 96px; }
.ru-u13t th:nth-child(2), .ru-u13t th:nth-child(3) { width: 120px; }
.ru-u13t th:nth-child(5) { width: 176px; }
.ru-u13t td .ru-dcell { display: flex; width: 100%; }
.ru-u13t .ru-dtrack { flex: 1 1 auto; width: auto; max-width: 480px; }
.ru-u13t .ru-dcell > span:last-child { min-width: 48px; text-align: right; }
.ru-mch { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
.ru-mch .pill { white-space: nowrap; }
.ru-mc { min-height: 0; }
.ru-mtx { gap: 2px; }
/* R2 FD-9 hover parity: shared highlight of one cargo on every card (mockup data-hc) [KB T6 linked highlight]; tiles and month heads take focus like a hover */
.ru-tag[data-ruh], .ru-wh[data-ruh] { cursor: default; }
.ru-wh[data-ruh] { border-radius: 6px; transition: background-color var(--t-fast, .12s); }
.ru-wh[data-ruh]:hover, .ru-wh[data-ruh]:focus-visible { background: var(--surface-2); outline: none; }
.ru-wh[data-ruh]:focus-visible { box-shadow: var(--focus); }
.kpi[data-ruh] { transition: border-color var(--t-fast, .12s), box-shadow var(--t-fast, .12s); }
.kpi[data-ruh]:hover { border-color: var(--acc-l); }
.kpi[data-ruh]:focus-visible { outline: none; box-shadow: var(--focus); }
.ru-tag { transition: box-shadow var(--t-fast, .12s), opacity var(--t-fast, .12s); }
.ru-hcon .ru-tag:not(.ru-hc) { opacity: .45; }
.ru-tag.ru-hc { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); opacity: 1; }
.ru-arr.ru-hc circle { stroke: var(--ink); stroke-width: 3; }
tr.ru-hc > td { background: var(--acc-t); }
.ru-gc.ship.ru-hc { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
@media (prefers-reduced-motion: reduce) { .ru-tag, .kpi[data-ruh], .ru-wh[data-ruh] { transition: none; } }

/* R2 FD S2: FD-8 the heel label takes the token of its line, and the line keeps its weight in dark [KB T6 direct labels in the series colour].
   FD-4 the Try line under an optional cargo in the Cargo plan [KB T8 visible buttons, 8 px grid] */
.ru-lab.bad { fill: var(--loss); font-weight: 600; }
:root[data-theme="dark"] .ru-ref.bad { stroke-width: 1.5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ru-ref.bad { stroke-width: 1.5; } }
.ru-drop { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--ink2, var(--ink)); }
.ru-drop .btn .ic, .ru-drop .btn svg { margin-right: 4px; }
/* RUV H19: U12 arrival day controls (Fix on, Land on) of a landed cargo, the same row form as .ru-drop */
.ru-day { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; font-size: 12px; line-height: 16px; }
.pop-b .n.neg { color: var(--loss); }
.kpi .val small.ru-ab { margin: 0 4px 0 0; font-weight: 500; }
/* R2 FD-9: the source line in the dark chart tip of the Margin bridge stays readable (muted on the tip ground, not the page ground) [KB T1 contrast 4.5:1] */
.chart-tip.ru-tip .muted { color: inherit; opacity: .78; }

/* R2 FD S3: U7 same-value plans as rows under #1 [IA 7.3, KB T6.2 one row per plan; quiet secondary rows] */
.ru-same-g { position: relative; margin: 0 0 8px; }
.ru-same-g::before { content: ''; position: absolute; left: 24px; top: 0; bottom: 20px; width: 2px; border-radius: 1px; background: var(--hair); }
.ru-nb.sub { min-height: 44px; cursor: default; }
.ru-nb.sub .ru-nbn b { font-weight: 500; }
.ru-nb.sub .ru-nbr { position: relative; }
.ru-nb.sub .ru-nbr::after { content: ''; position: absolute; left: 16px; top: 50%; width: 12px; height: 2px; border-radius: 1px; background: var(--hair); }
.ru-nb.sub .ru-nbt > i.zero { opacity: .5; }
.ru-nb.sub:hover { background: var(--surface-2); }
.ru-nb.sub .ru-nbt0 { background: none; }
.ru-nb.sub .ru-nbv b, .ru-nb.sub .ru-nbc { color: var(--muted); font-weight: 500; }
.ru-same-g::before { background: var(--hair); opacity: 1; }
.ru-nb.sub .ru-nbn { grid-column: span 2; }
/* R2 FD S3 [C-ET1, mockup Try ghosts]: a cargo the shown plan leaves out: dashed ghost tag (U4) and ghost row (U12) */
.ru-tag.gh { background: transparent !important; color: var(--c) !important; box-shadow: none !important; outline: 1.5px dashed var(--c); outline-offset: -1.5px; opacity: .9; }
.ru-xt tbody tr.ru-gh td { color: var(--muted); }
.ru-xt tbody tr.ru-gh td .chip, .ru-xt tbody tr.ru-gh td .ru-co { opacity: .6; }
.ru-xt tbody tr.ru-gh { background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--acc-t) 6px 7px); }
.ru-nu { border-style: dashed; color: var(--acc-tx); }
.ru-was { margin-left: 8px; font-size: 12px; }
.ru-bef { margin-right: 12px; font-weight: 500; font-size: 12px; }
.ru-fnote { display: block; font-weight: 400; font-size: 12px; margin-top: 2px; }
.ru-k1 .ru-k1b { display: block; flex-basis: 100%; width: 100%; margin: 4px 0 0; font-size: 12px; line-height: 16px; font-weight: 500; }

/* R2 FD S4 [C-ET1 before and after, KB T6 mark only what changed]: U10 plan value with the step 0 value quiet under it,
   ghost dot on the range; U23 request not needed (dashed mark, struck days) and the Release offers; U11 plan line */
.ru-u10w { display: block; font-size: 12px; line-height: 16px; font-weight: 500; }
.ru-xt tbody tr.ru-chgr > td:first-child { box-shadow: inset 3px 0 0 var(--acc); }
.ru-rd.was { background: transparent; border: 1.5px dashed var(--muted); box-shadow: none; width: 12px; height: 12px; }
.ru-mk i.x.gh, .ru-mlg i.x.gh { outline: 1.5px dashed var(--muted); outline-offset: -1.5px; background: transparent; }
.ru-mc.gone { border-style: dashed; border-color: var(--muted-l); background: repeating-linear-gradient(135deg, transparent 0 6px, var(--acc-t) 6px 7px); }
.ru-mc.gone s { text-decoration-thickness: 1px; color: var(--muted); }
.ru-rels { display: grid; grid-template-columns: max-content 1fr; gap: 8px 12px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); }
.ru-rel { display: contents; font-size: 13px; line-height: 20px; }
.ru-rel .btn { justify-self: stretch; justify-content: flex-start; }
.ru-rel > span { font-size: 13px; line-height: 20px; }
/* RUV H56b (JUDGE R2 cross item 4): U23 slots as month rows; days, state, then a quiet Release; wraps at narrow widths */
.ru-slt { margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--hair); }
.ru-slr { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--hair); }
.ru-slm { font-size: 12px; line-height: 20px; font-weight: 600; color: var(--muted); }
.ru-sls { display: flex; flex-wrap: wrap; gap: 4px 24px; min-width: 0; }
.ru-slt .ru-rel { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 240px; min-width: 0; }
.ru-slt .ru-rel .btn { justify-self: auto; margin-left: auto; }
/* RUV H71 (s56 look: RU-02 U23 Release button 33 px outside main at 1280 with the dock, 10 px at 390): a narrow slot cell
   lets its button go to the next line, so days, cargo chip and button never run past the card */
.ru-slt .ru-rel { flex-wrap: wrap; }
.ru-slt .ru-sld { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* RUV H144 (MOCK-LOOK s73 RU-02 button-wall U23): a slot cell is a pick (role radio), the card has one action button */
.ru-slp { appearance: none; margin: 0; padding: 2px 8px; border: 1px solid transparent; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ru-slp:hover { border-color: var(--hair2); }
.ru-slp[aria-checked="true"] { border-color: var(--acc); background: var(--acc-t); }
.ru-slp:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.ru-sla { display: flex; justify-content: flex-end; margin-top: 8px; }
.ru-slk { align-items: start; }
.ru-u11p { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0 184px; }
.ru-u11p + .ru-gsel { margin-top: 8px; }
.ru-u11p svg { flex: none; margin-top: 3px; color: var(--muted); }
.ru-mb.ghost { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
.ru-st-w { display: block; font-size: 12px; line-height: 16px; color: var(--muted); font-weight: 500; }
.ru-wb.ghost { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
.ru-lab.muted { fill: var(--muted); font-weight: 500; }

/* R2 FD S5 [C-ET1 before and after]: U19 revenue of a plan with the step 0 value quiet beside it */
.ru-sbarw .ru-sbb { margin-left: 8px; font-size: 12px; line-height: 16px; font-weight: 500; }
/* R2 FD S5: U2 Months strip, one label line and one number line for every part (=, + and the unit text included) */
.ru-strip.mo { align-items: flex-start; gap: 4px 12px; }
.ru-strip.mo .ru-st-o b { color: var(--muted); font-weight: 400; }
.ru-strip.mo .ru-st-x { flex: 1 1 280px; min-width: 0; }
.ru-st-tx { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-small); line-height: 16px; }
.ru-st-tx .ru-strut { width: 0; overflow: hidden; visibility: hidden; font-size: 18px; }
.ru-st-tx .pill { align-self: center; }
/* R2 FD S5 HV-4: a position chip shows its source card on hover */
.chip.ru-srcc { cursor: help; transition: box-shadow .12s ease; }
.chip.ru-srcc:hover { box-shadow: inset 0 0 0 1px var(--muted); }

/* R2 FD S6: same-value plans of U7 (a January cargo on another day). Ghost ship cell of U11 at the step 0 day; a moved
   U4 tag keeps its fill and gets a thin ring so the eye finds the new cell [mockup Try ghosts, KB T6 before and after] */
.ru-gc.ship.gh { background: transparent; color: var(--c); outline: 1.5px dashed var(--c); outline-offset: -1.5px; cursor: default; box-shadow: none; transform: none; }
/* a moved tag keeps the plain look: the ring means "extra slot" in the key, so a moved cargo shows only by its ghost */
.ru-lab.halo { paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }
td > .ru-was { display: block; margin-left: 0; margin-top: 2px; }
.ru-nb.sub .ru-nbv em.muted { font-style: normal; }

/* R2 FD S7: the same-value plan in use is the strong row of its group (one hero row per table) [KB T3 hierarchy] */
.ru-nb.sub.cur .ru-nbv b, .ru-nb.sub.cur .ru-nbc { color: var(--ink); font-weight: 600; }
.ru-nb.sub.cur .ru-nbn b { font-weight: 600; }
.ru-same-g.one { margin: 0 0 4px; }

/* polish R2 QC (FINAL-R2 round 2, RU-01 with the Neo dock open): each (f) card body is a size container, so a main of
   768 px (1440 with the dock) or 672 px (1280 with the dock) gets a narrow form and nothing runs past the card frame.
   [KB T3 alignment: values keep their columns; QR no clipped label, no sideways scroll inside a card] */
.ru-card .xf-body { container-type: inline-size; container-name: rucard; }
@container rucard (max-width: 899.98px) {
  /* U7 Next best ADPs: the bar moves under the plan name, the four value columns keep one line each */
  .ru-nb { grid-template-columns: 32px minmax(0, 1fr) 120px 88px 72px; grid-template-areas: "r n v c a" ". b . . ."; column-gap: 12px; row-gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .ru-nb > .ru-nbr { grid-area: r; } .ru-nb > .ru-nbn { grid-area: n; } .ru-nb > .ru-nbt { grid-area: b; }
  .ru-nb > .ru-nbv { grid-area: v; } .ru-nb > .ru-nbc { grid-area: c; } .ru-nb > .ru-nba { grid-area: a; justify-self: end; }
  .ru-nb.ru-nb-h { grid-template-areas: ". n v c a" ". b . . ."; padding-top: 0; padding-bottom: 4px; }
  .ru-nb.ru-nb-h > :nth-child(1) { display: none; } .ru-nb.ru-nb-h > :nth-child(2) { grid-area: n; }
  .ru-nb.ru-nb-h > :nth-child(4) { grid-area: v; } .ru-nb.ru-nb-h > :nth-child(5) { grid-area: c; } .ru-nb.ru-nb-h > :nth-child(6) { grid-area: a; }
  .ru-nb.sub { grid-template-areas: "r n v c a"; }
  .ru-nb.sub .ru-nbn { grid-column: auto; }
  .ru-nbn small { -webkit-line-clamp: 3; }
  .ru-same-t { margin-left: 44px; }
  /* U8 Steady plan: hero on top, the event table under it in the full card width */
  .ru-st { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ru-st-hero { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 16px; }
  .ru-st-hero p { flex: 1 1 100%; }
  .ru-st-hero .ru-st-btns { flex: 1 1 100%; }
  .ru-st-tbl th, .ru-st-tbl td { padding-left: 8px; padding-right: 8px; }
  .ru-st-tbl thead th { white-space: normal; vertical-align: bottom; line-height: 16px; }
  .ru-st-tbl tbody th { white-space: normal; min-width: 0; }
  /* U22 One ADP, three cases: shorter bars, one line per value */
  .ru-tbl th, .ru-tbl td { padding-left: 8px; padding-right: 8px; }
  .ru-dtrack { width: 56px; }
  .ru-dcell { gap: 8px; }
}
@container rucard (max-width: 679.98px) {
  .ru-nb { grid-template-columns: 28px minmax(0, 1fr) 104px 64px 68px; column-gap: 8px; }
  .ru-dtrack { width: 40px; }
  .ru-dcell > span:last-child { min-width: 48px; }
}
@container rucard (max-width: 999.98px) {
  /* U15 Stress tests: the 1280 form of session 8, one step tighter for the dock-open main */
  .ru-strk { width: 64px; } .ru-sbar { gap: 8px; } .ru-sbar .num { min-width: 0; white-space: nowrap; }
  .ru-stbl th:first-child, .ru-stbl td:first-child { min-width: 0; width: 176px; }
  .ru-stbl th, .ru-stbl td { padding-left: 8px; padding-right: 8px; }
  .ru-stbl thead th { white-space: normal; vertical-align: bottom; line-height: 16px; }
  .ru-stbl td .pill { white-space: normal; text-align: left; height: auto; min-height: 20px; line-height: 16px; padding-top: 2px; padding-bottom: 2px; }
  .ru-acts .btn { margin-right: 4px; }
  /* U21 Prices of this ADP: twelve month columns fit with 6 px cell padding */
  table.t.ru-ptbl th, table.t.tight.ru-ptbl td { padding-left: 6px; padding-right: 6px; }
  table.t.ru-ptbl td:first-child { white-space: nowrap; padding-left: 0; }
  table.t.ru-ptbl td:first-child .muted { display: block; font-size: var(--fs-label); line-height: 16px; }
}
@container rucard (max-width: 759.98px) {
  /* 1280 px with the dock open (card body about 570 px): month grids and wide tables take the narrow form */
  .ru-wgrid { min-width: 0; }
  .ru-rcell { min-width: 120px; width: 24%; }
  .ru-ctbl th, .ru-ctbl td, .ru-xt th, .ru-xt td { padding-left: 6px; padding-right: 6px; }
  .ru-ctbl thead th, .ru-xt thead th { white-space: normal; }
  .ru-strk { display: none; }
  .ru-stbl th:first-child, .ru-stbl td:first-child { width: 152px; }
  table.t.ru-ptbl th, table.t.tight.ru-ptbl td { padding-left: 4px; padding-right: 4px; font-size: var(--fs-label); }
}
@container rucard (max-width: 759.98px) {
  table.t.ru-xt th, table.t.tight.ru-xt td, table.t.ru-stbl th, table.t.tight.ru-stbl td { padding-left: 6px; padding-right: 6px; }
  table.t.ru-xt thead th, table.t.ru-stbl thead th { white-space: normal; }
  table.t.ru-xt td, table.t.ru-stbl td { font-size: var(--fs-label); }
  table.t.tight.ru-ptbl td:first-child { padding-left: 0; }
  table.t.ru-ptbl th:first-child { padding-left: 0; }
}

/* ENU W3 s18 (NOTE-INT-38 (3), LOOK chain w3-s16): IN-f7 Contract rules and Recourse side by side overflow the main at 1280 with the
   dock open (main 608 px, 51 px out) and at 390 (173 px side scroll). The pair measures its own width: one column under 900 px,
   and under 480 px the cap cell of the Recourse table wraps. */
.ru-inf2 { container-type: inline-size; container-name: ruinf2; }
@container ruinf2 (max-width: 899.98px) { .ru-inf2 .in-f-2 { grid-template-columns: minmax(0, 1fr); } }
@container ruinf2 (max-width: 479.98px) {
  .ru-inf2 .in-f-rc td.in-tn { white-space: normal; }
  .ru-inf2 .in-f-rc th, .ru-inf2 .in-f-rc td { padding-left: 6px; padding-right: 6px; }
}
/* RUV H21 (WORKLOOP (f) u-hold): U9 Hold a month's nomination, one button per month of the pipeline position */
.ru-u9hs { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); }
.ru-u9h { display: grid; gap: 8px; }
.ru-u9h + .ru-u9h { margin-top: 12px; }
.ru-u9hb { display: flex; flex-wrap: wrap; gap: 6px; }
.ru-u9hb .btn b { font-weight: 600; margin-left: 4px; }
.ru-u9h > .muted { font-size: 13px; line-height: 20px; }
/* RUV H99 (REQ INT to RUV 87 and 88, RU-02 "12 equal Hold ... at buttons"): the Hold offer is one month strip, a bar per
   month in the scale of the largest take, the month on top and the server take below; 6 columns in a narrow card */
.ru-u9st { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.ru-u9m { display: grid; grid-template-rows: auto 48px auto; gap: 4px; justify-items: center; padding: 6px 2px; min-width: 0;
  border: 1px solid var(--hair); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.ru-u9m:hover { border-color: var(--acc); background: var(--acc-t); }
.ru-u9m:focus-visible { outline: none; box-shadow: var(--focus); }
.ru-u9mo { font-size: 12px; line-height: 16px; color: var(--muted); }
.ru-u9bk { display: flex; align-items: flex-end; width: 14px; height: 48px; border-radius: 3px; background: var(--track); }
.ru-u9bk i { display: block; width: 100%; border-radius: 3px; background: var(--acc); }
.ru-u9m b.num { font-size: 12px; line-height: 16px; font-weight: 600; }
@container rucard (max-width: 559.98px) { .ru-u9st { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* RUV H23 (NOTE-INT-113 TEXT): U21 April order as one chip per supply, the entity dot first */
.ru-u21apr { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 10px; }
.ru-u21apr .lab { margin-right: 4px; }
.ru-apr::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--wc); margin-right: 6px; }
.ru-busy { display: inline-flex; align-items: center; gap: 6px; }

/* RUV H24 (NOTE-INT-113 TEXT, ET-9): a label and number fact in a fact row (U13 January block, SPA-1 line, U11 picked ship) */
.ru-fx { display: inline-flex; align-items: baseline; gap: 4px; margin-right: 12px; font-variant-numeric: tabular-nums; }
/* RUV H56 ru-fx (JUDGE Round 2 cross item 2, RU-03 "7.0 days, / 20 / Oct"): the parts of a fact wrap as units, a number or a date stays on one line */
.ru-fx { flex-wrap: wrap; row-gap: 0; }
.ru-fx > b, .ru-fx > span:not(.lab) { white-space: nowrap; }
.ru-fx .lab { font-size: var(--fs-label); color: var(--muted); }
.ru-u13j, .ru-gsel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; }
.ru-u13j > b, .ru-gsel > b { margin-right: 12px; }
.ru-spa { flex-wrap: wrap; }
.ru-spa small, .ru-u13j small { font-size: var(--fs-label); }
/* RUV H24: RU-03 facts (U14 year low and usable, U15 Hold plan line), the buyer role in the hover of the buyer name (U19) */
.ru-u15h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; }
.ru-u15h > b { margin-right: 12px; }
.ru-k1 .ru-fx { font-size: var(--fs-label); color: var(--muted); margin-left: 8px; }
.ru-tipd { text-decoration: underline dotted var(--hair); text-underline-offset: 3px; cursor: help; }
/* RUV H27 (REQ ENU to RUV 21, AUD-H4-3): U12 why fuel oil stays, one fact row per fuel oil position under the cargo table */
.ru-fuel { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--hair2); }
.ru-fuel > .lab { font-size: var(--fs-label); color: var(--muted); font-weight: 600; }
.ru-fuelr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.ru-fuelr .ru-fx { min-width: 0; }
/* RUV H36 (LOOK 390, NOTE PLAT 05:18): a chart wider than its box (560 px at least) scrolls in its box, never the page */
.chart.ru-wide { overflow-x: auto; overflow-y: hidden; }

/* RUV H37 (LOOK 390, remote s41 IN-f7): a wide table scrolls sideways inside its card; the (f) rules list gives the name
   at least 8em and lets a long value wrap beside it (in.css .in-fr-r keeps the other templates) */
.ru-xscroll { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.in-fr-f .in-fr-r { grid-template-columns: 48px minmax(8em, 1fr) minmax(0, max-content); padding-top: 6px; padding-bottom: 6px; }
.in-fr-f .in-fr-v { min-width: 0; text-align: right; overflow-wrap: anywhere; }
/* RUV H37 (LOOK 390 IN-f1): in.css sets repeat(4) on every .in-tiles; the (f) demand cases wrap at a narrow card */
.in-tiles.in-f-cases { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
/* RUV H71 (s56 look 390, IN-f1 side scroll 7 px): a grid item is at least as wide as its content (min-width auto), so the
   "Who takes the gas" tile (code chip and volume in one flex line, in.css .in-f-split) pushed the page 7 px; the tiles may
   shrink and the split line wraps */
.in-tiles.in-f-cases > div { min-width: 0; }
.in-f-cases .in-f-split { flex-wrap: wrap; }

/* RUV H38 (LOOK 390, remote s41 IN-f3 side scroll 97 px): the Pipeline gas row (in.css .in-f-row, 320 px tile column)
   stacks under 760 px, and the year take bar labels flow in one wrapping line, so no label sits over another */
@media (max-width: 760px) {
  .in-f-row { grid-template-columns: minmax(0, 1fr); }
  .in-f-row .in-pr-top, .in-f-row .in-pr-lab { height: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
  .in-f-row .in-pr-top span, .in-f-row .in-pr-lab span { position: static; transform: none; padding: 0; white-space: normal; }
}

/* RUV H38 (LOOK 390 IN-f1 rest, remote s41 shot): under 760 px the tank axis labels flow in one wrapping line, the (f)
   facts take two columns and wrap their labels, the demand bar values stand upright in their column, and the (f) band
   (in-f-band; in.css keeps .in-band of (a)) takes two columns and wraps its values in place of an ellipsis */
@media (max-width: 760px) {
  .in-ft .in-ft-ax { height: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
  .in-ft .in-ft-ax span, .in-ft .in-ft-ax span:first-child, .in-ft .in-ft-ax span:nth-child(2), .in-ft .in-ft-ax span:last-child { position: static; transform: none; text-align: left; white-space: normal; }
  .in-f-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-f-facts dt { flex-wrap: wrap; white-space: normal; }
  .in-dm { gap: 2px; }
  .in-dm-c b { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; }
  .in-band.in-f-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-band.in-f-band b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}

/* RUV H56b ru-mg3 (JUDGE R2 RU-02 390 "2 of 2 used" one word per line): under 520 px of card U23 shows 3 months a row */
@container rucard (max-width: 519.98px) { .ru-mg { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ru-mtx > .ru-mts:first-child { white-space: nowrap; } }

/* RUV H53 (REQ INT to RUV 76, RU-01 390: the U7 plan names one letter per line): the 679 px card form keeps four fixed
   value columns (296 px), so a phone card of about 330 px leaves the name 34 px. Under 520 px of card a Next best row puts
   the name across the row, rank left, value, cost to serve and action on the second line, the bar on the third; the
   cells keep the grid areas of the 899 px form (r, n, v, c, a, b), the head row and the sub rows take the same lines. */
@container rucard (max-width: 519.98px) {
  .ru-nb { grid-template-columns: 28px minmax(0, 1fr) auto auto; grid-template-areas: "r n n n" "r v c a" ". b b b"; row-gap: 4px; }
  .ru-nb.ru-nb-h { grid-template-areas: ". n n n" ". v c a" ". b b b"; }
  .ru-nb.sub { grid-template-areas: "r n n n" "r v c a"; }
  .ru-nb.sub .ru-nbn { grid-column: 2 / -1; }
}

/* RUV H55 (s49 box LOOK 1440 overEl: IN-f3 18 px "div.in-pr-lab > span.r > span", IN-f1 2 px "div.in-ft-ax > span > span"
   outside the main): in.css places every span of these label rows (absolute, translate, first and last child rules); live,
   the data-src mark of a number inside a label is a span too and left its label. A mark inside a label is an inline part
   of that label at every width (test inf-mark-inline). */
.in-ft .in-ft-ax span span, .in-f-row .in-pr-lab span span, .in-f-row .in-pr-top span span { position: static; transform: none; display: inline; padding: 0; margin: 0; font: inherit; color: inherit; text-align: inherit; white-space: inherit; }

/* RUV H55 (REQ INT to RUV 76, IN-f5 390: sales contract tiles side by side): in.css .in-ft-ts keeps 2 or 4 columns at
   every width; under 760 px the (f) position tiles of IN-f3, IN-f4 and IN-f5 take one column (test inf5-narrow) */
@media (max-width: 760px) { .in-ft-ts, .in-ft-ts.two { grid-template-columns: minmax(0, 1fr); } }

/* RUV H57 (REQ INT to RUV 77, IN-f7 7.5: the Recourse and Money tables read one word per line at 390 and at 1280 with the
   dock): the table sits in a card container; under 560 px of card each row is a block, the key cell on top and each other
   cell on its own line under its column name (data-lab), so no word stands alone on a line (test inf7-narrow) */
.ru-rcw { container-type: inline-size; container-name: rurcw; }
@container rurcw (max-width: 559.98px) {
  .ru-rcw table, .ru-rcw tbody, .ru-rcw tr, .ru-rcw td { display: block; width: auto; }
  .ru-rcw thead { display: none; }
  .ru-rcw tr { padding: 8px 0; border-bottom: 1px solid var(--hair2); }
  .ru-rcw td { border: 0; padding: 2px 0; white-space: normal; text-align: left; }
  .ru-rcw td[data-lab]::before { content: attr(data-lab); display: block; font-size: var(--fs-label); color: var(--muted); }
}

/* RUV H58 (REQ INT to RUV 77, RU-02 U9 at 390: "Take-or-Pay 32.85ACQ 36.50"): a start mark label sits in a box from its mark
   to the track end; with room it starts at the mark (margin-right auto takes the room), with too little room the box packs
   it at the track end (justify-content flex-end), so it never runs back over the label before it (test u9-marks) */
.ru-rmw { position: absolute; top: 14px; right: 0; display: flex; justify-content: flex-end; pointer-events: none; }
.ru-rmw.up { top: -22px; }
.ru-rmw > .ru-rml { position: static; transform: none; margin-right: auto; flex: none; pointer-events: auto; }

/* RUV H58 (REQ INT to RUV 77, RU-02 at 390: the Contract compliance table is cut after Cap, the state sits behind a side
   scroll): under 560 px of card each position row is a small grid: position, what counts and the state on top; Plan,
   Floor and Cap on one line, each under its column name (data-lab); the band track full width; head row hidden; the open
   build-up row is one block (test u10-narrow) */
@container rucard (max-width: 559.98px) {
  .ru-ctbl.ru-xt, .ru-ctbl.ru-xt tbody { display: block; width: 100%; }
  .ru-ctbl.ru-xt thead { display: none; }
  .ru-ctbl.ru-xt tr.ru-xrow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "c c w w s s" "p p f f k k" "b b b b b b"; column-gap: 8px; row-gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--hair2); }
  .ru-ctbl.ru-xt tr.ru-xrow > td { display: block; width: auto; min-width: 0; padding: 0; border: 0; white-space: normal; text-align: left; }
  .ru-ctbl.ru-xt tr.ru-xrow > td:nth-child(1) { grid-area: c; }
  .ru-ctbl.ru-xt tr.ru-xrow > td:nth-child(2) { grid-area: w; }
  .ru-ctbl.ru-xt tr.ru-xrow > td:nth-child(3) { grid-area: p; }
  .ru-ctbl.ru-xt tr.ru-xrow > td:nth-child(4) { grid-area: f; }
  .ru-ctbl.ru-xt tr.ru-xrow > td:nth-child(5) { grid-area: k; }
  .ru-ctbl.ru-xt tr.ru-xrow > td:nth-child(6) { grid-area: b; }
  .ru-ctbl.ru-xt tr.ru-xrow > td:nth-child(7) { grid-area: s; justify-self: end; }
  .ru-ctbl.ru-xt tr.ru-xrow > td[data-lab]::before { content: attr(data-lab); display: block; font-size: var(--fs-label); font-weight: 400; color: var(--muted); }
  .ru-ctbl.ru-xt tr.ru-xrow > td.ru-rcell .ru-range { padding: 4px 0 2px; }
  .ru-ctbl.ru-xt tr.ru-xr { display: block; padding: 8px 0; border-bottom: 1px solid var(--hair2); }
  .ru-ctbl.ru-xt tr.ru-xr > td:first-child { display: none; }
  .ru-ctbl.ru-xt tr.ru-xr > td { display: block; padding: 0; border: 0; }
}

/* RUV H58 (REQ INT to RUV 77, IN-f1 at 1280 with the dock: the January slot heads are cut in their columns, "Free 13",
   "Other users 8 t"): the strip is a container; under 900 px of strip the key line under it names the same ranges and the
   heads give way (in.css does this only under 640 px of viewport) (test inf1-slots-narrow) */
.in-sl { container-type: inline-size; container-name: ruinsl; }
@container ruinsl (max-width: 899.98px) {
  .in-sl-heads { display: none; }
  .in-sl-key { display: flex; }
}

/* RUV H59 (REQ INT to RUV 77, RU-03 "verdict pills in 3 lines"): under 1000 px of card the U15 pill may wrap; its label
   and its number each keep one line, so it breaks once at most ("Power short" over "0.442") (test u15-src case 4) */
.ru-stbl td .pill .ru-vl, .ru-stbl td .pill .ru-vn { white-space: nowrap; }

/* RUV H60 (REQ INT to RUV 77, RU-03 page side scroll 93 px at 390, LOOK overEl null): the table scrollers are positioned
   boxes, so an absolute child with no nearer positioned box (the U15 .sr-only Actions head) is clipped inside the scroller
   and never widens the page; same form as ui.css .tscroll (test xscroll-pos) */
.ru-xscroll, .ru-st-tw { position: relative; }

/* RUV H61 (REQ SENSE to RUV AUD-H60-1, IN-f3): the floor rule sits on its own line under the "Must-flow floor" value */
.in-f-facts dd .in-f-rule { flex-basis: 100%; font-size: 12px; font-weight: 500; color: var(--muted); white-space: normal; }

/* RUV H61 (REQ INT to RUV 78, RU-04 at 390: Formula column one word per line, month table cut after Apr with no cue): under
   560 px of card the JKM row is a grid of month cells, four a line, each cell names its month; the index cell and the Brent
   flat cell span the line; the Price formulas table takes the row form, each cell names its column (test ru04-narrow) */
@container rucard (max-width: 559.98px) {
  table.t.ru-ptbl, .ru-ptbl tbody, table.t.ru-ftbl, .ru-ftbl tbody { display: block; width: auto; }
  .ru-ptbl thead, .ru-ftbl thead { display: none; }
  .ru-ptbl tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--hair2); }
  table.t.tight.ru-ptbl td { display: block; border: 0; padding: 0; text-align: left; }
  table.t.tight.ru-ptbl td:first-child, table.t.tight.ru-ptbl td[colspan] { grid-column: 1 / -1; }
  .ru-ptbl td[data-lab]::before, .ru-ftbl td[data-lab]::before { content: attr(data-lab); display: block; font-size: var(--fs-label); font-weight: 400; color: var(--muted); }
  .ru-ftbl tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--hair2); }
  table.t.tight.ru-ftbl td { display: block; border: 0; padding: 2px 0; white-space: normal; text-align: left; }
}

/* RUV H62 (JUDGE round 3 RU-01: the U4 arrival tags "STD-1 Mar" wrapped inside the 22 px tag): a grid tag keeps one line;
   it shows the position code (the month column names the month, f-balance.js tagTxt) and is the positioned box of its
   .sr-only month word, so that word never widens the page (test u4-tag-fit) */
.ru-wgrid .ru-tag { position: relative; white-space: nowrap; column-gap: .3em; }
/* RUV H75 (JUDGE round 7 RU-01 "SPA-1UQT"): the rest of a tag name after its sr-only month word ("SPA-1 Dec UQT") is its
   own flex item, and a flex item drops its first space; column-gap puts the space back between the code and "UQT" */
.ru-cases .ru-meas { margin: 0 0 8px; font-size: var(--fs-label); color: var(--muted); }
.ru-cases .ru-meas b { color: var(--ink); font-weight: 600; }

/* RUV H64 (JUDGE Round 4 cross item 6, RU-02: the U12 Cargo plan showed 10 of 25 cargoes in the 480 px box with no cue):
   live, the U12 box (f-supply.js class ru-u12w) has no height cap, so every cargo and the total line show (test r4-ru02-cue) */
.ru-scroll.ru-u12w { max-height: none; }

/* RUV H72 (REQ INT to RUV 81, JUDGE round 6 IN-f7: the Recourse card was half empty under its table): side by side, the pair
   grid (in.css .in-f-2, align-items stretch) makes Recourse as tall as Contract rules; the card is a column, its body and
   its table fill it, so the rows share the height and no empty block stays under the table (test inf7-fill) */
/* RUV H100 (round 14 walk shot in-f7-1440-light of s64: since H90b and H92 gave Contract rules its reason lines and Lock
   days, the stretched Recourse table spread its 3 rows over about 1,000 px, each row about 300 px high for one text line):
   side by side each card keeps its own height (align start); the Recourse rows take their text height. Replaces the H72
   stretch (test inf7-fill). */
@container ruinf2 (min-width: 900px) {
  .ru-inf2 .in-f-2 { align-items: start; }
}

/* RUV H73 (JUDGE round 5 RU-02 "ship chips squeezed in Arrivals, SPA- over 1"): live U11 names each ship on a name line
   under the Our ships lane (f-supply.js namesLine); a one day cell keeps only its colour */
.ru-gl.names .ru-gd { row-gap: 2px; }
.ru-gn { min-width: 0; font-size: 11px; font-weight: 700; line-height: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--c); padding-left: 3px; }
.ru-gn.gh { font-weight: 500; color: var(--muted); border-left-style: dashed; }
/* RUV H75 (JUDGE round 7 RU-03 at 390: the five U14 week tiles stand one word per line): under 560 px of card the week
   tiles are five rows, each with the week, the lowest cover and its day on one line */
@container rucard (max-width: 559.98px) {
  .ru-wks { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ru-wk { display: grid; grid-template-columns: 7em max-content minmax(0, 1fr); align-items: baseline; column-gap: 12px; min-height: 0; padding: 6px 12px; }
  .ru-wk > small { text-align: right; }
}
/* RUV H76 (JUDGE Sense round 7 SENSE-R7-3): U26 Negotiation with the seller. One row per point of the round: the text
   column (label, name, what, the called cargoes) and the value column (net margin, cargo count, change); the counter row
   has its Try button in a third column. Under 560 px the button goes under the row, so nothing scrolls sideways. */
.ru-ng-terms { margin: 0 0 8px; color: var(--ink2); font-size: var(--fs-body); }
/* RUV H103 (item 70 (a)): the SPA terms of U26 as a row of chips, the seller name and the unit as labels */
.ru-ng-terms.ru-ng-tc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ru-ng-terms.ru-ng-tc .ru-ng-u { margin-left: auto; color: var(--muted); font-size: var(--fs-label); }
.ru-ngs { display: grid; gap: 0; }
.ru-ng { display: grid; grid-template-columns: minmax(0, 1fr) minmax(136px, max-content) 160px; align-items: center; column-gap: 16px; padding: 8px; border-top: 1px solid var(--hair); }
.ru-ng:first-child { border-top: 0; }
.ru-ng .lab { display: block; font-size: var(--fs-label, 12px); font-weight: 600; color: var(--muted); }
.ru-ng-t { min-width: 0; display: grid; gap: 2px; }
.ru-ng-t > b { font-weight: 600; overflow-wrap: anywhere; }
.ru-ng-t small { color: var(--ink2); }
.ru-ng-v { display: grid; justify-items: end; gap: 2px; text-align: right; white-space: nowrap; }
.ru-ng-v small, .ru-ng-c small { color: var(--muted); }
.ru-ng-c .muted { font-style: normal; }
.ru-ng-a { display: flex; justify-content: flex-end; }
.ru-ng.ask { background: var(--surface-2); border-radius: 8px; }
.ru-ng.bad .ru-ng-t small { color: var(--err); }
.ru-ng-calls { margin: 2px 0 0; padding-left: 16px; color: var(--ink2); font-size: var(--fs-label, 12px); }
.ru-ng-none { margin: 0; color: var(--ink2); }
/* RUV H79 (AUD-H76-1): the count as our right, the windows of our ADP (closed list), the closed windows of a decline */
.ru-ng-t .ru-ng-cnt { font-weight: 600; color: var(--ink); }
.ru-ng-t .ru-ng-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ru-ng-wins { margin: 2px 0 0; color: var(--ink2); font-size: var(--fs-label, 12px); }
.ru-ng-wins > summary { cursor: pointer; width: max-content; max-width: 100%; }
.ru-ng-wins > summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }
.ru-ng-t .ru-ng-cl, .ru-ng-t .ru-ng-fb { overflow-wrap: anywhere; }
@container rucard (max-width: 559.98px) {
  .ru-ng { grid-template-columns: minmax(0, 1fr) max-content; row-gap: 8px; }
  .ru-ng-a { grid-column: 1 / -1; justify-content: flex-start; }
}

/* RUV H77 (REQ INT to RUV 82, RU-03 390: the Stress tests table cut at the right with no cue; GATE2 H63 look rule 5): a RUV
   table scroller draws the edge shade of ui.css .tscroll where its table has more; the local card colour layers cover the
   shade at each end, so a table that fits shows none. The live U15 box names that cue with data-scroll-cue="shade"
   (test u15-scroll-cue). RUV H83 (s59 box probe on 4870: U8 1440 356 px, U22 390 247 px, U12 390 211 px, U13 390 82 px hidden
   with no cue): the U8 box .ru-st-tw draws the same shade, and the live U8, U12, U13, U22 boxes name it (test ru-scroll-cue-h83) */
.xm-view .ru-xscroll, .xm-view .ru-st-tw { --ru-cue-sh: color-mix(in srgb, var(--ink) 24%, transparent); background: 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(--ru-cue-sh), transparent) left center / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, var(--ru-cue-sh), transparent) right center / 12px 100% no-repeat scroll; }

/* RUV H77 (REQ INT to RUV 82, s56 look IN-f3 1280 with the dock: 13 px over the main column, overEl f-pipeline
   "div > dt > span" = the "Take-or-Pay, 90 %" label with its marked percent): a (f) fact label is a flex row (in.css
   .in-facts dt); at every width it wraps inside its grid column, so a narrow column (the dock, 390) never pushes the
   label out of the card (the 760 px rule above did this only at a phone width) (test inf3-dock) */
.in-f-facts dt { flex-wrap: wrap; white-space: normal; min-width: 0; }
.in-f-facts > div { min-width: 0; }
/* RUV H78 (NUMBER (f) U12 cargo-spread-bridge, ANS GATE2 to RUV 00:36 (3)): a bridge tile value is b.rp-wv (the gate value
   form); it keeps the ru-bt look, not the rp.css size and right align (test u12-wf-bridge) */
.ru-bt b.rp-wv { font-size: 16px; text-align: inherit; }

/* RUV H84 (own row of the s59 box probe ruv-h83-p1: IN-f3 at 1280 with the dock, the year take labels "Take-or-Pay 32.85"
   and "Cap 41.975" overlap in a 256 px column; the 760 px rule above reads the page width, not the column): the column is a
   size container, and under 480 px of column the labels take the same wrapping one line form, so no label sits over another */
.in-f-col { container-type: inline-size; container-name: inf3col; }
@container inf3col (max-width: 479.98px) {
  .in-f-row .in-pr-top, .in-f-row .in-pr-lab { height: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
  .in-f-row .in-pr-top span, .in-f-row .in-pr-lab span { position: static; transform: none; padding: 0; white-space: normal; }
}

/* RUV H85 (REQ INT to RUV 85, JUDGE round 10 RU-03 7.5: at 390 the Stress tests table is cut at the right, even with the edge
   cue): under 560 px of card the live U15 table (its value cells name their column in data-th, f-security.js) takes a
   stacked form: one block per event, the event and the unmet bar on full rows, Power beside Industry, then the verdict and
   the action, each value with its column name above it. The head row stays for screen readers only. The demo table has no
   data-th and keeps its form; a wider card keeps the table (test u15-stack) */
@container rucard (max-width: 559.98px) {
  table.t.tight.ru-stbl:has(td[data-th]) { display: block; width: 100%; min-width: 0; }
  table.t.tight.ru-stbl:has(td[data-th]) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.t.tight.ru-stbl:has(td[data-th]) tbody { display: block; }
  table.t.tight.ru-stbl:has(td[data-th]) tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; row-gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--hair2); }
  table.t.tight.ru-stbl:has(td[data-th]) td { display: block; width: auto; min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; }
  table.t.tight.ru-stbl:has(td[data-th]) td:first-child, table.t.tight.ru-stbl:has(td[data-th]) td:nth-child(2), table.t.tight.ru-stbl:has(td[data-th]) tr.ru-sexp td { grid-column: 1 / -1; }
  table.t.tight.ru-stbl:has(td[data-th]) td:first-child b { white-space: normal; }
  table.t.tight.ru-stbl:has(td[data-th]) td[data-th]::before { content: attr(data-th); display: block; margin-bottom: 2px; font-size: var(--fs-label); font-weight: 400; color: var(--muted); }
  table.t.tight.ru-stbl:has(td[data-th]) td:empty { display: none; }
  table.t.tight.ru-stbl:has(td[data-th]) td.ru-acts { align-self: end; justify-self: end; }
}

/* RUV H86 (own row (d) of the s59 box probe ruv-h83-p1: RU-02 U12 Cargo plan at 390 and at 1280 with the dock, the seller
   name "Crest Trading" one word per line beside its code chip): a seller name in a RUV table cell never breaks inside;
   the cell may still put the whole name under its chip when the column is narrow; the table box scrolls with its cue
   (test u12-seller-name) */
.ru-xt td .ru-co { display: inline-block; white-space: nowrap; }

/* RUV H86 (own row (b) of the s59 box probe ruv-h83-p1: RU-01 U8 Steady plan at 1440, the live margin table of 7 columns
   and more, 1056 px, sat beside the hero in a 700 px box and hid 356 px even with the edge cue): when the table has the
   live margin columns (7 or more), the hero goes above the table at every width, so the table takes the whole card body;
   the demo table of 5 columns keeps the hero beside it (test u8-one-col) */
.ru-st:has(> .ru-st-tw .ru-st-tbl thead th:nth-child(7)) { grid-template-columns: minmax(0, 1fr); gap: 16px; }
/* RUV H87 (box probe ruv-h86-p2 on 4870 s59 at 1440: with the hero above it the table of 7 columns was 1130 px in a
   1118 px box, 12 px hidden; with the 2 sales columns of s60 it is 9 columns): the live margin table takes the narrow
   cell form at every width, 8 px cell sides and head texts that wrap, so 7 and 9 columns fit the card body
   (test u8-one-col case 3) */
.ru-st:has(> .ru-st-tw .ru-st-tbl thead th:nth-child(7)) .ru-st-tbl th, .ru-st:has(> .ru-st-tw .ru-st-tbl thead th:nth-child(7)) .ru-st-tbl td { padding-left: 8px; padding-right: 8px; }
.ru-st:has(> .ru-st-tw .ru-st-tbl thead th:nth-child(7)) .ru-st-tbl thead th { white-space: normal; vertical-align: bottom; line-height: 16px; }

/* RUV H88 (s60 MOCK-LOOK 1440, 390 and 1280 with the dock, NOTE GATE2 to RUV 04:54: RU-01 U4 day tags "SPA-1 Jan" read as a
   value over 2 lines): the tag draws one line; its sr-only month word (H62) is a 1 px box at the centre of the tag, and its
   text box hung below the code line. With top 50 % and line height 0 the hidden text box has the same centre as the code,
   so every line read of the tag gives one line; the box stays 1 px and clipped (test inf-band-unit case 3) */
.ru-wgrid .ru-tag > .sr-only { top: 50%; left: 0; line-height: 0; }
/* RUV H88 (same NOTE, 390: "124.44 million MMBtu" over 2 lines in the (f) band): the unit words of a live band value
   (in/f.js small.in-f-u) keep the value font at every width and take 12 px under 760 px (test inf-band-unit case 4) */
.in-band.in-f-band b small.in-f-u { font-size: inherit; font-weight: inherit; color: inherit; }
@media (max-width: 760px) { .in-band.in-f-band b small.in-f-u { font-size: 12px; font-weight: 500; } }
/* RUV H89 (REQ SENSE to RUV AUD-H88-7): RU-04 Prices of this ADP names its price set and date as two chips above the index table */
.ru-pset { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
/* RUV H91 (REQ SENSE to RUV AUD-H88-1): live IN-f pages show one Edit button per position; it opens the Position editor */
.in-f-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.in-f-pe > span { font-size: 13px; color: var(--ink2); margin-right: 4px; }
.in-f-pe .btn { display: inline-flex; align-items: center; gap: 6px; }
/* RUV H90b (REQ INT to RUV 86, IN-f7 8): the live reason line of a contract rule row sits under the name, across the
   name and value columns */
.in-fr-f .in-fr-w { grid-column: 2 / -1; margin-top: -6px; font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--ink2); overflow-wrap: anywhere; }
.in-fr-f .in-fr-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 0; }
.in-f-who > .lab { font-size: var(--fs-label); color: var(--muted); font-weight: 500; }
/* RUV H92 (REQ ENU to RUV 06:40 (1)): the least unmet plan line under the held cost of a U8 row with no held plan */
.ru-st-tbl .ru-st-sf { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--ink2); white-space: normal; overflow-wrap: anywhere; }
/* RUV H99 (REQ INT to RUV 87 and 88, IN-f1 8 "tank bar figures small"): the IN-f1 tank axis figures (heel, opening, top)
   read at 14 px, their m³ line at 12 px, the same size as the facts row below; under 760 px they still flow in one line */
.in-ft .in-ft-ax { height: 44px; }
.in-ft .in-ft-ax > span { font-size: 14px; line-height: 20px; }
.in-ft .in-ft-ax > span em { font-size: 12px; line-height: 16px; }
@media (max-width: 760px) { .in-ft .in-ft-ax { height: auto; } }
/* RUV H100 (REQ INT to RUV 87 and 88, RU-04 8 "no build-up bars"; ANS GATE2 to RUV 14:47): U21 graph supply-build-up, one bar
   row per supply in April: name, one track from 0 to the largest landed cost, the contract part in the supply colour, the
   regas part striped after it, the landed cost at the row end; the key names both parts. Under 560 px of card the name column
   narrows, the track keeps at least 96 px. */
.ru-lbu { margin: 14px 0 0; }
.ru-lbu-h { margin: 0 0 6px; font-size: var(--fs-label); font-weight: 600; color: var(--ink2); }
.ru-lbu-h small { font-weight: 400; margin-left: 6px; font-size: var(--fs-small); }
/* RUV H125 (TEXT-BUDGET RU-04 U21): the head row holds the name (h4) and the unit label as two blocks on one line */
.ru-lbu-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0 0 6px; }
.ru-lbu-hd .ru-lbu-h { margin: 0; }
.ru-lbu-u { font-size: var(--fs-small); }
.ru-lbu-r { display: grid; grid-template-columns: minmax(84px, 22%) minmax(96px, 1fr) 56px; align-items: center; gap: 10px; min-height: 24px; }
.ru-lbu-l { font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ru-lbu-t { position: relative; height: 10px; border-radius: 2px; background: var(--track); overflow: hidden; }
.ru-lbu-t i { position: absolute; top: 0; height: 100%; }
.ru-lbu-t i.g, .ru-lbu-kg { background: repeating-linear-gradient(135deg, var(--ink2) 0 2px, transparent 2px 4px); }
.ru-lbu-r b { text-align: right; font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.ru-lbu-k { margin: 8px 0 0; font-size: var(--fs-small); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.ru-lbu-k i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.ru-lbu-kc { background: var(--ink2); }
.ru-lbu-k b { font-variant-numeric: tabular-nums; }
@container rucard (max-width: 559.98px) {
  .ru-lbu-r { grid-template-columns: 76px minmax(96px, 1fr) 48px; gap: 8px; }
}
/* RUV H108 (COORDINATOR item 70 (a)): the U3 foot is chips (Lowest, above heel, Before), one row that wraps */
.ru-u3f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* RUV H108 (COORDINATOR item 70 (a)): the surplus cause line of U1, U12 and the U12 fuel rows in a closed details behind one chip */
.ru-why { margin: 12px 0 0; }
.ru-why > summary { display: inline-flex; list-style: none; cursor: pointer; }
.ru-why > summary::-webkit-details-marker { display: none; }
.ru-why > summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 12px; }
.ru-why > .ru-note.ru-surplus { margin: 8px 0 0; }
/* RUV H108 (COORDINATOR item 70 (a)): U22 marked live, the unit label of the measure line and the two verdict chips */
.ru-meas .ru-unit { margin-left: 4px; font-size: var(--fs-label); font-weight: 500; color: var(--muted); }
.ru-verdict > .chip + .chip { margin-left: 6px; }
/* RUV H133 (COORDINATOR item 70 (c)): RU-04 price curves as the 4875 Price curves card: JKM on a USD/MMBtu axis from 0,
   Brent on its own USD/bbl axis from 0; a point with a card takes the focus ring */
.ru-pcv { margin: 2px 0 12px; }
.ru-axis { stroke: var(--axis); stroke-width: 1; }
.ru-pcl { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
/* RUV H143 (JUDGE Round 25 P4 RU-04 "Brent is blue (prototype magenta)"): the index colours of tokens.css (proto IDX_COL; light and dark) */
.ru-pcl.jkm, .ru-pcd.jkm { stroke: var(--ix-jkm); }
.ru-pcl.brent, .ru-pcd.brent { stroke: var(--ix-brent); }
.ru-pcd { fill: var(--card); stroke-width: 2; }
.ru-pcd[tabindex]:hover, .ru-pcd[tabindex]:focus-visible { stroke-width: 3; outline: none; r: 5.5; }
/* RUV H134 (COORDINATOR item 70 (a), IN-f3 TEXT-BUDGET): live, the Terms of a position tile are chips that wrap */
.in-ft-t dd.in-ft-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* RUV H177 (AUD-H168-1): the "In the draft" tag of a U7 row and of the U26 counter row keeps its own width */
.ru-nbn .ru-nbd, .ru-ng-chips .ru-nbd { align-self: flex-start; white-space: nowrap; }

/* RUV H194 (FINDING-RUV-30): the 4875 no plan card body (proto/app/ui/r6/ov.css line 250, .pl-empty), for each (f) card
   on a drawn root with no plan; U25 adds the server clash under it */
[data-card-noplan] .pl-empty { display: flex; align-items: center; gap: 8px; color: var(--muted); padding: 28px 6px; font-weight: 600; }
[data-card-noplan] .ru-np-why { margin: 0 6px 12px; color: var(--ink2); }