/* assets/css/rd.css (lane RD): the producer screens of template (a) in the mockup look (inv/design-tokens.md T6).
   Colours only from tokens.css (lane SH); 4/8 grid (IA D12); type scale of IA D11; tabular figures on every number. */

/* buyer marks: one mark per counterparty, never colour alone (name beside it) [QR 22] */
/* spot markets keep their index colour (JKM, TTF); term buyers take distinct hues of the source set; FOB at the plant grey */
:root { --rd-b1: var(--src-1); --rd-b2: var(--src-4); --rd-b3: var(--src-3); --rd-b4: var(--src-7); --rd-b5: var(--plain-d);
  --rd-sa: var(--ix-jkm); --rd-se: var(--ix-ttf); --rd-sf: var(--plain); }

.rd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* card frame (T6, IA D13) */
.rd-card { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg, 12px); box-shadow: var(--sh-card);
  padding: 24px; min-width: 0; }
.rd-card-h { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; margin-bottom: 16px; }
.rd-card-tq { flex: 1 1 240px; min-width: 0; }
.rd-title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); }
.rd-q { margin: 4px 0 0; font-size: 14.5px; line-height: 1.4; color: var(--ink2); }
.rd-tools { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.rd-ic { flex: none; display: block; }

/* buttons (T6): 32 px, 13/600; Ask Neo labelled (D14) */
.rd-btn, .rd-ask { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border: 1px solid var(--ctl);
  border-radius: var(--r-md, 8px); background: var(--card); color: var(--ink); font: 600 13px/1 Inter, system-ui, sans-serif;
  cursor: pointer; transition: border-color var(--t-fast, .12s), color var(--t-fast, .12s), background var(--t-fast, .12s); }
.rd-btn:hover:not(:disabled), .rd-ask:hover { border-color: var(--acc); color: var(--acc-d); }
.rd-btn:active:not(:disabled), .rd-ask:active { background: var(--added); }
.rd-btn:focus-visible, .rd-ask:focus-visible, .rd-tablewrap:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.rd-btn:disabled { opacity: .5; cursor: not-allowed; }
.rd-ask { color: var(--muted); }

/* KPI tiles (T6): label 12.5/500, value 26/700, sub 12; one hero per card */
.rd-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); }
.rd-kpi { border: 1px solid var(--hair); border-radius: 10px; padding: 12px 16px; min-width: 0; background: var(--card); }
.rd-kpi-l { font-size: 12.5px; font-weight: 500; color: var(--muted); line-height: 1.4; }
.rd-kpi-v { margin-top: 4px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-kpi-hero .rd-kpi-v { font-size: 26px; }
.rd-kpi-u { margin-left: 4px; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.rd-kpi-of { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.rd-kpi-s { margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.4; font-variant-numeric: tabular-nums; }
.rd-kpi.rd-up .rd-kpi-v { color: var(--acc-d); }
.rd-kpi.rd-down .rd-kpi-v { color: var(--loss); }
:root[data-theme="dark"] .rd-kpi.rd-up .rd-kpi-v { color: var(--acc-tx); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rd-kpi.rd-up .rd-kpi-v { color: var(--acc-tx); } }

/* chip row (A04): medium form of IA section 8 */
.rd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rd-chip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border: 1px solid var(--hair);
  border-radius: 14px; background: var(--surface); font-size: 12.5px; color: var(--ink2); cursor: help; }
.rd-chip b { font-weight: 600; color: var(--ink); }
.rd-chip-n { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.rd-mark { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* table (T6 table.t): head 12/600 muted, cells 13, numbers right tabular, sticky head and total */
.rd-tablewrap { max-height: 456px; overflow: auto; border: 1px solid var(--hair2); border-radius: var(--r-md, 8px); }
.rd-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); }
.rd-t th { position: sticky; top: 0; z-index: 1; background: var(--card); text-align: left; font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 8px 12px; border-bottom: 1px solid var(--hair); white-space: nowrap; vertical-align: bottom; }
.rd-t th small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted-l); }
.rd-t td { padding: 0 12px; height: 32px; border-bottom: 1px solid var(--hair2); white-space: nowrap; }
.rd-t tbody tr:hover td { background: var(--added); }
.rd-t tfoot td { position: sticky; bottom: 0; background: var(--card); font-weight: 700; border-top: 1px solid var(--hair); border-bottom: 0; height: 36px; }
.rd-num { text-align: right !important; }
.rd-dim { color: var(--muted); }
.rd-strong { font-weight: 600; }
.rd-pos { display: inline-flex; align-items: center; gap: 8px; cursor: help; }
.rd-kind { display: inline-block; padding: 0 8px; height: 20px; line-height: 18px; border: 1px solid var(--hair); border-radius: var(--r-sm, 6px);
  font-size: 11.5px; font-weight: 600; color: var(--ink2); }

/* loading skeleton in the card's own shape (IA 7.10) */
.rd-skel { border-radius: 10px; background: linear-gradient(90deg, var(--track), var(--added), var(--track)); background-size: 200% 100%;
  animation: rd-shimmer 1.2s linear infinite; }
.rd-skel-kpis { height: 88px; }
@keyframes rd-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .rd-skel { animation: none; } }

/* RD-c7 row expand (inline drill-down) */
.rd-t tbody tr[data-cargo] { cursor: pointer; }
.rd-t tbody tr[aria-expanded="true"] td { background: var(--acc-t); font-weight: 600; }
.rd-t tr.rd-detail td { height: auto; padding: 16px 24px; background: var(--added); white-space: normal; }
.rd-dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: 32px; }
.rd-dh { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.rd-dh small { font-size: 11.5px; font-weight: 500; color: var(--muted-l); margin-left: 4px; }
/* RDV H67 (JUDGE round 5 finding 5, RD-06 sale price label over "Boil-off"): a row grows with a long label (min 28 px keeps the
   one line look), the number stays on one line */
.rd-dl { display: flex; justify-content: space-between; gap: 16px; min-height: 28px; padding: 3px 0; align-items: center; border-bottom: 1px solid var(--hair2); font-size: 13px; color: var(--ink2); }
.rd-dl > span { min-width: 0; }
.rd-dl b { flex: none; white-space: nowrap; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
/* RDV H74: a build-up row is a waterfall bar (b.rp-wv, the gate value form); it keeps the rd-dl look, not the rp.css size */
.rd-dl b.rp-wv { font-size: inherit; text-align: inherit; }
/* RDV H97 (item 64 (2), the prototype build-up bars, proto px.css .px-wfb): live, a build-up row draws its waterfall bar on a
   line of its own under its label and value; the sale and the totals from zero, each cost line from the running value */
.rd-dl[data-wf-bar] { flex-wrap: wrap; row-gap: 3px; }
.rd-dl .rd-wfb { flex: 0 0 100%; position: relative; height: 8px; }
.rd-dl .rd-wfb i { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--ink2); }
.rd-dl .rd-wfb i.start { background: var(--ink); }
.rd-dl .rd-wfb i.dn { background: var(--loss); opacity: .55; }
.rd-dl .rd-wfb i.up { background: var(--acc); opacity: .55; }
.rd-dl .rd-wfb i.sub { background: var(--ink2); opacity: .7; }
.rd-dl .rd-wfb i.tot { background: var(--acc); opacity: 1; }
.rd-dl .rd-wfb i.tot.dn { background: var(--loss); opacity: 1; }
.rd-dl-total { border-top: 1px solid var(--hair); border-bottom: 0; }
.rd-dl-total span, .rd-dl-total b { font-weight: 700; color: var(--ink); }
.rd-dnote { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

/* RD-c2 What if (A16): five boxes on one row at 1440, 3 + 2 below 1360 [KB T5 inputs: label above field, visible buttons] */
.rd-wi { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1360px) { .rd-wi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rd-wi-box { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; padding: 12px 16px 16px; border: 1px solid var(--hair);
  border-radius: 10px; background: var(--card); }
.rd-wi-t { padding: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); float: left; width: 100%; }
.rd-wi-h { margin: 0 0 4px; font-size: 12px; line-height: 1.4; color: var(--muted); clear: both; }
.rd-wi-l { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--ink2); }
.rd-wi-o { float: right; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rd-wi-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rd-wi-x { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; }
.rd-wi-f { margin-top: auto; padding-top: 12px; display: flex; align-items: center; min-height: 44px; }
.rd-sel, .rd-inp { box-sizing: border-box; width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--ctl); border-radius: var(--r-md, 8px);
  background: var(--card); color: var(--ink); font: 500 13px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; min-width: 0; }
.rd-inp.rd-num { text-align: right; }
.rd-sel:focus-visible, .rd-inp:focus-visible, .rd-range:focus-visible, .rd-mchip:focus-visible, .rd-chk input:focus-visible, .rd-echip-x:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 2px; }
.rd-inp:disabled { opacity: .5; }
.rd-range { width: 100%; margin: 4px 0; accent-color: var(--acc); }
.rd-mchips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.rd-mchip { height: 24px; padding: 0; border: 1px solid var(--hair); border-radius: 6px; background: var(--card); color: var(--ink2);
  font: 500 11px/1 Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; transition: background var(--t-fast, .12s), border-color var(--t-fast, .12s); }
.rd-mchip:hover { border-color: var(--acc); }
/* JUDGE Round 1 cross item 6 (REQ LIVE to RDV 8): a filled chip or button under white text takes --acc-fill, 4.5:1 or more in both themes */
.rd-mchip[aria-pressed="true"] { background: var(--acc-fill); border-color: var(--acc-fill); color: var(--on-acc); font-weight: 600; }
.rd-chk { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--ink); cursor: pointer; }
.rd-chk input { margin: 2px 0 0; accent-color: var(--acc); flex: none; width: 16px; height: 16px; }
.rd-btn-p { background: var(--acc-fill); border-color: var(--acc-fill); color: var(--on-acc); }
.rd-btn-p:hover:not(:disabled) { background: var(--acc-fill-h); border-color: var(--acc-fill-h); color: var(--on-acc); }

/* result line: Before, Now, Change (signed, U+2212), rules; edits in force with Remove */
.rd-wi-res { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.rd-wi-res-0 { font-size: 13px; color: var(--muted); }
.rd-bnc { display: flex; align-items: flex-end; gap: 24px; }
.rd-bnc > span { display: flex; flex-direction: column; gap: 2px; min-width: 64px; }
.rd-bnc small { font-size: 12px; color: var(--muted); }
.rd-bnc b { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; min-height: 24px; }
.rd-bnc .rd-up b { color: var(--acc-d); } .rd-bnc .rd-down b { color: var(--loss); }
:root[data-theme="dark"] .rd-bnc .rd-up b { color: var(--acc-tx); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rd-bnc .rd-up b { color: var(--acc-tx); } }
.rd-bnc-u { align-self: flex-end; font-size: 12px; color: var(--muted); padding-bottom: 4px; }
/* RDV H35 (AUD-H34-1): two named rows, Cargo margin and Net after ship hire, when a fleet step moves the net only */
.rd-bnc2 { flex-wrap: wrap; row-gap: 4px; }
.rd-bnc2 > .rd-bnc-k { flex: 0 0 auto; min-width: 136px; align-self: flex-end; font-size: 12px; font-weight: 600; color: var(--muted); padding-bottom: 4px; }
.rd-bnc2 + .rd-bnc2 { margin-top: 8px; }
.rd-echips { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-echip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 12px; border-radius: 14px; background: var(--added);
  font-size: 12.5px; font-weight: 500; color: var(--ink); }
.rd-echip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.rd-echip-x:hover { background: var(--card); color: var(--loss); }
.rd-echip-x svg { width: 12px; height: 12px; }
.rd-dots { display: inline-block; width: 40px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--track), var(--added), var(--track));
  background-size: 200% 100%; animation: rd-sh 1.1s linear infinite; vertical-align: middle; }
@keyframes rd-sh { from { background-position: 200% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .rd-dots { animation: none; } }
.rd-err { margin-top: 16px; display: grid; gap: 4px; padding: 12px 16px; border: 1px solid var(--loss-b); border-radius: 10px; background: var(--loss-l);
  font-size: 13px; line-height: 1.5; color: var(--ink); }
.rd-err .rd-btn { justify-self: start; margin-top: 8px; }

/* updating: stale numbers stay grey until the answer is in (IA 7.1, P S12) */
.rd-updating .rd-kpi-v, .rd-updating .rd-t tbody td, .rd-stale .rd-bnc b { color: var(--muted) !important; transition: color var(--t-fast, .12s); }
.rd-stc { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--added); font-size: 12px; font-weight: 600; color: var(--ink2); }

