/* ===========================================================================
   VITA — VAT workspace design system
   ---------------------------------------------------------------------------
   Every rule in this file is scoped under `.vx`, which is set on the VAT
   module's root element and nowhere else. The advisor, the legal knowledge
   centre, the case analyser, clients, firm and audit keep the styles they had:
   nothing here can reach them, and nothing here overrides a global selector.

   Colour never carries a meaning on its own. Every state that matters is a
   word and a mark as well as a colour, because a colleague who does not see
   the difference between amber and green still has to prepare the return.
   =========================================================================== */

.vx{
  /* --- surfaces: warm off-white page, white work surfaces ---------------- */
  --vx-bg:#F6F5F1;
  --vx-bg-2:#EFEDE6;
  --vx-surface:#FFFFFF;
  --vx-surface-2:#FBFAF7;
  --vx-surface-3:#F4F2EC;

  /* --- type: dark slate ------------------------------------------------- */
  --vx-ink:#1B2531;
  --vx-ink-2:#39444F;
  --vx-mute:#5C6B7A;
  /* Secondary text, not decoration: dark enough for 4.5:1 on every surface it is used
     on (white 5.2, the warm page 4.8, the tinted surfaces 4.7). */
  --vx-faint:#5F6E7C;

  /* --- lines and shadow: subtle, warm ----------------------------------- */
  --vx-line:#E3E0D8;
  --vx-line-2:#EEECE5;
  --vx-line-3:#D3CEC2;
  --vx-sh-1:0 1px 2px rgba(27,37,49,.05);
  --vx-sh-2:0 1px 2px rgba(27,37,49,.05),0 6px 18px -10px rgba(27,37,49,.18);
  --vx-sh-3:0 18px 48px -22px rgba(27,37,49,.42);

  /* --- brand: deep jade ------------------------------------------------- */
  --vx-jade:#0B5442;
  --vx-jade-2:#0E6B54;
  --vx-jade-d:#083B2E;
  --vx-jade-wash:#E8F1ED;
  --vx-jade-line:#BFD8CE;

  /* --- status: gold for attention, red for blockers, blue neutral,
         green only for what genuinely passed ----------------------------- */
  --vx-gold:#8A6114;         /* text weight */
  --vx-gold-mark:#B5840F;    /* icon / rule weight */
  --vx-gold-wash:#FBF3E1;
  --vx-gold-line:#EBD9AC;

  --vx-red:#A3231E;
  --vx-red-wash:#FBEBEA;
  --vx-red-line:#EFC8C6;

  --vx-blue:#2C5F9E;
  --vx-blue-wash:#ECF2FA;
  --vx-blue-line:#C9DAEE;

  --vx-green:#1B6B4A;
  --vx-green-wash:#E7F2EC;
  --vx-green-line:#BEDAC9;

  --vx-slate-wash:#EEF0F2;
  --vx-slate-line:#D9DEE3;

  /* --- shape and rhythm ------------------------------------------------- */
  --vx-r:14px; --vx-r-s:12px; --vx-r-xs:8px; --vx-pill:999px;
  --vx-rail:232px; --vx-rail-min:60px;
  --vx-gap:16px; --vx-gap-s:10px; --vx-gap-l:22px;

  /* --- motion: present, never theatrical -------------------------------- */
  --vx-t:170ms cubic-bezier(.22,.61,.36,1);
  --vx-t-fast:120ms cubic-bezier(.22,.61,.36,1);

  /* --- type faces ------------------------------------------------------- */
  --vx-sans:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --vx-display:'Iowan Old Style','Palatino Linotype','Source Serif Pro','Noto Serif',Georgia,serif;
  --vx-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  color:var(--vx-ink);
  font-family:var(--vx-sans);
  font-size:13.5px;
  line-height:1.55;
}
/* Arabic reads better without the serif display face. */
html[dir=rtl] .vx{ --vx-display:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif; }

@media (prefers-reduced-motion:reduce){
  .vx *,.vx *::before,.vx *::after{ transition-duration:1ms !important; animation-duration:1ms !important; }
}

.vx *{box-sizing:border-box}
.vx :focus-visible{outline:2px solid var(--vx-jade);outline-offset:2px;border-radius:4px}
.vx ::selection{background:var(--vx-jade-wash)}

/* ----------------------------------------------------------- primitives */

.vx-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;direction:ltr;
  unicode-bidi:isolate;text-align:end;white-space:nowrap}
.vx-mono{font-family:var(--vx-mono);font-size:11.5px;letter-spacing:-.01em}
.vx-nw{white-space:nowrap}
.vx-sp{flex:1 1 auto;min-width:0}
.vx-mute{color:var(--vx-mute)}
.vx-faint{color:var(--vx-faint)}
.vx-small{font-size:12px}
.vx-row{display:flex;align-items:center;gap:var(--vx-gap-s);flex-wrap:wrap}
.vx-row.vx-tight{gap:6px}
.vx-col{display:flex;flex-direction:column;gap:var(--vx-gap-s);min-width:0}
.vx-hide{display:none !important}
.vx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.vx-h1{font-family:var(--vx-display);font-size:26px;line-height:1.14;letter-spacing:-.015em;
  font-weight:600;margin:0;color:var(--vx-ink)}
.vx-h2{font-family:var(--vx-display);font-size:17px;line-height:1.25;letter-spacing:-.008em;
  font-weight:600;margin:0}
.vx-h3{font-size:14px;font-weight:600;margin:0;letter-spacing:-.003em}
.vx-eyebrow{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--vx-mute);
  font-weight:600}
.vx-lede{color:var(--vx-mute);font-size:13px;margin:5px 0 0;max-width:72ch}

/* ------------------------------------------------------------- buttons */

.vx-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--vx-line-3);background:var(--vx-surface);color:var(--vx-ink);
  border-radius:var(--vx-r-xs);padding:8px 14px;font:inherit;font-weight:500;cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:background var(--vx-t-fast),border-color var(--vx-t-fast),box-shadow var(--vx-t-fast),
             transform var(--vx-t-fast)}
.vx-btn:hover{background:var(--vx-surface-2);border-color:var(--vx-mute)}
.vx-btn:active{transform:translateY(.5px)}
.vx-btn--primary{background:var(--vx-jade);border-color:var(--vx-jade);color:#fff;font-weight:600;
  box-shadow:var(--vx-sh-1)}
.vx-btn--primary:hover{background:var(--vx-jade-2);border-color:var(--vx-jade-2)}
.vx-btn--ghost{background:transparent;border-color:transparent;color:var(--vx-mute)}
.vx-btn--ghost:hover{background:var(--vx-surface-3);border-color:transparent;color:var(--vx-ink)}
.vx-btn--quiet{background:var(--vx-surface);border-color:var(--vx-line)}
.vx-btn--danger{color:var(--vx-red);border-color:var(--vx-red-line);background:var(--vx-red-wash)}
.vx-btn--danger:hover{background:#F7DEDC;border-color:var(--vx-red)}
.vx-btn--sm{padding:5px 10px;font-size:12.5px;border-radius:var(--vx-r-xs)}
.vx-btn--lg{padding:11px 20px;font-size:14.5px}
.vx-btn[disabled],.vx-btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}
.vx-btn .vx-ic{flex:0 0 auto;line-height:1}

