/* ══════════════════════════════════════════════════════════════════════
   VisionX Premium UI layer — charts, tabs, executive commentary
   Additive only. Every rule is namespaced (vxc- / vxt- / xc-) so nothing
   here can collide with the base stylesheet inside VisionX.html.
   Theming rides the existing --text/--slate/--dim/--line/--panel tokens,
   so light and dark both work with no extra work.
   The global @media(prefers-reduced-motion:reduce) rule in VisionX.html
   already kills every animation/transition declared below.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --vxc-tip-bg:rgba(255,255,255,.92);
  --vxc-tip-ink:#0E1B2C;
  --vxc-tip-line:rgba(14,27,44,.10);
  --vxc-tip-shadow:0 10px 34px rgba(14,27,44,.16),0 2px 8px rgba(14,27,44,.08);
  --vxc-glow:rgba(21,184,160,.55);
}
:root[data-theme="dark"]{
  --vxc-tip-bg:rgba(17,31,50,.94);
  --vxc-tip-ink:#E8EEF4;
  --vxc-tip-line:rgba(255,255,255,.12);
  --vxc-tip-shadow:0 12px 38px rgba(0,0,0,.5),0 2px 10px rgba(0,0,0,.35);
  --vxc-glow:rgba(21,184,160,.75);
}

/* ── 1. Chart shell ────────────────────────────────────────────────── */

.vxc-host{position:relative}
.vxc-host svg{overflow:visible}

/* Hover lift for any mark the enhancer has wired up. The filter is applied
   on the element itself so it never repaints the whole SVG.

   CRITICAL: transform-box/transform-origin must NOT be set on the base
   rule. Elements that carry their own SVG transform attribute — e.g. the
   donut's transform="rotate(-90 64 64)" — are resolved against the
   viewport by default. Switching them to fill-box re-anchors that
   rotation and throws the element clean outside the SVG. Both donuts
   vanished this way. So the transform properties live only on the hover
   rules, and only for marks that have no transform of their own. */
[data-vxc-mark]{
  cursor:pointer;
  transition:opacity .16s ease, filter .16s ease, transform .16s cubic-bezier(.2,.7,.3,1);
}
[data-vxc-mark]:hover{
  filter:drop-shadow(0 4px 10px rgba(14,27,44,.28)) drop-shadow(0 0 6px var(--vxc-glow));
}
rect[data-vxc-mark]:not([transform]):hover{
  transform-box:fill-box;transform-origin:center;transform:scaleY(1.015) scaleX(1.06);
}
circle[data-vxc-mark]:not([transform]):hover{
  transform-box:fill-box;transform-origin:center;transform:scale(1.5);
}

/* Dimmed state — this is what "Chart A filters Chart B" looks like on
   every other mark in the tab once a month is selected. */
[data-vxc-mark].vxc-dim{opacity:.16;filter:saturate(.3)}
[data-vxc-mark].vxc-hot{filter:drop-shadow(0 0 7px var(--vxc-glow))}
.vxc-host text.vxc-dim{opacity:.3}
.vxc-host text.vxc-hot{font-weight:700!important}

/* Invisible full-height hit columns that make thin lines and sparse points
   easy to hover and click. They must NOT take the scale/glow treatment:
   growing a hit area under the cursor makes it oscillate in and out of
   hover, which flickers the tooltip. */
.vxc-hit{fill:transparent;cursor:pointer}
.vxc-hit:hover{fill:currentColor;fill-opacity:.05}
rect.vxc-hit[data-vxc-mark]:hover{transform:none;filter:none}
rect.vxc-hit[data-vxc-mark].vxc-dim{opacity:1;filter:none}
rect.vxc-hit[data-vxc-mark].vxc-hot{filter:none;fill:currentColor;fill-opacity:.06}

/* Vertical crosshair that tracks the hovered column. */
.vxc-cross{pointer-events:none;opacity:0;transition:opacity .14s ease}
.vxc-cross.on{opacity:1}

/* ── 2. Tooltip ────────────────────────────────────────────────────── */