/* RD-c5 Changes so far: step line, direct labels, nice ticks [KB T9: direct labels over legend] */
.rd-unit { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.rd-chart { display: block; width: 100%; height: auto; max-height: 240px; overflow: visible; }
.rd-gl { stroke: var(--grid); stroke-width: 1; }
.rd-tick { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.rd-sl { fill: none; stroke: var(--acc); stroke-width: 2; }
.rd-pt circle { fill: var(--card); stroke: var(--acc); stroke-width: 2; }
.rd-pt-now circle { fill: var(--acc); }
.rd-pv { font-size: 12.5px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; }
.rd-pd-up { fill: var(--acc-d); font-weight: 600; } .rd-pd-down { fill: var(--loss); font-weight: 600; }
.rd-px { font-size: 12px; fill: var(--ink2); }
:root[data-theme="dark"] .rd-pd-up { fill: var(--acc-tx); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rd-pd-up { fill: var(--acc-tx); } }
/* month chips: one year label per row group, four months a row, short names never clip */
.rd-mchips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rd-myr { grid-column: 1 / -1; margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.rd-mchip { font-size: 12px; }
/* unit suffix inside the field row */
.rd-affix { display: flex; align-items: center; gap: 8px; }
.rd-affix .rd-inp { flex: 1 1 auto; }
.rd-affix span { flex: none; font-size: 12px; color: var(--muted); }
.rd-inp[aria-invalid="true"] { border-color: var(--loss); }
/* designed states of RD-01 (IA 7.10) */
.rd-state { padding: 32px 16px; display: flex; justify-content: center; }
.rd-skel-box { height: 296px; }
/* RD-c3 Steady plan */
.rd-st { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-start; }
.rd-st-n { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.rd-st-n b { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.rd-st-n span { font-size: 12px; color: var(--muted); }
.rd-st-c { flex: 0 1 280px; min-width: 0; }
.rd-st-p { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink2); font-variant-numeric: tabular-nums; }
.rd-st-best { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; color: var(--ink2); }
.rd-st-best b { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.rd-st-best b.rd-up { color: var(--acc-d); }
:root[data-theme="dark"] .rd-st-best b.rd-up { color: var(--acc-tx); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rd-st-best b.rd-up { color: var(--acc-tx); } }
.rd-st-best .rd-btn { margin-left: auto; }
.rd-dim { color: var(--muted); }

/* ---------- RD-02 Lifting calendar (A06, A07) and the producer cell popover (A08 to A10) ---------- */
/* [KB T4.3] tabular figures; [QR 54] one number per cell carries the weight; 4/8 px grid; 11 px floor */
.rd-cal-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.rd-cal-key .rd-chip b { margin-right: -2px; }
.rd-cal-cnt { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink2); margin-left: 8px; }
.rd-cal-sw { width: 12px; height: 12px; border-radius: 3px; border: 2px solid var(--acc); }
.rd-cal-scale { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.rd-cal-scale i { width: 96px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(var(--ramp-rgb), .12), rgba(var(--ramp-rgb), 1)); }
.rd-cal-wrap { overflow-x: auto; padding-bottom: 4px; }
.rd-cal { display: grid; grid-template-columns: 40px repeat(15, minmax(64px, 1fr)); gap: 4px; min-width: 1056px; }
/* JUDGE Round 1 cross item 6 (REQ LIVE to RDV 8): the cell alpha skips the band where neither text colour holds 4.5:1. A plain
   cell (--t up to .604) draws --t / .604 * --cal-lo of the ramp under --ink; a hot cell starts at --cal-hi of --cal-hot-rgb
   (light: the --acc-fill channels under white; dark: the ramp under --page); --cal-lo-l and --cal-hi-l for the loss ramp. */
.rd-cal { --cal-lo: .604; --cal-hi: .87; --cal-lo-l: .604; --cal-hi-l: .93; --cal-hot-rgb: 31, 107, 76; }
:root[data-theme="dark"] .rd-cal { --cal-lo: .52; --cal-hi: .72; --cal-lo-l: .54; --cal-hi-l: .74; --cal-hot-rgb: var(--ramp-rgb); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rd-cal { --cal-lo: .52; --cal-hi: .72; --cal-lo-l: .54; --cal-hi-l: .74; --cal-hot-rgb: var(--ramp-rgb); } }
.rd-cal-corner { height: 32px; }
.rd-cal-mh { height: 32px; display: flex; flex-direction: column; justify-content: flex-end; font-size: 12px; font-weight: 600; color: var(--ink2); padding: 0 4px; line-height: 16px; }
.rd-cal-mh small { font-size: 11px; font-weight: 500; color: var(--muted-l); order: -1; }
.rd-cal-rh { display: flex; align-items: center; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rd-cal-c { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 2px; height: 64px; padding: 6px; margin: 0;
  border: 1px solid transparent; border-radius: 8px; background: rgba(var(--ramp-rgb), calc(var(--t) / .604 * var(--cal-lo))); color: var(--ink); text-align: left;
  font: inherit; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.rd-cal-c:hover { box-shadow: 0 2px 8px rgba(18, 38, 31, .14); transform: translateY(-1px); }
.rd-cal-c:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.rd-cal-c:active { transform: translateY(0); box-shadow: none; }
.rd-cal-c.hot { color: var(--on-acc); background: rgba(var(--cal-hot-rgb), calc(var(--cal-hi) + (var(--t) - .604) / .396 * (1 - var(--cal-hi)))); }
.rd-cal-none { background: var(--band); border-radius: 8px; height: 64px; }
.rd-cal-top { display: flex; gap: 4px; font-size: 11px; line-height: 14px; white-space: nowrap; }
.rd-cal-top b { font-weight: 700; opacity: 1; }
.rd-cal-v { font-size: 15px; line-height: 18px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.rd-cal-b { display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 14px; font-weight: 600; }
.rd-cal-b .rd-mark { width: 8px; height: 8px; box-shadow: 0 0 0 1px var(--surface); }
.rd-cal-b em { margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums; padding: 0 4px; border-radius: 4px; background: var(--surface); color: var(--acc-tx); }
.rd-cal-b em.down { color: var(--loss); }
.rd-cal-c.chg { border: 2px solid var(--acc); padding: 5px; }
.rd-cal-c.same { opacity: .42; }
.rd-cal-was { position: absolute; left: 8px; right: 8px; bottom: -2px; transform: translateY(100%); font-size: 11px; line-height: 14px; color: var(--muted); display: none; }
.rd-cal-c.chg:hover .rd-cal-was { display: block; }
.rd-skel-cal { height: 560px; }
.rd-skel-line { display: inline-block; width: 120px; height: 12px; border-radius: 6px; vertical-align: middle; }

.pop.rd-pop { width: 416px; padding: 16px; }
.rd-pop-h { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.rd-pop-h b { font-weight: 700; }
.rd-pop-h .rd-pos { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.rd-pop-x { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.rd-pop-x:hover { background: var(--track); color: var(--ink); }
.rd-pop-sub { margin: 4px 0 16px; font-size: 12.5px; color: var(--muted); }
.rd-pop-sp { margin-bottom: 16px; }
.rd-pop-ah { margin-top: 0; }
.rd-pop-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--hair2); }
.rd-pop-row:last-child { border-bottom: 0; }
.rd-pop-l { font-size: 13px; font-weight: 600; color: var(--ink); display: flex; flex-direction: column; }
.rd-pop-l small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
/* AUD-H22-2 (jack SPEC OP-2): "Give this cargo to" head, the current buyer row, one row per other buyer */
.rd-pop-gh { margin: 8px 0 0; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.rd-pop-cur .rd-pop-d b { color: var(--muted); }
.rd-pop-l .rd-pos { display: inline-flex; align-items: center; gap: 6px; }
.rd-pop-d { display: grid; grid-template-columns: auto auto; justify-items: end; column-gap: 8px; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.rd-pop-d b { font-weight: 700; color: var(--ink); }
.rd-pop-d em { font-style: normal; font-weight: 600; color: var(--muted); }
.rd-pop-d em.up { color: var(--acc-tx); }
.rd-pop-d em.down { color: var(--loss); }
.rd-pop-d > span { grid-column: 1 / -1; font-size: 11.5px; }
.rd-pop-ok { color: var(--muted); }
.rd-pop-bad { color: var(--loss); font-size: 12px; }
.rd-pop-q { color: var(--muted); font-size: 12px; grid-column: 1 / -1; }
.rd-btn.rd-btn-sm { height: 28px; padding: 0 12px; font-size: 12.5px; }
/* dark: the ramp is bright, so hot cells carry dark text (CRIT r3 1, contrast of hot cells) */
:root[data-theme="dark"] .rd-cal-c.hot { color: var(--page); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rd-cal-c.hot { color: var(--page); } }
:root[data-theme="dark"] .rd-cal-c:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
:root[data-theme="dark"] .rd-cal-c.same { color: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rd-cal-c.same { color: var(--muted); } }
.rd-cal-c.chg.loss { background: rgba(var(--ramp-loss-rgb), calc(var(--t) / .604 * var(--cal-lo-l))); border-color: var(--loss); }
.rd-cal-c.chg.loss.hot { background: rgba(var(--ramp-loss-rgb), calc(var(--cal-hi-l) + (var(--t) - .604) / .396 * (1 - var(--cal-hi-l)))); }
.rd-cal-c.same { background: var(--band); color: var(--muted); opacity: 1; }
.rd-cal-b small { margin-left: auto; font-size: 11px; font-weight: 500; white-space: nowrap; }
.rd-cal-scale b { font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; }
.rd-cal-scale i.two { background: linear-gradient(90deg, rgba(var(--ramp-loss-rgb), 1), rgba(var(--ramp-loss-rgb), .12) 50%, rgba(var(--ramp-rgb), .12) 50%, rgba(var(--ramp-rgb), 1)); }
.rd-pop-give { flex-direction: column; align-items: flex-start; gap: 4px; }
.rd-pop-give select { max-width: 200px; width: 200px; }
/* RDV H161 (REQ INT to RDV 34, JUDGE round 30): the live cell popover in the 4875 prototype cellpop-cargo form (ov.js .pp) */
.pop.rd-pop.rd-pp-pop { width: 232px; padding: 10px 12px; }
.rd-pp-h { gap: 6px; font-size: 13px; }
.rd-pp-h b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rd-pp-sp { margin-left: auto; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.rd-pp-sp small { margin-left: 3px; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.rd-pp-h .rd-pop-x { margin-left: 0; width: 24px; height: 24px; }
.rd-pp-u { margin: 2px 0 6px; font-size: 11.5px; color: var(--muted); }
.rd-pp-r { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; min-height: 36px; border-bottom: 1px solid var(--hair2); }
button.rd-pp-r { width: 100%; border: 0; background: transparent; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; grid-template-columns: 18px minmax(0, 1fr); }
.rd-pp-i { display: grid; place-items: center; color: var(--muted); }
.rd-pp-i svg { width: 14px; height: 14px; }
.rd-pp-l { font-size: 12.5px; font-weight: 600; color: var(--ink); min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.rd-pp-l small { font-size: 11px; font-weight: 500; color: var(--muted); }
.rd-pp-sel { max-width: 100%; font-size: 12px; }
.rd-pp-d { font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.rd-pp-d em { font-style: normal; font-weight: 700; color: var(--muted); }
.rd-pp-d em.up { color: var(--acc-tx); }
.rd-pp-d em.down { color: var(--loss); }
.rd-pp-d small { font-size: 10.5px; color: var(--muted); }
.rd-pp-d .rd-pop-bad { font-size: 11px; max-width: 120px; text-align: right; }
.rd-pp-run { color: var(--muted); font-size: 11.5px; }
.rd-pp-err { margin: 4px 0; }
.rd-pp-sep { height: 1px; background: var(--hair); margin: 6px 0; }
.rd-pp-gh { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.rd-pp-gr { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 20px; }
.rd-pp-gr.off .rd-pp-gc { color: var(--muted); }
.rd-pp-gc { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 4px; }
.rd-pp-gd { display: flex; gap: 2px; min-width: 0; overflow: hidden; }
.rd-pp-gd .gdc { flex: 1 1 0; min-width: 4px; max-width: 14px; height: 12px; border-radius: 2px; background: var(--track); }
.rd-pp-gd .gdc.up { background: var(--acc); }
.rd-pp-gd .gdc.down { background: var(--loss); }
.rd-pp-gd .gdc.z { background: var(--hair); }
.rd-pp-gd .gdc.cur { background: var(--ink); }
.rd-pp-gd .gdc.blk { background: repeating-linear-gradient(135deg, var(--hair) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--hair); }
.rd-pp-gd .gdc.nop { background: transparent; }
.rd-pp-ban { color: var(--loss); }
.rd-pp-ban svg { width: 12px; height: 12px; }
.rd-pp-neo { border-bottom: 0; min-height: 32px; }
.rd-pp-n { color: var(--acc-tx); }
@media (max-width: 560px) { .pop.rd-pop.rd-pp-pop { width: min(232px, calc(100vw - 16px)); } }
.rd-cal-top { justify-content: space-between; }
.rd-cal-top s { text-decoration-thickness: 1.5px; }
.rd-cal-top { gap: 2px; letter-spacing: -.01em; }

/* ---------- RD-c6 Next best ADPs (A14, A15) ---------- */
.rd-nb-cap { margin: 12px 0 0; font-size: 12.5px; line-height: 18px; color: var(--muted); max-width: 880px; }
.rd-nb-cap b { font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; }
/* RDV H57 (COORDINATOR item 64 (2)): port of the 4875 prototype card 7 look (proto/app/ui/r6/ov.css ".alts", ".ms",
   ".gtrack" and the producer ".alts.a" rules, round 6c), scoped to this card */
.rd-nb-alts { display: grid; gap: 4px; }
.rd-nb-alts .alt { display: grid; grid-template-columns: minmax(0, 60%) minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.rd-nb-alts .alt:hover { background: var(--added); }
.rd-nb-alts .alt.cur, .rd-nb-alts .alt.ax { cursor: default; }
.rd-nb-alts .alt.ax { padding-top: 0; padding-bottom: 0; }
.rd-nb-alts .alt.ax:hover, .rd-nb-alts .alt.cur:hover { background: transparent; }
.rd-nb-alts .alt:focus-visible { outline: none; box-shadow: var(--focus); }
/* RDV H179 (AUD-H166-1, ANS ENA to RDV 79): the plan of this draft or step in the list, the 4875 pvrow mark (proto r6/ov.css .alt.pvrow) */
.rd-nb-alts .alt.pvrow { outline: 1.5px dashed var(--acc-d); outline-offset: -1px; background: var(--acc-t, var(--added)); }
.rd-nb-alts .alt.pvrow.in { cursor: default; }
.rd-nb-alts .alt.pvrow.in .al > b { width: auto; white-space: nowrap; }
.rd-nb-alts .al { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; font-size: 12.5px; color: var(--ink2); }
.rd-nb-alts .al > b { width: 22px; flex: none; font-variant-numeric: tabular-nums; }
.rd-nb-alts .alt.same .al > b { color: var(--muted); }
.rd-nb-alts .ms { display: inline-flex; flex: 1 1 auto; min-width: 0; gap: 2px; }
.rd-nb-alts .ms > span { display: inline-flex; flex: 1 1 0; min-width: 0; gap: 1px; }
.rd-nb-alts .ms i { flex: 1 1 0; min-width: 1px; height: 15px; border-radius: 1.5px; background: var(--track); }
.rd-nb-alts .ms i.mvd { box-shadow: 0 0 0 1.5px var(--warn); }
.rd-nb-alts .ab { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rd-nb-alts .ab > span { font-size: 12.5px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-nb-alts .alt.cur .ab > span.av { font-size: 13px; font-weight: 700; }
.rd-nb-alts .ab .u { font-weight: 400; color: var(--muted); font-size: 12px; }
.rd-nb-alts .ab .neg { color: var(--loss); }
.rd-nb-alts .ab .muted { color: var(--muted); }
.rd-nb-alts .gtrack { position: relative; flex: none; width: 46%; height: 9px; border-radius: 4px; background: var(--track); }
.rd-nb-alts .gtrack > i { position: absolute; top: 0; bottom: 0; right: 0; border-radius: 4px 0 0 4px; }
.rd-nb-alts .gtrack > i.one { background: var(--acc-l); opacity: .45; border-radius: 4px; }
.rd-nb-alts .alt.same .gtrack > i.one { opacity: .25; }
.rd-nb-alts .gtrack > i.loss { background: var(--loss); opacity: .8; }
.rd-nb-alts .gtrack > b { position: absolute; top: -3px; bottom: -3px; right: 0; width: 2px; border-radius: 1px; background: var(--ink); }
.rd-nb-alts .gtrack.gax { background: transparent; height: 18px; border-radius: 0; border-bottom: 1px solid var(--hair); overflow: visible; }
.rd-nb-alts .gtrack.gax > em { position: absolute; bottom: 3px; transform: translateX(50%); font-style: normal; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-nb-alts .gtrack.gax > em:first-child { transform: none; }
.rd-nb-alts.long { max-height: 440px; overflow-y: auto; padding-right: 4px; }
.rd-nb-wait { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; font-size: 13px; color: var(--ink2); }
.rd-nb-wait b { font-weight: 600; color: var(--ink); }
.rd-nb-wait p { margin: 4px 0 0; color: var(--muted); }
.rd-nb-sk { display: block; width: 100%; height: 36px; margin-bottom: 8px; border-radius: 8px; }
.rd-spin { width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--acc-l); border-top-color: var(--acc); animation: rd-spin .8s linear infinite; flex: none; }
@keyframes rd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rd-spin { animation: none; } }

/* ---- RD-04 Money (session 4) ---- */
.rd-neg { color: var(--loss) !important; }
.rd-pos-v { color: var(--acc-d); }
.rd-muted { color: var(--muted); font-size: 13px; margin: 0; }
.rd-r { text-align: right; }
.rd-dl-start span, .rd-dl-start b { font-weight: 600; color: var(--ink); }
.rd-chart { position: relative; min-height: 120px; }
.rd-chart svg, .rd-mb-chart svg { display: block; overflow: visible; }
/* value bridge: chart left, the cargoes of the picked part right [KB T6: drill-down in place] */
.rd-mb { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 24px; align-items: start; }
@media (max-width: 1100px) { .rd-mb { grid-template-columns: minmax(0, 1fr); } }
.rd-mb-chart { min-width: 0; }
.rd-mb-side { min-width: 0; border-left: 1px solid var(--hair2); padding-left: 24px; }
@media (max-width: 1100px) { .rd-mb-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair2); padding-top: 16px; } }
.rd-mb-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.rd-mb-h .rd-dh { margin: 0; font-size: 14px; color: var(--ink); }
.rd-mb-h b { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rd-mb-h b small { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.rd-mb-t { margin: 4px 0 12px; font-size: 13px; line-height: 1.45; color: var(--ink2); }
/* SENSE-2-6 (RDV H6): the Base ADP sells to a market the inputs of this step turn off */
.rd-mb-off { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--ink2); }
.rd-mb-off.rd-fault { color: var(--loss); }
.rd-offm { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; font-size: 11px; line-height: 18px; color: var(--ink2); background: var(--surface); cursor: help; }
.rd-mb-tab, .rd-ex-tab { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.rd-mb-tab th, .rd-ex-tab thead th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 8px 8px 0; border-bottom: 1px solid var(--hair); }
.rd-mb-tab th.rd-r, .rd-ex-tab th.rd-r { text-align: right; padding-right: 0; }
.rd-mb-tab td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--hair2); vertical-align: top; color: var(--ink); }
.rd-mb-tab td:last-child { padding-right: 0; font-weight: 600; white-space: nowrap; }
.rd-mb-tab td small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.rd-mb-more { margin-top: 12px; }
.rd-wf { cursor: default; }
.rd-wf-part { cursor: pointer; outline: none; }
.rd-wf-hit { fill: transparent; }
.rd-wf-part:hover .rd-wf-hit, .rd-col:hover .rd-wf-hit { fill: var(--track); opacity: .55; }
.rd-wf-part.on .rd-wf-hit { fill: var(--acc-t); opacity: 1; }
.rd-wf-part:focus-visible .rd-wf-hit { stroke: var(--acc); stroke-width: 2; }
.rd-wf rect:not(.rd-wf-hit), .rd-col rect:not(.rd-wf-hit) { transition: opacity var(--t-fast, .12s); }
/* rolling 90 days hover read-out */
.rd-xh-tip { position: absolute; top: 16px; min-width: 184px; padding: 8px 12px; border: 1px solid var(--hair); border-radius: 8px; background: var(--card);
  box-shadow: var(--sh-pop, 0 8px 24px rgba(0,0,0,.12)); font-size: 12px; color: var(--ink2); pointer-events: none; display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.rd-xh-tip b { font-size: 12.5px; color: var(--ink); }
.rd-xh-tip span { display: flex; align-items: center; gap: 8px; }
.rd-xh-tip em { margin-left: auto; font-style: normal; font-weight: 600; color: var(--ink); }
.rd-xh-tip small { font-size: 11px; color: var(--muted); }
/* RDV H136 (REQ INT to RDV 26, JUDGE round 22 RD-03 look 2: the Route ribbon card printed its cargo list one token per line
   "C / 69 / , C / 72" with its title on 2 lines, the Ship use card wrapped "65 %" under its label; the same in the
   rolling hover read-outs of RD-02, RD-04, RD-06 and RD-E1): a server mark span inside a row value, the title or the
   quiet line is text in its line, not a flex box of its own; the row spans keep their flex form */
.rd-xh-tip span span, .rd-xh-tip b span, .rd-xh-tip small span { display: inline; gap: 0; }
.rd-xh-d { border-top: 1px solid var(--hair2); padding-top: 4px; }
/* explain per cargo: list left, cargo right (4b B4.21) */
.rd-ex { display: grid; grid-template-columns: minmax(280px, 2fr) minmax(0, 3fr); gap: 24px; align-items: start; }
@media (max-width: 1100px) { .rd-ex { grid-template-columns: minmax(0, 1fr); } }
.rd-ex-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair2); }
.rd-ex-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 48px; padding: 4px 8px;
  border-bottom: 1px solid var(--hair2); cursor: pointer; border-radius: 6px; transition: background var(--t-fast, .12s); }
.rd-ex-list li:hover { background: var(--track); }
.rd-ex-list li.on { background: var(--acc-t); box-shadow: inset 3px 0 0 var(--acc); }
.rd-ex-list li:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.rd-ex-n { font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rd-ex-who { min-width: 0; font-size: 13px; color: var(--ink); }
.rd-ex-who small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-ex-list b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-ex-r { min-width: 0; border-left: 1px solid var(--hair2); padding-left: 24px; }
@media (max-width: 1100px) { .rd-ex-r { border-left: 0; padding-left: 0; } }
.rd-ex-h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.rd-ex-h > div { display: flex; align-items: baseline; gap: 12px; font-size: 14px; color: var(--ink2); }
.rd-ex-h > div b { font-size: 16px; color: var(--ink); }
.rd-ex-big { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rd-ex-big small { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.rd-ex-why { margin: 4px 0 16px; font-size: 13.5px; line-height: 1.45; color: var(--ink2); }
/* RDV H15 (AUD-H14-1): boil-off fact and the rounding line under the cargo money table */
.rd-ex-note, .rd-ex-round, .rd-round { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink2); }
.rd-ex-tab th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink2); padding: 0 8px 0 0; height: 32px; border-bottom: 1px solid var(--hair2); }
.rd-ex-tab td { height: 32px; padding: 0 0 0 16px; border-bottom: 1px solid var(--hair2); color: var(--ink); white-space: nowrap; }
.rd-ex-tab tfoot th, .rd-ex-tab tfoot td { font-weight: 700; color: var(--ink); border-top: 1px solid var(--hair); border-bottom: 0; }
.rd-ex-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 24px; }
[data-rd-chart] svg text { pointer-events: none; }
.rd-halo { paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }
.rd-mid { cursor: help; text-decoration: underline dotted var(--axis); text-underline-offset: 3px; }
.rd-mb-tab { table-layout: fixed; }
.rd-mb-tab th:last-child { width: 64px; }
.rd-mb-tab .rd-pos { overflow-wrap: anywhere; }

/* ---- RD-03 Operations (session 5): storage, berth calendar, fleet. 4 px grid, tokens only. ---- */
.rd-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .rd-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rd-kpis-4 .rd-kpi { display: flex; flex-direction: column; }
.rd-kpis-4 .rd-kpi-s { flex: 1; }
/* [KB T6 sparkline] month mini picture of a tile: one bar per month, the tile month strong */
.rd-ob { display: flex; align-items: flex-end; gap: 2px; height: 24px; margin-top: 8px; }
.rd-ob i { flex: 1; border-radius: 1px; min-width: 2px; }
.rd-ok-bar { height: 6px; margin-top: 8px; border-radius: 3px; background: var(--loss-t, var(--track)); overflow: hidden; }
.rd-ok-bar i { display: block; height: 100%; border-radius: 3px; background: var(--acc); }
.rd-o-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 16px 0 8px; }
.rd-o-bar .rd-muted { font-size: 12px; }
/* RDV H54 (JUDGE Round 1 RD-03, REQ INT to RDV 3): the "Months shown" seg (All 15 months and five quarters) is one nowrap row
   in ui.css and ran 90 px out of the Storage card at 1280 with the dock. In the Storage bar it wraps its buttons and is never
   wider than the bar, so every range stays inside the card. */
.rd-o-bar > .seg { flex-wrap: wrap; max-width: 100%; min-width: 0; }
.rd-o-tank, .rd-o-fleet { max-height: none; }
.rd-o-fleet { margin-top: 16px; }
.rd-o-ledger { max-height: 400px; }
.rd-o-ledger td.r, .rd-o-ledger th.r { text-align: right; }
.rd-o-ledger tr.rd-o-lift td { background: var(--added); }
.rd-o-near { color: var(--warn); font-weight: 600; }
.rd-o-bad { color: var(--loss); font-weight: 700; }
.rd-fl-l { fill: #fff !important; pointer-events: none; }
:root[data-theme="dark"] .rd-fl-l { fill: var(--page) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rd-fl-l { fill: var(--page) !important; } }
.rd-fl-s { cursor: default; transition: opacity var(--t-fast, .12s); }
.rd-fl-s:hover { opacity: .82; }
/* berth calendar: month rows x 31 day cells; a row is a button that opens the month by hour */
.rd-bc { margin-top: 16px; display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.rd-bc-r { display: grid; grid-template-columns: 72px repeat(31, minmax(0, 1fr)); gap: 2px; align-items: center; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; border-radius: 6px; cursor: pointer; }
.rd-bc-r > span { font-size: 12px; color: var(--muted); padding-left: 4px; white-space: nowrap; }
.rd-bc-r:hover > span, .rd-bc-r.on > span { color: var(--ink); font-weight: 600; }
.rd-bc-r.on > span { text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.rd-bc-r:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.rd-bc-h { cursor: default; }
.rd-bc-h i { font-style: normal; font-size: 11px; color: var(--muted); text-align: center; }
.rd-bc-c { display: block; height: 24px; border-radius: 4px; background: var(--track); font-style: normal; }
.rd-bc-x { display: block; height: 24px; }
.rd-bc-closed { background: repeating-linear-gradient(45deg, var(--track), var(--track) 3px, var(--plain) 3px, var(--plain) 5px); }
.rd-bc-on { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--bc) 24%, var(--card)); box-shadow: inset 0 -3px 0 var(--bc); }
.rd-bc-r:hover .rd-bc-c:not(.rd-bc-on) { background: var(--hair2); }
.rd-bh { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair2); }
.rd-bh-h { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.rd-bh-h b { font-size: 13px; color: var(--ink); }
.rd-bh-h .rd-muted { margin-left: auto; font-size: 12px; }
.rd-bh .pill { background: var(--track); color: var(--ink2); }
.rd-bh .rd-chart { min-height: 0; }
/* ---- RD-05 Contracts (session 5) ---- */
.rd-k-plan .rd-t th.c, .rd-k-plan .rd-t td.c { text-align: center; padding: 0 4px; }
.rd-k-plan .rd-t th.r, .rd-k-plan .rd-t td.r, .rd-k-nom .rd-t th.r, .rd-k-nom .rd-t td.r { text-align: right; }
.rd-k-plan .rd-t td { height: 48px; }
.rd-kd[role="button"] { cursor: pointer; } /* RDV H4: a month cell with a month target opens its target box */
.rd-kd[role="button"]:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.rd-k-tgt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding: 12px; border: 1px solid var(--hair); border-radius: 8px; }
.rd-k-tgt-h { font-size: 13px; color: var(--ink); }
.rd-k-tgt-n { font-size: 12px; color: var(--muted); }
.rd-k-tgt-n b { color: var(--ink); }
.rd-k-tgt-s { display: inline-flex; align-items: center; gap: 8px; }
.rd-k-tgt-s output { min-width: 72px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink); }
.rd-k-plan .rd-pos > span { display: flex; flex-direction: column; line-height: 1.3; }
.rd-k-plan .rd-pos small { font-size: 11.5px; color: var(--muted); }
.rd-kd { display: inline-flex; gap: 4px; padding: 4px; border-radius: 6px; } /* PB polish R2 [KB T5 4 px grid], was 3 px */
.rd-kd i { width: 8px; height: 8px; border-radius: 50%; }
.rd-kd i.on { background: var(--bc, var(--acc)); }
.rd-kd i.miss { box-shadow: inset 0 0 0 1.5px var(--loss); }
.rd-kd.off { background: var(--loss-t, var(--added)); }
.rd-kys { display: inline-flex; gap: 12px; }
.rd-ky { display: inline-grid; grid-template-columns: auto auto; column-gap: 4px; align-items: baseline; min-width: 56px; }
.rd-ky b { font-size: 13px; color: var(--ink); }
.rd-ky em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.rd-ky i { grid-column: 1 / -1; position: relative; display: block; height: 4px; margin-top: 4px; border-radius: 2px; background: var(--acc-l); }
.rd-ky i u { position: absolute; top: -2px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 1px; background: var(--acc-d); }
.rd-ky.off b { color: var(--loss); } .rd-ky.off i u { background: var(--loss); }
.rd-k-key { margin: 8px 0 0; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rd-k-key .rd-kd { padding: 0; }
.rd-k-key .rd-kd i.on { background: var(--acc); }
.rd-k-rules .rd-t td { white-space: normal; height: 40px; }
.rd-k-rules tr[data-rd-rule] { cursor: pointer; }
.rd-k-rules tr[data-rd-rule]:focus-visible td { outline: 2px solid var(--acc); outline-offset: -2px; }
.rd-k-rules tr.rd-k-quiet td { color: var(--muted); }
.rd-k-na { background: var(--track); color: var(--muted); }
.rd-k-bad { background: var(--loss-t, var(--track)); color: var(--loss); }
.rd-k-nom tr.rd-k-rec td { color: var(--muted); }
.rd-k-nom .pill .rd-ic, .rd-k-rules .pill .rd-ic { width: 12px; height: 12px; }
/* RDV H64 (REQ INT to RDV 8, RD-05 button wall): live RD-k2 select boxes, the Due state pill and one action row */
.rd-k-nom .rd-t th.rd-k-sel, .rd-k-nom .rd-t td.rd-k-sel { width: 28px; padding-right: 0; }
.rd-k-nom .rd-k-sel input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.rd-k-nom .pill.rd-k-due { background: var(--track); color: var(--ink2); }
.rd-k-nom-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.rd-k-nom-n { margin-right: auto; color: var(--muted); font-size: 13px; }
.rd-k-plan, .rd-k-rules { margin-top: 16px; }
.rd-k-plan .rd-t th { vertical-align: bottom; padding-bottom: 8px; }
.rd-k-plan .rd-t th small { font-weight: 600; color: var(--ink2); }

/* ---- RD-06 Prices (session 6) ---- */
.rd-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .rd-kpis-3 { grid-template-columns: minmax(0, 1fr); } }
.rd-kpis-3 .rd-kpi { display: flex; flex-direction: column; }
.rd-kpis-3 .rd-kpi-s { flex: 1; }
.rd-kpi-none { font-size: 16px; font-weight: 600; color: var(--muted); }
[data-card="rd-p1"] .rd-chart, [data-card="rd-p4"] .rd-chart { margin-top: 16px; }
.rd-px-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--acc-t); color: var(--acc-tx); font-size: 12px; font-weight: 600; white-space: nowrap; }
.rd-px-chip svg { width: 12px; height: 12px; }
.rd-px-split { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 24px; align-items: start; }
@media (max-width: 960px) { .rd-px-split { grid-template-columns: minmax(0, 1fr); } }
.rd-px-cap { margin: 0 0 8px; font-size: 13px; color: var(--ink2); line-height: 20px; font-variant-numeric: tabular-nums; }
.rd-px-cap b { color: var(--ink); font-weight: 600; }
.rd-px-key { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; font-size: 12px; color: var(--ink2); }
.rd-px-key span { display: inline-flex; align-items: center; gap: 8px; }
.rd-px-sup { display: inline-block; width: 16px; height: 0; border-top: 1.5px dashed var(--ink2); }
.rd-px-dot { cursor: pointer; stroke: var(--card); stroke-width: 1.5; transition: r .12s ease; }
.rd-px-dot:hover { stroke: var(--ink); }
.rd-px-dot:focus-visible { outline: none; stroke: var(--acc); stroke-width: 3; }
.rd-px-dot.on { stroke: var(--ink); stroke-width: 2; }
.rd-px-side { border: 1px solid var(--hair); border-radius: 8px; padding: 12px 16px 8px; background: var(--card); }
.rd-px-h { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rd-px-h b { font-size: 16px; color: var(--ink); }
.rd-px-who { display: grid; grid-template-columns: 8px 1fr; column-gap: 8px; align-items: center; margin: 4px 0 12px; font-size: 13px; font-weight: 600; color: var(--ink); }
.rd-px-who small { grid-column: 2; font-size: 12px; font-weight: 400; color: var(--muted); line-height: 16px; }
/* RDV H130 (TEXT-BUDGET RD-06 rd-p2): live, the who line facts are chips (role at point, margin); they wrap in the 288 px panel */
.rd-px-who small .chip { margin: 4px 6px 0 0; color: var(--ink2); font-variant-numeric: tabular-nums; }
.rd-px-side .rd-dl { font-size: 12.5px; }
/* RDV H156 (REQ INT to RDV 33, JUDGE round 29 RD-06 panel against producer-prices-spread-vp.png; prototype px.css px-wfr):
   live, one line per build-up row: the label right aligned, the bar on the common axis, the value; the tick row under the
   bar column. The rows are subgrids of the table, so every bar track has the same left edge and width. */
.rd-px-side .rd-dlt { display: grid; grid-template-columns: fit-content(46%) minmax(40px, 1fr) 4.4em; column-gap: 8px; }
.rd-px-side .rd-dlt > .rd-dl[data-wf-bar] { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 0 8px; align-items: center; min-height: 24px; padding: 2px 0; border-bottom: 0; border-top: 0; }
.rd-px-side .rd-dlt > .rd-dl[data-wf-bar] > span[role="rowheader"] { grid-column: 1; grid-row: 1; text-align: right; line-height: 15px; }
.rd-px-side .rd-dlt > .rd-dl[data-wf-bar] > .rd-wfb { grid-column: 2; grid-row: 1; flex: none; height: 12px; }
.rd-px-side .rd-dlt > .rd-dl[data-wf-bar] > b.rp-wv { grid-column: 3; grid-row: 1; text-align: right; }
.rd-px-side .rd-dlt > .rd-wfax { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 0 8px; height: 20px; margin-top: 2px; }
.rd-wfax-t { grid-column: 2; position: relative; border-top: 1px solid var(--axis); }
.rd-wfax-t i { position: absolute; top: 3px; transform: translateX(-50%); font-style: normal; font-size: 11px; line-height: 14px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-dl-sub { font-weight: 600; }
.rd-dl-sub span { color: var(--ink); }
.rd-px-ft { margin-top: 16px; }
.rd-px-ft td.rd-px-fx { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-px-ed { display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 8px; background: var(--acc-t); color: var(--acc-tx); font-size: 11px; font-weight: 600; }
.rd-px-off td { color: var(--muted); }
.rd-px-off b { color: var(--muted); }
[data-card^="rd-p"] .rd-chart { max-height: none; }
/* RDV H54 (JUDGE Round 1 RD-06, REQ INT to RDV 3): at 1280 with the dock the fixed 2.2 to 1 grid left the Brent column about
   170 px wide, under the 240 px svg minimum of drawLines (prices.js), so the svg ran 48 px out of the card. The two charts sit
   in a wrapping flex row: bases of 520 and 240 px (both at least that minimum), grow 2.2 to 1 as the mock grid, and a row that
   cannot hold both bases (body under 784 px, also the 760 px narrow form) puts the Brent chart under the JKM and TTF chart. */
.rd-px-two { display: flex; flex-wrap: wrap; gap: 24px; }
.rd-px-two > .rd-chart:first-child { flex: 2.2 1 520px; min-width: 0; }
.rd-px-two > .rd-chart:last-child { flex: 1 1 240px; min-width: 0; }

/* RD-o4 Routes and RD-o5 Utilization (session 7). 8 px grid; text floor 11 px; colours from tokens.css only */
.rd-muted { color: var(--muted); }
.rd-sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; vertical-align: 1px; }
.rd-r-lead { margin: 0 0 16px; font-size: var(--fs-body); color: var(--ink2); }
.rd-r-lead b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rd-chart.rd-r-flow, .rd-chart.rd-u-c { max-height: none; }
.rd-r-band { fill-opacity: .26; transition: fill-opacity var(--t-fast, .12s); cursor: default; }
.rd-r-hov .rd-r-band { fill-opacity: .08; }
.rd-r-hov .rd-r-band.on, .rd-r-band.on { fill-opacity: .72; }
.rd-r-tbl td:first-child { font-weight: 500; }
.rd-r-tbl th small { display: inline; margin-left: 4px; }
/* RDV H54 (JUDGE Round 1 RD-03, box LOOK 1440 with the dock: a utilisation svg 9 px out of the main): drawUtil draws each
   panel svg at least 240 px wide, so a column is at least 240 + 32 padding + 2 border px; as many columns as fit (three at
   the 1440 body with no dock, as the mock). */
.rd-u-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 274px), 1fr)); gap: 24px; }
@media (max-width: 960px) { .rd-u-grid { grid-template-columns: minmax(0, 1fr); } }
.rd-u-p { min-width: 0; padding: 16px; border: 1px solid var(--hair2); border-radius: 8px; }
.rd-u-h { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.rd-u-h b { font-size: var(--fs-chip); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rd-u-h span { font-size: var(--fs-label); color: var(--muted); }
.rd-u-c { min-height: 196px; }
.rd-u-bar { transition: opacity var(--t-fast, .12s); }
.rd-u-c:hover .rd-u-bar { opacity: .55; }
.rd-u-c:hover .rd-u-bar.on { opacity: 1; }
.rd-u-fold { margin-top: 16px; border-top: 1px solid var(--hair2); padding-top: 8px; }
.rd-u-fold summary { cursor: pointer; font-size: var(--fs-label); font-weight: 600; color: var(--ink2); padding: 8px 0; list-style: none; display: inline-flex; align-items: center; gap: 8px; border-radius: 4px; }
.rd-u-fold summary::-webkit-details-marker { display: none; }
.rd-u-fold summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--t-fast, .12s); }
.rd-u-fold[open] summary::before { transform: rotate(45deg); }
.rd-u-fold summary:hover { color: var(--ink); }
.rd-u-fold summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
/* phone width: the storage range segment scrolls inside the card instead of pushing the page wider */
@media (max-width: 600px) {
  [data-card="rd-o1"] .xf-tools, [data-card="rd-o4"] .xf-tools { flex: 1 1 100%; min-width: 0; justify-content: flex-start; }
  [data-seg="rd-o-range"] { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  [data-seg="rd-o-range"] button { flex: none; }
}
/* the fleet Gantt and the berth hour strip keep a readable width; on a phone they scroll inside the card */
@media (max-width: 600px) {
  .rd-chart.rd-o-fleet, .rd-chart[data-rd-chart="hour"] { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
}
.rd-r-tbl .rd-t th.r, .rd-r-tbl .rd-t td.r, .rd-u-fold .rd-t th.r, .rd-u-fold .rd-t td.r { text-align: right; }
.rd-r-tbl .rd-t th, .rd-r-tbl .rd-t td { padding: 0 8px; }
.rd-r-tbl .rd-t th:first-child, .rd-r-tbl .rd-t td:first-child { padding-left: 12px; }
.rd-r-tbl td small { margin-left: 8px; font-size: var(--fs-small); color: var(--muted); }
.rd-u-fold .rd-t { max-width: 880px; }

/* RD-m3 Flexibility and sensitivity (session 8): diverging bars on one zero line, direct signed labels (KB T5 direct
   labels), one row per engine run; a row is a button that opens its numbers */
.rd-fx-cap { margin: 0 0 16px; font-size: 13.5px; color: var(--ink2); line-height: 1.5; }
.rd-fx-cap b { color: var(--ink); font-weight: 600; }
.rd-fx-hero { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--acc-d) !important; font-variant-numeric: tabular-nums; }
/* RDV H76 (JUDGE round 7 cross finding 8, RD-04 dark: "+97.4" contrast 3.84, need 4.5): --acc-d on the dark card is 3.84:1; dark
   takes --acc-tx (the dark rule of .rd-kpi.rd-up) */
:root[data-theme="dark"] .rd-fx-hero { color: var(--acc-tx) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rd-fx-hero { color: var(--acc-tx) !important; } }
.rd-fx { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rd-fx-btn { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: minmax(160px, 2fr) 3fr 88px; gap: 16px; align-items: center; padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: background var(--t-fast); }
.rd-fx-btn:hover { background: var(--band); }
.rd-fx-btn:focus-visible { box-shadow: var(--focus); }
.rd-fx-btn:active { background: var(--hair2); }
.rd-open > .rd-fx-btn { background: var(--band); }
.rd-fx-l { font-size: 13.5px; color: var(--ink); line-height: 1.35; min-width: 0; }
.rd-fx-l small { display: block; font-size: 12px; color: var(--muted); }
.rd-fx-track { position: relative; height: 20px; }
.rd-fx-zero { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--axis); }
.rd-fx-bar { position: absolute; top: 2px; height: 16px; border-radius: 3px; background: var(--acc); }
.rd-fx-loss .rd-fx-bar { background: var(--loss); }
.rd-fx-tick { position: absolute; top: 4px; width: 8px; height: 12px; margin-left: -4px; border-radius: 2px; background: var(--plain-d); }
.rd-fx-ref .rd-fx-tick { background: var(--ink2); }
.rd-fx-v { text-align: right; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.rd-fx-gain .rd-fx-v { color: var(--acc-d); }
.rd-fx-loss .rd-fx-v { color: var(--loss); }
.rd-fx-ref .rd-fx-v, .rd-fx-flat .rd-fx-v, .rd-fx-none .rd-fx-v { color: var(--muted); font-weight: 500; }
.rd-fx-det { margin: 4px 12px 8px; padding: 12px 16px; border: 1px solid var(--hair); border-radius: 8px; background: var(--surface-2); }
.rd-fx-det p { margin: 0 0 12px; font-size: 13px; color: var(--ink2); line-height: 1.5; }
.rd-fx-det dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px; }
.rd-fx-det dt { font-size: 12px; color: var(--muted); }
.rd-fx-det dd { margin: 4px 0 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.rd-fx-det dd small { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
.rd-fx-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
  .rd-fx-btn { grid-template-columns: 1fr 72px; grid-template-rows: auto auto; gap: 4px 12px; }
  .rd-fx-track { grid-column: 1 / -1; grid-row: 2; }
  .rd-fx-v { grid-row: 1; grid-column: 2; }
}
.rd-fx-static { cursor: default; }
.rd-fx-static:hover { background: none; }
.rd-fx-pend .rd-fx-v { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 13px; font-weight: 500; color: var(--muted); }
.rd-fx-pend .rd-fx-v .rd-spin { margin-top: 0; width: 12px; height: 12px; }
.rd-fx-run { position: absolute; top: 2px; height: 16px; left: 0; right: 0; border-radius: 3px; background: linear-gradient(90deg, var(--band) 0%, var(--hair) 50%, var(--band) 100%); background-size: 200% 100%; animation: rd-fx-run 1.4s linear infinite; }
@keyframes rd-fx-run { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .rd-fx-run { animation: none; } }

/* fixer S1 (F6): the step 0 key line of What if sits above the controls */
.rd-wi-res.rd-wi-res-0 { margin: 0 0 12px; padding: 0; border: 0; background: none; }

/* PB polish R1 (Wed 21 Oct): What if selects lose the native arrow; one chevron in the control family of the mockup
   [UI-Review R2 one control style; KB T3 consistent controls]. The bridge chart stays in view next to a long list (F16). */
.rd-sel { -webkit-appearance: none; appearance: none; padding-right: 28px; background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2393A39B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.rd-sel:hover:not(:disabled), .rd-inp:hover:not(:disabled) { border-color: var(--plain-d); }
.rd-inp[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
.rd-mb-chart { position: sticky; top: 16px; }
/* PB polish R1: counts in buttons ("Show all 31") use tabular figures [KB T4 tabular figures] */
.rd-btn { font-variant-numeric: tabular-nums; }

/* PB polish R2 (RD-01) [QR 18 designed empty state]: one info box for an empty card, the twin of .rp-empty (RP-01) */
.rd-empty { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 10px; background: var(--added); }
.rd-empty > svg { color: var(--acc-tx); margin-top: 2px; flex: none; }
.rd-empty b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.rd-empty p { margin: 4px 0 0; color: var(--ink2); font-size: 13px; line-height: 1.5; }

/* R2 FC (C-ET1): the draft on the producer cards. Tag in the look of the state line draft tag (vn.css .vn-pv .vn-tag);
   rows the draft moves carry the applied value in quiet text [KB T7.2 before and after, QR 54 quiet secondary text] */
.rd-dtag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; border: 1px dashed var(--acc);
  color: var(--acc-tx, var(--acc-d)); font-size: 11.5px; font-weight: 600; }
.rd-t tbody tr.rd-row-draft td { background: var(--acc-t); }
.rd-t tbody tr.rd-row-draft td:first-child { box-shadow: inset 2px 0 0 var(--acc); }
.rd-was { display: block; font-size: 11px; line-height: 16px; color: var(--muted); font-weight: 400; }
.rd-kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .rd-kpis-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rd-kpis-5 .rd-kpi { display: flex; flex-direction: column; }
/* SENSE-1-1: RD-01 Value card in a draft, Rules met and Gain beside the shared Before, Now, Change group */
.rd-kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.rd-kpis-2 .rd-kpi { display: flex; flex-direction: column; }
@media (max-width: 520px) { .rd-kpis-2 { grid-template-columns: minmax(0, 1fr); } }
.rd-kpis-5 .rd-kpi-s { flex: 1; }
/* R2 FC: under 1360 px the five What if boxes sit 3 over 2 with no empty slot (two wide boxes in row 2) [KB T2 grid, F18] */
@media (max-width: 1360px) and (min-width: 721px) {
  .rd-wi { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rd-wi > .rd-wi-box { grid-column: span 2; }
  .rd-wi > .rd-wi-box:nth-child(4), .rd-wi > .rd-wi-box:nth-child(5) { grid-column: span 3; }
}

/* R2 FC S2: RD-o6 Ships needed. 8 px grid; one diverging bar per row on a centre axis [KB T6 signed deltas, direct
   labels]; the named fleet row carries a quiet tint; a no plan row is muted, never empty [KB T9]. */
.rd-sn-lead { margin: 16px 0 8px; font-size: 13px; line-height: 20px; color: var(--muted); }
.rd-sn-lead b { color: var(--ink); font-weight: 600; }
.rd-sn-wrap { max-height: none; }
.rd-sn-t td { height: 40px; }
.rd-sn-t th.r, .rd-sn-t td.r { text-align: right; padding-right: 24px; }
.rd-sn-t th.rd-sn-dc, .rd-sn-t td.rd-sn-dc { width: 32%; min-width: 240px; }
.rd-sn-dcin { display: flex; align-items: center; gap: 12px; }
.rd-sn-row { cursor: default; transition: background-color .12s ease; }
.rd-sn-row:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.rd-sn-row.named td { background: var(--acc-t); }
.rd-sn-row.named:hover td { background: var(--acc-t); }
.rd-sn-row.off td { color: var(--muted); }
.rd-sn-tag { display: inline-flex; align-items: center; height: 20px; margin-left: 8px; padding: 0 8px; border-radius: 10px;
  font-size: 11.5px; font-weight: 600; color: var(--acc-tx); border: 1px solid var(--acc-l); vertical-align: 1px; }
.rd-sn-bar { position: relative; flex: 1; height: 12px; }
.rd-sn-axis { position: absolute; top: -6px; bottom: -6px; width: 1px; background: var(--hair); }
.rd-sn-fill { position: absolute; top: 0; height: 12px; border-radius: 2px; transition: width .2s ease; }
.rd-sn-fill.neg { background: var(--loss); opacity: .85; }
.rd-sn-fill.pos { background: var(--acc); }
.rd-sn-d { min-width: 56px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.rd-sn-d.neg { color: var(--loss); } .rd-sn-d.pos { color: var(--acc-d); }
.rd-sn-none, .rd-sn-mute { color: var(--muted); font-size: 12.5px; }
.rd-sn-none { flex: 1; text-align: center; }
.rd-sn-mv { color: var(--muted); font-size: 12.5px; }
.rd-sn-tipn { margin-top: 8px; max-width: 300px; white-space: normal; }
.rd-sn-run { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.rd-sn-runh { display: flex; align-items: baseline; gap: 12px; font-size: 13px; }
.rd-sn-runh span { color: var(--muted); }
.rd-sn-prog { height: 4px; border-radius: 2px; background: var(--hair2); overflow: hidden; }
.rd-sn-prog i { display: block; height: 4px; background: var(--acc); transition: width .3s ease; }
@media (prefers-reduced-motion: reduce) { .rd-sn-fill, .rd-sn-prog i, .rd-sn-row { transition: none; } }

/* ---------- R2 FC S2: template (e) US FOB producer, Results and Prices (views/rd/e-results.js) ---------- */
.rd-e { display: flex; flex-direction: column; gap: 16px; }
.rd-e > .card.xf, .rd-e-two > .card.xf { margin: 0; }
.rd-e-two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: stretch; }
@media (max-width: 1360px) { .rd-e-two { grid-template-columns: minmax(0, 1fr); } } /* Next best keeps its action column whole at 1280 */
.rd-e-kpis { margin-bottom: 0; }
.rd-e-pos { color: var(--acc-tx); } .rd-e-neg { color: var(--loss); }
.rd-e-calc { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rd-e-calc svg { flex: none; color: var(--muted-l); }
.rd-e-note { font-size: 12px; color: var(--muted); line-height: 1.5; }
/* RDV H37 (LOOK s41 RD-E1 at 390): ui.css .xf-key span is inline-flex, which broke the one sentence of the Next best key
   into four narrow columns; the note is one text block and its marked spans stay inline */
.xf-key .rd-e-note { display: block; }
.xf-key .rd-e-note span { display: inline; }
.rd-e-m { color: var(--muted-l); font-weight: 500; }
.rd-e-n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-e-f { color: var(--ink2); }
/* Gantt lanes: label column 216 px, one lane 36 px, month grid lines [KB T6 one grid, direct labels] */
.rd-e-gantt { display: flex; flex-direction: column; --gl: 216px; }
.rd-e-gh, .rd-e-lane { display: grid; grid-template-columns: var(--gl) minmax(0, 1fr); align-items: center; }
.rd-e-gh { height: 24px; border-bottom: 1px solid var(--hair); }
.rd-e-gh .rd-e-gt span { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding-left: 8px; font-size: var(--fs-tick); color: var(--muted); font-weight: 600; }
.rd-e-gt { position: relative; height: 100%; }
.rd-e-lane { height: 36px; border-bottom: 1px solid var(--hair2); transition: background-color .12s ease, opacity .12s ease; }
.rd-e-lane.plant { height: 40px; background: var(--surface-2); border-bottom: 1px solid var(--hair); }
.rd-e-lane .rd-e-gl { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 12px; }
.rd-e-lane .rd-e-gl .pc { min-width: 0; }
/* RDV H89 (JUDGE round 11 cross finding 3, GATE2 MOCK-LOOK s60 e-cal high): at 1440 the lane name "Europe spot buyers" was
   cut to "Europe spot bu..." by the ui.css chip ellipsis; in a lane head the company name wraps to a second line inside the
   36 px lane, never cut [KB T5 no truncated label] */
.rd-e-lane .rd-e-gl .pc .co { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; }
/* RDV H89 (cross finding 3, second half): the Next best ADPs table ran past its card at 1440 ("In fo", "Use this pla"),
   since the two card row gave it 7 of 12 columns of a 1168 px (e) page. The row splits only on a page of 1280 px or more
   (by the container width, so the dock counts too); below that the two cards stand one below the other */
@container rde (max-width: 1279.98px) { .rd-e .rd-e-two { grid-template-columns: minmax(0, 1fr); } }
/* RDV H52 (REQ LIVE to RDV 7, the RD-E1 cargo drag): the kit label of a buyer lane (.dg-v: the server price of the move, or
   why the cargo cannot go there) sits over the right end of the lane track, so the lane keeps its 36 px and no lane moves
   under the pointer; the text wraps, never cut [KB T5 no truncated label] */
.rd-e-lane[data-hc] { position: relative; }
.rd-e-lane > .dg-v { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 3; max-width: min(60%, 360px); margin: 0; padding: 2px 8px;
  border-radius: 6px; background: var(--card); box-shadow: 0 0 0 1px var(--hair); pointer-events: none; text-align: right; }
.rd-e-cap { margin-left: auto; font-size: var(--fs-tick); color: var(--muted-l); white-space: nowrap; }
.rd-e-gt > i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--grid); }
/* the window is a whisker under the cargo, true to scale; the cargo block is centred on its slot days [KB T6 marks that do not hide each other] */
.rd-e-win { position: absolute; bottom: 5px; height: 4px; min-width: 6px; border-radius: 2px; background: color-mix(in srgb, var(--acc) 45%, transparent); }
/* RDV H37 (LOOK s41 RD-E1 contrast): a term chip is white on --acc-fill (tokens.css: a filled accent under white text,
   6.4:1 light, 4.8:1 dark; on --acc it was 4.41 and 2.33); a spot chip takes --on-fill on its index colour (4.8:1 or more) */
.rd-e-cg { position: absolute; top: 5px; bottom: 13px; min-width: 28px; transform: translateX(-50%); padding: 0 6px; border: 0; border-radius: 4px; background: var(--acc-fill); color: var(--on-acc);
  font: 600 11px/1 Inter, system-ui, sans-serif; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: box-shadow .12s ease, transform .12s ease; }
.rd-e-cg.spot { background: var(--ix-jkm); color: var(--on-fill); }
.rd-e-lane[data-hc="GXE"] .rd-e-cg.spot { background: var(--ix-ttf); }
.rd-e-cg:hover, .rd-e-cg:focus-visible { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--focus); outline: none; }
.rd-e-cg:active { transform: translateX(-50%) scale(.96); }
.rd-e-cg.moved { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--acc); }
.rd-e-cg.ghost { background: transparent; color: var(--muted); border: 1.5px dashed var(--muted-l); cursor: default; pointer-events: none; }
.rd-e-slot { position: absolute; top: 10px; bottom: 10px; min-width: 28px; transform: translateX(-50%); border-radius: 4px; background: var(--card); border: 1px solid var(--hair);
  font-size: 11px; font-weight: 600; color: var(--ink2); display: flex; align-items: center; justify-content: center; cursor: default; }
.rd-e-slot.moved { border-color: var(--acc); color: var(--acc-tx); }
.rd-e-hl .rd-e-lane:not(.plant):not(.hc-on) { opacity: .45; }
.rd-e-hl .rd-e-row:not(.hc-on) { opacity: .55; }
/* RDV H88 (AUD-H86-2): a cargo block carries the data-hc of its buyer (the nearest mark for the kit); in a faded lane it
   keeps its own opacity, so the shared fade of ui.css never applies twice (lane and block) */
#xm-view.hl-fade .rd-e-lane[data-hc] .rd-e-cg[data-hc]:not(.hl-on):not(.off) { opacity: 1; }
#xm-view.hl-fade .rd-e-lane[data-hc] .rd-e-cg.off[data-hc]:not(.hl-on) { opacity: 0.28; }
.rd-e-k { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-size: 12px; color: var(--muted); }
.rd-e-k i { width: 16px; height: 10px; border-radius: 3px; display: inline-block; }
.rd-e-k .kw { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--acc) 45%, transparent); }
.rd-e-k .kc { background: var(--acc); } .rd-e-k .ks { background: linear-gradient(90deg, var(--ix-ttf) 50%, var(--ix-jkm) 50%); }
.rd-e-k .kg { border: 1.5px dashed var(--muted-l); } .rd-e-k .km { background: var(--acc); box-shadow: 0 0 0 1.5px var(--card), 0 0 0 3px var(--acc); }
/* tables */
table.rd-e-t { width: 100%; }
table.rd-e-t th, table.rd-e-t td { height: 40px; vertical-align: middle; }
table.rd-e-t tbody th { font-weight: 650; white-space: nowrap; }
table.rd-e-t td.b, table.rd-e-t th.b { font-weight: 650; }
table.rd-e-t td.pos { color: var(--acc-tx); } table.rd-e-t td.neg { color: var(--loss); }
table.rd-e-t td.r { text-align: right; white-space: nowrap; }
table.rd-e-t tfoot th, table.rd-e-t tfoot td { border-top: 1px solid var(--hair); font-weight: 700; }
.rd-e-row { cursor: pointer; transition: background-color .12s ease, opacity .12s ease; }
.rd-e-row:hover, .rd-e-row:focus-visible { background: var(--added); outline: none; }
.rd-e-row:focus-visible th { box-shadow: inset 2px 0 0 var(--acc); }
.rd-e-row.moved { background: color-mix(in srgb, var(--acc) 8%, transparent); }
.rd-e-row.moved th { box-shadow: inset 3px 0 0 var(--acc); }
.rd-e-who { display: inline-flex; flex-direction: column; gap: 2px; }
.rd-e-was { font-size: 11px; color: var(--muted); padding-left: 16px; }
.rd-e-spot { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--muted); }
.rd-e-mcol { width: 220px; white-space: nowrap; }
.rd-e-mv { display: inline-block; width: 60px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--acc-tx); margin-right: 12px; vertical-align: middle; }
.rd-e-bar { display: inline-block; vertical-align: middle; width: calc(100% - 76px); min-width: 96px; height: 10px; background: var(--track); border-radius: 2px; overflow: hidden; }
.rd-e-bar i { display: block; height: 100%; background: var(--acc); border-radius: 2px; }
/* free cargo bars: direct labels, nice integer ticks, the chosen bar strong */
.rd-e-hbs { display: flex; flex-direction: column; gap: 12px; }
.rd-e-hg { display: flex; flex-direction: column; gap: 4px; }
.rd-e-hh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.rd-e-hh span { font-size: 12px; color: var(--muted); }
.rd-e-hb, .rd-e-hax { display: grid; grid-template-columns: 96px minmax(0, 1fr) 104px; align-items: center; gap: 12px; height: 28px; border-radius: 4px; }
.rd-e-hb { cursor: default; transition: background-color .12s ease; }
.rd-e-hb:hover, .rd-e-hb:focus-visible { background: var(--added); outline: none; }
.rd-e-hb .l { font-size: 12px; color: var(--ink2); padding-left: 4px; }
.rd-e-hb .tr, .rd-e-hax .tr { position: relative; height: 100%; }
.rd-e-hb .tr i { position: absolute; left: 0; top: 7px; bottom: 7px; border-radius: 2px; background: var(--muted-l); opacity: .55; }
.rd-e-hb.on .tr i { background: var(--acc); opacity: 1; }
.rd-e-hb .tr b { position: absolute; top: 50%; transform: translate(6px, -50%); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink2); }
.rd-e-hb.on .tr b { color: var(--ink); }
.rd-e-in { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--acc-tx); }
.rd-e-hax { height: 16px; border-top: 1px solid var(--axis); }
.rd-e-hax .tr em { position: absolute; top: 2px; transform: translateX(-50%); font-style: normal; font-size: var(--fs-tick); color: var(--muted); font-variant-numeric: tabular-nums; }
.rd-e-unit { margin: 4px 0 0; text-align: center; font-size: var(--fs-tick); color: var(--muted); }
/* Next best fingerprint */
.rd-e-fps { display: inline-flex; gap: 3px; }
.rd-e-fp { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; padding: 0 3px; box-sizing: border-box; height: 22px; /* RDV H76 N17: live cells name GT1, GXE */ border-radius: 4px; font-style: normal; font-size: 11px; font-weight: 600;
  background: var(--acc-l); color: var(--ink); } /* RDV H37: --ink on --acc-l 10.9:1 light, 7.3:1 dark (--acc-tx was 4.40) */
.rd-e-fp.spot.gxe { background: color-mix(in srgb, var(--ix-ttf) 22%, transparent); color: var(--ink); }
.rd-e-fp.spot.gxa { background: color-mix(in srgb, var(--ix-jkm) 22%, transparent); color: var(--ink); }
.rd-e-fp.diff { box-shadow: inset 0 0 0 1.5px var(--ink2); }
table.rd-e-nb tr.on { background: var(--added); }
table.rd-e-nb tr.dr { background: color-mix(in srgb, var(--acc) 8%, transparent); }
.rd-e-nb .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* cargo drawer */
.rd-e-d { display: flex; flex-direction: column; gap: 12px; }
.rd-e-dk { margin: 0; gap: 12px; grid-template-columns: 1fr 1fr; }
.rd-e-dh { margin: 8px 0 0; font-size: 13px; font-weight: 650; }
.rd-e-dp { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink2); }
/* lane RDV H9: Change this cargo in the (e) cargo drawer (label and Try, no line value cell) */
.rd-e-ops { display: flex; flex-direction: column; }
.rd-e-ops .rd-pop-row { grid-template-columns: minmax(0, 1fr) auto; }
.rd-e-dbu.tw-tip { position: static; max-width: none; box-shadow: none; pointer-events: auto; }
@media (max-width: 1360px) { .rd-e-mcol { width: 184px; } }
.rd-e-lane[data-hc] .rd-e-cg.ghost { background: transparent; color: var(--muted); } /* a ghost never takes the spot colour */
/* R2 FC S2: cargo drawer of (a) */
.rd-dfoot { display: flex; justify-content: flex-end; padding: 8px 0 4px; }
.rd-cd { display: flex; flex-direction: column; gap: 12px; }
.rd-cd-who .pc { flex-wrap: wrap; row-gap: 4px; }
.rd-cd-was { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 8px 12px; border-radius: 8px; border: 1px dashed var(--acc); background: var(--acc-l); font-size: 13px; color: var(--ink); }
.rd-cd-was svg { flex: none; margin-top: 2px; color: var(--acc-tx); }
.rd-cd-k { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rd-cd .rd-dgrid { grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* R2 FC S3 (C-ET1 on Liftings): a cargo the draft moves gets the accent ring and a quiet "was" line; where a cargo left,
   a dashed ghost cell stays [KB T7.2 before and after, mockup Try preview 06-change-try ghosts]. Shared highlight of
   one buyer from the key [IA hover parity data-hc] */
.rd-cal-c.dr { box-shadow: inset 0 0 0 1.5px var(--surface), 0 0 0 2px var(--acc); }
.rd-cal-c.dr:hover { box-shadow: inset 0 0 0 1.5px var(--surface), 0 0 0 2px var(--acc), 0 4px 10px rgba(18, 38, 31, .18); }
.rd-cal-b small.rd-was-s { margin-left: auto; font-weight: 600; opacity: 1; padding: 0 4px; border-radius: 4px; background: var(--surface); color: var(--muted); line-height: 14px; }
.rd-cal-b small.rd-was-s s { text-decoration-thickness: 1.5px; }
.rd-cal-ghost { background: transparent; border: 1.5px dashed var(--muted-l); color: var(--muted); cursor: default; padding: 4.5px; }
.rd-cal-ghost:hover { transform: none; box-shadow: none; border-color: var(--acc); }
.rd-cal-ghost .rd-cal-top { opacity: 1; }
.rd-cal-gv { font-size: 12px; line-height: 18px; font-weight: 600; color: var(--ink2); }
.rd-cal-ghost .rd-cal-b small { margin-left: auto; font-weight: 500; }
.rd-cal-ghost .rd-mark { opacity: .6; }
.rd-cal-sw.dr { border-radius: 3px; border: 2px solid var(--acc); background: var(--acc-t); }
.rd-cal-sw.gh { border-radius: 3px; border: 1.5px dashed var(--muted-l); }
.rd-cal-wrap.rd-hl .rd-cal-c[data-hc]:not(.hc-on) { opacity: .28; }
.rd-cal-c[data-hc] { transition: opacity .12s ease, transform .12s ease, box-shadow .12s ease; }
.rd-cal-key .rd-chip.hc-on { box-shadow: 0 0 0 2px var(--acc); }
.rd-cal-key .rd-chip[data-hc] { cursor: default; }
.rd-cal-mh { cursor: default; }

/* R2 FC S3: Liftings per month (RD-l2). One grid for bars, head, buyer rows and totals, so every month column lines
   up from the bar to the margin row [KB T2 aligned columns, QR 28 tabular figures]. Direct labels instead of a legend. */
.rd-mo-kpis { margin-bottom: 24px; }
.rd-kpi-v small { margin-left: 4px; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.rd-kpi-s .rd-was { display: inline; margin-left: 8px; }
.rd-mo-wrap { overflow-x: auto; padding-bottom: 4px; }
.rd-mo { min-width: 900px; display: flex; flex-direction: column; gap: 4px; }
.rd-mo-row { display: grid; grid-template-columns: 216px repeat(15, minmax(40px, 1fr)) 56px; gap: 4px; align-items: center; }
.rd-mo-lab { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; font-size: 12px; color: var(--muted); }
.rd-mo-lab .rd-pos { min-width: 0; gap: 6px; font-size: 12.5px; color: var(--ink); cursor: default; }
.rd-mo-lab .rd-pos b { font-weight: 700; }
.rd-mo-lab .rd-pos span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
.rd-mo-lab em { font-style: normal; font-size: 11px; color: var(--muted); flex: none; }
.rd-mo-all { text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink2); padding-right: 4px; }
.rd-mo-all b { font-weight: 700; color: var(--ink); }
.rd-mo-all s, .rd-mo-c s { margin-left: 4px; font-size: 11px; color: var(--muted); font-weight: 500; text-decoration-thickness: 1.5px; }
.rd-mo-bars { align-items: end; height: 136px; margin-bottom: 4px; }
.rd-mo-bars .rd-mo-lab { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; height: 100%; padding-bottom: 2px; }
.rd-mo-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink2); }
.rd-mo-key i { width: 10px; height: 10px; border-radius: 3px; }
.rd-mo-key i.con, .rd-mo-bar i.con { background: var(--acc); }
.rd-mo-key i.spot, .rd-mo-bar i.spot { background: var(--ctl); }
.rd-mo-bar { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; cursor: default; }
.rd-mo-bar b { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; }
.rd-mo-bar b.chg { color: var(--acc-tx); box-shadow: 0 0 0 1.5px var(--acc); border-radius: 4px; padding: 0 4px; }
.rd-mo-bar .st { width: 60%; max-width: 28px; height: 100px; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; }
.rd-mo-bar .st i { display: block; width: 100%; border-radius: 2px; transition: opacity .12s ease; }
.rd-mo-bar .st i.con { border-radius: 0 0 2px 2px; }
.rd-mo-head { height: 32px; border-bottom: 1px solid var(--hair); }
.rd-mo-head .rd-mo-lab, .rd-mo-head .rd-mo-all { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: none; }
.rd-mo-mh { text-align: center; font-size: 12px; font-weight: 600; color: var(--ink2); white-space: nowrap; }
.rd-mo-mh small { font-size: 11px; font-weight: 500; color: var(--muted-l); }
.rd-mo-br { border-radius: 8px; }
.rd-mo-c { height: 32px; margin: 0; padding: 0; border: 0; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink);
  background: rgba(var(--ramp-rgb), var(--t)); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.rd-mo-c.z { background: var(--band); color: var(--muted); }
