/* ============================================================================
   VendGrade , per-VIEW styles (SPA). Concatenated from the former per-page
   <style> blocks. Verified: no cross-view class collisions (.active is
   parent-qualified in each). Requires tokens.css + base.css.
   ============================================================================ */

/* ---- reviews view ---- */
    /* program-pulse strip (2.4): colored + CLICKABLE numbers, each a launch mechanism */
    .pulse { flex-shrink: 0; background: var(--vg-surface); border-bottom: 1px solid var(--vg-border); padding: 0 24px; display: flex; align-items: stretch; min-height: 78px; }
    .pulse__label { display: flex; align-items: center; padding-right: 22px; }
    .pulse__items { display: flex; align-items: center; flex: 1; flex-wrap: wrap; }
    .pulse__item { display: flex; flex-direction: column; gap: 2px; padding: 12px 24px; border-left: 1px solid var(--vg-border); text-align: left; background: none; transition: background .12s ease; position: relative; }
    .pulse__item[data-launch] { cursor: pointer; }
    .pulse__item[data-launch]:hover { background: var(--vg-surface-2); }
    .pulse__num { font-family: var(--vg-font-mono); font-size: 23px; font-weight: 600; line-height: 1; }
    .pulse__cap { font-size: 11.5px; color: var(--vg-text-2); display: flex; align-items: center; gap: 6px; }
    .pulse__go { font-size: 10px; color: var(--vg-accent); opacity: 0; transition: opacity .12s ease; }
    .pulse__item[data-launch]:hover .pulse__go { opacity: 1; }
    .wait-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vg-overdue); display: inline-block; }
    /* control bar (3.2): compact sort + filter, not a wall */
    .bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
    .bar__grp { display: flex; align-items: center; gap: 7px; }
    .bar__lbl { font-family: var(--vg-font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vg-text-3); }
    .seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--vg-surface-2); border: 1px solid var(--vg-border); border-radius: 8px; }
    .seg button { padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--vg-text-2); }
    .seg button.active { background: var(--vg-surface); color: var(--vg-accent-strong); box-shadow: var(--vg-shadow-card); }
    .fchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--vg-border-strong); border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--vg-text-2); background: var(--vg-surface); }
    .fchip.active { border-color: var(--vg-accent); background: var(--vg-accent-weak); color: var(--vg-accent-strong); }
    .bar__sep { width: 1px; align-self: stretch; background: var(--vg-border); }
    /* worklist rows */
    .wl { border: 1px solid var(--vg-border); border-radius: var(--vg-radius-lg); background: var(--vg-surface); overflow: hidden; }
    .wrow { display: grid; grid-template-columns: 108px 1fr auto; gap: 18px; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--vg-border); }
    .wrow:last-child { border-bottom: 0; }
    .wrow--ready { background: var(--vg-accent-weak); border-left: 3px solid var(--vg-accent); }
    .wname { font-size: var(--vg-fs-item); font-weight: 700; letter-spacing: -0.01em; }
    .wmeta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 6px; }
    .wsub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 7px; font-size: 12px; color: var(--vg-text-2); }
    .kind-tag { font-family: var(--vg-font-mono); font-size: 10.5px; padding: 2px 8px; border-radius: 5px; background: var(--vg-surface-2); color: var(--vg-text-2); }
    /* re-review reason (3.3): system-generated LOUD, self quiet */
    .reason--sys { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: var(--vg-attention-bg); color: var(--vg-attention); border: 1px solid color-mix(in srgb, var(--vg-attention) 34%, transparent); }
    .reason--self { font-size: 11.5px; color: var(--vg-text-3); }
    .age { display: inline-flex; align-items: center; gap: 6px; font-family: var(--vg-font-mono); font-size: 11.5px; font-weight: 600; }
    .age__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
    .ready-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: var(--vg-accent); color: #fff; text-transform: uppercase; letter-spacing: 0.05em; }
    .wrow__act { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
    .effort { font-family: var(--vg-font-mono); font-size: 11.5px; color: var(--vg-text-2); }
    @media (max-width: 820px) { .wrow { grid-template-columns: 1fr; } .wrow__act { align-items: flex-start; } }

/* ---- vendor view ---- */
    /* persistent context header */
    .ctx { flex-shrink: 0; background: var(--vg-surface); border-bottom: 1px solid var(--vg-border); padding: 16px 26px 0; }
    .ctx__crumb { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--vg-text-3); margin-bottom: 9px; }
    .ctx__crumb a { color: var(--vg-text-3); }
    .ctx__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
    .ctx__name { font-size: 23px; font-weight: 800; letter-spacing: -0.025em; }
    .ctx__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 9px; font-family: var(--vg-font-mono); font-size: 11.5px; color: var(--vg-text-3); }
    .ctx__sep { color: var(--vg-border-strong); }
    .rr-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 7px; background: var(--vg-important-bg); border: 1px solid color-mix(in srgb, var(--vg-important) 26%, transparent); }
    /* stepper */
    .step { display: flex; align-items: center; margin-top: 14px; flex-wrap: wrap; }
    .step__node { display: inline-flex; align-items: center; gap: 7px; }
    .step__dot { width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; }
    .step__dot--done { background: var(--vg-ok); color: #fff; }
    .step__dot--now { background: var(--vg-accent); color: #fff; font-size: 9px; font-weight: 700; }
    .step__dot--next { border: 1.5px solid var(--vg-border-strong); color: var(--vg-text-3); }
    .step__line { width: 34px; height: 1px; background: var(--vg-border-strong); margin: 0 12px; }
    .step__line--pending { background: var(--vg-border); }
    /* tabs */
    .tabs { display: flex; align-items: center; gap: 4px; margin-top: 14px; flex-wrap: wrap; }
    .tab { display: flex; align-items: center; gap: 7px; padding: 9px 15px; font-size: 13px; font-weight: 600; color: var(--vg-text-2); border-bottom: 2px solid transparent; background: none; }
    .tab.is-active { color: var(--vg-accent-strong); border-bottom-color: var(--vg-accent); }
    .tab__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vg-important); }
    .tab__flag { font-family: var(--vg-font-mono); font-size: 9px; padding: 1px 5px; border-radius: 4px; background: var(--vg-important-bg); color: var(--vg-important); }
    .tab__lock { font-size: 10px; opacity: 0.6; }
    /* panels + shared bits */
    .panel { max-width: 1000px; }
    .panel-head { margin-bottom: 18px; }
    .panel-head h2 { font-size: var(--vg-fs-h2); font-weight: 700; letter-spacing: -0.01em; }
    .panel-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--vg-text-2); }
    .func { margin-top: 20px; }
    .func__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .func__title { font-family: var(--vg-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vg-text-2); font-weight: 600; }
    .revitem { padding: 14px 16px; border-bottom: 1px solid var(--vg-border); }
    .revitem:last-child { border-bottom: 0; }
    .revitem__grid { display: grid; grid-template-columns: 150px 1fr auto; gap: 16px; align-items: center; }
    .revitem__title { font-size: 13.5px; font-weight: 700; }
    .revitem__ev { display: flex; align-items: center; gap: 12px; margin-top: 4px; font-family: var(--vg-font-mono); font-size: 11px; color: var(--vg-text-3); flex-wrap: wrap; }
    .revitem__act { display: flex; align-items: center; gap: 10px; }
    .defgrid { display: grid; grid-template-columns: 1fr 1fr; }
    .defcell { padding: 15px 18px; border-bottom: 1px solid var(--vg-border); }
    .defcell:nth-child(odd) { border-right: 1px solid var(--vg-border); }
    .defval { font-family: var(--vg-font-mono); font-size: 12.5px; color: var(--vg-text-2); line-height: 1.6; }
    .note { margin-top: 12px; padding: 11px 14px; border: 1px dashed var(--vg-border-strong); border-radius: 9px; background: var(--vg-surface); font-size: 12px; color: var(--vg-text-2); }
    .note b { color: var(--vg-text); }
    .reqrow { padding: 13px 16px; border-bottom: 1px solid var(--vg-border); display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; }
    .reqrow:last-child { border-bottom: 0; }
    .siglist { display:grid; grid-template-columns:96px 90px 1fr auto; gap:14px; align-items:center; padding:13px 16px; border-bottom:1px solid var(--vg-border); }
    .siglist:last-child { border-bottom:0; }
    .vlist__row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 16px; border-bottom:1px solid var(--vg-border); }
    .vlist__row:last-child { border-bottom:0; }
    /* vendor-list search (5.7): same visual language as .vg-field input, sized for the control bar */
    .vsearch { width:100%; padding:8px 11px; border:1px solid var(--vg-border-strong); border-radius:8px; background:var(--vg-surface); color:var(--vg-text); font-family:inherit; font-size:13px; }
    .vsearch::placeholder { color:var(--vg-text-3); }
    .vsearch:focus { outline:none; border-color:var(--vg-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--vg-accent) 18%, transparent); }
    /* item 6: worklist FILTERED cue -- quiet but persistent (1.2: a filtered view is not an
       action-demanding state-change, so a cue, not a scream). Accent rail on the list + an accent
       count, paired with the item-4 label that names the slice. */
    .wl--filtered { border-left:3px solid var(--vg-accent); border-radius:4px; padding-left:11px; margin-left:-14px; }
    .wl-count--on { color:var(--vg-accent-strong)!important; border-bottom:2px solid var(--vg-accent); padding-bottom:1px; }
    @media (max-width: 760px) { .revitem__grid, .defgrid, .reqrow, .siglist { grid-template-columns: 1fr; } .defcell:nth-child(odd){border-right:0;} }
    /* ---- review workspace: banding by actionability (3.2) ---- */
    .band { margin-bottom: 18px; }
    .band__head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
    .band__title { font-size: 13.5px; font-weight: 700; }
    .band__hint { font-size: 11.5px; color: var(--vg-text-3); }
    .band__count { font-family: var(--vg-font-mono); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: var(--vg-surface-2); color: var(--vg-text-2); }
    .band--review .band__accent { color: var(--vg-accent-strong); }
    .band--log .band__accent { color: var(--vg-ok); }
    .band--chase .band__accent { color: var(--vg-overdue); }
    .band__card { border-left: 3px solid var(--vg-border-strong); }
    .band--review .band__card { border-left-color: var(--vg-accent); }
    .band--log .band__card { border-left-color: var(--vg-ok); }
    .band--chase .band__card { border-left-color: var(--vg-overdue); }
    .bitem { padding: 14px 16px; border-bottom: 1px solid var(--vg-border); }
    .bitem:last-child { border-bottom: 0; }
    .bitem__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
    .bitem__title { font-size: 13.5px; font-weight: 700; }
    .bitem__sub { display: flex; align-items: center; gap: 12px; margin-top: 4px; font-family: var(--vg-font-mono); font-size: 11px; color: var(--vg-text-3); flex-wrap: wrap; }
    .bitem__act { display: flex; align-items: center; gap: 9px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
    /* Recently-nudged chase rows: state the recency, never dim the row. (Dimming read as "disabled"
       while the row stayed fully actionable.) Tokened, so light and dark both follow. */
    .vg-tag--recent { background: var(--vg-important-bg); color: var(--vg-important); font-weight: 600; }
    .bitem__check { padding-top: 2px; flex-shrink: 0; }
    .bitem__check input { width: 15px; height: 15px; accent-color: var(--vg-accent); cursor: pointer; }
    .chase-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-top: 8px; border: 1px solid var(--vg-border); border-radius: var(--vg-radius-md); background: var(--vg-surface-2); }
    /* verdict control: prominent, explicit, few-option (NOT a dropdown) */
    .vlabel { font-family: var(--vg-font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vg-text-3); margin-right: 2px; }
    .vseg { display: inline-flex; gap: 4px; }
    .vseg button { padding: 6px 11px; border-radius: 7px; font-size: 12px; font-weight: 600; border: 1px solid var(--vg-border-strong); background: var(--vg-surface); color: var(--vg-text-2); }
    .vseg button[data-verdict="strong"]:hover, .vseg button[data-verdict="adequate"]:hover { border-color: var(--vg-ok); color: var(--vg-ok); background: var(--vg-ok-bg); }
    .vseg button[data-verdict="weak_needs_attention"]:hover, .vseg button[data-verdict="inadequate"]:hover { border-color: var(--vg-important); color: var(--vg-important); background: var(--vg-important-bg); }
    /* inline add-contact-to-nudge (Band 3 prerequisite surfaced inline) */
    .contactline { display: flex; align-items: center; gap: 8px; }
    .contactline input { padding: 6px 10px; border: 1px solid var(--vg-border-strong); border-radius: 7px; background: var(--vg-surface); color: var(--vg-text); font-size: 12px; min-width: 190px; }
    .contactline input:focus { outline: none; border-color: var(--vg-accent); }
    /* function sign-off strip (Part 4) */
    .sign { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--vg-border); }
    .sign:last-child { border-bottom: 0; }
    .sign--ready { background: var(--vg-accent-weak); }
    .sign__fn { font-family: var(--vg-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
    /* loud "ready for a decision" announcement (1.2) */
    .decready { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; margin-bottom: 20px; border-radius: var(--vg-radius-lg); background: var(--vg-accent-weak); border: 1px solid var(--vg-accent); }
    .bg-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--vg-text-2); font-weight: 600; }
    /* ---- scoping interview (ported from vendors.html, re-skinned to v2 tokens) ---- */
    .vg-seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--vg-surface-2); border: 1px solid var(--vg-border); border-radius: 9px; }
    .vg-seg button { padding: 7px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--vg-text-2); white-space: nowrap; }
    .vg-seg button.active { background: var(--vg-surface); color: var(--vg-accent-strong); box-shadow: var(--vg-shadow-card); }
    .sc-sec { margin-bottom: 16px; }
    .sc-sec__pad { padding: 18px 20px; }
    .sc-sec h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 3px; }
    .sc-sec__sub { font-size: 12.5px; color: var(--vg-text-2); margin-bottom: 16px; }
    .sc-q { padding: 15px 0; border-top: 1px solid var(--vg-border); }
    .sc-q:first-of-type { border-top: 0; padding-top: 0; }
    .sc-q:last-child { padding-bottom: 0; }
    .sc-q__h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }
    .sc-sub { margin-top: 13px; padding-left: 14px; border-left: 2px solid var(--vg-border-strong); }
    .sc-sub > label { display: block; font-family: var(--vg-font-mono); font-size: var(--vg-fs-label); letter-spacing: var(--vg-tracking-label); text-transform: uppercase; color: var(--vg-text-3); margin-bottom: 9px; }
    .sc-checks { display: flex; flex-direction: column; gap: 9px; }
    .sc-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--vg-text); cursor: pointer; }
    .sc-check input { width: 15px; height: 15px; accent-color: var(--vg-accent); flex-shrink: 0; }
    .sc-exp { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--vg-border); }
    .sc-exp:first-child { border-top: 0; padding-top: 0; }
    .sc-exp__label { font-size: 13px; font-weight: 600; }
    .sc-textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--vg-border-strong); border-radius: 8px; background: var(--vg-surface); color: var(--vg-text); font-family: inherit; font-size: 13px; resize: vertical; min-height: 56px; }
    .sc-textarea:focus { outline: none; border-color: var(--vg-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vg-accent) 18%, transparent); }
    @media (max-width: 760px) { .sc-exp { grid-template-columns: 1fr; } }

