/* ============================================================
   VERIFIER HUB (§10) — LIGHT, app-faithful product panel on the navy story band.
   Dark section ≠ dark panel: this panel is WHITE and reuses the light node-card
   grammar (.pv-node / .pv-key). Built ONLY from tokens.css; enqueue AFTER
   components.css. Scoped under .vh-*. No .jn-*, no --node-*-ondark, no --s-panel*,
   no --glow-* (those retired dark tokens are banned here — DESIGN_LANGUAGE §1).
   Motion: narrative tier, play-once (verifier-hub.js). Default markup = END-STATE,
   so no-JS and reduced-motion render the finished frame.
   ============================================================ */

.vh-wrap{max-width:var(--container);margin-inline:auto;display:flex;flex-direction:column;
  align-items:center;gap:var(--sp-6);text-align:left}

/* ---- Light browser panel shell — PROMOTED to components.css ----
   .vh-panel / .vh-browser / .vh-dots / .vh-dot / .vh-url / .vh-appbar / .vh-sys are shared
   product-panel grammar (front page, /verifiers/, /platform/, /ai/), so they live with the
   components. Everything below is still widget-specific and stays here. */
.vh-selects{display:inline-flex;gap:var(--sp-2);flex:none}
.vh-select{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--t-caption);
  font-weight:600;color:var(--c-body);background:var(--s-sunken);border:1px solid var(--c-border);
  border-radius:var(--r-sm);padding:var(--sp-1) var(--sp-2)}
.vh-caret{color:var(--c-muted)}
.vh-tabs{display:inline-flex;gap:var(--sp-4);margin-left:auto;flex-wrap:wrap}
.vh-tab{position:relative;font-size:var(--t-caption);font-weight:600;color:var(--c-muted);
  padding-bottom:var(--sp-1);white-space:nowrap}
.vh-tab.is-on{color:var(--c-heading);font-weight:800}
.vh-tab.is-on::after{content:"";position:absolute;left:0;right:0;bottom:0;
  border-bottom:2px solid var(--brand-blue);border-radius:var(--r-full)}
.vh-appmeta{display:inline-flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}

/* ---- Body: Explore canvas + Findings rail ---- */
.vh-main{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--sp-6);
  padding:var(--sp-6);align-items:start}

/* 3. Explore canvas */
.vh-canvaswrap{min-width:0}
.vh-canvas{position:relative;display:grid;grid-template-columns:1fr auto minmax(0,1.1fr) auto 1fr;
  align-items:center;gap:var(--sp-3);
  background:radial-gradient(var(--c-border) 1px,transparent 1.5px) 0 0/var(--sp-6) var(--sp-6);
  background-color:var(--s-page);border:1px solid var(--c-border);border-radius:var(--r-md);
  padding:var(--sp-4)}
.vh-inputs,.vh-proc{display:grid;gap:var(--sp-3);min-width:0}
.vh-canvas .pv-node{position:relative;background:var(--s-page)}
/* selected node — focus ring in the action colour (ring spread = --sp-1) */
.vh-canvas .pv-node.is-selected{box-shadow:0 0 0 var(--sp-1) var(--c-action)}
.vh-pin{position:absolute;top:calc(-1*var(--sp-1));right:calc(-1*var(--sp-1));
  width:var(--sp-2);height:var(--sp-2);border-radius:var(--r-full);background:var(--c-action);
  border:1px solid var(--s-page)}
/* thin connectors (hairline, left→right) */
.vh-conn{align-self:center;justify-self:stretch;min-width:var(--sp-4);
  border-top:1px solid var(--c-border-strong)}
/* minimap hint (decorative) */
.vh-minimap{position:absolute;right:var(--sp-2);bottom:var(--sp-2);display:inline-flex;gap:var(--sp-1);
  align-items:center;background:var(--s-page);border:1px solid var(--c-border);border-radius:var(--r-sm);
  padding:var(--sp-1) var(--sp-2);box-shadow:var(--sh-sm)}
.vh-minimap i{width:var(--sp-1);height:var(--sp-1);border-radius:var(--r-full);background:var(--c-border-strong)}

/* legend (reuses .pv-legend/.pv-key) — with Node-type / Data-state leads */
.vh-legend{align-items:center}
.vh-legend-lead{font-size:var(--t-caption);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--c-heading)}

/* 4-5. Findings rail */
.vh-rail{min-width:0;border:1px solid var(--c-border);border-radius:var(--r-md);
  background:var(--s-alt);padding:var(--sp-4)}
.vh-railtabs{display:flex;gap:var(--sp-4);border-bottom:1px solid var(--c-border);margin-bottom:var(--sp-3)}
.vh-railtab{position:relative;font-size:var(--t-caption);font-weight:600;color:var(--c-muted);
  padding-bottom:var(--sp-2)}
.vh-railtab.is-on{color:var(--c-heading);font-weight:800}
.vh-railtab.is-on::after{content:"";position:absolute;left:0;right:0;bottom:calc(-1*var(--sp-1));
  border-bottom:2px solid var(--brand-blue);border-radius:var(--r-full)}