.rd-mo-c:hover { box-shadow: 0 2px 8px rgba(18, 38, 31, .14); transform: translateY(-1px); }
.rd-mo-c:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.rd-mo-c:active { transform: none; box-shadow: none; }
.rd-mo-c.dr { box-shadow: inset 0 0 0 1.5px var(--surface), 0 0 0 2px var(--acc); }
.rd-mo-tot { border-top: 1px solid var(--hair); padding-top: 8px; margin-top: 4px; }
.rd-mo-tot .rd-mo-lab, .rd-mo-usd .rd-mo-lab { font-weight: 600; color: var(--ink2); }
.rd-mo-n { text-align: center; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 16px; }
.rd-mo-usd .rd-mo-n { font-size: 12px; font-weight: 500; color: var(--ink2); display: flex; flex-direction: column; align-items: center; }
.rd-mo-n em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--acc-tx); }
.rd-mo-n em.down { color: var(--loss); }
.rd-mo .hm-on.rd-mo-mh, .rd-mo .hm-on.rd-mo-n { color: var(--acc-tx); }
.rd-mo .rd-mo-bar.hm-on .st i { opacity: 1; }
.rd-mo:has(.rd-mo-bar.hm-on) .rd-mo-bar:not(.hm-on) .st i { opacity: .45; }
.rd-mo-br.hm-on { background: var(--band); }
.rd-mo-c.hm-on:not(:hover) { box-shadow: inset 0 0 0 1.5px var(--acc-l); }
.rd-mo-c.dr.hm-on:not(:hover) { box-shadow: inset 0 0 0 1.5px var(--surface), 0 0 0 2px var(--acc); }
:root[data-theme="dark"] .rd-mo-c:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
/* R2 FC S3: a month cell that changes in the draft carries its signed change against the applied plan (tip: both counts) */
.rd-mo-c { position: relative; }
.rd-mo-c sup, .rd-mo-all sup { position: static; vertical-align: 0; margin-left: 4px; font-size: 11px; line-height: 12px; font-weight: 700; color: var(--acc-tx); }
.rd-mo-all sup { margin-left: 2px; }
.rd-mo-c sup.down, .rd-mo-all sup.down { color: var(--loss); }
.rd-mo-c sup { background: var(--surface); border-radius: 4px; padding: 0 2px; }