.vxc-tip{
  position:fixed;z-index:9000;pointer-events:none;
  min-width:118px;max-width:260px;
  padding:9px 11px;border-radius:11px;
  background:var(--vxc-tip-bg);
  color:var(--vxc-tip-ink);
  border:1px solid var(--vxc-tip-line);
  box-shadow:var(--vxc-tip-shadow);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  font-family:'Inter',system-ui,sans-serif;font-size:11.5px;line-height:1.45;
  opacity:0;transform:translateY(5px) scale(.97);
  transition:opacity .13s ease, transform .13s cubic-bezier(.2,.7,.3,1);
}
.vxc-tip.on{opacity:1;transform:none}
.vxc-tip .vxc-tip-h{
  font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-bottom:5px;
}
.vxc-tip .vxc-tip-r{display:flex;align-items:center;gap:7px;margin-top:3px}
.vxc-tip .vxc-tip-sw{width:8px;height:8px;border-radius:2.5px;flex:none}
.vxc-tip .vxc-tip-k{flex:1;color:var(--slate);white-space:nowrap}
.vxc-tip .vxc-tip-v{font-family:'IBM Plex Mono',monospace;font-weight:600;white-space:nowrap}
.vxc-tip .vxc-tip-f{
  margin-top:6px;padding-top:6px;border-top:1px solid var(--vxc-tip-line);
  font-size:9.5px;color:var(--dim);
}
.vxc-tip .vxc-pos{color:var(--green)}
.vxc-tip .vxc-neg{color:var(--coral)}

/* ── 3. Load animations ───────────────────────────────────────────── */

@keyframes vxc-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes vxc-grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vxc-draw{to{stroke-dashoffset:0}}
@keyframes vxc-fade{from{opacity:0}to{opacity:1}}
@keyframes vxc-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* :not([transform]) for the same reason as the hover rules above — never
   re-anchor an element that already carries its own SVG transform. */
.vxc-anim rect[data-vxc-grow]:not([transform]){
  transform-box:fill-box;transform-origin:bottom center;
  animation:vxc-grow .62s cubic-bezier(.22,1,.36,1) backwards;
}
/* A diverging bar hanging below the zero line must grow downward FROM
   that line. Without this it animates up from its own bottom edge, so
   negative bars appear to shrink toward zero instead of extend from it. */
.vxc-anim rect[data-vxc-grow][data-vxc-origin="top"]:not([transform]){transform-origin:top center}
/* Horizontal bars sweep from the left rather than rising. */
.vxc-anim rect[data-vxc-growx]:not([transform]){
  transform-box:fill-box;transform-origin:left center;
  animation:vxc-grow-x .62s cubic-bezier(.22,1,.36,1) backwards;
}
/* MUST be `forwards`. The keyframe only declares a `to` frame, so with
   `backwards` the offset snaps back to the full path length the moment
   the animation ends — which hides the stroke completely. The JS also
   clears the inline dash on animationend so final visibility never
   depends on fill-mode alone. */
.vxc-anim path[data-vxc-draw]{animation:vxc-draw .95s cubic-bezier(.4,0,.2,1) forwards}
.vxc-anim [data-vxc-fade]{animation:vxc-fade .5s ease backwards}

/* ── 4. Cross-filter chip ─────────────────────────────────────────── */

.vxc-filterbar{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:0 0 12px;animation:vxc-rise .28s ease;
}
.vxc-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 7px 5px 11px;border-radius:999px;
  background:linear-gradient(135deg,rgba(21,184,160,.16),rgba(21,184,160,.05));
  border:1px solid rgba(21,184,160,.34);
  font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:600;
  color:var(--text);
}
.vxc-chip b{font-family:'IBM Plex Mono',monospace;color:var(--teal)}
.vxc-chip-x{
  width:17px;height:17px;border:none;border-radius:50%;cursor:pointer;
  background:rgba(21,184,160,.24);color:var(--teal);
  font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .14s,transform .14s;
}
.vxc-chip-x:hover{background:var(--teal);color:#fff;transform:rotate(90deg)}
.vxc-filterbar .vxc-hint{font-size:10.5px;color:var(--dim)}

/* ── 5. Tab micro-interactions ────────────────────────────────────── */

@keyframes vxt-in-fwd{from{opacity:0;transform:translate3d(22px,0,0)}to{opacity:1;transform:none}}
@keyframes vxt-in-back{from{opacity:0;transform:translate3d(-22px,0,0)}to{opacity:1;transform:none}}

#tabBody.vxt-fwd{animation:vxt-in-fwd .34s cubic-bezier(.22,1,.36,1)}
#tabBody.vxt-back{animation:vxt-in-back .34s cubic-bezier(.22,1,.36,1)}
/* The base .fade on inner panels would double up with the slide. */
#tabBody.vxt-fwd>.fade,#tabBody.vxt-back>.fade{animation:none}

/* Sliding indicator rail on the sidebar. One element, transform-animated,
   so switching views never triggers layout. */
.snav-list{position:relative}
.vxt-rail{
  position:absolute;left:0;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--teal),rgba(21,184,160,.45));
  box-shadow:0 0 10px var(--vxc-glow);
  transition:transform .34s cubic-bezier(.22,1,.36,1),height .34s cubic-bezier(.22,1,.36,1),opacity .2s;
  pointer-events:none;z-index:2;
}
/* The base rule draws its own ::before bar; suppress it while the rail is live. */
.snav-list.vxt-railed .snav.on::before{opacity:0}
.snav{transition:background .14s,color .14s,transform .16s cubic-bezier(.2,.7,.3,1)}
.snav:active{transform:scale(.982)}