/* ---- program view ---- */
    /* attention strip (2.4, the CISO's operational zoom-in mirror) */
    /* altitude labels */
    .alt-head { display: flex; align-items: baseline; gap: 11px; margin: 26px 0 13px; }
    .alt-badge { font-family: var(--vg-font-mono); font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--vg-text-3); padding: 3px 9px; border: 1px solid var(--vg-border); border-radius: 5px; }
    .alt-head h2 { font-size: var(--vg-fs-h2); font-weight: 700; letter-spacing: -0.01em; }
    .alt-head span.sub { font-size: 12.5px; color: var(--vg-text-3); }
    /* health confidence banner */
    .health { border-radius: var(--vg-radius-lg); padding: 16px 18px; margin-bottom: 20px; display: flex; align-items: flex-start; gap: 13px; }
    .health--ok { background: var(--vg-ok-bg); border: 1px solid color-mix(in srgb, var(--vg-ok) 40%, transparent); }
    .health--bad { background: var(--vg-important-bg); border: 1px solid var(--vg-important); }
    .health__ico { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: var(--vg-font-mono); font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
    .health__title { font-size: 14.5px; font-weight: 800; }
    .health__sub { font-size: 12.5px; color: var(--vg-text-2); margin-top: 3px; line-height: 1.5; }
    .health__causes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
    /* Risk's health qualifier is a FRAME across the top of the page (5.16 item 3), not an exposure
       card in the list. The band spans full width above the scroll; stripping the inner .health card
       chrome renders the verdict flat, so it diverges from Program's boxed verdict banner and reads as
       a caption on the page rather than the first item. */
    .risk-frame { flex-shrink: 0; padding: 12px 26px; background: var(--vg-surface-2); border-bottom: 1px solid var(--vg-border); }
    .risk-frame .health { margin: 0; padding: 0; background: none; border: none; border-radius: 0; }
    /* Healthy-Program caption (5.16 item 4a): a quiet muted line saying the empty page is the finding. */
    .prog-caption { font-size: 12.5px; color: var(--vg-text-2); line-height: 1.55; max-width: 640px; margin: 0 0 20px; }
    .cause { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: var(--vg-surface); border: 1px solid var(--vg-border-strong); color: var(--vg-text-2); }
    a.cause:hover { border-color: var(--vg-accent); color: var(--vg-accent-strong); text-decoration: none; }
    /* headline cards */
    .headrow { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-bottom: 16px; }
    .hcard { border-radius: var(--vg-radius-lg); padding: 18px 20px; border: 1px solid var(--vg-border); background: var(--vg-surface); }
    .hcard--alarm { border-color: var(--vg-overdue); background: var(--vg-overdue-bg); }
    .hcard__label { font-family: var(--vg-font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vg-text-3); }
    .hcard__big { font-family: var(--vg-font-mono); font-weight: 600; line-height: 1; margin: 8px 0 4px; }
    .hcard__foot { font-size: 12px; color: var(--vg-text-2); margin-top: 8px; }
    /* anchor (calm by-tier) */
    .anchor { border: 1px solid var(--vg-border); border-radius: var(--vg-radius-lg); padding: 16px 20px; background: var(--vg-surface); }
    .tier-row { display: flex; align-items: center; gap: 10px; }
    .tier-row__sq { width: 9px; height: 9px; border-radius: 2px; }
    .tier-row__name { font-size: 12.5px; font-weight: 600; width: 78px; }
    .tier-row__n { font-family: var(--vg-font-mono); font-size: 13px; font-weight: 600; width: 22px; }
    /* trajectory placeholder */
    .traj { border: 1px dashed var(--vg-border-strong); border-radius: var(--vg-radius-lg); padding: 22px 22px; background: var(--vg-surface); }
    .traj--live { border-style: solid; border-color: var(--vg-border); }
    .traj__ghost { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
    .traj__slot { flex: 1; min-width: 160px; border: 1px solid var(--vg-border); border-radius: 9px; padding: 13px 14px; background: var(--vg-surface-2); }
    /* WHERE slice bar */
    .slicebar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
    .slicegrp { display: flex; align-items: center; gap: 7px; }
    .slicegrp__lbl { font-family: var(--vg-font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vg-text-3); }
    .schip { padding: 5px 11px; border: 1px solid var(--vg-border-strong); border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--vg-text-2); background: var(--vg-surface); }
    .schip.on { border-color: var(--vg-accent); background: var(--vg-accent-weak); color: var(--vg-accent-strong); }
    .whgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .whcard { border: 1px solid var(--vg-border); border-radius: var(--vg-radius-lg); padding: 16px 18px; background: var(--vg-surface); }
    .whrow { display: flex; align-items: center; gap: 10px; }
    .whrow__name { font-size: 12.5px; color: var(--vg-text-2); flex: 1; }
    .vg-drill { background: none; }
    .drill-panel { margin: -2px 0 4px 6px; padding: 9px 12px; background: var(--vg-surface-2); border-left: 2px solid var(--vg-accent); border-radius: 0 7px 7px 0; }
    .drill-panel .vg-because__body { display: flex; flex-direction: column; gap: 5px; }
    .vg-why { flex-shrink: 0; aspect-ratio: 1; width: 16px; height: 16px; }
    /* in-progress spinner (Scan surface) */
    .vg-spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--vg-border); border-top-color: var(--vg-accent); animation: vg-spin 0.8s linear infinite; }
    @keyframes vg-spin { to { transform: rotate(360deg); } }
    @media (max-width: 900px) { .headrow, .whgrid { grid-template-columns: 1fr; } }