/* ---------- R2 FC S4: Results filters of the producer (4b FilterBar, K1: the bar sits on what it filters) ----------
   [KB T7.1] chips are buttons with a pressed state; [QR 28] counts in tabular figures; 8 px grid. */
.rd-flt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; min-height: 32px; }
.rd-flt-l { font-size: var(--fs-label); font-weight: 600; color: var(--muted); margin-right: 4px; }
.rd-flt-g { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.rd-flt-sep { width: 1px; height: 20px; background: var(--hair); margin: 0 4px; }
.rd-fchip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 14px; background: var(--card);
  font: inherit; font-size: var(--fs-chip); font-weight: 500; color: var(--ink2); font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap;
  transition: border-color var(--t-fast, 120ms), background-color var(--t-fast, 120ms), color var(--t-fast, 120ms); }
.rd-fchip:hover { border-color: var(--acc); color: var(--ink); }
.rd-fchip:active { transform: translateY(1px); }
.rd-fchip:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.rd-fchip.on { border-color: var(--acc); background: var(--acc-t); color: var(--acc-tx); font-weight: 600; }
.rd-flt-n { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-label); color: var(--muted); font-variant-numeric: tabular-nums; }
.rd-flt-n b { color: var(--ink); font-weight: 600; }
.rd-flt-x { border: 0; background: none; padding: 4px 0; font: inherit; font-size: var(--fs-label); font-weight: 600; color: var(--acc-tx); cursor: pointer; }
.rd-flt-x:hover { text-decoration: underline; }
.rd-flt.in-card { padding: 0 0 16px; border-bottom: 1px solid var(--hair2); }