/* Live count badge — sits beside the tier pill. */
.snav .vxt-live{
  flex:none;min-width:17px;height:17px;padding:0 5px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:700;
  background:var(--coral);color:#fff;
  box-shadow:0 0 0 0 rgba(229,99,77,.55);
  animation:vxt-pulse 2.6s ease-out infinite;
}
.snav .vxt-live.warn{background:var(--gold);color:#221803;box-shadow:0 0 0 0 rgba(214,167,65,.5);animation-name:vxt-pulse-warn}
.snav .vxt-live.info{background:var(--blue);color:#fff;box-shadow:none;animation:none}
@keyframes vxt-pulse{0%{box-shadow:0 0 0 0 rgba(229,99,77,.5)}70%{box-shadow:0 0 0 6px rgba(229,99,77,0)}100%{box-shadow:0 0 0 0 rgba(229,99,77,0)}}
@keyframes vxt-pulse-warn{0%{box-shadow:0 0 0 0 rgba(214,167,65,.5)}70%{box-shadow:0 0 0 6px rgba(214,167,65,0)}100%{box-shadow:0 0 0 0 rgba(214,167,65,0)}}
.side-collapsed .snav .vxt-live{
  position:absolute;top:4px;right:4px;min-width:14px;height:14px;font-size:8px;padding:0 3px;
}
/* Inner pill tabs (.vxtab) get the same treatment. */
.vxtab{position:relative;transition:background .16s,color .16s,transform .16s cubic-bezier(.2,.7,.3,1)}
.vxtab:active{transform:scale(.97)}
.vxtab .vxt-live{
  margin-left:6px;min-width:16px;height:16px;padding:0 5px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:700;
  background:var(--coral);color:#fff;vertical-align:1px;
}

/* ── 6. Executive commentary module ───────────────────────────────── */

.xc{
  margin-top:18px;border-radius:16px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--card-shadow);
  animation:vxc-rise .34s ease;
}
.xc-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,rgba(21,184,160,.07),transparent 62%);
}
.xc-title{flex:1;min-width:170px}
.xc-title h3{
  margin:0;font-family:'Space Grotesk',sans-serif;font-size:14.5px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:8px;
}
.xc-title .xc-sub{
  margin-top:3px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
}
.xc-spark{width:15px;height:15px;flex:none;stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Segmented Manual / AI switch */
.xc-seg{
  position:relative;display:inline-flex;padding:3px;border-radius:11px;
  background:var(--panel);border:1px solid var(--line);
}
.xc-seg-thumb{
  /* left:0 anchors the thumb to the padding box so positionThumb() can
     translate it by a plain offsetLeft delta instead of guessing at a
     static position. */
  position:absolute;top:3px;bottom:3px;left:0;border-radius:8px;
  background:var(--surface);box-shadow:var(--card-shadow-sm);
  border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.22,1,.36,1),width .3s cubic-bezier(.22,1,.36,1);
  z-index:0;
}
.xc-seg button{
  position:relative;z-index:1;border:none;background:transparent;cursor:pointer;
  padding:6px 13px;border-radius:8px;
  font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:600;
  color:var(--dim);transition:color .2s;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
}
.xc-seg button.on{color:var(--text)}
.xc-seg button:disabled{opacity:.45;cursor:not-allowed}

.xc-body{padding:16px}
.xc-pane{display:none}
.xc-pane.on{display:block;animation:vxc-rise .26s ease}

