/* ==========================================================================
   EduCS.me VR section: "VR in the Classroom"
   A self-contained, always-dark surface. Palette adapted from the maintainer's
   VR poster: near-black navy ground, orchid signature, lavender support, teal
   interaction accent. Fonts are the EduCS brand set (Inter / Source Sans 3 /
   JetBrains Mono). Scoped under .vr-body; nothing here leaks into the docs
   theme and nothing of the theme is loaded here.
   ========================================================================== */

/* Registered properties so float and hover-lift animate on their own custom
   property instead of the transform itself. This is what keeps the dock
   panels butter-smooth: the parallax vars, the idle float, and the hover lift
   all compose into ONE transform, and nothing animates margins (margin
   animation shifts real layout, which read as slow shaking and let stacked
   panels touch). Browsers without @property simply skip the float and lift. */
@property --float {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --lift {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.vr-body {
  /* Ground and surfaces */
  --vr-void: #0d1023;          /* page ground (poster navy) */
  --vr-deep: #12162e;          /* raised surface base */
  --vr-panel: rgba(185, 168, 240, 0.07);
  --vr-panel-strong: rgba(185, 168, 240, 0.12);
  --vr-line: rgba(185, 168, 240, 0.22);
  --vr-line-faint: rgba(185, 168, 240, 0.12);

  /* Hues */
  --vr-orchid: #c06bf0;        /* signature: headlines, section identity */
  --vr-lavender: #b9a8f0;      /* labels, secondary accents */
  --vr-teal: #2fe0c8;          /* interaction: links, focus, positives */
  --vr-amber: #f0b86b;         /* cautions, limitations */
  --vr-rose: #f08a8a;          /* impractical / high-risk values */

  /* Ink */
  --vr-ink: #eceafb;           /* primary text */
  --vr-dim: #b3aed1;           /* secondary text (8.9:1 on void, AA on glass) */
  --vr-faint: #8a85b3;         /* tertiary; void/deep surfaces only (5.4:1 on void) */

  /* Type */
  --vr-font-display: "Inter", system-ui, -apple-system, sans-serif;
  --vr-font-body: "Source Sans 3", system-ui, -apple-system, sans-serif;
  --vr-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Motion */
  --vr-ease: cubic-bezier(0.22, 0.8, 0.3, 1);

  /* Parallax pointer position, set by vr-landing.js */
  --vr-px: 0;
  --vr-py: 0;

  margin: 0;
  background: var(--vr-void);
  color: var(--vr-ink);
  font-family: var(--vr-font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.vr-body *,
.vr-body *::before,
.vr-body *::after { box-sizing: border-box; }

.vr-body h1, .vr-body h2, .vr-body h3, .vr-body h4 {
  font-family: var(--vr-font-display);
  line-height: 1.2;
  color: var(--vr-ink);
  margin: 0 0 0.6em;
}
.vr-body h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; }
.vr-body h2 { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; }
.vr-body h3 { font-size: 1.15rem; font-weight: 600; }
.vr-body p { margin: 0 0 1em; }
.vr-body a { color: var(--vr-teal); text-decoration: none; }
.vr-body a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vr-body code, .vr-body .vr-mono { font-family: var(--vr-font-mono); font-size: 0.9em; }
.vr-body :focus-visible {
  outline: 2px solid var(--vr-teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Long URLs and tokens appear throughout the research text; never let them
   widen the page. */
.vr-prose, .vr-panelcard, .vr-fieldrow dd, .vr-rel-body, .vr-limit, .vr-md,
.vr-lesson-md, .vr-region-note, .vr-card-sub, .vr-card-why, .vr-factcell {
  overflow-wrap: anywhere;
}

.vr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Section eyebrow: the quiet structural voice of the section */
.vr-eyebrow {
  font-family: var(--vr-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vr-lavender);
  display: block;
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   Chrome: skip link, topbar, footer
   -------------------------------------------------------------------------- */

.vr-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--vr-teal);
  color: #06251f;
  padding: 0.6rem 1rem;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.vr-skip:focus { left: 0; }

.vr-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 16, 35, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vr-line-faint);
}
.vr-topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.65rem 1.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.vr-wordmark {
  font-family: var(--vr-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* The real EduCS.me logotype colors (site dark-mode set; see custom.scss) */
.vr-wm-edu { color: #8FD4BF; }
.vr-wm-cs  { color: #61B0DD; }
.vr-wm-dot { color: #87D1E8; }
.vr-wm-me  { color: #5093BB; }
.vr-wordmark:hover { text-decoration: none; filter: brightness(1.15); }
.vr-topbar-divider {
  width: 1px;
  height: 1.1rem;
  background: var(--vr-line);
}
.vr-section-name {
  font-family: var(--vr-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--vr-orchid);
  white-space: nowrap;
}
.vr-section-name:hover { text-decoration: none; color: #d492f7; }
.vr-topnav {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.vr-topnav::-webkit-scrollbar { display: none; }
.vr-topnav a {
  color: var(--vr-dim);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--vr-font-body);
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  white-space: nowrap;
}
.vr-topnav a:hover { color: var(--vr-ink); background: var(--vr-panel); text-decoration: none; }
.vr-topnav a[aria-current="page"] { color: var(--vr-ink); background: var(--vr-panel-strong); }

.vr-main { flex: 1 0 auto; width: 100%; }

.vr-footer {
  border-top: 1px solid var(--vr-line-faint);
  margin-top: 4rem;
  background: rgba(18, 22, 46, 0.5);
}
.vr-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1rem 3rem;
  align-items: start;
}
.vr-footer-line { color: var(--vr-dim); font-size: 0.9rem; margin: 0; }
.vr-footer-line a { color: var(--vr-lavender); }
.vr-footer-wordmark { white-space: nowrap; }
.vr-footer-wordmark:hover { text-decoration: none; filter: brightness(1.15); }
.vr-footer-fine { font-size: 0.82rem; color: var(--vr-faint); margin: 0; }
@media (max-width: 760px) {
  .vr-footer-inner { grid-template-columns: 1fr; gap: 0.75rem; }
}

.vr-noscript {
  max-width: 1100px;
  margin: 2rem auto 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--vr-amber);
  border-radius: 12px;
  background: rgba(240, 184, 107, 0.08);
}

/* Shared page shell for inner pages */
.vr-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 0;
}
.vr-shell-wide { max-width: 1400px; }
/* Prose-only pages: a narrower, centered shell so the reading measure and
   the page width agree instead of leaving a dead right half */
.vr-shell--prose { max-width: 880px; }

/* --------------------------------------------------------------------------
   Landing: the home environment
   -------------------------------------------------------------------------- */

.vr-hero {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 1.25rem 3.5rem;
  min-height: 60vh;
}

/* Ambient layers: starfield, horizon glow, perspective grid floor.
   The whole stack fades out toward the section edge so the hero never ends
   on a hard luminance step. */
.vr-hero-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.vr-stars, .vr-stars-2 {
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(236, 234, 251, 0.9), transparent 100%),
    radial-gradient(1px 1px at 34% 62%, rgba(185, 168, 240, 0.8), transparent 100%),
    radial-gradient(1.5px 1.5px at 56% 24%, rgba(236, 234, 251, 0.7), transparent 100%),
    radial-gradient(1px 1px at 71% 51%, rgba(47, 224, 200, 0.65), transparent 100%),
    radial-gradient(1px 1px at 88% 12%, rgba(236, 234, 251, 0.8), transparent 100%),
    radial-gradient(1.5px 1.5px at 8% 79%, rgba(185, 168, 240, 0.55), transparent 100%),
    radial-gradient(1px 1px at 45% 88%, rgba(236, 234, 251, 0.5), transparent 100%),
    radial-gradient(1px 1px at 94% 72%, rgba(192, 107, 240, 0.6), transparent 100%),
    radial-gradient(1px 1px at 23% 41%, rgba(236, 234, 251, 0.45), transparent 100%),
    radial-gradient(1.5px 1.5px at 64% 69%, rgba(185, 168, 240, 0.5), transparent 100%);
  background-repeat: no-repeat;
  transform: translate3d(calc(var(--vr-px) * -6px), calc(var(--vr-py) * -4px), 0);
}
.vr-stars-2 {
  background-image:
    radial-gradient(1px 1px at 18% 33%, rgba(236, 234, 251, 0.5), transparent 100%),
    radial-gradient(1px 1px at 42% 12%, rgba(185, 168, 240, 0.45), transparent 100%),
    radial-gradient(1px 1px at 60% 44%, rgba(236, 234, 251, 0.4), transparent 100%),
    radial-gradient(1px 1px at 79% 29%, rgba(47, 224, 200, 0.4), transparent 100%),
    radial-gradient(1px 1px at 30% 74%, rgba(236, 234, 251, 0.35), transparent 100%),
    radial-gradient(1px 1px at 85% 86%, rgba(185, 168, 240, 0.4), transparent 100%);
  transform: translate3d(calc(var(--vr-px) * -12px), calc(var(--vr-py) * -8px), 0);
}
.vr-horizon {
  position: absolute;
  left: 50%;
  bottom: -32vh;
  width: 130vw;
  height: 60vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center top,
    rgba(192, 107, 240, 0.22) 0%,
    rgba(122, 92, 220, 0.12) 32%,
    rgba(13, 16, 35, 0) 68%);
}
.vr-floor {
  position: absolute;
  left: 50%;
  bottom: -6rem;
  width: 220vw;
  height: 46vh;
  transform: translateX(-50%) perspective(520px) rotateX(64deg);
  transform-origin: center bottom;
  background-image:
    repeating-linear-gradient(to right, rgba(185, 168, 240, 0.13) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(to top, rgba(185, 168, 240, 0.13) 0 1px, transparent 1px 56px);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.7), transparent 85%);
  mask-image: linear-gradient(to top, rgba(0,0,0,0.7), transparent 85%);
}

.vr-hero-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.vr-hero-title {
  font-size: clamp(2.5rem, 6.5vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  color: #fff;
}
.vr-hero-title em {
  font-style: normal;
  color: var(--vr-orchid);
}
/* .vr-hero-inner prefix beats the .vr-body p base rule so the auto margins
   actually apply and the paragraph stays centered */
.vr-hero-inner .vr-hero-sub {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--vr-dim);
  max-width: 62ch;
  margin: 0 auto 0.9rem;
}
.vr-hero-inner .vr-hero-honesty {
  font-family: var(--vr-font-mono);
  font-size: 0.8rem;
  color: var(--vr-faint);
  letter-spacing: 0.04em;
  margin: 0 auto 1.5rem;
}
.vr-hero-honesty strong { color: var(--vr-lavender); font-weight: 500; }

/* --------------------------------------------------------------------------
   The headset: an SVG centerpiece whose lenses project light onto the dock
   -------------------------------------------------------------------------- */

.vr-headset-stage {
  position: relative;
  width: min(300px, 58vw);
  margin: 0 auto 0.5rem;
}
.vr-headset {
  display: block;
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.65));
  transform: translateY(var(--float));
  animation: vr-float 8s ease-in-out infinite;
}
.vr-lens { animation: vr-lens-pulse 5.5s ease-in-out infinite; }
.vr-lens-r { animation-delay: 2.7s; }
@keyframes vr-lens-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.vr-headset-power { animation: vr-power-blink 4s steps(1) infinite; }
@keyframes vr-power-blink {
  0%, 92%, 100% { opacity: 1; }
  94%, 98% { opacity: 0.25; }
}
/* soft light pool under the headset, in place of a wall of text */
.vr-headset-glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 150%;
  height: 120%;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse 50% 55% at 50% 46%,
    rgba(150, 104, 236, 0.28) 0%,
    rgba(93, 141, 222, 0.12) 45%,
    transparent 75%);
  filter: blur(4px);
  animation: vr-glow-pulse 7s ease-in-out infinite;
}
@keyframes vr-glow-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* gentle corner vignette so the hero reads as a viewport, kept soft */
.vr-lens-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 130% 115% at 50% 40%, transparent 62%, rgba(4, 5, 14, 0.45) 100%);
}

