/* Lane VN: state line (VN-01), Try bar, toasts, timeline drawer (VN-02), Save version dialog (VN-03).
   Tokens only (assets/css/tokens.css, lane SH); 4/8 grid (T5, D12); type scale D11; floor 11 px.
   Prefix .vn- so no other lane collides. */

/* ---------- VN-01 state line ---------- */
/* [KB T7.4] one sticky line under the tabs: the iteration state stays in view (IA 7.1) */
.vn-line {
  position: sticky; top: var(--vn-line-top, 0); z-index: 20;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-height: 48px; padding: 8px 12px; margin: 0 0 16px;
  background: var(--card); border: 1px solid var(--hair); border-radius: 12px;
  box-shadow: var(--sh-card, 0 1px 2px rgba(18,54,39,.04));
  font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums;
  transition: border-color .12s, box-shadow .12s, background-color .12s;
}
.vn-line[data-status="preview"] { border: 1.5px dashed var(--acc); padding: 7.5px 11.5px; }
.vn-line[data-status="noplan"], .vn-line[data-status="failed"] { border-color: var(--loss-b, #E7C3BE); }
.vn-line .vn-sep { width: 1px; height: 20px; background: var(--hair2); flex: 0 0 1px; }
.vn-line .vn-grow { flex: 1 1 auto; min-width: 8px; }

/* icon button (Undo, Redo): 32 px target, visible label in the tooltip and aria-label [KB T7.3] */
.vn-ib {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--ctl); background: var(--card); color: var(--ink2);
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer;
  transition: border-color .12s, color .12s, background-color .12s;
}
.vn-ib svg, .vn-btn svg, .vn-chip svg, .vn-st svg, .vn-step svg { width: 16px; height: 16px; flex: 0 0 16px; }
.vn-ib:hover:not([aria-disabled="true"]) { border-color: var(--acc); color: var(--acc-d); }
.vn-ib:active:not([aria-disabled="true"]) { background: var(--added); }
.vn-ib:focus-visible, .vn-btn:focus-visible, .vn-step:focus-visible, .vn-chip button:focus-visible,
.vn-tl-row:focus-visible, .vn-x:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.vn-ib[aria-disabled="true"] { opacity: .45; cursor: default; }

/* step button: label of the step, opens the timeline drawer */
.vn-step {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 8px;
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink);
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; cursor: pointer; max-width: 360px; min-width: 0;
}
.vn-line[data-status="preview"] .vn-step { max-width: 280px; }
.vn-step:hover { background: var(--added); border-color: var(--hair); }
.vn-step .vn-n { color: var(--muted); font-weight: 500; white-space: nowrap; }
/* W3 s18 REQ LIVE to NEO 9: on the hover background --muted fell to 3.81:1; --ink2 keeps 5.9:1 or more */
.vn-step:hover .vn-n { color: var(--ink2); }
.vn-step .vn-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vn-step .vn-chev { color: var(--muted); transform: rotate(90deg); transition: transform .15s; }
.vn-step[aria-expanded="true"] .vn-chev { transform: rotate(-90deg); }

/* plan mode chip (Best plan, Steady plan, Next best plan 2) */
.vn-mode {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 999px;
  background: var(--acc-t); color: var(--acc-tx, var(--acc-d)); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.vn-mode[data-mode="steady"] { background: var(--info-t); color: var(--info); }
.vn-mode[data-mode="next"] { background: var(--track); color: var(--ink2); }

/* signed delta: sign carries meaning, colour second [QR 22, D3] */
.vn-delta { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.vn-delta .vn-u { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.vn-delta.pos { color: var(--acc-tx, var(--acc-d)); }
.vn-delta.neg { color: var(--loss); }
.vn-delta.zero { color: var(--muted); }
.vn-delta.wait { color: var(--muted); }
.vn-shimmer {
  display: inline-block; width: 72px; height: 12px; border-radius: 4px; vertical-align: middle;
  background: linear-gradient(90deg, var(--track) 0%, var(--added) 50%, var(--track) 100%);
  background-size: 200% 100%; animation: vn-shim 1.1s linear infinite;
}
@keyframes vn-shim { from { background-position: 200% 0; } to { background-position: 0 0; } }

/* edit chips: x removes the edit as a new step (P S10) */
.vn-chips { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.vn-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 4px 0 8px;
  border: 1px solid var(--hair); border-radius: 12px; background: var(--chip, var(--card));
  font-size: 12px; font-weight: 600; color: var(--ink2); max-width: 260px;
}
.vn-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vn-chip button {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; padding: 0;
}
.vn-chip button:hover { background: var(--loss-l); color: var(--loss); }
.vn-chip button svg { width: 12px; height: 12px; flex-basis: 12px; }
.vn-more { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 4px; }

/* state words: icon plus word, never colour alone [QR 22] */
.vn-st { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink2); white-space: nowrap; }
.vn-dot { width: 8px; height: 8px; border-radius: 4px; flex: 0 0 8px; background: var(--acc); }
.vn-st[data-s="quick"] .vn-dot, .vn-st[data-s="updating"] .vn-dot {
  background: transparent; box-shadow: inset 0 0 0 2px var(--acc); animation: vn-pulse 1.2s ease-in-out infinite;
}
.vn-st[data-s="updating"] .vn-dot { background: var(--acc); }
@keyframes vn-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
.vn-st[data-s="noplan"], .vn-st[data-s="failed"] { color: var(--loss); }
.vn-st .vn-ms { color: var(--muted); font-weight: 500; }

/* run stages: 4 part bar of the producer quick then full answer (B1.10, B5.10) */
.vn-stages { display: inline-flex; gap: 2px; align-items: center; }
.vn-stages i { display: block; width: 20px; height: 4px; border-radius: 2px; background: var(--track); }
.vn-stages i.on { background: var(--acc); }
.vn-stages i.run { background: var(--acc-l); animation: vn-pulse 1.2s ease-in-out infinite; }

/* problem text of No plan and Failed: what happened, why, the fix [QR 33] */
/* [QR 33] No plan and Failed: the problem and its fix get a full row of their own, never cut */
.vn-line[data-status="noplan"] .vn-problem, .vn-line[data-status="failed"] .vn-problem {
  order: 30; flex: 1 1 100%; margin: 0 -12px -8px; padding: 8px 12px; border-top: 1px solid var(--hair2);
  background: var(--loss-l); border-radius: 0 0 11px 11px; align-items: flex-start;
}
.vn-line[data-status="noplan"] .vn-problem span, .vn-line[data-status="failed"] .vn-problem span { white-space: normal; overflow: visible; }
.vn-line[data-status="noplan"] .vn-problem svg, .vn-line[data-status="failed"] .vn-problem svg { margin-top: 2px; }
.vn-problem { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--ink); }
.vn-problem b { font-weight: 600; color: var(--err); white-space: nowrap; } /* W3 s18 REQ LIVE to NEO 9: --loss on --loss-l was 4.14:1 */
.vn-problem span { color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* buttons inside the line */
.vn-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--ctl); background: var(--card); color: var(--ink);
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: border-color .12s, color .12s, background-color .12s;
}
.vn-btn:hover:not([aria-disabled="true"]) { border-color: var(--acc); color: var(--acc-d); }
.vn-btn:active:not([aria-disabled="true"]) { background: var(--added); }
.vn-btn.primary { background: var(--acc-fill); border-color: var(--acc-fill); color: #fff; }
.vn-btn.primary:hover:not([aria-disabled="true"]) { background: var(--acc-fill-h); border-color: var(--acc-fill-h); color: #fff; }
.vn-btn.quiet { border-color: transparent; background: transparent; color: var(--ink2); }
.vn-btn.quiet:hover:not([aria-disabled="true"]) { background: var(--added); border-color: var(--hair); }
.vn-btn[aria-disabled="true"] { opacity: .5; cursor: default; }

/* preview label "Preview: #2 −0.12" */
.vn-pv { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--acc-tx, var(--acc-d)); font-weight: 600; min-width: 0; }
.vn-pv .vn-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.vn-pv .vn-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: 11.5px; font-weight: 600;
}

/* C-ET1 (round 2, FB): draft bar. Count, value change, one chip per change with its own x [KB T7.2, QR 12 4/8 grid] */
.vn-pv .vn-dn { color: var(--ink2, var(--ink)); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vn-pv .vn-dn b { color: var(--ink); font-weight: 700; }
.vn-dchips { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; flex: 0 1 auto; }
.vn-dchip { display: inline-flex; align-items: center; height: 24px; max-width: 220px; padding: 0 2px 0 8px; border-radius: 12px;
  background: var(--acc-t); border: 1px solid var(--acc-l); color: var(--ink); font-size: 12px; font-weight: 500; flex: 0 1 auto; min-width: 48px; }
.vn-dchip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vn-dchip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 2px; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--ink2, var(--ink)); cursor: pointer; flex: 0 0 20px;
  transition: background-color .12s ease, color .12s ease; }
.vn-dchip-x:hover { background: var(--acc-l); color: var(--ink); }
.vn-dchip-x:active { transform: scale(.92); }
.vn-dchip-x:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }

/* the draft bar keeps ONE row from 900 px: chips shrink with an ellipsis (full text in the tip), buttons never wrap */
@media (min-width: 900px) {
  .vn-line[data-status="preview"] { flex-wrap: nowrap; }
  .vn-line[data-status="preview"] > * { flex-shrink: 0; }
  .vn-line[data-status="preview"] > .vn-dchips { flex: 0 1 auto; min-width: 56px; }
  /* FB S2: the step name stays whole; the chips fold first, the step shrinks only as the last resort */
  .vn-line[data-status="preview"] > .vn-step { flex-shrink: .01; min-width: 96px; }
  .vn-line[data-status="preview"] > .vn-grow { flex: 1 1 0; min-width: 4px; }
  .vn-line[data-status="preview"] .vn-step .vn-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
}
/* FB S2: the colon of "Step n: name" goes with the name, so a hidden name never leaves "Step 0:" */
.vn-step .vn-n::after { content: ":"; }
/* under 1440 px the draft bar gives the step name's room to the draft; "Step n" and the chevron stay (name in the tip) */
@media (min-width: 900px) and (max-width: 1439px) {
  .vn-line[data-status="preview"] .vn-step .vn-lbl { display: none; }
  .vn-line[data-status="preview"] .vn-step .vn-n::after { content: none; }
}
/* the applied line keeps one row too: edit chips fold like draft chips */
@media (min-width: 900px) {
  .vn-line:not([data-status="preview"]):not([data-status="noplan"]):not([data-status="failed"]) { flex-wrap: nowrap; }
  .vn-line:not([data-status="preview"]) > * { flex-shrink: 0; }
  .vn-line:not([data-status="preview"]) > .vn-step { flex-shrink: .01; min-width: 96px; }
  .vn-line:not([data-status="preview"]) > .vn-chips { flex: 0 1 auto; min-width: 56px; overflow: hidden; }
  .vn-line:not([data-status="preview"]) > .vn-grow { flex: 1 1 0; min-width: 4px; }
}
.vn-chips { display: inline-flex; align-items: center; gap: 4px; min-width: 0; flex-wrap: nowrap; }
.vn-chips .vn-chip { flex-shrink: 0; }
.vn-chips.solo .vn-chip { flex-shrink: 1; min-width: 48px; }
.vn-chips.solo .vn-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vn-chip[hidden] { display: none !important; }
/* FB S2: chip fold "+n" (older changes) and its list; each row keeps its own x [KB T7.2, QR 12 4/8 grid] */
.vn-dchips .vn-dchip { flex-shrink: 0; }
.vn-dchips.solo .vn-dchip { flex-shrink: 1; }
.vn-dchip[hidden], .vn-dmore[hidden] { display: none !important; }
.vn-dmore { display: inline-flex; align-items: center; justify-content: center; gap: 0; height: 24px; min-width: 32px; padding: 0 8px;
  border: 1px dashed var(--acc); border-radius: 12px; background: transparent; color: var(--acc-tx, var(--acc-d));
  font-family: inherit; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; flex: 0 0 auto;
  transition: background-color .12s ease, border-color .12s ease; }
.vn-dmore b { font-weight: 700; }
.vn-dmore:hover, .vn-dmore[aria-expanded="true"] { background: var(--acc-t); border-style: solid; }
.vn-dmore:active { transform: scale(.96); }
.vn-dmore:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.vn-dpop { width: 320px; animation: vnDpopIn .12s ease-out; }
@keyframes vnDpopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vn-dpop { animation: none; } }
.vn-dpop .pop-h .r { color: var(--muted); font-variant-numeric: tabular-nums; }
.vn-dpop-r { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 4px 4px 8px; border-radius: 8px; }
.vn-dpop-r:hover { background: var(--acc-t); }
.vn-dpop-i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 10px;
  background: var(--surface-2, var(--track)); color: var(--ink2, var(--ink)); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vn-dpop-t { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 18px; color: var(--ink); overflow-wrap: anywhere; }
.vn-dpop-f { margin: 4px 8px; padding-top: 8px; border-top: 1px solid var(--hair2); font-size: 12px; line-height: 16px; color: var(--muted); }