/* Routes table: one row per route, then every cargo in a fold */
.rd-rt .rd-t td { height: 48px; vertical-align: middle; }
.rd-rt .rd-t td:first-child small { display: block; margin: 2px 0 0; }
.rd-rt-who { white-space: normal; }
.rd-rt-b { display: inline-flex; align-items: center; margin: 2px 12px 2px 0; font-size: var(--fs-label); color: var(--ink2); white-space: nowrap; }
.rd-rt-b b { margin-left: 4px; font-weight: 600; color: var(--ink); }
.rd-rt-b .rd-sw { margin-right: 6px; }
.rd-rt-r, .rd-rt-c { cursor: default; transition: background-color var(--t-fast, 120ms); }
.rd-rt-c { cursor: pointer; }
.rd-rt-r:hover td, .rd-rt-r:focus-visible td, .rd-rt-c:hover td, .rd-rt-c:focus-visible td { background: var(--acc-t); }
.rd-rt-r:focus-visible, .rd-rt-c:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.rd-rt tfoot td { font-weight: 600; border-top: 1px solid var(--hair); }
.rd-rt-list { margin-top: 16px; }
.rd-rt-scroll { max-height: 360px; }
.rd-rt-scroll .rd-t td { height: 36px; }
.rd-rt .rd-t th small { display: block; margin-left: 0; }
.rd-rt-list .rd-t { max-width: none; }
/* R2 FC S4: a cargo outside the Results filter stays in place, pale (4b K1), never hidden, so the grid keeps its columns */
.rd-cal-c.off { opacity: 0.28; }
.rd-cal-c.off:hover, .rd-cal-c.off:focus-visible { opacity: 0.6; }