/* The dock: floating glass panels in shallow 3D, like a headset's app grid */
/* Six equal cards in a 3x2 grid: no tall half-empty doors */
.vr-dock {
  perspective: 1100px;
  perspective-origin: 50% 40%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "choose browse start"
    "lessons learned how";
  gap: 1.4rem;
  max-width: 1180px;
  margin: 0 auto;
  text-align: left;
}
.vr-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.45rem 1.45rem 1.35rem;
  border-radius: 16px;
  border: 1px solid var(--vr-line);
  background: linear-gradient(165deg, rgba(185, 168, 240, 0.12), rgba(185, 168, 240, 0.04) 55%, rgba(47, 224, 200, 0.03));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.65);
  color: var(--vr-ink);
  /* One transform composes everything; only the registered --lift transitions.
     transform itself never transitions, so the pointer parallax cannot fight
     a running transition (that fight was the old rubbery shake). */
  transition: --lift 0.5s var(--vr-ease), border-color 0.25s ease, box-shadow 0.45s var(--vr-ease);
  transform: rotateY(var(--pane-ry, 0deg)) translateZ(calc(var(--pane-z, 0px) + var(--lift)))
    translate3d(calc(var(--vr-px) * var(--pane-drift, 4px)), calc(var(--vr-py) * var(--pane-drift, 4px) + var(--float)), 0);
}
.vr-pane::before {
  /* top edge light, the "glass" read */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(to right, transparent, rgba(236, 234, 251, 0.45), transparent);
}
.vr-pane::after {
  /* laser sweep along the top edge on hover */
  content: "";
  position: absolute;
  top: -1px;
  left: 8%;
  right: 8%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--vr-teal) 35%, var(--vr-orchid) 65%, transparent);
  opacity: 0;
  transform: scaleX(0.15);
  transform-origin: left center;
  transition: transform 0.55s var(--vr-ease), opacity 0.25s ease;
  pointer-events: none;
}
a.vr-pane:hover, a.vr-pane:focus-visible {
  --lift: 30px;
  text-decoration: none;
  border-color: rgba(47, 224, 200, 0.55);
  box-shadow: 0 22px 48px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(47, 224, 200, 0.25), 0 0 34px -6px rgba(47, 224, 200, 0.28);
}
a.vr-pane:hover::after, a.vr-pane:focus-visible::after {
  opacity: 0.9;
  transform: scaleX(1);
}