.vh-count{font-size:var(--t-caption);color:var(--c-muted);margin-bottom:var(--sp-3)}
.vh-count b{color:var(--c-heading);font-weight:800}

.vh-finding{position:relative;background:var(--s-page);border:1px solid var(--c-border);
  border-left:4px solid var(--node-incomplete);border-radius:var(--r-sm);padding:var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-3)}
/* leader line: thin line + dot on the card's left, pointing back to the pinned node */
.vh-leader{position:absolute;top:calc(-1*var(--sp-3));left:var(--sp-6);width:var(--sp-8);
  border-top:1px solid var(--c-action)}
.vh-leader::before{content:"";position:absolute;left:calc(-1*var(--sp-1));top:calc(-1*var(--sp-1));
  width:var(--sp-2);height:var(--sp-2);border-radius:var(--r-full);background:var(--c-action)}
.vh-crumb{font-size:var(--t-caption);color:var(--c-muted);line-height:var(--lh-body)}
.vh-comment{font-size:var(--t-small);color:var(--c-body);line-height:var(--lh-body)}
.vh-findfoot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.vh-author{font-size:var(--t-caption);font-weight:700;color:var(--c-heading)}
.vh-reply{font-size:var(--t-caption);color:var(--c-muted);background:var(--s-sunken);
  border:1px solid var(--c-border);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3)}

/* 6. Lifecycle rail — PROMOTED to components.css (shared grammar: /verifiers/,
   /platform/, /solutions/45v/, /solutions/epd/ and the front page all render it).
   The .vh-panel state overrides for it stay below, since they belong to this widget. */

/* illustrative label (inside panel) */
.vh-illus{padding:0 var(--sp-6) var(--sp-4);font-size:var(--t-caption);color:var(--c-muted);text-align:center}

/* 7. Verification partner (on the navy band, below the panel) */
/* Partner marks — two SEPARATE columns (BV verification partner · Kabyax implementation partner),
   balanced on the navy band. Marks optically normalized to --logo-h in equal white chips (DL §6). */
/* Partners are their OWN labelled block, clearly separated from the product panel
   above (they were reading as the widget's footer). Hairline + label + spacing. */
.vh-partners-block{margin-top:var(--sp-12);padding-top:var(--sp-8);border-top:1px solid var(--c-border-on-dark)}
.vh-partners-label{margin:0 0 var(--sp-6);text-align:center;font-size:var(--t-caption);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--c-eyebrow-dark)}
.vh-partners{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:var(--sp-6) var(--sp-8)}
.vh-partner{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center;flex:1 1 0;min-width:0;max-width:var(--measure)}
.vh-partner .mark-chip{padding:var(--sp-3)}
.vh-partner .mark-chip img{height:var(--sp-16);width:auto} /* featured trust marks in their own chips — larger than marquee --logo-h */
.vh-partner a.mark-chip{transition:box-shadow var(--dur-2) var(--ease)}
.vh-partner a.mark-chip:hover{box-shadow:var(--sh-md)}
/* Focus ring on the navy band was patched here locally; superseded by the global
   dark-surface rule in components.css (--c-focus-on-dark), ratified DESIGN_LANGUAGE §8.6. */
.vh-cap{font-size:var(--t-small);color:var(--c-on-dark-muted)}
@media (max-width:560px){ .vh-partners{flex-direction:column;align-items:center} .vh-partner{max-width:100%} }

/* ============================================================
   MOTION — play-once (verifier-hub.js adds .is-armed then .is-playing).
   Default (no class) = END-STATE. Armed = pre-play hidden. Playing = staged
   reveal. Sequence: panel settle → nodes cascade → selected ring → finding +
   leader + count → current lifecycle pill emphasises.
   ============================================================ */
.vh-panel .pv-node,.vh-panel .vh-conn,.vh-panel .vh-finding,.vh-panel .vh-leader,
.vh-panel .vh-pin,.vh-panel .vh-minimap{
  transition:opacity var(--dur-4) var(--ease),transform var(--dur-4) var(--ease)}
.vh-panel .vh-canvas .pv-node.is-selected{
  transition:opacity var(--dur-4) var(--ease),transform var(--dur-4) var(--ease),box-shadow var(--dur-5) var(--ease)}

/* armed: hidden pre-play */
.vh-panel.is-armed .vh-main{opacity:0;transform:translateY(var(--sp-3))}
.vh-panel.is-armed .pv-node{opacity:0;transform:translateY(var(--sp-2))}
.vh-panel.is-armed .vh-conn,.vh-panel.is-armed .vh-minimap,
.vh-panel.is-armed .vh-finding,.vh-panel.is-armed .vh-leader,.vh-panel.is-armed .vh-pin{opacity:0}
.vh-panel.is-armed .vh-canvas .pv-node.is-selected{box-shadow:none}
.vh-panel.is-armed .vh-life.is-current{background:var(--s-sunken);color:var(--c-muted);
  border-color:var(--c-border)} /* weight held at 800 (see base rule) — no reflow */