/* ---------- R2 FC S5: (e) Results filter and Price curves (views/rd/e-results.js) ----------
   [KB T7.1] chip with its count in tabular figures; [4b K1] a cargo outside the filter stays in place, pale;
   [KB T6] curve marks: filled dot = the plan uses the price, ring = no cargo uses it. 8 px grid. */
.rd-fchip-n { margin-left: 8px; padding: 0 6px; min-width: 20px; height: 18px; border-radius: 9px; background: var(--surface); color: var(--muted);
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.rd-fchip.on .rd-fchip-n { background: var(--card); color: var(--acc-tx); }
.rd-e-cg.off, .rd-e-slot.off { opacity: 0.28; }
.rd-e-cg.off:hover, .rd-e-cg.off:focus-visible { opacity: 0.6; }
.rd-e-k .kdot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink2); }
.rd-e-k .kring { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink2); background: var(--card); }
.rd-e-curve { margin-top: 8px; }
.rd-e-xtip { min-width: 216px; max-width: 232px; }
.rd-e-xtip small { margin: -2px 0 4px 16px; line-height: 1.4; }
.rd-e-quiet td { color: var(--muted); }
.rd-e-quiet td.num.b { color: var(--muted); font-weight: 500; }
.rd-e-quiet .pc { opacity: .72; }
table.rd-e-t tfoot th { border-bottom: 0; }
.rd-e-nb tbody th[tabindex="-1"]:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; border-radius: 4px; }

/* ---------- R2 FC S6: one cargo card on every cargo mark (jack SPEC HV-5) and one lit cargo across the charts (HV-7) ----------
   [KB T6 hover shows the build-up; T7.2 one highlight colour]. The lit cargo gets an ink ring in Berth, the hour chart, Fleet
   and the Routes cargo list; a chart mark opens the cargo drawer on click. */