.vr-pane-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}
.vr-pane-icon {
  width: 28px;
  height: 28px;
  color: var(--vr-lavender);
  opacity: 0.9;
  flex: 0 0 auto;
  transition: color 0.25s ease, transform 0.35s var(--vr-ease), filter 0.35s ease;
}
a.vr-pane:hover .vr-pane-icon, a.vr-pane:focus-visible .vr-pane-icon {
  color: var(--vr-teal);
  transform: translateY(-2px) scale(1.1) rotate(-4deg);
  filter: drop-shadow(0 0 9px rgba(47, 224, 200, 0.55));
}

/* Detail line shown on hover or keyboard focus. Its space is ALWAYS reserved
   and only opacity animates: expanding it for real would grow the grid row,
   shift the sibling cards, and push the hero's bottom edge down (the shaky
   "background line" bug). margin-top auto anchors it above the cue. */
.vr-pane-reveal {
  display: block;
  opacity: 0;
  margin-top: auto;
  padding-top: 0.15rem;
  transition: opacity 0.3s ease;
}
.vr-pane-reveal > span {
  display: block;
  font-family: var(--vr-font-mono);
  font-size: 0.74rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--vr-teal);
  transform: translateY(4px);
  transition: transform 0.35s var(--vr-ease);
}
a.vr-pane:hover .vr-pane-reveal, a.vr-pane:focus-visible .vr-pane-reveal { opacity: 1; }
a.vr-pane:hover .vr-pane-reveal > span, a.vr-pane:focus-visible .vr-pane-reveal > span { transform: none; }

.vr-cue-arrow {
  display: inline-block;
  transition: transform 0.3s var(--vr-ease);
}
a.vr-pane:hover .vr-cue-arrow, a.vr-pane:focus-visible .vr-cue-arrow { transform: translateX(4px); }
a.vr-pane-how:hover .vr-cue-arrow, a.vr-pane-how:focus-visible .vr-cue-arrow { transform: translateY(3px); }
.vr-pane-choose  { grid-area: choose;  --pane-ry: 5deg;  --pane-z: 10px;  --pane-drift: 5px; }
.vr-pane-browse  { grid-area: browse;  --pane-ry: 0deg;  --pane-z: 22px;  --pane-drift: 3px; }
.vr-pane-start   { grid-area: start;   --pane-ry: -5deg; --pane-z: 10px;  --pane-drift: 5px; }
.vr-pane-lessons { grid-area: lessons; --pane-ry: 5deg;  --pane-z: -14px; --pane-drift: 7px; }
.vr-pane-learned { grid-area: learned; --pane-ry: 0deg;  --pane-z: -6px;  --pane-drift: 6px; }
.vr-pane-how     { grid-area: how;     --pane-ry: -5deg; --pane-z: -14px; --pane-drift: 7px; }

