/* ============================================================================
   vpa.css  —  MONARCH · Institutional VPA module
   Loaded like the other module sheets (orion.css, tpo.css …) via <link>.
   EVERY rule is scoped under .vpa-inst so nothing leaks into the rest of the
   terminal. The renderer lives in vpa.js (window.VPA) and fills #vpa-content,
   which carries the .vpa-inst class.
   ============================================================================ */

.vpa-inst{
  --vpa-bg:        var(--bg-primary, #050505);
  --vpa-panel:     #0c0c0c;
  --vpa-panel-2:   var(--bg-secondary, #121212);
  --vpa-gold:      var(--accent-primary, #D4AF37);
  --vpa-gold-hi:   #FFD700;
  --vpa-white:     #FFFFFF;
  --vpa-cyan:      #00F3FF;
  --vpa-amber:     #FF9100;
  --vpa-crimson:   #FF3B47;
  --vpa-crimson-dp:#B3122B;
  --vpa-hair:      rgba(212,175,55,0.20);
  --vpa-hair-soft: rgba(255,255,255,0.07);
  --vpa-mono:      'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
  --vpa-display:   'Space Grotesk','Inter',system-ui,sans-serif;

  color: var(--vpa-white);
  font-family: var(--vpa-display);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
}
.vpa-inst *{ box-sizing:border-box; }
.vpa-inst :focus-visible{ outline:2px solid var(--vpa-cyan); outline-offset:2px; }

/* ── eyebrow / labels ─────────────────────────────────────────────────────── */
.vpa-inst .vpa-eyebrow{
  font-family:var(--vpa-mono); font-size:10px; font-weight:600;
  letter-spacing:0.32em; text-transform:uppercase; color:var(--vpa-cyan);
}
.vpa-inst .vpa-label{
  font-family:var(--vpa-mono); font-size:10px; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--vpa-gold);
}

/* ── command bar ──────────────────────────────────────────────────────────── */
.vpa-inst .vpa-commandbar{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:18px; padding:20px 22px;
  background:linear-gradient(180deg, rgba(212,175,55,0.06), rgba(5,5,5,0) 90%);
  border:1px solid var(--vpa-hair); border-radius:6px;
  position:relative; overflow:hidden;
}
.vpa-inst .vpa-commandbar::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--vpa-gold-hi),var(--vpa-gold) 60%, transparent);
}
.vpa-inst .vpa-id{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.vpa-inst .vpa-ticker{
  font-family:var(--vpa-display); font-weight:700; font-size:42px; line-height:0.9;
  letter-spacing:0.02em; color:var(--vpa-white);
}
.vpa-inst .vpa-price{
  font-family:var(--vpa-mono); font-weight:600; font-size:22px; color:var(--vpa-gold-hi);
}
.vpa-inst .vpa-date{ font-family:var(--vpa-mono); font-size:11px; color:var(--vpa-gold); letter-spacing:0.15em; }
.vpa-inst .vpa-badge{
  font-family:var(--vpa-mono); font-size:10px; font-weight:600; letter-spacing:0.16em;
  padding:5px 10px; border-radius:3px; text-transform:uppercase; white-space:nowrap;
}
.vpa-inst .vpa-badge.core{  color:var(--vpa-gold);  border:1px solid var(--vpa-hair); background:rgba(212,175,55,0.05); }
.vpa-inst .vpa-badge.micro{ color:var(--vpa-cyan);  border:1px solid rgba(0,243,255,0.35); background:rgba(0,243,255,0.06); }

.vpa-inst .vpa-statline{ display:flex; gap:26px; flex-wrap:wrap; align-items:flex-end; }
.vpa-inst .vpa-stat{ display:flex; flex-direction:column; gap:5px; }
.vpa-inst .vpa-stat .v{ font-family:var(--vpa-mono); font-size:15px; font-weight:600; color:var(--vpa-white); }
.vpa-inst .vpa-regime-chip{
  font-family:var(--vpa-mono); font-size:12px; font-weight:600; letter-spacing:0.12em;
  padding:6px 12px; border-radius:3px; text-transform:uppercase; border:1px solid currentColor;
}

/* ── layout grid ──────────────────────────────────────────────────────────── */
.vpa-inst .vpa-wrap{ display:flex; flex-direction:column; gap:14px; padding:0; }
.vpa-inst .vpa-row{ display:grid; gap:14px; }
.vpa-inst .vpa-row.split{ grid-template-columns: 1.15fr 0.85fr; }
.vpa-inst .vpa-row.halves{ grid-template-columns: 1fr 1fr; }

.vpa-inst .vpa-panel{
  background:linear-gradient(180deg,var(--vpa-panel),#070707);
  border:1px solid var(--vpa-hair-soft); border-radius:6px; padding:18px 20px;
}
.vpa-inst .vpa-panel-h{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--vpa-hair-soft);
}
.vpa-inst .vpa-panel-h h3{
  margin:0; font-family:var(--vpa-display); font-weight:600; font-size:15px;
  letter-spacing:0.04em; color:var(--vpa-white);
}

/* ── verdict hero ─────────────────────────────────────────────────────────── */
.vpa-inst .vpa-verdict{ display:flex; flex-direction:column; gap:16px; }
.vpa-inst .vpa-verdict-top{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.vpa-inst .vpa-gauge{ flex:0 0 auto; }
.vpa-inst .vpa-verdict-meta{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.vpa-inst .vpa-verdict-word{
  font-family:var(--vpa-display); font-weight:700; font-size:34px; line-height:1; letter-spacing:0.02em;
}
.vpa-inst .vpa-verdict-sub{ font-family:var(--vpa-mono); font-size:12px; color:var(--vpa-gold); letter-spacing:0.08em; }
.vpa-inst .vpa-thesis{
  font-size:13.5px; line-height:1.55; color:var(--vpa-white);
  border-left:2px solid var(--vpa-gold); padding-left:14px;
}
.vpa-inst .vpa-thesis em{ color:var(--vpa-gold-hi); font-style:normal; font-weight:600; }

/* ── confluence matrix ────────────────────────────────────────────────────── */
.vpa-inst .vpa-conf-row{
  display:grid; grid-template-columns: 168px 1fr 54px; align-items:center;
  gap:12px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,0.04);
}
.vpa-inst .vpa-conf-row:last-child{ border-bottom:none; }
.vpa-inst .vpa-conf-name{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.vpa-inst .vpa-conf-name .t{ font-size:12px; color:var(--vpa-white); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vpa-inst .vpa-conf-name .w{ font-family:var(--vpa-mono); font-size:9px; letter-spacing:0.12em; color:var(--vpa-gold); }
.vpa-inst .vpa-conf-track{
  position:relative; height:16px; border-radius:2px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 100%);
}
.vpa-inst .vpa-conf-track::before{
  content:""; position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--vpa-hair);
}
.vpa-inst .vpa-conf-fill{ position:absolute; top:2px; bottom:2px; border-radius:2px; }
.vpa-inst .vpa-conf-val{ font-family:var(--vpa-mono); font-size:12px; font-weight:600; text-align:right; }

/* ── volume profile (signature) ───────────────────────────────────────────── */
.vpa-inst .vpa-profile-wrap{ display:flex; flex-direction:column; gap:10px; }
.vpa-inst .vpa-profile-legend{
  display:flex; gap:16px; flex-wrap:wrap; font-family:var(--vpa-mono);
  font-size:10px; letter-spacing:0.08em; color:var(--vpa-gold);
}
.vpa-inst .vpa-profile-legend i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
.vpa-inst .vpa-profile svg{ width:100%; height:auto; display:block; }

/* ── regime timeline ──────────────────────────────────────────────────────── */
.vpa-inst .vpa-timeline{ display:flex; gap:2px; height:34px; align-items:stretch; }
.vpa-inst .vpa-tl-cell{ flex:1 1 0; min-width:0; border-radius:1px; transition:transform .12s ease; cursor:default; }
.vpa-inst .vpa-tl-cell:hover{ transform:scaleY(1.18); }
.vpa-inst .vpa-tl-legend{ display:flex; gap:14px 18px; flex-wrap:wrap; margin-top:12px; }
.vpa-inst .vpa-tl-key{ display:flex; align-items:center; gap:6px; font-family:var(--vpa-mono); font-size:10px; letter-spacing:0.08em; color:var(--vpa-white); }
.vpa-inst .vpa-tl-key i{ width:11px; height:11px; border-radius:2px; }

/* ── signal cards ─────────────────────────────────────────────────────────── */
.vpa-inst .vpa-signals{ display:flex; flex-direction:column; gap:10px; }
.vpa-inst .vpa-signal{
  border:1px solid var(--vpa-hair-soft); border-left:3px solid var(--vpa-gold);
  border-radius:4px; padding:11px 13px; background:rgba(255,255,255,0.015);
}
.vpa-inst .vpa-signal.high{ border-left-color:var(--vpa-crimson); }
.vpa-inst .vpa-signal-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:5px; }
.vpa-inst .vpa-signal-name{ font-family:var(--vpa-mono); font-weight:600; font-size:12px; letter-spacing:0.08em; }
.vpa-inst .vpa-signal-meta{ font-family:var(--vpa-mono); font-size:10px; color:var(--vpa-gold); letter-spacing:0.06em; }
.vpa-inst .vpa-signal-detail{ font-size:12px; color:var(--vpa-white); margin-bottom:5px; line-height:1.45; }
.vpa-inst .vpa-signal-action{ font-family:var(--vpa-mono); font-size:11px; color:var(--vpa-gold-hi); letter-spacing:0.04em; }
.vpa-inst .vpa-empty{ font-family:var(--vpa-mono); font-size:11px; color:var(--vpa-gold); letter-spacing:0.1em; padding:18px 0; text-align:center; }

/* ── edge table ───────────────────────────────────────────────────────────── */
.vpa-inst .vpa-edge-caveat{
  font-family:var(--vpa-mono); font-size:9.5px; letter-spacing:0.1em; color:var(--vpa-amber);
  text-transform:uppercase; margin-bottom:10px;
}
.vpa-inst table.vpa-edge{ width:100%; border-collapse:collapse; font-family:var(--vpa-mono); }
.vpa-inst .vpa-edge th{
  font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--vpa-gold);
  text-align:right; padding:7px 8px; border-bottom:1px solid var(--vpa-hair-soft); font-weight:600;
}
.vpa-inst .vpa-edge th:first-child, .vpa-inst .vpa-edge td:first-child{ text-align:left; }
.vpa-inst .vpa-edge td{ font-size:12px; padding:8px; border-bottom:1px solid rgba(255,255,255,0.04); text-align:right; color:var(--vpa-white); }
.vpa-inst .vpa-edge td.win-hi{ color:var(--vpa-gold-hi); }
.vpa-inst .vpa-edge td.win-lo{ color:var(--vpa-crimson); }