/* Manual editor */
.xc-tools{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:9px}
.xc-tool{
  min-width:28px;height:28px;padding:0 8px;border-radius:7px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);color:var(--slate);
  font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .14s,color .14s,border-color .14s,transform .14s;
}
.xc-tool:hover{background:var(--surface);color:var(--text);border-color:var(--teal);transform:translateY(-1px)}
.xc-tool:active{transform:translateY(0)}
.xc-tool.on{background:rgba(21,184,160,.14);border-color:rgba(21,184,160,.42);color:var(--teal)}
.xc-tool-i{font-style:italic}
.xc-tool-b{font-weight:800}
.xc-sep{width:1px;height:18px;background:var(--line);margin:0 4px}

.xc-ta{
  width:100%;min-height:172px;resize:vertical;box-sizing:border-box;
  padding:13px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel);color:var(--text);
  font-family:'Inter',system-ui,sans-serif;font-size:13px;line-height:1.65;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.xc-ta:focus{
  outline:none;background:var(--surface);border-color:rgba(21,184,160,.55);
  box-shadow:0 0 0 3px rgba(21,184,160,.13);
}
.xc-ta::placeholder{color:var(--dim)}

/* Template chips */
.xc-tpl{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.xc-tpl-l{
  font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin-right:2px;
}
.xc-tpl-b{
  padding:5px 11px;border-radius:999px;cursor:pointer;
  border:1px dashed var(--line);background:transparent;color:var(--slate);
  font-family:'Inter',sans-serif;font-size:11px;font-weight:500;
  transition:all .16s cubic-bezier(.2,.7,.3,1);
}
.xc-tpl-b:hover{
  border-style:solid;border-color:var(--teal);color:var(--teal);
  background:rgba(21,184,160,.08);transform:translateY(-1px);
}

/* Rendered markdown */
.xc-md{
  padding:14px 16px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel);color:var(--text);
  font-family:'Inter',system-ui,sans-serif;font-size:13px;line-height:1.68;
}
.xc-md h1,.xc-md h2,.xc-md h3{
  font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--text);
  margin:15px 0 7px;line-height:1.3;
}
.xc-md h1{font-size:17px}.xc-md h2{font-size:15px}.xc-md h3{font-size:13.5px}
.xc-md h1:first-child,.xc-md h2:first-child,.xc-md h3:first-child,.xc-md p:first-child{margin-top:0}
.xc-md p{margin:0 0 10px}
.xc-md ul,.xc-md ol{margin:0 0 10px;padding-left:20px}
.xc-md li{margin-bottom:4px}
.xc-md strong{font-weight:700;color:var(--text)}
.xc-md em{font-style:italic}
.xc-md code{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  background:rgba(21,184,160,.12);color:var(--teal);padding:1px 5px;border-radius:4px;
}
.xc-md blockquote{
  margin:0 0 10px;padding:7px 13px;border-left:3px solid var(--teal);
  background:rgba(21,184,160,.06);border-radius:0 8px 8px 0;color:var(--slate);
}
.xc-md hr{border:none;border-top:1px solid var(--line);margin:14px 0}
.xc-md a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.xc-md .xc-ref{
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  background:rgba(79,139,214,.16);color:var(--blue);
  padding:1px 5px;border-radius:4px;vertical-align:1px;
}

/* Footer bar */
.xc-foot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 16px;border-top:1px solid var(--line);background:var(--panel);
}
.xc-status{flex:1;min-width:150px;font-size:10.5px;color:var(--dim);display:flex;align-items:center;gap:6px}
.xc-dot{width:6px;height:6px;border-radius:50%;background:var(--dim);flex:none}
.xc-dot.saved{background:var(--green)}
.xc-dot.dirty{background:var(--gold);animation:pulse 1.6s ease-in-out infinite}
.xc-dot.err{background:var(--coral)}