.vr-pane-kicker {
  font-family: var(--vr-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vr-teal);
}
.vr-pane-lane .vr-pane-kicker { color: var(--vr-orchid); }
.vr-pane h2 { margin: 0; font-size: 1.3rem; }
.vr-pane p { margin: 0; color: var(--vr-dim); font-size: 0.95rem; }
.vr-pane-cue {
  margin-top: 0;
  padding-top: 0.6rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--vr-teal);
}

/* gentle idle float on the registered property (never margins: margin
   animation shifts layout and lets stacked panels touch); staggered;
   killed under reduced motion */
@keyframes vr-float {
  0%, 100% { --float: 0px; }
  50% { --float: -5px; }
}
.vr-pane-start   { animation: vr-float 9s ease-in-out infinite; }
.vr-pane-choose  { animation: vr-float 11s ease-in-out 0.8s infinite; }
.vr-pane-browse  { animation: vr-float 10s ease-in-out 1.6s infinite; }
.vr-pane-learned { animation: vr-float 9.5s ease-in-out 0.4s infinite; }
.vr-pane-lessons { animation: vr-float 10.5s ease-in-out 2.1s infinite; }
.vr-pane-how     { animation: vr-float 9.8s ease-in-out 1.2s infinite; }

.vr-lane-remembered {
  display: inline-block;
  margin-top: 2.4rem;
  font-size: 0.9rem;
  color: var(--vr-dim);
}
.vr-lane-remembered[hidden] { display: none; }
.vr-lane-remembered a { font-weight: 600; }

/* Landing lower strip: the honest numbers, no store framing */
.vr-landing-below {
  max-width: 1180px;
  margin: 3.5rem auto 0;
  padding: 0 1.25rem;
}
.vr-landing-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
  margin-top: 1.25rem;
}
.vr-fact {
  border: 1px solid var(--vr-line-faint);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  background: rgba(18, 22, 46, 0.55);
}
.vr-fact .vr-mono { color: var(--vr-lavender); font-size: 0.8rem; }
.vr-fact p { margin: 0.2rem 0 0; color: var(--vr-dim); font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   Trust UI primitives: badges, marks, chips, axes
   -------------------------------------------------------------------------- */

.vr-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.14rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--vr-font-body);
  border: 1px solid var(--vr-line);
  color: var(--vr-dim);
  white-space: nowrap;
}
.vr-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* Review state: visible on every entry, presented as provisional */
.vr-review {
  border-color: rgba(240, 184, 107, 0.5);
  color: var(--vr-amber);
  background: rgba(240, 184, 107, 0.07);
}
.vr-review--reviewed, .vr-review--approved, .vr-review--published {
  border-color: rgba(47, 224, 200, 0.5);
  color: var(--vr-teal);
  background: rgba(47, 224, 200, 0.06);
}
.vr-review--stale, .vr-review--archived, .vr-review--draft {
  border-color: rgba(240, 138, 138, 0.5);
  color: var(--vr-rose);
  background: rgba(240, 138, 138, 0.06);
}

/* Inferred-value mark */
.vr-inferred-mark {
  color: var(--vr-lavender);
  font-weight: 700;
  cursor: help;
}

/* Plain-language result badges (guided lane, cards) */
.vr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 8px;
  padding: 0.22rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(47, 224, 200, 0.08);
  border: 1px solid rgba(47, 224, 200, 0.35);
  color: var(--vr-teal);
  max-width: 100%; /* long labels wrap instead of widening the page */
}
.vr-badge--caution {
  background: rgba(240, 184, 107, 0.08);
  border-color: rgba(240, 184, 107, 0.4);
  color: var(--vr-amber);
}
.vr-badge--risk {
  background: rgba(240, 138, 138, 0.08);
  border-color: rgba(240, 138, 138, 0.4);
  color: var(--vr-rose);
}
.vr-badge--info {
  background: rgba(185, 168, 240, 0.08);
  border-color: rgba(185, 168, 240, 0.4);
  color: var(--vr-lavender);
}

/* Three-axis relationship chips: strength / confidence / evidence */
.vr-axes {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.vr-axis {
  font-family: var(--vr-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  border-radius: 6px;
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--vr-line);
  color: var(--vr-dim);
  white-space: nowrap;
  cursor: help;
}
.vr-axis--strength-primary { border-color: rgba(192, 107, 240, 0.6); color: var(--vr-orchid); }
.vr-axis--strength-strong_secondary { border-color: rgba(192, 107, 240, 0.4); color: #cf9bf3; }
.vr-axis--strength-speculative { border-style: dashed; }
.vr-axis--evidence { color: var(--vr-teal); border-color: rgba(47, 224, 200, 0.4); }
.vr-axis--evidence-low { color: var(--vr-dim); border-color: var(--vr-line); }

/* Styled tooltip on hover/focus (title attribute stays as the fallback).
   display:none when idle: an opacity-0 box still has geometry and would
   widen the page near edges. */
.vr-tip { position: relative; }
.vr-tip::after {
  content: attr(data-tip);
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(300px, 80vw);
  white-space: normal;
  background: #1c2140;
  border: 1px solid var(--vr-line);
  color: var(--vr-ink);
  font-family: var(--vr-font-body);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.45;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 60;
}
.vr-tip:hover::after, .vr-tip:focus-visible::after { display: block; }

/* Freshness stamp */
.vr-fresh {
  font-family: var(--vr-font-mono);
  font-size: 0.75rem;
  color: var(--vr-faint);
  white-space: nowrap;
}

/* Score profile: 0-4 notches, one row per dimension, never a total */
.vr-scores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.55rem 2rem;
  margin: 1rem 0;
}
.vr-score-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.92rem;
}
.vr-score-row .vr-score-label { color: var(--vr-dim); }
.vr-score-notches { display: inline-flex; gap: 4px; }
.vr-score-notch {
  width: 17px;
  height: 7px;
  border-radius: 3px;
  background: rgba(185, 168, 240, 0.16);
}
.vr-score-notch--on { background: var(--vr-teal); }
.vr-score-num {
  font-family: var(--vr-font-mono);
  font-size: 0.75rem;
  color: var(--vr-faint);
  margin-left: 0.5rem;
}