svg .rd-cgm { cursor: pointer; transition: opacity .12s ease; }
svg .rd-cgm:hover { opacity: .86; }
svg .rd-cgm.rd-cg-on { stroke: var(--ink); stroke-width: 2px; paint-order: stroke; }
.rd-bc-c.rd-bc-on { transition: box-shadow .12s ease; }
.rd-bc-c.rd-cg-on { position: relative; z-index: 1; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
tr.rd-cg-on td { background: var(--acc-t); }
/* R2 FC S6: Contracts month cell and contract head cards (HV-3, HV-4); the hovered contract row lights */
.rd-k-plan [data-rd-km] { cursor: default; border-radius: 4px; transition: box-shadow .12s ease; }
.rd-k-plan [data-rd-km]:hover { box-shadow: 0 0 0 2px var(--hair); }
.rd-k-plan [data-rd-pos] { border-radius: 6px; outline-offset: 2px; }
.rd-k-plan [data-rd-pos]:focus-visible { outline: 2px solid var(--acc); }
.rd-k-plan tr.hc-on td { background: var(--surface); }

/* R2 FC S7: Steady plan line without a gain (words, not a hero number) */
.rd-st-best b.rd-st-same { font-size: 14px; font-weight: 600; }
/* R2 FC S7: a moved row of the Cargo plan carries a "was" line; 44 px gives the two lines air (32 px fits one) [KB T4 row rhythm] */
.rd-t tbody tr.rd-row-draft td { height: 44px; }

/* ---------- R2 FC S8: RD-01 after Apply ----------
   Changes so far: the dashed mark of the step's own Base ADP (quiet, one dash style for "reference" as in the Gantt
   ghosts); a halo keeps its label clear of the grid lines. What if result line: Rules met stands apart from the money
   figures, a hair line between them [KB T6 direct labels, proximity; QR 4/8 grid] */
.rd-own line { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.rd-own text { font-size: 11.5px; fill: var(--muted); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }
.rd-bnc > .rd-bnc-r { padding-left: 24px; border-left: 1px solid var(--hair2); }
/* Changes so far points: a 16 px hit area, the point grows on hover and focus; focus has a visible ring [KB T3 hover and
   focus states, target size] */
.rd-pt .rd-pt-hit { fill: transparent; stroke: none; }
.rd-pt { cursor: default; outline: none; }
.rd-pt .rd-pt-c { transition: r .12s ease-out, stroke-width .12s ease-out; }
.rd-pt.on .rd-pt-c { r: 6.5; }
.rd-pt:focus-visible .rd-pt-c { r: 7; stroke-width: 3; }
.rd-own { cursor: default; }
@media (prefers-reduced-motion: reduce) { .rd-pt .rd-pt-c { transition: none; } }

/* R2 QB (jack HV-6): a tile with a build-up card lifts on hover and focus [KB T3 hover, focus; QR 37] */
.rd-kpi.rd-kt { cursor: default; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.rd-kpi.rd-kt:hover, .rd-kpi.rd-kt:focus-visible { border-color: var(--ctl); box-shadow: var(--sh-lift); outline: none; }
.rd-kpi.rd-kt:focus-visible { box-shadow: var(--sh-lift), 0 0 0 2px var(--acc-l); }
@media (prefers-reduced-motion: reduce) { .rd-kpi.rd-kt { transition: none; } }
/* R2 QB: one swatch per spot market, in the colour of its index (Europe TTF, Asia JKM), so S3 and S7 read from the key */
.rd-e-k .ks.kse { background: var(--ix-ttf); } .rd-e-k .ks.ksa { background: var(--ix-jkm); }
/* R2 QB: a charter option is a bordered row with its terms in quiet text; the pressed row carries the accent [QR 37] */
.rd-chko { margin-top: 8px; padding: 12px; border: 1px solid var(--hair); border-radius: 8px; transition: border-color var(--t-fast), background-color var(--t-fast); }
.rd-chko:hover { border-color: var(--ctl); }
.rd-chko:has(input:checked) { border-color: var(--acc-l); background: var(--acc-t); }
.rd-chko > span { display: flex; flex-direction: column; gap: 4px; }
.rd-chko b { font-weight: 600; }
.rd-chko em { font-style: normal; font-size: 12px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* polish R2 QB (FINAL-R2 round 2, RP-C1 and RD-E1 with the Neo dock open): the (c) and (e) Results read their own
   width. Without the dock .rd-e is 1008 px at 1280 and 1168 px at 1440, so only the dock widths (608 and 768 px) get
   this form: cards one below the other, tiles 2 by 2, the margin bars drop (the signed figure stays), heads wrap, so
   no tile, card or table runs past its frame [KB T2 layout by container width; UI-Review: content never runs past its frame] */
.rd-e { container-type: inline-size; container-name: rde; }
@container rde (max-width: 899.98px) {
  .rd-e .rd-e-two { grid-template-columns: minmax(0, 1fr); }
  .rd-e .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-e table.rd-e-t th, .rd-e table.rd-e-t td { padding-left: 8px; padding-right: 8px; }
  .rd-e table.rd-e-t thead th { white-space: normal; vertical-align: bottom; }
  .rd-e table.rd-e-t .rd-e-bar { display: none; }
  .rd-e table.rd-e-t .rd-e-mv { width: auto !important; margin-right: 0; }
  .rd-e table.rd-e-t .rd-e-mcol { width: auto; min-width: 0; text-align: right; }
}
/* RDV H59 (REQ ENM to RDV 18:18, JUDGE Round 3 RP-C1 390, RD-E1 the same form): at a phone width two tiles a row leave about
   170 px a tile and the value with its nowrap unit runs out of the tile; under 480 px one tile a row (after the 900 px rule) */
@container rde (max-width: 479.98px) { .rd-e .grid4 { grid-template-columns: minmax(0, 1fr); } }
/* the (c) cargo plan has 8 columns, so its sale, purchase and voyage columns drop at the dock widths; the (e) plan drops
   sale and plant cost only at 608 px. Each row keeps who, when, margin and value; its hover and focus card shows the
   full price build-up [KB T5 keep the answer column] */
@container rde (max-width: 899.98px) { .rd-e table.rp-c-plan .rd-e-px { display: none; } }
@container rde (max-width: 699.98px) { .rd-e .rd-e-px { display: none; } }
/* the Long and short book: the role column drops and its text sits under the position, so the six month cells and
   "In the plan" fit the card [KB T5 secondary text under the label] */
.rp-c-rsub { display: none; }
@container rde (max-width: 899.98px) {
  .rd-e .rp-c-rcol { display: none; }
  .rd-e .rp-c-rsub { display: block; margin-top: 4px; max-width: 220px; font-size: var(--fs-label); line-height: 16px; color: var(--muted); font-weight: 500; white-space: normal; }
}
/* 608 px (dock open at 1280): the seller and buyer chips stand one above the other and the count cells may wrap */
@container rde (max-width: 699.98px) {
  .rd-e table.rp-c-plan .rp-c-pair { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .rd-e table.rp-c-book th.num, .rd-e table.rp-c-book td.num { white-space: normal; min-width: 72px; }
  .rd-e .rp-c-rsub { max-width: 168px; }
}
@container rde (max-width: 699.98px) {
  .rd-e table.rp-c-plan .rp-c-via { white-space: normal; min-width: 128px; }
  .rd-e table.rp-c-book th, .rd-e table.rp-c-book td { padding-left: 4px; padding-right: 4px; }
  .rd-e table.rp-c-book .rp-c-rsub { max-width: 140px; }
}

/* polish R3 QB (FINAL-R2 round 3, RD-01 with the Neo dock open): the Overview of (a) reads its own width. Without the
   dock it is 1008 px at 1280 and 1168 px at 1440, so these rules never touch that layout. With the dock (768 and 608 px)
   the five tiles go 3 plus 2, then hero over 2 by 2; Next best ADPs drops its Moves count (the list shows the moves) and
   wraps the list; the Cargo plan moves Kind and Ship under the buyer, so no table scrolls sideways
   [KB T2 layout by container width; UI-Review: content never runs past its frame] */
.rd-ov { container-type: inline-size; container-name: rdov; }
.rd-ov-sub { display: none; }
@container rdov (max-width: 899.98px) {
  .rd-ov .rd-kpis-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rd-ov .rd-kpis-5 > .rd-kpi { grid-column: span 2; }
  .rd-ov .rd-kpis-5 > .rd-kpi:nth-child(n+4) { grid-column: span 3; }
}
/* RDV H57: the prototype narrow form of the Next best rows (strip above, bar and value below, the bar full width) */
@container rdov (max-width: 699.98px) {
  .rd-ov .rd-nb-alts .alt { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rd-ov .rd-nb-alts .ab { flex-wrap: wrap; }
  .rd-ov .rd-nb-alts .gtrack { width: 100%; flex: 1 1 100%; }
}
@container rdov (max-width: 699.98px) {
  .rd-ov .rd-kpis-5 > .rd-kpi:nth-child(1) { grid-column: span 6; }
  .rd-ov .rd-kpis-5 > .rd-kpi:nth-child(n+2) { grid-column: span 3; }
  .rd-ov table.rd-t:not(.rd-nb-t) .rd-ov-x { display: none; }
  .rd-ov table.rd-t:not(.rd-nb-t) th, .rd-ov table.rd-t:not(.rd-nb-t) td { padding-left: 8px; padding-right: 8px; }
  .rd-ov table.rd-t:not(.rd-nb-t) tbody td { height: auto; padding-top: 6px; padding-bottom: 6px; }
  .rd-ov .rd-ov-sub { display: block; margin-top: 2px; font-size: var(--fs-label, 12px); line-height: 16px; font-weight: 500; color: var(--muted); white-space: nowrap; }
}
/* polish R3 QB: every Results page of the producer reads its own width, so the two part cards (value bridge with its
   cargo list, explain per cargo) stand one below the other with the dock open, as they do under 1100 px
   [KB T2 layout by container width] */
.rd-grid { container-type: inline-size; container-name: rdg; }
.rd-grid.rd-ov { container-name: rdg rdov; }
@container rdg (max-width: 899.98px) {
  .rd-mb, .rd-ex { grid-template-columns: minmax(0, 1fr); }
  .rd-mb-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair2); padding-top: 16px; }
  .rd-ex-r { border-left: 0; padding-left: 0; }
}
/* polish R3 QB: at 608 px the book month cells go from 48 to 40 px (the three letter codes still fit at 11 px) and the
   cargo plan cells keep 4 px sides, so neither table scrolls inside its card [UI-Review content inside its frame] */
@container rde (max-width: 699.98px) {
  .rd-e .rp-c-bms, .rd-e .rp-c-bmh { grid-template-columns: repeat(6, 40px); gap: 3px; }
  .rd-e table.rp-c-plan th, .rd-e table.rp-c-plan td { padding-left: 4px; padding-right: 4px; }
  .rd-e table.rp-c-plan .rp-c-via { min-width: 112px; }
}
/* polish R3 QB (HV-3): the Days month head reacts on hover and focus, as the month heads of (b), (c), (e) and (f) */
.rd-cal-mh { border-radius: 4px; transition: background-color var(--t-fast, .12s); }
.rd-cal-mh:hover, .rd-cal-mh:focus-visible { background: var(--track); }
.rd-cal-mh:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
/* OP-12 (jack SPEC): a closed berth day in the Liftings calendar, hatched with a ban glyph */
.rd-cal-ban { background: repeating-linear-gradient(45deg, var(--track), var(--track) 3px, var(--plain) 3px, var(--plain) 5px); border: 1px solid var(--muted-l); color: var(--muted); cursor: default; }
.rd-cal-ban:hover { transform: none; box-shadow: none; }
.rd-cal-ban .rd-cal-gv { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.rd-cal-ban .rd-cal-gv svg { width: 12px; height: 12px; }
/* RDV H11, REQ ENA to RDV 12: a term buyer with no Base cargo held in this plan (views.e term held false) */
.rd-e-none { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ink2); white-space: nowrap; }
/* RDV H36 (LOOK s41 on the box: IN-a1 to IN-a7 scroll sideways 35 to 130 px at 390): in.css keeps the 336 px Readiness
   column of .in-a-grid at every width, so at phone width the main column is about 6 px and its facts and tables run out of
   the page. Only the IN-a views use .in-a-grid. Under 760 px: one column, the facts one column, and a wide table scrolls
   inside its own card, so its key column stays [KB T6 no clipped mark; LOOK judges: the narrow card form] */
@media (max-width: 760px) {
  .in-a-grid { grid-template-columns: minmax(0, 1fr); }
  .in-a-grid .in-facts { grid-template-columns: minmax(0, 1fr); }
  .in-a-grid .in-facts dd { white-space: normal; flex-wrap: wrap; }
  .in-a-grid table.t { display: block; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
}

/* RDV H38: IN-a1 "Change the plan period": a gap between the stacked rows (in.css .in-form-r has no margin), and the price
   fields of a no plan start (ANS ENA to RDV 37, priceGaps) set apart under the Plan start row */
[data-in-period] .in-form-r { margin: 0 0 8px; }
.in-pgs { margin: 0 0 8px; padding: 0 0 0 12px; border-left: 2px solid var(--hair); }
.in-pgs .in-pg-h { margin: 0 0 8px; }

/* RDV H38 (LOOK s41 RD-E1 390: main overflow 11 px, month heads and plant slot chips run into each other): the narrow
   form of the Lifting calendar. The buyer label sits on its own line above its lane (the company name stays whole), the
   time scale takes the full card width with a 14 px inset on both sides (half of the 28 px chip minimum, so a chip at
   the edge stays inside the card), and the head row clips its month labels. */
@media (max-width: 760px) {
  .rd-e-gh, .rd-e-lane { grid-template-columns: minmax(0, 1fr); }
  .rd-e-gh > .rd-e-gl { display: none; }
  .rd-e-lane, .rd-e-lane.plant { height: auto; }
  .rd-e-lane > .rd-e-gl { padding: 6px 0 2px; }
  .rd-e-lane > .rd-e-gt { height: 36px; }
  .rd-e-lane.plant > .rd-e-gt { height: 40px; }
  .rd-e-gh > .rd-e-gt, .rd-e-lane > .rd-e-gt { margin: 0 14px; }
  .rd-e-gh > .rd-e-gt { overflow: hidden; }
  /* RDV H91 (REQ INT to RDV 15, JUDGE round 11 cross finding 2, RD-E1 390 "Jan 2028Feb"): each month label stays in
     its own month box; a month too narrow for "Jan 2028" on one line shows the year on a second line (two line head), which may run a few px over the empty second line of the next month */
  .rd-e-gh { height: 32px; }
  .rd-e-gh .rd-e-gt span { align-items: flex-start; padding: 4px 0 0 1px; white-space: normal; font-size: 10px; line-height: 1.15; letter-spacing: -0.02em; }
}

/* RDV H40 (SENSE-2-25 IN-a1 after a plan period step): a 12 month plan has no tail part, so the contract year part is the
   whole bar and takes the round corners on both ends */
.in-per > .in-per-a:last-child { border-radius: 8px; }
/* JUDGE Round 1 IN-e (REQ LIVE to RDV 8, REQ INT to RDV 3): in.css draws the label of a strip mark right of its bar, so on a close
   lane it lies on the next bar (ink on --info, 2.51:1 light, 1.81:1 dark). On the IN-e strip the label is its own chip on --surface,
   drawn over that bar, so its text holds 4.5:1 or more in both themes. */
.in-e-strip .in-d-mk em { z-index: 1; left: calc(100% + 2px); padding: 0 4px; border-radius: 4px; background: var(--surface); color: var(--ink); line-height: 16px; }
.in-e-strip .in-d-mk.free em { color: var(--muted); }

/* JUDGE Round 1 cross item 3 (REQ INT to RDV 3; RDV H54): the green fact band of the (a) Inputs pages broke its values one
   word per line. in.css draws the tile label with `.in-band span` (block, 11 px), and in live mode every number of a band
   value is a data-src mark span inside the value <b>, so each mark took the label look on its own line. A mark span inside
   an (a) band value is an inline part of the value. The (f) band (.in-f-band) stays with RUV. Narrow form: two tiles per
   row, values wrap at word gaps, no cut. */
.in-band:not(.in-f-band) b span { display: inline; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; opacity: 1; }
@media (max-width: 640px) {
  .in-band:not(.in-f-band) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-band:not(.in-f-band) b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; }
}

/* JUDGE Round 1 IN-a6 (REQ INT to RDV 3; RDV H54): in.css draws a voyage row as one line of 112 + track + 80 + 96 + 80 px, so
   at 1280 with the dock and at 390 the track shrank to nothing, "1,242 nm" printed over "3.0 days" and the rows ran out of
   the card. The voyage list is a size container; at 640 px or less a row has two lines: port and the three numbers (One way,
   Round trip, Port fee) first, the distance track at full width under them. The axis row takes the same form, so its heads
   stay over the number columns. */
.in-vy { container-type: inline-size; container-name: invy; }
@container invy (max-width: 640px) {
  .in-vy > .in-vy-r { grid-template-columns: minmax(0, 1fr) 64px 72px 72px; grid-template-areas: "p a b c" "t t t t"; column-gap: 8px; row-gap: 4px; min-height: 0; padding: 8px 0; }
  .in-vy > .in-vy-r > span:first-child { grid-area: p; min-width: 0; }
  .in-vy > .in-vy-r > .in-vy-t { grid-area: t; }
  .in-vy > .in-vy-r > span.num:nth-of-type(2) { grid-area: a; }
  .in-vy > .in-vy-r > span.num:nth-of-type(3) { grid-area: b; }
  .in-vy > .in-vy-r > span.num:nth-of-type(4) { grid-area: c; }
}

/* REQ INT to RDV 3 (JUDGE Round 1 RD-E1 390; RDV H54): ui.css draws a KPI value on one nowrap line, so in a narrow (e) Value
   tile the unit after the number ran 11 px out of the main. In the (e) Value tiles the value may break between the number and
   its unit, and the unit stays whole. */
.rd-e-kpis .kpi .val { white-space: normal; }
.rd-e-kpis .kpi .val small { display: inline-block; white-space: nowrap; }
/* RDV H76 (REQ ENM to RDV 00:43, JUDGE round 7 RP-C1 7: "-251.00 USD million" splits over 2 lines in a 213 px (c) tile at
   1440): the tile is an inline-size container and the value steps down with the tile width before it breaks; from a tile
   of about 250 px it keeps --fs-hero. Below about 200 px the break rule above still keeps the value inside the tile. */
.rd-e-kpis .kpi { container-type: inline-size; }
.rd-e-kpis .kpi .val { font-size: clamp(18px, 12cqi, var(--fs-hero)); }
/* RDV H58 (COORDINATOR item 64 (2), D-UT31): RD-c3 Negotiation, the port of the 4875 prototype card 3 (proto/app/ui/r6/ov.css
   svg.ng). Tokens only; the unit stands level above the axis (no rotated text). Below 760 px the plot keeps 720 px and the
   plot box scrolls, as in the prototype. */
.rd-ng-plot { overflow-x: auto; }
svg.ng { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.ng .ng-grid { stroke: var(--hair2); stroke-width: 1; }
.ng .ng-tick, .ng .ng-yl { fill: var(--muted); font-size: 11.5px; }
.ng .ng-ref line { stroke: var(--muted-l); stroke-width: 1.2; stroke-dasharray: 5 4; }
.ng .ng-ref text { fill: var(--ink2); font-size: 12px; font-weight: 600; }
.ng .ng-line { fill: none; stroke: var(--ink2); stroke-width: 1.8; stroke-linejoin: round; }
.ng .turn { cursor: pointer; outline: none; }
.ng .turn.on { cursor: default; }
.ng .turn:focus-visible .ng-m, .ng .turn:focus-visible .ng-start { stroke: var(--acc); stroke-width: 3; }
.ng .ng-start { fill: var(--ink2); }
.ng .ng-on { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.ng .ng-m { fill: var(--card); stroke-width: 2.6; }
.ng .ng-m.flat { stroke: var(--acc-l); }
.ng .ng-m.loss { stroke: var(--loss); }
.ng .ng-m.gain { stroke: var(--g); }
.ng .ng-m.run { stroke: var(--muted-l); stroke-dasharray: 3 3; }
.ng .ng-m.fail { stroke: var(--loss); stroke-width: 2; }
.ng .ng-gl { color: var(--info); }
.ng .ng-v { fill: var(--ink); font-size: 13px; font-weight: 700; }
.ng .ng-d { font-size: 12px; font-weight: 600; }
.ng .ng-v, .ng .ng-d, .ng .ng-s, .ng .ng-ref text { paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }
.ng .ng-d.loss { fill: var(--loss); }
.ng .ng-d.gain { fill: var(--acc-d); }
.ng .ng-d.flat { fill: var(--muted); }
.ng .ng-s { font-size: 11.5px; font-weight: 600; }
.ng .ng-s.run { fill: var(--muted); }
.ng .ng-s.fail { fill: var(--loss); }
.ng .ng-x { fill: var(--muted); font-size: 12px; }
.ng .ng-x.on { fill: var(--ink); font-weight: 700; }
.rd-ng-info, .rd-ng-date { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--hair); border-radius: 999px; color: var(--ink2); font-size: 12.5px; white-space: nowrap; }
.rd-ng-info { cursor: help; }
.rd-ng-info:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.rd-ng-note { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.rd-ng-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--loss); border-radius: 8px; color: var(--ink); font-size: 13px; }
.rd-ng-ask .rd-btn-warn { border-color: var(--loss); color: var(--loss); }
/* RDV H86 (REQ INT to RDV 14 cross finding 10): no min-width under 760 px any more: the chart draws at its plot width
   (nego.js negoSvg(m, NG.w)), so its text shows at the sizes above and the plot does not scroll */
/* RDV H75 (REQ ENA to RDV 48, SENSE-R7-2): the ship only count of a draft sits beside the Moved filter, never glued to it */
.rd-ship-n { align-self: center; margin: 0 8px; font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; }
/* RDV H78 (REQ INT to RDV 12, JUDGE round 8 cross finding 4 RDV half): at 390 the five What if boxes stood 3 in a row
   ("JaFe", "SeOcNoDec", the buyer name cut, "Try this shift" on 3 lines, the charter words one per line). The boxes now
   read the width of their grid: 2 in a row under 720 px, 1 under 520 px [KB T2 layout by container width] */
@container rdg (max-width: 719.98px) {
  .rd-wi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-wi > .rd-wi-box:nth-child(n) { grid-column: auto; }
}
@container rdg (max-width: 519.98px) {
  .rd-wi { grid-template-columns: minmax(0, 1fr); }
}
/* RDV H78 (REQ INT to RDV 12, JUDGE round 8 cross finding 4 RDV half): at 390 the Changes so far drawing (viewBox 720 px)
   shrank to text that cannot be read. In a grid under 520 px it keeps 560 px and scrolls inside its card */
.rd-c5-plot { overflow-x: auto; }
@container rdg (max-width: 519.98px) { .rd-c5-plot svg.rd-chart { min-width: 560px; } }

/* RDV H80 (item 64 (2), REQ INT to RDV 12 RD-01 7): RD-01 ADP timeline, the 4875 prototype card 5 (proto ov.css .tl) */
.rd-tl { position: relative; width: 100%; overflow-x: auto; }
.rd-tl .tl { display: block; }
.rd-tl .tl text { font-family: Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.rd-tl .tl-band { fill: color-mix(in srgb, var(--grid) 35%, transparent); }
.rd-tl .tl-tk, .rd-tl .tl-unit { fill: var(--muted); font-size: 11.5px; }
.rd-tl .tl-grid { stroke: var(--grid); stroke-width: 1; }
.rd-tl .tl-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.rd-tl .tl-pp { fill: transparent; cursor: crosshair; }
.rd-tl .tl-end { font-size: 12px; font-weight: 600; }
.rd-tl .tl-ln { fill: var(--muted); font-size: 9.5px; font-weight: 600; }
.rd-tl .tl-m { stroke: var(--card); stroke-width: 1; }
.rd-tl .tl-mk { cursor: pointer; outline: none; }
.rd-tl .tl-mk:focus-visible .tl-m { stroke: var(--ink); stroke-width: 2.5; }
.rd-tl .tl-gm { fill: var(--card); stroke: var(--ink2); stroke-width: 1.4; stroke-dasharray: 3 2; }
.rd-tl .tl-gbar { fill: none; stroke: var(--ink2); stroke-dasharray: 3 2; }
.rd-tl .tl-arc { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 4 3; }
.rd-tl-tip { position: absolute; z-index: 5; display: grid; gap: 2px; min-width: 180px; max-width: 260px; padding: 8px 10px; border-radius: 8px; background: var(--card); color: var(--ink); box-shadow: 0 4px 16px rgba(0,0,0,.16); font-size: 12px; line-height: 16px; pointer-events: none; }
.rd-tl-tip[hidden] { display: none; }

/* RDV H94 (JUDGE round 12 cross finding 6: "Change a ... input" blocks read as stacks of pale Add to draft buttons): a field
   button of IN-a2, IN-a3, IN-a4 and IN-a6 is in the page as disabled hidden until its field holds a valid change; .btn sets
   display inline-flex, which beats the user agent [hidden] rule, so this rule hides it */
.in-form-r .btn[hidden] { display: none; }
/* RDV H128: (e) Value of the plan bridge and the spread bridge of one Cargo plan row (live, rows of the RD-06 build-up form) */
.rd-e-vwf { margin-top: 12px; max-width: 520px; }
.rd-e-xb { border: 0; background: none; padding: 0 4px 0 0; color: var(--muted); cursor: pointer; vertical-align: -1px; }
.rd-e-xb svg { transition: transform .12s ease; }
.rd-e-xb[aria-expanded="true"] svg { transform: rotate(90deg); }
.rd-e-xr td { padding: 6px 12px 12px; background: var(--card); }
.rd-e-xwf { max-width: 420px; }
/* RDV H129 (REQ INT to RDV 24 IN-e 7.5: 13 single fields in one narrow column, the card 60 % empty): the Plant fields and
   the Term buyer windows fields of IN-e are a grid of field columns (3 or 4 at 1440, one at 390); the term form keeps its rows */
[data-card="e-inputs"] fieldset[data-in-einputs], [data-card="e-inputs"] fieldset[data-in-ewins] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 8px 24px; align-items: end; }
/* RDV H129 (REQ INT to RDV 24, mock-look 390 IN-a2 overlap a-plant: "Jan 27 | Mar 27" and 7 more month labels print over
   each other): under 600 px the plant chart names every fourth month (from the first), so no two month labels meet */
@media (max-width: 600px) {
  [data-card="a-plant"] .in-pc .in-pc-x { display: none; }
  [data-card="a-plant"] .in-pc:nth-child(4n+1) .in-pc-x { display: block; }
}

/* RDV H136 (REQ ENA to RDV 55, ANS ENA to RDV 71 (2)): IN-e Index prices grid, one price field per plan month and index;
   the Add button of a cell shows only for a typed change */
[data-in-eprices] .in-e-pg td { white-space: nowrap; }
[data-in-eprices] .in-e-pg .inp.num { width: 72px; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
[data-in-eprices] .in-e-pg .inp[aria-invalid="true"] { border-color: var(--loss); }
[data-in-eprices] .in-e-pg .btn { margin-left: 6px; }
[data-in-eprices] .btn[hidden] { display: none; }
/* RDV H137 (s72 WORKLOOP (a) give-drag red, NOTE V2D 16501, NOTE GATE2 16521, NOTE RDV 02:58 CET; test
   rd-cal-key-drag-h137-pw): while a cargo is in hand, the kit label of a buyer chip (.dg-v: the server price of the give, or
   why the buyer cannot take it) sat inside the chip, so the chip width changed when the probe answer replaced "Pricing on
   the server", the key row wrapped again under the still hand, and the release fell beside the marked chip (no draft). The
   busy key row gives each chip at least one width and room under each line; the label hangs under its own chip, so no chip
   box changes after the pick up and no label lies on another label or chip. RDV H138: room for the longest engine clash
   (about 200 characters, 6 lines of 11 px at the 256 px chip width) under each chip line. */
html.dg-busy .rd-cal-key { row-gap: 104px; padding-bottom: 100px; align-items: flex-start; }
html.dg-busy .rd-cal-key .rd-chip[data-hc] { position: relative; min-width: 256px; }
.rd-cal-key .rd-chip[data-hc] > .dg-v { position: absolute; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 0 2px;
  background: var(--surface); white-space: normal; z-index: 2; }

/* RDV H140 (REQ ENA to RDV 56 (3), spec 433 B10): RD-c1 next 90 days plan against the whole ADP plan, side by side */
.rd-n90 { margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--hair); }
.rd-n90-h { margin: 0 0 8px; font-size: 13px; color: var(--ink2); }
.rd-n90-t { font-variant-numeric: tabular-nums; }
.rd-n90-t td, .rd-n90-t thead th + th { text-align: right; }
.rd-n90-t tbody th { font-weight: 400; color: var(--ink2); white-space: normal; }
.rd-n90-k { margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.rd-n90-k dt { font-size: 12px; color: var(--muted); }
.rd-n90-k dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rd-n90-k small { margin-left: 4px; font-size: 11px; font-weight: 400; color: var(--muted); }
.rd-n90-m { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; font-variant-numeric: tabular-nums; }
.rd-n90-m .l { color: var(--muted); margin-right: 4px; }

/* RDV H153 (REQ INT to RDV 32, JUDGE round 28 "the RD-06 Who table cuts its first month head with no scroll cue"; MOCK-LOOK
   s73 1280 dock RD-06 rd-p3 "table scrolls 191 px with no scroll cue"): a table scroller marked data-scroll-cue="shade"
   draws an edge shade where its table has more (the RUV ru.css .ru-xscroll form: the card colour layers scroll with the
   content and cover the shade at each end, so a table that fits shows none) */
.rd-tablewrap[data-scroll-cue="shade"] { --rd-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(--rd-cue-sh), transparent) left center / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, var(--rd-cue-sh), transparent) right center / 12px 100% no-repeat scroll; }
/* RDV H153 (JUDGE round 28 "Ship taken in grows to 4 text lines"): the status chip beside a tile value (RD-06 "Not taken") */
.rd-kpi-st { display: inline-flex; align-items: center; height: 20px; margin-left: 8px; padding: 0 8px; border: 1px solid var(--hair); border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0; line-height: 1; color: var(--muted); white-space: nowrap; vertical-align: middle; }

/* RDV H154: RD-o7 Options for C<no> (ops2.js RD.optionsCard; look bar 4875 cg.js optionsA): cargo picker, ADP change
   bars, the plan lane first, hatched blocked lanes with their rule line */
.rd-opt-nav { display: inline-flex; gap: 6px; align-items: center; }
.rd-opt-pick { max-width: 260px; font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); }
.rd-opt-t td, .rd-opt-t th { white-space: nowrap; }
.rd-opt-lb { display: inline-flex; gap: 6px; align-items: center; }
.rd-opt-ck { color: var(--acc); }
.rd-opt-r.on td { background: var(--acc-t, rgba(46, 135, 99, .08)); }
.rd-opt-r.blk td { background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--line) 5px 6px); color: var(--muted); }
.rd-opt-bar { display: inline-block; width: 64px; height: 8px; margin-right: 6px; vertical-align: middle; background: var(--line); border-radius: 2px; overflow: hidden; }
.rd-opt-bar i { display: block; height: 100%; }
.rd-opt-bar i.pos { background: var(--acc); }
.rd-opt-bar i.neg { background: var(--loss, #c0392b); }
.rd-opt-bar i.blk { background: var(--plain-d); }
.rd-opt-why td { padding-top: 0; color: var(--muted); }
.rd-opt-foot { margin-top: 8px; }
.rd-opt-prog { margin: 0 0 8px; color: var(--muted); }
/* RDV H197 (JUDGE round 41 For the lanes 1, RD-03 at 390 px: page scrollWidth 440): the Previous, cargo pick and Next
   row of the Options head wraps and the pick shrinks, so the card head fits the phone width */
@media (max-width: 560px) { .rd-opt-nav { flex-wrap: wrap; max-width: 100%; min-width: 0; } .rd-opt-pick { flex: 1 1 140px; min-width: 0; max-width: 100%; } }
/* RDV H157 (D-UT64): the buyer ask row under the Negotiation chart: buyer, the ask field and Price the ask on one line
   (wraps at a phone width), then the server reading, one line per chip (words, margin change) and Add to draft */
.rd-ng-q { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--hair); }
.rd-ng-qf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rd-ng-qp { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); font-size: 13px; }
.rd-ng-qp select, .rd-ng-qt { min-height: 32px; padding: 0 8px; border: 1px solid var(--hair); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: 13px; }
.rd-ng-qt { flex: 1 1 220px; min-width: 0; }
.rd-ng-qp select:focus-visible, .rd-ng-qt:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.rd-ng-qs, .rd-ng-qu, .rd-ng-qh, .rd-ng-qj { margin: 8px 0 0; color: var(--ink2); font-size: 13px; }
.rd-ng-qh { color: var(--muted); font-size: 12px; }
.rd-ng-qc { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.rd-ng-qc li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 10px; border: 1px solid var(--hair); border-radius: 8px; font-size: 13px; }
.rd-ng-qk { display: inline-flex; align-items: baseline; gap: 6px; }
.rd-ng-qv, .rd-ng-qj b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
/* RDV H201 (SENSE-R41-1): what the answer of a priced chip does, on its own line under the chip words and value */
.rd-ng-qe { flex: 1 0 100%; color: var(--muted); font-size: 12px; }
.rd-ng-qe b { color: var(--ink2); font-variant-numeric: tabular-nums; font-weight: 600; }
.rd-ng-qv[data-tone="gain"], .rd-ng-qj b[data-tone="gain"] { color: var(--acc-d); }
.rd-ng-qv[data-tone="loss"], .rd-ng-qj b[data-tone="loss"] { color: var(--loss); }
.rd-ng-qn { margin-left: auto; color: var(--loss); }
.rd-ng-qa { margin: 8px 0 0; }