.xc-btn{
  padding:7px 14px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--text);
  font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:7px;
  transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;
}
.xc-btn:hover:not(:disabled){border-color:var(--teal);transform:translateY(-1px);box-shadow:var(--card-shadow-sm)}
.xc-btn:active:not(:disabled){transform:translateY(0)}
.xc-btn:disabled{opacity:.5;cursor:not-allowed}
.xc-btn.primary{
  background:linear-gradient(135deg,var(--teal),#0d9482);
  border-color:transparent;color:#fff;
  box-shadow:0 3px 12px rgba(21,184,160,.3);
}
.xc-btn.primary:hover:not(:disabled){box-shadow:0 6px 20px rgba(21,184,160,.42)}
.xc-btn.danger:hover:not(:disabled){border-color:var(--coral);color:var(--coral)}

/* Shimmering "Generate AI Insight" while a request is in flight */
.xc-btn.shimmer{
  position:relative;overflow:hidden;pointer-events:none;
  background:linear-gradient(135deg,var(--teal),#0d9482);border-color:transparent;color:#fff;
}
.xc-btn.shimmer::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-100%);
  animation:xc-shine 1.25s linear infinite;
}
@keyframes xc-shine{to{transform:translateX(100%)}}

/* Skeleton shown in the AI pane while generating */
.xc-skel{padding:4px 0}
.xc-skel-l{
  height:11px;border-radius:6px;margin-bottom:10px;
  background:linear-gradient(90deg,var(--line) 8%,var(--panel) 20%,var(--line) 33%);
  background-size:1000px 100%;
  animation:xc-skelmove 1.7s linear infinite;
}
:root[data-theme="dark"] .xc-skel-l{
  background:linear-gradient(90deg,#1b2d42 8%,#26384f 20%,#1b2d42 33%);
  background-size:1000px 100%;
}
@keyframes xc-skelmove{0%{background-position:-560px 0}100%{background-position:560px 0}}

/* Typewriter caret on the streaming reveal */
.xc-caret{
  display:inline-block;width:2px;height:1em;vertical-align:-2px;margin-left:1px;
  background:var(--teal);animation:xc-blink 1s step-end infinite;
}
@keyframes xc-blink{0%,100%{opacity:1}50%{opacity:0}}

/* Empty / error / locked states */
.xc-note{
  padding:13px 15px;border-radius:11px;font-size:12px;line-height:1.6;
  border:1px solid var(--line);background:var(--panel);color:var(--slate);
}
.xc-note.err{border-color:rgba(229,99,77,.42);background:rgba(229,99,77,.08);color:var(--coral)}
.xc-note.warn{border-color:rgba(214,167,65,.42);background:rgba(214,167,65,.09);color:var(--text)}
.xc-note b{color:var(--text)}
.xc-note ul{margin:7px 0 0;padding-left:18px}
.xc-note li{margin-bottom:3px}

.xc-cost{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  padding:2px 7px;border-radius:999px;
  background:rgba(214,167,65,.16);color:var(--gold);font-weight:600;
}

@media(max-width:640px){
  .xc-head{padding:12px}
  .xc-body{padding:12px}
  .xc-seg{width:100%}
  .xc-seg button{flex:1;justify-content:center}
}

/* Commentary must survive the PDF export — it is the point of the page. */
@media print{
  .xc{box-shadow:none;border-color:#E4E9EF;break-inside:avoid}
  .xc-head{background:none}
  .xc-seg,.xc-tools,.xc-tpl,.xc-foot,.xc-ta{display:none!important}
  .xc-pane{display:none!important}
  .xc-pane.xc-print{display:block!important}
  .xc-md{border:none;background:none;padding:0}
  .vxc-filterbar,.vxc-tip{display:none!important}
}

/* ── Exec commentary: section-by-section generation (added 2026-09-21) ── */
.xc-sechead{
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  margin:18px 0 8px;display:flex;align-items:center;gap:8px;
}
.xc-muted{font-weight:500;letter-spacing:0;text-transform:none;color:var(--dim);opacity:.8}
.xc-sections{margin-bottom:6px}
.xc-sec{
  border:1px solid var(--line);border-radius:11px;background:var(--panel);
  padding:11px 13px;margin-bottom:8px;transition:border-color .15s,background .15s;
}
.xc-sec.has{background:var(--surface)}
.xc-sec-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.xc-check{display:flex;align-items:center;gap:8px;cursor:pointer;flex:1;min-width:150px}
.xc-check input{width:15px;height:15px;accent-color:var(--teal);cursor:pointer;flex:none}
.xc-check input:disabled{cursor:not-allowed;opacity:.5}
.xc-check span{font-size:12.5px;font-weight:600;color:var(--text)}
.xc-pill{
  font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--dim);flex:none;
}
.xc-pill.ok{color:var(--green);border-color:color-mix(in srgb,var(--green) 40%,transparent)}
.xc-pill.bad{color:var(--coral);border-color:color-mix(in srgb,var(--coral) 40%,transparent)}
.xc-pill.run{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 45%,transparent);animation:pulse 1.5s ease-in-out infinite}
.xc-mini{
  font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:7px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--dim);flex:none;
}
.xc-mini:hover{color:var(--text);border-color:var(--teal)}
.xc-sec-body{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px}
.xc-sec-body:empty{display:none}
.xc-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
@media(max-width:700px){
  .xc-sec-h{gap:7px}
  .xc-check{min-width:0;flex-basis:100%}
  .xc-actions .xc-btn{flex:1;justify-content:center}
}