/* --------------------------------------------------------------------------
   Cards (guided results, lesson list)
   -------------------------------------------------------------------------- */

.vr-card {
  border: 1px solid var(--vr-line-faint);
  border-radius: 14px;
  background: rgba(18, 22, 46, 0.6);
  padding: 1.25rem 1.35rem;
  transition: border-color 0.2s ease, box-shadow 0.3s var(--vr-ease);
}
.vr-card:hover {
  border-color: var(--vr-line);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.8);
}
.vr-card-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}
.vr-card-head h3 { margin: 0; font-size: 1.2rem; }
.vr-card-head h3 a { color: var(--vr-ink); }
.vr-card-head h3 a:hover { color: var(--vr-teal); }
.vr-card-sub { color: var(--vr-dim); font-size: 0.95rem; margin: 0 0 0.7rem; }
.vr-card-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0.2rem; }
.vr-card-why { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--vr-dim); }
.vr-card-why strong { color: var(--vr-lavender); font-weight: 600; }
.vr-card-meta {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--vr-line-faint);
}

/* --------------------------------------------------------------------------
   Guided lane: the wizard
   -------------------------------------------------------------------------- */

.vr-wizard { max-width: 880px; margin: 0 auto; }
.vr-wizard-progress {
  display: flex;
  gap: 0.4rem;
  margin: 1.5rem 0 2rem;
}
.vr-wizard-progress span {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: rgba(185, 168, 240, 0.16);
}
.vr-wizard-progress span.is-done { background: var(--vr-orchid); }
.vr-wizard-step h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
.vr-wizard-help { color: var(--vr-dim); margin-bottom: 1.4rem; }
.vr-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.vr-option {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  border: 1px solid var(--vr-line);
  border-radius: 12px;
  background: var(--vr-panel);
  color: var(--vr-ink);
  font-family: var(--vr-font-body);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.2s var(--vr-ease);
}
.vr-option:hover {
  border-color: rgba(47, 224, 200, 0.55);
  background: rgba(47, 224, 200, 0.07);
  transform: translateY(-1px);
}
.vr-option small { color: var(--vr-dim); font-weight: 400; font-size: 0.82rem; }
.vr-option--unsure { border-style: dashed; color: var(--vr-dim); }
.vr-wizard-back {
  background: none;
  border: none;
  color: var(--vr-dim);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.3rem 0;
  margin-bottom: 0.5rem;
}
.vr-wizard-back:hover { color: var(--vr-ink); }

/* Answers summary at results */
.vr-answers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.75rem;
}
.vr-answer-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--vr-line);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.88rem;
  color: var(--vr-ink);
  background: var(--vr-panel);
  cursor: pointer;
  font-family: var(--vr-font-body);
}
.vr-answer-chip:hover { border-color: var(--vr-teal); }
.vr-answer-chip .vr-mono { color: var(--vr-faint); font-size: 0.72rem; }
.vr-results-tier { margin: 2.25rem 0 0.75rem; }
.vr-results-tier h2 { margin-bottom: 0.2rem; }
.vr-results-tier p { color: var(--vr-dim); margin: 0 0 1rem; }
.vr-results-grid { display: grid; gap: 1rem; }
.vr-result-count { color: var(--vr-dim); font-size: 0.95rem; margin: 0.5rem 0 0; }
.vr-empty {
  border: 1px dashed var(--vr-line);
  border-radius: 14px;
  padding: 1.5rem;
  color: var(--vr-dim);
  margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   Table lane: the workbench (flat and instant, no spectacle)
   -------------------------------------------------------------------------- */

.vr-workbench { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.vr-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.9rem;
}
.vr-search {
  flex: 1 1 260px;
  position: relative;
}
.vr-search input {
  width: 100%;
  background: var(--vr-deep);
  border: 1px solid var(--vr-line);
  border-radius: 10px;
  color: var(--vr-ink);
  font: inherit;
  font-size: 0.95rem;
  padding: 0.55rem 0.9rem;
}
.vr-search input::placeholder { color: var(--vr-faint); }
.vr-search input:focus { border-color: var(--vr-teal); outline: none; }
.vr-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--vr-panel);
  border: 1px solid var(--vr-line);
  border-radius: 10px;
  color: var(--vr-ink);
  font-family: var(--vr-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.vr-btn:hover { border-color: var(--vr-teal); background: rgba(47, 224, 200, 0.07); text-decoration: none; }
.vr-btn--primary {
  background: var(--vr-orchid);
  border-color: var(--vr-orchid);
  color: #180a26;
}
.vr-btn--primary:hover { background: #cd85f3; border-color: #cd85f3; }
.vr-btn[aria-pressed="true"] { border-color: var(--vr-orchid); color: var(--vr-orchid); }

/* Filters */
.vr-filters {
  border: 1px solid var(--vr-line-faint);
  border-radius: 14px;
  background: rgba(18, 22, 46, 0.6);
  padding: 0.85rem;
  position: sticky;
  top: 4.25rem;
  max-height: calc(100vh - 5.5rem);
  overflow-y: auto;
}
.vr-filters h2 { font-size: 0.95rem; margin: 0.2rem 0.3rem 0.6rem; }
.vr-filter-group { border-top: 1px solid var(--vr-line-faint); }
.vr-filter-group:first-of-type { border-top: none; }
.vr-filter-group summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.3rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--vr-ink);
}
.vr-filter-group summary::-webkit-details-marker { display: none; }
.vr-filter-group summary::after {
  content: "+";
  color: var(--vr-faint);
  font-family: var(--vr-font-mono);
}
.vr-filter-group[open] summary::after { content: "\2212"; }
.vr-filter-group .vr-filter-active-count {
  font-family: var(--vr-font-mono);
  font-size: 0.7rem;
  color: var(--vr-orchid);
  margin-left: auto;
}
.vr-filter-options { padding: 0 0.3rem 0.7rem; display: flex; flex-direction: column; gap: 0.15rem; }
.vr-filter-options label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--vr-dim);
  padding: 0.18rem 0.2rem;
  border-radius: 6px;
  cursor: pointer;
}
.vr-filter-options label:hover { color: var(--vr-ink); background: var(--vr-panel); }
.vr-filter-options input {
  accent-color: var(--vr-orchid);
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.vr-filter-options .vr-opt-count { margin-left: auto; font-family: var(--vr-font-mono); font-size: 0.7rem; color: var(--vr-faint); }

.vr-active-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.8rem; }
.vr-active-chips .vr-answer-chip { font-size: 0.8rem; padding: 0.2rem 0.65rem; }
.vr-active-chips .vr-answer-chip b { font-weight: 600; color: var(--vr-lavender); }