.vx-link{background:none;border:0;padding:0;font:inherit;color:var(--vx-blue);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;text-align:start}
.vx-link:hover{color:#21497B}

/* -------------------------------------------------------------- status */
/* A pill is never only a colour: it carries a mark and a word. */

.vx-pill{display:inline-flex;align-items:center;gap:5px;border-radius:var(--vx-pill);
  padding:2px 10px;font-size:11.5px;font-weight:600;border:1px solid transparent;
  white-space:nowrap;line-height:1.5}
.vx-pill .vx-ic{font-size:11px;line-height:1}
.vx-pill--complete{color:var(--vx-green);background:var(--vx-green-wash);border-color:var(--vx-green-line)}
.vx-pill--ready{color:var(--vx-jade);background:var(--vx-jade-wash);border-color:var(--vx-jade-line)}
.vx-pill--progress{color:var(--vx-blue);background:var(--vx-blue-wash);border-color:var(--vx-blue-line)}
.vx-pill--attention{color:var(--vx-gold);background:var(--vx-gold-wash);border-color:var(--vx-gold-line)}
.vx-pill--blocked{color:var(--vx-red);background:var(--vx-red-wash);border-color:var(--vx-red-line)}
.vx-pill--locked{color:var(--vx-mute);background:var(--vx-slate-wash);border-color:var(--vx-slate-line)}
.vx-pill--neutral{color:var(--vx-ink-2);background:var(--vx-surface-3);border-color:var(--vx-line)}

/* --------------------------------------------------- environment strip */

.vx-env{display:flex;align-items:center;gap:10px;padding:6px 16px;font-size:12.5px;font-weight:600;
  border-bottom:1px solid var(--vx-gold-line);background:var(--vx-gold-wash);color:var(--vx-gold);
  border-radius:var(--vx-r-s) var(--vx-r-s) 0 0}
.vx-env--test{background:var(--vx-gold-wash);border-color:var(--vx-gold-line);color:var(--vx-gold)}
.vx-env .vx-link{color:inherit;font-weight:600}
.vx-env-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.vx-env-detail{padding:12px 16px;border-bottom:1px solid var(--vx-gold-line);
  background:#FDF9EF;color:var(--vx-ink);font-size:13px;font-weight:400}
.vx-env-detail p{margin:0 0 6px}
.vx-env-detail p:last-child{margin-bottom:0}

/* -------------------------------------------------------- workspace shell */

.vx-shell{background:var(--vx-bg);border:1px solid var(--vx-line);border-radius:var(--vx-r);
  box-shadow:var(--vx-sh-2);overflow:hidden}

.vx-head{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--vx-surface);
  border-bottom:1px solid var(--vx-line);flex-wrap:wrap}
.vx-head-brand{font-family:var(--vx-display);font-size:17px;font-weight:600;letter-spacing:.01em;
  color:var(--vx-jade);margin-inline-end:2px}
.vx-head-sub{font-size:12px;color:var(--vx-mute);margin-inline-end:6px}
.vx-chipbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--vx-line);
  background:var(--vx-surface);border-radius:var(--vx-r-xs);padding:5px 11px;font:inherit;
  font-size:12.5px;cursor:pointer;color:var(--vx-ink);max-width:260px;
  transition:border-color var(--vx-t-fast),background var(--vx-t-fast)}
.vx-chipbtn:hover{border-color:var(--vx-jade);background:var(--vx-jade-wash)}
.vx-chipbtn b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-chipbtn .vx-ic{color:var(--vx-mute);flex:0 0 auto}
.vx-chipbtn[disabled]{cursor:default;opacity:1}
.vx-chipbtn[disabled]:hover{border-color:var(--vx-line);background:var(--vx-surface)}
.vx-head-vrn{font-family:var(--vx-mono);font-size:11.5px;color:var(--vx-mute);
  border:1px solid var(--vx-line);border-radius:var(--vx-r-xs);padding:5px 9px;background:var(--vx-surface-2)}
.vx-who{display:flex;align-items:center;gap:8px;padding-inline-start:10px;
  border-inline-start:1px solid var(--vx-line)}
.vx-ava{width:28px;height:28px;border-radius:50%;background:var(--vx-jade);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:600;flex:0 0 auto}
.vx-who-t{font-size:11.5px;line-height:1.3}
.vx-who-t b{display:block;font-size:12.5px;font-weight:600}
.vx-who-t span{color:var(--vx-mute)}

/* autosave / save state ------------------------------------------------- */
.vx-save{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--vx-mute);
  padding:4px 9px;border-radius:var(--vx-pill);background:var(--vx-surface-3);
  transition:background var(--vx-t),color var(--vx-t)}
.vx-save--saving{color:var(--vx-blue);background:var(--vx-blue-wash)}
.vx-save--saved{color:var(--vx-green);background:var(--vx-green-wash)}
.vx-save--failed{color:var(--vx-red);background:var(--vx-red-wash);font-weight:600}
.vx-save--recalc{color:var(--vx-jade);background:var(--vx-jade-wash)}

/* ------------------------------------------------------------ body grid */

.vx-body{display:grid;grid-template-columns:var(--vx-rail) minmax(0,1fr);min-height:600px}
.vx-body.vx-body--wide{grid-template-columns:var(--vx-rail-min) minmax(0,1fr)}
@media (max-width:1100px){ .vx-body{grid-template-columns:var(--vx-rail-min) minmax(0,1fr)} }
/* The return page and the upload: one column, no rail — there is no road to walk. */
.vx-body.vx-body--solo{grid-template-columns:minmax(0,1fr)}

/* ------------------------------------------------------------ the return */