/* ---------- toast (P S11) ---------- */
.vn-toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.vn-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 8px 8px 16px;
  background: var(--gd, #123627); color: #fff; border-radius: 10px; font-size: 13px; font-weight: 600;
  box-shadow: var(--sh-pop, 0 14px 34px -12px rgba(18,54,39,.30));
  animation: vn-in .18s ease-out;
}
.vn-toast button {
  height: 28px; padding: 0 12px; border-radius: 7px; border: 1px solid rgba(255,255,255,.32);
  background: transparent; color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer;
}
.vn-toast button:hover { background: rgba(255,255,255,.12); }
.vn-toast button:focus-visible { outline: 2px solid var(--gl, #48D49C); outline-offset: 2px; }
.vn-toast .vn-x { width: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-color: transparent; }
.vn-toast .vn-x svg { width: 14px; height: 14px; }
.vn-toast.out { opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s; }
@keyframes vn-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- VN-02 timeline drawer ---------- */
.vn-scrim { position: fixed; inset: 0; background: rgba(11,31,24,.20); z-index: 80; animation: vn-fade .15s ease-out; }
@keyframes vn-fade { from { opacity: 0; } to { opacity: 1; } }
.vn-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(600px, 100vw); z-index: 81;
  display: flex; flex-direction: column; background: var(--card); border-left: 1px solid var(--hair);
  box-shadow: var(--sh-pop, 0 14px 34px -12px rgba(18,54,39,.30)); animation: vn-slide .2s ease-out;
  font-variant-numeric: tabular-nums;
}
@keyframes vn-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.vn-dh { display: flex; align-items: flex-start; gap: 12px; padding: 24px 24px 16px; border-bottom: 1px solid var(--hair2); }
.vn-dh .vn-t { flex: 1 1 auto; min-width: 0; }
.vn-dh h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); }
.vn-dh p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.4; color: var(--ink2); }
.vn-db { flex: 1 1 auto; overflow: auto; padding: 8px 12px 24px; }
.vn-df { display: flex; gap: 8px; align-items: center; padding: 12px 24px; border-top: 1px solid var(--hair2);
  font-size: 12px; color: var(--muted); }

.vn-tl { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.vn-tl th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 12px;
  border-bottom: 1px solid var(--hair); white-space: nowrap; }
.vn-tl th.num, .vn-tl td.num { text-align: right; }
.vn-tl td { padding: 0 12px; height: 48px; border-bottom: 1px solid var(--hair2); font-size: 13px; color: var(--ink); vertical-align: middle; }
.vn-tl-row { cursor: pointer; outline: none; }
.vn-tl-row:hover td { background: var(--added); }
.vn-tl-row.cur td { background: var(--acc-t); }
.vn-tl-row.cur td:first-child { box-shadow: inset 3px 0 0 var(--acc); }
.vn-tl .vn-sn { color: var(--muted); font-weight: 600; width: 40px; }
.vn-tl .vn-sl { min-width: 0; }
.vn-tl .vn-sl b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vn-tl .vn-sl small { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.vn-tl .vn-v { font-weight: 600; }
.vn-tl .vn-go { width: 136px; text-align: right; white-space: nowrap; }
.vn-tl .vn-go .vn-btn { min-height: 28px; padding: 0 12px; font-size: 12.5px; }
.vn-cur { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 999px;
  background: var(--acc-fill); color: #fff; font-size: 12px; font-weight: 600; }
.vn-gone td { color: var(--muted); }
.vn-gone .vn-sl b { font-weight: 500; text-decoration: line-through; text-decoration-color: var(--plain-d, #A9B5AF); }
.vn-sec { padding: 16px 12px 8px; font-size: 12px; font-weight: 600; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.vn-sec svg { width: 16px; height: 16px; }
.vn-spark { display: block; margin: 8px 12px 0; }

/* ---------- VN-03 Save version dialog ---------- */
.vn-modal { position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center;
  background: rgba(11,31,24,.38); animation: vn-fade .15s ease-out; padding: 16px; }
.vn-dlg { width: 480px; max-width: 100%; background: var(--card); border-radius: 14px; padding: 24px;
  border: 1px solid var(--hair); box-shadow: var(--sh-pop, 0 14px 34px -12px rgba(18,54,39,.30));
  animation: vn-in .18s ease-out; font-variant-numeric: tabular-nums; }
.vn-dlg h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.vn-dlg .vn-q { margin: 4px 0 16px; font-size: 13.5px; color: var(--ink2); line-height: 1.5; }
.vn-facts { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 8px; margin: 0 0 16px; }
.vn-fact { border: 1px solid var(--hair); border-radius: 10px; padding: 8px 12px; min-width: 0; }
.vn-fact span { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.vn-fact b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin-top: 2px; white-space: nowrap; }
.vn-fact b small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.vn-fact em { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vn-fact em.pos { color: var(--acc-tx, var(--acc-d)); font-weight: 600; }
.vn-fact em.neg { color: var(--loss); font-weight: 600; }
.vn-field { display: block; margin: 0 0 12px; }
.vn-field > span { display: flex; justify-content: space-between; font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 4px; }
.vn-field input, .vn-field textarea {
  width: 100%; box-sizing: border-box; height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ctl);
  background: var(--card); color: var(--ink); font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.4;
  transition: border-color .12s, box-shadow .12s;
}
.vn-field textarea { height: 64px; padding: 8px 12px; font-weight: 400; resize: vertical; }
.vn-field input:focus, .vn-field textarea:focus { outline: none; border-color: var(--acc); box-shadow: var(--focus, 0 0 0 3px rgba(46,135,99,.26)); }
.vn-field.bad input { border-color: var(--loss); }
.vn-field .vn-err { display: none; font-size: 12px; color: var(--loss); margin-top: 4px; }
.vn-field.bad .vn-err { display: block; }
.vn-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 9px; background: var(--track); }
.vn-seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted);
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; }
.vn-seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); font-weight: 600;
  box-shadow: var(--sh-thumb, 0 1px 2px rgba(18,54,39,.16), 0 0 0 1px rgba(18,54,39,.04)); }