/* The grid itself */
.vr-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--vr-line-faint);
  border-radius: 14px;
  background: rgba(18, 22, 46, 0.6);
}
.vr-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: 0.9rem;
}
.vr-table th, .vr-table td {
  text-align: left;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--vr-line-faint);
  vertical-align: top;
}
.vr-table thead th {
  position: sticky;
  top: 0;
  background: #161b38;
  color: var(--vr-lavender);
  font-family: var(--vr-font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
  user-select: none;
}
.vr-table thead th button {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.vr-table thead th button:hover { color: var(--vr-ink); }
.vr-table thead th .vr-sort-arrow { font-family: var(--vr-font-mono); font-size: 0.7rem; color: var(--vr-orchid); }
.vr-table tbody tr:hover { background: rgba(185, 168, 240, 0.05); }
.vr-table tbody tr:last-child td { border-bottom: none; }
.vr-table td { color: var(--vr-dim); }
.vr-table td.vr-cell-name { color: var(--vr-ink); font-weight: 600; white-space: nowrap; }
.vr-table td.vr-cell-name a { color: var(--vr-ink); }
.vr-table td.vr-cell-name a:hover { color: var(--vr-teal); }
.vr-table td .vr-mono { font-size: 0.78rem; }
.vr-table .vr-cell-unknown { color: var(--vr-faint); font-style: italic; }
.vr-table .vr-cell-good { color: var(--vr-teal); }
.vr-table .vr-cell-warn { color: var(--vr-amber); }
.vr-table .vr-cell-bad { color: var(--vr-rose); }

/* Column picker */
.vr-colpicker {
  position: relative;
}
.vr-colpicker-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  width: 300px;
  max-height: 380px;
  overflow-y: auto;
  background: #171c3b;
  border: 1px solid var(--vr-line);
  border-radius: 12px;
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.8);
  padding: 0.6rem;
}
.vr-colpicker-menu label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--vr-dim);
  padding: 0.22rem 0.3rem;
  border-radius: 6px;
  cursor: pointer;
}
.vr-colpicker-menu label:hover { color: var(--vr-ink); background: var(--vr-panel); }
.vr-colpicker-menu input { accent-color: var(--vr-teal); }
.vr-colpicker-actions { display: flex; gap: 0.5rem; padding: 0.4rem 0.3rem 0.1rem; }
.vr-colpicker-actions button {
  all: unset;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--vr-teal);
}

/* --------------------------------------------------------------------------
   App detail page
   -------------------------------------------------------------------------- */

.vr-app-header { padding-top: 2.5rem; }
.vr-app-header .vr-eyebrow { margin-bottom: 0.25rem; }
.vr-app-titlerow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.vr-app-titlerow h1 { margin: 0; }
.vr-app-oneliner { font-size: 1.1rem; color: var(--vr-dim); max-width: 75ch; margin: 0.6rem 0 0.9rem; }
.vr-app-links { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0.9rem 0 0; }
.vr-app-links a { font-size: 0.88rem; }
.vr-app-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.1rem; }
.vr-app-freshrow { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 1rem; }
/* header stamps can be long (age lists); let them wrap instead of widening the page */
.vr-app-freshrow .vr-fresh { white-space: normal; }