/* RDV H158 (REQ INT to RDV 33, JUDGE round 29: "at 390 the RD-06 Who table cuts its Role column and the page side
   scrolls 197 px"): under 561 px, live only (the shade marked scroller of formulaCardLive and the live caption chips;
   the mock table and caption keep their look): (1) a caption chip wraps inside the card, so the long "Spread at the
   plant ... USD/MMBtu" chip no longer makes the page wide; (2) each Who table row stacks: who and the month price on
   the first line, then the role, the formula and the status as full lines; the head keeps Who and the month price.
   No column is cut and the table does not scroll. 561 px and wider keep the table with its edge shade (H153). */
@media (max-width: 560px) {
  .rd-px-cap .chip { white-space: normal; max-width: 100%; }
  .rd-tablewrap[data-scroll-cue="shade"] > .rd-px-ft, .rd-tablewrap[data-scroll-cue="shade"] > .rd-px-ft > thead, .rd-tablewrap[data-scroll-cue="shade"] > .rd-px-ft > tbody { display: block; width: 100%; }
  .rd-tablewrap[data-scroll-cue="shade"] > .rd-px-ft tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 8px 12px; border-bottom: 1px solid var(--hair2); }
  .rd-tablewrap[data-scroll-cue="shade"] > .rd-px-ft thead tr { border-bottom-color: var(--hair); }
  .rd-tablewrap[data-scroll-cue="shade"] > .rd-px-ft th, .rd-tablewrap[data-scroll-cue="shade"] > .rd-px-ft td, .rd-tablewrap[data-scroll-cue="shade"] > .rd-px-ft td.rd-px-fx { display: block; position: static; height: auto; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  .rd-tablewrap[data-scroll-cue="shade"] > .rd-px-ft th:nth-child(2), .rd-tablewrap[data-scroll-cue="shade"] > .rd-px-ft th:nth-child(3), .rd-tablewrap[data-scroll-cue="shade"] > .rd-px-ft th:nth-child(5) { display: none; }
  .rd-tablewrap[data-scroll-cue="shade"] > .rd-px-ft th:nth-child(1), .rd-tablewrap[data-scroll-cue="shade"] > .rd-px-ft td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .rd-tablewrap[data-scroll-cue="shade"] > .rd-px-ft th:nth-child(4), .rd-tablewrap[data-scroll-cue="shade"] > .rd-px-ft td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; }
  .rd-tablewrap[data-scroll-cue="shade"] > .rd-px-ft td:nth-child(2), .rd-tablewrap[data-scroll-cue="shade"] > .rd-px-ft td:nth-child(3), .rd-tablewrap[data-scroll-cue="shade"] > .rd-px-ft td:nth-child(5) { grid-column: 1 / -1; margin-top: 2px; font-size: 12px; line-height: 18px; color: var(--ink2); }
  .rd-tablewrap[data-scroll-cue="shade"] > .rd-px-ft td:nth-child(5) { color: var(--muted); }
}
@media (max-width: 560px) { .rd-tablewrap[data-scroll-cue="shade"] > .rd-px-ft tr.rd-px-off td { color: var(--muted); } }
/* RDV H198 (REQ SENSE to RDV AUD-H182-1 (e) half): the plan closing level line of IN-e takes the full width of the Closing
   tank at least cell, under its field and button */
[data-card="e-inputs"] .in-form-r > [data-ct="level"] { flex: 1 0 100%; margin: 0; }