/* ============================================================
   retinoscopy-lesson.css — Voice lesson, retinoscopy page layer
   ─────────────────────────────────────────
   Loaded by retinoscopy.html after css/voice-lesson/voice-lesson.css
   (the shared player). Adds:
     · the mode-bar launcher (#btnVoiceLesson)
     · the reflex marks drawn on the canvas (js/retinoscopy/voice-lesson/
       reflex-marks.js), in the page's calm palette
       (retinoscopy-theme.css: with = ochre, against = brick, neutral = sage)
     · stacking above the page's own overlays (tour 9997, Learn 10000)
     · eye clearance: the docked panel never sits on the eye
   ============================================================ */

/* ── Launcher ─────────────────────────────────────────────────── */

.ret-voice-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--accent, #1F4B4C) 30%, transparent);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--surface, #fff), var(--accent-tint, #E4EEEE));
  color: var(--accent-strong, #163938);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.ret-voice-btn:hover { box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--accent, #1F4B4C) 55%, transparent); }
.ret-voice-btn:active { transform: scale(0.97); }
.ret-voice-btn:focus-visible { outline: 2px solid var(--accent, #1F4B4C); outline-offset: 2px; }
.ret-voice-btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.ret-voice-btn__icon { display: inline-flex; }
.ret-voice-btn__wave { display: inline-flex; gap: 2px; align-items: center; height: 12px; }
.ret-voice-btn__wave i {
  width: 2.5px; height: 100%; border-radius: 2px; background: currentColor; opacity: 0.7;
  animation: vl-wave 1.2s ease-in-out infinite;
}
.ret-voice-btn__wave i:nth-child(2) { animation-delay: 0.15s; }
.ret-voice-btn__wave i:nth-child(3) { animation-delay: 0.3s; }
html.vl-active .ret-voice-btn { background: var(--accent, #1F4B4C); color: var(--on-accent, #fff); }

/* Phones / compact shell: one-row mode bar → icon tile, like the Quick Tour. */
html.ret-compact .ret-voice-btn { flex: 0 0 auto; min-height: 46px; min-width: 46px; padding: 8px 10px; justify-content: center; }
@media (max-width: 760px) {
  .ret-voice-btn { padding: 6px 8px; font-size: 13px; }
}
html.ret-compact .ret-voice-btn__label,
html.ret-compact .ret-voice-btn__wave {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 760px) {
  .ret-voice-btn__label, .ret-voice-btn__wave {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) { .ret-voice-btn__wave i { animation: none; } }

/* ── Stacking: above the tours (9997) and Learn's welcome (10000) ── */

.vl-root { z-index: 10050; }

/* While a lesson runs the page's own guidance would talk over it. */
html.vl-active .ret-sweep-guide { visibility: hidden; }

/* ── Reflex marks ─────────────────────────────────────────────── */

.vl-rmarks {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  font-family: var(--vl-font);
  /* --rm-k undoes the desktop layout's zoom on .ret-app (set by reflex-marks.js),
     so every size below is in em and the text keeps its real size. */
  font-size: calc(16px * var(--rm-k, 1));
  direction: rtl;
}
.vl-rmarks[dir="ltr"] { direction: ltr; }

.vl-rm {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  --ink: #fff;
  --tone: #E9D7A8;
}
.vl-rm.is-in { opacity: 1; }

/* Centre-anchored parts sit on the pupil (--x, --y from the live geometry). */
.vl-rm__axis,
.vl-rm__ring {
  position: absolute;
  left: var(--x);
  top: var(--y);
}

/* sweep / meridian / streak: a line through the pupil, rotated live */
.vl-rm__axis {
  width: calc(var(--cornea, 80px) * 2.25);
  height: 22px;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  transition: transform 0.35s var(--vl-ease, ease);
}
.vl-rm__axis svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vl-rm__shaft, .vl-rm__head {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.75));
}
.vl-rm__shaft { stroke-dasharray: 7 7; animation: vl-rm-flow 0.9s linear infinite; }
@keyframes vl-rm-flow { to { stroke-dashoffset: -14; } }
.vl-rm__band {
  fill: none;
  stroke: var(--tone);
  stroke-width: 9;
  stroke-linecap: round;
  opacity: 0.38;
  vector-effect: non-scaling-stroke;
}
.vl-rm--streak .vl-rm__band { stroke: #fff; stroke-width: 4; opacity: 0.55; stroke-dasharray: 2 6; }
.vl-rm--meridian .vl-rm__axis { width: calc(var(--cornea, 80px) * 2.05); }
.vl-rm--meridian.is-in .vl-rm__band { animation: vl-rm-glow 2.2s ease-in-out infinite; }
@keyframes vl-rm-glow { 0%, 100% { opacity: 0.28; } 50% { opacity: 0.5; } }

.vl-rm__ring {
  width: calc(var(--r, 30px) * 2 + 14px);
  height: calc(var(--r, 30px) * 2 + 14px);
  border-radius: 50%;
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 16px rgba(255, 255, 255, 0.35);
  transform: translate(-50%, -50%);
  animation: vl-rm-breathe 2s ease-in-out infinite;
}
@keyframes vl-rm-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.06); } }

/* Labels: small dark pills, clear of the pupil */
.vl-rm__label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  padding: 0.2em 0.75em 0.28em;
  border-radius: 999px;
  background: rgba(14, 24, 23, 0.82);
  color: #fff;
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.vl-rm--pupil .vl-rm__label,
.vl-rm--meridian .vl-rm__label,
.vl-rm--streak .vl-rm__label { transform: translate(-50%, calc(-1 * var(--cornea, 80px) - 100% - 8px)); }
.vl-rm--pupil .vl-rm__label { transform: translate(-50%, calc(-1 * var(--r, 30px) - 100% - 16px)); }
.vl-rm--sweep .vl-rm__label { transform: translate(-50%, calc(var(--cornea, 80px) + 8px)); }
.vl-rm--meridian .vl-rm__label { background: color-mix(in srgb, var(--ret-with-ink, #6E4C10) 88%, transparent); }

/* Motion badge: the top corner of the eye view — it never covers the pupil. */
.vl-rm__badge {
  position: absolute;
  top: 0.65em;
  left: 0.65em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.8em 0.4em 0.55em;
  border-radius: 0.9em;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border-soft, #E2E8E6);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45);
  color: var(--text, #15201E);
  direction: rtl;
}
.vl-rm__icon { display: inline-flex; width: 1.9em; height: 1.5em; color: var(--text-faint, #63706D); }
.vl-rm__icon svg { width: 100%; height: 100%; overflow: visible; }
.vl-rm__line { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vl-rm__line--soft { opacity: 0.45; }
.vl-rm__fill { fill: currentColor; }
.vl-rm__text { display: grid; line-height: 1.25; }
.vl-rm__text b { font-size: 1.1em; font-weight: 800; }
.vl-rm__text small { font-size: 0.72em; color: var(--text-soft, #44514E); }
.vl-rm--motion[data-motion="with"] .vl-rm__badge { background: var(--ret-with-tint, #F7F0E2); border-color: var(--ret-with, #B48A3C); }
.vl-rm--motion[data-motion="with"] :is(b, .vl-rm__icon) { color: var(--ret-with-ink, #6E4C10); }
.vl-rm--motion[data-motion="against"] .vl-rm__badge { background: var(--ret-against-tint, #F7EAE7); border-color: var(--ret-against, #B35D52); }
.vl-rm--motion[data-motion="against"] :is(b, .vl-rm__icon) { color: var(--ret-against-ink, #83342B); }
.vl-rm--motion[data-motion="neutral"] .vl-rm__badge { background: var(--ret-ok-tint, #E8F3ED); border-color: var(--ret-ok, #3F8A68); }
.vl-rm--motion[data-motion="neutral"] :is(b, .vl-rm__icon) { color: var(--ret-ok-ink, #22603F); }
.vl-rm--motion.is-pulse .vl-rm__badge { animation: vl-rm-pulse 0.6s var(--vl-ease, ease); }
@keyframes vl-rm-pulse { 0% { transform: scale(0.9); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* "Approaching neutral" meter: bottom of the eye view. */
.vl-rm__meter {
  position: absolute;
  left: 50%;
  bottom: 0.65em;
  width: min(15em, calc(100% - 1.3em));
  padding: 0.4em 0.75em 0.5em;
  border-radius: 0.9em;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border-soft, #E2E8E6);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%);
  direction: rtl;
}
.vl-rm__meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.vl-rmarks[dir="ltr"] :is(.vl-rm__badge, .vl-rm__meter) { direction: ltr; }
.vl-rm__meter-head b { font-size: 0.82em; font-weight: 700; color: var(--text, #15201E); }
.vl-rm__meter-head small { font-size: 0.75em; color: var(--text-soft, #44514E); font-variant-numeric: tabular-nums; }
.vl-rm__track {
  display: block;
  height: 0.4em;
  margin-top: 0.3em;
  border-radius: 6px;
  background: var(--border-soft, #E2E8E6);
  overflow: hidden;
  direction: ltr;
}
.vl-rm__track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--ret-info, #56789C);
  transition: width 0.45s var(--vl-ease, ease), background 0.3s;
}
.vl-rm--meter[data-phase="near"] .vl-rm__track i { background: var(--ret-with, #B48A3C); }
.vl-rm--meter[data-phase="done"] .vl-rm__track i { background: var(--ret-ok, #3F8A68); }
.vl-rm--meter[data-phase="done"] .vl-rm__meter-head b { color: var(--ret-ok-ink, #22603F); }

/* Small eye views (phones): everything a notch smaller, still ≥ 11 px text. */
@media (max-width: 420px) {
  .vl-rmarks { font-size: calc(15px * var(--rm-k, 1)); }
}

@media (prefers-reduced-motion: reduce) {
  .vl-rm__shaft, .vl-rm__ring, .vl-rm--meridian.is-in .vl-rm__band, .vl-rm--motion.is-pulse .vl-rm__badge { animation: none; }
}

/* ── Eye clearance ────────────────────────────────────────────── */
/* The docked panel (height published as --vl-panel-h) must never sit on the
   eye. The page gets matching bottom padding from voice-lesson.css; where the
   eye is pinned (phone stage, desktop pinned column), it is also capped to the
   space above the panel. Tuned by scripts/test-retinoscopy-voice-lesson.mjs. */
html.vl-active .vl-panel { width: min(680px, calc(100vw - 24px)); }

/* Tablets and desktops: the eye fits between the sticky site header
   (--vl-top, set by retinoscopy-lesson.js; 0 when embedded) and the panel. */
@media (min-width: 761px) {
  html.vl-active .ret-canvas-wrap {
    max-height: calc(100dvh - var(--vl-top, 0px) - var(--vl-panel-h, 0px) - 40px);
  }
}
/* Desktop density (workspace-density.css): .ret-app is zoomed to 75 %, so a
   length inside it renders at ¾ — size it ×4/3 to get the visual height. */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  html.vl-active .ret-canvas-wrap {
    height: clamp(240px, calc((100dvh - var(--vl-top, 0px) - var(--vl-panel-h, 0px) - 40px) * 4 / 3), 720px);
    max-height: none;
  }
}

/* Short screens (phones on their side, desktops zoomed in): the eye cannot
   fit above a bottom panel, so retinoscopy-lesson.js sets data-vl-dock and the
   eye takes the full height under the site header; the overlay then places
   the panel beside it, clear of the eye and of the target (placePanel). When
   no side has room the eye moves to the right edge (data-vl-push). */
html[data-vl-dock] .ret-canvas-wrap {
  max-height: calc(100dvh - var(--vl-top, 0px) - 24px);
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  html[data-vl-dock] .ret-canvas-wrap {
    height: clamp(240px, calc((100dvh - var(--vl-top, 0px) - 24px) * 4 / 3), 720px);
  }
}
html[data-vl-push="right"] .ret-canvas-wrap {
  width: min(100%, calc(100dvh - var(--vl-top, 0px) - 24px));
  height: auto;
  max-height: none;
  aspect-ratio: 1;
  /* physical: the wrapper itself is dir="ltr", the page around it RTL or LTR */
  margin-left: auto;
  margin-right: 0;
}

/* ── Writing the prescription (js/retinoscopy/voice-lesson/rx-card.js) ── */

/* The write-up cards can be tall: the panel scrolls instead of leaving the screen. */
html.vl-active .vl-panel { max-height: calc(100dvh - var(--vl-top, 0px) - 16px); overflow-y: auto; overscroll-behavior: contain; }
html[data-vl-card-side] .vl-panel { max-height: var(--vl-card-h); }
html[data-vl-card-side="left"] .vl-panel,
html[data-vl-card-side="right"] .vl-panel {
  width: var(--vl-card-w) !important;
  top: auto !important;
  bottom: 14px !important;
  transform: none !important;
}
html[data-vl-card-side="left"] .vl-panel { left: 12px !important; right: auto !important; }
html[data-vl-card-side="right"] .vl-panel { right: 12px !important; left: auto !important; }
.vl-ret-reading { display: contents; }
.vl-ret-scroll-hint { display: none; }
@media (max-width: 760px) and (orientation: portrait) {
  /* The lesson owns the case and eye. Reclaim that repeated context while
     reading a prescription, keeping the live eye above a bounded player. */
  html[data-vl-card-side="bottom"] :is(.ret-viewport-header, .ret-learning-levels, .ret-mode-bar),
  html[data-vl-card-side="bottom"] .site-header .tab-bar { display: none; }
  html[data-vl-card-side="bottom"] :is(.ret-primary-controls, .ret-secondary) { display: none; }
  html[data-vl-card-side="bottom"] :is(.vl-spot, .vl-pointer) { visibility: hidden; }
  html[data-vl-card-side="bottom"] .ret-viewport-card {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
  }
  html[data-vl-card-side="bottom"] .ret-stage {
    position: fixed;
    top: calc(var(--vl-top, 56px) + 12px);
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    width: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  html[data-vl-card-side="bottom"] .ret-stage > :not(.ret-canvas-wrap) { display: none; }
  html[data-vl-card-side="bottom"] .ret-stage .ret-canvas-wrap {
    width: var(--vl-card-eye-size, 240px);
    height: auto;
    aspect-ratio: 1;
    margin-inline: auto;
  }
  html[data-vl-card-side="bottom"] .vl-panel {
    display: flex;
    flex-direction: column;
    height: var(--vl-card-h);
    overflow: hidden;
  }
  html[data-vl-card-side="bottom"] .vl-panel > * { flex-shrink: 0; }
  html[data-vl-card-side="bottom"] .vl-ret-reading {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  html[data-vl-card-side="bottom"] .vl-caption {
    min-height: 0;
    max-height: none;
    overflow: visible;
    font-size: 14px;
    line-height: 1.55;
  }
  html[data-vl-card-side="bottom"] .vl-summary {
    margin-block: 8px 0;
    overflow: visible;
  }
  html[data-vl-card-side="bottom"] .vl-controls { margin-top: 8px; }
  html[data-vl-card-side="bottom"] .vl-ret-scroll-hint:not([hidden]) {
    display: block;
    margin: 5px 0 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--accent, #1F4B4C);
  }
  html[data-vl-card-side="bottom"] .vl-panel__title { margin-block: 4px; }
  html[data-vl-card-side="bottom"] .vl-summary--rich { padding: 8px 10px; }
  html[data-vl-card-side="bottom"] .vl-rx__script { flex-wrap: nowrap; gap: 3px; padding: 8px 4px; }
  html[data-vl-card-side="bottom"] .vl-rx__tok { padding: 3px 4px; gap: 3px; }
  html[data-vl-card-side="bottom"] .vl-rx__tok b,
  html[data-vl-card-side="bottom"] .vl-rx__sep { font-size: 16px; }
  html[data-vl-card-side="bottom"] .vl-rx__tok small { font-size: 10.5px; }
}
.vl-summary--rich { padding: 12px 14px; }

.vl-rx__title { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--accent, #1F4B4C); }
.vl-rx__row { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); gap: 14px; align-items: center; }
.vl-rx__fig { margin: 0; }
.vl-rx__svg { display: block; width: 100%; height: auto; direction: ltr; }
.vl-rx__ring { fill: none; stroke: var(--border, #D3DBD9); stroke-width: 1.2; stroke-dasharray: 3 4; }
.vl-rx__m { stroke: var(--text-soft, #44514E); stroke-width: 3; stroke-linecap: round; }
.vl-rx__m--90 { stroke: var(--ret-against, #B35D52); }
.vl-rx__m--180 { stroke: var(--ret-info, #56789C); }
.vl-rx__deg { font: 600 10px/1 'IBM Plex Sans', system-ui, sans-serif; fill: var(--text-faint, #63706D); }
.vl-rx__tag { fill: var(--surface, #fff); stroke: var(--border, #D3DBD9); }
.vl-rx__val { font: 700 13px/1 'IBM Plex Mono', ui-monospace, monospace; fill: var(--text, #15201E); }

.vl-rx__list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.vl-rx__list li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 4px 8px; border-radius: 8px; background: var(--surface, #fff); }
.vl-rx__k { font-size: 12.5px; color: var(--text-soft, #44514E); }
.vl-rx__eq { font: 500 13.5px/1.4 'IBM Plex Mono', ui-monospace, monospace; color: var(--text-soft, #44514E); }
.vl-rx__eq b { color: var(--text, #15201E); font-size: 15px; }
.vl-rx__pill { display: inline-block; margin: 0 0 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.vl-rx__pill.is-ok { background: var(--ret-ok-tint, #E8F3ED); color: var(--ret-ok-ink, #22603F); }
.vl-rx__pill.is-warn { background: var(--ret-with-tint, #F7F0E2); color: var(--ret-with-ink, #6E4C10); }
.vl-rx__note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-soft, #44514E); }

/* The written Rx: each part labelled underneath (LTR, as it is written). */
.vl-rx__script {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 6px 8px;
  padding: 12px 10px 10px; border-radius: 12px; background: var(--surface, #fff);
  border: 1px solid var(--border-soft, #E2E8E6);
}
.vl-rx__tok { display: grid; justify-items: center; gap: 4px; padding: 4px 8px 5px; border-radius: 9px; }
.vl-rx__tok b { font: 700 21px/1.1 'IBM Plex Mono', ui-monospace, monospace; color: var(--text, #15201E); }
.vl-rx__tok small { font-size: 11.5px; color: var(--text-soft, #44514E); direction: rtl; white-space: nowrap; }
.vl-root[dir="ltr"] .vl-rx__tok small { direction: ltr; }
.vl-rx__tok.is-eye { background: var(--accent-tint, #E4EEEE); }
.vl-rx__tok.is-eye b { color: var(--accent-strong, #163938); }
.vl-rx__tok.is-sph { background: var(--ret-info-tint, #E7EEF5); }
.vl-rx__tok.is-cyl { background: var(--ret-against-tint, #F7EAE7); }
.vl-rx__tok.is-axis { background: var(--ret-with-tint, #F7F0E2); }
.vl-rx__tok.is-unit { background: var(--surface-sunken, #F3F6F5); }
.vl-rx__sep { padding-top: 5px; font: 600 21px/1.1 'IBM Plex Mono', ui-monospace, monospace; color: var(--text-faint, #63706D); }
.vl-rx__alt { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 13px; color: var(--text-soft, #44514E); }
.vl-rx__alt b { font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--text, #15201E); }
.vl-rx__rules { margin: 10px 0 0; padding-inline-start: 18px; display: grid; gap: 3px; font-size: 13px; line-height: 1.65; color: var(--text, #15201E); }
.vl-rx__rules li::marker { color: var(--accent, #1F4B4C); }

/* Diagnosis */
.vl-rx__dx { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; }
.vl-rx__dx div { display: grid; gap: 1px; }
.vl-rx__dx dt { font-size: 11.5px; color: var(--text-soft, #44514E); }
.vl-rx__dx dd { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.55; color: var(--text, #15201E); }
.vl-rx__legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vl-rx__legend span { padding: 3px 9px; border-radius: 8px; background: var(--surface, #fff); border: 1px solid var(--border-soft, #E2E8E6); font-size: 12px; color: var(--text-soft, #44514E); }
.vl-rx__legend b { color: var(--text, #15201E); }
.vl-rx__decision {
  margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.7;
  background: var(--ret-ok-tint, #E8F3ED); color: var(--ret-ok-ink, #22603F);
  border-inline-start: 3px solid var(--ret-ok, #3F8A68);
}
.vl-rx__decision b { margin-inline-end: 6px; }

@media (max-width: 520px) {
  .vl-rx__row { grid-template-columns: 1fr; gap: 8px; }
  .vl-rx__fig { max-width: 170px; margin-inline: auto; }
  .vl-rx__dx { grid-template-columns: 1fr; }
  .vl-rx__tok b, .vl-rx__sep { font-size: 18px; }
  .vl-rx__tok { padding: 3px 6px 4px; }
}