.vn-seg button:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.vn-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.vn-why { display: flex; gap: 8px; align-items: center; margin: 0 0 16px; padding: 8px 12px; border-radius: 8px;
  background: var(--ns-f, #FDF6E3); color: var(--ns-t, #8A6A1F); font-size: 12.5px; font-weight: 600; }
.vn-why svg { width: 16px; height: 16px; flex: 0 0 16px; }

@media (max-width: 900px) {
  .vn-line { gap: 4px; padding: 8px; }
  .vn-step { max-width: 100%; }
  .vn-chips { order: 10; flex-basis: 100%; }
  .vn-facts { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .vn-dot, .vn-shimmer, .vn-stages i.run { animation: none !important; }
  .vn-drawer, .vn-dlg, .vn-toast { animation: none !important; }
}
@media print { .vn-line, .vn-toasts, .vn-drawer, .vn-scrim { display: none !important; } }

/* ---------- VN-04 Versions, VN-05 Compare, VN-06 Calculation log (session 2) ---------- */
/* [KB T6.1] one hero number per tile; [QR 25] tabular figures for every number; 4/8 px grid */
.vn-tiles .val, .vn-ver td.num, .vn-mv td.num, .vn-nv, .vn-ct .val, .vn-run b, .vn-fc b { font-variant-numeric: tabular-nums; }
.vn-quiet { color: var(--muted); }
.vn-ro { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--acc); border-radius: 10px; background: var(--acc-t); font-size: var(--fs-body); }
.vn-ro svg { width: 16px; height: 16px; color: var(--acc-tx); flex: none; }
.vn-ro > span { flex: 1; min-width: 0; }
/* chain picture (B5.1) */
.vn-chain { list-style: none; margin: 0; padding: 4px 0 8px; display: flex; align-items: stretch; gap: 8px; overflow-x: auto; }
.vn-node { flex: 0 0 auto; }
.vn-node > button { position: relative; display: flex; flex-direction: column; gap: 4px; width: 200px; height: 100%; min-height: 120px; text-align: left; padding: 12px 16px; border: 1px solid var(--hair); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.vn-node > button:hover { border-color: var(--acc); box-shadow: var(--sh-lift); }
.vn-node > button:active { transform: translateY(1px); }
.vn-node > button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vn-node.on > button { border: 2px solid var(--acc); padding: 11px 15px; background: var(--acc-t); }
.vn-node.stack > button { box-shadow: 4px 4px 0 -1px var(--card), 4px 4px 0 0 var(--hair); }
.vn-nt { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-label); color: var(--muted); }
.vn-nt b { color: var(--ink); font-weight: 700; font-size: var(--fs-body); }
.vn-nn { font-weight: 600; font-size: var(--fs-body); line-height: 1.3; }
.vn-nv { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-top: auto; }
.vn-nv small, .vn-ct .val small { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.vn-ch { font-size: var(--fs-label); color: var(--muted); font-weight: 600; }
.vn-ch.pos, .vn-ver .pos, .vn-mv .pos, .vn-ct .val.pos, .vn-depth-in i.pos { color: var(--acc-tx); }
.vn-ch.neg, .vn-ver .neg, .vn-mv .neg, .vn-ct .val.neg, .vn-depth-in i.neg { color: var(--loss); }
.vn-same { font-size: var(--fs-label); color: var(--muted); }
.vn-link { display: flex; align-items: center; color: var(--muted); }
.vn-link svg { width: 16px; height: 16px; }
/* versions table */
/* W3 s18 NOTE-INT-38 (3) VN-04 at 390 px: the table is the containing block of its .sr texts, so the scroller clips
   them (an absolute .sr with its containing block outside .tscroll made a 321 px page side scroll) */
.vn-ver { position: relative; }
.vn-ver td { vertical-align: middle; }
.vn-ver tr.click { cursor: pointer; }
.vn-ver tr.click:hover td { background: var(--surface-2); }
.vn-ver tr.sel td { background: var(--acc-t); }
/* polish PC (round 1): the green state pill took the same tint as the selected row and lost its edge; card fill keeps it a pill in both rows */
.vn-ver tr.sel td .pill { background: var(--card); }
.vn-ver tr.click:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.vn-name span { display: block; font-weight: 600; }
.vn-name small, .vn-saved small { display: block; color: var(--muted); font-size: var(--fs-label); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vn-who { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vn-who svg { width: 14px; height: 14px; color: var(--muted); }
.vn-vbar { display: inline-block; vertical-align: middle; width: 64px; height: 6px; margin-right: 8px; border-radius: 3px; background: var(--hair); overflow: hidden; }
.vn-vbar i { display: block; height: 100%; background: var(--acc); border-radius: 3px; }
.vn-rules { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.vn-rules svg { width: 14px; height: 14px; color: var(--acc-tx); }
.vn-rules.miss svg { color: var(--loss); }
.vn-acts { white-space: nowrap; text-align: right; }
.vn-acts .btn + .btn { margin-left: 4px; }
.vn-depth td { background: var(--acc-t); padding-top: 0; }
.vn-depth-in { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 4px 0 8px; font-size: var(--fs-label); }
.vn-depth-in b { display: block; color: var(--muted); font-weight: 500; }
.vn-depth-in i { font-style: normal; font-weight: 600; font-size: var(--fs-body); }
.vn-menu { display: flex; flex-direction: column; gap: 4px; padding: 4px; min-width: 180px; }
.vn-menu .btn { justify-content: flex-start; width: 100%; }
.vn-menu hr { border: 0; border-top: 1px solid var(--hair); margin: 4px 0; width: 100%; }
/* compare head and tiles (B5.3, B5.4) */
.vn-cmph { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.vn-sel { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px 0 12px; border: 1px solid var(--hair); border-radius: 999px; background: var(--card); }
.vn-sel span { font-size: var(--fs-label); font-weight: 600; color: var(--muted); }
.vn-sel select { border: 0; background: transparent; color: var(--ink); font: 600 var(--fs-body) Inter, system-ui, sans-serif; height: 32px; padding: 0 8px; border-radius: 999px; cursor: pointer; max-width: 300px; }
.vn-sel select:focus-visible { outline: 2px solid var(--focus); }
.vn-sel:hover { border-color: var(--acc); }
.vn-arr svg { width: 16px; height: 16px; color: var(--muted); display: block; }
/* NEO s133 (item 72 P7 N2): the Compare head of the 4875 prototype (proto/app/ui/style.css .ch .cs and .lpick select) */
.vn-cs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.vn-cs select { border: 1px solid var(--hair); background: var(--card); color: var(--ink); border-radius: 6px; padding: 3px 6px; font: inherit; font-size: 12px; max-width: 300px; cursor: pointer; }
.vn-cs select:focus-visible { outline: 2px solid var(--focus); }
.vn-sp { flex: 1; }
.vn-cts { display: grid; grid-template-columns: 1fr 200px 1fr; gap: 16px; align-items: stretch; }
.vn-ct { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--hair); border-radius: 10px; min-width: 0; }
.vn-ct .lab { font-size: var(--fs-label); color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vn-ct .val { font-size: var(--fs-hero); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; }
.vn-ct-s { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; min-height: 20px; }
.vn-ct-d { background: var(--surface-2); justify-content: center; text-align: center; }
.vn-ct-d .val { font-size: var(--fs-title); }
/* polish PC (round 1): a hero-size strut puts the Change number on the same baseline as the A and B numbers [KB aligned baselines] */
.vn-ct-d .val::before { content: '\200b'; font-size: var(--fs-hero); }
.vn-diffs { display: flex; flex-wrap: wrap; gap: 8px; }
.vn-diff { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 1px solid var(--info); border-radius: 999px; font-size: var(--fs-label); }
.vn-diff s { color: var(--muted); }
.vn-diff svg { width: 12px; height: 12px; color: var(--muted); }
.vn-diff > span { font-weight: 600; color: var(--info); }
/* zoomed waterfall */
.vn-wf { display: block; max-height: 300px; }
.vn-wfb { transition: opacity var(--t-fast); cursor: default; }
.vn-wf:hover .vn-wfb { opacity: .55; }
.vn-wf .vn-wfb:hover { opacity: 1; }
.vn-wfv { font-size: 12px; font-weight: 650; fill: var(--ink); font-variant-numeric: tabular-nums; }
.vn-wfv.neg { fill: var(--loss); }
.vn-wfl { font-size: 12px; fill: var(--ink2); }
.vn-wfs { font-size: 11px; fill: var(--muted); }
.vn-brk { stroke: var(--card); stroke-width: 2.5; fill: none; }
/* liftings moved (P M01 to M03) */
.vn-filt { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
/* NEO s146 (JUDGE Round 38 For the lanes 3, 4875 movedView modeLine as div.q, margin-bottom 6px): the plan mode line
   under the Liftings moved head, in the muted question style of the card head */
.vn-mline { margin: 0 0 6px; color: var(--muted); font-size: 12.5px; }
.vn-fc { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 999px; background: var(--card); color: var(--ink); font: 500 var(--fs-body) Inter, system-ui, sans-serif; cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); }
.vn-fc b { font-weight: 700; color: var(--muted); }
.vn-fc:hover:not(:disabled) { border-color: var(--acc); }
.vn-fc.on { background: var(--acc-t); border-color: var(--acc); color: var(--acc-tx); font-weight: 600; }
.vn-fc.on b { color: var(--acc-tx); }
.vn-fc:disabled { color: var(--dis); cursor: not-allowed; }
.vn-fc:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vn-mv th.vn-grp { text-align: left; border-bottom: 1px solid var(--hair); }
.vn-mv td { white-space: nowrap; }
/* NEO s106 (JUDGE Round 20 VN-05 "Value change column blank"): the source cell (code and name) may wrap at the wide form, so
   the table fits its card at 1440 and the value column stays in view; where the table scrolls (narrow: 390, the dock
   form) the value column stays at the right edge of the scroller, as the key column stays at the left (ui.css) */
.vn-mv td.vn-cpw { white-space: normal; min-width: 120px; }
@container (max-width: 759.98px) {
  .xm-view .tscroll > table.vn-mv th.vn-mv-v, .xm-view .tscroll > table.vn-mv td.vn-mv-v { position: sticky; right: 0; z-index: 1; background: var(--card); }
}
.vn-mv td.vn-bef { color: var(--muted); }
/* NEO s85 (cross finding 7 rest, prototype producer-moved): Before and After are one cell "day, buyer, ship".
   NEO s146 (JUDGE Round 38 For the lanes 3, 4875 portfolio-moved and producer-moved, proto/app/ui/app.js movedView): the
   cells are plain, as the prototype; the Change column names the change. vn-chg stays as the mark of a changed part (no
   fill, no accent colour, no bold; was .vn-mv td.vn-chg with a green fill and .vn-mv span.vn-chg bold accent text). */
.vn-tag { display: inline-block; padding: 0 8px; margin-right: 4px; border-radius: 999px; background: var(--surface-2); font-size: var(--fs-label); font-weight: 600; line-height: 20px; }
.vn-more-l { margin: 8px 0 0; font-size: var(--fs-label); color: var(--muted); }
/* calculation log (B5.10) */
.vn-rl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.vn-rl li { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hair2); font-size: var(--fs-body); }
.vn-rl li:last-child { border-bottom: 0; }
.vn-rl svg { width: 16px; height: 16px; color: var(--acc-tx); }
.vn-rl b { font-size: var(--fs-label); font-weight: 600; color: var(--acc-tx); }
.vn-run { list-style: none; margin: 0 0 12px; padding: 0; }
.vn-run li { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; position: relative; }
.vn-run li + li::before { content: ''; position: absolute; left: 7px; top: -12px; height: 24px; border-left: 2px solid var(--hair); }
/* polish PA (round 1): scoped to the run log; the bare .vn-dot rule overrode the 8 px step-bar dot and drew a "0" ring */
.vn-run .vn-dot { display: block; width: 12px; height: 12px; margin-left: 2px; border-radius: 50%; border: 2px solid var(--muted); background: var(--card); position: relative; z-index: 1; }
.vn-run .vn-dot.on { border-color: var(--acc); background: var(--acc); }
.vn-run .vn-dot.end { border-color: var(--ink); }
.vn-run b { font-weight: 600; }
.vn-det summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 600; color: var(--acc-tx); list-style: none; }
.vn-det summary svg { width: 14px; height: 14px; transition: transform var(--t-fast); }
.vn-det[open] summary svg { transform: rotate(90deg); }
.vn-det p { margin: 8px 0 0; color: var(--ink2); }
@media (max-width: 1100px) { .vn-cts { grid-template-columns: 1fr; } }
.vn-ct-d .vn-ct-s { justify-content: center; font-size: var(--fs-label); color: var(--muted); }
.vn-ver td.vn-saved { white-space: nowrap; }
.vn-ver th { white-space: nowrap; }
.vn-ver .vn-vbar { width: 40px; }
.vn-node > button { width: 216px; }
.vn-ver td, .vn-ver th { vertical-align: middle; }
.vn-ver td.vn-name { max-width: 300px; }
.vn-ver td.vn-acts { width: 1%; padding-left: 8px; }
.vn-acts { display: table-cell; }
.vn-acts .btn { vertical-align: middle; }
.vn-acts-gap { display: inline-block; width: 32px; margin-left: 4px; vertical-align: middle; }
.vn-delta .vn-u { margin-left: 0; }

/* ---------- VN-07 Neo dock (IA 7.9; mockup L292 to L324 and L554 to L563, on the 4/8 grid) ---------- */
/* [KB T7.3] the dock sits on the edge, full height, own scroll; [QR 75] AI output is marked and sourced */
.vn-neo { display: flex; flex-direction: column; height: 100%; min-width: 0; font-size: var(--fs-body); color: var(--ink); }
.vn-neo-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; min-height: 56px; border-bottom: 1px solid var(--hair); flex: none; }
.vn-neo-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.vn-neo-tt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.vn-neo-name { display: inline-flex; align-items: center; gap: 8px; } .vn-neo-name b { font-size: 16px; font-weight: 600; }
.vn-neo-sub { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.vn-neo-ai { display: inline-flex; align-items: center; height: 16px; padding: 0 4px; border-radius: var(--r-xs); background: var(--gd); color: var(--gl); font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: .04em; }
.vn-neo-tools { display: flex; align-items: center; gap: 4px; flex: none; }
.vn-neo-mode { margin-right: 4px; }
/* W3 s49 (NOTE PLAT to NEO 05:22, LOOK shots SH-01 and SH-06 at 1280 with the dock): in live mode the head holds Chats
   too, the tools took 299 of the 376 px and the title shrank under "Neo AI" (the AI badge under Simple | Details, the sub
   line "Ask a..."). Two rows in live mode (neo.js head(), class two): row 1 mark, name, Chats, New, Close; row 2 the chat
   question and the answer switch. Every label stays [KB keep labels and cues]; the mark stays beside both rows. */
.vn-neo-head.two { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto auto; grid-template-areas: "mark name list new close" "mark sub mode mode mode"; column-gap: 4px; row-gap: 4px; align-items: center; }
.vn-neo-head.two .vn-neo-title, .vn-neo-head.two .vn-neo-tt, .vn-neo-head.two .vn-neo-tools { display: contents; }
.vn-neo-head.two .neo-mark { grid-area: mark; flex: none; }
.vn-neo-head.two .vn-neo-name { grid-area: name; justify-self: start; margin-left: 8px; }
.vn-neo-head.two .vn-neo-sub { grid-area: sub; min-width: 0; max-width: none; margin-left: 8px; }
.vn-neo-head.two .vn-neo-mode { grid-area: mode; justify-self: end; margin-right: 0; }
.vn-neo-head.two [data-neo="list"] { grid-area: list; } .vn-neo-head.two [data-neo="new"] { grid-area: new; } .vn-neo-head.two [data-neo="close"] { grid-area: close; }
/* NEO s156: the live head is the 4875 neo-h (proto/app/ui/r6/neo.css 7 to 10, 79, 92): one row on the baseline, Neo and
   the AI tag, the step chip that takes the free width, then the text buttons Chats, New and Close */
.vn-neo-head.one { display: flex; align-items: baseline; gap: 10px; min-height: 0; padding: 14px 16px 10px; }
.vn-neo-head.one .vn-neo-name { flex: none; gap: 6px; }
.vn-neo-head.one .vn-neo-name b { font-size: 15px; font-weight: 650; color: var(--ink); }
.vn-neo-head.one .vn-neo-ai { align-self: center; }
.vn-neo-step { flex: 1; min-width: 0; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-neo-hb.tx { flex: none; height: auto; padding: 4px 10px; border-radius: 7px; background: transparent; font-size: 12px; font-weight: 550; line-height: 1.4; }
.vn-neo-fx { margin: 4px 0 0; } .vn-neo-fx > summary { cursor: pointer; list-style: none; } .vn-neo-fx > summary::-webkit-details-marker { display: none; }
.vn-neo-fx > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .vn-neo-fx[open] > summary { margin-bottom: 8px; }
.vn-neo-hb { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; padding: 0 8px; border: 1px solid var(--hair); border-radius: var(--r-sm); background: var(--card); color: var(--ink2); font: 600 var(--fs-chip)/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.vn-neo-hb.icon { width: 28px; padding: 0; } .vn-neo-hb.lg { width: 40px; height: 40px; border-color: var(--ctl); border-radius: var(--r-md); }
.vn-neo-hb:hover:not(:disabled) { background: var(--page); border-color: var(--acc); color: var(--acc-tx); }
.vn-neo-hb:active:not(:disabled) { transform: translateY(1px); }
.vn-neo-hb:disabled { opacity: .45; cursor: default; }
.vn-neo-hb:focus-visible, .vn-neo-card:focus-visible, .vn-neo-prompt:focus-visible, .vn-neo-show:focus-visible, .vn-neo-fact:focus-visible, .vn-neo-steps:focus-visible, .vn-neo-file:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vn-neo-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 8px; scroll-behavior: smooth; }
.vn-neo-lbl { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--fs-label); font-weight: 600; color: var(--muted); }
.vn-neo-lbl:not(:first-child) { margin-top: 24px; }
.vn-neo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vn-neo-card { display: flex; flex-direction: column; gap: 4px; min-height: 120px; text-align: left; border: 1px solid var(--acc-l); background: var(--acc-t); border-radius: var(--r-lg); padding: 12px; color: var(--ink); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.vn-neo-card:hover { border-color: var(--acc); box-shadow: var(--sh-card); }
.vn-neo-card:active { transform: translateY(1px); }
.vn-neo-cl { font-size: var(--fs-label); font-weight: 600; color: var(--ink2); line-height: 1.35; }
.vn-neo-cv { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; margin-top: 2px; }
.vn-neo-cv b { font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.vn-neo-cv b.neg { color: var(--loss); } .vn-neo-cv b.pos { color: var(--acc-tx); }
.vn-neo-cv span { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.vn-neo-bar { display: block; height: 4px; border-radius: 2px; background: var(--card); overflow: hidden; margin-top: 4px; }
.vn-neo-bar i { display: block; height: 100%; border-radius: 2px; background: var(--acc); }
.vn-neo-bar i.neg { background: var(--loss); } /* NEO s75: the share bar of a cargo that loses money (prototype nb2 i.neg) */
.vn-neo-cq { display: flex; align-items: flex-start; gap: 6px; margin-top: auto; padding-top: 8px; color: var(--acc-tx); font-weight: 600; font-size: var(--fs-label); line-height: 1.35; }
.vn-neo-cq svg { flex: none; margin-top: 1px; }
/* NEO s82 (JUDGE Round 9 cross finding 2, RU-01 1280 dock): the question is one text run beside the icon, and a cargo code
   (SPA-1, DL1-02) never breaks at its hyphen, in the question or in the value line */
.vn-neo-cqt { flex: 1 1 auto; min-width: 0; }
.vn-neo-cqt > span, .vn-neo-cv b > span { white-space: nowrap; }
.vn-neo-prompts { display: flex; flex-direction: column; gap: 8px; }
/* NEO s95 (item 70 (a)): live, no label line over the prompts, so the row keeps the 24 px space of the label */
.vn-neo-cards + .vn-neo-prompts { margin-top: 24px; }
/* NEO s144 (JUDGE Round 37 For the lanes 4, item 72): live, the 4875 neo-start (proto ui/r6/neo.css neo-hi, neo-cards,
   neo-card nv, nq, nb2): one column of white cards; the number line 14 px, the question in the accent ink, the bar last */
.vn-neo-hi { margin: 0 0 8px; font-size: var(--fs-small); color: var(--muted); }
.vn-neo-cards.one { display: flex; flex-direction: column; gap: 8px; }
.vn-neo-cards.one .vn-neo-card { min-height: 0; gap: 4px; padding: 10px 12px; border-color: var(--hair); background: var(--card); border-radius: var(--r-md); }
.vn-neo-cards.one .vn-neo-card:hover { border-color: var(--acc-l); }
.vn-neo-cards.one .vn-neo-cv { display: block; margin-top: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.vn-neo-cards.one .vn-neo-cv b { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.vn-neo-cards.one .vn-neo-cv span { font-size: inherit; color: inherit; }
.vn-neo-cards.one .vn-neo-cv b, .vn-neo-cards.one .vn-neo-cv .n { color: var(--ink); }
.vn-neo-cards.one .vn-neo-cv b.neg { color: var(--loss); } .vn-neo-cards.one .vn-neo-cv b.pos { color: var(--acc-tx); }
.vn-neo-cards.one .vn-neo-cv .u { font-size: var(--fs-small); color: var(--muted); }
.vn-neo-cards.one .vn-neo-cv .n span, .vn-neo-cards.one .vn-neo-cv b span { white-space: nowrap; }
.vn-neo-cards.one .vn-neo-cq { display: block; margin-top: 0; padding-top: 0; }
.vn-neo-cards.one .vn-neo-cq > span { white-space: nowrap; } /* a cargo code (SPA-1) never breaks at its hyphen (NEO s82) */
.vn-neo-cards.one .vn-neo-bar { margin-top: 2px; background: var(--hair2, var(--hair)); }
.vn-neo-prompt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; text-align: left; border: 1px solid var(--hair); background: var(--card); border-radius: var(--r-md); padding: 8px 12px; color: var(--ink); font-weight: 500; cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); }
.vn-neo-prompt svg { flex: none; color: var(--muted); transition: transform var(--t-fast), color var(--t-fast); }
.vn-neo-prompt:hover { border-color: var(--acc-l); background: var(--acc-t); } .vn-neo-prompt:hover svg { color: var(--acc-tx); transform: translateX(2px); }
/* W3 s21: the Chats list of the dock (demo neo-list); one row per chat of the user on the scenario */
.vn-neo-hb.on { background: var(--acc-t); border-color: var(--acc-l); color: var(--acc-tx); }
.vn-neo-chats { display: flex; flex-direction: column; gap: 8px; }
.vn-neo-chat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; width: 100%; text-align: left; border: 1px solid var(--hair); background: var(--card); border-radius: var(--r-md); padding: 8px 12px; color: var(--ink); cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast); }
.vn-neo-chat .t { font-weight: 500; overflow-wrap: anywhere; }
.vn-neo-chat .m { font-size: var(--fs-label); color: var(--ink2); font-variant-numeric: tabular-nums; }
.vn-neo-chat:hover { border-color: var(--acc-l); background: var(--acc-t); }
.vn-neo-chat.on { border-color: var(--acc); }
.vn-neo-chat:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vn-neo-none { margin: 0; color: var(--ink2); }
.vn-neo-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 32px; border: 1px solid var(--hair); background: var(--card); border-radius: var(--r-md); padding: 4px 8px; font-size: var(--fs-label); color: var(--ink); align-self: flex-start; }
.vn-neo-file b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vn-neo-file span { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vn-neo-file.add { cursor: pointer; width: 100%; } .vn-neo-file.add:hover { border-color: var(--acc); }
.vn-neo-fadd { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--acc-tx) !important; font-weight: 600; }
.vn-neo-file.sm { min-height: 28px; padding: 2px 4px 2px 8px; }
.vn-neo-file.sm button { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--muted); cursor: pointer; }
.vn-neo-file.sm button:hover { background: var(--page); color: var(--ink); }
.vn-neo-file.about { border-style: dashed; border-color: var(--acc); background: var(--acc-t); }
.vn-neo-file .pre { color: var(--acc-tx); font-weight: 600; }
.vn-neo-none { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px; text-align: center; }
.vn-neo-none span { color: var(--muted); }
.vn-neo-turn { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; animation: vn-neo-in .18s ease-out; }
@keyframes vn-neo-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.vn-neo-user { align-self: stretch; background: var(--hair2); border-radius: var(--r-lg); padding: 8px 16px; min-height: 40px; display: flex; align-items: center; font-weight: 500; box-shadow: inset 0 0 0 1px var(--hair); line-height: 1.45; }
.vn-neo-about { display: flex; flex-wrap: wrap; gap: 4px; }
.vn-neo-from { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .vn-neo-from b { font-size: var(--fs-tab); font-weight: 600; }
.vn-neo-steps { display: flex; align-items: center; gap: 8px; min-height: 32px; width: 100%; padding: 4px 12px; border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--card); color: var(--ink2); font: 500 var(--fs-chip)/1.3 Inter, system-ui, sans-serif; text-align: left; }
.vn-neo-steps .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); flex: none; }
.vn-neo-steps.working .dot { animation: vn-neo-pulse 1s ease-in-out infinite; }
.vn-neo-steps .n { margin-left: auto; color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.vn-neo-steps.done { cursor: pointer; } .vn-neo-steps.done svg { margin-left: auto; color: var(--muted); transition: transform var(--t-fast); }
.vn-neo-steps.done[aria-expanded="true"] svg { transform: rotate(90deg); }
.vn-neo-steps.done:hover { border-color: var(--ctl); }
/* W3 s22 (SENSE audit 2 B3-8): a failed turn shows where it stopped, in the loss tone, never the done dot */
.vn-neo-steps.fail .dot { background: var(--loss); }
@keyframes vn-neo-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
.vn-neo-steplist { list-style: none; margin: 0; padding: 0 12px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-label); color: var(--muted); }
.vn-neo-steplist li { display: flex; align-items: center; gap: 8px; } .vn-neo-steplist svg { color: var(--acc-tx); }
.vn-neo-skel { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.vn-neo-skel i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--hair2) 0%, var(--hair) 50%, var(--hair2) 100%); background-size: 200% 100%; animation: vn-neo-sh 1.2s linear infinite; }
@keyframes vn-neo-sh { from { background-position: 200% 0; } to { background-position: 0 0; } }
.vn-neo-basis { font-size: var(--fs-small); color: var(--muted); }
.vn-neo-ans { line-height: 1.6; }
/* NEO W3 s55 (PV-11): paragraphs and the bullet list of a live answer */
.vn-neo-ans p { margin: 0 0 8px; } .vn-neo-ans p:last-child, .vn-neo-ans .vn-neo-ul:last-child { margin-bottom: 0; }
.vn-neo-ans .vn-neo-ul { margin: 0 0 8px; padding-left: 20px; list-style: disc; } .vn-neo-ans .vn-neo-ul li { margin: 2px 0; }
/* NEO W3 s56 (PV-11 part 5): the provisional text while Neo works; a number shows only as a pending chip until it is checked */
.vn-neo-ans.draft { color: var(--ink2); }
.vn-neo-fact.pend { display: inline-block; width: 3.2em; height: 1em; padding: 0; vertical-align: -0.12em; cursor: default; box-shadow: none; background: linear-gradient(90deg, var(--hair2) 0%, var(--hair) 50%, var(--hair2) 100%); background-size: 200% 100%; animation: vn-neo-sh 1.2s linear infinite; }
.vn-neo-pnote { margin: 4px 0 0; font-size: var(--fs-label); color: var(--muted); }
.vn-neo-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: var(--r-xs); background: var(--hair2); font-weight: 700; font-variant-numeric: tabular-nums; }
.vn-neo-fact { display: inline-flex; align-items: baseline; gap: 2px; padding: 0 6px; border-radius: var(--r-sm); background: var(--acc-t); box-shadow: inset 0 0 0 1px var(--acc-l); color: var(--ink2); font-size: var(--fs-label); white-space: nowrap; cursor: help; font-variant-numeric: tabular-nums; }
.vn-neo-fact b { font-size: var(--fs-body); font-weight: 700; color: var(--ink); }
.vn-neo-fact.neg b { color: var(--loss); } .vn-neo-fact.pos b { color: var(--acc-tx); }
.vn-neo-fact:hover { box-shadow: inset 0 0 0 1px var(--acc); }
.vn-neo-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: hidden; }
.vn-neo-rows li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 4px 12px; font-size: var(--fs-chip); }
.vn-neo-rows li + li { border-top: 1px solid var(--hair2); }
.vn-neo-rows .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vn-neo-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.vn-neo-show { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 12px; border: 1px solid var(--acc-l); border-radius: 14px; background: var(--acc-t); color: var(--acc-tx); font: 600 var(--fs-chip)/1.2 Inter, system-ui, sans-serif; cursor: pointer; transition: border-color var(--t-fast); }
.vn-neo-show:hover { border-color: var(--acc); }
.vn-neo-show.quiet { border-color: var(--hair); background: var(--card); color: var(--ink2); } .vn-neo-show.quiet:hover { border-color: var(--ctl); }
.vn-neo-facts { width: 100%; border-collapse: collapse; font-size: var(--fs-label); border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: hidden; }
.vn-neo-facts caption { text-align: left; font-weight: 600; color: var(--muted); padding: 0 0 4px; }
.vn-neo-facts th { text-align: left; font-weight: 600; color: var(--muted); padding: 4px 8px; background: var(--surface-2); border-bottom: 1px solid var(--hair); }
.vn-neo-facts td { padding: 4px 8px; border-bottom: 1px solid var(--hair2); vertical-align: top; }
.vn-neo-facts .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vn-neo-facts .k { display: inline-block; min-width: 24px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.vn-neo-facts .src { color: var(--muted); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vn-neo-stop, .vn-neo-err { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--hair); background: var(--surface-2); }
.vn-neo-stop > div, .vn-neo-err > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vn-neo-stop span, .vn-neo-err span { color: var(--ink2); font-size: var(--fs-chip); }
.vn-neo-stop > svg { color: var(--muted); flex: none; margin-top: 2px; }
.vn-neo-err { border-color: var(--loss-b); background: var(--loss-l); } .vn-neo-err > svg { color: var(--loss); flex: none; margin-top: 2px; } .vn-neo-err b { color: var(--loss); }
.vn-neo-det summary { cursor: pointer; color: var(--ink2); font-size: var(--fs-small); } .vn-neo-det code { display: block; margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink2); font-size: var(--fs-small); }
.vn-neo-req { border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 8px 12px 4px; background: var(--card); }
.vn-neo-reqh { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: var(--fs-label); font-weight: 600; color: var(--ink2); }
.vn-neo-reqh .u { margin-left: auto; color: var(--muted); font-weight: 500; font-size: var(--fs-small); }
.vn-neo-rq { display: flex; align-items: center; gap: 8px; min-height: 48px; border-top: 1px solid var(--hair2); }
.vn-neo-rq:first-of-type { border-top: 0; } .vn-neo-rq.both { border-top: 1px solid var(--hair); }
.vn-neo-rq > svg { flex: none; color: var(--muted); }
.vn-neo-rq .l { flex: 1; min-width: 0; font-weight: 600; line-height: 1.3; }
.vn-neo-rq .v { min-width: 48px; height: 28px; display: inline-flex; align-items: center; justify-content: flex-end; padding: 0 6px; border: 1px solid var(--hair); border-radius: var(--r-sm); font-weight: 700; font-variant-numeric: tabular-nums; cursor: help; }
.vn-neo-rq .v.neg { color: var(--loss); } .vn-neo-rq .v.pos { color: var(--acc-tx); }
.vn-neo-done { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; color: var(--acc-tx); font-weight: 600; font-size: var(--fs-chip); }
.vn-neo-foot { flex: none; border-top: 1px solid var(--hair); padding: 8px 16px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.vn-neo-sees { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: var(--fs-small); color: var(--muted); overflow: hidden; }
.vn-neo-sees .k { display: inline-flex; align-items: center; gap: 4px; flex: none; font-weight: 600; color: var(--ink2); margin-right: 4px; }
.vn-neo-sees .chip { min-width: 0; max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; font-size: var(--fs-small); padding: 2px 8px; }
.vn-neo-att { display: flex; flex-wrap: wrap; gap: 4px; }
.vn-neo-comp { display: flex; align-items: flex-end; gap: 8px; margin: 0; }
.vn-neo-comp textarea { flex: 1; min-width: 0; resize: none; height: 40px; border: 1px solid var(--ctl); border-radius: var(--r-md); padding: 8px 12px; font: 400 var(--fs-body)/1.6 Inter, system-ui, sans-serif; color: var(--ink); background: var(--card); transition: border-color var(--t-fast); }
.vn-neo-comp textarea::placeholder { color: var(--muted); }
.vn-neo-comp textarea:hover { border-color: var(--muted-l); }
.vn-neo-comp textarea:focus { outline: 2px solid var(--acc-l); outline-offset: 0; border-color: var(--acc); }
.vn-neo-send { min-height: 40px; min-width: 72px; }
.vn-neo-disc { font-size: var(--fs-small); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .vn-neo-turn, .vn-neo-steps.working .dot, .vn-neo-skel i, .vn-neo-fact.pend { animation: none; } }
@media print { #xm-dock { display: none !important; } }
/* VN-07 refinements: aligned request columns, two-line moved rows, fact list with source line */
.vn-neo-rq { display: grid; grid-template-columns: 16px minmax(0, 1fr) 56px 124px; }
.vn-neo-rq .a { display: flex; justify-content: flex-end; gap: 8px; }
.vn-neo-rq .v { min-width: 0; }
.vn-neo-rows li { min-height: 48px; }
.vn-neo-rows .t { display: flex; flex-direction: column; gap: 0; white-space: normal; line-height: 1.35; }
.vn-neo-rows .t b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.vn-neo-rows .t span { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-neo-lbl.sm { margin: 4px 0 0; }
.vn-neo-facts { border-collapse: separate; border-spacing: 0; }
.vn-neo-facts td { padding: 8px; }
.vn-neo-facts tr:last-child td { border-bottom: 0; }
.vn-neo-facts td:first-child { display: flex; gap: 4px; }
.vn-neo-facts .fl { display: flex; flex-direction: column; min-width: 0; }
.vn-neo-facts .fl .src { max-width: 200px; font-size: var(--fs-small); }
.vn-neo-facts b.neg { color: var(--loss); } .vn-neo-facts b.pos { color: var(--acc-tx); }
.vn-neo-acts { align-items: center; } .vn-neo-acts .cp { margin-left: auto; }
/* an odd last computed card spans the row, so no card stands alone in half a row */
.vn-neo-card:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; }

/* ---------- VN-08 Neo graph cards, VN-09 document card (views/vn/neo-graphs.js) ---------- */
/* [KB T6.11] title and question above the chart, nothing below; [QR 26] 11 px floor; tabular figures */
.vn-gx { margin: 0; border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--card); padding: 12px 12px 8px; box-shadow: var(--sh-card); }
.vn-gx-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; min-width: 0; }
.vn-gx-h .t { font-weight: 600; font-size: var(--fs-body); color: var(--ink); line-height: 1.3; }
.vn-gx-h .q { font-size: var(--fs-label); color: var(--muted); line-height: 1.4; }
.vn-gx-h .u { font-size: var(--fs-small); color: var(--muted-l); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.vn-gx-plot { min-height: 120px; }
.vn-gx-svg { display: block; overflow: visible; font-variant-numeric: tabular-nums; }
.vn-gx-svg text { font-family: Inter, system-ui, sans-serif; pointer-events: none; }
.vn-gx-mark { cursor: default; outline: none; }
.vn-gx-mark .hit { fill: transparent; }
.vn-gx-mark:hover .hit, .vn-gx-mark:focus-visible .hit { fill: var(--hair2); }
.vn-gx-mark rect:not(.hit) { transition: opacity var(--t-fast); }
.vn-gx-svg:hover .vn-gx-mark:not(:hover) rect:not(.hit) { opacity: .55; }
.vn-gx-skel { height: 160px; border-radius: var(--r-md); background: linear-gradient(90deg, var(--hair2) 0, var(--track) 40%, var(--hair2) 80%); background-size: 200% 100%; animation: vn-shim 1.2s linear infinite; }
.vn-gx-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vn-gx-tile { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--hair); border-radius: var(--r-md); padding: 8px 12px; min-height: 72px; }
.vn-gx-tile .k { font-size: var(--fs-label); color: var(--muted); }
.vn-gx-tile b { font-size: var(--fs-title); line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--ink); }
.vn-gx-tile b.pos { color: var(--acc-tx); }
.vn-gx-tile .u { font-size: var(--fs-small); color: var(--muted-l); }
.vn-gx-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--card); }
.vn-gx-list li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--hair2); min-height: 48px; }
.vn-gx-list li:first-child { border-top: 0; }
.vn-gx-list li.on { background: var(--acc-t); }
.vn-gx-list .t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.vn-gx-list .t b { font-weight: 600; font-size: var(--fs-chip); }
.vn-gx-list .t span { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-gx-doc { display: flex; align-items: center; gap: 12px; border: 1px solid var(--acc-l); background: var(--acc-t); border-radius: var(--r-lg); padding: 12px; }
.vn-gx-doc .ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-md); background: var(--card); color: var(--acc-tx); border: 1px solid var(--acc-l); }
.vn-gx-doc .t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.vn-gx-doc .kd { font-size: var(--fs-small); font-weight: 600; color: var(--acc-tx); }
.vn-gx-doc .t b { font-size: var(--fs-body); }
.vn-gx-doc .m { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.vn-gx-doc .a { display: flex; flex-direction: column; gap: 4px; flex: none; }

/* VN-08 session 5: a total bar in --gd is near black on the dark card; dark draws totals in --ink2 (the end total stays --acc) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vn-gx-svg rect.tot { fill: var(--ink2) !important; } }
:root[data-theme="dark"] .vn-gx-svg rect.tot { fill: var(--ink2) !important; }

/* ---------- VN-08 session 6: dot charts, contract targets, version table (views/vn/neo-graphs.js) ---------- */
/* the key sits above the plot, so nothing is below the chart [KB T6.11]; counts in tabular figures */
.vn-gx-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 8px; font-size: var(--fs-small); color: var(--muted); }
.vn-gx-key span { display: inline-flex; align-items: center; gap: 4px; }
.vn-gx-key i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.vn-gx-key b { color: var(--ink2); font-weight: 600; font-variant-numeric: tabular-nums; }
.vn-gx-mark circle:not(.hit) { transition: opacity var(--t-fast), r var(--t-fast); }
.vn-gx-mark circle.hit { fill: transparent; }
.vn-gx-mark:hover circle.hit, .vn-gx-mark:focus-visible circle.hit { fill: var(--hair); }
.vn-gx-svg:hover .vn-gx-mark:not(:hover) circle:not(.hit) { opacity: .35; }
.vn-gx-mark:hover circle:not(.hit), .vn-gx-mark:focus-visible circle:not(.hit) { r: 4.5; }
.vn-gx-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-chip); font-variant-numeric: tabular-nums; table-layout: fixed; }
.vn-gx-tbl th { font-size: var(--fs-small); font-weight: 600; color: var(--muted); text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--hair); }
.vn-gx-tbl th:nth-child(2) { width: 68px; } .vn-gx-tbl th:nth-child(3) { width: 52px; } .vn-gx-tbl th:nth-child(4) { width: 60px; }
.vn-gx-tbl td { padding: 8px; border-bottom: 1px solid var(--hair2); vertical-align: top; line-height: 1.35; }
.vn-gx-tbl tr:last-child td { border-bottom: 0; }
.vn-gx-tbl .r { text-align: right; white-space: nowrap; }
.vn-gx-tbl td:first-child { display: flex; flex-direction: column; min-width: 0; }
.vn-gx-tbl .v { font-weight: 600; color: var(--ink); }
.vn-gx-tbl .n, .vn-gx-tbl .s { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-gx-tbl .s { color: var(--muted-l); }
.vn-gx-tbl b { font-weight: 600; } .vn-gx-tbl .pos { color: var(--acc-tx); } .vn-gx-tbl .neg { color: var(--loss); } .vn-gx-tbl .mu { color: var(--muted); }
.vn-gx-tbl tbody tr { transition: background var(--t-fast); outline: none; }
.vn-gx-tbl tbody tr:hover, .vn-gx-tbl tbody tr:focus-visible { background: var(--hair2); }
.vn-gx-tbl tr.on { background: var(--acc-t); } .vn-gx-tbl tr.on .v { color: var(--acc-tx); }

/* VN-10 Export a version (Excel, 7 sheets): the button sits at the right end of the history depth row */
.vn-depth-act { margin-left: auto; align-self: center; }

/* VN-11 Print layout. html.vn-print is set by beforeprint (real print) and by ?print=1 (preview). The mockup
   print rules (M L583 to L587): no rail, Neo, tabs, tools, ask, strip; no nego, change, alts or timeline card.
   The print head replaces the tabs and the state line. Always light tokens (print.js sets data-theme light). */
@page { size: A4 landscape; margin: 12mm; }
.vn-ph, .vn-pbar { display: none; }
html.vn-print .xm-rail, html.vn-print #xm-dock, html.vn-print .xm-tabs, html.vn-print .xm-subtabs, html.vn-print .xm-acts,
html.vn-print .xf-tools, html.vn-print .ask-neo, html.vn-print #xm-stateline, html.vn-print .vn-line, html.vn-print .vn-toasts,
html.vn-print .toast, html.vn-print .xm-dev, html.vn-print .vn-drawer, html.vn-print .vn-scrim, html.vn-print .vn-acts,
html.vn-print [data-card="nego"], html.vn-print [data-card="change"], html.vn-print [data-card="alts"], html.vn-print [data-card="timeline"],
html.vn-print [role="tooltip"], html.vn-print .vn-depth-act, html.vn-print .vn-noprint, html.vn-print .xm-head, html.vn-print #xm-view .btn { display: none !important; }
html.vn-print body { background: #fff; width: 100%; }
html.vn-print .xm-shell { display: block; width: 100%; background: none; }
html.vn-print .xm-main { padding: 0; max-width: none; }
html.vn-print .card { box-shadow: none; break-inside: avoid; border: 1px solid var(--hair); }
html.vn-print .tscroll { overflow: visible; }
html.vn-print thead { display: table-header-group; }
html.vn-print tr { break-inside: avoid; }
html.vn-print .vn-ph { display: block; margin: 0 0 16px; padding: 0 0 12px; border-bottom: 2px solid var(--ink); break-after: avoid; }
.vn-ph-top { display: flex; align-items: baseline; gap: 16px; }
.vn-ph-top b { font-size: var(--fs-title); font-weight: 700; color: var(--ink); }
.vn-ph-top span { font-size: var(--fs-body); color: var(--muted); }
.vn-ph dl { display: flex; flex-wrap: wrap; gap: 4px 32px; margin: 8px 0 0; }
.vn-ph dl div { display: flex; gap: 8px; align-items: baseline; }
.vn-ph dt { font-size: var(--fs-label); color: var(--muted); }
.vn-ph dd { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
/* screen preview: one A4 landscape sheet width (277 mm = 1047 px) on a grey desk, bar fixed at the bottom */
@media screen {
  html.vn-pv body { background: #E4E8E6; }
  html.vn-pv .xm-shell { width: 100%; }
  html.vn-pv .xm-main { box-sizing: content-box; max-width: 1047px; margin: 24px auto 96px; padding: 45px; background: #fff; box-shadow: 0 2px 16px -6px rgba(18, 54, 39, .30); }
  html.vn-pv .vn-pbar { display: flex; position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80; align-items: center; gap: 12px;
    padding: 8px 8px 8px 16px; border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-pop); font-size: var(--fs-body); color: var(--ink2); white-space: nowrap; }
  html.vn-pv .vn-pbar b { color: var(--ink); }
}
@media print { html.vn-print .vn-pbar { display: none !important; } }

/* session 8: line graphs; one hover column per point shows the dots of that day [KB T6 hover shows the build up] */
.vn-gx-svg .vn-gx-col circle.pt { opacity: 0 !important; transition: opacity var(--t-fast); }
.vn-gx-svg .vn-gx-col:hover circle.pt { opacity: 1 !important; r: 3.5; }
.vn-gx-svg .vn-gx-col:hover .hit { fill: var(--hair); }

/* polish PC (round 1): empty hint under the only step of the timeline drawer */
.vn-tl-empty { display: flex; align-items: flex-start; gap: 8px; margin: 16px 16px 0; padding: 12px 16px; border: 1px dashed var(--hair); border-radius: var(--r-md, 8px); font-size: var(--fs-small, 12px); line-height: 1.5; color: var(--muted); }
.vn-tl-empty svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; }

/* polish PC (round 2), VN-04: the version chain fills the card. With 2 or 3 versions the nodes grow to 320 px
   instead of leaving 60 % of the card empty; with many versions they keep 216 px and the row scrolls [KB layout: fill the frame] */
.vn-node { flex: 1 1 216px; min-width: 216px; max-width: 320px; }
.vn-node > button { width: 100%; }

/* polish PC (round 2), VN-07 with the dock open under 1440 px (CRITIC-DESIGN F10). The main column is 672 px at 1280.
   Before: the tab row cut "Calculation log", Save version fell to a third header row and the KPI tile sub lines ended in
   "...". Now: the tab row takes 10 px side padding (600 of 608 px), the price chip drops its clock icon (the word
   "Prices" stays) and the three icon buttons sit 4 px apart as one group, so the header keeps 2 rows; tile sub lines
   wrap instead of cutting [KB anti-pattern end truncation; KB grouping by proximity]. Shared frame and RP selectors,
   scoped to an open dock only; note in requests.md. */
@media (max-width: 1439px) {
  .xm-shell:has(> #xm-dock:not([hidden])) .xm-tabs a { padding-left: 10px; padding-right: 10px; }
  .xm-shell:has(> #xm-dock:not([hidden])) .xm-price > .ic:first-child { display: none; }
  .xm-shell:has(> #xm-dock:not([hidden])) .xm-acts > .btn.icon + .btn.icon,
  .xm-shell:has(> #xm-dock:not([hidden])) .xm-acts > .btn.icon + .btn.xm-share { margin-left: -4px; }
}
/* the KPI tiles of a result page go 2 by 2 while the dock is open (the 1100 px rule of rp.css), so each sub line keeps one
   full line ("USD million · 20,700,240 MMBtu") instead of an ellipsis or a 3 line wrap [KB anti-pattern end truncation] */
.xm-shell:has(> #xm-dock:not([hidden])) .rp-kpis { grid-template-columns: 1fr 1fr; }
/* polish PC (round 2), VN-07: the fact card lead breaks in balanced halves ("Best free window: / 21-30 Sep"), never one
   orphan word on line 2 [KB type: no orphan, keep a value together]. The ask line keeps the normal break (balance split "21-30") */
.vn-neo-cl { text-wrap: balance; }

/* round 2 FE (Wed 21 Oct): VN-04 Base key line, VN-06 live (b) log. 4 px grid, tabular figures, tokens only. */
.vn-basekey { margin: 0 0 12px; max-width: 880px; }
.vn-basekey b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.vn-rl li.off span, .vn-rl li.off b { color: var(--muted); }
.vn-rl li.off svg { color: var(--muted); }
.vn-rl em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 4px; }
.vn-lc td.num, .vn-lc tfoot td { font-variant-numeric: tabular-nums; }
.vn-lc tfoot td { font-weight: 600; border-top: 1px solid var(--hair); }
.vn-lc tfoot td:first-child { font-weight: 400; color: var(--muted); font-size: var(--fs-label); }
.vn-h4 { margin: 4px 0 8px; font-size: var(--fs-label); font-weight: 600; color: var(--ink2, var(--ink)); }
.vn-in { display: grid; grid-template-columns: 136px 1fr; gap: 0 12px; margin: 0 0 12px; font-size: var(--fs-body); }
.vn-in dt, .vn-in dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--hair2); }
.vn-in dt { color: var(--muted); }
.vn-in dd { font-variant-numeric: tabular-nums; }
.vn-in dt:last-of-type, .vn-in dd:last-of-type { border-bottom: 0; }
.vn-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; }
.vn-meta li { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border: 1px solid var(--hair); border-radius: 999px; font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
.vn-meta li span { color: var(--muted); }
.vn-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-label); }
.vn-next span { color: var(--muted); margin-right: 4px; }
.vn-next b { font-weight: 600; font-variant-numeric: tabular-nums; }
.vn-next em { font-style: normal; color: var(--muted); }
/* round 2 FE-3: VN-04 at 1280 (FINAL 2 VN-04 read): the chain fits the card without a clipped selected node, and the
   versions table fits without a cut Saved column. Heads wrap to two lines at the bottom; numbers keep one line. */
.vn-chain { padding: 4px 2px 8px; }
.vn-node { flex: 1 1 0; min-width: 176px; max-width: 320px; }
.vn-ver th { white-space: normal; vertical-align: bottom; }
.vn-ver th.num { max-width: 120px; }
.vn-ver td.vn-name { max-width: 260px; }
.vn-ver td.vn-saved { white-space: normal; min-width: 104px; }
.vn-ver th .t-u { display: block; font-weight: 400; }
.vn-sd { white-space: nowrap; }

/* round 2 FE-8: Next best plans of the same run beside v1 in the chain (dashed, quiet, a link to Compare) */
.vn-link-alt svg { width: 14px; height: 14px; opacity: .7; }
.vn-node.vn-alt > a { position: relative; display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%; min-height: 120px; padding: 12px 16px; border: 1px dashed var(--ctl); border-radius: 10px; background: transparent; color: var(--ink); text-decoration: none; transition: border-color var(--t-fast), background-color var(--t-fast); }
.vn-node.vn-alt > a:hover { border-color: var(--acc); background: var(--card); }
.vn-node.vn-alt > a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vn-node.vn-alt .vn-nn { color: var(--ink2); }
/* round 2 FE-8: (e) log, why the one Europe cargo sits in its month */
.vn-ew { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); }
.vn-ew-h { margin: 0 0 8px; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.vn-edge td, .vn-edge th { padding-top: 8px; padding-bottom: 8px; }
.vn-edge td.num, .vn-edge th.num { font-variant-numeric: tabular-nums; }
.vn-edge tr.on td { background: var(--acc-t); }
.vn-edge td.pos { color: var(--acc-tx); font-weight: 600; }
.vn-edge .pill { margin-left: 4px; }
.vn-ew-n { margin: 8px 0 0; font-size: var(--fs-label); color: var(--muted); line-height: 1.45; }
.vn-edge td:first-child { white-space: nowrap; }
/* round 2 FE-9: Compare with one version: v1 beside an empty v2 slot, then the next step */
.vn-one { padding: 8px 0 0; }
.vn-one-v { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 720px; margin: 0 auto; }
.vn-one-b { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; min-height: 104px; border: 1px dashed var(--ctl); border-radius: 10px; color: var(--muted); font-size: var(--fs-label); }
.vn-one-b b { font-size: var(--fs-body); color: var(--ink2); font-weight: 600; }
.vn-one .empty-st { padding-top: 24px; }
/* round 2 FE-10: Neo graph wait state while engine runs run */
.vn-gx-wait { display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: var(--fs-label); line-height: 1.45; }
.vn-gx-wait .vn-gx-skel { display: block; height: 120px; }

/* round 2 FE-12: (c) Liftings moved, buyer and route on two lines in one cell; missed firm sale row in the (c) log */
.vn-mv td.vn-two { line-height: 20px; }
.vn-mv td.vn-two > span { display: block; white-space: nowrap; }
.vn-lc tr.vn-miss td { color: var(--ink2); background: var(--surface-2); }
.vn-lcc td.vn-two { line-height: 20px; }
.vn-lcc td.vn-two > span { display: block; white-space: nowrap; }
.vn-lcc td.vn-nw { white-space: nowrap; }
/* round 2 FE-12: the "n more plans" node of the chain takes only its words, so 5 nodes fit at 1280 */
.vn-chain .vn-node.vn-alt-more { flex: 0 1 176px; min-width: 160px; }

/* round 2 FE-13: the draft bar sizes itself by its own width, not the viewport. With the Neo dock open the line is
   768 px (1440) or 608 px (1280); viewport rules do not see that. Steps keep one row and cut no control
   [KB T7.4 no covered or cut control, T2 truncation keeps the meaning, QR 12 4/8 grid] */
.vn-line { container-type: inline-size; container-name: vnline; }
/* every chip folded: the fold button reads "2 changes" and takes the place of the count */
.vn-dchips.all { flex: 0 0 auto; min-width: auto; overflow: visible; }
.vn-dchips.all .vn-dmore { font-size: 0; gap: 4px; padding: 0 8px 0 10px; }
.vn-dchips.all .vn-dmore b { font-size: 12px; font-weight: 700; }
.vn-dchips.all .vn-dmore::after { content: "changes"; font-size: 12px; font-weight: 500; color: var(--ink2, var(--ink)); }
.vn-dchips.all .vn-dmore[data-k="1"]::after { content: "change"; }
.vn-dchips.all .vn-dmore::before { content: ""; order: 2; width: 6px; height: 6px; margin-left: 4px; border: solid currentColor;
  border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.vn-dchips.all .vn-dmore[aria-expanded="true"]::before { transform: translateY(2px) rotate(-135deg); }
.vn-line:has(> .vn-dchips.all) .vn-pv .vn-dn { display: none; }
/* the count sits next to the Draft tag; the value change follows it */
.vn-line:has(> .vn-dchips.all) > .vn-delta, .vn-line > .vn-dchips.all ~ * { order: 1; }
@container vnline (max-width: 820px) {
  .vn-line[data-status="preview"] .vn-step .vn-lbl { display: none; }
  .vn-line[data-status="preview"] .vn-step .vn-n::after { content: none; }
  .vn-step { padding: 0 8px; gap: 4px; }
  .vn-line[data-status="preview"] > .vn-step { min-width: 0; }
  /* Fix all keeps its pin icon, its name stays in the tip and the aria-label */
  .vn-btn[data-a="fixall"] { padding: 0 8px; min-width: 32px; justify-content: center; }
  .vn-btn[data-a="fixall"] > span { display: none; }
}
@container vnline (max-width: 680px) {
  /* in a draft Redo has nothing to redo; the timeline keeps every step */
  .vn-line[data-status="preview"] .vn-ib[data-a="redo"][aria-disabled="true"] { display: none; }
  /* the unit of the change stays for screen readers; the Results tab above shows "USD million" */
  .vn-line .vn-delta .vn-u { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* round 2 FE-13: the applied line (after Apply) folds the same way with the dock open: "2 edits", Compare with Base
   as an icon, the step name in the tip only */
.vn-chips.all { flex: 0 0 auto; min-width: auto; overflow: visible; }
.vn-chips.all .vn-dmore { font-size: 0; gap: 4px; padding: 0 8px 0 10px; }
.vn-chips.all .vn-dmore b { font-size: 12px; font-weight: 700; }
.vn-chips.all .vn-dmore::after { content: "edits"; font-size: 12px; font-weight: 500; color: var(--ink2, var(--ink)); }
.vn-chips.all .vn-dmore[data-k="1"]::after { content: "edit"; }
.vn-chips.all .vn-dmore::before { content: ""; order: 2; width: 6px; height: 6px; margin-left: 4px; border: solid currentColor;
  border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.vn-chips.all .vn-dmore[aria-expanded="true"]::before { transform: translateY(2px) rotate(-135deg); }
/* NEO s81 (REQ LIVE to NEO 11, ADDENDUM 1; JUDGE Round 8 cross finding 4): the applied line keeps "Step n: name" at every
   width; the name ends with an ellipsis (the whole name is in the tip and the step list), it is never hidden. The draft
   line keeps its own rule above (its chips, Discard and Apply need the room). "Compare with base" keeps its words down to
   a line content of 521 px (1280 with the dock: line 608 px, content 582 px); under that it is the icon with the words as its accessible name. Under
   480 px the step takes a row of its own, so the name has the full width and the buttons share the row under it
   [KB T2 truncation keeps the meaning, T7.4 no cut control] */
@container vnline (max-width: 820px) {
  .vn-line > .vn-step { min-width: 0; }
  .vn-line:not([data-status="preview"]) .vn-step .vn-lbl { min-width: 4ch; }
}
@container vnline (max-width: 520px) {
  .vn-btn[data-a="compare"] { padding: 0 8px; min-width: 32px; justify-content: center; }
  .vn-btn[data-a="compare"] > span { display: none; }
}
@container vnline (max-width: 480px) {
  .vn-line:not([data-status="preview"]) > .vn-step { order: -1; flex: 1 1 100%; max-width: 100%; }
  .vn-line:not([data-status="preview"]) .vn-step .vn-lbl { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
  .vn-line:not([data-status="preview"]) .vn-step .vn-chev { margin-left: auto; }
}
@container vnline (max-width: 680px) {
  .vn-line .vn-ib[data-a="redo"][aria-disabled="true"] { display: none; }
}

/* ---------- round 2 FE-16: (b) Compare, plans of both versions (two 3 by 12 matrices) ----------
   [KB T6 direct labels: key row at the top, nothing below the chart; 4/8 px grid; text 11 px and up] */
.vn-bmx-k { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 16px; font-size: 12px; color: var(--muted); }
.vn-bmx-k span { display: inline-flex; align-items: center; gap: 8px; }
.vn-bmx-k .vn-bmx-c { width: 20px; height: 12px; flex: none; }
/* NEO s80 (JUDGE Round 8 VN-05 390, side scroll 43 px): a 400 px track minimum on a 390 px page; cap it at the box */
.vn-bmxs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 24px 32px; }
/* NEO s80: the "vB differs from vA by ..." head is one inline run inside the flex h2 (chips wrap with the words) */
.vn-ht { display: inline; min-width: 0; }
.vn-ht .vn-tag { vertical-align: baseline; }
/* NEO s80 (JUDGE Round 8 cross finding 3): each value line of Liftings moved names its kind before the number */
.vn-ln { white-space: nowrap; }
.vn-ln-k { color: var(--muted); font-size: 12px; font-weight: 400; margin-right: 4px; }
.vn-bmx { min-width: 0; }
.vn-bmx-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 13px; }
.vn-bmx-h b { font-weight: 700; color: var(--ink); }
.vn-bmx-h span { color: var(--muted); font-variant-numeric: tabular-nums; }
.vn-bmx-g { display: grid; grid-template-columns: 64px repeat(12, minmax(0, 1fr)); gap: 4px 2px; align-items: center; }
.vn-bmx-m { font-size: 11px; color: var(--muted); text-align: center; line-height: 16px; }
.vn-bmx-r { font-size: 11px; color: var(--muted); text-align: right; padding-right: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vn-bmx-c { display: block; height: 16px; border-radius: 3px; background: var(--track); box-sizing: border-box; transition: transform var(--t-fast), box-shadow var(--t-fast); }
.vn-bmx-c.blk { background: var(--blk-b); }
.vn-bmx-c.mv { box-shadow: inset 0 0 0 2px var(--ink); }
/* W3 s42 live Plans matrix (server bridge.grid): a cargo cell with no supply colour takes the accent; a locked cell has a
   dashed inner line, also on top of the moved line */
.vn-bmx-c.on:not([style]) { background: var(--acc); }
.vn-bmx-c.lk { outline: 2px dashed var(--ink); outline-offset: -4px; }
.vn-bmx-g .vn-bmx-c:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px var(--acc); }
.vn-bmx-g .vn-bmx-c.mv:hover { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 2px var(--acc); }
@media (prefers-reduced-motion: reduce) { .vn-bmx-c { transition: none; } .vn-bmx-g .vn-bmx-c:hover { transform: none; } }
/* round 2 FE-16: version segment above the (b) log tiles */
.vn-logv { display: flex; justify-content: flex-start; margin: 0 0 16px; }
/* NEO s126 (REQ LIVE to NEO 10:08 CET): the "Step N, applied" chip above the log while a draft is open */
.vn-loghead { display: flex; justify-content: flex-start; margin: 0 0 12px; }
/* round 2 FE-17: timeline drawer (C-ET1). One action column with one width, so every button ends and starts on one
   line [KB T3 alignment]; Current and In force read as quiet outlined states, the row tint already marks the step.
   Step chart: title and question above, direct labels, no legend [KB T5]. Draft note and the draft confirm in the
   footer [C-ET1 nothing lost without a confirm; KB T6 system status]. */
.vn-drawer { width: min(640px, 100vw); }
.vn-tl th.vn-sn, .vn-tl td.vn-sn { width: 40px; }
.vn-tl th.vn-v, .vn-tl td.vn-v { width: 88px; }
.vn-tl th.vn-c, .vn-tl td.vn-c { width: 80px; }
.vn-tl th.vn-go, .vn-tl td.vn-go { width: 180px; text-align: right; }
.vn-tl td.vn-go .vn-btn, .vn-tl td.vn-go .vn-cur { width: 156px; height: 28px; min-height: 28px; justify-content: center; box-sizing: border-box; }
.vn-tl td.vn-go .vn-btn { padding: 0 8px; gap: 8px; font-size: 12.5px; }
.vn-tl .vn-cur { border-radius: 8px; padding: 0 8px; gap: 8px; background: transparent; border: 1px solid var(--acc); color: var(--acc-tx); font-size: 12.5px; }
.vn-tl .vn-cur svg { width: 16px; height: 16px; flex: 0 0 16px; }
.vn-tl .vn-sl small { overflow: hidden; }
.vn-tl .vn-sl small span { flex: 0 0 auto; }
.vn-tl td.vn-sec-td { height: auto; border: 0; padding: 0; }
.vn-sec .vn-sec-n { margin-left: auto; font-weight: 500; color: var(--muted); }
.vn-tl tr.vn-ver-row td.vn-sn { font-weight: 600; color: var(--ink2); }
.vn-tl tr.vn-inforce td { background: transparent; }
.vn-tlc { margin: 8px 12px 8px; padding: 16px 16px 8px; border: 1px solid var(--hair2); border-radius: 12px; background: var(--card); }
.vn-tlc-h { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.vn-tlc-h b { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.vn-tlc-h span { font-size: 12.5px; color: var(--ink2); line-height: 1.4; }
.vn-tlc svg { display: block; overflow: visible; font-variant-numeric: tabular-nums; }
.vn-tlc-tk { font-size: 11px; fill: var(--muted); }
.vn-tlc-v { font-size: 11.5px; font-weight: 600; fill: var(--ink2); }
.vn-tlc-v.cur { fill: var(--ink); font-weight: 700; }
.vn-tlc-br { font-size: 11px; fill: var(--muted); font-weight: 500; }
.vn-tlc-pt { cursor: pointer; }
.vn-tlc-pt.cur { cursor: default; }
.vn-tlc-pt .dot { transition: r .12s ease-out; }
.vn-tlc-pt:not(.cur):hover .dot { r: 5; fill: var(--acc-t); }
.vn-tlc-pt:not(.cur):hover text { fill: var(--ink); }
.vn-tl-draft { display: flex; align-items: center; gap: 8px; margin: 8px 12px 0; padding: 8px 12px; border: 1px dashed var(--acc); border-radius: 8px;
  font-size: 12.5px; line-height: 1.4; color: var(--ink2); background: var(--acc-t); }
.vn-tl-dtag { flex: 0 0 auto; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; border: 1px dashed var(--acc);
  color: var(--acc-tx); font-size: 11.5px; font-weight: 600; }
.vn-df.vn-df-ask { gap: 8px; padding: 12px 24px; background: var(--added); animation: vn-fade .12s ease-out; }
.vn-ask-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.4; color: var(--ink2); }
.vn-ask-t b { font-size: 13px; font-weight: 600; color: var(--ink); }
.vn-btn.vn-danger { background: var(--loss); border-color: var(--loss); color: var(--card); }
.vn-btn.vn-danger:hover:not([aria-disabled="true"]) { filter: brightness(.92); border-color: var(--loss); color: var(--card); }
@media (prefers-reduced-motion: reduce) { .vn-tlc-pt .dot { transition: none; } .vn-df.vn-df-ask { animation: none; } }
/* round 2 FE-17: while the timeline drawer is open, a toast centres in the free page left of it, so it never covers the
   drawer footer or its draft confirm [KB T2 no covered content]. Scoped to the open VN drawer only. */
body:has(> .vn-drawer) .toast, body:has(> .vn-drawer) .vn-toasts { left: calc((100vw - min(640px, 100vw)) / 2); }
@media (max-width: 760px) { body:has(> .vn-drawer) .toast, body:has(> .vn-drawer) .vn-toasts { left: 50%; bottom: 96px; } }
/* round 2 FE-18 (FC request, (e) after an applied cap step at 1280): the step button was the only item that could
   shrink, with flex-shrink .01. When the sum of the shrink factors is under 1, flex removes only that share of the
   overflow, so Compare with Base ran 32 to 64 px past the line and the page scrolled sideways. The step now shrinks
   with factor 1 (its name ends with an ellipsis, the whole name stays in the tip and in the timeline); open chips keep
   a factor of 100, so they still give way first and fold [KB T2 no sideways scroll, truncation keeps the meaning] */
@media (min-width: 900px) {
  .vn-line[data-status="preview"] > .vn-step, .vn-line:not([data-status="preview"]) > .vn-step { flex-shrink: 1; }
  .vn-line[data-status="preview"] > .vn-dchips:not(.all), .vn-line:not([data-status="preview"]) > .vn-chips:not(.all) { flex-shrink: 100; }
}
/* round 2 FE-19: timeline meta line. One line high; a part that does not fit wraps out of view whole, with its dot */
.vn-tl .vn-sl small { flex-wrap: wrap; height: 16px; line-height: 16px; row-gap: 0; overflow: hidden; }
.vn-tl .vn-sl small .vn-m::before { content: "·"; margin-right: 8px; }
/* R2 QA S1 (FINAL-R2 shell row): the Steady plan chip stays in the palette. The blue info pair read as indigo in dark
   and named nothing of ours; the plan modes are accent kinds: Best plan filled, Steady plan outlined, Next best grey
   [KB T5 one colour meaning per role, mockup tokens only] */
.vn-mode[data-mode="steady"] { background: transparent; color: var(--acc-tx, var(--acc-d)); box-shadow: inset 0 0 0 1px var(--acc-l); }
/* R2 QA S1: the newest draft chip may use the free room of the line (at 1280 px it cut "JKM +1.00 in Mar 2027 and
   Apr 2027" at 220 px with about 120 px free before Discard). Older chips keep 220 px; with no room the chip still
   shrinks with an ellipsis and keeps its tip [KB T2 truncation only when the room is gone] */
.vn-dchips > .vn-dchip:last-child, .vn-chips > .vn-chip:last-child { max-width: 380px; }

/* polish R1 QC: logs of Pacific, Iberia, (d1), (d2), (f). A fact after a rule keeps its words together; the chosen
   choice of an edge table is marked in the cell [KB T6 tables: one highlight per row]. */
.vn-rl em { white-space: nowrap; }
.vn-edge td.vn-on { font-weight: 600; color: var(--acc-tx); }
.vn-mt th[scope="row"] { text-align: left; font-weight: 600; white-space: nowrap; padding-right: 16px; }
.vn-mt th[scope="row"] .t-u { display: block; font-weight: 400; }
.vn-mt td.vn-tot, .vn-mt th:last-child { font-weight: 600; border-left: 1px solid var(--hair); }
.vn-edge td.neg { color: var(--loss); }

/* polish R2 QC (FINAL-R2 VN-05 f): the cut axis of the Compare waterfall shows its break on the axis line [KB T6] */
.vn-wfax { stroke: var(--axis); stroke-width: 1.25; fill: none; }
.vn-wfgap { fill: var(--card); stroke: none; }
/* polish R2 QC (FINAL-R2 VN-05 f): the change tile sits on the same left edge and baselines as the two plan tiles
   [KB T3 alignment: one left edge per row of tiles] */
.vn-ct-d { justify-content: flex-start; text-align: left; }
.vn-ct-d .vn-ct-s { justify-content: flex-start; }

/* polish R3 QC (FINAL-R2 R3 VN-05 (c)): Liftings moved of (c) under a narrow card (Neo dock open): the margin is the
   third line of the sold-to cell, its own column hides, the slot company goes under the slot. No sideways scroll.
   [QR no clipped label, no sideways scroll in a card] [KB T3 one column per value] */
.vn-mvc { container-type: inline-size; container-name: vnmv; }
.vn-mv-c .vn-mv-mi { display: none; }
.vn-mv-c td.vn-two > .vn-mv-mi b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
@container vnmv (max-width: 819.98px) {
  .vn-mv-c .vn-mv-m { display: none; }
  .vn-mv-c th.vn-mv-mi { display: table-cell; }
  .vn-mv-c td.vn-two > .vn-mv-mi { display: block; }
  .vn-mv-c th > .vn-mv-mi { display: block; }
  .vn-mv-c td:first-child .vn-quiet { display: block; }
}
@container vnmv (max-width: 639.98px) {
  .vn-mv-c th, .vn-mv-c td { padding-left: 6px; padding-right: 6px; }
  .vn-mv-c th:first-child, .vn-mv-c td:first-child { padding-left: 0; }
}

/* NEO s10 (VN-06 live, TEXT and TRUTH part 2): the stored log lines as a table; a long line wraps in its cell, the
   time stays on one line (td.num), an error level takes the negative tone */
.vn-logt td:last-child { overflow-wrap: anywhere; }
.vn-logt td.neg { font-weight: 600; }
.vn-logerr { margin-bottom: 12px; } table.t.vn-logerr th { width: 1%; color: var(--loss); vertical-align: top; padding-top: 8px; } .vn-logerr td { overflow-wrap: anywhere; }
.vn-logt td.vn-lt { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* NEO W3 s33 (FINDING-NEO-11): chart cards of a live Neo answer (views/vn/neo.js chartHtml); the svg takes the box width */
.vn-neo-chart { margin: 8px 0 0; padding: 8px 12px 10px; border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--card); min-width: 0; }
.vn-neo-chart figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: var(--fs-label); color: var(--ink); }
.vn-neo-chart figcaption .u { color: var(--muted); font-size: var(--fs-small); }
.vn-neo-chart .vn-neo-facts { margin-top: 6px; }
.vn-neo-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 2px; font-size: var(--fs-small); color: var(--ink2); }
.vn-neo-leg span { display: inline-flex; align-items: center; gap: 4px; }
.vn-neo-leg .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.vn-neo-chart-svg { display: block; height: auto; max-width: 100%; overflow: visible; margin-top: 4px; }
.vn-neo-chart-svg text { font-size: 10px; fill: var(--muted); }
.vn-neo-chart-svg text.lbl { fill: var(--ink2); }
.vn-neo-chart-svg .grid { stroke: var(--hair2); stroke-width: 1; }
.vn-neo-chart-svg .zero { stroke: var(--ctl); stroke-width: 1; }
.vn-neo-chart-svg .bench { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 4 3; }
.vn-neo-chart-svg .bar:hover, .vn-neo-chart-svg .dot:hover { opacity: .8; }
.vn-neo-chart-svg .s0, .vn-neo-leg .sw.s0 { fill: var(--acc); background: var(--acc); }
.vn-neo-chart-svg .s1, .vn-neo-leg .sw.s1 { fill: var(--acc-l); background: var(--acc-l); }
.vn-neo-chart-svg .s2, .vn-neo-leg .sw.s2 { fill: var(--info); background: var(--info); }
.vn-neo-chart-svg .s3, .vn-neo-leg .sw.s3 { fill: var(--warn); background: var(--warn); }
.vn-neo-chart-svg .s4, .vn-neo-leg .sw.s4 { fill: var(--muted); background: var(--muted); }
.vn-neo-leg .sw.bench { background: var(--warn); height: 2px; }
.vn-neo-chart-svg .neg { fill: var(--loss); }
.vn-neo-chart-svg .total { fill: var(--acc-d); }
.vn-neo-chart-svg .ln { fill: none; stroke-width: 2; }
.vn-neo-chart-svg .ln.s0 { stroke: var(--acc); } .vn-neo-chart-svg .ln.s1 { stroke: var(--acc-l); } .vn-neo-chart-svg .ln.s2 { stroke: var(--info); } .vn-neo-chart-svg .ln.s3 { stroke: var(--warn); } .vn-neo-chart-svg .ln.s4 { stroke: var(--muted); }
.vn-neo-chart-svg .band { fill: var(--acc-t); }
.vn-neo-chart-svg .whisk, .vn-neo-chart-svg .join { stroke: var(--ink2); stroke-width: 1.5; }
.vn-neo-chart-svg .target { stroke: var(--ink); stroke-width: 2; }

/* NEO W3 s61 (JUDGE Look round 1 VN-04, cross screen item 1: at 390 px and at 1280 px with the Neo dock open the
   versions table was cut at the right with no cue). Under 720 px of table box (.tscroll is the container) each version
   is one block: version and name on the first line, then each value with its column word above it (data-l, the head
   words of views/vn/versions.js), two values a line, the buttons last. The head stays for a screen reader. The DOCK-RULE
   key column (ui.css) does not apply: nothing scrolls in this form. [KB T6 narrow table form, label above value] */
@container (max-width: 719.98px) {
  .vn-ver thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  table.t.vn-ver, .vn-ver tbody { display: block; width: 100%; min-width: 0; }
  .vn-ver tbody tr.click { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; padding: 12px 8px; border-bottom: 1px solid var(--hair); }
  .vn-ver tbody tr.click:hover { background: var(--surface-2); }
  .vn-ver tbody tr.sel { background: var(--acc-t); }
  .xm-view .tscroll > table.t.vn-ver tbody tr td, .vn-ver tbody tr td { display: block; position: static; min-width: 0; max-width: none; padding: 0; border: 0; text-align: left; white-space: normal; background: transparent; }
  /* NEO s71 (vn-narrow-geo case 25 red at 330 px: "Block May 3" in 3 lines; box probe neo-s71-probe): the table rule
     width 1% of the picks made each pick cell 3 px wide (its button ran over the next cell), and the name cell (basis 0)
     shared the first line with Asked by, so it got 35 px. In this form the picks take their button width and the name
     takes at least half of the line, so Asked by starts the second line. */
  .vn-ver td.vn-c-a, .vn-ver td.vn-c-b { flex: 0 0 auto; }
  .vn-ver tbody td.vn-c-a, .vn-ver tbody td.vn-c-b { width: auto; }
  .vn-ver td.vn-c-v { flex: 0 0 auto; }
  .vn-ver td.vn-c-name { flex: 1 1 50%; }
  .vn-ver td.vn-c-ask, .vn-ver td.vn-c-state, .vn-ver td.vn-c-val, .vn-ver td.vn-c-gain, .vn-ver td.vn-c-rules, .vn-ver td.vn-c-saved { flex: 1 1 calc(50% - 16px); }
  .vn-ver td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 2px; font-size: var(--fs-label); line-height: 16px; font-weight: 400; color: var(--muted); }
  .vn-ver td.vn-acts { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: auto; }
  .vn-ver tbody tr.vn-depth { display: block; padding: 0 8px 12px; border-bottom: 1px solid var(--hair); background: var(--acc-t); }
  .vn-ver tbody tr.vn-depth td:first-child { display: none; }
}

/* NEO W3 s61 (JUDGE Look round 1 VN-06: at 390 px the log line broke one word per line beside the time and the level).
   Under 600 px of table box each log row is one block: time and level on one line, the line under them at full width.
   The head stays for a screen reader; the time keeps its UTC word, which the hidden head carried. */
@container (max-width: 599.98px) {
  .vn-logt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  table.t.vn-logt, .vn-logt tbody { display: block; width: 100%; min-width: 0; }
  .vn-logt tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
  .xm-view .tscroll > table.t.vn-logt tbody tr td, .vn-logt tbody tr td { display: block; position: static; padding: 0; border: 0; background: transparent; }
  /* NEO s68 (box neo-s68-proto 15:32Z, vn-narrow-geo red at 330 px: logt cut 258 px): the phone rule of ui.css (LOOK R1 cross
     item 1, max-width 760px: table.t td nowrap) kept the log line on one line; in the block form the line wraps, the
     time stays on one line */
  .xm-view .tscroll > table.t.vn-logt tbody tr td { white-space: normal; }
  .xm-view .tscroll > table.t.vn-logt tbody tr td.vn-lt { white-space: nowrap; }
  .vn-logt td.vn-lt::after { content: " UTC"; color: var(--muted); }
  .vn-logt td:last-child { grid-column: 1 / -1; }
}

/* ---------- JUDGE FIX round 1: VN-05 live card 'diff', change by loading month (server bridge.months) ----------
   [KB T6: direct labels on each column, zero line in the middle, 4/8 px grid, text 11 px and up] */
.vn-mcols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(56px, 1fr); gap: 4px; min-width: 0; }
.vn-mc { display: grid; grid-template-rows: 16px 96px 16px; gap: 4px; justify-items: center; min-width: 0; }
.vn-mc-v { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.vn-mc-v.pos { color: var(--acc-tx); }
.vn-mc-v.neg { color: var(--loss); }
.vn-mc-b { position: relative; width: 100%; height: 96px; }
.vn-mc-b::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--hair); }
.vn-mc-b i { position: absolute; left: 25%; right: 25%; bottom: 50%; border-radius: 3px 3px 0 0; background: var(--track); }
.vn-mc-b i.pos { background: var(--g); }
.vn-mc-b i.neg { background: var(--loss); }
.vn-mc-b i.dn { top: 50%; bottom: auto; border-radius: 0 0 3px 3px; }
.vn-mc-m { font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* NEO s88 (JUDGE Round 12 cross finding 5): an empty month slot keeps its place on the time axis, quieter; a month with
   no change keeps only its axis line */
.vn-mc.empty .vn-mc-m { opacity: .6; }
.vn-mc.empty .vn-mc-b::before { border-top-style: dashed; }
.vn-mc-u { margin: 8px 0 0; font-size: 13px; color: var(--ink); }
.vn-mc-u b { font-variant-numeric: tabular-nums; }
.vn-mc-u b.pos { color: var(--acc-tx); }
.vn-mc-u b.neg { color: var(--loss); }

/* NEO s68 (COORDINATOR item 64 (4), D-UT31; prototype proto/app/ui/r6/in.css vpick and vgbar): the A and B picks of
   Compare, the signed gain bar (at most 60 px, plus in the accent, minus in the loss colour) and the closed More section
   with the tiles and the node card below the Versions card. */
.vn-ver td.vn-c-a, .vn-ver td.vn-c-b { width: 1%; padding-right: 4px; }
/* NEO s137 (JUDGE Round 34 VN-04 "plain letters where the prototype draws filled A and B tick boxes"): the prototype vpick
   ported (proto/app/ui/r6/in.css 202 to 206) on the pick button */
.vn-ver .vn-pick { position: relative; display: inline-flex; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; }
.vn-ver .vn-pick span { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 6px; border: 1px solid var(--ctl); border-radius: 6px; font: 600 12px/1 Inter, sans-serif; color: var(--ink2); background: var(--card); }
.vn-ver .vn-pick[aria-pressed="true"] span { background: var(--acc); border-color: var(--acc); color: var(--card); }
.vn-ver .vn-pick:focus-visible { outline: none; }
.vn-ver .vn-pick:focus-visible span { outline: 2px solid var(--acc); outline-offset: 2px; }
/* NEO s70 (vn-narrow-geo case 25: at 1100 px the live table was 194 px wider than its box): the A and B picks sit close
   as one pair, the name note and the saved author may wrap (live cells only: vn-nw, vn-sw), so no cell holds a 280 px
   line that the table cannot shrink */
.vn-ver td.vn-c-b { padding-left: 0; }
.vn-ver td.vn-c-name.vn-nw small { white-space: normal; max-width: 240px; }
.vn-ver td.vn-saved.vn-sw small { white-space: normal; }
.vn-ver .vn-gbar { display: inline-block; height: 8px; margin-right: 8px; vertical-align: middle; border-radius: 2px; }
.vn-ver .vn-gbar.pos { background: var(--acc); }
.vn-ver .vn-gbar.neg { background: var(--loss); }
.vn-more { margin-top: 16px; }
.vn-more > summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 600; color: var(--acc-tx); }
.vn-more[open] > summary { margin-bottom: 12px; }
/* NEO s68: live, the saved time may wrap in the table form, so the prototype columns fit a 1100 px view column */
.vn-ver td.vn-saved.vn-sw { white-space: normal; min-width: 96px; }
/* NEO s94 (COORDINATOR item 70 (a)): live VN-05 status chips in place of reading sentences (axis cut, no grid) */
.vn-wf-ax, .vn-bmx-none { margin: 0 0 8px; }
/* NEO s138 (JUDGE Round 34 For the lanes 3): the What changed card under the VN-04 list, ported from the prototype
   proto/app/ui/r6/in.css 75 to 91, 175, 176, 199, 219 to 225 (.xwf, .wfr, .wft, .vc2, .mx, .mxt, .mxlg, .vc-d) */
.vn-vc2 { display: grid; grid-template-columns: 1fr; gap: 20px; min-width: 0; }
@media (min-width: 901px) { .vn-vc2 { grid-template-columns: minmax(320px, 2fr) 3fr; } }
.vn-xwf { display: grid; grid-template-columns: 1fr; gap: 6px; font-size: 13px; align-content: start; }
.vn-wfr { display: grid; grid-template-columns: 150px 1fr 90px; gap: 10px; align-items: center; }
.vn-wfr > b { text-align: right; font-variant-numeric: tabular-nums; }
.vn-wft { position: relative; height: 16px; }
.vn-wft i { position: absolute; top: 0; height: 16px; border-radius: 2px; }
.vn-wft i.tot { background: var(--muted); opacity: 0.45; }
.vn-wft i.ghost { background: var(--track); outline: 1px dashed var(--muted); opacity: 1; }
.vn-wft i.neg { background: var(--loss); }
.vn-wft i.pos { background: var(--acc); }
.vn-xwf .vn-vcd { display: block; margin: 2px 0 0; white-space: nowrap; font-size: 12px; font-weight: 500; }
.vn-xwf .vn-vcd .vn-vcw { color: var(--muted); font-weight: 400; }
.vn-vcd.pos { color: var(--acc-tx, var(--acc-d)); } .vn-vcd.neg { color: var(--loss); }
.vn-tsx { min-width: 0; }
.vn-mxt td.num, .vn-mxt th.num { text-align: right; font-variant-numeric: tabular-nums; }
.vn-mxt td.pos { color: var(--acc-tx, var(--acc-d)); } .vn-mxt td.neg { color: var(--loss); }
.vn-mxt .vn-mxd { display: block; white-space: nowrap; }
.vn-mxt .vn-mxsrc { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
.vn-mxc { vertical-align: middle; }
.vn-mxs { display: flex; gap: 2px; }
.vn-mx { position: relative; display: inline-block; width: 14px; height: 14px; background: var(--track); border-radius: 1px; flex: none; }
.vn-mx b { position: absolute; top: 0; bottom: 0; min-width: 2px; }
.vn-mx b.old { outline: 1px dashed var(--muted); outline-offset: -1px; background: var(--card, transparent); }
.vn-mx b.new { background: var(--acc); }
.vn-mxlg { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-weight: 400; color: var(--muted); font-size: 11.5px; }
.vn-mxlg .vn-mx { width: 12px; height: 10px; }

/* NEO s149 (JUDGE Round 34 to 40 VN-04 "Restore version and Delete" as proto/app/ui/r6/in.js 412; vn-narrow-geo 1100 px:
   with "Restore version" the row was 16 px wider than the view column). Table form only (the narrow form keeps its own
   gaps): the row buttons sit 2 px apart, the bordered button keeps 8 px at each side, the ghost Delete 6 px (no border) */
@container (min-width: 720px) {
  .vn-ver td.vn-acts { padding-left: 4px; }
  .vn-ver td.vn-acts .btn + .btn { margin-left: 2px; }
  .vn-ver td.vn-acts .btn.sm:not(.icon) { padding-left: 8px; padding-right: 8px; }
  .vn-ver td.vn-acts .btn.ghost.sm:not(.icon) { padding-left: 6px; padding-right: 6px; }
}

/* NEO s158 (SH-18 Neo page, views/vn/neo-page.js): the 4875 Neo page (proto/app/ui/r6/pg.css 227 to 264), the chat
   card on the left and Documents and charts beside it; the dock chat draws in the page card at full height */
.pgneo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
/* PORT73D NEO2 (COORDINATOR item 73, Seite an Seite mit 4875): die beiden Karten haben die 4875-Polsterung von .pgcard
   (pg.css 43, 44, 228, 232: Karte 16 0 6, Kopf, Chat und Liste je 18 seitlich) statt 24 rundum; der Abstand 16 ueber einer
   zweiten SH-Karte (sh.css .card.sh-pgc + .card.sh-pgc) gilt fuer gestapelte Karten, nicht fuer die zwei Spalten hier
   (in 4875 stehen beide Karten oben buendig) */
.pgneo > .card.sh-pgc { padding: 16px 0 6px; }
.pgneo > .card.sh-pgc > .ch { padding: 0 18px; }
.pgneo > .card.sh-pgc + .card.sh-pgc { margin-top: 0; }
.pgneo-chat { padding: 10px 18px 12px; }
.pgneo-chat > .vn-neo { position: static; width: auto; max-width: none; height: auto; min-height: 60vh; box-shadow: none; border: 0; display: flex; flex-direction: column; }
.pgneo-chat > .vn-neo .vn-neo-msgs { flex: 1; min-height: 46vh; max-height: none; }
.pgneo-chat [data-neo="close"] { display: none; }
.pgneo-l { list-style: none; margin: 8px 0 0; padding: 0 18px 10px; display: grid; gap: 8px; font-size: 13px; }
.pgneo-l li { border: 1px solid var(--hair); border-radius: 8px; padding: 8px 10px; display: grid; gap: 2px; cursor: pointer; }
.pgneo-l li:hover { background: var(--added); }
.pgneo-l li .k { font-size: 11.5px; color: var(--muted); }
.pgneo-l li .q { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgneo-l li a { font-size: 12.5px; color: var(--acc-d); }
.pgneo-l li.empty { cursor: default; color: var(--muted); border-style: dashed; }
.pgneo-l li.empty:hover { background: transparent; }
.pgneo-hit { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 6px; transition: outline-color .6s; }
@media (max-width: 900px) { .pgneo { grid-template-columns: 1fr; } }
/* PORT73D NEO2 (COORDINATOR item 73, COORD-Zeile SH-18): der 4875-Chip des Seitenkopfs (proto/app/ui/r6/pg.css 95 und 96
   .pgstep, ui/style.css 94 bis 97 .dot und pulse) statt der Auswahl "Pick a scenario" (.pgneo-sc ist weg): Punkt und Text
   als zwei Teile wie in 4875 (der Text mit den Quellmarken ist ein Teil, pgstep-t), der Punkt nur in diesem Chip */
.pgstep { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; color: var(--ink2); text-decoration: none; background: var(--card); border: 1px solid var(--hair); border-radius: 999px; padding: 4px 11px; }
.pgstep:hover { border-color: var(--acc-l); color: var(--acc-d); }
.pgstep .dot { width: 8px; height: 8px; border-radius: 4px; display: inline-block; background: var(--acc); margin-right: 5px; vertical-align: 1px; flex: none; }
.pgstep .dot.run { background: var(--ns-t); animation: pgneo-pulse 1s infinite; }
.pgstep .dot.fail { background: var(--loss); }
@keyframes pgneo-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .pgstep .dot.run { animation: none; } }
/* PORT73D VN2 (COORDINATOR item 73 run D, COORD rows VN-a to VN-f and MV-a to MV-f): live only, every rule below is
   scoped to a class the live page alone draws (vn-filt-p, vn-mv-p, vn-xmore, td.vn-acts of the live row), so the mock
   page keeps its look. (1) The filter chips of Liftings moved in the 4875 mchip form (proto/app/ui/style.css 163 and
   164, .chips gap 6px, margin-bottom 10px): "All 105" in one line, 12px, radius 12px; a 0 chip is a chip like the
   others. (2) The closed More form at the foot of a card (D-UT84, as one-in.css details[data-more]). (3) Restore version
   and Delete as the 4875 row draws them (style.css 78 and 82 .btn and .btn.sm, r6/in.css 86 .btn.ghost with its border,
   td.vdel padding-left 18px). */
.vn-filt.vn-filt-p { gap: 6px; margin-bottom: 10px; }
.vn-filt-p .vn-fc { gap: 0; height: auto; padding: 1px 8px; border: 1px solid var(--ctl); border-radius: 12px; background: var(--card); color: var(--ink); font: 400 12px/1.5 Inter, system-ui, sans-serif; }
.vn-filt-p .vn-fc b { font-weight: inherit; color: inherit; }
.vn-filt-p .vn-fc.on { background: var(--acc-t); border-color: var(--acc); color: var(--acc-tx); font-weight: 600; }
.vn-filt-p .vn-fc.on b { color: inherit; }
details.vn-xmore { margin-top: 12px; }
details.vn-xmore > summary { display: inline-flex; align-items: center; cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--ink2); padding: 6px 0; }
details.vn-xmore > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
details.vn-xmore[open] > summary { margin-bottom: 8px; }
.vn-xmore-b { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.vn-xmore-t { display: grid; gap: 12px; }
.vn-xmore-h { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.vn-ver td.vn-acts .btn.sm[data-act="vn-restore"], .vn-ver td.vn-acts .btn.sm[data-act="vn-del"] { min-height: 0; padding: 3px 8px; border: 1px solid var(--ctl); border-radius: 7px; font-size: 12.5px; font-weight: 550; line-height: 1.4; }
.vn-ver td.vn-acts .btn.sm.ghost[data-act="vn-del"] { background: transparent; border-color: var(--ctl); margin-left: 18px; }
.vn-ver td.vn-acts .btn.sm[data-act="vn-restore"]:hover:not(:disabled), .vn-ver td.vn-acts .btn.sm[data-act="vn-del"]:hover:not(:disabled) { border-color: var(--acc); }