/* assets/css/in.css: lane IN (Inputs of every template). Class prefix .in-
   Built on the mockup tokens (inv/design-tokens.md T1, T9). 4/8 grid [KB T5 / QR 12]. Type floor 11 px [QR 26]. */

/* Colours per position code: the mockup SRC_COL order (L691) through the SH tokens; no hex literal in a lane file. */
:root {
  --in-GLF-A: var(--src-1); --in-GLF-B: var(--src-2); --in-GLF-C: var(--src-3); --in-WAF-1: var(--src-4); --in-ARC-1: var(--src-5);
  --in-NEA: var(--src-6); --in-SEA: var(--src-7); --in-JPB: var(--gd-tx);
  --in-HH: var(--ix-hh); --in-TTF: var(--ix-ttf); --in-JKM: var(--ix-jkm); --in-Brent: var(--ix-brent);
  --in-surf: var(--surface); --in-hatch: var(--nop-a); --in-hatch-s: var(--nop-b);
}

.in-page { display: grid; gap: 16px; }
.in-page > .card.xf { margin-bottom: 0; }

/* ---- code chip, kind chip, side pill, commitment pill (IA section 8 forms) ---- */
/* [KB T5.1] one term per thing; [QR 22] side never by colour alone: icon plus word */
.in-code { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 6px; border: 1px solid var(--hair); border-radius: 12px;
  background: var(--in-surf); font-size: 12.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; color: var(--ink);
  font-variant-numeric: proportional-nums; }
/* JUDGE Round 6 cross finding 5 (IN-W "CVP- 1"): body sets tabular-nums (ui.css), so the "1" of a code took a figure
   column width and stood apart from the dash. A code is a name: proportional figures (test code-chip.page.mjs). */
.in-code > i { width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--wc, var(--ink2)); }
.in-kind { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--hair); border-radius: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.in-side { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 12px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.in-side.long { background: var(--acc-t); color: var(--acc-tx); }
.in-side.short { background: var(--info-t); color: var(--info); }
.in-commit { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.in-commit.firm { background: var(--gd); color: var(--on-acc); }
.in-commit.option { background: var(--hair2); color: var(--ink2); }
.in-commit.lead { background: var(--ns-f); color: var(--ns-t); }
.in-formula { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.in-formula > i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.in-mut { color: var(--muted); }
.in-sm { font-size: 12px; }

/* ---- IN-W1 Who is who ---- */
.in-us { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 16px; border-radius: 10px;
  background: var(--added); border: 1px solid var(--hair2); margin-bottom: 16px; }
.in-us-mark { grid-row: span 3; width: 40px; height: 40px; border-radius: 10px; background: var(--gd); color: var(--on-acc); display: flex; align-items: center; justify-content: center; }
.in-us-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; font-weight: 650; line-height: 24px; }
.in-us dl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 12px; margin: 4px 0 0; font-size: 13.5px; }
.in-us dt { color: var(--muted); font-size: 12px; font-weight: 600; line-height: 20px; }
.in-us dd { margin: 0; line-height: 20px; color: var(--ink); }
table.in-who { table-layout: fixed; }
table.in-who col.c-code { width: 112px; } table.in-who col.c-side { width: 148px; } table.in-who col.c-co { width: 24%; }
table.in-who td { vertical-align: top; }
table.in-who td .in-co { font-weight: 600; display: block; line-height: 20px; }
table.in-who td .in-role { color: var(--muted); font-size: 12px; line-height: 18px; display: block; }
table.in-who tbody tr { cursor: pointer; transition: background-color .12s; }
table.in-who tbody tr:hover td { background: var(--added); }
table.in-who tbody tr.on td { background: var(--acc-t); }
table.in-who tbody tr.on td:first-child { box-shadow: inset 3px 0 0 var(--acc); }
table.in-who .in-grp td { background: transparent !important; cursor: default; padding-top: 16px; padding-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--hair); }
table.in-who tr.in-grp { cursor: default; }

/* ---- IN-W2 Long and short ---- */
.in-ls { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 112px 256px; gap: 0; align-items: start; }
.in-ls-col { display: grid; gap: 8px; position: relative; z-index: 1; }
.in-ls-h { display: flex; align-items: baseline; gap: 8px; padding: 0 0 8px; border-bottom: 1px solid var(--hair); margin-bottom: 4px; min-height: 32px; }
.in-ls-h b { font-size: 13.5px; font-weight: 650; }
.in-ls-h .in-tot { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.in-pos { position: relative; display: grid; gap: 4px; padding: 12px 16px 12px 16px; border: 1px solid var(--hair); border-left: 4px solid var(--wc, var(--ink2)); border-radius: 10px;
  background: var(--in-surf); cursor: pointer; transition: box-shadow .12s, border-color .12s, opacity .12s; }
.in-pos:hover { box-shadow: var(--sh-lift); }
.in-pos.on { border-color: var(--acc); border-left-color: var(--wc, var(--acc)); box-shadow: 0 0 0 1px var(--acc); }
.in-pos.dim { opacity: .35; }
.in-pos-top { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.in-pos-top .in-commit { margin-left: auto; }
.in-pos-co { font-size: 13.5px; font-weight: 600; line-height: 20px; }
.in-pos-co span { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 0; } /* LIVE JUDGE R2 cross item 1: the gap is a real space in w.js now */
.in-pos-co .in-pos-role { display: inline-block; } /* LIVE s110 (JUDGE R21 IN-Wa TEXT-BUDGET): the live role is its own label on the same line */
.in-pos-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink2); font-weight: 500; line-height: 20px; }
.in-pos-row .ic { color: var(--muted); }
.in-pos-row b { font-weight: 600; color: var(--ink); }
.in-pos.short { border-left-color: var(--wc); }
.in-ls-mid { position: relative; align-self: stretch; }
.in-ls-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.in-ls-svg path { fill: none; stroke-width: 1.6; transition: opacity .12s, stroke .12s; }
.in-ls-svg path.ship { stroke: var(--plain-d); }
.in-ls-svg path.port { stroke: var(--plain-d); stroke-dasharray: 3 2; }
.in-ls-svg path.on { stroke: var(--acc); stroke-width: 2; }
.in-ls-svg path.dim { opacity: .2; }
.in-ls-svg .lab rect { fill: var(--card); stroke: var(--hair); }
.in-ls-svg .lab text { font-size: 11.5px; font-weight: 600; fill: var(--ink2); }
.in-ls-svg .lab.on rect { stroke: var(--acc); fill: var(--acc-t); } .in-ls-svg .lab.on text { fill: var(--acc-d); }
.in-ls-svg .lab.dim { opacity: .3; }
.in-ls-asset { position: absolute; left: 8px; right: 8px; text-align: center; font-size: 12px; color: var(--muted); font-weight: 600; line-height: 16px; z-index: 1; }

.in-row { grid-template-columns: minmax(0, 1fr) 160px 60px; align-items: center; gap: 0 12px; padding: 12px 12px 12px 16px; }
.in-row-a, .in-row-b { display: grid; gap: 4px; min-width: 0; }
.in-row-c { justify-self: end; }
.in-row .in-pos-top { gap: 8px; min-width: 0; }
.in-row .in-pos-co { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.in-row .in-pos-row { flex-wrap: nowrap; white-space: nowrap; }
.in-pos-row > span { display: inline-flex; align-items: center; gap: 4px; }
/* LIVE s70 (JUDGE R5 IN-W, 1280 dock tile "3.10   to   3.40   million MMBtu"): a tile volume line is one block of text, so
   its mark spans keep the word spaces and take no flex gap (the row form: .in-row .in-pos-row.in-vol) */
.in-pos-row.in-volt { display: block; }
.in-pos-row.in-volt > span { display: inline; }

/* ---- IN-W3 Pair rules ---- */
.in-pr-wrap { display: grid; gap: 16px; }
table.in-pr { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; margin: -4px; width: calc(100% + 8px); }
table.in-pr th { font-size: 12px; font-weight: 600; color: var(--muted); text-align: left; padding: 0 8px 4px; vertical-align: bottom; line-height: 16px; }
table.in-pr th small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted-l); }
table.in-pr th[scope="row"] { padding: 0 12px 0 0; vertical-align: middle; width: 148px; }
table.in-pr td { height: 56px; border-radius: 8px; padding: 8px 12px; vertical-align: middle; background: var(--added); border: 1px solid var(--hair2);
  font-size: 13px; font-weight: 600; color: var(--muted); transition: background-color .12s, border-color .12s, box-shadow .12s; }
table.in-pr td .in-cnt { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }
table.in-pr td.ok { color: var(--ink2); }
table.in-pr td.use { background: var(--acc-t); border-color: var(--acc-l); color: var(--acc-tx); }
table.in-pr td.use .in-cnt { color: var(--acc-tx); }
table.in-pr td.no { background: repeating-linear-gradient(45deg, var(--in-hatch) 0 4px, var(--in-hatch-s) 4px 5px); color: var(--muted); }
table.in-pr td.nd { color: var(--muted-l); font-weight: 500; }
table.in-pr td.blank { background: transparent; border-style: dashed; border-color: var(--hair); }
table.in-pr td.hl { box-shadow: 0 0 0 2px var(--acc); }
table.in-pr td[data-tip] { cursor: help; }
.in-pr-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---- tip (until SH publishes XM.ui.tip) ---- */
.in-tip { position: fixed; z-index: 80; pointer-events: none; background: var(--surface); border: 1px solid var(--hair); border-radius: 10px;
  box-shadow: var(--sh-pop); padding: 12px; font-size: 12.5px; line-height: 1.45; max-width: 320px; color: var(--ink); opacity: 0; transform: translateY(2px); transition: opacity .12s, transform .12s; }
.in-tip.show { opacity: 1; transform: none; }
.in-tip b { display: block; font-size: 13.5px; font-weight: 650; margin-bottom: 2px; }

/* ---- states ---- */
.in-state { display: grid; justify-items: center; gap: 8px; padding: 32px 16px; text-align: center; color: var(--ink2); }
.in-state .ic { color: var(--muted); }
.in-state b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.in-skel { border-radius: 8px; background: linear-gradient(90deg, var(--track) 0, var(--added) 40%, var(--track) 80%); background-size: 200% 100%; animation: in-sh 1.2s linear infinite; }
@keyframes in-sh { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .in-skel { animation: none; } }