.vx-return{max-width:1040px;margin:0 auto}
.vx-rv-hero .vx-panel-b{display:flex;flex-direction:column;gap:2px}
.vx-rv-net{display:flex;flex-direction:column;gap:2px}
.vx-rv-net b{font-family:var(--vx-display);font-size:30px;line-height:1.15;letter-spacing:-.01em}
.vx-return .vx-h3{margin:14px 0 6px}
.vx-rv-item{border-top:1px solid var(--vx-line,#e6e3dc);padding:7px 0}
.vx-rv-item>summary{cursor:pointer;list-style-position:inside}
.vx-rv-item>div{margin:4px 0 0 18px}
.vx-return .vx-nil td{color:var(--vx-mute,#8a8478)}

/* The conversation about the return: a button at the foot, a panel at the side. Full width on
   a phone; on the left in Arabic. */
.vx-chat-fab{position:fixed;right:20px;bottom:84px;z-index:43;display:flex;align-items:center;gap:7px;
  padding:10px 16px;border:0;border-radius:999px;background:var(--vx-jade);color:#fff;font:inherit;
  font-weight:600;box-shadow:var(--vx-sh-2);cursor:pointer}
.vx-chat-fab:focus-visible{outline:3px solid var(--vx-jade-line);outline-offset:2px}
html[dir=rtl] .vx-chat-fab{right:auto;left:20px}
.vx-chat{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);z-index:44;display:flex;flex-direction:column;
  background:var(--vx-surface,#fff);border-left:1px solid var(--vx-line);box-shadow:var(--vx-sh-3)}
html[dir=rtl] .vx-chat{right:auto;left:0;border-left:0;border-right:1px solid var(--vx-line)}
.vx-chat-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--vx-line)}
.vx-chat-b{flex:1 1 auto;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.vx-chat-m{max-width:94%;padding:9px 11px;border-radius:var(--vx-r-s);line-height:1.5;overflow-wrap:anywhere}
.vx-chat-m--me{align-self:flex-end;background:var(--vx-jade-wash);border:1px solid var(--vx-jade-line)}
.vx-chat-m--ai{align-self:flex-start;background:var(--vx-bg-2);border:1px solid var(--vx-line)}
.vx-chat-t{margin-top:3px}
.vx-chat-acts{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.vx-chat-act{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.vx-chat-starters{display:flex;flex-wrap:wrap;gap:6px}
.vx-chat-f{display:flex;gap:8px;align-items:flex-end;padding:10px 14px;border-top:1px solid var(--vx-line)}
.vx-chat-f textarea{flex:1 1 auto;min-height:44px;max-height:180px;resize:vertical;font:inherit;padding:8px;
  border:1px solid var(--vx-line-2);border-radius:var(--vx-r-s)}

/* The working's three sections: a stated item beside the button that changes it, and the
   assistant's proposals each with Accept beside them. Wraps on a phone rather than scrolling. */
.vx-w-row{display:flex;align-items:flex-start;gap:10px;border-top:1px solid var(--vx-line,#e6e3dc)}
.vx-w-row .vx-rv-item{border:0;border-radius:0;background:none;margin:0;flex:1 1 auto;min-width:0}
.vx-w-row>.vx-btn{margin-top:4px;flex:0 0 auto}
.vx-w-props .vx-h2{display:flex;align-items:center;gap:6px}
.vx-w-list li.vx-w-prop{flex-wrap:wrap}
.vx-w-list li.vx-w-prop>.vx-sp{flex:1 1 280px;min-width:0}
.vx-w-list li.vx-w-prop b{display:inline;font-weight:600}
.vx-w-list li.vx-w-prop>.vx-sp>b:first-child{display:block}
details[data-keep="grp-stated"] .vx-h3,details[data-keep="grp-settled"] .vx-h3{margin:14px 0 6px}

/* -------------------------------------------------------------- the rail */

.vx-railnav{background:var(--vx-jade-d);color:#D6E4DE;padding:14px 10px 20px;
  display:flex;flex-direction:column;gap:2px;transition:padding var(--vx-t)}
.vx-railnav .vx-eyebrow{color:#8CAFA3;padding-inline:9px;margin:10px 0 4px}
.vx-navitem{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;
  color:#CBDDD6;text-align:start;padding:8px 9px;border-radius:var(--vx-r-xs);cursor:pointer;
  font:inherit;font-size:13px;position:relative;
  transition:background var(--vx-t-fast),color var(--vx-t-fast)}
.vx-navitem:hover{background:rgba(255,255,255,.08);color:#fff}
.vx-navitem[aria-current=page]{background:var(--vx-jade-2);color:#fff;font-weight:600}
.vx-navitem[aria-current=page]::before{content:"";position:absolute;inset-inline-start:0;
  inset-block:6px;width:3px;border-radius:2px;background:#E8C87A}
.vx-navitem .vx-ic{width:18px;text-align:center;flex:0 0 auto;opacity:.9}
.vx-navitem .vx-count{margin-inline-start:auto;background:var(--vx-gold-mark);color:#231802;
  border-radius:var(--vx-pill);font-size:10.5px;font-weight:700;padding:0 7px;min-width:20px;
  text-align:center}
.vx-navitem .vx-count--stop{background:var(--vx-red);color:#fff}
.vx-navitem[disabled]{opacity:.4;cursor:not-allowed}
.vx-railfoot{margin-top:auto;padding:14px 9px 0;font-size:11.5px;color:#7FA598;line-height:1.5;
  border-top:1px solid rgba(255,255,255,.1)}
.vx-railtoggle{margin-top:10px;color:#9FBDB2;border:0;background:none;cursor:pointer;font:inherit;
  font-size:12px;padding:6px 9px;border-radius:var(--vx-r-xs);text-align:start;display:flex;
  align-items:center;gap:9px}
.vx-railtoggle:hover{background:rgba(255,255,255,.08);color:#fff}
/* collapsed rail: marks only, names read by assistive technology */
.vx-body--wide .vx-navitem span.vx-navtext,
.vx-body--wide .vx-railnav .vx-eyebrow,
.vx-body--wide .vx-railfoot,
.vx-body--wide .vx-railtoggle span{display:none}
.vx-body--wide .vx-navitem{justify-content:center;padding-inline:0}
.vx-body--wide .vx-navitem .vx-count{position:absolute;inset-block-start:2px;inset-inline-end:4px;
  margin:0;min-width:16px;font-size:9.5px;padding:0 4px}
.vx-body--wide .vx-railtoggle{justify-content:center}
@media (max-width:1100px){
  .vx-railnav .vx-navtext,.vx-railnav .vx-eyebrow,.vx-railfoot,.vx-railtoggle span{display:none}
  .vx-navitem{justify-content:center;padding-inline:0}
}

/* -------------------------------------------------------------- the main */

.vx-main{min-width:0;display:flex;flex-direction:column;background:var(--vx-bg)}
.vx-scroll{padding:20px 22px 22px;min-width:0;flex:1 1 auto}
@media (max-width:1320px){ .vx-scroll{padding:16px} }

.vx-pagehead{display:flex;align-items:flex-start;gap:var(--vx-gap);margin-bottom:16px;flex-wrap:wrap}
.vx-pagehead .vx-sp{flex:1 1 320px}
.vx-pagehead-act{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px}

/* ------------------------------------------------------------- journey */

.vx-journey{display:flex;align-items:stretch;gap:0;margin:0 0 18px;padding:0;list-style:none}
.vx-jstep{display:flex;align-items:center;gap:0;flex:1 1 0;min-width:0}
/* The button holds the whole step, so the background that marks the current one covers all
   of it. Before this the pill was drawn at the dot's width and the words spilled outside it. */
.vx-jbtn{display:flex;align-items:center;gap:9px;border:0;background:none;padding:6px 10px;
  cursor:pointer;font:inherit;border-radius:var(--vx-r-s);flex:1 1 auto;min-width:0;
  color:var(--vx-ink-2);text-align:start;
  transition:background var(--vx-t-fast),color var(--vx-t-fast)}
.vx-jbtn>span{min-width:0;overflow:hidden}
.vx-jbtn:hover{background:var(--vx-surface)}
.vx-jbtn[disabled]{cursor:not-allowed;opacity:.55}
.vx-jbtn[disabled]:hover{background:none}
.vx-jdot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  font-size:12px;font-weight:700;border:1.5px solid var(--vx-line-3);background:var(--vx-surface);
  color:var(--vx-mute);transition:background var(--vx-t),border-color var(--vx-t),color var(--vx-t)}
.vx-jname{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx-jline{flex:0 0 16px;height:1.5px;background:var(--vx-line-3);border-radius:1px}
.vx-jstep:last-child .vx-jline{display:none}

.vx-jstep--complete .vx-jdot{background:var(--vx-jade);border-color:var(--vx-jade);color:#fff}
.vx-jstep--complete .vx-jline{background:var(--vx-jade-line)}
.vx-jstep--ready .vx-jdot{background:var(--vx-jade-wash);border-color:var(--vx-jade);color:var(--vx-jade)}
.vx-jstep--progress .vx-jdot{background:var(--vx-jade);border-color:var(--vx-jade);color:#fff;
  box-shadow:0 0 0 3px var(--vx-jade-wash)}
.vx-jstep--attention .vx-jdot{background:var(--vx-gold-wash);border-color:var(--vx-gold-mark);color:var(--vx-gold)}
.vx-jstep--blocked .vx-jdot{background:var(--vx-red-wash);border-color:var(--vx-red);color:var(--vx-red)}
.vx-jstep--locked .vx-jdot{background:var(--vx-slate-wash);border-color:var(--vx-slate-line);color:var(--vx-faint)}
.vx-jstep--on .vx-jname{font-weight:700;color:var(--vx-ink)}
.vx-jstep--on .vx-jbtn{background:var(--vx-surface);box-shadow:var(--vx-sh-1);
  outline:1px solid var(--vx-line)}
.vx-jstate{font-size:11px;color:var(--vx-mute);display:block;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
@media (max-width:1180px){ .vx-jstate{display:none} }

/* ---------------------------------------------------------------- panels */

.vx-panel{background:var(--vx-surface);border:1px solid var(--vx-line);border-radius:var(--vx-r);
  box-shadow:var(--vx-sh-1);margin-bottom:var(--vx-gap);overflow:hidden}
.vx-panel--flat{box-shadow:none}
.vx-panel--tint{background:var(--vx-surface-2)}
.vx-panel-h{display:flex;align-items:center;gap:var(--vx-gap-s);padding:12px 16px;
  border-bottom:1px solid var(--vx-line-2);flex-wrap:wrap}
.vx-panel-h .vx-h2{font-size:15.5px}
.vx-panel-b{padding:14px 16px}
.vx-panel-b>:first-child{margin-top:0}
.vx-panel-b>:last-child{margin-bottom:0}
.vx-panel-f{padding:10px 16px;border-top:1px solid var(--vx-line-2);background:var(--vx-surface-2)}

/* a bordered inset used for definitions, traces and read-only facts */
.vx-inset{border:1px solid var(--vx-line-2);border-radius:var(--vx-r-s);background:var(--vx-surface-2);
  padding:11px 13px}
.vx-inset+.vx-inset{margin-top:8px}

/* ------------------------------------------------------------ statistics */

.vx-stats{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  margin-bottom:var(--vx-gap)}
.vx-stat{background:var(--vx-surface);border:1px solid var(--vx-line);border-radius:var(--vx-r-s);
  padding:12px 14px;display:flex;gap:11px;align-items:flex-start;box-shadow:var(--vx-sh-1);
  transition:border-color var(--vx-t-fast)}
.vx-stat-ic{width:26px;height:26px;border-radius:var(--vx-r-xs);display:grid;place-items:center;
  flex:0 0 auto;background:var(--vx-surface-3);color:var(--vx-mute);font-size:13px}
.vx-stat-t{min-width:0}
.vx-stat-l{display:block;font-size:11.5px;color:var(--vx-mute);line-height:1.35}
.vx-stat-v{display:block;font-size:19px;font-weight:600;line-height:1.25;margin-top:2px;
  font-variant-numeric:tabular-nums;letter-spacing:-.015em;overflow-wrap:anywhere}
.vx-stat-v.vx-stat-v--long{font-size:13.5px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.vx-stat-n{display:block;font-size:11.5px;color:var(--vx-mute);margin-top:2px}
.vx-stat--attention .vx-stat-ic{background:var(--vx-gold-wash);color:var(--vx-gold)}
.vx-stat--attention .vx-stat-v{color:var(--vx-gold)}
.vx-stat--blocked .vx-stat-ic{background:var(--vx-red-wash);color:var(--vx-red)}
.vx-stat--blocked .vx-stat-v{color:var(--vx-red)}
.vx-stat--complete .vx-stat-ic{background:var(--vx-green-wash);color:var(--vx-green)}
.vx-stat--money .vx-stat-v{font-size:17px}
.vx-stat--lead{background:var(--vx-jade-wash);border-color:var(--vx-jade-line)}
.vx-stat--lead .vx-stat-ic{background:#DCEAE4;color:var(--vx-jade)}
.vx-stat--lead .vx-stat-v{color:var(--vx-jade-d)}

/* --------------------------------------------------------- the pipeline */

.vx-pipe{display:flex;align-items:center;gap:0;flex-wrap:wrap;padding:11px 14px;
  background:var(--vx-surface);border:1px solid var(--vx-line);border-radius:var(--vx-r-s);
  margin-bottom:var(--vx-gap);box-shadow:var(--vx-sh-1)}
.vx-pipe-l{font-size:12px;color:var(--vx-mute);font-weight:600;margin-inline-end:14px}
.vx-pipe-i{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;white-space:nowrap}
.vx-pipe-m{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:10px;
  flex:0 0 auto;border:1.5px solid currentColor}
.vx-pipe-i--done{color:var(--vx-green)}
.vx-pipe-i--done .vx-pipe-m{background:var(--vx-green);border-color:var(--vx-green);color:#fff}
.vx-pipe-i--now{color:var(--vx-jade);font-weight:600}
.vx-pipe-i--now .vx-pipe-m{background:var(--vx-jade-wash);border-color:var(--vx-jade)}
.vx-pipe-i--stop{color:var(--vx-red);font-weight:600}
.vx-pipe-i--stop .vx-pipe-m{background:var(--vx-red-wash);border-color:var(--vx-red)}
.vx-pipe-i--wait{color:var(--vx-faint)}
.vx-pipe-i--wait .vx-pipe-m{border-color:var(--vx-slate-line)}
.vx-pipe-sep{width:22px;height:1.5px;background:var(--vx-line-3);margin-inline:9px;flex:0 0 auto}

/* -------------------------------------------------------- split layouts */

.vx-split{display:grid;gap:var(--vx-gap);align-items:start}
.vx-split--insp{grid-template-columns:minmax(0,1fr) 344px}
.vx-split--queue{grid-template-columns:300px minmax(0,1fr) 330px}
.vx-split--half{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
@media (max-width:1400px){ .vx-split--queue{grid-template-columns:270px minmax(0,1fr) 300px} }
@media (max-width:1240px){
  .vx-split--insp,.vx-split--queue{grid-template-columns:minmax(0,1fr)}
}

/* the inspector sticks beside the list it explains */
.vx-sticky{position:sticky;top:12px}
@media (max-width:1240px){ .vx-sticky{position:static} }

/* --------------------------------------------------------------- tables */

.vx-tw{overflow-x:auto;overscroll-behavior-x:contain}
table.vx-table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
.vx-table th,.vx-table td{padding:8px 10px;text-align:start;vertical-align:middle;
  border-bottom:1px solid var(--vx-line-2)}
.vx-table thead th{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;
  color:var(--vx-mute);background:var(--vx-surface-2);white-space:nowrap;
  border-bottom:1px solid var(--vx-line);position:sticky;top:0;z-index:2}
.vx-table tbody tr{transition:background var(--vx-t-fast)}
.vx-table tbody tr.vx-clk{cursor:pointer}
.vx-table tbody tr.vx-clk:hover{background:var(--vx-surface-2)}
.vx-table tbody tr[aria-selected=true]{background:var(--vx-jade-wash)}
.vx-table tbody tr[aria-selected=true] td:first-child{box-shadow:inset 3px 0 0 var(--vx-jade)}
html[dir=rtl] .vx-table tbody tr[aria-selected=true] td:first-child{box-shadow:inset -3px 0 0 var(--vx-jade)}
.vx-table tbody tr:last-child td{border-bottom:0}
.vx-table .vx-num{font-size:13px}
.vx-table tr.vx-group td{background:var(--vx-surface-3);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--vx-mute);font-weight:600;padding-block:6px}
.vx-table tr.vx-sum td{background:var(--vx-surface-2);font-weight:600}
.vx-table tr.vx-net td{background:var(--vx-jade-wash);font-weight:700;color:var(--vx-jade-d);
  border-top:1.5px solid var(--vx-jade-line)}
.vx-table tr.vx-nil td{color:var(--vx-faint)}
.vx-table td.vx-detail{background:var(--vx-surface-2);padding:0}

/* a slim bar used inside a cell for coverage / confidence */
.vx-meter{display:inline-flex;align-items:center;gap:7px}
.vx-meter-t{width:44px;height:5px;border-radius:3px;background:var(--vx-line);overflow:hidden;
  flex:0 0 auto}
.vx-meter-t i{display:block;height:100%;border-radius:3px;background:var(--vx-jade);
  transition:width var(--vx-t)}
.vx-meter--low .vx-meter-t i{background:var(--vx-gold-mark)}
.vx-meter-v{font-size:11.5px;color:var(--vx-mute);font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- segments */

.vx-seg{display:inline-flex;background:var(--vx-surface-3);border:1px solid var(--vx-line);
  border-radius:var(--vx-r-xs);padding:2px;gap:2px}
.vx-seg button{border:0;background:none;padding:5px 12px;border-radius:6px;cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--vx-mute);white-space:nowrap;
  transition:background var(--vx-t-fast),color var(--vx-t-fast)}
.vx-seg button:hover{color:var(--vx-ink)}
.vx-seg button[aria-selected=true]{background:var(--vx-surface);color:var(--vx-jade);font-weight:600;
  box-shadow:var(--vx-sh-1)}
.vx-seg .vx-count{font-size:10.5px;color:var(--vx-mute);margin-inline-start:5px;
  font-variant-numeric:tabular-nums}

/* filter chips */
.vx-chips{display:flex;gap:6px;flex-wrap:wrap}
.vx-chip{border:1px solid var(--vx-line);background:var(--vx-surface);border-radius:var(--vx-pill);
  padding:4px 11px;font:inherit;font-size:12px;cursor:pointer;color:var(--vx-ink-2);
  display:inline-flex;align-items:center;gap:6px;
  transition:background var(--vx-t-fast),border-color var(--vx-t-fast),color var(--vx-t-fast)}
.vx-chip:hover{border-color:var(--vx-mute)}
.vx-chip[aria-pressed=true]{background:var(--vx-jade);border-color:var(--vx-jade);color:#fff;font-weight:600}
.vx-chip[aria-pressed=true] .vx-count{color:#CDE4DA}
.vx-chip .vx-count{font-size:10.5px;color:var(--vx-mute);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- forms */

.vx-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--vx-mute);
  margin-bottom:10px}
.vx-field>span{font-weight:600}
.vx input[type=text],.vx input[type=date],.vx input[type=number],.vx input:not([type]),
.vx select,.vx textarea{
  border:1px solid var(--vx-line-3);border-radius:var(--vx-r-xs);padding:8px 10px;font:inherit;
  font-size:13px;color:var(--vx-ink);background:var(--vx-surface);max-width:100%;
  transition:border-color var(--vx-t-fast),box-shadow var(--vx-t-fast)}
.vx input:focus,.vx select:focus,.vx textarea:focus{outline:none;border-color:var(--vx-jade);
  box-shadow:0 0 0 3px var(--vx-jade-wash)}
.vx textarea{resize:vertical;min-height:62px;line-height:1.5}
.vx input[disabled],.vx select[disabled],.vx textarea[disabled]{background:var(--vx-surface-3);
  color:var(--vx-mute);cursor:not-allowed}
.vx-search{position:relative;display:block}
.vx-search input{width:100%;padding-inline-start:31px}
.vx-search .vx-ic{position:absolute;inset-inline-start:10px;inset-block-start:50%;
  transform:translateY(-50%);color:var(--vx-faint);pointer-events:none;font-size:13px}

/* radio cards: one obvious choice, never colour alone */
.vx-choices{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:8px 0}
.vx-choice{display:flex;align-items:flex-start;gap:9px;border:1px solid var(--vx-line-3);
  border-radius:var(--vx-r-s);padding:10px 12px;cursor:pointer;background:var(--vx-surface);
  font-size:13px;transition:border-color var(--vx-t-fast),background var(--vx-t-fast),
  box-shadow var(--vx-t-fast)}
.vx-choice:hover{border-color:var(--vx-mute);background:var(--vx-surface-2)}
.vx-choice input{margin:2px 0 0;flex:0 0 auto;accent-color:var(--vx-jade)}
.vx-choice:has(input:checked){border-color:var(--vx-jade);background:var(--vx-jade-wash);
  box-shadow:0 0 0 1px var(--vx-jade)}
.vx-choice-t b{display:block;font-weight:600}
.vx-choice-t span{display:block;color:var(--vx-mute);font-size:11.5px;margin-top:2px}

.vx-check{display:flex;align-items:flex-start;gap:8px;font-size:13px;cursor:pointer;margin:8px 0}
.vx-check input{margin:2px 0 0;accent-color:var(--vx-jade);flex:0 0 auto}

/* ---------------------------------------------------------------- notes */
/* Slim. A whole-width alarm bar is what the old screens did and it stopped
   being read; a note here sits where the thing it is about sits. */

.vx-note{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--vx-line);
  border-radius:var(--vx-r-s);padding:10px 12px;font-size:12.5px;background:var(--vx-surface-2);
  margin:10px 0}
.vx-note .vx-ic{flex:0 0 auto;margin-top:1px}
.vx-note b{font-weight:600}
.vx-note--info{background:var(--vx-blue-wash);border-color:var(--vx-blue-line);color:#1F4472}
.vx-note--attention{background:var(--vx-gold-wash);border-color:var(--vx-gold-line);color:var(--vx-gold)}
.vx-note--blocked{background:var(--vx-red-wash);border-color:var(--vx-red-line);color:var(--vx-red)}
.vx-note--complete{background:var(--vx-green-wash);border-color:var(--vx-green-line);color:var(--vx-green)}
.vx-note--ai{background:var(--vx-blue-wash);border-color:var(--vx-blue-line);color:var(--vx-ink)}
.vx-note--specialist{background:var(--vx-gold-wash);border-color:var(--vx-gold-line);color:var(--vx-ink)}

/* the AI suggestion, always labelled, never chosen for you */
.vx-ai-h{display:flex;align-items:center;gap:7px;font-weight:600;font-size:12px;color:var(--vx-blue);
  margin-bottom:5px}
.vx-ai-tag{border:1px solid var(--vx-blue-line);background:var(--vx-surface);border-radius:var(--vx-pill);
  padding:1px 8px;font-size:10.5px;font-weight:700;letter-spacing:.03em;color:var(--vx-blue);
  text-transform:uppercase}

/* ---------------------------------------------------------- the gate bar */

.vx-gate{position:sticky;inset-block-end:0;display:flex;align-items:center;gap:var(--vx-gap);
  padding:11px 22px;background:var(--vx-surface);border-top:1px solid var(--vx-line);
  box-shadow:0 -6px 18px -12px rgba(27,37,49,.3);flex-wrap:wrap;z-index:6}
.vx-gate-s{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px}
.vx-gate-n{color:var(--vx-mute);font-weight:400;font-size:12.5px;
  border-inline-start:1px solid var(--vx-line);padding-inline-start:var(--vx-gap)}
@media (max-width:900px){ .vx-gate-n{border:0;padding:0;flex-basis:100%} }
.vx-gate--blocked .vx-gate-s{color:var(--vx-red)}
.vx-gate--attention .vx-gate-s{color:var(--vx-gold)}
.vx-gate--ready .vx-gate-s,.vx-gate--complete .vx-gate-s{color:var(--vx-green)}

/* --------------------------------------------------------- the inspector */

.vx-insp{background:var(--vx-surface);border:1px solid var(--vx-line);border-radius:var(--vx-r);
  box-shadow:var(--vx-sh-1);overflow:hidden}
.vx-insp-h{padding:14px 16px 12px;border-bottom:1px solid var(--vx-line-2)}
.vx-insp-b{padding:14px 16px}
.vx-insp-b>section{margin-bottom:16px}
.vx-insp-b>section:last-child{margin-bottom:0}
.vx-insp-b h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--vx-mute);
  margin:0 0 7px;font-weight:600}

/* key/value facts, the shape a reviewer scans fastest */
.vx-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px;
  border:1px solid var(--vx-line-2);border-radius:var(--vx-r-s);overflow:hidden;
  background:var(--vx-line-2);font-size:12.5px}
.vx-facts dt{background:var(--vx-surface-2);padding:7px 11px;color:var(--vx-mute);white-space:nowrap}
.vx-facts dd{background:var(--vx-surface);padding:7px 11px;margin:0;min-width:0;overflow-wrap:anywhere}
.vx-facts dd.vx-num{text-align:start}

/* a list of evidence / checks, each with a mark and a word */
.vx-list{list-style:none;margin:0;padding:0}
.vx-list li{display:flex;align-items:flex-start;gap:9px;padding:8px 0;
  border-bottom:1px solid var(--vx-line-2);font-size:12.5px}
.vx-list li:last-child{border-bottom:0}
.vx-list .vx-ic{flex:0 0 auto;margin-top:1px;width:15px;text-align:center}
.vx-list b{display:block;font-weight:600}
.vx-list span{color:var(--vx-mute)}
.vx-ok{color:var(--vx-green)} .vx-warn{color:var(--vx-gold)} .vx-stop{color:var(--vx-red)}
.vx-info{color:var(--vx-blue)} .vx-idle{color:var(--vx-faint)}

/* ------------------------------------------------------------ the queue */

.vx-queue{display:flex;flex-direction:column;max-height:calc(100vh - 300px);min-height:260px}
.vx-queue-l{overflow-y:auto;flex:1 1 auto;margin:0;padding:0;list-style:none}
.vx-qitem{display:block;width:100%;border:0;border-bottom:1px solid var(--vx-line-2);
  background:none;text-align:start;padding:11px 14px;cursor:pointer;font:inherit;
  position:relative;transition:background var(--vx-t-fast)}
.vx-qitem:hover{background:var(--vx-surface-2)}
.vx-qitem[aria-current=true]{background:var(--vx-jade-wash)}
.vx-qitem[aria-current=true]::before{content:"";position:absolute;inset-inline-start:0;inset-block:0;
  width:3px;background:var(--vx-jade)}
.vx-qitem-t{display:flex;align-items:baseline;gap:8px}
.vx-qitem-t b{font-weight:600;font-size:12.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.vx-qitem-s{display:block;color:var(--vx-mute);font-size:11.5px;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-qitem-m{display:flex;align-items:center;gap:6px;margin-top:5px;flex-wrap:wrap}

/* the one decision in the middle */
.vx-decision .vx-h2{margin-bottom:3px}
.vx-amounts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:var(--vx-line-2);border:1px solid var(--vx-line-2);border-radius:var(--vx-r-s);
  overflow:hidden;margin:12px 0}
.vx-amount{background:var(--vx-surface-2);padding:10px 13px}
.vx-amount span{display:block;font-size:11.5px;color:var(--vx-mute)}
.vx-amount b{display:block;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;
  margin-top:1px;letter-spacing:-.01em}

/* ------------------------------------------------------------ VAT bridge */

.vx-bridge{display:flex;align-items:stretch;gap:9px;flex-wrap:wrap;margin:4px 0 14px}
.vx-bterm{flex:1 1 150px;min-width:0;border:1px solid var(--vx-line);border-radius:var(--vx-r-s);
  padding:11px 13px;background:var(--vx-surface-2)}
.vx-bterm span{display:block;font-size:11.5px;color:var(--vx-mute)}
.vx-bterm b{display:block;font-size:15.5px;font-weight:600;font-variant-numeric:tabular-nums;
  margin-top:2px;letter-spacing:-.01em}
.vx-bterm--out{background:var(--vx-jade-wash);border-color:var(--vx-jade-line)}
.vx-bterm--out b{color:var(--vx-jade-d)}
.vx-bop{display:grid;place-items:center;font-size:17px;color:var(--vx-mute);flex:0 0 auto;
  width:20px;font-variant-numeric:tabular-nums}

/* the trace beside a box */
.vx-trace{list-style:none;margin:0;padding:0}
.vx-trace li{position:relative;padding:0 0 14px 24px;font-size:12.5px}
html[dir=rtl] .vx-trace li{padding:0 24px 14px 0}
.vx-trace li::before{content:"";position:absolute;inset-inline-start:6px;inset-block-start:15px;
  bottom:0;width:1.5px;background:var(--vx-line-3)}
.vx-trace li:last-child{padding-bottom:0}
.vx-trace li:last-child::before{display:none}
.vx-trace-m{position:absolute;inset-inline-start:0;inset-block-start:2px;width:13px;height:13px;
  border-radius:50%;background:var(--vx-surface);border:1.5px solid var(--vx-jade-line);
  display:grid;place-items:center;font-size:7px;color:var(--vx-jade)}
.vx-formula{font-family:var(--vx-mono);font-size:12px;background:var(--vx-jade-wash);
  border:1px solid var(--vx-jade-line);border-radius:var(--vx-r-xs);padding:9px 12px;
  color:var(--vx-jade-d);overflow-wrap:anywhere;margin-bottom:12px}

/* --------------------------------------------------- the data workspace */
/* A real sheet: file tabs, sheet tabs, a name box and value bar, frozen
   headers, and only the rows in view put into the document. */

.vx-ws{position:fixed;inset:0;z-index:70;background:var(--vx-bg);display:flex;flex-direction:column}
.vx-ws-bar{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--vx-surface);
  border-bottom:1px solid var(--vx-line);flex-wrap:wrap}
.vx-ws-title{font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:8px;min-width:0}
.vx-ws-title .vx-ic{color:var(--vx-jade)}

/* open-file tabs */
.vx-ftabs{display:flex;align-items:flex-end;gap:3px;padding:0 10px;background:var(--vx-surface-3);
  border-bottom:1px solid var(--vx-line);overflow-x:auto;scrollbar-width:thin}
.vx-ftab{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;
  border-bottom:0;background:none;padding:7px 12px;border-radius:var(--vx-r-xs) var(--vx-r-xs) 0 0;
  cursor:pointer;font:inherit;font-size:12.5px;color:var(--vx-mute);white-space:nowrap;
  transition:background var(--vx-t-fast),color var(--vx-t-fast)}
.vx-ftab:hover{background:rgba(255,255,255,.6);color:var(--vx-ink)}
.vx-ftab[aria-selected=true]{background:var(--vx-surface);border-color:var(--vx-line);
  color:var(--vx-ink);font-weight:600}
.vx-ftab .vx-ic{font-size:12px;color:var(--vx-jade)}
.vx-ftab-x{border:0;background:none;color:var(--vx-faint);cursor:pointer;font:inherit;padding:0 2px;
  border-radius:4px;line-height:1}
.vx-ftab-x:hover{background:var(--vx-line);color:var(--vx-ink)}

/* the name box and value bar */
.vx-fbar{display:flex;align-items:stretch;gap:0;background:var(--vx-surface);
  border-bottom:1px solid var(--vx-line)}
.vx-namebox{min-width:92px;padding:7px 11px;font-family:var(--vx-mono);font-size:12px;
  border-inline-end:1px solid var(--vx-line);display:flex;align-items:center;
  color:var(--vx-ink);background:var(--vx-surface-2)}
.vx-fx{display:flex;align-items:center;gap:9px;padding:0 11px;flex:1 1 auto;min-width:0}
.vx-fx-m{color:var(--vx-faint);font-style:italic;font-family:var(--vx-display);flex:0 0 auto}
.vx-fx input{flex:1 1 auto;border:0;background:none;padding:7px 0;font-size:13px;min-width:0;
  border-radius:0}
.vx-fx input:focus{outline:none;box-shadow:none;border:0}
.vx-fx input[readonly]{color:var(--vx-mute)}

/* the sheet itself */
.vx-ws-body{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:0}
.vx-ws-body--wide{grid-template-columns:250px minmax(0,1fr) 340px}
.vx-ws-body--bare{grid-template-columns:minmax(0,1fr)}
@media (max-width:1180px){ .vx-ws-body,.vx-ws-body--wide{grid-template-columns:minmax(0,1fr)} }

.vx-sheet{min-width:0;display:flex;flex-direction:column;background:var(--vx-surface);
  border-inline-end:1px solid var(--vx-line)}
.vx-sheet-scroll{flex:1 1 auto;overflow:auto;position:relative;contain:strict}
.vx-grid{border-collapse:separate;border-spacing:0;font-size:12.5px;table-layout:fixed;
  background:var(--vx-surface)}
.vx-grid th,.vx-grid td{border-inline-end:1px solid var(--vx-line-2);
  border-bottom:1px solid var(--vx-line-2);padding:0;height:26px;overflow:hidden}
.vx-grid th.vx-colh{position:sticky;inset-block-start:0;z-index:3;background:var(--vx-surface-3);
  text-align:center;font-size:11px;font-weight:600;color:var(--vx-mute);
  border-bottom:1px solid var(--vx-line-3);user-select:none;letter-spacing:.02em}
.vx-grid th.vx-rowh{position:sticky;inset-inline-start:0;z-index:2;background:var(--vx-surface-3);
  text-align:center;font-size:11px;font-weight:500;color:var(--vx-mute);min-width:46px;width:46px;
  border-inline-end:1px solid var(--vx-line-3);user-select:none}
.vx-grid thead th.vx-rowh{z-index:4}
.vx-grid th.vx-colh--on,.vx-grid th.vx-rowh--on{background:var(--vx-jade-wash);color:var(--vx-jade);
  font-weight:700}
.vx-grid td{background:var(--vx-surface);padding-inline:6px;white-space:nowrap;
  text-overflow:ellipsis;vertical-align:middle}
.vx-grid td.vx-c-num{text-align:end;font-variant-numeric:tabular-nums}
/* a cell VITA read a figure from */
.vx-grid td.vx-c-bound{background:#FBFDFB;box-shadow:inset 0 -2px 0 var(--vx-jade-line)}
/* a cell changed in the working revision */
.vx-grid td.vx-c-edit{background:var(--vx-gold-wash);box-shadow:inset 0 -2px 0 var(--vx-gold-mark)}
/* a cell a finding points at */
.vx-grid td.vx-c-find{background:var(--vx-red-wash);box-shadow:inset 0 -2px 0 var(--vx-red)}
.vx-grid td.vx-c-sel{outline:2px solid var(--vx-jade);outline-offset:-2px;z-index:1;position:relative}
.vx-grid tr.vx-r-find th.vx-rowh{color:var(--vx-red);font-weight:700}
.vx-grid tr.vx-r-find th.vx-rowh::after{content:"●";font-size:7px;margin-inline-start:3px;
  vertical-align:middle}
.vx-grid tr.vx-r-out td{color:var(--vx-faint);font-style:italic}
.vx-grid tr.vx-r-hidden th.vx-rowh{background:repeating-linear-gradient(45deg,
  var(--vx-surface-3),var(--vx-surface-3) 3px,var(--vx-line) 3px,var(--vx-line) 6px)}
.vx-grid input.vx-cell{width:100%;height:100%;border:0;background:none;padding:0;font:inherit;
  color:inherit;border-radius:0;font-size:12.5px}
.vx-grid input.vx-cell:focus{outline:none;box-shadow:none}
/* the two columns VITA adds beyond the file */
.vx-grid th.vx-colh--vita{background:var(--vx-jade-wash);color:var(--vx-jade);
  border-inline-start:2px solid var(--vx-jade-line)}
.vx-grid td.vx-c-vita{background:#F7FBF9;border-inline-start:2px solid var(--vx-jade-line)}
.vx-grid td.vx-c-vita select{width:100%;border:0;background:none;padding:0 2px;font:inherit;
  font-size:12px;border-radius:0}
.vx-grid td.vx-c-vita select:focus{outline:none;box-shadow:none}
/* virtualisation spacers */
.vx-spacer td{padding:0;border:0;background:var(--vx-surface)}

.vx-sheet-tabs{display:flex;align-items:center;gap:3px;padding:5px 10px;background:var(--vx-surface-2);
  border-top:1px solid var(--vx-line);overflow-x:auto;flex:0 0 auto}
.vx-stab{border:1px solid transparent;background:none;padding:4px 11px;border-radius:var(--vx-r-xs);
  cursor:pointer;font:inherit;font-size:12px;color:var(--vx-mute);white-space:nowrap;
  transition:background var(--vx-t-fast),color var(--vx-t-fast)}
.vx-stab:hover{background:var(--vx-surface-3);color:var(--vx-ink)}
.vx-stab[aria-selected=true]{background:var(--vx-surface);border-color:var(--vx-line);
  color:var(--vx-jade);font-weight:600;box-shadow:var(--vx-sh-1)}
.vx-stab .vx-dot{display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--vx-red);margin-inline-start:5px;vertical-align:middle}

/* the issue navigator, collapsible */
.vx-nav{background:var(--vx-surface);border-inline-end:1px solid var(--vx-line);display:flex;
  flex-direction:column;min-width:0}
.vx-nav-h{padding:10px 12px;border-bottom:1px solid var(--vx-line-2);display:flex;align-items:center;
  gap:8px}
.vx-nav-l{overflow-y:auto;flex:1 1 auto;margin:0;padding:0;list-style:none}
.vx-nav-i{display:block;width:100%;border:0;border-bottom:1px solid var(--vx-line-2);background:none;
  text-align:start;padding:9px 12px;cursor:pointer;font:inherit;font-size:12px;position:relative;
  transition:background var(--vx-t-fast)}
.vx-nav-i:hover{background:var(--vx-surface-2)}
.vx-nav-i[aria-current=true]{background:var(--vx-jade-wash)}
.vx-nav-i[aria-current=true]::before{content:"";position:absolute;inset-inline-start:0;inset-block:0;
  width:3px;background:var(--vx-jade)}
.vx-nav-i b{display:block;font-weight:600}
.vx-nav-i span{color:var(--vx-mute);display:block;margin-top:1px}
.vx-nav-ref{font-family:var(--vx-mono);font-size:10.5px;color:var(--vx-jade);background:var(--vx-jade-wash);
  border-radius:4px;padding:0 5px;display:inline-block;margin-top:3px}

/* the revision / integrity panel */
.vx-rev{list-style:none;margin:0;padding:0;font-size:12px}
.vx-rev li{padding:9px 0;border-bottom:1px solid var(--vx-line-2)}
.vx-rev li:last-child{border-bottom:0}
.vx-rev-w{display:flex;align-items:baseline;gap:7px}
.vx-rev-w b{font-weight:600}
.vx-diff{font-family:var(--vx-mono);font-size:11px;margin-top:3px;overflow-wrap:anywhere}
.vx-diff del{color:var(--vx-red);text-decoration:line-through;background:var(--vx-red-wash);
  padding:0 3px;border-radius:3px}
.vx-diff ins{color:var(--vx-green);text-decoration:none;background:var(--vx-green-wash);
  padding:0 3px;border-radius:3px}

/* ------------------------------------------------------------ skeletons */

.vx-skel{background:linear-gradient(90deg,var(--vx-line-2) 25%,var(--vx-surface-3) 37%,
  var(--vx-line-2) 63%);background-size:400% 100%;animation:vx-sk 1.3s ease-in-out infinite;
  border-radius:6px;height:12px}
@keyframes vx-sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.vx-skel--row{height:30px;margin-bottom:6px;border-radius:var(--vx-r-xs)}
.vx-spin{display:inline-block;width:12px;height:12px;border:2px solid var(--vx-line-3);
  border-top-color:var(--vx-jade);border-radius:50%;animation:vx-spin .7s linear infinite;
  vertical-align:-2px;flex:0 0 auto}
@keyframes vx-spin{to{transform:rotate(360deg)}}

.vx-empty{text-align:center;color:var(--vx-mute);padding:30px 16px;font-size:13px}
.vx-empty b{display:block;color:var(--vx-ink);font-size:14px;margin-bottom:4px}

/* a value that just changed, so the eye catches it without a chart */
.vx-fresh{animation:vx-fresh 900ms ease-out}
@keyframes vx-fresh{
  0%{background-color:var(--vx-jade-wash)}
  100%{background-color:transparent}
}

/* =========================================================== import mapping
   The screen where a file becomes lines. Its spine is one row per source
   column, so the table is the layout: everything else here exists to keep that
   table readable — the sheet tabs above it, the coverage strip saying what is
   satisfied and what blocks, and the preview below it.

   Every rule is logical (inset-inline, text-align:start, margin-inline), so
   Arabic is not a second pass over a left-to-right screen. The exceptions are a
   sample value and a column letter: they are data out of the file and stay
   left-to-right whichever way the page reads.
   ========================================================================= */

.vx-map{display:grid;gap:var(--vx-gap);margin-bottom:var(--vx-gap)}

/* --- the header: what this is, which sheet, and the one AI control -------- */
.vx-mhead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--vx-gap-s) var(--vx-gap);
  align-items:start;background:var(--vx-surface);border:1px solid var(--vx-line);
  border-radius:var(--vx-r);box-shadow:var(--vx-sh-1);padding:14px 16px}
.vx-mhead-t{min-width:0}
.vx-mhead-t .vx-lede{margin-top:4px}
.vx-mhead-a{display:flex;gap:var(--vx-gap-s);flex-wrap:wrap;justify-content:flex-end}
.vx-mtabs{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;
  border-block-start:1px solid var(--vx-line-2);padding-block-start:11px}
.vx-mtab{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--vx-line);
  background:var(--vx-surface-2);border-radius:var(--vx-r-xs);padding:6px 12px;cursor:pointer;
  font:inherit;font-size:13px;color:var(--vx-ink-2);max-width:100%;
  transition:background var(--vx-t-fast),border-color var(--vx-t-fast),color var(--vx-t-fast)}
.vx-mtab:hover{border-color:var(--vx-mute);background:var(--vx-surface)}
.vx-mtab[aria-pressed=true]{background:var(--vx-jade-wash);border-color:var(--vx-jade-line);
  color:var(--vx-jade-d);font-weight:600;box-shadow:inset 0 -2px 0 var(--vx-jade)}
.vx-mtab-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-mrole{grid-column:1/-1;display:flex;align-items:center;gap:var(--vx-gap-s);flex-wrap:wrap}
.vx-msel-l{font-size:12px;font-weight:600;color:var(--vx-mute)}
@media (max-width:860px){ .vx-mhead{grid-template-columns:minmax(0,1fr)}
  .vx-mhead-a{justify-content:flex-start} }

/* --- coverage: satisfied, missing, ignored, and who decided -------------- */
.vx-mcov-g{display:grid;gap:var(--vx-gap);grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));
  align-items:start}
@media (max-width:1100px){ .vx-mcov-g{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} }
.vx-mcov-c{min-width:0;display:flex;flex-direction:column;gap:5px}
.vx-mcov-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;
  color:var(--vx-mute)}
.vx-mcov-v{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;direction:ltr;
  text-align:start}
.vx-mreq{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.vx-mreq-i{display:inline-flex;align-items:center;gap:5px;border:1px solid;
  border-radius:var(--vx-pill);padding:3px 10px;font-size:12px}
.vx-mreq-i .vx-ic{font-size:11px;line-height:1}
.vx-mreq-i--ok{color:var(--vx-green);background:var(--vx-green-wash);border-color:var(--vx-green-line)}
.vx-mreq-i--no{color:var(--vx-red);background:var(--vx-red-wash);border-color:var(--vx-red-line);
  font-weight:600}
.vx-mlist{margin:6px 0 0;padding-inline-start:18px;font-size:12.5px}
.vx-mlist li{margin-bottom:2px}
/* What stops the import is the loudest thing here, and it stays on the page. */
.vx-mblock,.vx-mdrop{border-width:1.5px}
.vx-mblock b{font-size:14px}

/* --- the table: one row per source column ------------------------------- */
.vx-mtable{table-layout:auto}
.vx-mtable th,.vx-mtable td{vertical-align:top;padding-block:9px}
.vx-mtable td.vx-mcol,.vx-mtable th.vx-mcol{width:1%;white-space:nowrap;color:var(--vx-jade);
  font-weight:600;direction:ltr;text-align:start}
.vx-mhd{min-width:120px}
.vx-mhd b{display:block;font-weight:600}
.vx-mhd .vx-small{display:block;color:var(--vx-faint)}
.vx-msample{max-width:280px}
.vx-msample-v{display:inline-block;direction:ltr;unicode-bidi:isolate;background:var(--vx-surface-3);
  border:1px solid var(--vx-line-2);border-radius:5px;padding:1px 6px;margin:0 4px 4px 0;
  font-family:var(--vx-mono);font-size:11px;max-width:150px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;vertical-align:middle}
html[dir=rtl] .vx-msample-v{margin:0 0 4px 4px}
.vx-mfield{min-width:180px}
.vx-msel{width:100%;min-width:150px}
.vx-msel[aria-busy=true]{border-color:var(--vx-jade);opacity:.7}
.vx-mflag{display:inline-block;margin-block-start:5px}
.vx-mconf{white-space:nowrap}
.vx-mconf-w{display:block;color:var(--vx-gold);font-weight:600;margin-block-start:2px}
.vx-mwhy{max-width:260px}
.vx-mwhy b{display:block;font-weight:600;font-size:12.5px}
.vx-mwhy .vx-small{display:block;margin-block-start:1px}
/* A column full of data that nothing is reading. Silent loss is the failure this
   screen exists to prevent, so the row carries a mark, a word and a colour. */
.vx-mrow--drop td{background:var(--vx-gold-wash)}
.vx-mrow--drop td.vx-mcol{box-shadow:inset 3px 0 0 var(--vx-gold-mark)}
html[dir=rtl] .vx-mrow--drop td.vx-mcol{box-shadow:inset -3px 0 0 var(--vx-gold-mark)}
.vx-mrow--low td.vx-mconf{color:var(--vx-gold)}

/* --- the proposal, read before it is accepted --------------------------- */
.vx-mprop{border-color:var(--vx-blue-line);box-shadow:var(--vx-sh-2)}
.vx-mprop>.vx-panel-h{background:var(--vx-blue-wash);border-bottom-color:var(--vx-blue-line)}
.vx-mprop>.vx-panel-h .vx-h2{display:flex;align-items:center;gap:7px;color:#1F4472}

/* --- the preview -------------------------------------------------------- */
.vx-mprev{font-size:12.5px}
.vx-mprev td,.vx-mprev th{padding:6px 9px}
.vx-mprev .vx-msep{border-inline-start:2px solid var(--vx-jade-line);background:#F7FBF9}
.vx-mprev thead th.vx-msep{background:var(--vx-jade-wash);color:var(--vx-jade)}

/* --- the foot: confirm, and why it cannot be pressed ------------------- */
.vx-mfoot-why{color:var(--vx-red);font-weight:600;margin:9px 0 0}
.vx-madv{margin-block-start:11px;border-block-start:1px solid var(--vx-line-2);padding-block-start:9px}
.vx-madv>summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--vx-mute);
  list-style:none;padding:3px 0}
.vx-madv>summary::-webkit-details-marker{display:none}
.vx-madv>summary::before{content:"▸";display:inline-block;margin-inline-end:7px;
  color:var(--vx-faint);transition:transform var(--vx-t-fast)}
html[dir=rtl] .vx-madv>summary::before{content:"◂"}
.vx-madv[open]>summary::before{transform:rotate(90deg)}
html[dir=rtl] .vx-madv[open]>summary::before{transform:rotate(-90deg)}
.vx-madv>summary:hover{color:var(--vx-ink)}
.vx-mgrid{display:grid;gap:var(--vx-gap-s);grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  align-items:end;margin-block-start:9px}

/* ------------------------------------------------------------- printing */
@media print{
  .vx-railnav,.vx-gate,.vx-journey,.vx-env{display:none}
  .vx-map .vx-mhead-a,.vx-map .vx-madv,.vx-map .vx-mtabs{display:none}
  .vx-shell{border:0;box-shadow:none}
  .vx-body{grid-template-columns:minmax(0,1fr)}
}

/* ===========================================================================
   Focus mode — the VAT workspace only
   ---------------------------------------------------------------------------
   `vx-focus` is put on <body> while the VAT page is open and taken off again on
   the way out (see renderShell in app.js). It quiets the outer chrome that the
   workspace header already carries, so the same client, period and name are not
   read twice on one screen. No other module is affected, because no other module
   ever sets the class.
   =========================================================================== */

body.vx-focus .side{transform:translateX(-105%);transition:transform 170ms cubic-bezier(.22,.61,.36,1)}
html[dir=rtl] body.vx-focus .side{transform:translateX(105%)}
body.vx-focus .side.open{transform:none;box-shadow:0 0 40px -10px rgba(16,27,24,.35)}
body.vx-focus main{margin-inline-start:0;padding:14px 16px 24px;max-width:none}
body.vx-focus #burger{display:block}
/* the workspace header says the client, the period and who is signed in */
body.vx-focus .top .ctx,body.vx-focus .top .usr,body.vx-focus .top .avatar{display:none}
body.vx-focus .top{background:var(--vx-bg,#F6F5F1);border-bottom-color:#E3E0D8}
@media (max-width:980px){ body.vx-focus main{padding:12px} }