/* assets/css/rp.css (lane RP): Results of the portfolio templates. Class prefix .rp-.
   Base tokens (--ink, --card, --acc ...) come from tokens.css (lane SH, T1 and T9). RP adds only its chart tokens.
   Grid: 4/8 px (IA D12). Type: IA D11 scale, floor 11 px, tabular figures on every number. */

/* [KB T6.9] one hue per price index, a shade per source; dark lifts the hue, keeps the order */
:root {
  --rp-hh: #2A78D6; --rp-ttf: #E07B28; --rp-jkm: #1E9E8C; --rp-brent: #B0479B;
  --rp-hh-0: #2A78D6; --rp-hh-1: #1E5699; --rp-hh-2: #15396B; --rp-hh-3: #0F2A4F;
  --rp-cnum: #FFFFFF;
  --rp-ttf-0: #E07B28; --rp-ttf-1: #A15A1D; --rp-brent-0: #B0479B; --rp-brent-1: #7F3370;
  --rp-jkm-0: #1E9E8C; --rp-jkm-1: #13675B; --rp-jkm-2: #0F4F46;
  /* RPV H53 (REQ LIVE to RPV 4): fill and text of a used cargo chip per shade, 4.5:1 or more; same hue as the shade */
  --rp-hh-0-chip: #2974D0; --rp-hh-0-tx: #FFFFFF; --rp-hh-1-chip: #1E5699; --rp-hh-1-tx: #FFFFFF; --rp-hh-2-chip: #15396B; --rp-hh-2-tx: #FFFFFF; --rp-hh-3-chip: #0F2A4F; --rp-hh-3-tx: #FFFFFF;
  --rp-ttf-0-chip: #E07B28; --rp-ttf-0-tx: #0B1F17; --rp-ttf-1-chip: #A15A1D; --rp-ttf-1-tx: #FFFFFF; --rp-brent-0-chip: #B0479B; --rp-brent-0-tx: #FFFFFF; --rp-brent-1-chip: #7F3370; --rp-brent-1-tx: #FFFFFF;
  --rp-jkm-0-chip: #1E9E8C; --rp-jkm-0-tx: #0B1F17; --rp-jkm-1-chip: #13675B; --rp-jkm-1-tx: #FFFFFF; --rp-jkm-2-chip: #0F4F46; --rp-jkm-2-tx: #FFFFFF;
  --rp-ramp: #2E8763; --rp-ramp0: #EAF2EE; --rp-on-ramp: #FFFFFF; --rp-tol: rgba(46,135,99,.34);
  --rp-hatch-a: #F7F9F8; --rp-hatch-b: #E6ECE9; --rp-blk-a: #FDF6E3; --rp-blk-b: #F1E2B8;
  --rp-chip: #FFFFFF;
}
/* RP-c3 move colours and parties: aliases of the shared tokens, so dark follows tokens.css */
:root {
  --rp-them: var(--ns-t, #8A6A1F); --rp-them-f: var(--ns-f, #FDF6E3); --rp-us: var(--info, #1F5FAF); --rp-us-f: var(--info-t, #EAF1FB);
  --rp-mv-free: color-mix(in srgb, var(--acc, #2E8763) 45%, var(--card, #fff)); --rp-mv-ask: var(--loss, #B5473C); --rp-mv-con: var(--warn, #C0841A);
  --rp-mv-gain: var(--acc, #2E8763); --rp-mv-chg: var(--muted, #6B7A74); --rp-plans: color-mix(in srgb, var(--ink2, #3B4A44) 28%, var(--card, #fff));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rp-hh: #5B9BE8; --rp-ttf: #F29A52; --rp-jkm: #3FC1AE; --rp-brent: #D27CC2;
    --rp-hh-0: #5B9BE8; --rp-hh-1: #8DB8EF; --rp-hh-2: #3F7FCB; --rp-hh-3: #B6D1F5;
  --rp-cnum: #0B1F17;
    --rp-cnum: #0B1F17;
    --rp-ttf-0: #F29A52; --rp-ttf-1: #F7BE8C; --rp-brent-0: #D27CC2; --rp-brent-1: #E6ABDC;
    --rp-jkm-0: #3FC1AE; --rp-jkm-1: #7AD8CA; --rp-jkm-2: #2C9686;
    --rp-hh-0-chip: #5B9BE8; --rp-hh-0-tx: #0B1F17; --rp-hh-1-chip: #8DB8EF; --rp-hh-1-tx: #0B1F17; --rp-hh-2-chip: #4B87CE; --rp-hh-2-tx: #0B1F17; --rp-hh-3-chip: #B6D1F5; --rp-hh-3-tx: #0B1F17;
    --rp-ttf-0-chip: #F29A52; --rp-ttf-0-tx: #0B1F17; --rp-ttf-1-chip: #F7BE8C; --rp-ttf-1-tx: #0B1F17; --rp-brent-0-chip: #D27CC2; --rp-brent-0-tx: #0B1F17; --rp-brent-1-chip: #E6ABDC; --rp-brent-1-tx: #0B1F17;
    --rp-jkm-0-chip: #3FC1AE; --rp-jkm-0-tx: #0B1F17; --rp-jkm-1-chip: #7AD8CA; --rp-jkm-1-tx: #0B1F17; --rp-jkm-2-chip: #2C9686; --rp-jkm-2-tx: #0B1F17;
    --rp-ramp: #3FBF8A; --rp-ramp0: #18271F; --rp-on-ramp: #0D1613; --rp-tol: rgba(63,191,138,.34);
    --rp-hatch-a: #17231E; --rp-hatch-b: #22312B; --rp-blk-a: #2A2414; --rp-blk-b: #3A3119;
    --rp-chip: #1A2722;
  }
}
:root[data-theme="dark"] {
  --rp-hh: #5B9BE8; --rp-ttf: #F29A52; --rp-jkm: #3FC1AE; --rp-brent: #D27CC2;
  --rp-hh-0: #5B9BE8; --rp-hh-1: #8DB8EF; --rp-hh-2: #3F7FCB; --rp-hh-3: #B6D1F5;
  --rp-cnum: #0B1F17;
  --rp-ttf-0: #F29A52; --rp-ttf-1: #F7BE8C; --rp-brent-0: #D27CC2; --rp-brent-1: #E6ABDC;
  --rp-jkm-0: #3FC1AE; --rp-jkm-1: #7AD8CA; --rp-jkm-2: #2C9686;
  --rp-hh-0-chip: #5B9BE8; --rp-hh-0-tx: #0B1F17; --rp-hh-1-chip: #8DB8EF; --rp-hh-1-tx: #0B1F17; --rp-hh-2-chip: #4B87CE; --rp-hh-2-tx: #0B1F17; --rp-hh-3-chip: #B6D1F5; --rp-hh-3-tx: #0B1F17;
  --rp-ttf-0-chip: #F29A52; --rp-ttf-0-tx: #0B1F17; --rp-ttf-1-chip: #F7BE8C; --rp-ttf-1-tx: #0B1F17; --rp-brent-0-chip: #D27CC2; --rp-brent-0-tx: #0B1F17; --rp-brent-1-chip: #E6ABDC; --rp-brent-1-tx: #0B1F17;
  --rp-jkm-0-chip: #3FC1AE; --rp-jkm-0-tx: #0B1F17; --rp-jkm-1-chip: #7AD8CA; --rp-jkm-1-tx: #0B1F17; --rp-jkm-2-chip: #2C9686; --rp-jkm-2-tx: #0B1F17;
  --rp-ramp: #3FBF8A; --rp-ramp0: #18271F; --rp-on-ramp: #0D1613; --rp-tol: rgba(63,191,138,.34);
  --rp-hatch-a: #17231E; --rp-hatch-b: #22312B; --rp-blk-a: #2A2414; --rp-blk-b: #3A3119;
  --rp-chip: #1A2722;
}

.rp { position: relative; font-variant-numeric: tabular-nums; }
.rp-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- card frame (T6 / mockup .card.xf), used until XM.ui.card exists ---------- */
.rp-card { position: relative; background: var(--card); border: 1px solid var(--hair); border-radius: 12px; padding: 24px; margin: 0 0 16px; box-shadow: var(--sh-card); min-width: 0; transition: border-color .16s ease; }
.rp-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; margin: 0 0 16px; }
.rp-htext { flex: 1 1 240px; min-width: 0; }
.rp-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: -.01em; color: var(--ink); cursor: grab; display: inline-block; }
.rp-q { margin: 4px 0 0; font-size: 14.5px; line-height: 20px; color: var(--ink2); }
.rp-tools { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; min-height: 32px; }
.rp-ic { flex: none; display: block; }

/* buttons: rest, hover, focus, pressed, disabled [QR 37] */
.rp-btn, .rp-ask { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ctl); background: var(--card); color: var(--ink2); font: 500 13px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: border-color .12s, color .12s, background .12s, transform .06s; }
.rp-btn:hover:not(:disabled), .rp-ask:hover { border-color: var(--acc); color: var(--acc-tx); }
.rp-btn:active:not(:disabled), .rp-ask:active { transform: translateY(1px); background: var(--acc-t); }
.rp-btn:disabled { color: var(--muted-l); border-color: var(--hair); cursor: not-allowed; }
.rp-ask { padding: 0 10px 0 8px; }
.rp-ask span { font-size: 12.5px; }

/* head state chip (IA 7.1): icon plus word */
.rp-state { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--added); color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.rp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); flex: none; }
.rp-state.busy .rp-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--acc); animation: rp-pulse 1.2s ease-in-out infinite; }
@keyframes rp-pulse { 50% { opacity: .35; } }

/* ---------- RP-c1 KPI tiles: one hero, quiet secondaries [QR 54, KB T2.4] ---------- */
.rp-kpis { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 16px; }
.rp-kpi { border: 1px solid var(--hair); border-radius: 10px; padding: 12px 16px; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.rp-klab { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--muted); }
.rp-kval { display: flex; align-items: flex-end; gap: 12px; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); margin: 4px 0 0; white-space: nowrap; }
.rp-hero { background: var(--added); }
.rp-hero .rp-kval { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.02em; }
.rp-word .rp-kval { font-size: 20px; }
.rp-pos .rp-kval { color: var(--acc-tx); } .rp-neg .rp-kval, em.rp-neg { color: var(--loss); }
.rp-ksub { font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-ksep { margin: 0 6px; color: var(--muted-l); }
.rp-spark { margin: 0 0 4px; flex: none; }
@media (max-width: 1100px) { .rp-kpis { grid-template-columns: 1fr 1fr; } }

/* skeleton in the card's own shape (IA 7.10) */
.rp-sk i { display: block; border-radius: 4px; background: linear-gradient(90deg, var(--track), var(--added), var(--track)); background-size: 200% 100%; animation: rp-sh 1.4s linear infinite; }
.rp-sk .l1 { width: 40%; height: 12px; } .rp-sk .l2 { width: 60%; height: 24px; } .rp-sk .l3 { width: 50%; height: 12px; }
.rp-skmx { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-left: 56px; }
.rp-skmx i { height: 48px; border-radius: 6px; background: linear-gradient(90deg, var(--track), var(--added), var(--track)); background-size: 200% 100%; animation: rp-sh 1.4s linear infinite; }
@keyframes rp-sh { to { background-position: -200% 0; } }

/* error card: what, why, fix [QR 33] */
.rp-errbox { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 10px; background: var(--loss-l); color: var(--ink); }
.rp-errbox > svg { color: var(--loss); margin-top: 2px; }
.rp-errbox b { font-size: 14.5px; } .rp-errbox p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink2); }

/* ---------- contract strip (IA 8 medium form) ---------- */
.rp-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--hair2); }
.rp-grp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.rp-grp:last-child { margin-left: auto; }
.rp-glab { font-size: 12px; font-weight: 500; color: var(--muted); margin-right: 4px; }
.rp-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: 14px; border: 1px solid var(--hair); background: var(--rp-chip); color: var(--ink2); font-size: 12.5px; font-weight: 500; white-space: nowrap; cursor: default; }
.rp-chip b { font-weight: 600; color: var(--ink); }
.rp-chip:hover { border-color: var(--ctl); }
.rp-side { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11.5px; font-weight: 600; background: var(--acc-t); color: var(--acc-tx); }
.rp-formula { color: var(--muted); }
.rp-sep { width: 1px; height: 20px; background: var(--hair); margin: 0 4px; }
.rp-lsq { display: inline-flex; gap: 2px; } .rp-lsq i { width: 8px; height: 8px; border-radius: 2px; border: 1px solid var(--ctl); }
.rp-lsn { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.rp-mk { flex: none; display: inline-block; }

/* ---------- RP-c2 matrix ---------- */
.rp-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--track); }
.rp-seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: 500 13px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background .12s, color .12s; }
.rp-seg button:hover { color: var(--ink); }
.rp-seg button.on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: var(--sh-thumb); }
.rp-scale { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.rp-scale i { width: 96px; height: 8px; border-radius: 4px; }
.rp-scale i.sp { background: linear-gradient(90deg, color-mix(in srgb, var(--rp-ramp) 12%, var(--rp-ramp0)), var(--rp-ramp)); }
.rp-scale i.ch { background: linear-gradient(90deg, color-mix(in srgb, var(--loss) 90%, var(--card)), color-mix(in srgb, var(--loss) 10%, var(--card)) 85%, var(--acc-t)); }
.rp-rrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.rp-rule { display: inline-flex; align-items: center; height: 32px; border: 1px solid var(--hair); border-radius: 16px; background: var(--card); overflow: hidden; }
.rp-rule.on { border-color: var(--acc-l); background: var(--acc-t); }
.rp-tg { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 8px; border: 0; background: transparent; color: var(--ink); font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.rp-tg i { position: relative; width: 28px; height: 16px; border-radius: 8px; background: var(--ctl); transition: background .14s; }
.rp-tg i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: var(--sh-thumb); transition: left .14s; }
.rp-rule.on .rp-tg i { background: var(--acc); } .rp-rule.on .rp-tg i::after { left: 14px; }
.rp-rv { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-left: 1px solid var(--hair); font-size: 12.5px; font-weight: 500; color: var(--ink2); }
.rp-mxw { position: relative; overflow-x: auto; }
table.rp-mx { width: 100%; min-width: 840px; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
table.rp-mx th { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 0 4px; text-align: center; }
table.rp-mx th.rh { width: 52px; text-align: right; padding: 0 8px 0 0; font-weight: 500; white-space: nowrap; }
table.rp-mx td { padding: 0; }
.rp-mc { position: relative; width: 100%; height: 48px; border: 0; border-radius: 6px; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 8px; font: 600 15px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--track); cursor: pointer; transition: outline-color .12s, transform .06s; outline: 2px solid transparent; outline-offset: 1px; }
.rp-mc:hover { outline-color: var(--acc); z-index: 1; }
.rp-mc:active { transform: scale(.98); }
.rp-mc:focus-visible { outline: 2px solid var(--acc); box-shadow: var(--focus); }
.rp-mc.plan { box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 3.5px var(--card); }
.rp-mc.sel { outline-color: var(--acc); box-shadow: var(--focus); z-index: 2; }
.rp-mc.plan.sel { box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 3.5px var(--card), var(--focus); }
.rp-mc.nop { background: repeating-linear-gradient(135deg, var(--rp-hatch-a) 0 6px, var(--rp-hatch-b) 6px 9px); color: var(--muted-l); font-weight: 500; font-size: 12px; }
.rp-mc.blk { background: repeating-linear-gradient(135deg, var(--rp-blk-a) 0 6px, var(--rp-blk-b) 6px 9px); color: var(--ns-t); align-items: center; padding: 0; }
.rp-tag { position: absolute; top: 4px; left: 4px; display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: 4px; background: var(--rp-chip); color: var(--ink); font-size: 11px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 1px var(--hair); }
.rp-tag .rp-ic { width: 11px; height: 11px; }
.k5 .rp-mc { height: 36px; padding-bottom: 6px; font-size: 13px; } .k10 .rp-mc { height: 28px; padding-bottom: 6px; font-size: 12px; }
.k10 .rp-tag { top: 2px; left: 2px; height: 14px; }

/* ---------- RP-04 popover (R6-POP1): anchored under the cell ---------- */
.rp-popslot { position: absolute; z-index: 20; width: 320px; animation: rp-in .14s ease-out; }
@keyframes rp-in { from { opacity: 0; transform: translateY(-4px); } }
.rp-pop { background: var(--card); border: 1px solid var(--hair); border-radius: 12px; box-shadow: var(--sh-pop); overflow: hidden; }
.rp-phead { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--hair2); font-size: 13.5px; }
.rp-phead b { font-weight: 600; }
.rp-ptag { height: 20px; padding: 0 6px; border-radius: 4px; background: var(--added); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; }
.rp-px { margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.rp-px:hover { background: var(--added); color: var(--ink); }
.rp-pbody { padding: 8px 16px; }
.rp-pnum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; height: 28px; font-size: 13px; color: var(--ink2); }
.rp-pnum span { display: inline-flex; align-items: center; gap: 4px; }
.rp-pnum b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.rp-pnum.tot { border-top: 1px solid var(--hair2); }
.rp-pnum.adp { height: auto; padding: 8px 0 4px; border-top: 1px solid var(--hair2); }
/* RPV H29 (SENSE-1-19 part 1): source rows of the cell popover */
.rp-psrc { padding: 8px 0 4px; border-top: 1px solid var(--hair2); }
.rp-psrc .rp-pk { font-size: 12px; color: var(--ink2); margin-bottom: 4px; }
.rp-psrc ul { list-style: none; margin: 0; padding: 0; }
.rp-psrc li { display: flex; align-items: baseline; gap: 8px; min-height: 24px; font-size: 13px; color: var(--ink2); }
.rp-psrc li > span:first-child { flex: 1 1 auto; min-width: 0; }
.rp-psrc li b { font-weight: 600; color: var(--ink); white-space: nowrap; }
/* RPV H47 (SENSE-1-19 rest): a source row carries the whole ADP of the source (or its miss reason) and its Take button */
.rp-psrc li { flex-wrap: wrap; }
.rp-psrc li .rp-padp { flex: 0 0 auto; margin-left: auto; font-size: 13px; white-space: nowrap; }
.rp-psrc li .rp-padp.rp-muted { white-space: normal; text-align: right; max-width: 60%; }
.rp-psrc li .rp-ptake { flex: 0 0 auto; height: 28px; padding: 0 8px; }
/* RPV H32 (SENSE-1-19 part 2): Fix C1 to Cn here, each with its whole ADP value */
.rp-pfix { padding: 8px 0 4px; border-top: 1px solid var(--hair2); }
.rp-pfix .rp-pk { font-size: 12px; color: var(--ink2); margin-bottom: 4px; }
.rp-pfix ul { list-style: none; margin: 0; padding: 0; }
.rp-pfix li { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: 13px; color: var(--ink2); }
.rp-pfix li > :first-child { flex: 1 1 auto; min-width: 0; }
.rp-pfix li b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.rp-pfix li.rp-pfix-no { min-height: 20px; font-size: 12px; color: var(--ink3, var(--ink2)); }
/* RPV H98 (FINDING-RPV-H97-1): the agreed term note of a Fix or Move row is one text line under the button that may wrap;
   its tags and window names are inline text, never inline-flex boxes that split the words into columns */