@media (max-width: 1100px) {
  .in-ls { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .in-ls-mid, .in-ls-svg { display: none; }
}

/* ---- IN-b1 Sale contract, IN-b3 Vessel (mockup .sale, .wt, .vt, .ves L265 to L281 in the 4/8 grid) ---- */
.in-sale { display: grid; gap: 16px; }
.in-sale-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.in-sale-top .chip.lg { font-size: 15px; font-weight: 700; padding: 4px 12px 4px 8px; }
.in-iconv { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; }
.in-iconv .ic { color: var(--ink2); }
.in-vol { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; }
.in-vol-n { font-size: 15px; font-weight: 700; text-align: right; line-height: 12px; }
.in-vb { height: 10px; }
.in-vol-ax { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.in-vol-ax b { color: var(--ink); font-weight: 600; }
.in-lbl { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
table.in-wt { width: 100%; border-collapse: separate; border-spacing: 0 4px; }
table.in-wt th { width: 64px; text-align: right; padding-right: 12px; font-size: 12.5px; font-weight: 500; color: var(--ink2); white-space: nowrap; }
.in-wbar { display: flex; gap: 2px; height: 24px; border-radius: 6px; overflow: hidden; }
.in-ws { display: flex; align-items: center; justify-content: center; padding: 0 8px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.in-ws.own { background: var(--ix-jkm); color: var(--on-acc); }
.in-ws.nb { background: color-mix(in srgb, var(--ix-jkm) 40%, var(--card)); color: var(--ink); }
.in-ves { display: grid; gap: 16px; }
.in-ves-id { display: flex; align-items: center; gap: 12px; }
.in-ves-id b { font-size: 15px; font-weight: 700; }
.in-ves-id .ic { color: var(--ink2); }
table.in-vt { width: 100%; border-collapse: collapse; }
table.in-vt th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 0 8px; }
table.in-vt td { padding: 4px 0; font-size: 12.5px; color: var(--ink2); height: 28px; }
table.in-vt td:first-child { width: 64px; }
table.in-vt td.b { width: 40%; padding-right: 12px; }
table.in-vt td.vv { width: 56px; font-weight: 600; color: var(--ink); text-align: right; padding-right: 16px; }
.in-ves-row { display: flex; flex-wrap: wrap; gap: 8px; }
.in-ves-row .chip { font-size: 12.5px; }
/* range bar (mockup .vb, .volb L273 to L275): track, fill, 2 px ink tick for the value */
.in-rb { position: relative; height: 8px; border-radius: 4px; background: var(--track); }
.in-rb > i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.in-rb > b { position: absolute; top: -4px; width: 2px; height: 16px; border-radius: 1px; background: var(--ink); }
.in-rb.in-vb { height: 10px; border-radius: 5px; } .in-rb.in-vb > i { border-radius: 5px; }
table.in-vt td.vv { white-space: nowrap; }
table.in-vt td:first-child { width: 72px; padding-right: 12px; }
.in-ws.own { color: var(--on-fill); }

/* ---- IN-b2 Supply (mockup L282 to L290 .sups / .sup) ---- */
/* [KB T5 / QR 12] 4/8 grid; [QR 24] one hero line per tile (code), quiet secondary text; equal tile heights per row */
.in-sups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; align-items: stretch; }
.in-sup { background: var(--surface); border: 1px solid var(--hair); border-top: 4px solid var(--wc); border-radius: 10px; padding: 12px 16px;
  display: grid; grid-template-rows: auto auto auto auto auto 1fr auto; gap: 8px; min-width: 0; transition: box-shadow var(--t-fast, .12s), border-color var(--t-fast, .12s); }
.in-sup:hover { box-shadow: var(--sh-1, 0 2px 8px rgba(0,0,0,.06)); }
.in-sup-h { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 24px; }
.in-sup-h b { font-weight: 650; letter-spacing: .01em; }
.in-sup-side { margin-left: auto; height: 24px; }
.in-sup-co { display: grid; gap: 0; min-width: 0; line-height: 16px; }
.in-sup-co b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.in-sup-co .in-mut { font-size: 12px; font-weight: 500; }
.in-sup-f { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.in-sup-f > i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.in-sup-r { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink2); line-height: 16px; min-width: 0; white-space: nowrap; }
.in-sup-r .ic { color: var(--muted); flex: none; }
.in-sup-r .n { font-variant-numeric: tabular-nums; }
.in-sup-r .in-mut { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.in-lift { min-height: 34px; align-self: end; }
.in-lift-svg { display: block; overflow: visible; }
.in-sup-u { min-height: 20px; }
/* LIVE s79 (s59 page read, IN-b 390 and 1440: "0in the plan, no limit"): in live mode the count is a data-src mark span,
   and an inline-flex chip turns the text after it into a flex item whose first space collapses. An inline block with a
   20 px line keeps every space of the text (chip-space.page.mjs) [KB T2 text reads as written] */
.in-used { display: inline-block; vertical-align: middle; height: 20px; line-height: 20px; white-space: nowrap; padding: 0 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600;
  background: var(--hair2); color: var(--muted); font-variant-numeric: tabular-nums; }
.in-used.on { background: var(--acc-t); color: var(--acc-tx, var(--acc-d)); }

/* ---- IN-b4 Contract rules (mockup .rules .rrow, rule value popover M 3) ---- */
/* [KB T6] same pill as the matrix rule pills; [QR 37] five states per control: hover, focus, pressed, disabled from ui.css */
.in-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.in-rule { display: grid; gap: 8px; align-content: start; padding: 12px; border: 1px solid var(--hair2); border-radius: 10px; background: var(--surface); }
.in-rule.on { border-color: var(--acc-l); }
.in-rule .rpill { justify-self: start; }
.in-rule-d { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--muted); }
@media (max-width: 1100px) { .in-rules { grid-template-columns: minmax(0, 1fr); } }
.pop.in-rpop { width: 300px; padding: 0; }
.in-rp { display: grid; gap: 12px; padding: 16px; }
.in-rp-h { display: grid; gap: 2px; }
.in-rp-h b { font-size: 13.5px; font-weight: 650; }
.in-rp-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px 52px; gap: 8px; align-items: center; }
.in-rp-row .btn.sm { min-width: 28px; height: 28px; padding: 0; justify-content: center; }
.in-rp-row input[type=range] { width: 100%; accent-color: var(--acc); }
.in-rp-v { text-align: right; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.in-rp-c { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px; border-radius: 8px; background: var(--hair2); font-size: 12.5px; }
.in-rp-c b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.in-rp-c b.pos { color: var(--acc-tx, var(--acc-d)); } .in-rp-c b.neg { color: var(--loss); }
.in-rp-a { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- IN-b5 Locks (grid per delivery window, popover, lock list, paste) [KB T6 tables, QR 26 11 px floor] ---------- */
.in-lk { display: grid; gap: 16px; }
.in-lk-grid { display: grid; gap: 4px; }
.in-lk-c { min-width: 0; }
.in-lk-h { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; padding-bottom: 4px; }
.in-lk-rh { display: flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.in-lk-cell { display: grid; align-content: center; justify-items: start; gap: 4px; height: 48px; padding: 4px 8px; border: 1px solid var(--hair2); border-radius: var(--r-sm, 6px);
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--t-fast, .12s), background var(--t-fast, .12s), box-shadow var(--t-fast, .12s); }
.in-lk-cell:hover { border-color: var(--acc-l); box-shadow: var(--sh-lift); }
.in-lk-cell:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.in-lk-cell:active { transform: translateY(1px); }
.in-lk-cell.fix { border-color: var(--acc); background: var(--acc-t); }
.in-lk-cell.block { border-style: dashed; border-color: var(--muted-l); background: repeating-linear-gradient(135deg, var(--nop-a) 0 6px, var(--nop-b) 6px 12px); }
.in-lk-p { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.in-lk-p i { width: 8px; height: 8px; border-radius: 2px; background: var(--wc); flex: none; }
.in-lk-p span { color: var(--muted); font-size: 11px; }
.in-lk-m { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; line-height: 14px; font-weight: 600; color: var(--acc-tx); }
.in-lk-cell.block .in-lk-m { color: var(--ink2); }
.in-lk-sub { margin: 8px 0 0; font-size: 13px; font-weight: 600; }
.in-lk-none { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1px dashed var(--hair); border-radius: 8px; color: var(--muted); font-size: 12.5px; }
.in-lk-t td { padding: 8px 12px; font-size: 13px; }
.in-lk-w { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.in-lk-t tr.bad td { color: var(--err); }
.in-lk-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--ink2); }
.in-lk-tag.fix { background: var(--acc-t); color: var(--acc-tx); }
.in-lk-tag.block { background: var(--surface-2); color: var(--ink2); }
.in-lk-pop { width: 340px; }
.in-lk-opts { display: grid; gap: 4px; }
.in-lk-o { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--hair2); border-radius: 8px;
  background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--t-fast, .12s), background var(--t-fast, .12s); }
.in-lk-o:hover { border-color: var(--acc-l); }
.in-lk-o.on { border-color: var(--acc); background: var(--acc-t); }
.in-lk-o:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.in-lk-ot { display: grid; gap: 2px; font-size: 12px; }
.in-lk-ot b { font-size: 13px; }
.in-lk-o .num { font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.in-lk-o .pos { color: var(--acc-tx); } .in-lk-o .neg { color: var(--loss); }
.in-lk-lab { display: grid; gap: 2px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.in-lk-lab span { font-weight: 400; font-size: 12px; }
.in-lk-ta { width: 100%; box-sizing: border-box; min-height: 104px; padding: 8px 12px; border: 1px solid var(--hair); border-radius: 8px; background: var(--card); color: var(--ink);
  font: 13px/20px ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.in-lk-ta:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.in-lk-prev { margin-top: 12px; max-height: 200px; overflow-y: auto; }
.in-lk-pop { width: 368px; }
.in-lk-ta { border-color: var(--ctl, var(--hair)); }
.in-lk-ln { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; width: 64px; }
.in-lk-t tr.bad .in-lk-ln { color: var(--err); }
.in-lk-v { font-weight: 600; } .in-lk-v.pos { color: var(--acc-tx); } .in-lk-v.neg { color: var(--loss); }
.in-lk-hint { display: flex; align-items: center; gap: 4px; margin: 8px 0 0; font-size: 12px; color: var(--err); }
.in-lk-hint.ok { color: var(--muted); }
/* cargo and source stack in two lines so a 1280 px column (69 px cell) never clips [QR 26, KB T6 no clipped label] */
.in-lk-cell { height: 56px; gap: 2px; padding: 4px 8px; }
.in-lk-p { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 4px; align-items: center; line-height: 16px; }
.in-lk-p span { grid-column: 2; line-height: 14px; }
@media (max-width: 1180px) { .in-lk-cell { padding: 4px; } .in-lk-grid { gap: 2px; } }
.in-lk-grid { grid-template-columns: var(--lk-rh, 64px) repeat(var(--lk-n, 12), minmax(0, 1fr)); }
@media (max-width: 1180px) { .in-lk-grid { --lk-rh: 44px; } }

/* ---------- IN-a (template a) Basics, summary band, readiness [KB T6 KPI row, QR 48 read-only facts apart] ---------- */
.in-band { display: grid; grid-template-columns: repeat(var(--band-n, 6), minmax(0, 1fr)); gap: 16px; padding: 16px 24px; border-radius: var(--r-lg, 12px); background: var(--gd); color: var(--gd-tx, #fff); }
/* LIVE s107 (REQ ENM to LIVE 00:27, IN-d1, IN-d2): a wide cell (IN.band {wide: true}) takes two columns at every band width */
.in-band > div.wide { grid-column: span 2; }
.in-band span { display: block; font-size: 11px; font-weight: 600; opacity: .75; }
.in-band b { display: block; margin-top: 4px; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* COORDINATOR items 59 (a) (1) and 60 (a), LOOK R1 cross item 3: a span inside a band value (a data-src mark in live
   mode) is an inline part of the value, never a label (every band: (a), (f), IN-W) */
.in-band b span { display: inline; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; opacity: 1; }
.in-a-grid { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 16px; align-items: start; }
.in-a-grid > .card.xf { margin-bottom: 0; }
.in-hero { margin: 0 0 12px; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.in-per { display: grid; gap: 2px; height: 56px; }
.in-per > div { display: grid; align-content: center; gap: 2px; padding: 0 16px; color: #fff; cursor: default; }
/* LIVE s52 (LOOK s45 IN-a1): white text, so the fill tokens (4.5:1 or more); a stays the darker one as in FM */
.in-per-a { background: var(--acc-fill-h); border-radius: 8px 0 0 8px; }
.in-per-b { background: var(--acc-fill); border-radius: 0 8px 8px 0; }
.in-per b { font-size: 13.5px; font-weight: 650; white-space: nowrap; }
.in-per span { font-size: 12px; opacity: .9; white-space: nowrap; font-variant-numeric: tabular-nums; }
.in-per-ax { display: grid; gap: 2px; margin-top: 4px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.in-per-ax2 { display: flex; justify-content: space-between; gap: 8px; }
.in-facts { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: 16px 40px; margin: 24px 0 0; }
.in-facts dt { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.in-facts dd { margin: 4px 0 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 8px; }
.in-src { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; height: 18px; border-radius: 999px; background: var(--surface-2); font-size: 11px; color: var(--ink2); font-weight: 500; }
.in-src i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.in-ready-h { margin: 0; font-size: 15px; font-weight: 650; }
.in-ready-n { margin: 8px 0 12px; color: var(--muted); font-size: 13px; }
.in-ready-n b { font-size: var(--fs-hero, 28px); font-weight: 700; color: var(--ink); margin-right: 4px; font-variant-numeric: tabular-nums; }
.in-ready ul { list-style: none; margin: 0 0 8px; padding: 0; }
.in-ready li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--hair2); font-size: 13px; }
.in-ready li b { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.in-ok { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--acc); color: var(--on-acc, #fff); }
@media (max-width: 1280px) { .in-band { grid-template-columns: repeat(3, minmax(0, 1fr)); } .in-facts { grid-template-columns: repeat(2, minmax(0, auto)); } }
.in-band { color: var(--on-acc, #fff); }
.in-band b { color: inherit; }
.in-a-grid { align-items: stretch; }
.in-facts { grid-template-columns: repeat(4, auto); justify-content: space-between; }
.in-facts dd { white-space: nowrap; }
@media (max-width: 1280px) { .in-facts { grid-template-columns: repeat(2, auto); justify-content: start; } }
/* LIVE s70 (JUDGE R5 IN-a1, s54 1440: the Scenario name "Das Island ADP 20..." ran out of the Basics card under the
   Readiness card): four fixed columns of one line facts were wider than the card beside Readiness. Now the facts wrap as
   whole facts: a fact keeps its one line while it fits and goes to the next line when it does not; only a fact wider than
   the card itself breaks between its words. */
.in-facts { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 16px 40px; }
.in-facts > div { min-width: 0; max-width: 100%; }
.in-facts dd { white-space: normal; flex-wrap: wrap; }
.in-per-ax2 span, .in-per-ax > span { white-space: nowrap; }
.in-due { margin-top: 8px; }
.in-due td { font-size: 13px; }
.in-due tr.in-due-tot td { border-bottom: 0; border-top: 1px solid var(--hair); font-weight: 600; }
.in-a-grid .in-lk-sub { margin-top: 24px; }

/* ---------- IN-a2 to IN-a9 (views/in/a2.js), 4 px grid, colours only through SH tokens ---------- */
.in-a-grid.one { grid-template-columns: minmax(0, 1fr); }
.in-a-main { display: grid; gap: 16px; min-width: 0; }
.in-a-main > .card.xf { margin-bottom: 0; }
.in-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px; font-size: 13px; color: var(--muted); }
.in-sm { font-size: 12px; }
.in-none { margin: 8px 0 0; }
/* value line: before, after, signed delta [KB T6 before and after] */
.in-vl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; margin: 0 0 16px; border: 1px solid var(--hair); border-radius: var(--r-md, 8px); background: var(--surface-2); transition: background var(--t-fast, .15s), border-color var(--t-fast, .15s); }
.in-vl[data-s="updating"] { border-color: var(--acc); background: var(--acc-t); }
.in-vl-l { font-size: 11px; font-weight: 600; color: var(--ink2); }
.in-vl-t { font-size: 13px; font-weight: 600; }
.in-vl-ba { display: inline-flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; color: var(--muted); }
.in-vl-ba .ic { align-self: center; }
.in-vl-v { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.in-vl-u { font-size: 12px; color: var(--ink2); }
.in-vl .in-mut { color: var(--ink2); }
.in-vl-d { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.in-vl-d.up { color: var(--acc-tx); } .in-vl-d.down { color: var(--loss); }
.in-vl .btn { margin-left: auto; }
.in-vl2 { flex-wrap: nowrap; gap: 16px; }
.in-vl-m { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.in-vl-h, .in-vl-r { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.in-vl-h .in-vl-t { overflow-wrap: anywhere; }
.in-vl2 > .btn { flex: none; align-self: center; }
/* forms */
.in-form { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.in-form legend { padding: 0; margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.in-form-r { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.in-form-r label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.in-form-r .inp { min-width: 120px; color: var(--ink); }
.in-form-r .inp.num { min-width: 0; width: 88px; text-align: right; font-variant-numeric: tabular-nums; }
.in-form-r .inp[aria-invalid="true"] { border-color: var(--loss); }
.in-form > .in-mut { margin: 8px 0 0; }
.in-fe { margin: 8px 0 0; font-size: 12px; color: var(--loss); }
.in-affix { display: inline-flex; align-items: center; gap: 4px; }
.in-affix i { font-style: normal; font-size: 12px; color: var(--muted); }
.in-ba { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 13px; font-variant-numeric: tabular-nums; }
.in-steps { list-style: none; margin: 8px 0 0; padding: 0; }
.in-steps li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; border-top: 1px solid var(--hair2); font-size: 13px; }
/* plant chart: HTML bars so text keeps its real size at every width [KB T9 no tiny text] */
.in-pchart { display: grid; grid-template-columns: 32px minmax(0, 1fr) 96px; gap: 8px; height: 248px; margin: 16px 0 24px; }
.in-pc-y, .in-pc-r, .in-pc-plot { position: relative; height: 216px; }
.in-pc-y > span { position: absolute; right: 0; transform: translateY(50%); font-size: var(--fs-tick, 11px); color: var(--muted); font-variant-numeric: tabular-nums; }
.in-pc-grid i { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--grid); }
.in-pc-grid i.in-pc-cap { border-top: 1.5px dashed var(--ink2); opacity: .7; }
.in-pc-cols { position: absolute; inset: 0; display: grid; gap: 4px; }
.in-pc { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; cursor: default; }
.in-pc-bar { position: relative; display: flex; flex-direction: column-reverse; height: 100%; justify-content: flex-start; }
.in-pc-bar i { display: block; width: 100%; transition: opacity var(--t-fast, .15s); }
.in-pc-bar i:last-child { border-radius: 2px 2px 0 0; }
.in-pc:hover .in-pc-bar i { opacity: .85; }
.in-pc[data-hit] .in-pc-bar { outline: 1.5px solid var(--warn); outline-offset: 1px; border-radius: 2px; }
.in-pc-v { position: absolute; left: 50%; transform: translate(-50%, -4px); font-size: var(--fs-tick, 11px); font-weight: 600; color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.in-pc-x { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; font-size: var(--fs-tick, 11px); color: var(--muted); white-space: nowrap; }
.in-pc:nth-child(even) .in-pc-x { display: none; }
.in-pc-dl, .in-pc-capl { position: absolute; left: 0; transform: translateY(50%); font-size: 12px; font-weight: 600; white-space: nowrap; }
.in-pc-capl { color: var(--ink2); transform: translateY(-100%); }
.in-tr1 { background: var(--acc-dd); } .in-tr2 { background: var(--acc-d); } .in-tr3 { background: var(--gl); }
.in-tr1t { color: var(--acc-dd); } .in-tr2t { color: var(--acc-d); } .in-tr3t { color: var(--acc-tx); }
/* 8.9 LOOK contrast (FINDING-INT-4): in dark --acc-dd and --acc-d under text are 4.3 and 3.8:1 on the card; the labels
   take lighter greens of the same order (tr1 darkest, tr3 lightest), each 4.5:1 or more on card and surface */
:root[data-theme="dark"] .in-tr1t { color: #3A9F76; } :root[data-theme="dark"] .in-tr2t { color: var(--acc); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .in-tr1t { color: #3A9F76; } :root:not([data-theme="light"]) .in-tr2t { color: var(--acc); } }
.in-sw { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 2px; vertical-align: -1px; }
.in-trt { margin-top: 8px; }
/* storage gauge */
.in-tank { margin: 16px 0 24px; }
.in-tank-bar { position: relative; height: 28px; border-radius: var(--r-sm, 6px); background: var(--track); overflow: visible; }
.in-tank-bar i { position: absolute; top: 0; bottom: 0; }
.in-tk-out { background: var(--loss-l); } .in-tk-near { background: var(--ns-f); } .in-tk-safe { background: var(--acc-t); }
.in-tank-bar i:first-child { border-radius: var(--r-sm, 6px) 0 0 var(--r-sm, 6px); } .in-tank-bar i:nth-child(5) { border-radius: 0 var(--r-sm, 6px) var(--r-sm, 6px) 0; }
.in-tk-open { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); cursor: default; }
.in-tank-ax, .in-tank-cargo { position: relative; height: 20px; margin-top: 4px; }
.in-tank-ax span { position: absolute; transform: translateX(-50%); font-size: var(--fs-tick, 11px); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.in-tank-ax span:first-child { transform: none; }
.in-tank-ax .in-tk-ol { top: 0; color: var(--ink); font-weight: 600; transform: translateX(-100%); padding-right: 8px; }
.in-tank-cargo span { position: absolute; top: 4px; height: 16px; border-top: 2px solid var(--acc-d); font-size: var(--fs-tick, 11px); color: var(--ink2); text-align: center; padding-top: 2px; white-space: nowrap; }
.in-kv td { font-size: 13px; } .in-kv td.num { font-weight: 600; }
/* tiles (berth, canals, guardrails) */
.in-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: 12px; margin: 16px 0 0; }
.in-tiles > div { padding: 12px 16px; border: 1px solid var(--hair); border-radius: var(--r-md, 8px); background: var(--surface); }
.in-tiles span { display: block; font-size: 12px; color: var(--muted); }
.in-tiles b span, .in-tiles em span, .in-tiles span span { display: inline; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; } /* LIVE JUDGE R2 cross item 2: a mark inside a tile value or label stays inline (IN-a8 "24k to 228k m³" on one line) */
.in-tiles b { display: block; margin-top: 4px; font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.in-tiles em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--muted); }
.in-a-main .card.xf .in-tiles:first-child { margin-top: 0; }
/* fleet lanes */
.in-gl { margin-top: 24px; font-size: 12px; }
.in-gl-h, .in-gl-r { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; }
.in-gl-h > div { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); color: var(--muted); font-size: var(--fs-tick, 11px); }
.in-gl-h > div span { border-left: 1px solid var(--hair2); padding-left: 4px; }
.in-gl-r { height: 32px; border-top: 1px solid var(--hair2); }
.in-gl-t { position: relative; height: 16px; }
.in-gl-on { position: absolute; top: 4px; height: 8px; border-radius: 4px; background: var(--acc-t); }
.in-gl-out { position: absolute; top: 0; height: 16px; border-radius: 4px; background: var(--warn); color: var(--on-fill); display: flex; align-items: center; padding: 0 6px; overflow: hidden; cursor: default; }
.in-gl-out span { font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--on-fill); }
.in-ch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.in-ch-t { display: grid; gap: 4px; font-size: 13px; }
/* contracts grid */
.in-ct { display: grid; font-size: 13px; }
.in-ct-h, .in-ct-r { display: grid; grid-template-columns: 128px 168px 112px 96px minmax(0, 1fr) 72px; align-items: center; gap: 8px 12px; }
.in-ct-h { padding: 0 8px 8px; font-size: 12px; color: var(--muted); }
.in-ct-h .in-ct-m span { text-align: center; font-size: var(--fs-tick, 11px); }
.in-ct-r { padding: 8px; border-top: 1px solid var(--hair2); }
.in-ct-r.open { background: var(--surface-2); border-radius: var(--r-md, 8px); }
.in-ct-b, .in-ct-d, .in-ct-n { display: grid; gap: 2px; min-width: 0; }
.in-ct-n { text-align: right; } .in-ct-n b { font-size: 15px; font-variant-numeric: tabular-nums; }
.in-ct-m { display: grid; gap: 2px; }
.in-mc { display: grid; justify-items: center; padding: 4px 0; border-radius: 4px; background: var(--surface-2); cursor: default; }
.in-mc b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.in-mc i { height: 8px; font-style: normal; font-size: 8px; line-height: 8px; letter-spacing: 1px; color: var(--acc-d); }
.in-mc.z b { color: var(--muted-l); font-weight: 500; }
.in-mc:hover { background: var(--acc-t); }
.in-fx { justify-self: start; display: inline-flex; align-items: center; min-height: 28px; padding: 0 8px; border: 1px solid var(--hair); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; }
.in-fx:hover { border-color: var(--acc); } .in-fx:focus-visible { outline: 0; box-shadow: var(--focus); }
.in-fx.chg, .in-ct-t.chg { color: var(--acc-tx); border-color: var(--acc); background: var(--acc-t); }
.in-ct-t { justify-self: start; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--hair); font-size: 12px; white-space: nowrap; }
.in-ced { grid-column: 1 / -1; display: grid; gap: 4px; padding: 12px 0 0; }
.in-ced .in-form { margin: 0 0 8px; }
.in-spot td { font-size: 13px; } .in-spot tr.in-off td { color: var(--muted); }
.tnum { font-variant-numeric: tabular-nums; }
/* voyages */
.in-vy { display: grid; font-size: 13px; }
.in-vy-r { display: grid; grid-template-columns: 136px minmax(0, 1fr) 96px 112px 96px; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid var(--hair2); }
.in-vy-p { display: grid; gap: 2px; }
.in-vy-t { position: relative; height: 16px; margin-right: 64px; }
.in-vy-t i { position: absolute; left: 0; top: 4px; height: 8px; border-radius: 0 4px 4px 0; background: var(--acc-d); cursor: default; }
.in-vy-t i:hover { background: var(--acc-dd); }
.in-vy-t > span { position: absolute; top: 0; padding-left: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.in-vy-r > .num { text-align: right; font-variant-numeric: tabular-nums; }
.in-vy-ax { min-height: 32px; font-size: 12px; color: var(--muted); }
.in-vy-ax .in-vy-t > span { transform: translateX(-50%); padding: 0; font-weight: 500; font-size: var(--fs-tick, 11px); color: var(--muted); }
.in-vy-ax .in-vy-t > span:first-child { transform: none; }
/* approvals */
.in-ap th.c, .in-ap td.c { text-align: center; }
.in-no { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--loss-l); color: var(--err); }
/* nominations */
.in-ns { display: grid; gap: 8px; margin-top: 8px; }
.in-ns-r { display: grid; grid-template-columns: 72px minmax(0, 1fr) 176px; align-items: center; gap: 12px; font-size: 13px; }
.in-ns-t { position: relative; height: 24px; border-right: 2px dotted var(--ink2); }
.in-ns-t i { position: absolute; top: 0; height: 24px; border-radius: 4px 0 0 4px; background: var(--acc-t); display: flex; align-items: center; justify-content: center; }
.in-ns-t i.b { background: var(--acc-fill); } .in-ns-t i.b span { color: var(--on-acc); } /* LIVE JUDGE R1 item 6: white 6.4:1 light, 4.8:1 dark (dark --acc-d was 4.41:1) */
.in-ns-t i span { font-size: 12px; font-weight: 600; color: var(--acc-tx); white-space: nowrap; }
.in-ns-ax .in-ns-t { height: 16px; border-right: 0; }
.in-ns-ax .in-ns-t > span { position: absolute; font-size: var(--fs-tick, 11px); color: var(--muted); white-space: nowrap; } /* LIVE JUDGE R2 IN-a8: the label span only; the day count mark inside stays in the flow of its label */
.in-ns-l { color: var(--muted); }
/* LIVE s70 (JUDGE R5 IN-a8, s54 1280 dock: the Stage 3 bar cut its label to "days windo"): a short notice gives a bar
   narrower than its label, and the centred label ran out of the bar, white on the card. Each bar is a size container; a
   bar of 112 px or less puts its whole label beside it, left of the bar (the free side of the track), in the accent text
   colour. At 600 px and under the "days before" words go under the track, so the track keeps its width. */
.in-ns-t i { container: in-ns-bar / inline-size; }
@container in-ns-bar (max-width: 112px) {
  .in-ns-t i > span { position: absolute; right: calc(100% + 6px); }
  .in-ns-t i.b span, .in-ns-t i span { color: var(--acc-tx); } /* on the card, not on the fill (token-contrast reads the fill rule) */
}
@media (max-width: 600px) {
  .in-ns-r { grid-template-columns: 56px minmax(0, 1fr); row-gap: 2px; }
  .in-ns-r > .in-ns-n { grid-column: 2; }
  .in-ns-ax > span:last-child { display: none; }
}
/* readiness step list (IN-a9) */
.in-rd9 { list-style: none; margin: 0; padding: 0; }
.in-rd9 li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid var(--hair2); }
.in-rd9 li > span:nth-child(2) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 13px; }
@media (max-width: 1280px) { .in-ct-h, .in-ct-r { grid-template-columns: 112px 152px 104px 88px minmax(0, 1fr) 56px; gap: 8px; } .in-vy-r { grid-template-columns: 112px minmax(0, 1fr) 80px 96px 80px; } }
.in-mc.in-mc-all { grid-auto-flow: column; justify-content: center; align-items: baseline; gap: 8px; background: repeating-linear-gradient(90deg, var(--surface-2) 0 calc(100% / 15 - 2px), transparent calc(100% / 15 - 2px) calc(100% / 15)); }
.in-mc.in-mc-all i { height: auto; font-size: 12px; letter-spacing: 0; color: var(--muted); line-height: inherit; }
.in-mc i { display: flex; gap: 2px; align-items: center; justify-content: center; }
.in-mc i u { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--acc-d); text-decoration: none; }
.in-a-grid > .card.xf { align-self: start; }
/* contracts: line 1 = terms, line 2 = the 15 month cells at full card width (4b shot 11) */
.in-ct-h, .in-ct-r { grid-template-columns: minmax(144px, 1.2fr) 184px minmax(136px, 1fr) minmax(120px, 1fr) 120px; }
.in-ct-r { padding: 12px 8px; }
.in-ct-r > .in-ct-m { grid-column: 1 / -1; }
.in-mc s { text-decoration: none; font-size: var(--fs-tick, 11px); color: var(--muted); white-space: nowrap; }
.in-mc { gap: 2px; padding: 4px 0 6px; }
.in-mc.in-mc-all { min-height: 52px; align-content: center; }
.in-ct-n { grid-template-columns: auto; justify-items: end; }
.in-spot td.tnum, .in-spot td.num { white-space: nowrap; }
@media (max-width: 1280px) { .in-ct-h, .in-ct-r { grid-template-columns: minmax(128px, 1.2fr) 176px minmax(128px, 1fr) minmax(112px, 1fr) 112px; gap: 8px; } }
.in-ns-t i, .in-gl-out, .in-vy-t i, .in-pc-bar i { font-style: normal; }
.in-tiles.in-gr { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.in-tiles.in-gr b { font-size: 18px; white-space: normal; }
.in-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.in-vy-r > .num { white-space: nowrap; }

/* ---------- (f) Utility importer, IN-f1 to IN-f9 (S5) ---------- */
/* [KB T5 4/8 grid] every gap and pad is a multiple of 4 */
.in-f .in-sub { margin: 24px 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.in-f .in-hero { margin: 0 0 4px; }
.in-f-who { margin: 0 0 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.in-fu { font-size: 12px; font-weight: 500; color: var(--muted); }
.in-f-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; gap: 16px 24px; }
.in-f-facts dd { flex-wrap: wrap; white-space: normal; }
.in-f-note { margin: 8px 0 0; }
.in-now { display: inline-flex; align-items: center; height: 18px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--acc-t); color: var(--acc-tx); font-size: 11px; font-weight: 600; }
.in-f-pre { max-width: 760px; }
.in-f-pre td:first-child { color: var(--ink2); }
.in-f-pre td.num, .in-f-pre th:not(:first-child) { text-align: right; }
/* tank band */
.in-ft { margin: 16px 0 8px; }
.in-ft-bar { position: relative; height: 32px; border-radius: var(--r-sm, 6px); background: var(--track); }
.in-ft-bar > i { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; }
.in-ft-bar > i span { padding: 0 8px; font-size: 12px; font-weight: 600; font-style: normal; white-space: nowrap; }
.in-ft-heel { left: 0; background: var(--loss-l); color: var(--err); border-radius: var(--r-sm, 6px) 0 0 var(--r-sm, 6px); }
.in-ft-work { background: var(--acc-t); color: var(--acc-tx); border-radius: 0 var(--r-sm, 6px) var(--r-sm, 6px) 0; justify-content: flex-end; }
.in-ft-open { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); cursor: default; }
.in-ft-ax { position: relative; height: 40px; margin-top: 8px; }
.in-ft-ax > span { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: center; }
.in-ft-ax > span em { display: block; font-style: normal; font-weight: 400; font-size: 11px; color: var(--muted); }
.in-ft-ax > span:first-child { transform: none; text-align: left; color: var(--muted); }
.in-ft-ax > span:nth-child(2) { transform: none; text-align: left; }
.in-ft-ax > span:last-child { transform: translateX(-100%); text-align: right; }
/* January slot strip: 31 day columns */
.in-sl { display: grid; gap: 4px; }
.in-sl-row { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 2px; }
.in-sl-g { padding: 0 0 4px 4px; border-left: 2px solid var(--hair); font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.in-sl-g.ours { border-color: var(--acc); color: var(--acc-tx); font-weight: 600; }
.in-sl-d { position: relative; height: 24px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--hair2); }
.in-sl-d.ours { background: var(--acc-t); border-color: var(--acc-l); }
.in-sl-d.other { background: repeating-linear-gradient(135deg, var(--hair2) 0 3px, transparent 3px 6px); }
.in-sl-d i { position: absolute; inset: 4px; border-radius: 3px; }
.in-sl-d:hover { outline: 2px solid var(--ink2); outline-offset: 1px; }
.in-sl-n span { font-size: 11px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.in-sl-arr span { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink2); white-space: nowrap; }
.in-sl-arr .in-code { height: 20px; }
/* demand bars, direct labels */
.in-dm { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: end; height: 184px; }
.in-dm-c { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; cursor: default; }
.in-dm-c b { font-size: 12px; font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; }
.in-dm-c i { display: block; width: 100%; max-width: 40px; min-height: 4px; border-radius: 4px 4px 0 0; background: var(--acc-t); border: 1px solid var(--acc-l); border-bottom: 0; transition: background var(--t-fast, .15s); }
.in-dm-c span { font-size: 12px; color: var(--muted); }
.in-dm-c.pk i { background: var(--acc); border-color: var(--acc); }
.in-dm-c.pk b { color: var(--ink); }
.in-dm-c:hover i { background: var(--acc-d); border-color: var(--acc-d); }
.in-f-cases > div.on { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
.in-f-split { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
.in-f-split b { display: inline; margin: 0; font-size: 15px; }
.in-f-cases em { display: flex !important; align-items: center; gap: 8px; }
/* position tiles */
.in-ft-ts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.in-ft-ts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.in-ft-t { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px 16px; border: 1px solid var(--hair); border-top: 3px solid var(--wc, var(--hair)); border-radius: var(--r-md, 8px); background: var(--surface); min-width: 0; }
.in-ft-t header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.in-ft-co { font-size: 15px; font-weight: 650; }
.in-ft-side { margin: 4px 0; }
.in-ft-t dl { display: grid; gap: 8px; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--hair2); }
.in-ft-t dt { font-size: 11px; font-weight: 600; color: var(--muted); }
.in-ft-t dd { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
.in-ft-t dd.num { font-variant-numeric: tabular-nums; font-weight: 600; }
.in-commit.must { background: var(--gd); color: var(--on-acc); }
.in-commit.recourse { background: var(--ns-f); color: var(--ns-t); }
/* LIVE s86 (REQ ENM to LIVE 6): the spot pill, dashed as the spot key of the (c) matrix (.in-c-key .spot) */
.in-commit.spot { background: transparent; color: var(--ink2); border: 1px dashed var(--ctl); }
.in-f-row { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.in-f-col .in-sub:first-child { margin-top: 0; }
/* pipeline range bar */
.in-pr { margin: 8px 0 0; }
.in-pr-top { position: relative; height: 20px; margin-bottom: 4px; }
.in-pr-top > span { position: absolute; top: 0; transform: translateX(-100%); padding-right: 6px; font-size: 12px; color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.in-pr-top b { color: var(--ink); }
.in-pr-bar { position: relative; height: 24px; border-radius: var(--r-sm, 6px); background: var(--track); }
.in-pr-bar > i { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; }
.in-pr-short { left: 0; background: var(--loss-l); color: var(--err); border-radius: var(--r-sm, 6px) 0 0 var(--r-sm, 6px); }
.in-pr-short span { padding: 0 8px; font-size: 12px; font-weight: 600; font-style: normal; white-space: nowrap; }
.in-pr-ok { background: var(--acc-t); border-radius: 0 var(--r-sm, 6px) var(--r-sm, 6px) 0; }
.in-pr-plan { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }
.in-pr-lab, .in-pr-ax { position: relative; height: 20px; margin-top: 4px; }
.in-pr-lab > span, .in-pr-ax > span { position: absolute; top: 0; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.in-pr-lab > span.r { transform: translateX(-100%); padding-right: 6px; color: var(--ink2); }
.in-pr-lab > span.l { padding-left: 6px; color: var(--ink); }
.in-pr-lab > span:last-child { color: var(--muted); padding-right: 0; }
.in-pr-ax > span { transform: translateX(-50%); font-size: 11px; color: var(--muted); }
.in-pr-ax > span:first-child { transform: none; }
/* what-if event row and answer */
.in-ev { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--hair2); }
.in-ev-l { font-size: 11px; font-weight: 600; color: var(--muted); }
.in-ev-bs { display: flex; flex-wrap: wrap; gap: 8px; }
.in-ev-b { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background var(--t-fast, .15s), border-color var(--t-fast, .15s), transform var(--t-fast, .15s); }
.in-ev-b:hover { border-color: var(--acc); background: var(--acc-t); }
.in-ev-b:active { transform: translateY(1px); }
.in-ev-b:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.in-ev-b.on { border-color: var(--acc); background: var(--acc-t); color: var(--acc-tx); font-weight: 600; cursor: default; }
.in-ev-other { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.in-ev-a { margin: 12px 0 0; padding: 12px 16px; border: 1px solid var(--hair); border-left: 3px solid var(--acc); border-radius: var(--r-md, 8px); background: var(--surface-2); transition: border-color var(--t-fast, .15s), background var(--t-fast, .15s); }
.in-ev-a.bad { border-left-color: var(--loss); }
.in-ev-a.warn { border-left-color: var(--warn); }
.in-ev-a.quick { background: var(--acc-t); }
.in-ev-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.in-ev-h b { font-size: 14px; }
.in-ev-h span { font-size: 13px; color: var(--ink2); }
.in-ev-h .btn { margin-left: auto; }
.in-ev-s { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.in-ev-s i { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
.in-ev-a.quick .in-ev-s i { animation: in-pulse 1s ease-in-out infinite; }
@keyframes in-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .in-ev-a.quick .in-ev-s i { animation: none; } }
.in-ev-a ul { margin: 8px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.5; }
/* rules, recourse, money beside */
.in-f-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: stretch; }
.in-f-2 > .card.xf { margin-bottom: 0; }
.in-fr { display: grid; gap: 8px; }
.in-fr-r { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border: 1px solid var(--hair); border-radius: var(--r-md, 8px); background: var(--surface); cursor: default; }
.in-fr-r b { font-size: 13px; font-weight: 600; }
.in-fr-s { display: inline-flex; justify-content: center; height: 20px; align-items: center; border-radius: 999px; background: var(--acc-t); color: var(--acc-tx); box-shadow: inset 0 0 0 1px var(--acc-l); font-size: 11px; font-weight: 600; }
.in-fr-r.off .in-fr-s { background: var(--hair2); color: var(--ink2); }
.in-fr-r.off b { color: var(--ink2); }
.in-fr-v { font-size: 13px; font-weight: 600; color: var(--ink2); }
.in-f-rc td { font-size: 13px; vertical-align: top; }
.in-f-rc td.num { text-align: left; }
.in-mb { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.in-mb li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 12px 16px; border: 1px solid var(--hair); border-radius: var(--r-md, 8px); background: var(--surface); font-size: 13px; line-height: 1.45; }
.in-mb li .ic { margin-top: 2px; }
.in-mb li.out .ic { color: var(--loss); } .in-mb li.in .ic { color: var(--acc-tx); }
.in-mb li em { grid-column: 2; font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); }
@media (max-width: 1360px) { .in-ft-ts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .in-f-row { grid-template-columns: 280px minmax(0, 1fr); } }
.in-f-cases .in-code { display: inline-flex; font-size: 12px; color: var(--ink); }

/* IN-W for every template (S6): wider middle lane for long hub labels, our own asset, off positions, diversion consent */
.in-ls.wide { grid-template-columns: minmax(0, 1fr) 144px 256px; }
.in-side.self { background: var(--hair2); color: var(--ink2); }
.in-pos-pills { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.in-commit.off { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--hair); }
.in-pos.off { border-style: dashed; border-left-style: solid; }
.in-pos.off .in-pos-co, .in-pos.off .in-formula { color: var(--muted); }
.in-pos.self { background: var(--surface); }
.in-consent { display: inline-flex; align-items: center; gap: 4px; justify-self: start; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--ns-f); color: var(--ns-t); }
table.in-who tr.in-off td { color: var(--muted); }
@media (max-width: 1100px) { .in-ls.wide { grid-template-columns: minmax(0, 1fr); } }
.in-row .in-pos-row.in-vol { white-space: normal; flex-wrap: wrap; line-height: 16px; }
.in-ls.wide .in-row { grid-template-columns: minmax(0, 1fr) 216px 88px; }
.in-pos.short .in-formula { white-space: normal; }
.in-pos.short .in-pos-row.in-mut { line-height: 16px; }
/* wide worlds stack the row: name and point, then formula and volume, the commitment on the right */
.in-ls.wide .in-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 4px 12px; }
.in-ls.wide .in-row .in-row-a { grid-column: 1; grid-row: 1; }
.in-ls.wide .in-row .in-row-b { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.in-ls.wide .in-row .in-row-c { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.in-row .in-pos-row.in-vol { display: block; }
.in-ls.wide .in-row .in-consent { flex: none; }
/* the short side is the fan (a, d2): tile left, rows right */
.in-ls.fan-s { grid-template-columns: 296px 144px minmax(0, 1fr); }
.in-pos.tile { background: var(--surface); }
/* no ellipsis on a company name in the rows of a and f: the name wraps, the role follows it [ET bar: no clipped label] */
.in-ls.fan-s .in-row .in-pos-co, .in-ls.wide .in-row .in-pos-co { white-space: normal; overflow: visible; text-overflow: clip; }
.in-ls.fan-s .in-row .in-pos-top, .in-ls.wide .in-row .in-pos-top { align-items: flex-start; }
.in-ls.fan-s .in-row .in-pos-top .in-code, .in-ls.wide .in-row .in-pos-top .in-code { flex: none; }

/* ---------- IN-W4 Position editor (drawer) [KB T4 forms: labels above, units in the label, one column; 8 px grid] ---------- */
.in-pe-drawer { width: min(520px, 100vw); }
.in-pe { display: grid; gap: 16px; }
.in-pe-who { display: flex; align-items: center; gap: 12px; }
.in-pe-co { display: grid; gap: 2px; flex: 1; min-width: 0; }
.in-pe-co b { font-size: 15px; font-weight: 600; }
.in-pe-co span { font-size: 12px; color: var(--muted); }
.in-pe-line { margin: -8px 0 0; font-size: 13px; color: var(--ink2); }
.in-pe .in-vl { margin: 0; }
.in-pe-faults { display: grid; gap: 4px; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--loss) 8%, transparent); border: 1px solid color-mix(in srgb, var(--loss) 30%, transparent); }
.in-pe-faults p { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--loss); }
.in-pe-faults p span { flex: 1; }
.in-pe-fix { border: 0; background: none; padding: 0 4px; font: inherit; font-weight: 600; color: var(--loss); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.in-pe-fix:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }
.in-pe-sec { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--hair2); }
.in-pe-sec h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; }
.in-pe-hint { margin: 0; font-size: 12px; color: var(--muted); }
.in-pe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.in-pe-grid label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.in-pe-grid .inp { width: 100%; box-sizing: border-box; color: var(--ink); }
.in-pe-grid .inp.num { text-align: right; font-variant-numeric: tabular-nums; }
.in-pe-grid .inp[aria-invalid="true"] { border-color: var(--loss); box-shadow: 0 0 0 3px color-mix(in srgb, var(--loss) 16%, transparent); }
.in-pe-ro-f { display: flex; align-items: center; background: var(--surface-2); color: var(--ink2) !important; }
.in-pe-ba { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px; border-radius: 8px; background: var(--surface-2); font-size: 13px; }
.in-pe-ba .tnum, .in-pe-ba b { font-variant-numeric: tabular-nums; }
.in-pe-ba-l { font-size: 11px; font-weight: 600; color: var(--muted); }
.in-pe-ba b { color: var(--ink); }
.in-pe-act { display: flex; align-items: center; gap: 12px; }
.in-pe-seg { justify-self: start; }
.in-pe-facts dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 13px; }
.in-pe-facts dt { color: var(--muted); }
.in-pe-facts dd { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.in-pe-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--hair); border-top-color: var(--acc); animation: in-pe-spin .8s linear infinite; }
@keyframes in-pe-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .in-pe-spin { animation: none; } }
.in-pe-open { margin-left: 4px; }
.in-pe-open svg { margin-right: 4px; }
.in-row-c { display: flex; align-items: center; gap: 8px; }
/* row column c: commitment (and You) on line 1, Edit on line 2, right aligned; no overlap with the formula column */
.in-row-c { flex-direction: column; align-items: flex-end; gap: 4px; }
.in-row-p { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.in-ls.fan-s .in-row { grid-template-columns: minmax(0, 1fr) 168px 96px; }
.in-row-c .in-pe-open { margin: 0; height: 28px; }
/* REQ ENM to LIVE 23 (LIVE s87): the tile form has the Edit button too, right aligned on its last line */
.in-pos-row.in-pos-ed { justify-content: flex-end; margin-top: 4px; }
.in-pos-ed .in-pe-open { margin: 0; height: 28px; }
/* 1280: the fan rows need the room; tile 256, middle lane 128 (hub pills stay inside), formula 160, commitment 88 */
@media (max-width: 1320px) {
  .in-ls.fan-s { grid-template-columns: 256px 128px minmax(0, 1fr); }
  .in-ls.fan-s .in-row { grid-template-columns: minmax(0, 1fr) 160px 88px; }
}
.in-pos-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--hair2); font-size: 12px; }
.in-pos-facts dt { color: var(--muted); }
.in-pos-facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink2); }

/* IN-a3 storage picture, 4b look (session 8) */
.in-hero-s { margin: 4px 0 0; }
.in-tank { margin: 16px 0 24px; }
.in-tank .in-tank-bar { height: 96px; border-radius: var(--r-md, 8px); }
.in-tank-bar i { display: flex; align-items: center; justify-content: center; }
.in-tank-bar i em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; pointer-events: none; }
.in-tank-bar i:first-child { border-radius: var(--r-md, 8px) 0 0 var(--r-md, 8px); } .in-tank-bar i:nth-child(5) { border-radius: 0 var(--r-md, 8px) var(--r-md, 8px) 0; }
.in-tk-band { position: absolute; top: 0; bottom: 0; border-top: 2px solid var(--acc); border-bottom: 2px solid var(--acc); pointer-events: none; }
.in-tank-bar .in-tk-open { top: -8px; bottom: -8px; width: 3px; margin-left: -1.5px; }
.in-tk-cl { position: absolute; top: -8px; bottom: -8px; width: 0; border-left: 2px dashed var(--ink2); margin-left: -1px; cursor: default; }
.in-tk-row { position: relative; height: 28px; }
.in-tk-row.top { margin-bottom: 8px; } .in-tk-row.bot { margin-top: 8px; }
.in-tk-p { position: absolute; top: 0; transform: translateX(-50%); height: 28px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--hair); border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 600; color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.in-tk-p.s { border-color: var(--ink); color: var(--ink); }
.in-tk-p.l { transform: translateX(-16px); } .in-tk-p.r { transform: translateX(calc(-100% + 16px)); }
.in-tank .in-tank-cargo { margin-top: 8px; }
.in-tk-key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 12px; font-size: 12px; color: var(--muted); } /* polish PA: key above the gauge */
.in-tk-key span { display: inline-flex; align-items: center; gap: 8px; }
.in-tk-key i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--hair); }
.in-facts-h { display: flex; align-items: center; gap: 8px; margin: 24px 0 0; }
.in-facts-h .in-lk-sub { margin: 0; }
.in-facts-h + .in-facts { margin-top: 12px; }
.in-next { display: flex; justify-content: flex-end; margin: 0; }
.in-next .btn { text-decoration: none; gap: 8px; }

