/* vpd-explainer.css — the "?" VPD explainer drawer (glass, right side).
   Cosmic palette + glassmorphism per UI.md. --sev carries the severity color. */

.vpd-explainer-host { position: fixed; inset: 0; z-index: 1200; }
.vpd-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 7, 16, 0.62); backdrop-filter: blur(3px);
}
.vpd-drawer {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(480px, 100vw);
  background:
    radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--sev, #38bdf8) 12%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(16, 22, 42, 0.97), rgba(10, 14, 28, 0.98));
  border-left: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: -30px 0 80px -30px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(18px);
  display: flex; flex-direction: column;
}
.vpd-drawer-scroll { overflow-y: auto; padding: 22px 24px 40px; }

/* 1 · Header */
.vpd-d-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.vpd-d-eyebrow {
  font: 600 10.5px/1 'Space Grotesk', sans-serif; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sev, #7dd3fc); margin-bottom: 8px;
}
.vpd-d-title { font: 700 26px/1 'Space Grotesk', sans-serif; color: #eef4ff; margin: 0; letter-spacing: -0.01em; }
.vpd-d-sub { font: 500 13px/1.5 'Inter', sans-serif; color: rgba(148, 163, 184, 0.92); margin: 8px 0 0; max-width: 38ch; }
.vpd-d-x {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(255, 255, 255, 0.04); color: #cbd5e1; cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.vpd-d-x:hover { background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, 0.5); color: #fecaca; }
.vpd-d-x:focus-visible { outline: 2px solid var(--accent-cyan, #38bdf8); outline-offset: 2px; }

/* 2 · Hero */
.vpd-hero { margin: 18px 0 6px; border-radius: 18px; background: rgba(8, 12, 24, 0.55); border: 1px solid rgba(148, 163, 184, 0.12); padding: 10px 10px 16px; }
.vpd-hero-stage { display: block; width: 100%; height: 200px; }
.vpd-leaf-blades path { fill: url(#vpdLeafGrad); stroke: rgba(94, 234, 212, 0.55); stroke-width: 1; }
.vpd-leaf-stem { stroke: rgba(94, 234, 212, 0.6); stroke-width: 2; stroke-linecap: round; }
.vpd-leaf { transform-origin: 0 58px; transform-box: fill-box; }
.vpd-hero:not(.is-still) .vpd-leaf { animation: vpd-sway 4s ease-in-out infinite; }
@keyframes vpd-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

.vpd-bead { fill: rgba(125, 211, 252, 0.9); }
.vpd-hero:not(.is-still) .vpd-bead { animation: vpd-bead 3.2s ease-in-out infinite; }
.vpd-bead.b1 { animation-delay: 0.4s; } .vpd-bead.b2 { animation-delay: 0.8s; }
.vpd-bead.b3 { animation-delay: 1.2s; } .vpd-bead.b4 { animation-delay: 1.6s; } .vpd-bead.b5 { animation-delay: 2s; }
@keyframes vpd-bead { 0%, 100% { opacity: 0.85; r: 2.6px; } 50% { opacity: 0.4; } }

.vpd-particle { fill: rgba(125, 211, 252, 0.55); }
.vpd-hero:not(.is-still) .vpd-particle {
  transform: translate(var(--px), var(--py));
  animation: vpd-drift var(--pdur, 4s) linear infinite; animation-delay: var(--pdelay, 0s);
}
@keyframes vpd-drift {
  0% { transform: translate(var(--px), var(--py)); opacity: 0; }
  12% { opacity: 0.8; }
  88% { opacity: 0.7; }
  100% { transform: translate(0, 0); opacity: 0; }
}

.vpd-hero-gauges { padding: 2px 6px 0; }
.vpd-gauge-track { fill: rgba(255, 255, 255, 0.06); }
.vpd-gauge-fill { transition: y 0.9s cubic-bezier(0.22, 1, 0.32, 1), height 0.9s cubic-bezier(0.22, 1, 0.32, 1); opacity: 0.92; }
.vpd-gauge-val { fill: #eaf2ff; font: 700 12px 'Space Grotesk', sans-serif; text-anchor: middle; font-variant-numeric: tabular-nums; }
.vpd-gauge-lbl { fill: rgba(203, 213, 225, 0.9); font: 600 9px 'Inter', sans-serif; text-anchor: middle; }
.vpd-gauge-sub { fill: rgba(148, 163, 184, 0.7); font: 500 8px 'Inter', sans-serif; text-anchor: middle; letter-spacing: 0.06em; }
.vpd-arrow-line { stroke: #5eead4; stroke-width: 2; stroke-dasharray: 3 3; opacity: calc(0.4 + var(--mag) * 0.6); }
.vpd-arrow-head { fill: #5eead4; }
.vpd-arrow-lbl { fill: #9be7da; font: 700 9px 'Space Grotesk', sans-serif; text-anchor: middle; }
.vpd-hero-agg { text-align: center; font: 600 12px 'Inter', sans-serif; color: rgba(186, 230, 253, 0.85); padding: 10px; }

/* 3/sections */
.vpd-d-sec { margin-top: 22px; }
.vpd-d-body { font: 400 13.5px/1.65 'Inter', sans-serif; color: rgba(214, 224, 240, 0.9); margin: 0 0 12px; }
.vpd-d-body em { color: #bae6fd; font-style: italic; }
.vpd-d-h { font: 600 12px/1 'Space Grotesk', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(148, 163, 184, 0.8); margin: 0 0 12px; }
.vpd-d-note { font: 500 12.5px/1.5 'Inter', sans-serif; color: rgba(148, 163, 184, 0.85); padding: 12px 14px; border: 1px dashed rgba(148, 163, 184, 0.22); border-radius: 12px; }

/* 4 · Zones band */
.vpd-zhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.vpd-zval { font: 700 18px 'Space Grotesk', sans-serif; color: #eaf2ff; font-variant-numeric: tabular-nums; }
.vpd-zstage { font: 600 13px 'Inter', sans-serif; }
.vpd-zband { display: block; overflow: visible; }
.vpd-zseg-t { fill: rgba(226, 232, 240, 0.82); font: 600 8px 'Inter', sans-serif; text-anchor: middle; pointer-events: none; }
.vpd-zseg rect { transition: opacity 0.16s ease; cursor: help; }
.vpd-zseg:hover rect { opacity: 0.7; }
.vpd-zneedle line { stroke: #eef4ff; stroke-width: 2.5; }
.vpd-zneedle circle { fill: #eef4ff; }
.vpd-zneedle { animation: vpd-needle-glide 0.95s cubic-bezier(0.22, 1, 0.32, 1) both; }
@keyframes vpd-needle-glide { from { transform: translateX(calc(var(--nx) * -1)); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* 5 · Collapsible math */
.vpd-collapse {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(148, 163, 184, 0.18); background: rgba(255, 255, 255, 0.03);
  font: 600 13px 'Inter', sans-serif; color: #dbe6ff;
}
.vpd-collapse:hover { border-color: rgba(56, 189, 248, 0.4); }
.vpd-chev { transition: transform 0.22s ease; }
.vpd-collapse.is-open .vpd-chev { transform: rotate(180deg); }
.vpd-collapse-body { padding-top: 12px; }
.vpd-math { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vpd-math li { padding: 11px 13px; border-radius: 12px; background: rgba(8, 12, 24, 0.5); border: 1px solid rgba(148, 163, 184, 0.12); }
.vpd-math-h { font: 600 11px 'Inter', sans-serif; color: rgba(148, 163, 184, 0.85); margin-bottom: 5px; }
.vpd-math-v { font: 500 13px 'Inter', sans-serif; color: #e6eefc; font-variant-numeric: tabular-nums; }
.vpd-math-v b { color: #5eead4; font-weight: 700; }

/* 6 · Insight */
.vpd-insight {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--sev, #38bdf8) 9%, rgba(10, 15, 30, 0.6));
  border: 1px solid color-mix(in srgb, var(--sev, #38bdf8) 34%, transparent);
}
.vpd-insight-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--sev); background: color-mix(in srgb, var(--sev) 16%, transparent); }
.vpd-insight p { margin: 0; font: 500 13.5px/1.55 'Inter', sans-serif; color: #eaf1ff; }

/* breakdown rows */
.vpd-brk { display: flex; flex-direction: column; gap: 8px; }
.vpd-brk-row {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px;
  width: 100%; padding: 11px 13px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(148, 163, 184, 0.16); border-left: 3px solid var(--sev);
  background: rgba(255, 255, 255, 0.03); color: #e6eefc; text-align: left;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.vpd-brk-row:hover:not(.is-static) { transform: translateX(3px); background: rgba(255, 255, 255, 0.06); }
.vpd-brk-row.is-static { cursor: default; opacity: 0.7; }
.vpd-brk-name { font: 600 13px 'Inter', sans-serif; }
.vpd-brk-val { font: 700 14px 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; }
.vpd-brk-val i { font: 500 10px 'Inter', sans-serif; color: rgba(148, 163, 184, 0.8); font-style: normal; }
.vpd-brk-chip { font: 600 10.5px 'Inter', sans-serif; color: var(--sev); padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--sev) 14%, transparent); }
.vpd-brk-row svg { color: rgba(148, 163, 184, 0.7); }

/* 7 · Related tiles */
.vpd-tiles { display: flex; flex-direction: column; gap: 8px; }
.vpd-tile {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(148, 163, 184, 0.16); background: rgba(255, 255, 255, 0.03); color: #dbe6ff;
  font: 600 13px 'Inter', sans-serif; transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.vpd-tile:hover { transform: translateY(-2px); border-color: rgba(56, 189, 248, 0.45); background: rgba(56, 189, 248, 0.08); }
.vpd-tile svg { color: var(--accent-cyan, #7dd3fc); }
.vpd-tile:focus-visible, .vpd-collapse:focus-visible, .vpd-brk-row:focus-visible { outline: 2px solid var(--accent-cyan, #38bdf8); outline-offset: 2px; }

@media (max-width: 520px) { .vpd-drawer { width: 100vw; } }

@media (prefers-reduced-motion: reduce) {
  .vpd-leaf, .vpd-bead, .vpd-particle { animation: none !important; }
  .vpd-particle { opacity: 0.5; }
  .vpd-zneedle { animation: none; }
  .vpd-gauge-fill { transition: none; }
  .vpd-brk-row, .vpd-tile, .vpd-chev { transition: none; }
}

/* ══════════════════════════════════════════
   LIGHT MODE — Environment overrides
══════════════════════════════════════════ */

/* Drawer shell — light frosted panel (keeps faint --sev radial) */
html[data-theme="light"] .vpd-drawer {
  background:
    radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--sev, #0284c7) 10%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(252, 252, 255, 0.98), rgba(248, 249, 255, 0.98));
  border-left-color: rgba(19, 16, 58, 0.12);
  box-shadow: -30px 0 80px -30px rgba(80, 90, 160, 0.3);
}
/* .vpd-drawer-backdrop scrim stays dark */

/* Header */
html[data-theme="light"] .vpd-d-title { color: var(--text-primary); }
html[data-theme="light"] .vpd-d-sub { color: var(--text-secondary); }
html[data-theme="light"] .vpd-d-x {
  border-color: rgba(19, 16, 58, 0.2);
  background: rgba(19, 16, 58, 0.05);
  color: var(--text-muted);
}
/* .vpd-d-x:hover rose stays; .vpd-d-eyebrow uses --sev — left */

/* Hero */
html[data-theme="light"] .vpd-hero {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(19, 16, 58, 0.12);
}
html[data-theme="light"] .vpd-gauge-track { fill: rgba(19, 16, 58, 0.06); }
html[data-theme="light"] .vpd-gauge-val { fill: #13103a; }
html[data-theme="light"] .vpd-gauge-lbl { fill: rgba(19, 16, 58, 0.7); }
html[data-theme="light"] .vpd-gauge-sub { fill: rgba(19, 16, 58, 0.5); }
html[data-theme="light"] .vpd-hero-agg { color: var(--text-secondary); }
/* leaf/bead/particle teal/cyan fills — decorative, left */

/* Sections */
html[data-theme="light"] .vpd-d-body { color: var(--text-secondary); }
html[data-theme="light"] .vpd-d-body em { color: #0369a1; }
html[data-theme="light"] .vpd-d-h { color: var(--text-muted); }
html[data-theme="light"] .vpd-d-note {
  color: var(--text-secondary);
  border-color: rgba(19, 16, 58, 0.12);
}

/* Zones band */
html[data-theme="light"] .vpd-zval { color: var(--text-primary); }
html[data-theme="light"] .vpd-zseg-t { fill: rgba(19, 16, 58, 0.7); }
html[data-theme="light"] .vpd-zneedle line { stroke: #13103a; }
html[data-theme="light"] .vpd-zneedle circle { fill: #13103a; }

/* Collapsible math */
html[data-theme="light"] .vpd-collapse {
  border-color: rgba(19, 16, 58, 0.12);
  background: rgba(19, 16, 58, 0.03);
  color: var(--text-primary);
}
html[data-theme="light"] .vpd-collapse:hover { border-color: rgba(2, 132, 199, 0.4); }
html[data-theme="light"] .vpd-math li {
  background: rgba(19, 16, 58, 0.03);
  border-color: rgba(19, 16, 58, 0.12);
}
html[data-theme="light"] .vpd-math-h { color: var(--text-muted); }
html[data-theme="light"] .vpd-math-v { color: var(--text-secondary); }
html[data-theme="light"] .vpd-math-v b { color: #0d9488; }

/* Insight — light base under --sev color-mix */
html[data-theme="light"] .vpd-insight {
  background: color-mix(in srgb, var(--sev, #0284c7) 9%, rgba(255, 255, 255, 0.7));
}
html[data-theme="light"] .vpd-insight p { color: var(--text-primary); }
/* .vpd-insight-ic uses --sev — left */

/* Breakdown rows */
html[data-theme="light"] .vpd-brk-row {
  border-color: rgba(19, 16, 58, 0.12);
  background: rgba(19, 16, 58, 0.03);
  color: var(--text-secondary);
}
html[data-theme="light"] .vpd-brk-row:hover:not(.is-static) { background: rgba(19, 16, 58, 0.05); }
html[data-theme="light"] .vpd-brk-name { color: var(--text-primary); }
html[data-theme="light"] .vpd-brk-val { color: var(--text-primary); }
html[data-theme="light"] .vpd-brk-val i { color: var(--text-muted); }
/* .vpd-brk-chip uses --sev — left */

/* Related tiles */
html[data-theme="light"] .vpd-tile {
  border-color: rgba(19, 16, 58, 0.12);
  background: rgba(19, 16, 58, 0.03);
  color: var(--text-primary);
}
html[data-theme="light"] .vpd-tile:hover {
  border-color: rgba(2, 132, 199, 0.45);
  background: rgba(2, 132, 199, 0.08);
}
html[data-theme="light"] .vpd-tile svg { color: #0284c7; }