/* ── execution advisory ───────────────────────────────────────────────────── */
.vpa-inst .vpa-adv{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.vpa-inst .vpa-adv-col h5{
  margin:0 0 8px; font-family:var(--vpa-mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
}
.vpa-inst .vpa-adv-col.alpha h5{ color:var(--vpa-gold-hi); }
.vpa-inst .vpa-adv-col.risk  h5{ color:var(--vpa-cyan); }
.vpa-inst .vpa-adv-col p{ margin:0; font-size:12.5px; line-height:1.55; color:var(--vpa-white); }
.vpa-inst .vpa-note{ display:block; margin-top:8px; font-size:11px; color:var(--vpa-amber); line-height:1.5; }

/* ── state metric grid ────────────────────────────────────────────────────── */
.vpa-inst .vpa-metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:1px; background:var(--vpa-hair-soft); border:1px solid var(--vpa-hair-soft); border-radius:5px; overflow:hidden; }
.vpa-inst .vpa-metric{ background:var(--vpa-panel); padding:12px 13px; }
.vpa-inst .vpa-metric .k{ font-family:var(--vpa-mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--vpa-gold); }
.vpa-inst .vpa-metric .v{ font-family:var(--vpa-mono); font-size:17px; font-weight:600; color:var(--vpa-white); margin-top:5px; }

/* ── micro strip ──────────────────────────────────────────────────────────── */
.vpa-inst .vpa-micro{ display:flex; gap:26px; flex-wrap:wrap; align-items:center; }
.vpa-inst .vpa-micro .m{ display:flex; flex-direction:column; gap:4px; }
.vpa-inst .vpa-micro .k{ font-family:var(--vpa-mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--vpa-cyan); }
.vpa-inst .vpa-micro .v{ font-family:var(--vpa-mono); font-size:15px; font-weight:600; color:var(--vpa-white); }
.vpa-inst .vpa-micro .sub{ font-family:var(--vpa-mono); font-size:9px; color:var(--vpa-gold); letter-spacing:0.08em; }
.vpa-inst .vpa-micro-note{ font-family:var(--vpa-mono); font-size:9.5px; color:var(--vpa-gold); letter-spacing:0.06em; margin-left:auto; max-width:240px; line-height:1.5; }

.vpa-inst .vpa-foot{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:var(--vpa-mono); font-size:9.5px; letter-spacing:0.08em; color:var(--vpa-gold); padding-top:6px;
}
.vpa-inst .vpa-foot .risk{ color:var(--vpa-crimson); }

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px){
  .vpa-inst .vpa-row.split, .vpa-inst .vpa-row.halves{ grid-template-columns:1fr; }
  .vpa-inst .vpa-adv{ grid-template-columns:1fr; }
  .vpa-inst .vpa-ticker{ font-size:34px; }
  .vpa-inst .vpa-conf-row{ grid-template-columns:130px 1fr 46px; }
}
@media (prefers-reduced-motion: reduce){
  .vpa-inst .vpa-tl-cell{ transition:none; }
}