/* IN-a2 gap row under the plant chart, 4b look (session 8) */
.in-pchart { height: 304px; }
.in-pc-gap { position: absolute; top: 100%; left: 0; right: 0; height: 48px; margin-top: 8px; pointer-events: none; }
.in-pc-gap i { display: block; width: 100%; background: var(--muted); opacity: .45; border-radius: 0 0 2px 2px; }
.in-pc-gap > span { position: absolute; left: 50%; top: 32px; transform: translateX(-50%); font-size: var(--fs-tick, 11px); font-weight: 600; color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.in-pchart .in-pc-x { margin-top: 64px; }
.in-pc-grid i.in-pc-gz { bottom: auto; top: calc(100% + 8px); border-top: 1.5px dotted var(--ink2); opacity: .7; }
.in-pc-y .in-pc-gl { bottom: auto; top: calc(100% + 8px); transform: none; }
.in-pc-r .in-pc-gzl { position: absolute; left: 0; top: calc(100% + 8px); transform: translateY(-50%); font-size: 12px; font-weight: 600; color: var(--ink2); white-space: nowrap; }
.in-pchart .in-pc-capl { transform: translateY(50%); }
.in-meta .in-meta-act { margin-left: auto; }
/* IN-a5 month cells spread by the ratable rule (session 8) */
.in-mc.dv { background: transparent; outline: 1px dashed var(--ctl); outline-offset: -1px; }
.in-mc.dv b { color: var(--ink2); }
.in-mc.dv i u { background: transparent; box-shadow: inset 0 0 0 1px var(--acc-d); }
.in-ct-note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; }
.in-mc-key { width: 16px; height: 12px; border-radius: 3px; outline: 1px dashed var(--ctl); outline-offset: -1px; }