.rp-pfix li .rp-pagreed { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; }
.rp-pfix li .rp-pagreed span { display: inline; height: auto; }
.rp-pfix li .rp-pagreed .rp-ptag { padding: 1px 4px; font-size: 12px; font-weight: 600; line-height: 16px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* RPV H98 (FINDING-RPV-H97-1): a live Buy row (Buy from, the source mark and name, delivered) wraps as text and the row grows;
   one line rows keep 28 px */
.rp-pnum.rp-pwrap { height: auto; min-height: 28px; padding: 5px 0; line-height: 18px; }
.rp-pnum.rp-pwrap > span { display: block; flex: 1 1 auto; min-width: 0; }
.rp-pnum.rp-pwrap > span span { display: inline; }
.rp-pnum.rp-pwrap .rp-mk { vertical-align: -1px; margin: 0 2px; }
.rp-pnum em { font-style: normal; font-weight: 600; margin-left: 4px; color: var(--muted); }
.rp-pnum em.rp-neg { color: var(--loss); } .rp-pnum em.rp-posm { color: var(--acc-tx); }
.rp-pwhy { margin: 4px 0; font-size: 13px; color: var(--ink2); }
.rp-pacts { display: flex; flex-direction: column; padding: 4px; border-top: 1px solid var(--hair2); }
.rp-pa { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: 500 13px/1 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
.rp-pa:hover, .rp-pa:focus-visible { background: var(--acc-t); color: var(--acc-tx); }

@media (prefers-reduced-motion: reduce) { .rp *, .rp *::after { animation: none !important; transition: none !important; } }

/* ---------- RP-c10 cargo plan table [QR 28]: numbers right, units in the head, one precision per column ---------- */
.rp-tscroll { overflow-x: auto; }
table.rp-t { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.rp-t th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 12px 8px; vertical-align: bottom; border-bottom: 1px solid var(--hair); white-space: nowrap; }
table.rp-t th small { display: block; font-size: 11px; font-weight: 500; color: var(--muted-l); }
table.rp-t td { height: 44px; padding: 0 12px; border-bottom: 1px solid var(--hair2); color: var(--ink); white-space: nowrap; }
table.rp-t tbody tr { transition: background .12s; } table.rp-t tbody tr:hover { background: var(--added); }
table.rp-t .num { text-align: right; }
table.rp-t tfoot td { height: 44px; font-weight: 600; border-bottom: 0; border-top: 1px solid var(--hair); }
.rp-cno { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 4px; background: var(--added); font-size: 12px; font-weight: 700; }
.rp-srcc { display: inline-flex; align-items: center; gap: 6px; } .rp-srcc b { font-weight: 600; } .rp-srcc span { color: var(--muted); }
.rp-wbar { width: 220px; }
.rp-wb { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.rp-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--track); display: flex; overflow: hidden; }
.rp-bar i { display: block; height: 100%; border-radius: 4px; background: var(--acc); } .rp-bar i.neg { background: var(--loss); }
.rp-wb b { min-width: 48px; text-align: right; }
/* RPV H60 (item 64 (3)): the Spread bar column of the Cargo plan is narrower than the Profit bar column */
.rp-wbar.rp-wsp { width: 160px; }
/* RPV H148 (REQ INT to RPV 28, round 27 For the lanes 2; prototype ov.css .xf .vbar and .volb): Cargo plan Prices view, the
   Sale and FOB or DES inline bars and the Volume band (contract band, cargo tick; out of the band in --warn) */
.rp-wbar.rp-wpx, .rp-wbar.rp-wvol { width: 132px; }
.rp-volb { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--track); }
.rp-volb > i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--acc); opacity: .35; }
.rp-volb > em { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.rp-volb.out > em { width: 3px; background: var(--warn); }
.rp-empty { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 10px; background: var(--added); }
.rp-empty > svg { color: var(--acc-tx); margin-top: 2px; } /* fixer S1 (F7): a normal state, not a loss */ .rp-empty b { font-size: 14.5px; } .rp-empty p { margin: 4px 0 0; color: var(--ink2); }

/* ---------- session 2: Try preview (IA 7.4) ---------- */
/* dashed accent frame on the affected cards; numbers read Before, Try, Change [QR 22 frame plus words] */
.rp-card.pv { border: 1.5px dashed var(--acc); }
.rp-pv .rp-kpi.rp-try { background: var(--card); outline: 1.5px dashed var(--acc); outline-offset: -1.5px; }
.rp-state.pv { color: var(--acc-tx); }
.rp-btn.rp-pri { background: var(--acc); border-color: var(--acc); color: #fff; }
.rp-btn.rp-pri:hover:not(:disabled) { filter: brightness(1.06); }
/* ghost cell: the Try puts a cargo here; leave cell: the Try moves the cargo away */
.rp-mc.ghost { outline: 1.5px dashed var(--acc); outline-offset: -3px; }
.rp-tag.gh { background: transparent; border: 1px dashed var(--acc); color: var(--acc-tx); }
.rp-mc.leave .rp-tag { opacity: .45; text-decoration: line-through; }
.rp-mc.leave { outline: 1.5px dashed var(--muted); outline-offset: -3px; }
@media (prefers-reduced-motion: no-preference) {
  .rp-pv .rp-kpi.rp-try, .rp-mc.ghost { animation: rp-pv-in .18s ease-out; }
  @keyframes rp-pv-in { from { opacity: .4; } to { opacity: 1; } }
}
:root[data-theme="dark"] .rp-tag.gh, :root[data-theme="dark"] .rp-state.pv { color: var(--acc-tx, #5FD9A6); }

/* ---------- session 2: RP-c1a buyer ask row (mockup .ask, .ask-in, .uc chips) on the 4 / 8 px grid ---------- */
.rp-ask-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.rp-party button { display: inline-flex; align-items: center; gap: 6px; }
.rp-askin { flex: 1 1 320px; max-width: 480px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 12px; border: 1px solid var(--ctl); border-radius: 10px; background: var(--card); box-shadow: var(--sh-card); transition: border-color .12s, box-shadow .12s; }
.rp-askin:focus-within { border-color: var(--acc); box-shadow: var(--focus); }
.rp-askin input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 14px/20px Inter, system-ui, sans-serif; }
.rp-askin input::placeholder { color: var(--muted-l); }
.rp-askx { display: inline-flex; border: 0; background: transparent; color: var(--muted); padding: 4px; border-radius: 6px; cursor: pointer; }
.rp-askx:hover { background: var(--hair2); color: var(--ink); }
.rp-askex { height: 24px; padding: 0 8px; border: 1px solid var(--hair); border-radius: 6px; background: transparent; color: var(--muted); font: 500 12px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.rp-askex:hover { border-color: var(--acc); color: var(--acc-tx); }
.rp-cbar { display: inline-flex; gap: 4px; }
.rp-cbar i { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px; border-radius: 6px; border: 1px solid var(--hair); color: var(--muted); font: 600 11px/1 Inter, system-ui, sans-serif; font-style: normal; font-variant-numeric: tabular-nums; }
.rp-cbar i.on { background: var(--acc-t); border-color: var(--acc); color: var(--acc-tx); }
.rp-askout { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 16px; padding: 8px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--hair); }
.rp-uc { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border-radius: 16px; border: 1.5px solid var(--ink2); background: var(--card); color: var(--ink); font: 600 12.5px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: opacity .12s, border-color .12s, background .12s; }
.rp-uc.k-fix.off { border-style: dashed; }
.rp-uc.k-block { border-color: var(--ns-b, var(--hair)); background: var(--ns-f, var(--hair2)); color: var(--ns-t, var(--ink)); }
.rp-uc.off .rp-uck, .rp-uc.off > svg { opacity: .6; }
.rp-uc:hover { border-color: var(--acc); }
.rp-uc:focus-visible { outline: none; box-shadow: var(--focus); }
.rp-uck { color: var(--muted); font-weight: 500; }
/* RPV H64 (N1): the cause line of a chip that frees a held cargo ("Frees cargo 6 held in 21 to 31 Dec") */
.rp-ucfree { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink2); margin: -4px 4px 0 0; }
.rp-ucb { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--ctl); background: var(--card); color: #fff; font-style: normal; }
.rp-ucb.on { background: var(--acc-d); border-color: var(--acc-d); }
.rp-ucb svg { width: 10px; height: 10px; stroke-width: 2.2; }
.rp-ucd { margin-left: 2px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-asksum { font: 700 13px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; margin-left: 4px; }
.rp-asksum .rp-u { color: var(--muted); font-weight: 500; }
.rp-askout .rp-btn.rp-pri { margin-left: auto; }
.rp-askbad { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 14px; background: var(--loss-l); color: var(--loss); font: 600 12.5px/1 Inter, system-ui, sans-serif; }
:root[data-theme="dark"] .rp-ucb.on { background: var(--acc); border-color: var(--acc); }
.rp-ucd.rp-neg, .rp-asksum.rp-neg { color: var(--loss); }
.rp-ucd.rp-posm, .rp-asksum.rp-posm { color: var(--acc-tx); }
.rp-ucd.rp-zero, .rp-asksum.rp-zero { color: var(--muted); }
:root[data-theme="dark"] .rp-ucd.rp-posm, :root[data-theme="dark"] .rp-asksum.rp-posm { color: var(--acc-tx, #5FD9A6); }
.rp-askfix { color: var(--muted); font-size: 13px; }
/* No plan line (IA 7.1, QR 33): icon plus words, what happened and what to change */
.rp-noplan { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 0; padding: 12px 16px; border-radius: 10px; background: var(--loss-l); border: 1px solid var(--loss-b); color: var(--ink); }
.rp-noplan > svg { color: var(--loss); flex: none; margin-top: 2px; }
.rp-noplan b { font-weight: 600; font-size: 14px; }
.rp-noplan p { margin: 4px 0 0; font-size: 13px; line-height: 20px; color: var(--ink2); }
.rp-noplan .rp-nofix { color: var(--muted); }
/* updating (P S12, S13): the last full numbers stay, grey, while the step runs */
.rp-upd .rp-kval { color: var(--muted) !important; }
.rp-card.upd .rp-body { opacity: .55; transition: opacity .2s; }
@media (prefers-reduced-motion: no-preference) {
  .rp-upd .rp-kpis { animation: rp-shim 1.2s ease-in-out infinite; }
  @keyframes rp-shim { 50% { opacity: .7; } }
}
/* RP-04 rule value popover: the value part of a rule pill is a button; rows priced on the whole ADP */
button.rp-rv { border: 0; border-left: 1px solid var(--hair); background: transparent; font-family: inherit; cursor: pointer; border-radius: 0 15px 15px 0; font-variant-numeric: tabular-nums; transition: background .12s, color .12s; }
button.rp-rv:hover, button.rp-rv.sel { background: var(--acc-t); color: var(--acc-tx); }
button.rp-rv:focus-visible { outline: none; box-shadow: var(--focus); }
/* RPV H186: the minus and plus day steppers of a rule pill (4875 proto/app/ui/r6/ov.css .rpill > .rv, L317 to L322) */
.rp-rstep { height: 30px; min-width: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border: 0; border-left: 1px solid var(--hair); background: transparent; color: var(--muted); font: 600 13px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; }
.rp-rule.on .rp-rstep { color: var(--acc-tx); border-left-color: var(--acc-l); } /* --acc-tx = the 4875 --acc-d in light, the readable green in dark */
.rp-rstep:hover:not([disabled]) { background: rgba(18,54,39,.05); }
.rp-rstep[disabled] { opacity: .4; cursor: default; }
.rp-rstep:focus-visible { outline: none; box-shadow: var(--focus); }
.rp-rule.rp-rsteps button.rp-rv { border-radius: 0; }
.rp-rule.rp-rsteps .rp-rstep:last-child { border-radius: 0 15px 15px 0; }
/* RPV H188b (4875 ov.js L1618 rrow-sp and rpill tolp, mxCell L1596): the Offer range pill sits at the right end of the rule
   row; its count closes the pill; a window inside the range has the green tint of the 4875 cell */
.rp-rule.rp-tol { margin-left: auto; }
.rp-rule.rp-tol .rp-tolv { padding: 0 10px; font-variant-numeric: tabular-nums; }
.rp-rule.rp-tol .rp-tolc { border-radius: 0 15px 15px 0; color: var(--acc-tx); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-rule.rp-tol.on .rp-rv { border-left-color: var(--acc-l); }
.rp-rule.rp-tol .rp-rstep:last-child { border-radius: 0 15px 15px 0; }
.rp-rpop { width: 432px; max-width: calc(100vw - 32px); }
.rp-rq { margin: 0; padding: 0 16px 8px; font-size: 13px; line-height: 20px; color: var(--muted); }
.rp-rhd, .rp-rrowb { display: grid; grid-template-columns: 56px 1fr 1fr 1fr 40px; gap: 8px; align-items: center; padding: 0 16px; }
.rp-rhd { height: 28px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); font-size: 11px; font-weight: 600; color: var(--muted); text-transform: none; }
.rp-rrowb { width: 100%; height: 36px; border: 0; background: transparent; color: var(--ink); font: 500 13px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; text-align: left; }
.rp-rrowb + .rp-rrowb { border-top: 1px solid var(--hair2, var(--hair)); }
.rp-rrowb:hover { background: var(--acc-t); }
.rp-rrowb:focus-visible { outline: none; box-shadow: inset var(--focus); }
.rp-rrowb.now { font-weight: 700; }
.rp-rhd .num, .rp-rrowb .num { text-align: right; }
.rp-rrowb .rp-muted { color: var(--muted); }
.rp-rrowb .rp-neg { color: var(--loss); } .rp-rrowb .rp-posm { color: var(--acc-tx); } .rp-rrowb .rp-zero { color: var(--muted); }
.rp-rnow { font-size: 11px; font-weight: 600; color: var(--acc-tx); text-align: right; }
.rp-rfoot { margin: 0; padding: 8px 16px 12px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--muted); }
.rp-ptag.off { background: var(--hair2, var(--hair)); color: var(--muted); }
:root[data-theme="dark"] .rp-rnow, :root[data-theme="dark"] .rp-rrowb .rp-posm, :root[data-theme="dark"] button.rp-rv.sel { color: var(--acc-tx, #5FD9A6); }

/* ---------- RP-c9 Next best ADPs (session 3) ---------- */
.rp-alts { display: grid; gap: 4px; }
.rp-alt { display: grid; grid-template-columns: 32px auto minmax(120px, 1fr) 152px 132px; align-items: center; gap: 16px; min-height: 36px; padding: 0 8px; border-radius: 8px; border: 1px solid transparent; transition: background .12s, border-color .12s; }
.rp-alt[data-rp="alt"] { cursor: pointer; }
.rp-alt[data-rp="alt"]:hover, .rp-alt[data-rp="alt"]:focus-visible { background: var(--acc-t); outline: none; }
.rp-alt[data-rp="alt"]:focus-visible { border-color: var(--acc); }
.rp-alt.pv { border: 1.5px dashed var(--acc); background: var(--acc-t); }
.rp-alt.sub { padding-left: 24px; }
.rp-alt-ax { min-height: 20px; }
.rp-arank { font-size: 13px; font-weight: 700; color: var(--ink); }
.rp-fp { display: inline-flex; gap: 4px; }
.rp-fp > span { display: inline-flex; gap: 1px; }
.rp-fp i { width: 5px; height: 14px; border-radius: 1.5px; background: var(--track); }
.rp-fp i.mv { box-shadow: 0 0 0 1.5px var(--warn, #B7791F); }
.rp-atrack { position: relative; height: 12px; border-radius: 4px; background: var(--track); }
.rp-atrack > i { position: absolute; right: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--loss); opacity: .85; }
.rp-atrack > i.best { background: var(--acc-l); opacity: 1; }
.rp-atrack > b { position: absolute; right: -1px; top: -3px; width: 2px; height: 18px; background: var(--ink); border-radius: 1px; }
.rp-gax { height: 16px; background: none; border-bottom: 1px solid var(--axis); border-radius: 0; }
.rp-gax em { position: absolute; bottom: 3px; transform: translateX(50%); font: 500 11px/1 Inter, system-ui, sans-serif; font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-gax em:first-child { transform: none; }
.rp-aval { font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-aval b { font-weight: 700; color: var(--ink); }
.rp-aval em { font-style: normal; font-weight: 600; margin-left: 4px; }
.rp-aact { display: flex; justify-content: flex-end; }
.rp-btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.rp-alt-try { opacity: 0; transition: opacity .12s; }
.rp-alt:hover .rp-alt-try, .rp-alt:focus-visible .rp-alt-try { opacity: 1; }
.rp-same { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px 56px; height: 24px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--acc-tx); font: 500 12px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.rp-same:hover { background: var(--acc-t); }
.rp-acap { margin: 12px 0 0; font-size: 12px; line-height: 16px; color: var(--muted); }
.rp-zero { color: var(--muted); font-style: normal; }
.rp-posm { color: var(--acc-tx); font-style: normal; }

/* ---------- RP-c6 What the change costs (session 3): zoomed bridge ---------- */
.rp-wfs { display: grid; gap: 4px; }
.rp-wf { display: grid; grid-template-columns: 248px minmax(160px, 1fr) 120px; align-items: center; gap: 16px; min-height: 36px; }
.rp-wf-ax { min-height: 20px; }
.rp-wl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp-wl b { font-size: 13px; font-weight: 600; color: var(--ink); }
.rp-wl small { font-size: 12px; line-height: 16px; color: var(--muted); }
.rp-wf.t .rp-wl b { font-weight: 700; }
.rp-wtrack { position: relative; height: 20px; }
.rp-wtrack u { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--grid); }
.rp-wtrack > i { position: absolute; top: 4px; height: 12px; border-radius: 3px; }
.rp-wtrack > i.dn { background: var(--loss); }
.rp-wtrack > i.up { background: var(--acc); }
.rp-wtrack > i.tot { top: 0; height: 20px; width: 3px; border-radius: 1.5px; background: var(--plain-d); }
.rp-wtrack > i.tot.end { background: var(--ink); }
.rp-wf-ax .rp-wtrack { height: 16px; border-bottom: 1px solid var(--axis); }
.rp-wf-ax em { position: absolute; bottom: 3px; transform: translateX(-50%); font: 500 11px/1 Inter, system-ui, sans-serif; font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-wv { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.rp-wv em { font-style: normal; font-weight: 600; }
.rp-wv b { font-weight: 700; color: var(--ink); }
@media (max-width: 1320px) { .rp-alt { grid-template-columns: 32px auto minmax(100px, 1fr) 140px 124px; gap: 12px; } }
.rp-wf-ax em:first-child { transform: none; }
.rp-wf-ax em:last-child { transform: translateX(-100%); }
.rp-wf-ax > .rp-muted { font-size: 12px; text-align: right; }
.rp-wtrack > i.tot { width: 4px; }
.rp-alts.long .rp-alt { min-height: 28px; } .rp-alts.long { gap: 2px; }

/* ---------- RP-c5 ADP timeline (session 3) ---------- */
.rp-tl { position: relative; width: 100%; }
.rp-tlsvg { display: block; overflow: visible; }
.rp-tlsvg text { font-family: Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.rp-tlsvg .tk { font-size: 11px; fill: var(--muted); }
.rp-tlsvg .lb { font-size: 12px; font-weight: 600; }
.rp-tlsvg .mk { font-size: 11px; font-weight: 700; fill: var(--ink); }
.rp-tlsvg .vl { font-size: 11px; font-weight: 600; fill: var(--ink2); }
.rp-tlhit { position: absolute; width: 28px; height: 28px; border: 0; border-radius: 14px; background: transparent; cursor: pointer; transition: box-shadow .12s; }
.rp-tlhit:hover, .rp-tlhit:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 35%, transparent); outline: none; }
.rp-tlsvg .bd { fill: color-mix(in srgb, var(--grid) 55%, transparent); }
/* dark: white on the light dark-mode accent is 2.4:1; ink text gives 8:1 [KB T4 contrast 4.5:1] */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rp-btn.rp-pri { color: #0B1F17; } }
:root[data-theme="dark"] .rp-btn.rp-pri { color: #0B1F17; }

/* ---------- RP-c3 Negotiation ---------- */
.rp-dchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--track); color: var(--ink2); font: 500 12px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-nhero { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 16px; }
.rp-nh1 { display: flex; align-items: baseline; gap: 8px; }
.rp-nlab { font-size: 12px; line-height: 16px; color: var(--muted); }
.rp-nval { font-size: 26px; line-height: 32px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.rp-nunit { font-size: 12px; line-height: 16px; color: var(--muted); }
.rp-nsub { flex: 1 1 320px; margin: 0; font-size: 13px; line-height: 20px; color: var(--ink2); }
.rp-nsub b { font-weight: 600; }
/* RPV H108 (COORDINATOR item 70 (a), D-UT31): live, the facts of the round and the terms of this version are labelled chips */
ul.rp-nchips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; }
.rp-nchip { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 8px; border-radius: 12px; border: 1px solid var(--hair); background: var(--rp-chip); color: var(--ink); font-size: 12px; line-height: 18px; white-space: nowrap; }
.rp-nchip .rp-nclab { color: var(--ink2); }
.rp-nchip.rp-neg { border-color: currentColor; }
.rp-nkey { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 16px; color: var(--ink2); }
.rp-nkey li { display: inline-flex; align-items: center; gap: 6px; }
.rp-nkey i { display: inline-block; width: 4px; height: 14px; border-radius: 2px; }
.rp-nkey li:nth-last-child(2) svg { color: var(--rp-them); }
.rp-nkey li:last-child svg { color: var(--rp-us); }
.rp-nego { position: relative; width: 100%; }
.rp-nsvg { display: block; overflow: visible; }
.rp-nsvg text { font-family: Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.rp-nsvg .tk { font-size: 11px; fill: var(--muted); }
.rp-nsvg .xl { font-size: 12px; font-weight: 600; fill: var(--ink2); }
.rp-nsvg .lb { font-size: 12px; font-weight: 600; }
.rp-nsvg .vl { font-size: 12px; font-weight: 650; fill: var(--ink); paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
.rp-nsvg .dl { font-size: 11px; font-weight: 600; paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
.rp-nhit { position: absolute; width: 32px; height: 32px; border: 0; border-radius: 16px; background: transparent; cursor: pointer; transition: box-shadow .12s; }
.rp-nhit:hover, .rp-nhit:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--acc); }
.rp-nhit.on { box-shadow: 0 0 0 2px var(--acc); }
/* RPV H53b (HOVER-PARITY TT-4346-1, TT-4398-1, TT-4406-1, TT-4258-1): the hover spots of the reference labels, our counter
   diamonds and the plans left bars of the Negotiation chart, and the legend list inside its white card */
.rp-nhit.rp-nhit-bar { border-radius: 4px; }
.rp-nhv { position: absolute; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: default; transition: box-shadow .12s; }
.rp-nhv:hover, .rp-nhv:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--acc); }
.rp-nhv.rp-nhv-ctr { border-radius: 11px; }
.rp-nkey.rp-nkey-on.rp-nkey-tt { flex-direction: column; gap: 4px; margin: 6px 0 0; padding: 0; border: 0; background: none; }

/* RP-c7 What if the prices move, RP-c8 Steady plan (session 5) [KB T3.2 label above control; 8 px grid] */
.rp-kpis.rp-kpis3 { grid-template-columns: 1fr 1fr 1.3fr; }
.rp-wis { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.rp-wirow { border: 1px solid var(--hair); border-radius: 10px; padding: 12px 16px; min-width: 0; }
.rp-wihd { display: flex; align-items: center; gap: 12px; height: 32px; }
.rp-wiix { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.rp-wiix i { width: 12px; height: 3px; border-radius: 2px; }
.rp-wiout { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-wiout.on { color: var(--acc-tx); }
.rp-mch.rp-mall { padding: 0 12px; }
.rp-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; margin: 8px 0 0; height: 24px; background: transparent; cursor: pointer; --a: 50%; --b: 50%; }
.rp-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--track) 0 var(--a), var(--acc) var(--a) var(--b), var(--track) var(--b) 100%); }
.rp-range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--track) 0 var(--a), var(--acc) var(--a) var(--b), var(--track) var(--b) 100%); }
.rp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--card); border: 2px solid var(--acc); box-shadow: var(--sh-thumb); transition: transform .12s; }
.rp-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 2px solid var(--acc); }
.rp-range:hover::-webkit-slider-thumb, .rp-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.rp-range:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.rp-wiax { display: flex; justify-content: space-between; font-size: 11px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-mchs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.rp-mch { height: 28px; min-width: 0; padding: 0 4px; border-radius: 14px; border: 1px solid var(--hair); background: var(--card); color: var(--ink2); font: 500 12px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.rp-mch:hover { border-color: var(--acc); color: var(--acc-tx); }
.rp-mch.on { background: var(--acc-t); border-color: var(--acc); color: var(--acc-tx); font-weight: 600; }
.rp-mch:focus-visible, .rp-sel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rp-st { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 16px; align-items: stretch; }
.rp-sth { border: 1px solid var(--hair); border-radius: 10px; padding: 12px 16px; background: var(--added); display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 96px; }
.rp-sth b { font-size: 26px; line-height: 32px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.rp-sth span { font-size: 13px; line-height: 16px; color: var(--muted); }
.rp-stc { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.rp-stc .rp-acap { margin: 0; }
.rp-stl { font-size: 12px; font-weight: 600; color: var(--ink2); }
.rp-sel { height: 32px; max-width: 240px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--ctl); background: var(--card); color: var(--ink); font: 500 13px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.rp-stline { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--hair); }
.rp-stk { font-size: 13px; font-weight: 600; color: var(--ink); min-width: 96px; }
.rp-stv { display: inline-flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.rp-stv b { font-size: 20px; line-height: 24px; font-weight: 600; color: var(--ink); }
.rp-stv em { font-style: normal; font-size: 13px; font-weight: 600; }
.rp-stline .rp-btn { margin-left: auto; }
@media (max-width: 1100px) { .rp-wis, .rp-st { grid-template-columns: 1fr; } }

.rp-kpis3 .rp-ksub em { font-style: normal; font-weight: 600; }
.rp-wihd .rp-mall { margin-left: 4px; }
.rp-stv .rp-muted { font-size: 12px; }
.rp-wihd { flex-wrap: wrap; height: auto; min-height: 32px; row-gap: 8px; }
.rp-wihd > * { white-space: nowrap; }
.rp-wihd .rp-btn.sm { padding: 0 8px; }
.rp-wift { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }

/* RP-c4 Our counter: their last ask (top row) against our plan (bottom row), one value scale below [KB T6.11 direct labels] */
.rp-ccap { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: 13px; line-height: 20px; color: var(--ink); }
.rp-ccap .rp-ic { flex: none; }
.rp-cfrom { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--rp-them-f); color: var(--rp-them); font-size: 12px; font-weight: 600; }
.rp-cnone { color: var(--muted); }
.rp-ckey { margin: 0 0 12px; }
.rp-ckey .rp-ckc { flex: none; }
.rp-cnt { position: relative; width: 100%; }
.rp-csvg .cn { font-size: 11px; font-weight: 700; }
.rp-chit { position: absolute; display: block; border-radius: 4px; }
.rp-chit:hover { box-shadow: inset 0 0 0 1px var(--ink2); }
.rp-cbad { color: var(--loss); font-weight: 500; }
.rp-cbad + .rp-ccap { margin-top: 0; }
.rp-rrw { position: relative; }
.rp-rrw + .rp-rrw { border-top: 1px solid var(--hair2, var(--hair)); }
.rp-rrw .rp-rrowb { padding-right: 88px; }
.rp-rpop .rp-rhd { padding-right: 88px; }
.rp-rtry { position: absolute; right: 16px; top: 4px; }
.rp-asksum { cursor: help; border-radius: 6px; }
.rp-asksum:focus-visible { outline: none; box-shadow: var(--focus); }

/* ---------- RP-02 Cargoes (session 7): Voyages of this ADP, Supply in use ---------- */
/* [KB T6.4] one grid for label, lane and number columns, so rows and the axis align; 8 px rhythm */
.rp-vgrid { display: grid; grid-template-columns: 136px minmax(0, 1fr) 72px 152px; border-top: 1px solid var(--hair); }
.rp-sgrid { grid-template-columns: 232px minmax(0, 1fr) 112px; }
.rp-vrow { display: contents; }
.rp-vrow > div { min-height: 40px; border-bottom: 1px solid var(--hair); display: flex; align-items: center; }
.rp-vlab { gap: 8px; padding: 0 8px 0 0; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; }
.rp-vlab b { font-weight: 600; }
.rp-vsrc { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.rp-sname { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.rp-vk { color: var(--muted); font-size: 12px; }
.rp-vhead > div { min-height: 40px; font-size: 12px; font-weight: 500; color: var(--muted); line-height: 16px; }
.rp-vhead .rp-vnum, .rp-vhead .rp-vsp { justify-content: flex-end; text-align: right; }
.rp-vlane { position: relative; align-self: stretch; overflow: hidden; }
.rp-vlane-ax { overflow: visible; }
.rp-max { position: absolute; inset: 0; }
.rp-max span { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; line-height: 16px; padding-left: 6px; border-left: 1px solid var(--hair); font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-max em { font-style: normal; color: var(--ink2); font-weight: 500; }
.rp-gband { position: absolute; top: 0; bottom: 0; background: var(--track); opacity: .55; }
.rp-vnum { justify-content: flex-end; padding: 0 8px; font-size: 13px; color: var(--ink); }
.rp-num { font-variant-numeric: tabular-nums; }
.rp-vsp { justify-content: flex-end; gap: 8px; padding-left: 8px; font-size: 13px; }
.rp-vsp b { min-width: 36px; text-align: right; font-weight: 600; }
.rp-vbar { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.rp-vbar > i { display: block; height: 100%; border-radius: 3px; background: var(--acc); }
.rp-vseg { position: absolute; top: 50%; height: 10px; margin-top: -5px; border-radius: 2px; transition: filter .12s; }
.rp-vseg:hover { filter: brightness(1.12); }
.rp-vseg.k-load { background: var(--ink); height: 14px; margin-top: -7px; border-radius: 2px; min-width: 3px; }
.rp-vseg.k-dis { background: var(--ink); height: 14px; margin-top: -7px; min-width: 3px; }
.rp-vseg.k-wait { background: var(--muted); height: 2px; margin-top: -1px; opacity: .6; }
.rp-vseg.k-bal { background: transparent; border: 1.5px dashed var(--muted); height: 8px; margin-top: -4px; box-sizing: border-box; }
.rp-vwin { position: absolute; top: 4px; bottom: 4px; background: color-mix(in srgb, var(--acc) 14%, transparent); border-left: 1px dashed var(--acc); border-right: 1px dashed var(--acc); }
.rp-vhist > div { min-height: 56px; }
.rp-vlane-h svg.rp-vhs { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 40px; }
.rp-vlane-h svg.rp-vhs path { fill: color-mix(in srgb, var(--muted) 45%, transparent); }
.rp-vhist .rp-vlab { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.rp-vhist .rp-vlab b { font-size: 13px; }
.rp-vpk { position: absolute; top: 2px; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rp-vkey { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.rp-vkey > span { display: inline-flex; align-items: center; gap: 6px; }
.rp-vsw { display: inline-block; width: 16px; height: 8px; border-radius: 2px; }
.rp-vsw.k-load, .rp-vsw.k-dis { background: var(--ink); width: 4px; height: 12px; }
.rp-vsw.k-lad { background: var(--rp-hh-0); }
.rp-vsw.k-bal { border: 1.5px dashed var(--muted); box-sizing: border-box; }
.rp-vsw.k-win { background: color-mix(in srgb, var(--acc) 14%, transparent); border-left: 1px dashed var(--acc); border-right: 1px dashed var(--acc); height: 12px; }
/* supply lanes: numbered squares for used liftings, dashed outline for free ones [QR 22 shape plus text] */
.rp-slift { position: absolute; top: 50%; width: 20px; height: 22px; margin: -11px 0 0 -10px; border-radius: 5px; border: 1.5px dashed var(--muted); box-sizing: border-box; display: flex; align-items: center; justify-content: center; font: 600 12px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--rp-cnum, #fff); background: transparent; }
.rp-slift.on { border: 0; }
.rp-vh2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rp-sflex { position: absolute; left: 0; right: 0; top: 50%; height: 24px; margin-top: -12px; border: 1.5px dashed; border-radius: 6px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; opacity: .9; pointer-events: auto; }
.rp-sflex span { font-style: normal; font-size: 12px; color: var(--muted); background: var(--card); padding: 0 8px; }
.rp-sline { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dotted; }
.rp-sused { gap: 8px; }
.rp-sused b { font-weight: 600; }
.rp-sof { font-size: 12px; color: var(--muted); }
.rp-sbar { width: 40px; }
.rp-skey { position: static; margin: 0; width: 16px; height: 18px; font-size: 11px; background: var(--rp-hh-0-chip); color: var(--rp-hh-0-tx); }
.rp-skey:not(.on) { background: transparent; }
.rp-skey2 { position: static; display: inline-block; width: 24px; height: 12px; margin: 0; border-color: var(--muted); }
.rp-skey3 { position: static; display: inline-block; width: 24px; border-color: var(--muted); }
@media (max-width: 1100px) { .rp-vgrid { grid-template-columns: 112px minmax(0, 1fr) 64px 128px; } .rp-sgrid { grid-template-columns: 168px minmax(0, 1fr) 96px; } .rp-sname { display: none; } }
/* RP-c12 Options for Cn: one column per window, bars hang from the zero line [KB T6.4 nice ticks, direct labels] */
.rp-olead { margin: 0 0 16px; font-size: 13px; color: var(--ink2); line-height: 20px; }
.rp-olead b { color: var(--ink); font-weight: 600; }
/* RPV H155 (TB-1 RP-02 options, item 70 (a)): live, the lead facts are two kit chips; they wrap on a narrow card */
.rp-olead > .rp-olc { margin: 0 6px 6px 0; vertical-align: middle; white-space: normal; max-width: 100%; }
.rp-ochart { position: relative; padding: 24px 0 0; margin: 0 0 16px; }
.rp-ounit { position: absolute; top: 0; right: 0; font-size: 12px; color: var(--muted); }
.rp-oplot { position: relative; display: grid; grid-template-columns: 48px repeat(var(--on, 36), minmax(0, 1fr)); column-gap: 4px; height: calc(var(--oh) + 24px); }
.rp-ogl { position: absolute; left: 48px; right: 0; border-top: 1px solid var(--hair); }
.rp-otk { position: absolute; left: 0; width: 40px; text-align: right; transform: translateY(-50%); font-size: 12px; color: var(--muted); }
.rp-ocol { position: relative; grid-row: 1; height: calc(var(--oh) + 24px); padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 4px; }
.rp-ocol:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.rp-ocol:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.rp-obar { position: absolute; top: 0; left: 1px; right: 1px; border-radius: 0 0 3px 3px; transition: filter .12s; }
.rp-ocol:hover .rp-obar { filter: brightness(1.1); }
.rp-ohatch { position: absolute; top: 0; left: 1px; right: 1px; height: 16px; border-radius: 0 0 3px 3px; background: repeating-linear-gradient(135deg, var(--rp-hatch-a) 0 4px, var(--rp-hatch-b) 4px 8px); }
.rp-ocol.no { cursor: default; }
.rp-ocol.cur { box-shadow: inset 0 0 0 1.5px var(--acc); background: color-mix(in srgb, var(--acc) 8%, transparent); }
.rp-ocol.sel:not(.cur) { box-shadow: inset 0 0 0 1.5px var(--ink); }
.rp-olab { position: absolute; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); pointer-events: none; background: var(--card); padding: 0 4px; border-radius: 4px; z-index: 1; }
.rp-olab.rp-neg { color: var(--loss); }
.rp-onote { position: relative; grid-row: 1; align-self: start; margin-top: 24px; justify-self: center; font-size: 12px; color: var(--muted); background: var(--card); padding: 0 6px; pointer-events: none; z-index: 1; }
/* RPV H91 (REQ INT to RPV 12 RP-02 390): the value labels and the no plan notes of Options for Cn are picked per plot
   width step (b-cargoes.js OLB): an element hidden at a step names it in data-olh; a note stays on one line */
.rp-ochart { container: rpo / inline-size; }
.rp-onote { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@container rpo (max-width: 299.98px) { .rp-olab[data-olh~="b0"], .rp-onote[data-olh~="b0"] { display: none; } }
@container rpo (min-width: 300px) and (max-width: 359.98px) { .rp-olab[data-olh~="b300"], .rp-onote[data-olh~="b300"] { display: none; } }
@container rpo (min-width: 360px) and (max-width: 439.98px) { .rp-olab[data-olh~="b360"], .rp-onote[data-olh~="b360"] { display: none; } }
@container rpo (min-width: 440px) and (max-width: 519.98px) { .rp-olab[data-olh~="b440"], .rp-onote[data-olh~="b440"] { display: none; } }
@container rpo (min-width: 520px) and (max-width: 599.98px) { .rp-olab[data-olh~="b520"], .rp-onote[data-olh~="b520"] { display: none; } }
@container rpo (min-width: 600px) and (max-width: 699.98px) { .rp-olab[data-olh~="b600"], .rp-onote[data-olh~="b600"] { display: none; } }
@container rpo (min-width: 700px) and (max-width: 819.98px) { .rp-olab[data-olh~="b700"], .rp-onote[data-olh~="b700"] { display: none; } }
@container rpo (min-width: 820px) and (max-width: 959.98px) { .rp-olab[data-olh~="b820"], .rp-onote[data-olh~="b820"] { display: none; } }
@container rpo (min-width: 960px) and (max-width: 1099.98px) { .rp-olab[data-olh~="b960"], .rp-onote[data-olh~="b960"] { display: none; } }
@container rpo (min-width: 1100px) { .rp-olab[data-olh~="b1100"], .rp-onote[data-olh~="b1100"] { display: none; } }
.rp-omon { display: grid; grid-template-columns: 48px repeat(var(--on, 36), minmax(0, 1fr)); column-gap: 4px; margin-top: 4px; }
.rp-omon span { font-size: 12px; color: var(--muted); padding-left: 2px; border-left: 1px solid var(--hair); white-space: nowrap; }
.rp-otab { display: grid; grid-template-columns: minmax(0, 1fr) 168px 112px 168px 112px; border-top: 1px solid var(--hair); }
.rp-orow { display: contents; }
.rp-orow > div { min-height: 40px; border-bottom: 1px solid var(--hair); display: flex; align-items: center; font-size: 13px; color: var(--ink); }
.rp-ohead > div { font-size: 12px; font-weight: 500; color: var(--muted); line-height: 16px; min-height: 40px; }
.rp-orow.cur > div { background: color-mix(in srgb, var(--acc) 6%, transparent); }
.rp-olab2 { gap: 8px; padding-left: 8px; white-space: nowrap; overflow: hidden; }
.rp-oli { font-size: 12px; color: var(--muted); }
.rp-ox { height: 20px; padding: 0 6px; font-size: 12px; }
.rp-osp { justify-content: flex-end; gap: 8px; padding-right: 8px; text-align: right; }
.rp-osp b { min-width: 40px; text-align: right; font-weight: 600; }
.rp-od { margin-left: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-od.rp-neg { color: var(--loss); }
.rp-oact { justify-content: flex-end; padding-right: 8px; }
.rp-ochk { font-size: 12px; color: var(--muted); }
@media (max-width: 1100px) { .rp-otab { grid-template-columns: minmax(0, 1fr) 136px 96px 152px 104px; } }
/* RPV H55 (REQ LIVE to ALL 4, JUDGE R1 RP-02 390): in its .tscroll the Supply in grid keeps 720 px, so its first column holds
   the supply code and the window head on one or two lines; a narrower card scrolls it with LIVE's cue */
.tscroll > .rp-otab { min-width: 720px; }
/* RPV H66 (item 64 (3) lane Gantt, 4875 prototype cg.js laneG): live, the voyage lane column of Supply in <window> */
.rp-otab.rp-olanes { grid-template-columns: minmax(0, 1fr) 268px 168px 112px 168px 112px; }
.tscroll > .rp-otab.rp-olanes { min-width: 988px; }
.rp-orow > .rp-olane { gap: 6px; padding: 0 4px; }
.rp-olsvg { flex: none; display: block; }
.rp-olbd { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.rp-oldefs { position: absolute; width: 0; height: 0; overflow: hidden; }
.rp-oldv { fill: var(--acc-t); }
.rp-olwl { fill: var(--hair); }
.rp-olload { stroke: var(--ink); stroke-width: 0.8; }
.rp-oldis { fill: var(--ink); }
.rp-ollim { stroke: var(--ink); stroke-width: 1.4; }
.rp-ollate { stroke: var(--loss); stroke-width: 2.2; stroke-linecap: round; fill: none; }
.rp-olpin { stroke: var(--card); stroke-width: 2; }
.rp-pw0 { fill: var(--card); } .rp-pw1 { stroke: var(--muted); stroke-width: 2.2; }
.rp-pl0 { fill: color-mix(in srgb, var(--loss) 16%, var(--card)); } .rp-pl1 { stroke: var(--loss); stroke-width: 2.2; }
.rp-pc0 { fill: var(--card); } .rp-pc1 { stroke: var(--ink); stroke-width: 2; }
.rp-orow.rp-oblk > div { color: var(--muted); }
.rp-omiss { white-space: nowrap; font-size: 12.5px; } .rp-omiss b { font-weight: 600; }
.rp-ofoot { display: flex; justify-content: flex-end; padding: 8px 0 0; }
.rp-cargoes .rp-neg { color: var(--loss); }
.rp-vnos { position: absolute; top: 50%; transform: translateY(-50%); margin-left: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.rp-cargoes .rp-posm, .rp-od.rp-posm { color: var(--acc-tx); }
.rp-obar.up { border-radius: 3px 3px 0 0; }
.rp-cupd .rp-cargoes .rp-body, .rp-cupd .rp-cargoes .rp-vgrid, .rp-cupd .rp-cargoes .rp-ochart, .rp-cupd .rp-cargoes .rp-otab { opacity: .55; transition: opacity .2s; }

/* RP-03 Prices (session 8) */
.rp-prices { display: grid; gap: 16px; }
/* RPV H140 (REQ INT to RPV 23 RP-07p (4), prototype px.css px-grid2): live, Formula prices and Charter rate side by side;
   one column under 900 px */
.rp-pr-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .rp-pr-grid2 { grid-template-columns: minmax(0, 1fr); } }
.rp-pr-kpis { margin-bottom: 16px; }
.rp-pr-key { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-right: 16px; }
.rp-pr-sw { width: 12px; height: 12px; border-radius: 2px; background: var(--rp-plans, var(--muted)); opacity: .45; display: inline-block; }
.rp-pr-sw.on { background: var(--acc); opacity: 1; }
.rp-pr-chart { overflow-x: auto; }
.rp-pr-svg .rp-pr-bar { fill: var(--rp-plans, var(--muted)); opacity: .45; transition: opacity .12s; }
.rp-pr-svg .rp-pr-bar.on { fill: var(--acc); opacity: 1; }
.rp-pr-svg g:hover .rp-pr-bar { opacity: .8; }
/* RPV H57 (COORDINATOR item 64 (3)): live charter rate step line of the 4875 prototype, a dot on each loading month */
.rp-pr-sw.rp-pr-swd { border-radius: 50%; }
.rp-pr-svg .rp-pr-dot { fill: var(--acc); stroke: var(--card); stroke-width: 1.5; }
.rp-pr-svg g:hover .rp-pr-hit { fill: var(--grid); fill-opacity: .4; }
.rp-pr-svg .vl { font-size: 11px; fill: var(--muted); }
.rp-pr-svg .vl.on { fill: var(--ink); font-weight: 600; }
.rp-pr-svg .cn { font-size: 11px; font-weight: 600; fill: var(--rp-cnum, #fff); }
.rp-pr-svg .yr { font-weight: 600; }
.rp-pr-tw { overflow-x: auto; }
.rp-pr-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.rp-pr-tab th, .rp-pr-tab td { padding: 8px 12px; border-bottom: 1px solid var(--hair); text-align: left; white-space: nowrap; }
.rp-pr-tab thead th { font-size: 12px; font-weight: 600; color: var(--muted); }
.rp-pr-tab .r { text-align: right; font-variant-numeric: tabular-nums; }
.rp-pr-tab .b { font-weight: 600; }
.rp-pr-tab tbody tr:hover { background: var(--surface-2); }
.rp-pr-tab tfoot th, .rp-pr-tab tfoot td { border-bottom: 0; font-weight: 600; }
.rp-pr-m { font-size: 12px; color: var(--muted); }
/* phone: wide SVG charts scroll inside their card, never the page (SH request 220, LANES 1.5) */
[data-rp-chart] { overflow-x: auto; max-width: 100%; }
/* phone: Next best rows reflow; the fingerprint strip hides (rank, gap bar and value stay), the list scrolls inside
   the card as a last guard, never the page (SH request 220, LANES 1.5) [KB T7.9] */
@media (max-width: 720px) {
  .rp-alts { overflow-x: auto; }
  .rp-alt { grid-template-columns: 28px minmax(72px, 1fr) 108px 96px; gap: 8px; }
  .rp-alt > :nth-child(2) { display: none; }
}
/* phone: the voyage lanes and the options table keep a readable scale and scroll inside their card, never the page (LANES 1.5) */
@media (max-width: 720px) {
  .rp-cargoes [data-card="voyages"] .rp-vgrid { min-width: 560px; }
  .rp-cargoes :is(.xf-body, .rp-body) { overflow-x: auto; }
}
.rp-cupd .rp-prices .rp-kpis, .rp-cupd .rp-prices .rp-pr-chart, .rp-cupd .rp-prices .rp-pr-tw { opacity: .55; transition: opacity .2s; }
/* phone: the charter hero takes the whole row, so its range never runs into the next tile [KB T2.4] */
@media (max-width: 720px) { .rp-pr-kpis .rp-hero { grid-column: 1 / -1; } }

/* ---------- RP-05, RP-06 (d1, d2) Results and Prices: assembler session 2 (views/rp/d-results.js) ---------- */
/* [KB T5 grid] 8 px rhythm: cards 16 apart, rows 40 high; [KB T5.3] numbers right aligned and tabular */
.rp-d { display: flex; flex-direction: column; gap: 16px; }
.rp-d > .card.xf, .rp-d-two > .card.xf, .rp-d-grid > .card.xf { margin: 0; }
.rp-d-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .rp-d-grid { grid-template-columns: minmax(0, 1fr); } }
.rp-d-kpis { margin-bottom: 0; }
.rp-d-pos { color: var(--acc-tx); } .rp-d-neg { color: var(--loss); }
.rp-d-calc { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--muted); font-size: var(--fs-chip); font-variant-numeric: tabular-nums; }
.rp-d-calc svg { flex: none; }
.rp-d-who { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rp-d-arrow { display: inline-flex; color: var(--muted); }
.rp-d-k { color: var(--muted); font-size: var(--fs-chip); }
.rp-d-note { margin: 12px 0 0; color: var(--muted); font-size: var(--fs-chip); line-height: 1.5; max-width: 72ch; }
/* RPV H71 (REQ ENM to RPV 22:47): the (d2) Cargo plan open window drop targets of d-results.js openStrip */
/* RPV H71b: RP-02 Voyages With options rows sit indented under their plan cargo, the option voyage lighter than the plan */
.rp-vopt .rp-vlab { padding-left: 16px; gap: 6px; }
.rp-vopt .rp-vseg.k-lad { opacity: .6; }
.rp-d-ow { display: inline-block; margin: 6px 8px 0 0; padding: 4px 10px; border: 1px solid var(--hair); border-radius: 6px; vertical-align: top; }
table.rp-d-t { width: 100%; }
table.rp-d-t th, table.rp-d-t td { height: 40px; vertical-align: middle; }
table.rp-d-t tbody th { font-weight: 650; white-space: nowrap; }
table.rp-d-t td.b, table.rp-d-t th.b { font-weight: 650; }
table.rp-d-t td.pos { color: var(--acc-tx); } table.rp-d-t td.neg { color: var(--loss); }
table.rp-d-t td.r { text-align: right; white-space: nowrap; }
table.rp-d-t tfoot th, table.rp-d-t tfoot td { border-top: 1px solid var(--hair); font-weight: 700; }
.rp-d-row { cursor: default; transition: background-color .12s ease; }
.rp-d-row:hover, .rp-d-row:focus-visible { background: var(--added); outline: none; }
.rp-d-row:focus-visible th { box-shadow: inset 2px 0 0 var(--acc); }
.rp-d-row.loss th { color: var(--loss); }
.rp-d-m { color: var(--muted); font-weight: 400; }
.rp-d-slot { margin-left: 8px; color: var(--muted); font-size: var(--fs-chip); white-space: nowrap; }
.rp-d-gap { display: inline-flex; align-items: center; gap: 4px; color: var(--loss); font-weight: 600; font-size: var(--fs-chip); white-space: nowrap; }
.rp-d-f { color: var(--ink2); white-space: nowrap; }
th.rp-d-mcol, td.rp-d-mcol { min-width: 200px; }
td.rp-d-mcol { display: table-cell; }
.rp-d-mv { display: inline-block; width: 64px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; margin-right: 12px; vertical-align: middle; }
.rp-d-mv.pos { color: var(--acc-tx); } .rp-d-mv.neg { color: var(--loss); }
.rp-d-bar { position: relative; display: inline-block; vertical-align: middle; width: calc(100% - 80px); min-width: 104px; height: 12px; }
.rp-d-bar b { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--axis); }
.rp-d-bar i { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.rp-d-bar i.pos { background: var(--acc); } .rp-d-bar i.neg { background: var(--loss); }
.rp-d-hb { width: 100%; min-height: 96px; }
.rp-d-svg { display: block; }
.rp-d-svg text { font-size: 12px; fill: var(--ink2); font-variant-numeric: tabular-nums; pointer-events: none; }
.rp-d-svg text.tk { fill: var(--muted); font-size: 11px; }
.rp-d-svg text.vl { font-weight: 650; fill: var(--ink); }
.rp-d-svg text.vl.in { fill: var(--on-acc); }
.rp-d-svg rect.pos { fill: var(--plain); } .rp-d-svg rect.neg { fill: var(--loss-b); }
.rp-d-svg .hi rect.pos { fill: var(--acc); } .rp-d-svg .hi text.lb { font-weight: 650; fill: var(--ink); }
.rp-d-svg .hi rect.neg { fill: var(--loss); }
.rp-d-hbg rect { transition: opacity .12s ease; } .rp-d-svg:hover .rp-d-hbg rect { opacity: .55; } .rp-d-svg .rp-d-hbg:hover rect { opacity: 1; }
.rp-d-fps { display: inline-flex; gap: 4px; }
.rp-d-fp { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 24px; padding: 0 4px; border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; border: 1px solid var(--hair); background: var(--surface); color: var(--ink2); }
.rp-d-fp.fl1, .rp-d-fp.ds1 { background: var(--acc-t); border-color: var(--acc-l); color: var(--acc-tx); }
.rp-d-fp.fx1, .rp-d-fp.dx1 { background: var(--info-t); border-color: var(--info-b); color: var(--info); }
.rp-d-fp.gap { background: var(--loss-l); border-color: var(--loss-b); color: var(--loss); }
table.rp-d-nb tr.on { background: var(--acc-t); }
table.rp-d-nb tr.on th { box-shadow: inset 3px 0 0 var(--acc); }
table.rp-d-t tfoot tr > * { border-top: 1px solid var(--hair) !important; }
.rp-d-svg text.vl.in { fill: var(--ink); }
table.rp-d-t td, table.rp-d-t th { white-space: nowrap; }

/* ---------- assembler session 3 (D1): RP-07, Pacific H2 2027 and Iberia Winter 27/28 (views/rp/b-worlds.js) ---------- */
/* [KB T5.3] two build-up columns side by side, one column at phone width; 8 px grid */
.rp-bw-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 760px) { .rp-bw-cols { grid-template-columns: minmax(0, 1fr); } }
.rp-bw-bu tr.tot td { border-top: 1px solid var(--hair); font-weight: 600; }
.rp-d-nb .rp-d-fps { flex-wrap: wrap; max-width: 520px; }
.rp-d-nb .rp-d-fp { padding: 0 8px; white-space: nowrap; }
.rp-d-nb .rp-d-fps { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px; }
@media (max-width: 760px) { .rp-d-nb .rp-d-fps { grid-template-columns: max-content; } }
/* the column heads of Next best wrap, so the plan cells and the action fit the half-width card [KB T5.3] */
table.rp-d-nb thead th { white-space: normal; vertical-align: bottom; }
table.rp-d-nb .rp-d-fp { padding: 0 6px; }
/* RP-07: the two lower cards stack under 1600 px, so Next best keeps its plan cells and action in view; heads of the cargo table wrap [KB T5 layout] */
@media (max-width: 1599px) { .rp-bw .rp-d-grid { grid-template-columns: minmax(0, 1fr); } }
.rp-bw table.rp-d-t thead th { white-space: normal; vertical-align: bottom; }
.rp-bw .rp-d-bar { min-width: 80px; }
.rp-bw .rp-d-bar { min-width: 72px; }
.rp-bw table.rp-d-t td, .rp-bw table.rp-d-t th { padding-left: 8px; padding-right: 8px; }

/* fixer S1 (F6): a card key line sits above its chart, under the question */
.rp-acap.rp-acap-top { margin: 0 0 12px; }
/* fixer S1 (F26): rank 1 has no loss, so it shows only the zero marker (the b element), no bar */
.rp-atrack i.best.zero { display: none; }

/* fixer S2 (COMPLETE 2, 3; F1): RP-p1 Price curves, RP-p2 Prices by window, RP-p4 Sale and cost per window,
   RP-p7 Formula prices. 4 px grid, one type scale (11 px ticks, 12 px labels, 13 px table), tabular figures */
.rp-p2-kpis { margin-bottom: 16px; }
.rp-p2-chart { min-width: 0; }
.rp-p2-brent { margin-top: 8px; }
.rp-p2-ln { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.rp-p2-ln.dash { background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 7px); }
.rp-p2-band { width: 16px; height: 12px; border-radius: 2px; display: inline-block; background: var(--band-year); border: 1px solid var(--hair); }
.rp-p2-hov line { stroke: var(--axis); stroke-width: 1; opacity: 0; transition: opacity var(--t-fast); }
.rp-p2-hov:hover line { opacity: 1; }
.rp-p2-svg .hit { fill: transparent; cursor: pointer; transition: fill var(--t-fast); }
.rp-p2-mon:hover .hit, .rp-p2-mon:focus-visible .hit { fill: var(--band); }
.rp-p2-mon.on .hit { fill: var(--acc-t); }
.rp-p2-mon:focus { outline: none; }
.rp-p2-svg .mstep { stroke-width: 2; }
.rp-p2-svg .mstep.dash { stroke-dasharray: 4 3; stroke-width: 1.5; }
/* RPV H59 (item 64 (3), prototype cardPwin): month header row, ADP year shading, the cargo rings of the plan */
.rp-p2-svg .alt { fill: var(--band-year); }
.rp-p2-svg .mhv { font-size: 11px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; }
.rp-p2-svg .mo { fill: var(--muted); font-weight: 400; }
.rp-p2-svg .rp-p2-rg { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.rp-p2-svg .rp-p2-cn { font-size: 10.5px; font-weight: 650; fill: var(--ink); paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
.rp-p2-split { margin-top: 16px; border-top: 1px solid var(--hair); padding-top: 12px; }
.rp-p2-sh { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 8px; }
.rp-p2-sh b { font-size: 14px; font-weight: 600; color: var(--ink); }
.rp-p2-sh > span { font-size: 12px; color: var(--muted); }
.rp-p4-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 1100px) { .rp-p4-grid { grid-template-columns: minmax(0, 1fr); } }
/* RPV H151 (JUDGE round 28 For the lanes 1, RP-07p at 1280 with the dock): live, the RP-p4 grid sits in a size container,
   so under a 700 px card body the build up panel goes under the chart (the view width alone missed the dock) */
.rp-p4-cq { container-type: inline-size; container-name: rpp4; }
@container rpp4 (max-width: 699.98px) { .rp-p4-grid { grid-template-columns: minmax(0, 1fr); } }
.rp-p4-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--src-2); display: inline-block; }
.rp-p4-ring { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); display: inline-block; box-sizing: border-box; }
.rp-p4-sw { width: 12px; height: 12px; border-radius: 2px; background: var(--acc); display: inline-block; }
.rp-p4-svg .rp-p4-rg { fill: none; stroke: var(--ink); stroke-width: 2; }
/* RPV H65 (item 64 (3), COMPARE-s49 row 19): the spread band of each window, sale to the best delivered cost (live) */
.rp-p4-svg .rp-p4-fill { fill: var(--acc); opacity: .2; }
.rp-p4-svg .rp-p4-fillneg { fill: var(--loss); opacity: .2; }
.rp-p4-sw.fill { opacity: .35; }
.rp-p4-svg .rp-p4-cn { font-size: 11px; font-weight: 650; fill: var(--ink); paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
.rp-p4-hit rect { fill: transparent; cursor: pointer; transition: fill var(--t-fast); }
.rp-p4-hit:hover rect, .rp-p4-hit:focus-visible rect { fill: rgba(var(--ramp-rgb), .08); }
.rp-p4-hit.on rect { fill: rgba(var(--ramp-rgb), .12); }
.rp-p4-hit:focus { outline: none; }
/* RPV H154 (REQ INT to RPV 30, prototype portfolio-prices-spread-vp.png): the Spread view, one stem per source, the picked
   window framed, a numbered disc on the stem of each plan cargo, a focusable hit per stem with its card */
.rp-p4-svg .rp-p4-stem { stroke-linecap: butt; pointer-events: none; }
.rp-p4-svg .rp-p4-fr { fill: none; stroke: var(--acc); stroke-width: 1.5; pointer-events: none; }
.rp-p4-svg .rp-p4-dc { pointer-events: none; }
.rp-p4-svg .rp-p4-dk { fill: var(--ink); stroke: var(--card); stroke-width: 1.5; }
.rp-p4-svg .rp-p4-dn { font-size: 10px; font-weight: 650; fill: var(--card); }
.rp-p4-sth rect { fill: transparent; cursor: pointer; transition: fill var(--t-fast); }
.rp-p4-sth:hover rect, .rp-p4-sth:focus-visible rect { fill: rgba(var(--ramp-rgb), .16); }
.rp-p4-sth:focus { outline: none; }
.rp-pr-key .rp-p4-dk { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); display: inline-block; }
.rp-p4-bu { border: 1px solid var(--hair); border-radius: var(--r-md); padding: 12px 16px; background: var(--surface-2); font-size: 13px; }
.rp-p4-bh { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.rp-p4-bh b { font-size: 13px; font-weight: 600; color: var(--ink); }
.rp-p4-bh > span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.rp-p4-bs { padding: 8px 0; border-top: 1px solid var(--hair); }
.rp-p4-bt { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.rp-p4-r { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; color: var(--ink2); line-height: 20px; }
.rp-p4-r span { min-width: 0; }
.rp-p4-r b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-p4-r.eq { color: var(--ink); }
.rp-p4-r.eq b { font-weight: 600; }
.rp-p4-r.tot { border-top: 1px solid var(--hair); padding-top: 8px; font-size: 14px; color: var(--ink); }
.rp-p4-r.tot b { font-weight: 700; color: var(--acc-tx); }
.rp-p4-r.tot b.neg { color: var(--loss); }
/* RPV H60 (item 64 (3), prototype px.js waterfall): live, one bar per build-up row on one scale; label and number keep a
   fixed width so every bar starts at the same x */
.rp-p4-r:has(> .rp-p4-wb) > span:first-child { flex: 0 0 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-p4-r:has(> .rp-p4-wb) > b { flex: 0 0 64px; text-align: right; }
.rp-p4-wb { flex: 1 1 auto; position: relative; height: 10px; align-self: center; border-radius: 2px; min-width: 60px; }
.rp-p4-wb i { position: absolute; top: 0; height: 100%; border-radius: 2px; }
.rp-p4-wb i.sale { background: var(--acc); } .rp-p4-wb i.sale.add, .rp-p4-wb i.sale.mul { background: var(--acc-l); }
.rp-p4-wb i.cost { background: var(--ink2); } .rp-p4-wb i.cost.add, .rp-p4-wb i.cost.mul { background: var(--muted); opacity: .55; }
.rp-p4-wb i.spread { background: var(--acc-d); } .rp-p4-wb i.spreadneg { background: var(--loss); }
.rp-cupd .rp-prices .rp-p2-chart, .rp-cupd .rp-prices .rp-p4-bu { opacity: .55; transition: opacity .2s; }
.rp-p2-u { font-size: 12px; font-weight: 500; color: var(--muted); }
/* RPV H79 (REQ INT to RPV 9, JUDGE round 8 RP-03 cross finding 4): at 390 px the unit of a Price curves tile ran past the
   tile ("10.67 USD/MMBtu" on one nowrap flex row); the value row may wrap, so the unit goes under the number when the tile
   is narrow and stays beside it when it fits */
.rp-p2-kpis .rp-kval { flex-wrap: wrap; column-gap: 8px; row-gap: 0; }

/* fixer S2 (COMPLETE 1): RP-c11 Routes of this ADP */
.rp-rt-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rp-rt-pill { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 12px; border: 1px solid var(--hair); border-radius: 999px; background: var(--surface); font-size: 12.5px; color: var(--muted); }
.rp-rt-pill b { color: var(--ink); font-weight: 600; }
.rp-rt-pill .rp-num { color: var(--ink2); font-weight: 600; }
.rp-rt-c { font-weight: 600; color: var(--acc-tx); }
.rp-rt-map { border: 1px solid var(--hair); border-radius: var(--r-md); overflow: hidden; background: var(--sea); }
.rp-rt-svg { display: block; width: 100%; height: auto; }
.rp-rt-svg .sea { fill: var(--sea); }
.rp-rt-svg .grat { stroke: var(--grat); stroke-width: .6; }
.rp-rt-svg .land { fill: var(--land); stroke: var(--coast); stroke-width: .5; }
.rp-rt-svg .rt { fill: none; stroke: var(--acc); stroke-width: calc(2px * var(--k, 1)); stroke-linecap: round; stroke-linejoin: round; }
.rp-rt-svg .rt:hover { stroke-width: calc(3.5px * var(--k, 1)); }
.rp-rt-svg .pt { stroke: var(--card); stroke-width: 1.5; }
.rp-rt-svg .pt.l { fill: var(--src-2); }
.rp-rt-svg .pt.d { fill: var(--ink); }
.rp-rt-svg .pt { r: calc(4px * var(--k, 1)); }
.rp-rt-svg .ship circle { r: calc(6px * var(--k, 1)); }
.rp-rt-svg .pl { font: 600 calc(11px * var(--k, 1)) Inter, system-ui, sans-serif; fill: var(--ink); paint-order: stroke; stroke: var(--sea); stroke-width: 3px; }
.rp-rt-svg .ship circle { fill: var(--surface); stroke: var(--acc); stroke-width: 2; transition: cx .06s linear, cy .06s linear; }
.rp-rt-svg .ship.l circle { fill: var(--acc); }
.rp-rt-svg .ship text { font: 650 calc(11px * var(--k, 1)) Inter, system-ui, sans-serif; fill: var(--ink); paint-order: stroke; stroke: var(--sea); stroke-width: 3px; }
.rp-rt-bar { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.rp-rt-rng { flex: 1 1 240px; accent-color: var(--acc); min-width: 160px; }
.rp-rt-day { font-size: 13px; font-weight: 600; color: var(--ink); min-width: 96px; }
.rp-rt-busy { font-size: 12px; color: var(--muted); }
.rp-rt-ln { width: 16px; height: 3px; border-radius: 2px; background: var(--acc); display: inline-block; }
.rp-rt-sh { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--acc); background: var(--surface); display: inline-block; box-sizing: border-box; }
.rp-rt-sh.l { background: var(--acc); }

/* ---------- fixer S3 (COMPLETE 15): Cargo plan row expand, Costs or Why. 4 px grid, 11 px ticks, tabular figures ---------- */
table.rp-t tbody tr.rp-prow { cursor: pointer; }
table.rp-t tbody tr.rp-prow:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
table.rp-t tbody tr.rp-prow.open { background: var(--added); }
table.rp-t tbody tr.rp-prow.open td { border-bottom-color: transparent; }
.rp-chv { display: inline-flex; color: var(--muted); transition: transform var(--t-fast, .12s); }
.rp-chv svg { transform: none; transition: transform .12s; }
tr.rp-prow.open .rp-chv svg { transform: rotate(90deg); }
table.rp-t tbody tr.rp-pex:hover { background: transparent; }
table.rp-t tr.rp-pex > td { height: auto; padding: 0 12px 16px; white-space: normal; background: var(--added); border-bottom: 1px solid var(--hair); }
.rp-pxg { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; animation: rp-pxin .16s ease-out; }
@keyframes rp-pxin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.rp-pxm, .rp-pxs { background: var(--card); border: 1px solid var(--hair); border-radius: 10px; padding: 12px 16px 16px; min-width: 0; }
.rp-pxh { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.rp-pxh b { font-size: 13px; font-weight: 600; color: var(--ink); }
.rp-pxh.sub { margin-top: 16px; }
.rp-xq { margin: 4px 0 8px; font-size: 12px; line-height: 16px; color: var(--muted); }
.rp-xw { display: grid; grid-template-columns: 184px minmax(80px, 1fr) 56px; align-items: center; gap: 12px; min-height: 36px; }
.rp-xw.ax { min-height: 20px; }
.rp-xl { display: flex; flex-direction: column; min-width: 0; }
.rp-xl b { font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-xl small { font-size: 11px; line-height: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-xw.tot { border-top: 1px solid var(--hair); margin-top: 4px; padding-top: 4px; }
.rp-xw.tot .rp-xl b { font-weight: 700; }
.rp-xtr { position: relative; height: 16px; }
.rp-xw.ax .rp-xtr { border-bottom: 1px solid var(--axis); }
.rp-xtr u { position: absolute; top: -10px; bottom: -10px; width: 0; border-left: 1px solid var(--grid); text-decoration: none; }
.rp-xtr em { position: absolute; bottom: 3px; transform: translateX(-50%); font: 500 11px/1 Inter, system-ui, sans-serif; font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-xtr i { position: absolute; top: 2px; height: 12px; border-radius: 3px; background: var(--acc); }
.rp-xtr i.neg { background: var(--loss); } .rp-xtr i.zero { background: var(--axis); } .rp-xtr i.sum { background: var(--ink2); }
.rp-xv { text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.rp-xv.neg { color: var(--loss); } .rp-xv.zero { color: var(--muted); }
.rp-xvh { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; }
.rp-xvh b { font-size: 12.5px; font-weight: 600; color: var(--ink); } .rp-xvh span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-xvs { display: flex; height: 28px; border-radius: 6px; overflow: hidden; gap: 2px; }
.rp-xvs > span { display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 2px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; background: var(--track); color: var(--ink2); font-variant-numeric: tabular-nums; }
.rp-xvs .k-laden { background: var(--acc); color: var(--on-acc); }
.rp-xvs .k-ballast { background: color-mix(in srgb, var(--acc) 28%, var(--card)); color: var(--acc-tx); }
.rp-xvs .k-load, .rp-xvs .k-discharge { background: var(--ink2); }
.rp-xc { display: grid; grid-template-columns: 72px minmax(60px, 1fr) 48px; align-items: center; gap: 12px; min-height: 28px; font-size: 12.5px; color: var(--ink); }
.rp-xc b { text-align: right; font-weight: 600; }
.rp-xc.tot { border-top: 1px solid var(--hair); margin-top: 4px; padding-top: 4px; } .rp-xc.tot span:first-child, .rp-xc.tot b { font-weight: 700; }
@media (max-width: 900px) { .rp-pxg { grid-template-columns: minmax(0, 1fr); } .rp-xw { grid-template-columns: 132px minmax(60px, 1fr) 52px; gap: 8px; } }
/* fixer S3 (DESIGN F4): N button on every KPI tile, quiet until hover or focus but always visible */
.rp-klab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rp-kn { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--hair); background: var(--card); color: var(--muted); font: 700 11px/1 Inter, system-ui, sans-serif; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.rp-kn:hover { color: var(--acc-tx); border-color: var(--acc); background: var(--acc-t); }
.rp-kn:focus-visible { outline: 2px solid var(--acc); box-shadow: var(--focus); }
.rp-kn:active { transform: scale(.96); }
/* fixer S3 (COMPLETE 18): matrix Legend */
.rp-rrow .rp-lgb { margin-left: auto; }
.rp-lgb.on { border-color: var(--acc); color: var(--acc-tx); background: var(--acc-t); }
.rp-lgd { list-style: none; margin: 0 0 12px; padding: 12px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 8px 16px; border: 1px solid var(--hair); border-radius: 10px; background: var(--surface); animation: rp-pxin .16s ease-out; }
.rp-lgd li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink2); min-height: 28px; }
.rp-mc.rp-lsw { flex: none; width: 44px; height: 28px; padding: 0; align-items: center; pointer-events: none; font-size: 11px; }
.rp-mc.rp-lsw:not(.nop):not(.blk) { background: var(--rp-ramp0, var(--track)); }
.rp-mc.rp-lsw .rp-tag { position: static; transform: none; }
/* RPV H21 (TT-2104-1): the Legend list inside the white card of the Legend button: one column, no box */
.rp-lgd.rp-lgt { grid-template-columns: 1fr; margin: 8px 0 0; padding: 0; gap: 4px; border: 0; background: none; animation: none; }
.rp-lgt li { font-size: 12px; min-height: 24px; }
.rp-lgt .rp-mc.rp-lsw { width: 36px; height: 22px; }

/* PB polish R1 (Wed 21 Oct): the axis row of Next best ADPs carries an invisible strip, so the tick marks sit over the bars */
.rp-fp.rp-fp-ghost { visibility: hidden; }
/* PB polish R1: a Results page without sub tabs (d1, d2, Pacific, Iberia) kept the step bar flush on the tab line;
   the same 16 px gap as under a sub tab row [KB T5 4/8 grid, one gap per relation]. Note in requests.md (shared frame). */
main.xm-main > div:first-child:not(:has(> .xm-subtabs)) + .vn-line { margin-top: 16px; }
/* PB polish R1: the Next best card in the (d1) and (d2) two-card row kept a 16 px bottom margin, so it ended 16 px
   above its neighbour; both cards of a row now end on one line [KB T5 equal card heights in a row] */
main .rp-d-grid > section.card.xf[data-card] { margin: 0; }
/* PB polish R1: counts in buttons ("Show 20 more") use tabular figures like every other number [KB T4 tabular figures] */
.rp-btn { font-variant-numeric: tabular-nums; }

/* ---------- PB polish R2 (RP-02) ---------- */
/* [KB T4 tabular figures] the C1 to C6 cargo buttons keep one width per figure */
.rp-seg button { font-variant-numeric: tabular-nums; }
/* [KB T2 never truncate a name the reader needs] the seller name wraps to a second line instead of an ellipsis */
.rp-sgrid .rp-vlab { white-space: normal; }
.rp-sgrid .rp-vlab > :not(.rp-sname) { white-space: nowrap; flex: none; }
.rp-sgrid .rp-sname { white-space: normal; text-overflow: clip; line-height: 16px; padding: 4px 0; }
/* PB polish R2 (RP-05, RP-06) [KB T5 one line per relation]: the total row has one rule above it and none below, so no
   hairline stops short under the label cells */
table.rp-d-t tfoot th, table.rp-d-t tfoot td { border-bottom: 0 !important; }
/* PB polish R2 (RP-02) [KB T2 never truncate a name]: the seller name of an option row wraps to a second line */
.rp-olab2 .rp-sname { white-space: normal; text-overflow: clip; overflow: visible; line-height: 16px; padding: 4px 0; min-width: 0; }
.rp-olab2 { white-space: normal; }
.rp-olab2 > :not(.rp-sname) { white-space: nowrap; flex: none; }

/* C-ET1 (round 2, FB): a rule pill the draft changed carries the dashed draft mark of the Try preview [KB T7.2] */
.rp-rule.rp-rdraft { border: 1.5px dashed var(--acc); }
.rp-rrw .rp-rrowb { padding-right: 16px; } /* columns line up with the head (C-ET1 round 2, FB) */
/* round 2 (FB): Negotiation direct labels; the key shows only after Legend, as its own row under the hero */
.rp-nsvg .nk { font-size: 11.5px; font-weight: 600; paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
.rp-nkey.rp-nkey-on { margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--hair); border-radius: 8px; background: var(--chip, var(--card)); }

/* ---------- R2 FB S2 (C-ET1, FB-3): Cargoes tab with a draft. A moved voyage row gets the accent bar and a quiet
   "was" line; liftings the draft uses or frees get a ring; the cargoes the draft moves sit in one line under the
   voyages [KB T7.2 before and after, QR 22 shape plus word, never colour alone] ---------- */
.rp-vrow.rp-vdraft > div { background: color-mix(in srgb, var(--acc) 6%, transparent); }
.rp-vrow.rp-vdraft > .rp-vlab { box-shadow: inset 3px 0 0 var(--acc); padding-left: 8px; }
.rp-vwas { font-size: 11px; line-height: 16px; color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rp-slift.rp-snew { outline: 2px solid var(--acc); outline-offset: 1px; }
.rp-slift.rp-sfreed { border: 1.5px dashed var(--acc) !important; background: var(--acc-t) !important; }
.rp-dmv { color: var(--acc-tx); border-color: color-mix(in srgb, var(--acc) 40%, var(--hair)); font-variant-numeric: tabular-nums; }
.rp-vleft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 12px; line-height: 16px; color: var(--muted); }
.rp-vleft-k { margin-right: 4px; }
.rp-vgone { border-style: dashed; color: var(--ink2, var(--ink)); gap: 4px; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .rp-dmv { color: var(--acc-tx, #5FD9A6); }
.rp-vrow.rp-vdraft > .rp-vlab { flex-wrap: wrap; align-content: center; row-gap: 0; column-gap: 8px; }
.rp-vrow.rp-vdraft > .rp-vlab .rp-vwas { flex: 0 0 100%; }
/* R2 FB S2 (C-ET1, FB-7): RP-07 Next best row of the draft plan, and its pill, in the draft look of every draft card */
.rp-d-nb tr.pv > * { background: var(--acc-t); }
.rp-d-nb tr.pv > th:first-child { box-shadow: inset 3px 0 0 var(--acc); }
.pill.rp-d-pvp { background: transparent; border: 1px dashed var(--acc); color: var(--acc-tx); }

/* ---------- R2 FB S3: template (c) several buyers and supplies, Results and Prices (views/rp/c-results.js).
   Builds on the (e) look of rd.css (.rd-e-*: Gantt lanes, tables, key, drawer) so (c) and (e) read as one product. ---------- */
.rp-c .rd-e-gantt { --gl: 232px; }
/* Long and short book: one row per position, a six month strip of cells [KB T5.3 aligned columns, T6 direct labels] */
table.rp-c-book td { height: 48px; }
.rp-c-role { font-size: 13px; color: var(--ink2); }
.rp-c-role span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.rp-c-bms, .rp-c-bmh { display: grid; grid-template-columns: repeat(6, 48px); gap: 4px; }
.rp-c-bmh span { font-size: var(--fs-tick); font-weight: 600; color: var(--muted); text-align: center; }
.rp-c-bm { height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 650;
  font-variant-numeric: tabular-nums; transition: box-shadow .12s ease, transform .12s ease; }
.rp-c-bm.na { background: transparent; border: 1px dashed var(--hair); }
.rp-c-bm.free { background: var(--track); }
.rp-c-bm.on { background: var(--acc-fill); color: var(--on-acc); cursor: pointer; }
.rp-c-bm.miss { background: color-mix(in srgb, var(--loss) 14%, transparent); color: var(--loss); box-shadow: inset 0 0 0 1.5px var(--loss); }
.rp-c-bm.on:hover, .rp-c-bm.on:focus-visible, .rp-c-bm.miss:hover, .rp-c-bm.miss:focus-visible { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--focus); outline: none; }
.rp-c-bm.on:active { transform: scale(.96); }
.rp-c-ms { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--loss); }
table.rp-c-book td.neg { color: var(--ink); }
tr.rp-c-sec th { height: 32px; padding-top: 12px; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--surface-2); text-align: left; }
tr.rp-c-sec th span { margin-left: 12px; font-weight: 500; color: var(--muted); }
.rp-c-kon { background: var(--acc); } .rp-c-kfree { background: var(--track); } .rp-c-kmiss { background: color-mix(in srgb, var(--loss) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--loss); }
.rd-e-hl table.rp-c-book tbody tr[data-hc]:not(.hc-on) { opacity: .5; }
table.rp-c-book tbody tr[data-hc] { transition: opacity .12s ease; }
/* Voyage calendar: one lane per ship, laden leg solid, the way back light */
.rp-c-lane { height: 36px; }
.rp-c-ship { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink2); }
.rp-c-ship svg { flex: none; color: var(--muted); }
.rp-c-ship > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rp-c-ship b { font-size: 13px; font-weight: 650; color: var(--ink); }
.rp-c-ship em { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; }
.rp-c-vy { position: absolute; height: 24px; display: flex; padding: 0; border: 0; border-radius: 4px; background: transparent; overflow: hidden; cursor: pointer;
  transition: box-shadow .12s ease, transform .12s ease; }
.rp-c-vy .lad { flex: none; height: 100%; display: flex; align-items: center; padding: 0 8px; background: var(--acc-fill); color: var(--on-acc); border-radius: 4px 0 0 4px; min-width: 0; }
.rp-c-vy .lad b { font: 600 11px/1 Inter, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.rp-c-vy .bal { flex: 1; height: 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; background: color-mix(in srgb, var(--acc) 22%, transparent); border-radius: 0 4px 4px 0; }
.rp-c-vy .bal em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--acc-tx); white-space: nowrap; }
.rp-c-vy:hover, .rp-c-vy:focus-visible { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--focus); outline: none; }
.rp-c-vy:active { transform: scale(.98); }
.rp-c-vy.moved { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--acc); }
.rp-c-b2b { transform: none; top: 6px; bottom: 6px; padding: 0 8px; }
.rp-c-b2b:active { transform: scale(.96); }
.rp-c-klad { background: var(--acc); } .rp-c-kbal { background: color-mix(in srgb, var(--acc) 22%, transparent); }
.rd-e-hl .rp-c-vy:not(.hc-on), .rd-e-hl .rp-c-b2b:not(.hc-on) { opacity: .4; }
/* Cargo plan */
.rp-c-via { display: inline-flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--ink); white-space: nowrap; }
.rp-c-via span { font-size: 12px; color: var(--muted); }
.rp-c-bar i.neg { background: var(--loss); }
.rd-e-mv.rp-c-neg { color: var(--loss); }
tr.rp-c-missr th, tr.rp-c-missr td { background: color-mix(in srgb, var(--loss) 5%, transparent); }
tr.rp-c-missr th { box-shadow: inset 3px 0 0 var(--loss); }
tr.rp-c-left td { height: 36px; font-size: 12.5px; color: var(--muted); }
tr.rp-c-left td svg { vertical-align: -2px; margin-right: 8px; color: var(--muted-l); }
table.rp-c-plan td.pos { color: var(--ink); }
/* Next best: what differs, one chip per changed cargo */
.rp-c-dfs { display: flex; flex-wrap: wrap; gap: 4px; }
.rp-c-df { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 4px; background: var(--acc-l); color: var(--acc-tx);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: default; transition: box-shadow .12s ease; }
.rp-c-df em { font-style: normal; font-weight: 500; color: var(--muted); }
.rp-c-df.miss { background: color-mix(in srgb, var(--loss) 12%, transparent); color: var(--loss); }
.rp-c-df:hover, .rp-c-df:focus-visible { box-shadow: 0 0 0 2px var(--focus); outline: none; }
.rp-c-same { font-size: 12px; font-weight: 600; color: var(--acc-tx); }
table.rp-c-nb td, table.rp-c-nb th { height: 48px; }
/* Prices tab */
.rp-c-rv { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--muted); }
.rp-c-dot { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--acc); vertical-align: 1px; }
table.rp-c-rt td, table.rp-c-rt th { height: 48px; }
/* drawer */
.rp-c-dtt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rp-c-to { color: var(--muted); display: inline-flex; }
.rp-c-dl { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rp-c-dl li { display: grid; grid-template-columns: 64px 1fr; gap: 8px; font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .rp-c-bm, .rp-c-vy, .rp-c-df { transition: none; } }
/* R2 FB S3 (second pass): plan table fits 1280 without sideways scroll; voyage labels fit their leg */
.rp-c-pair { display: inline-flex; flex-direction: column; gap: 4px; }
table.rp-c-plan td, table.rp-c-plan th { height: 56px; }
table.rp-c-plan .rd-e-mcol { width: 200px; }
.rp-c-vy .lad b.short { display: none; }
.rp-c-vy .lad.tight b.full { display: none; } .rp-c-vy .lad.tight b.short { display: inline; }
.rp-c-vy .lad.tight { padding: 0 4px; justify-content: center; }
.rp-c-vy.over { border-radius: 4px 0 0 4px; }
.rp-c-vy.over .bal { border-radius: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 22%, transparent) 40%, transparent); }
.rp-c-b2b { white-space: nowrap; }
.rp-c-b2b.end { left: auto; right: 0; }
@media (max-width: 1360px) { table.rp-c-plan .rd-e-mcol { width: 168px; } }
@media (max-width: 1360px) { table.rp-c-plan .rd-e-mcol { width: 132px; } .rp-c-bar.rd-e-bar { min-width: 44px; } }
/* at 1280 the margin keeps its signed number and drops the bar, so Value stays in view without sideways scroll [KB T5 never hide the total] */
@media (max-width: 1360px) { table.rp-c-plan .rd-e-mcol { width: auto; } table.rp-c-plan .rp-c-bar { display: none; } table.rp-c-plan .rd-e-mv { width: auto; margin-right: 0; } }
@media (max-width: 1360px) { table.rp-c-plan th, table.rp-c-plan td { padding-left: 8px; padding-right: 8px; } }
/* hover: only the cargoes of the other counterparties fade; the ship lanes and their labels stay full [one dimming, not two] */
.rd-e-hl .rd-e-lane.rp-c-lane { opacity: 1; }
/* ---------- R2 FB S4 (C-ET1, FB-7): RP-07 cargo rows the draft changes: accent bar, light tint, a quiet "was" line
   under the window; a cargo the draft drops sits in one line under the rows [KB T7.2 before and after, QR 22] ---------- */
.rp-d-t tr.rp-bw-mv > * { background: color-mix(in srgb, var(--acc) 6%, transparent); }
.rp-d-t tr.rp-bw-mv > th:first-child { box-shadow: inset 3px 0 0 var(--acc); }
.rp-bw-was { display: block; margin-top: 2px; font-size: 11px; line-height: 16px; font-weight: 500; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-d-t tr.rp-bw-left td { height: 36px; font-size: 12.5px; color: var(--muted); }
.rp-d-t tr.rp-bw-left td svg { vertical-align: -2px; margin-right: 8px; color: var(--muted-l, var(--muted)); }
.rp-bw-kmv { display: inline-flex; align-items: center; gap: 8px; margin-right: 16px; color: var(--ink2, var(--ink)); font-weight: 600; }
.rp-bw-kmv i { width: 3px; height: 14px; border-radius: 2px; background: var(--acc); }
/* R2 FB S4 (RP-03, FB-3): a price shift on the price cards. The market without the shift is a faint dashed line of the
   same index colour; a moved cell names its shift; one direct label per shifted index [KB T6.11, T7.2] */
.rp-p2-ln.faint { background: repeating-linear-gradient(90deg, var(--muted) 0 3px, transparent 3px 6px); opacity: .7; }
.rp-p2-before { opacity: .45; }
.rp-p2-shl { font-weight: 650; paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
.rp-p2-was { display: block; margin-top: 2px; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--acc-tx); white-space: nowrap; }
.rp-p2-sh { font-style: normal; font-weight: 650; color: var(--acc-tx); font-variant-numeric: tabular-nums; }
.rp-pr-key.rp-p2-shk { height: 24px; padding: 0 8px; border-radius: 4px; background: var(--acc-l); color: var(--acc-tx); font-weight: 600; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; }
/* R2 FB S4 (HV-5, HV-7): (b) Cargoes, one white cargo card per voyage row; a hovered cargo stays lit on the voyages and
   the supply lanes, the rest fade [KB T6 hover shows the build-up, one dimming] */
.rp-vrow.rp-vcg > div { cursor: default; transition: opacity .12s ease, background-color .12s ease; }
.rp-vrow.rp-vcg > .rp-vlab:focus-visible { outline: none; box-shadow: inset 3px 0 0 var(--focus); }
.rp-vrow.rp-vcg:hover > div { background: var(--added, color-mix(in srgb, var(--acc) 5%, transparent)); }
.rp-slift[data-hc] { transition: opacity .12s ease; }
.rp-hl .rp-vrow.rp-vcg:not(.hc-on) > div, .rp-hl .rp-slift[data-hc]:not(.hc-on) { opacity: .4; }
@media (prefers-reduced-motion: reduce) { .rp-vrow.rp-vcg > div, .rp-slift[data-hc] { transition: none; } }
/* R2 FB S4 (RP-07): Next best, the plan cell takes the free width so every cargo of a plan sits on one row; a cargo that
   differs from the best plan carries the accent tone, named in the key and the tip [KB T5 one row per record, QR 22] */
table.rp-d-nb td:nth-child(2) { width: 100%; }
.rp-d-nb .rp-d-fps { display: flex; flex-wrap: wrap; max-width: none; }
.rp-d-fp.df { background: var(--acc-t); border-color: var(--acc-l); color: var(--acc-tx); }
.rp-bw-kdf { display: inline-flex; align-items: center; gap: 8px; margin-left: 16px; }
.rp-bw-kdf .rp-d-fp { min-width: 16px; width: 16px; height: 12px; padding: 0; border-radius: 3px; }
table.rp-d-nb thead th { white-space: nowrap; }

/* ---------- R2 FB S5 (jack-interactions HV-3, HV-4, HV-6, HV-7) on the (b) Overview: month head, source chip and tile
   open a white build-up card; a cargo or a source lights the same cargo in every card, the other marks step back.
   [KB T6 hover shows the build-up; T7 focus parity: every hover target is focusable] ---------- */
.rp-mh { display: inline-block; padding: 2px 6px; border-radius: 6px; cursor: default; font-variant-numeric: tabular-nums; }
.rp-mh:hover { background: var(--track); color: var(--ink); }
.rp-mh:focus-visible { background: var(--track); color: var(--ink); outline: none; box-shadow: var(--focus); }
.rp-kpi[data-rp-kt] { cursor: default; transition: border-color .12s ease, box-shadow .12s ease; }
.rp-kpi[data-rp-kt]:hover, .rp-kpi[data-rp-kt]:focus-visible { border-color: var(--ctl); box-shadow: var(--sh-lift); outline: none; }
.rp-src[data-hs], .rp-sale[data-hs] { cursor: default; transition: opacity .12s ease, border-color .12s ease; }
.rp-src[data-hs]:hover, .rp-src[data-hs]:focus-visible, .rp-sale[data-hs]:hover, .rp-sale[data-hs]:focus-visible, .rp-src.hc-on { border-color: var(--ink2); outline: none; }
.rp-srcc[data-rp-src] { cursor: default; }
.rp-mc[data-hc], tr.rp-prow[data-hc], .rp-tlg { transition: opacity .12s ease; }
.rp-mc.hc-off, tr.rp-prow.hc-off, .rp-tlg.hc-off, .rp-src.hc-off { opacity: .4; }
.rp-mc.hc-on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink2); }
tr.rp-prow.hc-on > td { background: var(--acc-t); }
.tw-tip .rp-tsub { margin-top: 8px; }
/* the month value row under the grid [HV-3 net row]: quiet, tabular, one decimal pair; a month the draft changes gets the dashed draft mark */
table.rp-mx tfoot th.rh { font-size: var(--fs-label); font-weight: 600; color: var(--muted); line-height: 1.15; padding-top: 4px; vertical-align: top; }
table.rp-mx tfoot th.rh small { display: block; font-size: var(--fs-tick); font-weight: 500; white-space: nowrap; }
table.rp-mx th.rh { width: 68px; }
table.rp-mx tfoot td { text-align: center; padding-top: 4px; border-top: 1px solid var(--hair); }
.rp-mnv { font-size: var(--fs-label); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rp-mnv.z { color: var(--muted); font-weight: 500; }
.rp-mnv.rp-mnd { color: var(--acc-tx); border-bottom: 1.5px dashed var(--acc); padding-bottom: 1px; }
@media (prefers-reduced-motion: reduce) { .rp-mc[data-hc], tr.rp-prow[data-hc], .rp-tlg, .rp-kpi[data-rp-kt], .rp-src[data-hs] { transition: none; } }
/* R2 FB S5: a narrow KPI tile (four tiles at 1280 px, draft) puts the second unit on its own line, so no sub is cut [KB T2 no cut text] */
.rp-kpi { container-type: inline-size; }
@container (max-width: 224px) { .rp-ksub .rp-ksep { display: none; } .rp-ksub .rp-ks2 { display: block; } }
/* R2 FB S5 (C-ET1): (c) Voyage calendar, the applied voyage a draft drops or changes: a dashed ghost under the draft voyages */
.rp-c-gh { position: absolute; height: 24px; display: flex; align-items: center; padding: 0 8px; border: 1.5px dashed var(--muted-l); border-radius: 4px; background: transparent; color: var(--muted); overflow: hidden; pointer-events: none; box-sizing: border-box; }
.rp-c-gh b { font: 500 11px/1 Inter, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-c-ghb { bottom: 6px; height: auto; }
.rp-c-ghb.bare { min-width: 96px; }

/* ---------- R2 FB S6: RP-07, RP-07b hover parity (HV-4 source card, HV-7 shared highlight) ---------- */
/* [KB T7 hover shows the build-up; QR 22 the lit item keeps full contrast, the rest fades to .4] */
.rp-bw-src { display: inline-flex; border-radius: 8px; outline: none; cursor: default; }
.rp-bw-src:focus-visible { box-shadow: var(--focus); }
.rp-bw-src .pc .code { transition: border-color var(--t-fast, .12s); }
.rp-bw-src:hover .pc .code, .rp-bw-src:focus-visible .pc .code, .rp-bw-src.hc-on .pc .code { border-color: var(--ink2); }
.rp-bw tr[data-hc] > * { transition: opacity var(--t-fast, .12s), background-color var(--t-fast, .12s); }
.rp-bw tr[data-hc].hc-off > * { opacity: .4; }
.rp-bw tr[data-hc].hc-on > * { background: var(--acc-t); }
.rp-bw .rp-d-fp { transition: opacity var(--t-fast, .12s), border-color var(--t-fast, .12s); }
.rp-bw .rp-d-fp.hc-off { opacity: .4; }
.rp-bw .rp-d-fp.hc-on { border-color: var(--ink2); color: var(--ink); }
.rp-bw .rp-bw-src.hc-off { opacity: .4; }

/* ---------- R2 FB S7 (C-ET1): Overview Cargo plan in a draft. Moved and new rows get the accent bar and a quiet "was"
   line; cargoes that leave sit in one muted row under the plan [KB T7.2 before and after, QR 22 shape plus word] ---------- */
.rp-t tr.rp-pdraft > td { background: color-mix(in srgb, var(--acc) 6%, transparent); }
.rp-t tr.rp-pdraft > td:first-child { box-shadow: inset 3px 0 0 var(--acc); }
.rp-t tr.rp-pleft td { height: 40px; font-size: 12.5px; line-height: 16px; color: var(--muted); }
.rp-t tr.rp-pleft td svg { display: inline-block; vertical-align: -2px; margin-right: 8px; color: var(--muted); }
/* R2 FB S7: a disabled primary looked enabled (.rp-pri came after .rp-btn:disabled); it now reads as off in both themes
   [KB T3 one look per state, disabled is visibly off] */
.rp-btn.rp-pri:disabled, :root[data-theme="dark"] .rp-btn.rp-pri:disabled { background: transparent; border-color: var(--hair); color: var(--muted-l); filter: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rp-btn.rp-pri:disabled { color: var(--muted-l); } }

/* ---------- R2 FB S8 (C-ET1): (c) book cells and route rows follow the draft [one change model on every card] ---------- */
.rp-c-kna { background: transparent; border: 1px dashed var(--hair); box-sizing: border-box; }
.rp-c-bm.on.chg { box-shadow: 0 0 0 1.5px var(--card), 0 0 0 3px var(--acc); }
.rp-c-bm.on.chg:hover, .rp-c-bm.on.chg:focus-visible { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--focus); }
.rp-c-bm.was { background: transparent; border: 1.5px dashed var(--muted-l); color: var(--muted); font-weight: 500; text-decoration: line-through; box-sizing: border-box; cursor: default; }
.rp-c-bm.was:focus-visible { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--focus); outline: none; }
.rp-c-shut { display: inline-flex; align-items: center; height: 20px; margin-left: 8px; padding: 0 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
  background: var(--loss-l); color: var(--loss); vertical-align: 1px; }
.rp-c-shut.dr { background: transparent; box-shadow: inset 0 0 0 1px currentColor; border-radius: 4px; }
table.rp-c-rt tr.rp-c-off td { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }

/* ---------- R2 QB polish (Wed 21 Oct 22:40): portfolio and producer Results ----------
   HV-6 tile card: every KPI tile with a build-up is focusable and lifts on hover and focus, the white card shows the rows
   that add up to its number [jack HV-6; KB T3 hover, focus; QR 37 five states]. Draft rows of (d1), (d2): accent bar,
   quiet "was" line [KB T7.2 before and after; QR 54 quiet secondary text]. */
.kpi.rp-kt { cursor: default; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.kpi.rp-kt:hover, .kpi.rp-kt:focus-visible { border-color: var(--ctl); box-shadow: var(--sh-lift); outline: none; }
.kpi.rp-kt:focus-visible { box-shadow: var(--sh-lift), 0 0 0 2px var(--acc-l); }
@media (prefers-reduced-motion: reduce) { .kpi.rp-kt { transition: none; } }
.card.pv .kpi.rp-kt:nth-child(2) { border-color: var(--acc); border-style: dashed; }
.rp-d-row.chg > * { background: color-mix(in srgb, var(--acc) 7%, transparent); }
.rp-d-row.chg > th:first-child { box-shadow: inset 3px 0 0 var(--acc); }
.rp-d-whoc { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rp-d-was { font-size: 11.5px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-d-dk { display: inline-flex; align-items: center; gap: 8px; margin-left: 16px; color: var(--muted); font-size: var(--fs-chip); }
.rp-d-dk i { width: 12px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--acc) 14%, transparent); box-shadow: inset 3px 0 0 var(--acc); }
table.rp-d-nb .rd-dtag { white-space: nowrap; }
/* R2 QB: in a draft the applied row of Next best is quiet and the draft row carries the tint [QR 54 one focus] */
table.rp-d-nb tr.on.ap { background: none; }
table.rp-d-nb tr.on.ap th { box-shadow: inset 3px 0 0 var(--hair-2, var(--hair)); }
table.rp-d-nb tr.pv > * { background: color-mix(in srgb, var(--acc) 8%, transparent); }
table.rp-d-nb tr.pv > th:first-child { box-shadow: inset 3px 0 0 var(--acc); }
/* the bar chart of a row card fills the card height (one height per card row) and sits in the middle */
.rp-d-grid > .card { display: flex; flex-direction: column; }
.rp-d-grid > .card > .xf-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.rp-d-grid .rp-d-hb { flex: 1 1 auto; display: flex; align-items: center; min-height: 0; }
/* the unit of a number column sits under its head, so the plan chips keep one row at 1280 [KB T5 units in the head] */
table.rp-d-nb thead th small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); line-height: 14px; }
table.rp-d-nb .rp-d-fps { flex-wrap: nowrap; }

/* polish R2 QB (FINAL-R2 round 2, Results with the Neo dock open): the Results of (d1), (d2), Pacific and Iberia read
   their own width. Without the dock .rp-d is 1008 px at 1280 and 1168 px at 1440, so these rules never touch that
   layout. With the dock (608 and 768 px) the cards stand one below the other, the tiles go 2 by 2, the margin bar drops
   (the signed figure stays) and the loading days move under the supply, so no table scrolls sideways
   [KB T2 layout by container width; UI-Review: content never runs past its frame] */
.rp-d { container-type: inline-size; container-name: rpd; }
.rp-d-sub { display: none; }
@container rpd (max-width: 899.98px) {
  .rp-d .rp-d-grid { grid-template-columns: minmax(0, 1fr); }
  .rp-d .rp-d-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-d table.rp-d-t th, .rp-d table.rp-d-t td { padding-left: 8px; padding-right: 8px; }
  .rp-d table.rp-d-t thead th { white-space: normal; vertical-align: bottom; }
  .rp-d table.rp-d-t th.rp-d-mcol, .rp-d table.rp-d-t td.rp-d-mcol { min-width: 0; }
  .rp-d table.rp-d-t .rp-d-bar { display: none; }
  .rp-d table.rp-d-t .rp-d-mv { margin-right: 0; }
  .rp-d table.rp-d-t th.rp-d-mcol { text-align: right; }
  .rp-d .rp-d-ld { display: none; }
  .rp-d .rp-d-sub { display: block; margin-top: 2px; font-size: var(--fs-label); line-height: 16px; color: var(--muted); font-weight: 500; white-space: nowrap; }
}
/* RPV H56 (REQ ENM to RPV 17:03, JUDGE round 2 RP-06 "145.72 USD million out of its tile at 390"): on a phone (.rp-d under
   480 px) the KPI tiles stand one a row, so the value with its unit (nowrap) keeps inside its tile */
@container rpd (max-width: 479.98px) {
  .rp-d .rp-d-kpis { grid-template-columns: minmax(0, 1fr); }
}
/* the narrowest form (dock open at 1280, .rp-d 608 px): the sale and cost columns drop; each row keeps who, when, margin
   and value, and its hover and focus card still shows the full price build-up [KB T5 keep the answer column] */
@container rpd (max-width: 699.98px) {
  .rp-d .rp-d-px { display: none; }
}
/* the plan cells of Next best ADPs wrap to a second row of chips instead of pushing Use this plan out of the card */
@container rpd (max-width: 899.98px) {
  .rp-d table.rp-d-nb .rp-d-fps { flex-wrap: wrap; }
}

/* polish R3 QB (FINAL-R2 round 3, RP-01 Japan with the Neo dock open): the Overview of (b) reads its own width, as .rp-d
   does. 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 window matrix drops its 840 px floor and its cells get narrower; the Next best rows keep
   rank, fingerprint, value and action, and drop the gap bar at 608 px (the signed gap stays in the value column); the
   Cargo plan drops its margin bar (the figure stays) [KB T2 layout by container width; UI-Review content inside its frame] */
.rp-ov { container-type: inline-size; container-name: rpov; }
@container rpov (max-width: 899.98px) {
  .rp-ov table.rp-mx { min-width: 0; border-spacing: 3px; }
  .rp-ov table.rp-mx th.rh { width: 60px; padding-right: 6px; }
  .rp-ov .rp-alt { grid-template-columns: 28px auto minmax(64px, 1fr) 128px 112px; gap: 10px; }
  .rp-ov .rp-fp { gap: 3px; }
  .rp-ov .rp-fp i { width: 4px; }
  .rp-ov .rp-wbar { width: 168px; }
  .rp-ov .xf-tools { flex: 0 1 auto; min-width: 0; }
  .rp-ov .rp-wis, .rp-ov .rp-st { grid-template-columns: minmax(0, 1fr); }
}
@container rpov (max-width: 699.98px) {
  .rp-ov table.rp-mx { border-spacing: 2px; }
  .rp-ov .rp-kpis, .rp-ov .rp-kpis.rp-kpis3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-ov .rp-kpis.rp-kpis3 > :nth-child(3) { grid-column: 1 / -1; }
  .rp-ov .rp-mc { font-size: 13px; padding-bottom: 6px; }
  .rp-ov .rp-tag { top: 3px; left: 3px; gap: 2px; padding: 0 3px; }
  .rp-ov .rp-alt { grid-template-columns: 28px auto 128px minmax(0, 1fr); }
  .rp-ov .rp-alt > :nth-child(3) { display: none; }
  .rp-ov .rp-wbar { width: auto; }
  .rp-ov .rp-wb .rp-bar, .rp-ov .rp-wb .rp-volb { display: none; }
  .rp-ov table.rp-t th, .rp-ov table.rp-t td { padding-left: 8px; padding-right: 8px; }
  .rp-ov table.rp-t .rp-srcc { flex-wrap: wrap; row-gap: 0; }
  .rp-ov table.rp-t thead th, .rp-ov table.rp-t thead th small { white-space: normal; vertical-align: bottom; }
  .rp-ov table.rp-t .rp-srcc > span { flex-basis: 100%; font-size: var(--fs-label); line-height: 16px; }
}
/* polish R3 QB (HV-3): a month head with a build-up card shows that it reacts, like the month heads of (b) and (f) */
.rp-c-mh { border-radius: 4px; cursor: default; transition: background-color var(--t-fast, .12s), color var(--t-fast, .12s); }
.rp-c-bmh .rp-c-mh { line-height: 24px; }
.rp-c-mh:hover, .rp-c-mh:focus-visible { background: var(--track); color: var(--ink); }
.rp-c-mh:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
/* live (ENP, LITERALS 8.1 CR A-1): dash patterns of the RP-c3 reference lines (were SVG attributes in b-overview.js) */
.rp-nsvg .rp-nref-best { stroke-dasharray: 5 4; }
.rp-nsvg .rp-nref-list { stroke-dasharray: 1.5 3.5; }
/* ENP s21: the ask box waits on a server read (parse or chip value of a typed ask) */
.rp-askwait { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 14px; background: var(--muted-l); color: var(--ink2); font: 600 12.5px/1 Inter, system-ui, sans-serif; }

/* RPV H7 (SENSE-1-22, IN-b3): the v2 engine terms of the ship as fields in the Vessel card. RPV H84 (4875 prototype
   in.js vesselCard): each term is ONE field in place (capacity in the head, idle boil-off in the Idle row, the voyage
   terms in the port row chips), no second grid; the field keeps the shared input border and surface, 24 px high in a chip */
.in-ves-f { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); }
.in-ves-f input { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--ctl); border-radius: 7px; min-height: 24px; padding: 1px 6px; width: 8ch; min-width: 0; text-align: right; }
.in-ves-f input[data-in-ves="heel"], .in-ves-f input[data-in-ves="portCall"], .in-ves-f input[data-in-ves="cap"] { width: 11ch; }
.in-ves-cap input { font-size: 15px; font-weight: 700; }
.in-ves-f input[aria-invalid="true"] { border-color: var(--neg, #b42318); }
.in-ves-err { margin: 0; font-size: 12px; color: var(--neg, #b42318); }

/* RPV H14 (SENSE-1-22, IN-b1 K pills, B16): delivery windows a month, one pill per server K */
.in-kp { display: grid; gap: 6px; margin-top: 10px; }
.in-kp-row { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.in-kpb { min-width: 36px; height: 30px; padding: 0 10px; border-radius: 15px; border: 1px solid var(--ctl); background: var(--card); color: var(--ink); font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.in-kpb:hover { border-color: var(--acc); }
.in-kpb.on { background: var(--acc-t); border-color: var(--acc); color: var(--acc-tx); cursor: default; }
/* RPV H15: the locks a new K drops (IN-b1, views.windows.dropped) */
.in-kp-d { display: grid; gap: 4px; font-size: 13px; }
.in-kp-d ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.in-kpb:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.in-kp-n { margin: 0; font-size: 12px; }
/* RPV H14 (RULES R6): the EUR/USD chip of the Prices head, display only */
.rp-fxh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12.5px; }
.rp-fxc { display: inline-flex; gap: 6px; align-items: center; }
/* RPV H17: RP-03 Index prices of the plan (mock RP-07p bw-index): the pricing month rule of an index on its own line, so
   the label cell wraps at 1280 with the Neo dock open and the cargo column stays in view */
.rp-pr-ixt td .rp-pr-ixs { display: block; white-space: normal; }
.rp-pr-ixt td:nth-child(3), .rp-pr-ixt td:nth-child(5) { white-space: normal; min-width: 14ch; }
.rp-pr-ixt .rp-pr-ixv { font-weight: 600; }
/* RPV H31: IN-b2 Add source and Paste from Excel (in/b2.js IN.bSrc); grid of fields, preview table, server reason */
.in-src { margin-top: 12px; padding: 12px 16px; border: 1px solid var(--hair); border-radius: 10px; background: var(--card); }
.in-src-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px 12px; margin: 8px 0; }
.in-src-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink2); }
.in-src-f input, .in-src-f select, .in-src textarea { font: inherit; font-size: 13px; color: var(--ink); background: var(--card); border: 1px solid var(--hair); border-radius: 6px; padding: 6px 8px; min-width: 0; }
.in-src textarea { width: 100%; box-sizing: border-box; font-family: ui-monospace, Menlo, monospace; white-space: pre; overflow-x: auto; }
.in-src-f input:focus-visible, .in-src-f select:focus-visible, .in-src textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.in-src-pv { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; }
.in-src-pv th, .in-src-pv td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.in-src-pv td[data-err], .in-src-err { color: var(--loss); }
.in-src-pv .in-ok-t { color: var(--muted); }
.in-src-b { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }
.in-sup-warn { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; font-size: 12px; color: var(--loss); }

/* RPV H42 (AUD-H41-4, 390 px): under a phone width the window matrix keeps a readable floor and scrolls inside .rp-mxw,
   with the row label column fixed at the left (the narrow card form of RD-01, COORDINATOR item 16); the dock widths of
   608 and 768 px keep the rule above (no floor) */
@container rpov (max-width: 559.98px) {
  .rp-ov table.rp-mx { min-width: 560px; }
  .rp-ov table.rp-mx th.rh { position: sticky; left: 0; z-index: 2; background: var(--card); }
}

/* RPV H43 (AUD-H41-4, 390 px, the plan half): the Cargo plan keeps its Profit column on a phone. Under a 560 px Overview the
   Delivery window and Source columns fold into the line under the cargo number (.rp-psub), as RD-01 folds its columns into
   .rd-ov-sub; the two columns stay in the table with no width (never display none), so the total row (colspan 3) stays
   under its numbers. A wider table (the Costs view) scrolls inside .rp-tscroll with the cargo column fixed at the left. */
.rp-psub { display: none; }
@container rpov (max-width: 559.98px) {
  .rp-ov table.rp-t thead th:nth-child(2), .rp-ov table.rp-t thead th:nth-child(3),
  .rp-ov table.rp-t tr.rp-prow > td:nth-child(2), .rp-ov table.rp-t tr.rp-prow > td:nth-child(3) { width: 0; padding: 0; font-size: 0; }
  .rp-ov table.rp-t tr.rp-prow > td:nth-child(2) > *, .rp-ov table.rp-t tr.rp-prow > td:nth-child(3) > * { display: none; }
  .rp-ov table.rp-t .rp-psub { display: block; margin-top: 2px; font-size: var(--fs-label, 12px); line-height: 16px; font-weight: 500; color: var(--muted); white-space: normal; }
  .rp-ov table.rp-t tr.rp-prow > td { height: auto; padding-top: 6px; padding-bottom: 6px; }
  .rp-ov table.rp-t thead th:first-child, .rp-ov table.rp-t tr.rp-prow > td:first-child, .rp-ov table.rp-t tfoot td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }
  .rp-ov table.rp-t tr.rp-prow:hover > td:first-child, .rp-ov table.rp-t tr.rp-prow.open > td:first-child { background: var(--added); }
  .rp-ov table.rp-t tr.rp-pdraft > td:first-child { background: color-mix(in srgb, var(--acc) 6%, var(--card)); }
  /* the total line and its rounding note wrap; else their one line (about 320 px) keeps the folded table at full width */
  .rp-ov table.rp-t tfoot td:first-child { white-space: normal; }
}

/* RPV H43 (AUD-H41-4, 390 px, the turn axis half): the Negotiation chart keeps its 480 px floor (9 turns need it); under a
   560 px Overview it scrolls inside its card, so the right labels (Best ADP, their list) are never cut */
@container rpov (max-width: 559.98px) {
  .rp-ov .rp-nego { overflow-x: auto; overflow-y: hidden; }
}

/* RPV H58 (AUD-H53-1 rest): the line of agreed terms the plan breaks and the plan row chip read in the loss colour */
.rp-breaks b.rp-neg, .rp-bw-was.rp-brk { color: var(--loss); }
/* RPV H58 (COORDINATOR item 64 (3), prototype px.js cardPwin px-splits): the window split bars of RP-p2, a segment per blended month at its weight */
/* RPV H75 (REQ INT to RPV 8, JUDGE round 7 RP-03 cross finding 3): one grid for all rows, the key column as wide as the
   widest key ("11-20 Oct" was cut at 44 px), each row lays into it (display: contents), right aligned key (prototype px-sk) */
.rp-p2-splits { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; margin: 4px 0 12px; font-variant-numeric: tabular-nums; }
.rp-p2-srow { display: contents; }
.rp-p2-sk { font-size: 12px; color: var(--muted); white-space: nowrap; text-align: right; }
.rp-p2-sbar { display: flex; min-width: 0; height: 20px; border-radius: 4px; overflow: hidden; border: 1px solid var(--hair); }
.rp-p2-sbar i { font-style: normal; font-size: 11px; line-height: 18px; text-align: center; white-space: nowrap; overflow: hidden; min-width: 0; }
.rp-p2-sbar i + i { border-left: 1px solid var(--card); }
.rp-p2-sbar i.cur { background: var(--acc-l); color: var(--ink); }
.rp-p2-sbar i.nb { background: var(--hair); color: var(--ink); }
.rp-p2-srow > b { font-size: 12px; font-weight: 600; color: var(--ink); }
/* RPV H67 (item 64 (3), prototype cg.js axisHead and dh): the Voyage head of Supply in <window> is the lane day axis */
.rp-olhd { position: relative; }
.rp-olhd .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rp-olaxs { flex: none; display: block; }
.rp-olax { stroke: var(--axis, #AEB9B3); }
.rp-oltk { font-size: 11px; fill: var(--muted, #5F6D67); }
.rp-oldh { fill: var(--ink, #12261F); }
/* RPV H68 (item 64 (3), prototype cg.js laneG glyphs, cg.css table.ln td.g svg overflow visible): voyage glyphs on the lanes */
.rp-olsvg { overflow: visible; }
.rp-olgb { fill: var(--card, #fff); }
.rp-olgl { fill: none; stroke: var(--ink2, #3B4A44); stroke-linecap: round; stroke-linejoin: round; }
.rp-olcp { fill: var(--card, #fff); stroke: var(--ink2, #3B4A44); stroke-width: 1.3; }
.rp-oloff { fill: none; stroke: var(--ink2, #3B4A44); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rp-oloff.rp-oloffl { stroke: var(--loss); }
.rp-olbd .ic { vertical-align: -1px; margin-left: 2px; }
/* RPV H72 (REQ INT to RPV 7 RP-01; 4875 prototype kit.css .r6-value, ov.css .vk-chips L299 and .ak L81): live, the input
   strip and the buyer ask row are their own blocks under the Value card, drawn with no card frame */
/* RPV H185: the strip block and the ask block are 4875 slot rows, not cards (no class card, so no card frame to undo) */
.rp-ins, .rp-askc { min-width: 0; }
.rp-ins { margin: 0 0 16px; }
.rp-ins .rp-strip { margin: 0; padding: 0; border-top: 0; }
.rp-askc { margin: 0 0 16px; }
.rp-askc .rp-ask-row { margin: 0; }
.rp-askc .rp-askout { margin: 8px 0 0; }
/* RPV H74 (REQ INT to RPV 7 RP-03, COORDINATOR item 59 (b)): live, the closed More section of RP-03 below Charter rate
   holds the three cards in neither reference (RP-p3, bw-index, RP-p6); the summary is a plain row, the cards keep the grid gap */
.rp-prices details.rp-more { display: grid; gap: 16px; }
.rp-prices details.rp-more > summary { cursor: pointer; font-weight: 600; color: var(--ink2); padding: 8px 0; }
.rp-prices details.rp-more > summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }
/* RPV H75 (REQ INT to RPV 8, IN-b, item 59 (b)): the closed More section of IN-b (Readiness, Locks), the look of the RP-03 More */
.in-page details.in-more { display: grid; gap: 16px; }
.in-page details.in-more > summary { cursor: pointer; font-weight: 600; color: var(--ink2); padding: 8px 0; }
.in-page details.in-more > summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }
/* RPV H80 (JUDGE R7 and R8 RP-02 at 390: month labels print over each other and run together in Options, Voyages and
   Supply in use): each month label box is its own size container, so the width of its month picks the label step of
   mstep (b-cargoes.js): every month from 35 px, then one label each 2, 3, 6 or 12 months; the year goes on the first
   shown label of each year. A hidden label keeps its month line. At 720 px and under, Supply in use keeps a readable
   lane and scrolls inside its card, as Voyages does. */
.rp-mlb { container: rpm / inline-size; }
.rp-max .rp-mlb { padding-left: 0; }
.rp-max .rp-mlt { display: flex; flex-direction: column; padding-left: 6px; font-style: normal; --rp-myd: block; }
.rp-omon .rp-mlt { font-style: normal; --rp-myd: inline; }
.rp-omon .rp-mlt em { font-style: normal; }
.rp-mlb[data-my] .rp-mlt em { display: none; }
.rp-mlb[data-my~="1"] .rp-mlt em { display: var(--rp-myd); }
@container rpm (max-width: 59.98px) { .rp-omon .rp-mlt { display: flex; flex-direction: column; --rp-myd: block; } }
@container rpm (max-width: 34.98px) {
  .rp-mlb[data-mk] .rp-mlt { visibility: hidden; }
  .rp-mlb[data-mk~="2"] .rp-mlt { visibility: visible; }
  .rp-mlb[data-my] .rp-mlt em { display: none; }
  .rp-mlb[data-my~="2"] .rp-mlt em { display: var(--rp-myd); }
}
@container rpm (max-width: 16.98px) {
  .rp-mlb[data-mk] .rp-mlt { visibility: hidden; }
  .rp-mlb[data-mk~="3"] .rp-mlt { visibility: visible; }
  .rp-mlb[data-my] .rp-mlt em { display: none; }
  .rp-mlb[data-my~="3"] .rp-mlt em { display: var(--rp-myd); }
}
@container rpm (max-width: 10.98px) {
  .rp-mlb[data-mk] .rp-mlt { visibility: hidden; }
  .rp-mlb[data-mk~="6"] .rp-mlt { visibility: visible; }
  .rp-mlb[data-my] .rp-mlt em { display: none; }
  .rp-mlb[data-my~="6"] .rp-mlt em { display: var(--rp-myd); }
}
@container rpm (max-width: 4.98px) {
  .rp-mlb[data-mk] .rp-mlt { visibility: hidden; }
  .rp-mlb[data-mk~="12"] .rp-mlt { visibility: visible; }
  .rp-mlb[data-my] .rp-mlt em { display: none; }
  .rp-mlb[data-my~="12"] .rp-mlt em { display: var(--rp-myd); }
}
@media (max-width: 720px) {
  .rp-cargoes [data-card="supplyuse"] .rp-vgrid { min-width: 560px; grid-template-columns: 148px minmax(0, 1fr) 112px; }
}
/* RPV H88 (NOTE GATE2 04:54, s60 MOCK-LOOK 1440 IN-b high: "spot, any window" cut by its box; 1280 dock IN-b cut): live,
   the volume row of a supply wraps between its parts, so the words after the volume band take a line of their own and are
   never cut (in.css keeps one line with an ellipsis for the demo) */
.in-sup-r.rp-in-wr { flex-wrap: wrap; row-gap: 2px; }
.in-sup-r.rp-in-wr .in-mut { overflow: visible; text-overflow: clip; }
/* RPV H111 (R21 window price override, RP-p2): the split window price is a value button; its popover sets the price */
button.rp-p2-ov { border: 0; padding: 1px 4px; margin: -1px -4px; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; transition: background .12s, color .12s; }
button.rp-p2-ov:hover { background: var(--acc-t); color: var(--acc-tx); }
button.rp-p2-ov:focus-visible { outline: none; box-shadow: var(--focus); }
button.rp-p2-ov.on { box-shadow: inset 0 -2px 0 var(--acc); }
.rp-p2-ovc { margin-left: 6px; font-weight: 500; }
.rp-p2-ovpop { width: 280px; max-width: calc(100vw - 32px); }
.rp-p2-ovp { display: grid; gap: 8px; padding: 12px 16px; }
.rp-p2-ovh { display: flex; flex-direction: column; gap: 2px; }
.rp-p2-ovh span { font-size: 12px; color: var(--muted); }
.rp-p2-ovf { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.rp-p2-ovf input { width: 96px; height: 32px; padding: 0 8px; border: 1px solid var(--hair); border-radius: 6px; background: var(--card); color: var(--ink); font: 500 14px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; text-align: right; }
.rp-p2-ovf input:focus-visible { outline: none; box-shadow: var(--focus); }
.rp-p2-ovf input[aria-invalid="true"] { border-color: var(--loss); }
.rp-p2-ove { margin: 0; font-size: 12px; line-height: 18px; color: var(--loss); }
.rp-p2-ova { display: flex; justify-content: flex-end; gap: 8px; }
/* RPV H154 (REQ INT to RPV 30, JUDGE round 29; prototype portfolio-prices-spread-vp.png): the build up is one horizontal
   waterfall, its bars float on one scale with no track per row, and one axis row under the Spread row names the scale */
.rp-p4-ax { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0 0; }
.rp-p4-ax > span:first-child { flex: 0 0 38%; }
.rp-p4-ax > b { flex: 0 0 64px; }
.rp-p4-axt { flex: 1 1 auto; position: relative; height: 14px; min-width: 60px; border-top: 1px solid var(--axis); }
.rp-p4-tk { position: absolute; top: 2px; transform: translateX(-50%); font-size: 10px; line-height: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* RPV H158 (JUDGE round 30 RP-01 cell popover, the 4875 prototype ov.css .pp): the live cellpop, 232 px beside the cell.
   Head with the spread large and its unit, the sub line, action rows with the cost at the right, source rows on a grid
   (name on its own line, then how, spread, whole ADP and Take in fixed columns, so no value stands under the next name). */
.rp-popslot.rp-cslot { width: 232px; }
.rp-cpop { border-radius: 10px; font-size: 13px; }
.rp-cpop .rp-phead { height: 40px; gap: 6px; padding: 0 6px 0 14px; border-bottom: 0; }
.rp-cpop .rp-phead b { font-weight: 650; }
.rp-cpop .rp-psp { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.rp-cpop .rp-psp b { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.rp-cpop .rp-psp small { font-size: 11px; font-weight: 500; color: var(--muted); }
.rp-cpop .rp-psp + .rp-px { margin-left: 0; }
.rp-cpop .rp-ppu { text-align: right; padding: 0 14px 4px; font-size: 11px; color: var(--muted); }
.rp-cpop .rp-pacts { padding: 2px 4px 4px; border-top: 0; }
.rp-cpop .rp-pa.rp-par { height: 32px; padding: 0 10px; gap: 8px; font-weight: 550; }
.rp-cpop .rp-pa.rp-par .rp-pl { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-cpop .rp-pd { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink2); }
.rp-cpop .rp-pd.rp-neg { color: var(--loss); } .rp-cpop .rp-pd.rp-posm { color: var(--acc-tx); }
/* RPV H180 (AUD-H169-1): the agreed term note of the Fix a cargo here row, one line under its label */
.rp-cpop .rp-pacts .rp-pagr { margin: -4px 0 4px; padding: 0 10px 0 32px; font-size: 12px; line-height: 16px; }
.rp-cpop .rp-pagr .rp-pagreed span { display: inline; height: auto; }
.rp-cpop .rp-pagr .rp-ptag { padding: 1px 4px; font-size: 12px; font-weight: 600; line-height: 16px; }
.rp-cpop .rp-pbody { padding: 0 14px 6px; }
.rp-cpop .rp-psrc li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 6px; align-items: baseline; padding: 3px 0; }
.rp-cpop .rp-psrc li > span:first-child { grid-column: 1 / -1; }
.rp-cpop .rp-psrc li > span.rp-muted:not(.rp-padp) { grid-column: 1; font-size: 12px; }
.rp-cpop .rp-psrc li > b { grid-column: 2; text-align: right; font-variant-numeric: tabular-nums; }
.rp-cpop .rp-psrc li .rp-padp { grid-column: 3; margin-left: 0; text-align: right; font-variant-numeric: tabular-nums; }
.rp-cpop .rp-psrc li .rp-padp.rp-muted { grid-column: 1 / -1; text-align: left; max-width: none; font-size: 12px; }
.rp-cpop .rp-psrc li .rp-ptake { grid-column: 4; height: 24px; padding: 0 6px; }
/* RPV H160 (JUDGE round 30 RP-01 cell popover, part 2; prototype ov.js ganttHtml pp-gh, pp-gax, pp-gr): the mini source
   Gantt of the live cellpop. One row per source: mark, name with laden days, a 72 px strip (delivery window band, the
   voyage bar, a blocked bar grey, a late bar hatched), the change or the miss at the right. */
.rp-cpop .rp-pgt { border-top: 1px solid var(--hair); margin: 2px 0 0; padding: 6px 10px 6px 14px; display: grid; gap: 3px; }
.rp-cpop .rp-pgh { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink); }
.rp-cpop .rp-pgw { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.rp-cpop .rp-pgax { display: grid; grid-template-columns: 10px minmax(0, 1fr) 72px 58px; gap: 6px; font-size: 10px; color: var(--muted); }
.rp-cpop .rp-pgax > div { display: flex; justify-content: space-between; white-space: nowrap; }
.rp-cpop .rp-pgdefs { position: absolute; width: 0; height: 0; overflow: hidden; }
.rp-cpop .rp-pgl0 { fill: var(--late-a); } .rp-cpop .rp-pgl1 { stroke: var(--late-b); stroke-width: 2; }
.rp-cpop .rp-pgr { display: grid; grid-template-columns: 10px minmax(0, 1fr) 72px 58px; align-items: center; gap: 6px; min-height: 22px; font-size: 12px; }
.rp-cpop .rp-pgr.off .rp-pgs { color: var(--muted); }
.rp-cpop .rp-pgs { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-cpop .rp-pgs small { margin-left: 4px; color: var(--muted); font-size: 11px; }
.rp-cpop .rp-pgsv { display: block; }
.rp-cpop .rp-pgwin { fill: var(--acc-t); }
.rp-cpop .rp-pgb { fill: var(--acc); }
.rp-cpop .rp-pgb.off { fill: var(--dis); }
.rp-cpop .rp-pgb.late { fill: url(#rpGtLate); opacity: 1; }
.rp-cpop .rp-pgm, .rp-cpop .rp-pgr .rp-pd { justify-self: end; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted); }
.rp-cpop .rp-pgm.rp-neg { color: var(--loss); }
.rp-cpop .rp-pgr .rp-pd { font-size: 12px; }
/* RPV H161 (REQ GATE2 to RPV 12:27 CET, MOCK-LOOK RP-02; prototype cg.js map-bar and map-scrub): live, the Play bar holds
   the scrubber of the voyages; the range input stays for the keyboard, visually hidden, and its focus rings the scrubber */
.rp-rt-bar.sc .rp-rt-scrub { flex: 1 1 240px; min-width: 160px; cursor: ew-resize; touch-action: none; border-radius: 4px; }
.rp-rt-bar.sc:has(.rp-rt-rng:focus-visible) .rp-rt-scrub { outline: 2px solid var(--acc); outline-offset: 2px; }
.rp-rt-scrub .rp-rt-ssvg { display: block; width: 100%; overflow: visible; }
.rp-rt-scrub .rp-rt-band { fill: var(--band); }
.rp-rt-scrub .rp-rt-tk { font: 500 11px Inter, system-ui, sans-serif; fill: var(--muted); }
.rp-rt-scrub .rp-rt-ph line { stroke: var(--ink); stroke-width: 2; }
.rp-rt-scrub .rp-rt-ph circle { fill: var(--ink); }
.rp-rt-bar.sc .rp-rt-rng { position: absolute; flex: none; width: 1px; height: 1px; min-width: 0; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }
.rp-rt-bar.sc { position: relative; }
tr.rp-prow.open.hc-off { opacity: 1; }

/* RPV H195 (REQ INT to RPV 41 (2) part 2b): the 4875 voyageBlock of the open plan row (b-overview.js vBlock), the rules of
   proto/app/ui/r6/in.css lines 108 to 131, 144, 145 and 153 to 155, scoped under .rp-pxs; --ix-HH is --ix-hh of tokens.css */
.rp-pxs { --vs-ballast: #B9D3F2; }
:root[data-theme="dark"] .rp-pxs { --vs-ballast: #24476F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rp-pxs { --vs-ballast: #24476F; } }
.rp-pxs .xvoy { display: grid; gap: 6px; font-size: 12.5px; margin-bottom: 10px; }
.rp-pxs .xvr { display: grid; grid-template-columns: 56px 1fr 118px; gap: 10px; align-items: center; }
.rp-pxs .xvr.ax { margin-top: -4px; }
.rp-pxs .xvk { color: var(--ink2); text-align: right; }
.rp-pxs .xvu, .rp-pxs .xvn em { color: var(--ink2); font-style: normal; font-weight: 400; font-size: 11.5px; }
.rp-pxs .xvs { display: flex; height: 18px; border-radius: 2px; overflow: hidden; background: var(--track); position: relative; }
.rp-pxs .xvs i { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 10.5px; color: #fff; min-width: 2px; }
.rp-pxs .xvs .vs-load, .rp-pxs .xvs .vs-discharge { background: var(--ink2); }
.rp-pxs .xvs .vs-waitLoad, .rp-pxs .xvs .vs-waitDischarge { background: var(--muted-l); }
.rp-pxs .xvs .vs-laden { background: var(--ix-hh); }
.rp-pxs .xvs .vs-ballast { background: var(--vs-ballast); color: var(--ink); outline: 1px dashed var(--ix-hh); outline-offset: -1px; }
.rp-pxs .xvt { position: relative; height: 13px; font-size: 10.5px; color: var(--ink2); }
.rp-pxs .xvt span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.rp-pxs .xvt span:first-child { transform: none; } .rp-pxs .xvt span:last-child { transform: translateX(-100%); }
.rp-pxs .xvb { height: 8px; border-radius: 2px; background: var(--track); position: relative; }
.rp-pxs .xvb.xvcs { display: flex; overflow: hidden; gap: 1px; background: transparent; }
.rp-pxs .xvb.xvcs i { position: static; min-width: 1px; border-radius: 0; }
.rp-pxs .xvb.xvcs .vs-load, .rp-pxs .xvb.xvcs .vs-discharge { background: var(--ink2); }
.rp-pxs .xvb.xvcs .vs-waitLoad, .rp-pxs .xvb.xvcs .vs-waitDischarge { background: var(--muted-l); }
.rp-pxs .xvb.xvcs .vs-laden { background: var(--ix-hh); }
.rp-pxs .xvb.xvcs .vs-ballast { background: var(--vs-ballast); outline: 1px solid var(--ix-hh); outline-offset: -1px; }
.rp-pxs .xvn { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-pxs .xvi { position: relative; height: 16px; }
.rp-pxs .xvi span { position: absolute; bottom: 0; display: flex; gap: 2px; transform: translateX(-50%); color: var(--ink); }
.rp-pxs .xvi span[data-ic="anchor"] { transform: none; }
.rp-pxs .xvi svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) { .rp-pxs .xvr { grid-template-columns: 48px 1fr 84px; gap: 6px; } }
/* RPV H194 (REQ INT to RPV 41 (2) part 2): the 4875 proto/app/ui/r6/in.css colWaterfall rules (lines 100 to 107 and 138 to
   142), scoped under .rp-pxm (the open plan row of the (b) Cargo plan), light and dark; the index colours are the tokens.css
   --ix-hh and --ix-jkm of the same 4875 values */
.rp-pxm, .rp-pxs { --wf-sale: #C9D2CD; --wf-cost: #A9B3AE; }
:root[data-theme="dark"] .rp-pxm, :root[data-theme="dark"] .rp-pxs { --wf-sale: #5B6660; --wf-cost: #6D7872; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rp-pxm, :root:not([data-theme="light"]) .rp-pxs { --wf-sale: #5B6660; --wf-cost: #6D7872; } }
/* RPV H196 (ANS ENP to RPV 66): the 4875 in.css 145 canal mark on the strip and 164 to 169 Energy row (gas ledger bar, the
   gas icon before the delivered share), scoped under .rp-pxs */
.rp-pxs .xvs .vcm { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; background: var(--ink); border-radius: 1px; }
.rp-pxs .xvb.en.xvcs .gd-del { background: var(--ix-hh); }
.rp-pxs .xvb.en.xvcs .gd-lbo { background: var(--wf-cost); }
.rp-pxs .xvb.en.xvcs .gd-bf { background: var(--wf-sale); }
.rp-pxs .xvb.en.xvcs .gd-wbo { background: repeating-linear-gradient(45deg, var(--wf-cost) 0 2px, transparent 2px 4px); }
.rp-pxs .xvb.en.xvcs .gd-heel { background: var(--ink2); }
.rp-pxs .xvn .xgi svg { width: 12px; height: 12px; fill: none; stroke: var(--ink2); stroke-width: 1.6; vertical-align: -1px; margin-right: 3px; }
.rp-pxm .xwfc { margin-top: 8px; }
.rp-pxm .xwc { display: block; max-width: 340px; }
.rp-pxm .xwc .wc-sale { fill: var(--wf-sale); } .rp-pxm .xwc .wc-src { fill: var(--ix-hh); } .rp-pxm .xwc .wc-cost { fill: var(--wf-cost); }
.rp-pxm .xwc .wc-sp { fill: var(--g); stroke: var(--gd); stroke-width: 1.5; }
.rp-pxm .xwc .wc-v { font-size: 10.5px; text-anchor: middle; fill: var(--ink); font-variant-numeric: tabular-nums; }
.rp-pxm .xwc .wc-v.b { font-weight: 600; }
.rp-pxm .xwc .wc-l { font-size: 10px; text-anchor: middle; fill: var(--ink2); }
.rp-pxm .xwc .wc-u { font-size: 9.5px; text-anchor: middle; fill: var(--ink2); }
.rp-pxm .xwc .wc-ax { stroke: var(--hair); }
.rp-pxm .xwc .wc-neg { fill: var(--loss); } .rp-pxm .xwc .wc-ix { fill: var(--ix-jkm); } .rp-pxm .xwc .wc-pos { fill: var(--g); }
.rp-pxm .xwc.why .wc-l { font-size: 9.5px; }