.vr-section {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--vr-line-faint);
}
.vr-section > h2 { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.vr-section-note { color: var(--vr-faint); font-size: 0.85rem; font-weight: 400; font-family: var(--vr-font-body); }

/* Audience tabs: rendered stacked, enhanced into tabs by JS */
.vr-tabs { margin-top: 0.5rem; }
.vr-tablist { display: none; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.vr-tabs.is-enhanced .vr-tablist { display: flex; }
.vr-tablist button {
  all: unset;
  cursor: pointer;
  border: 1px solid var(--vr-line);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--vr-dim);
}
.vr-tablist button[aria-selected="true"] {
  color: #180a26;
  background: var(--vr-orchid);
  border-color: var(--vr-orchid);
}
.vr-tabpanel > h3:first-child { margin-top: 0; }
.vr-tabs.is-enhanced .vr-tabpanel[hidden] { display: none; }
.vr-tabs:not(.is-enhanced) .vr-tabpanel + .vr-tabpanel { margin-top: 1.6rem; }
.vr-prose { max-width: 78ch; }
.vr-prose p { color: var(--vr-ink); }

.vr-twocol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.1rem;
}

/* App-page prose uses the full width by flowing into two columns on wide
   screens; list items keep themselves whole. */
@media (min-width: 1000px) {
  .vr-app .vr-prose { max-width: none; column-count: 2; column-gap: 3.5rem; }
  .vr-app .vr-prose li { break-inside: avoid; }
  .vr-app .vr-prose > p:first-of-type { margin-top: 0; }
}
.vr-panelcard {
  border: 1px solid var(--vr-line-faint);
  border-radius: 12px;
  background: rgba(18, 22, 46, 0.55);
  padding: 1.05rem 1.2rem;
}
.vr-panelcard h3 { margin-top: 0; font-size: 1rem; color: var(--vr-lavender); }
.vr-panelcard p:last-child, .vr-panelcard ul:last-child { margin-bottom: 0; }
.vr-panelcard--caution { border-color: rgba(240, 184, 107, 0.35); }
.vr-panelcard--caution h3 { color: var(--vr-amber); }

/* Relationship list */
.vr-rels { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
.vr-rel {
  border: 1px solid var(--vr-line-faint);
  border-radius: 12px;
  background: rgba(18, 22, 46, 0.55);
}
.vr-rel summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  padding: 0.7rem 1rem;
}
.vr-rel summary::-webkit-details-marker { display: none; }
.vr-rel summary:hover { background: rgba(185, 168, 240, 0.05); border-radius: 12px; }
.vr-rel-target { font-weight: 600; color: var(--vr-ink); }
.vr-rel-open {
  margin-left: auto;
  font-family: var(--vr-font-mono);
  font-size: 0.72rem;
  color: var(--vr-faint);
}
.vr-rel[open] .vr-rel-open .vr-rel-open-more, .vr-rel:not([open]) .vr-rel-open .vr-rel-open-less { display: none; }
.vr-rel-body { padding: 0.2rem 1rem 0.95rem; color: var(--vr-dim); font-size: 0.95rem; }
.vr-rel-body p { margin-bottom: 0.5rem; }
.vr-rel-sources { font-size: 0.82rem; }
.vr-rel-sources a { word-break: break-all; color: var(--vr-lavender); }

/* Logistics fact grid */
.vr-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
}
.vr-factcell {
  border: 1px solid var(--vr-line-faint);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  background: rgba(18, 22, 46, 0.45);
}
.vr-factcell .vr-factcell-label {
  font-family: var(--vr-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vr-faint);
  display: block;
  margin-bottom: 0.2rem;
}
.vr-factcell .vr-factcell-value { color: var(--vr-ink); font-weight: 600; font-size: 0.95rem; }
.vr-factcell .vr-factcell-value.is-unknown { color: var(--vr-faint); font-style: italic; font-weight: 400; }
.vr-factcell p { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--vr-dim); }

/* Long-form field rows (setup, casting notes, save behavior...) */
.vr-fieldrows { margin-top: 0.75rem; }
.vr-fieldrow {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--vr-line-faint);
}
.vr-fieldrow:last-child { border-bottom: none; }
.vr-fieldrow dt { color: var(--vr-lavender); font-weight: 600; font-size: 0.92rem; }
.vr-fieldrow dd { margin: 0; color: var(--vr-dim); font-size: 0.95rem; }

/* Region availability */
.vr-region-table td:first-child { white-space: nowrap; font-weight: 600; color: var(--vr-ink); }
.vr-region-note { font-size: 0.85rem; color: var(--vr-faint); max-width: 70ch; }

/* Limitations: content, not fine print */
.vr-limits { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.6rem; }
.vr-limit {
  border-left: 3px solid var(--vr-amber);
  border-radius: 0 10px 10px 0;
  background: rgba(240, 184, 107, 0.05);
  padding: 0.7rem 1rem;
  color: var(--vr-ink);
  font-size: 0.97rem;
}

/* Risks: severity-tagged rows */
.vr-risk p { margin: 0.25rem 0 0; font-size: 0.93rem; color: var(--vr-dim); }
.vr-risk-tag {
  font-family: var(--vr-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vr-amber);
}
.vr-risk--high { border-left-color: var(--vr-rose); }
.vr-risk--high .vr-risk-tag { color: var(--vr-rose); }
.vr-risk--low { border-left-color: var(--vr-line); }
.vr-risk--low .vr-risk-tag { color: var(--vr-dim); }

/* History (snapshots) */
.vr-history-table { font-size: 0.85rem; }

/* Sources */
.vr-sources { columns: 2; column-gap: 2rem; font-size: 0.85rem; margin-top: 0.75rem; }
.vr-sources li { margin-bottom: 0.35rem; break-inside: avoid; }
.vr-sources a { color: var(--vr-lavender); word-break: break-all; }