/* Assembler fix (session 3, D4): January slot key line at phone width [KB T6.11 one key, 8 px grid] */
.in-sl-key { display: none; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.in-sl-k { display: inline-flex; align-items: center; gap: 8px; }
.in-sl-k i { width: 12px; height: 12px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--hair2); }
.in-sl-k.ours i { background: var(--acc-t); border-color: var(--acc-l); }
.in-sl-k.ours { color: var(--acc-tx); font-weight: 600; }
.in-sl-k.other i { background: repeating-linear-gradient(135deg, var(--hair2) 0 3px, transparent 3px 6px); }
@media (max-width: 640px) { .in-sl-heads { display: none; } .in-sl-key { display: flex; } }

/* ---------- assembler session 3 (D2): IN-d1, IN-d2 Windows and terms (views/in/d.js); 4 and 8 px grid [KB T5] ---------- */
.in-d-strip { position: relative; margin: 16px 0 8px; padding-left: 72px; }
.in-d-mh { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-bottom: 1px solid var(--hair); }
.in-d-mh span { padding: 0 0 4px 4px; font-size: 11px; color: var(--muted); border-left: 1px solid var(--hair2); }
.in-d-lane { position: relative; display: flex; align-items: center; height: 40px; border-bottom: 1px solid var(--hair2); }
.in-d-ln { position: absolute; left: -72px; width: 64px; display: flex; align-items: center; }
.in-d-track { position: relative; flex: 1; height: 100%; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 1px), var(--hair2) calc(100% / 12 - 1px) calc(100% / 12)); }
.in-d-mk { position: absolute; top: 8px; height: 24px; min-width: 8px; border-radius: 4px; background: var(--acc); cursor: default; outline-offset: 2px; transition: box-shadow var(--t-fast, .15s); }
.in-d-mk em { position: absolute; left: calc(100% + 4px); top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.in-d-mk.free { background: repeating-linear-gradient(135deg, var(--hair) 0 3px, transparent 3px 6px); border: 1px solid var(--hair); }
.in-d-mk.free em { color: var(--muted); font-weight: 500; }
.in-d-mk.long { background: var(--info, var(--acc)); }
.in-d-mk.open { background: var(--surface); border: 2px solid var(--info, var(--acc)); }
.in-d-mk:hover, .in-d-mk:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink2); }
.in-d-yr { margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--ink2); }
.in-d-note { margin: 0 0 16px; font-size: 12px; color: var(--muted); }
table.in-d-t td, table.in-d-t th { white-space: nowrap; }
table.in-d-t td.pos { color: var(--acc-tx); font-weight: 600; } table.in-d-t td.neg { color: var(--loss); }
table.in-d-t tbody tr { transition: background var(--t-fast, .15s); } table.in-d-t tbody tr:hover, table.in-d-t tbody tr:focus-visible { background: var(--acc-t); outline: none; }
.in-d-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--info-t, var(--surface-2)); color: var(--info, var(--ink2)); }
.in-d-pill.open { background: var(--surface-2); color: var(--ink2); border: 1px solid var(--hair); }
.in-d-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.in-d-term { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 16px; border: 1px solid var(--hair); border-radius: var(--r-md, 8px); background: var(--surface); min-width: 0; }
.in-d-term header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.in-d-term header b { font-size: 14px; font-weight: 650; }
.in-d-term dl { display: grid; gap: 8px; margin: 0; padding-top: 8px; border-top: 1px solid var(--hair2); }
.in-d-term dt { font-size: 11px; font-weight: 600; color: var(--muted); }
.in-d-term dd { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
.in-d-term dd.num { font-variant-numeric: tabular-nums; font-weight: 600; }
.in-d-top { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; padding: 16px; border-radius: var(--r-md, 8px); background: var(--loss-l, var(--surface-2)); border: 1px solid var(--loss-b, var(--hair)); }
.in-d-top .in-d-tl { font-size: 12px; font-weight: 600; color: var(--loss, var(--ink2)); }
.in-d-top b { font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.in-d-top b small { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--muted); }
@media (max-width: 900px) { .in-d-terms { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .in-d-strip { padding-left: 56px; } .in-d-ln { left: -56px; width: 52px; } .in-d-mh b.f { display: none; } .in-d-mh b.s { display: inline; } }
/* row heads of the window tables sit on the row baseline, not on the column-head style [KB T5.3 aligned baselines] */
table.in-d-t tbody th { padding: 12px; vertical-align: middle; font-size: 13px; color: var(--ink); font-weight: 650; border-bottom: 1px solid var(--hair2); font-variant-numeric: tabular-nums; }
.in-d-mh b { font-weight: 400; } .in-d-mh b.s { display: none; }
@media (max-width: 640px) { .in-d-mh b.f { display: none; } .in-d-mh b.s { display: inline; } }

/* fixer S1 (row 5): Supply table and Locks empty state of the Pacific and Iberia inputs (views/in/bw.js). 8 px grid. */
.in-bw-wrap { overflow-x: auto; }
.in-bw-t { width: 100%; }
.in-bw-t th[scope=row] { font-weight: 400; }
.in-bw-src { display: flex; gap: 8px; align-items: flex-start; }
.in-bw-src > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.in-bw-src b { font-weight: 600; }
.in-bw-t td.num, .in-bw-t th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.in-bw-empty { padding: 24px 16px; }

/* fixer S1 (F13) [UI-Review R2.3]: cards side by side in one row end on one line */
.in-page .grid2 > .card.xf { margin: 0; align-self: stretch; }

/* polish PA (round 1). Readiness stays in view while the long step card scrolls, so the right column is never an empty
   strip under a short card [KB layout: related summary stays visible; UI-Review R2 alignment] */
@media (min-width: 1101px) { .in-a-grid > section[data-card="a-ready"] { position: sticky; top: 16px; align-self: start; } }
/* polish PA (round 1). Demand bars: the tint fill was near the card colour in dark mode; a 34 % accent fill keeps
   every month readable and the peak bar still leads [KB T3 contrast, dark mode as polished as light] */
:root[data-theme="dark"] .in-dm-c i { background: color-mix(in srgb, var(--acc) 34%, var(--card)); border-color: color-mix(in srgb, var(--acc) 55%, var(--card)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .in-dm-c i { background: color-mix(in srgb, var(--acc) 34%, var(--card)); border-color: color-mix(in srgb, var(--acc) 55%, var(--card)); } }
:root[data-theme="dark"] .in-dm-c.pk i { background: var(--acc); border-color: var(--acc); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .in-dm-c.pk i { background: var(--acc); border-color: var(--acc); } }
/* polish PA (round 2). IN-a5: the Cargoes head sits over the right-aligned numbers (it started 72 px left of them).
   IN-a1: a fact label and its source chip stay on one line, so ADP year and Supply point no longer break into two
   lines while Plan period keeps one; the four values share one baseline [KB alignment, UI-Review R2] */
.in-ct-h > .num { text-align: right; }
.in-facts dt { white-space: nowrap; }
.in-facts { column-gap: 24px; }
/* polish PA (round 2). IN-f7 Recourse: the cap column mixes text and numbers; it is now left-aligned under its head
   (two rows ended right, one row started left) with tabular figures [KB tables: align text left, one edge per column] */
.in-f-rc td.in-tn { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* polish PA (round 2). IN-a4 fleet lanes, dark: the on-hire bar used the light tint (#15302A on card #141F1B), so a
   ship's hire period was near invisible; a 30 % accent mix keeps it a quiet but readable bar [KB T3 contrast of marks] */
:root[data-theme="dark"] .in-gl-on { background: color-mix(in srgb, var(--acc) 30%, var(--card)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .in-gl-on { background: color-mix(in srgb, var(--acc) 30%, var(--card)); } }

/* r2 FA S1 (C-ET1): draft value line of the Inputs pages. Dashed accent frame = the look of the Try preview
   (compare-mockup side/06-change-try.png); tag, applied -> draft value, signed change, Discard and Apply [KB T6, T7.2] */
.in-vl.in-vl-draft { border: 1.5px dashed var(--acc); background: color-mix(in srgb, var(--acc) 6%, var(--card)); padding: 11.5px 15.5px; }
.in-vl-draft .in-vl-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px;
  border: 1px dashed var(--acc); color: var(--acc-tx, var(--acc-d)); font-size: 11px; font-weight: 600; margin-right: 8px; }
.in-vl-draft .in-vl-acts { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; }
.in-vl-draft[data-s="updating"] .in-vl-v { color: var(--muted); }
.in-dtag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; border: 1px dashed var(--acc);
  color: var(--acc-tx, var(--acc-d)); font-size: 11px; font-weight: 600; margin-right: 8px; vertical-align: 1px; }
.in-steps li.is-draft { background: color-mix(in srgb, var(--acc) 5%, transparent); }

/* r2 FA S2: template (e) Slots and buyers (views/in/e.js). 8 px grid; hero number in the KPI tile [KB one hero per card] */
.in-e-kpi { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; padding: 16px; border-radius: var(--r-md, 8px); background: var(--acc-t, var(--surface-2)); border: 1px solid var(--hair); }
.in-e-kpi .in-d-tl { font-size: 12px; font-weight: 600; color: var(--ink2); }
.in-e-kpi b { font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.in-e-kpi b small { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--muted); }
.in-e-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
@media (max-width: 1100px) { .in-e-two { grid-template-columns: minmax(0, 1fr); } }
.in-e-cap { caption-side: top; text-align: left; padding: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--ink2); }
.in-d-t tr.in-e-best th, .in-d-t tr.in-e-best td { background: var(--acc-t, var(--surface-2)); }
.in-d-terms + .tscroll { margin-top: 16px; }
/* month lines at the real month ends of Jan to Jun 2028 (182 days), the same split as the head columns */
.in-d-strip.in-e-strip .in-d-track { background: linear-gradient(90deg, transparent 0 calc(17.03% - 1px), var(--hair2) calc(17.03% - 1px) 17.03%, transparent 17.03% calc(32.97% - 1px), var(--hair2) calc(32.97% - 1px) 32.97%, transparent 32.97% calc(50.00% - 1px), var(--hair2) calc(50.00% - 1px) 50.00%, transparent 50.00% calc(66.48% - 1px), var(--hair2) calc(66.48% - 1px) 66.48%, transparent 66.48% calc(83.52% - 1px), var(--hair2) calc(83.52% - 1px) 83.52%, transparent 83.52% 100%); }

/* r2 FA S3: template (c) Pairs and voyages (views/in/c.js). 4 and 8 px grid, tabular figures, one hero per card,
   month cells of one height, direct labels in the cells instead of a legend per mark [KB T5, T6.11, QR 25] */
.in-c-lead { margin: -4px 0 16px; max-width: 760px; }
.in-c-key { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 12px; font-size: 12px; color: var(--ink2); }
.in-c-key .k { display: inline-flex; align-items: center; gap: 8px; }
.in-c-key i { width: 16px; height: 12px; border-radius: 3px; border: 1px solid var(--hair); background: var(--card); }
.in-c-key .firm i { background: var(--surface-2); border-color: var(--ctl); }
.in-c-key .spot i { border-style: dashed; border-color: var(--ctl); }
.in-c-key .used i { background: var(--acc-t); border-color: var(--acc); box-shadow: inset 3px 0 0 var(--acc); }
.in-c-key .miss i { background: var(--loss-l); border-color: var(--loss-b); box-shadow: inset 3px 0 0 var(--loss); }
table.in-c-mx { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; margin: 0 -4px; }
table.in-c-mx thead th { padding: 0 8px 4px; font-size: 12px; font-weight: 600; color: var(--muted); text-align: left; border: 0; background: none; }
table.in-c-mx .in-c-rh0 { width: 260px; }
table.in-c-mx th.in-c-rh { padding: 4px 8px 4px 0; text-align: left; vertical-align: middle; border: 0; background: none; font-weight: 400; }
.in-c-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.in-c-who b { font-size: 13px; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-c-sub { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.in-c-mx tr.in-c-gh th { padding: 12px 0 4px; border: 0; background: none; text-align: left; }
table.in-c-mx tbody.in-c-g:first-of-type tr.in-c-gh th { padding-top: 4px; }
table.in-c-mx tr.in-c-gh .in-side { margin-right: 8px; }
td.in-c-cell { height: 48px; padding: 6px 8px; vertical-align: top; border-radius: 6px; border: 1px solid var(--hair); background: var(--card); cursor: default; transition: box-shadow var(--t-fast, .15s), border-color var(--t-fast, .15s); }
td.in-c-cell.firm { background: var(--surface-2); border-color: var(--ctl); }
td.in-c-cell.spot { border-style: dashed; border-color: var(--ctl); }
td.in-c-cell.used { background: var(--acc-t); border: 1px solid var(--acc); box-shadow: inset 3px 0 0 var(--acc); }
td.in-c-cell.miss { background: var(--loss-l); border: 1px solid var(--loss-b); box-shadow: inset 3px 0 0 var(--loss); }
td.in-c-cell.off { border: 1px solid transparent; background: repeating-linear-gradient(135deg, var(--hair2) 0 2px, transparent 2px 7px); }
td.in-c-cell[tabindex]:hover, td.in-c-cell[tabindex]:focus-visible { outline: none; border-color: var(--ink2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink2) 22%, transparent); }
td.in-c-cell.used:hover, td.in-c-cell.used:focus-visible { box-shadow: inset 3px 0 0 var(--acc), 0 0 0 2px color-mix(in srgb, var(--acc) 30%, transparent); }
td.in-c-cell.miss:hover, td.in-c-cell.miss:focus-visible { box-shadow: inset 3px 0 0 var(--loss), 0 0 0 2px color-mix(in srgb, var(--loss) 30%, transparent); }
.in-c-px { display: block; font-size: 13px; line-height: 16px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.in-c-ln { display: block; margin-top: 4px; font-size: 11px; line-height: 16px; font-weight: 600; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
td.in-c-cell.used .in-c-ln { color: var(--acc-tx); }
td.in-c-cell.miss .in-c-ln { color: var(--loss); }
.in-c-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.in-c-top .in-e-kpi { margin: 0; }
.in-c-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.in-c-fact { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--hair); border-radius: var(--r-md, 8px); background: var(--card); transition: border-color var(--t-fast, .15s); }
.in-c-fact:hover, .in-c-fact:focus-visible { outline: none; border-color: var(--ctl); }
.in-c-fact > span { font-size: 12px; font-weight: 600; color: var(--ink2); }
.in-c-fact b { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.in-c-fact b.pos { color: var(--acc-tx); } .in-c-fact b.neg { color: var(--loss); }
.in-c-fact b small { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--muted); }
.in-c-fact em { font-style: normal; font-size: 12px; line-height: 16px; color: var(--muted); }
table.in-c-pt td.in-c-usd { width: 168px; }
table.in-c-pt td.in-c-usd, table.in-c-pt th.in-c-usdh { padding-left: 16px; }
table.in-c-pt td.in-c-usd > span:last-child { display: inline-block; min-width: 48px; text-align: right; }
.in-c-bar { display: inline-flex; vertical-align: middle; width: 96px; height: 8px; margin-right: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.in-c-bar i { display: block; height: 100%; border-radius: 4px; background: var(--acc); }
.in-c-bar.neg i { background: var(--loss); }
table.in-c-pt tfoot th, table.in-c-pt tfoot td { padding: 12px; border-top: 2px solid var(--hair); font-size: 14px; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
table.in-c-pt tfoot .in-c-bar { background: transparent; }
table.in-c-pt tr.in-c-miss td { background: color-mix(in srgb, var(--loss-l) 55%, transparent); }
.in-c-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-right: 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.in-c-tag.miss { background: var(--loss-l); color: var(--err); border: 1px solid var(--loss-b); }
.in-c-tag.same { background: var(--acc-t); color: var(--acc-tx); border: 1px solid var(--acc-l, var(--hair)); }
.in-c-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.in-c-two > .card.xf { margin: 0; }
@media (max-width: 1280px) { .in-c-two { grid-template-columns: minmax(0, 1fr); } }
.in-c-fleet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.in-c-fleet li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--hair); border-radius: var(--r-md, 8px); font-size: 12px; line-height: 16px; color: var(--muted); }
.in-c-fleet li b { font-size: 13px; font-weight: 650; color: var(--ink); }
.in-c-fleet li .num { font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; }
table.in-c-rt-t th[scope=row] { font-weight: 400; }
.in-c-rt { display: block; font-size: 13px; font-weight: 650; color: var(--ink); }
.in-c-sh { display: block; } .in-c-shs { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
td.in-c-rc b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
td.in-c-rc .in-c-n { display: block; font-size: 11px; line-height: 16px; color: var(--muted); }
td.in-c-rc.used { background: var(--acc-t); box-shadow: inset 0 -2px 0 var(--acc); }
td.in-c-rc.used b, td.in-c-rc.used .in-c-n { color: var(--acc-tx); }
td.in-c-rc[tabindex]:hover, td.in-c-rc[tabindex]:focus-visible { outline: none; background: color-mix(in srgb, var(--acc) 12%, var(--card)); }
table.in-c-nb td.in-c-dif { white-space: normal; min-width: 240px; }
.in-c-dif ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.in-c-dif li { font-size: 12px; line-height: 16px; color: var(--ink2); }
table.in-c-nb tbody th, table.in-c-nb tbody td { vertical-align: top; }
@media (max-width: 1100px) { .in-c-top { grid-template-columns: minmax(0, 1fr); } .in-c-fleet { grid-template-columns: minmax(0, 1fr); } }
/* r2 FA S3 fix: the matrix caption sits outside the 4 px spaced table, so its first letter is never cut */
.in-c-cap { margin: 0 0 4px; }
.in-c-mxw { margin: 0 -4px; }
table.in-c-mx { margin: 0; }
/* r2 FA S3 fix: route and ship share one cell (two lines), the bar is 64 px, so the USD million column fits at 1280 */
.in-c-r1 { display: block; } .in-c-r2 { display: block; font-size: 12px; line-height: 16px; color: var(--muted); }
table.in-c-pt td.in-c-usd { width: 136px; }
table.in-c-pt .in-c-bar { width: 64px; }
table.in-c-pt tfoot th, table.in-c-pt tfoot td { border-bottom: 0; }

/* ---------- r2 FA S4: (e) spot caps as draft fields (C-ET1) ---------- */
.in-e-cap-ed { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.in-e-cap-ed .seg button { min-height: 28px; font-variant-numeric: tabular-nums; }
.in-e-cap-ed .seg button:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.in-e-cap-ed .seg button:active:not(.on) { background: var(--surface-2); }
.in-e-was { color: var(--muted); text-decoration-thickness: 1px; }
.in-d-t tr.is-draft > * { background: color-mix(in srgb, var(--acc) 6%, transparent); }
.in-d-t tr.is-draft .in-dtag, .in-d-t td .in-dtag { margin-right: 8px; vertical-align: 1px; }
.in-e-ba { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.in-e-ba .in-dtag { align-self: center; }
.in-e-capnote { margin: 8px 0 16px; }

/* r2 FA S5: IN-c C-ET1, passages Panama, Suez, NSR open or closed; draft cells and rows [C-ET1, KB T6 before and after] */
.in-c-pass { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.in-c-pass .seg button { min-height: 28px; }
.in-c-pass .seg button:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.in-c-pass .seg button:active:not(.on) { background: var(--surface-2); }
.in-c-pass .in-dtag { margin-right: 0; }
td.in-c-cell.dr { outline: 1.5px dashed var(--acc); outline-offset: -3px; }
td.in-c-cell.dr:hover, td.in-c-cell.dr:focus-visible { outline: 1.5px dashed var(--acc); outline-offset: -3px; }
.in-c-key .dr i { background: var(--card); border: 1.5px dashed var(--acc); }
td.in-c-rc.shut b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; font-weight: 500; }
td.in-c-rc.shut .in-c-n { color: var(--muted); }
.in-d-t tr.is-shut > th .in-c-rt { color: var(--ink2); }
.in-c-nb td.in-c-act, .in-c-nb th.in-c-act { width: 1%; white-space: nowrap; text-align: right; }

/* r2 FA S6: (d1), (d2) C-ET1 KPI row: the value and one second figure side by side, equal heights [KB T2.4, T5 one row height] */
.in-d-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; align-items: stretch; }
.in-d-kpis > .in-e-kpi, .in-d-kpis > .in-d-top { margin: 0; height: 100%; box-sizing: border-box; }
.in-d-fx { background: var(--surface-2); border-color: var(--hair); }
.in-d-fx .in-d-tl { color: var(--ink2); }
@media (max-width: 760px) { .in-d-kpis { grid-template-columns: 1fr; } }

/* r2 FA S8: Who is who middle column (price formula and volume) */
table.in-who col.c-pos { width: 22%; } table.in-who col.c-co { width: 22%; }
table.in-who .in-who-f { display: block; line-height: 20px; min-height: 20px; }
table.in-who .in-who-f .in-formula { white-space: normal; font-variant-numeric: tabular-nums; }
/* JUDGE Round 6 cross finding 5: a price term beside the formula chip (w.js priceCell) is regular text after a comma */
.in-pterm { font-size: 12.5px; font-weight: 400; color: var(--muted); }
table.in-who .in-who-v { font-variant-numeric: tabular-nums; }
/* r2 FA S8: IN-a2 formatted date field (app date form, icon inside, length read-out) [KB T4 input formats] */
.in-dt-f { position: relative; display: block; }
.in-dt-f > .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.in-form-r .in-dt-f .inp { width: 128px; min-width: 0; padding-left: 32px; font-variant-numeric: tabular-nums; }
.in-dt-f .inp::placeholder { color: var(--muted); opacity: .8; }
.in-dt-f .inp:focus + .ic, .in-dt-f:focus-within > .ic { color: var(--acc); }
.in-dt-len { display: grid; gap: 4px; font-size: 12px; color: var(--muted); min-width: 56px; }
.in-dt-len b { font-size: 13px; line-height: 32px; height: 32px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.in-dt-len.off b { color: var(--muted); font-weight: 500; }
/* r2 FA S8 (FINAL.md IN-a3 dark near-limit zones): in dark the near-limit and outside zones were near black brown,
   the key swatches vanished. Zones mix the warn and loss inks into the card surface, the near zone keeps a fine
   hatch, so the three bands read apart without colour alone [KB T5 colour plus a second cue; dark as polished as light] */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .in-tk-near { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--warn) 30%, var(--surface)) 0 6px, color-mix(in srgb, var(--warn) 20%, var(--surface)) 6px 12px); }
  :root:not([data-theme="light"]) .in-tk-out { background: color-mix(in srgb, var(--loss) 30%, var(--surface)); }
  :root:not([data-theme="light"]) .in-tk-safe { background: color-mix(in srgb, var(--acc) 22%, var(--surface)); }
  :root:not([data-theme="light"]) .in-tk-near em { color: var(--warn); }
  :root:not([data-theme="light"]) .in-tk-key i { border-color: transparent; }
}
:root[data-theme="dark"] .in-tk-near { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--warn) 30%, var(--surface)) 0 6px, color-mix(in srgb, var(--warn) 20%, var(--surface)) 6px 12px); }
:root[data-theme="dark"] .in-tk-out { background: color-mix(in srgb, var(--loss) 30%, var(--surface)); }
:root[data-theme="dark"] .in-tk-safe { background: color-mix(in srgb, var(--acc) 22%, var(--surface)); }
:root[data-theme="dark"] .in-tk-near em { color: var(--warn); }
:root[data-theme="dark"] .in-tk-key i { border-color: transparent; }
table.in-who col.c-side { width: 172px; } table.in-who col.c-code { width: 108px; } table.in-who col.c-co { width: 20%; }
table.in-who td:last-child .in-side { white-space: nowrap; }
/* r2 FA S8: IN-d2 at 1280. Draft tag and "Was" stay one unit; when the row is short they move under the segment
   together, never split into two lines [KB T1 one fact per line] */
.in-dwas { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
/* R2 QA S1 (FINAL-R2 IN-c): value card of the Inputs page. Left the value tile (hover shows the build-up), right two
   full-size buttons that open the Results cards. 4/8 grid; the two buttons stack with the tile height [KB T3, T7] */
.in-c-res { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: stretch; }
.in-c-res .in-e-kpi { margin: 0; justify-content: center; }
.in-c-gos { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }
.in-c-go { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 16px;
  border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease, transform 60ms ease; }
.in-c-go:hover { border-color: var(--acc-l); box-shadow: var(--sh-lift); }
.in-c-go:active { transform: scale(.995); box-shadow: none; }
.in-c-go:focus-visible { outline: none; box-shadow: var(--focus); border-color: var(--acc); }
.in-c-go-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.in-c-go-t b { font-size: 14px; font-weight: 600; line-height: 20px; }
.in-c-go-t span { font-size: var(--fs-chip); color: var(--muted); line-height: 18px; font-variant-numeric: tabular-nums; }
.in-c-go-a { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 13px; font-weight: 600; color: var(--acc-tx, var(--acc-d)); white-space: nowrap; }
.in-c-go:hover .in-c-go-a .ic { transform: translateX(2px); }
.in-c-go-a .ic { transition: transform var(--t-fast) ease; }
@media (max-width: 760px) { .in-c-res { grid-template-columns: 1fr; } }
/* R2 QA S1 (FINAL-R2 IN-e): key row of the slot chart, swatches equal to the marks (filled our slot, outlined free
   slot, green term window); the pair pill "Term window" takes the green of its mark, not the blue of our side
   [KB T5 one colour meaning per role, T6 key above the chart] */
.in-e-key .elong i { background: var(--info, var(--acc)); border-color: var(--info, var(--acc)); }
.in-e-key .eopen i { background: var(--surface); border: 2px solid var(--info, var(--acc)); }
.in-e-key .eterm i { background: var(--acc); border-color: var(--acc); }
.in-e-scap { margin: 0 0 4px; }
.in-d-pill.in-e-term { background: var(--acc-t); color: var(--acc-tx, var(--acc-d)); border: 1px solid var(--acc-l); }
.in-e-strip { margin-bottom: 16px; }

/* R3 QA (FINAL-R2 IN-a7): the lock form sits on the field grid of the outage form; the cargo field takes the room it
   needs for "C12, 14 Mar 2027, company" and the segment keeps its label above, as every field [KB T4 one label place] */
.in-lkf .in-form-r { align-items: flex-end; }
.in-lkf-c { flex: 1 1 280px; min-width: 0; }
.in-lkf-c select { width: 100%; }
.in-lkf-b { flex: 0 1 200px; min-width: 0; }
.in-lkf-b select { width: 100%; }
.in-lkf-s { display: flex; flex-direction: column; gap: 4px; }
.in-lkf-s > span { font-size: 12px; color: var(--muted); }
/* the segment is as tall as a field (32 px), so its label sits on the line of the Cargo and Buyer labels [KB T3 alignment] */
.in-lkf-s .seg { height: 32px; box-sizing: border-box; align-items: stretch; }
.in-lkf-s .seg button { display: inline-flex; align-items: center; }

/* DOCK-RULE start (COORDINATOR item 14 (1), FINDING-INT-5: IN-W and IN-Wa ran 341 px under the open dock at 1280).
   The page grid has one column that never grows past the main (an auto column took the min width of its widest table).
   The contract rows (IN-a5) keep the buyer column and let the other columns share the rest when the card is narrow. */
.in-page { grid-template-columns: minmax(0, 1fr); }
.in-ct { container: inct / inline-size; }
@container inct (max-width: 779.98px) {
  .in-ct-h, .in-ct-r { grid-template-columns: minmax(112px, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 72px; gap: 8px; }
  /* LIVE JUDGE R2 IN-a5, cross item 1: a month cell is under 40 px here, so its label goes on two lines ("Jan" over "27")
     and never runs into the next cell ("Jan 27Feb 27") */
  .in-mc s { white-space: normal; overflow-wrap: normal; text-align: center; line-height: 1.15; }
}
/* Long and short (IN-W, IN-Wa): under 760 px both sides share the card and the fan between them gets 48 px. */
[data-in="ls"] { container: inls / inline-size; }
@container inls (max-width: 859.98px) {
  .in-ls, .in-ls.wide, .in-ls.fan-s { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); }
  .in-ls-col, .in-ls-col > * { min-width: 0; }
  /* a position row keeps its name and action on line 1; its price and volume go to line 2 */
  .in-ls .in-row, .in-ls.wide .in-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .in-ls.fan-s .in-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .in-ls .in-row > .in-row-b, .in-ls.wide .in-row > .in-row-b { grid-column: 1 / -1; grid-row: 2; grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .in-ls.fan-s .in-row > .in-row-b { grid-column: 1 / -1; grid-row: 2; grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .in-ls .in-row > .in-row-a { grid-template-columns: minmax(0, 1fr); }
  .in-ls .in-row .in-pos-row, .in-ls .in-row .in-formula { flex-wrap: wrap; white-space: normal; min-width: 0; }
  /* LIVE s71 (JUDGE R5 IN-W, IN-Wa at 1280 with the dock: "Cove ...", "Iberia DE..."): in a side of about 260 px the company
     name was cut by an ellipsis beside the code chip. Here the name wraps and goes under the chip when it does not fit
     [ET bar: no clipped label]; the 860 px and wider rows keep the mockup line. */
  .in-ls .in-row .in-pos-top { flex-wrap: wrap; align-items: flex-start; row-gap: 2px; }
  .in-ls .in-row .in-pos-co { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
}
/* LIVE s75 (JUDGE R7 IN-W, IN-Wa at 390: overlaps, glued heads, IN-Wa side scroll 39 px): the @media 1100 px rule hides
   the fan, but the 860 px block above sets 3 tracks again, so the short side went into the 48 px fan track and its cards
   ran out of their box. The card width alone decides now: from 560 px the fan shows in its track; under 560 px (a side
   would be under 256 px) the sides stack in one column with no fan [ET bar: no overlap, no side scroll at 390]. */
@container inls (min-width: 560px) and (max-width: 859.98px) {
  .in-ls-mid { display: block; }
  .in-ls-svg { display: block; }
}
@container inls (max-width: 559.98px) {
  .in-ls, .in-ls.wide, .in-ls.fan-s { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .in-ls-mid, .in-ls-svg { display: none; }
}
/* IN-d1, IN-d2 (NOTE-LIVE-26): a term label or value wraps inside its card; it ran 5 px past the main at 1280 with the dock. */
.in-d-term dt, .in-d-term dd { min-width: 0; overflow-wrap: anywhere; }
/* IN-d1, IN-d2, IN-e (NOTE-LIVE-29): the "In total" seg control wraps its buttons inside a narrow term card. */
.in-d-term .in-e-cap-ed { display: flex; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.in-d-term .seg { flex-wrap: wrap; max-width: 100%; min-width: 0; }
/* IN-a1 (NOTE-LIVE-26): with the dock open a fact value wraps, so the 4 auto columns shrink to the main (2 px over at 1440). */
body:has(#xm-dock:not(:empty):not([hidden])) .in-facts dd { white-space: normal; }
body:has(#xm-dock:not(:empty):not([hidden])) .in-facts dt, body:has(#xm-dock:not(:empty):not([hidden])) .in-facts dd { min-width: 0; overflow-wrap: anywhere; }
/* IN-a1 to IN-a9 (JUDGE LOOK round 1, cross item 2): at 1280 with the dock open the 336 px Readiness column left the
   main card about 230 px. The (a) page reads its own width: under 900 px the Readiness card goes under the main card
   and is not sticky. Hover cards and popovers are on body, so the container does not anchor them. */
.in-page:has(> .in-a-grid) { container: ina / inline-size; }
@container ina (max-width: 899.98px) {
  .in-a-grid, .in-a-grid.one { grid-template-columns: minmax(0, 1fr); }
  .in-a-grid > section[data-card="a-ready"] { position: static; }
  /* LIVE JUDGE R2 IN-a8: the 4 and 5 fixed tile columns squeezed each tile under its value on a narrow page; here as many
     columns of at least 168 px as fit (3 at 1280 with the dock, 1 at 390) */
  .in-tiles, .in-tiles.in-gr { grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); }
  /* LIVE JUDGE R2 band: the band reads the page width, not the viewport (1440 with the dock open cut six nowrap values) */
  .in-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container ina (max-width: 479.98px) {
  .in-band { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; }
}
/* IN-W, IN-Wa Who is who (JUDGE LOOK round 1): five fixed columns left Price and volume about 50 px at 1280 with the dock,
   and at 390 the columns printed over each other. The card reads its own width: under 860 px one row block per position
   (code, company, side on line 1; position, then price and volume, each on its own line); under 480 px the side goes to
   its own line. The heads stay for screen readers. */
section[data-card="who"] { container: inwho / inline-size; }
@container inwho (max-width: 859.98px) {
  table.in-who, table.in-who tbody { display: block; width: 100%; }
  table.in-who thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.in-who tbody tr { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; padding: 12px 8px; border-bottom: 1px solid var(--hair2); }
  table.in-who tbody tr > td { display: block; min-width: 0; padding: 0; border: 0; }
  table.in-who tbody tr > td:nth-child(3), table.in-who tbody tr > td:nth-child(4) { grid-column: 2 / -1; }
  table.in-who tbody tr > td:nth-child(5) { grid-column: 3; grid-row: 1; justify-self: end; }
  table.in-who tbody tr:hover { background: var(--added); }
  table.in-who tbody tr.on { background: var(--acc-t); box-shadow: inset 3px 0 0 var(--acc); }
  table.in-who tbody tr.on td:first-child { box-shadow: none; }
  table.in-who tbody tr.in-grp { display: block; padding: 16px 0 8px; border-bottom: 1px solid var(--hair); }
  table.in-who tbody tr.in-grp:hover { background: transparent; }
  table.in-who tbody tr.in-grp td { border: 0; padding: 0; }
}
@container inwho (max-width: 479.98px) {
  table.in-who tbody tr { grid-template-columns: 72px minmax(0, 1fr); }
  table.in-who tbody tr > td:nth-child(5) { grid-column: 2 / -1; grid-row: auto; justify-self: start; }
}
/* IN-Wa Long and short (JUDGE LOOK round 1): a side with no position (only its head) gets at most 200 px, the other
   side the rest; at 860 px and more the mockup columns stay. */
@container inls (max-width: 859.98px) {
  .in-ls:has(> .in-ls-col[data-col="long"] > .in-ls-h:only-child) { grid-template-columns: minmax(0, 200px) 24px minmax(0, 1fr); }
  .in-ls:has(> .in-ls-col[data-col="short"] > .in-ls-h:only-child) { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 200px); }
}
/* LIVE s70 (JUDGE R4 and R5 IN-W, IN-Wa at 390): under 520 px two sides of about 140 px set price and volume one word per
   line, and the head counts lay over the head words. There the long side comes first and the short side under it, each
   the full width; the fan lines go (no room between the sides), and the head count goes to its own line when it must. */
@container inls (max-width: 519.98px) {
  .in-ls, .in-ls.wide, .in-ls.fan-s,
  .in-ls:has(> .in-ls-col[data-col] > .in-ls-h:only-child) { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .in-ls-mid, .in-ls-svg { display: none; }
  .in-ls-h { flex-wrap: wrap; row-gap: 2px; }
  .in-ls-h .in-tot { white-space: normal; }
}
/* DOCK-RULE end */

/* spec 2.2 item 4 (REQ V2D to LIVE 01:27): the required mark of a position with no company, icon plus words */
.in-co-none { display: inline-flex; align-items: center; gap: 4px; color: var(--warn); font-weight: 600; }
/* LIVE s76 (JUDGE Round 8 cross finding 4, walk row IN-b 390 side scroll 314 px): the "Locks in this step" table of
   b5.js listHtml has no .tscroll, so its width (six columns, "Value change, USD million") set the width of the lock
   part and the page scrolled sideways at 390. The lock part keeps to its card (one minmax(0, 1fr) track; the same for
   the More section of b.js layoutHtml). At a phone width and with the dock open it scrolls inside the card with the
   cue of the narrow table form (ui.css DOCK-RULE: a shade on the edge that has more, a thin bar), cells on one line.
   At 1440 with no dock the table keeps its table form at the full card width. */
.in-lk, .in-page details.in-more { grid-template-columns: minmax(0, 1fr); }
.xm-view .in-lk { --t-cue-sh: color-mix(in srgb, var(--ink) 24%, transparent); --t-cue: linear-gradient(90deg, var(--card) 30%, transparent) left center / 32px 100% no-repeat local, linear-gradient(270deg, var(--card) 30%, transparent) right center / 32px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, var(--t-cue-sh), transparent) left center / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, var(--t-cue-sh), transparent) right center / 12px 100% no-repeat scroll; }
@media (max-width: 760px) {
  .xm-view .in-lk { overflow-x: auto; scrollbar-width: thin; background: var(--t-cue); }
  .xm-view .in-lk > table.in-lk-t td, .xm-view .in-lk > table.in-lk-t th { white-space: nowrap; }
}
body:has(#xm-dock:not(:empty):not([hidden])) .xm-view .in-lk { overflow-x: auto; scrollbar-width: thin; background: var(--t-cue); }
body:has(#xm-dock:not(:empty):not([hidden])) .xm-view .in-lk > table.in-lk-t td { white-space: nowrap; }
/* LIVE s82 (REQ LIVE to RDV 12 (1), COORDINATOR item 64 (2), 8.9 LOOK): the input mini bars of the 4875 prototype
   (proto/app/ui/r6/in.css 52 to 54, 93, 148 to 151), drawn by IN.acqRows and IN.tankBar of views/in/common.js. Own class
   names: ui.css .vbar is the 64 px table bar of the results pages. */
.in-vbar { position: relative; display: block; flex: 1; min-width: 0; height: 6px; border-radius: 3px; background: var(--track); }
.in-vbar > i { position: absolute; top: 0; left: 0; height: 6px; border-radius: 3px; background: var(--g); }
.in-acqs { display: grid; gap: 6px; margin: 8px 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.in-acq { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.in-acq .in-acqn { text-align: right; white-space: nowrap; color: var(--muted); }
.in-acq .in-acqn b { color: var(--ink); font-weight: 650; }
.in-acq.over .in-vbar > i { background: var(--warn, var(--loss)); }
.in-vbar.tank { height: 14px; margin: 8px 0 4px; }
.in-vbar.tank > i { height: 14px; opacity: .35; }
.in-vbar.tank > .tk { position: absolute; top: -4px; width: 3px; height: 22px; border-radius: 2px; transform: translateX(-1px); }
.in-vbar.tank > .tk.op { background: var(--ink); }
.in-vbar.tank > .tk.cl { background: var(--muted-l); }
/* LIVE s135 (REQ SENSE to LIVE, AUD-H159-3): the draft mark beside the commitment pill of a row whose term the open draft
   changes ("in the draft; Firm at step 0"), as the Position editor says it */
.in-commit-dr { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--ink2); white-space: nowrap; }