/* ── Landing: neural ledger panel (added 2026-09-21) ── */
.vxn{display:flex;flex-direction:column;gap:0}
.vxn-stage{position:relative;padding:6px 2px 2px}
.vxn-svg{display:block;width:100%;height:auto;color:var(--teal);overflow:visible}

/* edges */
.vxn-edge{fill:none;stroke:var(--line);stroke-width:1;opacity:.55;transition:stroke .3s,opacity .3s,stroke-width .3s}
.vxn-edge.on{
  stroke:url(#vxn-edge);stroke-width:1.6;opacity:1;
  stroke-dasharray:5 12;animation:vxn-flow 1.5s linear infinite;
  animation-delay:calc(var(--i,0) * -.11s);
}
@keyframes vxn-flow{to{stroke-dashoffset:-34}}

/* nodes */
.vxn-node circle{fill:var(--surface);stroke:var(--line);stroke-width:1.6;transition:stroke .3s,fill .3s}
.vxn-node.on circle{stroke:var(--teal);fill:color-mix(in srgb,var(--teal) 16%,var(--surface))}
.vxn-lbl{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;fill:var(--text);transition:fill .3s}
.vxn-val{font-family:'IBM Plex Mono',monospace;font-size:9.5px;fill:var(--dim);transition:fill .25s}
.vxn-node:not(.on) .vxn-lbl{fill:var(--dim)}
.vxn-val.tick{animation:vxn-tick .7s ease-out}
@keyframes vxn-tick{0%{fill:var(--teal)}100%{fill:var(--dim)}}

.vxn-h{fill:var(--surface);stroke:var(--line);stroke-width:1.4;transition:stroke .3s,fill .3s}
.vxn-h.on{
  stroke:var(--teal);fill:color-mix(in srgb,var(--teal) 22%,var(--surface));
  animation:vxn-pulse 2.4s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .18s);
}
@keyframes vxn-pulse{50%{r:6}}

/* outputs */
.vxn-out{cursor:pointer}
.vxn-out circle{fill:var(--surface);stroke:var(--line);stroke-width:2;transition:stroke .3s,fill .3s}
.vxn-out.on circle{stroke:var(--teal);fill:color-mix(in srgb,var(--teal) 20%,var(--surface))}
.vxn-out.warn.on circle{stroke:var(--gold);fill:color-mix(in srgb,var(--gold) 20%,var(--surface))}
.vxn-olbl{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;fill:var(--text)}
.vxn-oval{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;fill:var(--dim);transition:fill .3s}
.vxn-out.on .vxn-oval{fill:var(--teal)}
.vxn-out.warn.on .vxn-oval{fill:var(--gold)}
.vxn-out:not(.on) .vxn-olbl{fill:var(--dim)}
.vxn-out:focus{outline:none}
.vxn-out:focus-visible circle{stroke:var(--teal);stroke-width:3}

/* readout */
.vxn-read{
  display:flex;flex-direction:column;gap:2px;margin-top:6px;padding:11px 13px;
  border:1px solid var(--line);border-radius:11px;background:var(--panel);
}
.vxn-read b{font-family:'Space Grotesk',sans-serif;font-size:12.5px;color:var(--text)}
.vxn-read span{font-size:11.5px;line-height:1.5;color:var(--dim)}
.vxn-hint{margin-top:8px;text-align:center;font-size:10px;letter-spacing:.06em;color:var(--dim);opacity:.75}

@media(max-width:560px){
  .vxn-lbl,.vxn-olbl{font-size:12px}
  .vxn-val,.vxn-oval{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .vxn-edge.on,.vxn-h.on,.vxn-val.tick{animation:none}
}