/* Review footer block */
.vr-reviewbox {
  border: 1px solid rgba(240, 184, 107, 0.3);
  border-radius: 12px;
  background: rgba(240, 184, 107, 0.05);
  padding: 1rem 1.2rem;
  font-size: 0.92rem;
  color: var(--vr-dim);
}
.vr-reviewbox strong { color: var(--vr-amber); }

/* Lesson pages */
.vr-lesson-md { max-width: 78ch; }
.vr-lesson-md h1, .vr-lesson-md h2 { margin-top: 1.8rem; }
.vr-lesson-md h1:first-child { margin-top: 0; }
.vr-lesson-md ul, .vr-lesson-md ol { color: var(--vr-ink); padding-left: 1.4rem; }
.vr-lesson-md li { margin-bottom: 0.35rem; }
.vr-lesson-md blockquote {
  margin: 1rem 0;
  padding: 0.2rem 1.1rem;
  border-left: 3px solid var(--vr-orchid);
  color: var(--vr-dim);
}
/* Lesson pages: prose beside a sticky rail so wide screens have no dead half */
.vr-lesson-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1rem 3.5rem;
  align-items: start;
  margin-top: 1.5rem;
}
.vr-lesson-rail {
  position: sticky;
  top: 4.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vr-lesson-rail h3 { margin-bottom: 0.5rem; }
.vr-lesson-rail p { margin: 0 0 0.6rem; font-size: 0.93rem; color: var(--vr-dim); }
.vr-lesson-rail p:last-child { margin-bottom: 0; }
.vr-rail-links { display: flex; flex-direction: column; gap: 0.5rem; }
.vr-rail-links .vr-btn { justify-content: flex-start; }
@media (max-width: 900px) {
  .vr-lesson-grid { grid-template-columns: minmax(0, 1fr); }
  .vr-lesson-rail { position: static; }
}

/* Markdown page (what we've learned) */
.vr-md { max-width: 78ch; }
.vr-md h2 { margin-top: 2.2rem; }
.vr-md ul, .vr-md ol { color: var(--vr-ink); padding-left: 1.4rem; }
.vr-md blockquote {
  margin: 1rem 0;
  padding: 0.2rem 1.1rem;
  border-left: 3px solid var(--vr-lavender);
  color: var(--vr-dim);
}
.vr-md hr { border: none; border-top: 1px solid var(--vr-line-faint); margin: 2rem 0; }
.vr-md table, .vr-lesson-md table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: 0.92rem;
}
.vr-md th, .vr-lesson-md th {
  text-align: left;
  color: var(--vr-lavender);
  font-family: var(--vr-font-display);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.vr-md th, .vr-md td, .vr-lesson-md th, .vr-lesson-md td {
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--vr-line-faint);
  vertical-align: top;
}
.vr-toc {
  border: 1px solid var(--vr-line-faint);
  border-radius: 12px;
  background: rgba(18, 22, 46, 0.55);
  padding: 0.9rem 1.2rem;
  margin: 1.25rem 0 2rem;
  font-size: 0.92rem;
}
.vr-toc ol { margin: 0.4rem 0 0; padding-left: 1.3rem; color: var(--vr-dim); }
.vr-toc a { color: var(--vr-lavender); }

/* Start-here checklist */
.vr-checklist { list-style: none; padding: 0; margin: 1rem 0; }
.vr-checklist li {
  position: relative;
  padding: 0.45rem 0 0.45rem 2rem;
  border-bottom: 1px solid var(--vr-line-faint);
}
.vr-checklist li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.85rem;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--vr-teal);
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .vr-dock {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "choose browse"
      "start lessons"
      "learned how";
    perspective: none;
  }
  .vr-pane { --pane-ry: 0deg; --pane-z: 0px; }
  /* minmax(0, ...) so the table's intrinsic width can never widen the page;
     the tablewrap scrolls internally instead */
  .vr-workbench { grid-template-columns: minmax(0, 1fr); }
  .vr-filters { position: static; max-height: none; }
}

@media (max-width: 640px) {
  .vr-dock { grid-template-columns: 1fr; grid-template-areas: "choose" "browse" "start" "lessons" "learned" "how"; }
  .vr-hero { padding-top: 3rem; }
  .vr-fieldrow { grid-template-columns: 1fr; gap: 0.15rem; }
  .vr-sources { columns: 1; }
  .vr-topbar-inner { padding: 0.55rem 0.9rem; }
  .vr-topbar-divider { display: none; }
  .vr-topnav { flex-basis: 100%; margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Reduced motion: static composition, everything readable
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .vr-body *, .vr-body *::before, .vr-body *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .vr-pane, .vr-stars, .vr-stars-2, .vr-headset { transform: none !important; }
  .vr-headset-glow { opacity: 0.7; }
  /* the detail lines stay visible instead of moving */
  .vr-pane-reveal { opacity: 1; }
  .vr-pane-reveal > span { transform: none; }
}

/* --------------------------------------------------------------------------
   Print: white paper, dark ink, no chrome
   -------------------------------------------------------------------------- */

@media print {
  .vr-body { background: #fff; color: #1a1a2e; }
  .vr-body h1, .vr-body h2, .vr-body h3, .vr-body h4, .vr-body p, .vr-table td, .vr-fieldrow dd, .vr-rel-body, .vr-prose p { color: #1a1a2e; }
  .vr-topbar, .vr-footer, .vr-hero-ambient, .vr-app-links, .vr-wizard-progress { display: none; }
  .vr-pane, .vr-card, .vr-panelcard, .vr-factcell, .vr-rel, .vr-tablewrap, .vr-limit, .vr-reviewbox {
    background: #fff;
    border-color: #ccc;
    box-shadow: none;
  }
  .vr-body a { color: #1a1a2e; text-decoration: underline; }
}