.vh-panel.is-armed .vh-main{transition:opacity var(--dur-5) var(--ease),transform var(--dur-5) var(--ease)}

/* playing: staged reveal (delays are multiples of --stagger) */
.vh-panel.is-playing .vh-main{opacity:1;transform:none}
.vh-panel.is-playing .pv-node{opacity:1;transform:none}
.vh-panel.is-playing .vh-s1{transition-delay:calc(var(--stagger)*1)}
.vh-panel.is-playing .vh-s2{transition-delay:calc(var(--stagger)*2)}
.vh-panel.is-playing .vh-s3{transition-delay:calc(var(--stagger)*3)}
.vh-panel.is-playing .vh-s4{transition-delay:calc(var(--stagger)*4)}
.vh-panel.is-playing .vh-s5{transition-delay:calc(var(--stagger)*5)}
.vh-panel.is-playing .vh-conn,.vh-panel.is-playing .vh-minimap{opacity:1;transition-delay:calc(var(--stagger)*3)}
.vh-panel.is-playing .vh-canvas .pv-node.is-selected{box-shadow:0 0 0 var(--sp-1) var(--c-action);transition-delay:calc(var(--stagger)*6)}
.vh-panel.is-playing .vh-pin{opacity:1;transition-delay:calc(var(--stagger)*7)}
.vh-panel.is-playing .vh-finding{opacity:1;transition-delay:calc(var(--stagger)*7)}
.vh-panel.is-playing .vh-leader{opacity:1;transition-delay:calc(var(--stagger)*8)}
.vh-panel.is-playing .vh-life.is-current{background:var(--s-bluelt);color:var(--c-link);
  border-color:var(--c-border-accent);transition-delay:calc(var(--stagger)*9)}

/* §4 round-advance (opt-in, [data-vh-rounds]) — the pinned node and the finding
   card flip colour smoothly when the round advances (verifier-hub.js setRound).
   The default DOM is the Round-2 / resolved end-state, so no-JS + reduced-motion
   show the finished frame; JS rewinds to Round-1 open then plays forward. */
.vh-panel[data-vh-rounds] .vh-s2{
  transition:border-color var(--dur-4) var(--ease),box-shadow var(--dur-5) var(--ease)}
.vh-panel[data-vh-rounds] .vh-finding{transition:border-color var(--dur-4) var(--ease)}
.vh-finding.is-resolved{border-left-color:var(--node-reviewed)}

/* reduced motion: JS never arms, so the default END-STATE shows. Belt-and-braces:
   if armed, force everything visible (no dependency on a play step). */
@media (prefers-reduced-motion:reduce){
  .vh-panel.is-armed .vh-main,.vh-panel.is-armed .pv-node,.vh-panel.is-armed .vh-conn,
  .vh-panel.is-armed .vh-minimap,.vh-panel.is-armed .vh-finding,.vh-panel.is-armed .vh-leader,
  .vh-panel.is-armed .vh-pin{opacity:1;transform:none}
  .vh-panel.is-armed .vh-canvas .pv-node.is-selected{box-shadow:0 0 0 var(--sp-1) var(--c-action)}
  .vh-panel.is-armed .vh-life.is-current{background:var(--s-bluelt);color:var(--c-link);
    border-color:var(--c-border-accent)}
}

/* ============================================================
   RESPONSIVE — container queries on the panel (DESIGN_LANGUAGE §8).
   ============================================================ */
@container (max-width:900px){
  .vh-main{grid-template-columns:1fr}
  .vh-leader{display:none} /* rail no longer sits beside the canvas */
}
@container (max-width:560px){
  .vh-canvas{grid-template-columns:1fr;justify-items:stretch}
  .vh-conn{border-top:0;border-left:1px solid var(--c-border-strong);
    height:var(--sp-4);width:0;justify-self:center}
  .vh-tab:not(.is-on){display:none}   /* view tabs collapse to active Explore */
  .vh-tabs{margin-left:auto}
  .vh-railtab:not(.is-on){display:none}
  .vh-minimap{display:none}
}
/* fallback for engines without container queries (mirror via viewport) */
@supports not (container-type:inline-size){
  @media (max-width:900px){ .vh-main{grid-template-columns:1fr} .vh-leader{display:none} }
  @media (max-width:560px){
    .vh-canvas{grid-template-columns:1fr;justify-items:stretch}
    .vh-conn{border-top:0;border-left:1px solid var(--c-border-strong);
      height:var(--sp-4);width:0;justify-self:center}
    .vh-tab:not(.is-on){display:none}
    .vh-railtab:not(.is-on){display:none}
    .vh-minimap{display:none}
  }
}

/* ≥1440: ambient navy band may bleed wider; the panel stays capped at --container
   (already applied via .vh-wrap max-width). Nothing further needed. */