/* _shared.css — the reusable DOM+CSS "chrome" for /learn visualization modules: instruction
   bullets, slider-group boxes, colour-accented readout cards, the live equation strip, note.
   Neutral `.lv-*` namespace; the `_base.js` helpers emit this markup so every viz looks
   consistent. Linked once on any viz-bearing lesson. Sliders/buttons reuse `.lx-viz-*` from
   17-learn.css. (The legacy `collision_dom` keeps its own `.cxd-*` chrome in its own sheet.)

   Palette: a MUTED steel-blue "chrome" on the site's deep navy, so the frame recedes into the
   page background (matching the shell's #01040e base + cyan→blue→indigo brand, 01-shell.css).
   The BRIGHT per-variable DATA colours — amber (a) · sky (b) · pink (c) · green (d) — the
   readout values, and the card accents are what pop. All sizes / glow live in tokens on `.lv`. */

.lv {
  /* ── design tokens: one place to retune palette · sizes · glow intensity ───────────── */
  --lv-steel: #8fa8cf;                        /* neutral chrome line / curve / marker (muted steel-blue) */
  --lv-steel-soft: #6b86b5;                   /* deeper steel for secondary strokes */
  --lv-edge: rgba(104, 130, 176, 0.5);        /* chrome borders */
  --lv-glow: rgba(40, 72, 140, 0.42);         /* near bloom — deep + muted, blends into the navy */
  --lv-glow-far: rgba(28, 54, 118, 0.22);     /* far bloom */
  --lv-ink: #e9eef8;                          /* bright readout text */
  --lv-ink-soft: #9fb0c4;                     /* muted eyebrow / sub text */
  --lv-radius: 0.72rem;
  --lv-eq-size: clamp(1.25rem, 1.04rem + 0.95vw, 1.55rem);
  --lv-rval-size: 1.4rem;
  --lv-rlabel-size: 0.72rem;
  --vc: var(--lv-steel);                      /* default slider-knob / accent colour (per-variable overrides it inline) */

  display: flex; flex-direction: column; gap: 0.95rem;
}
.lv-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.7rem 0.9rem; }   /* shared slider row for every graph type */

/* Match the viz title + subtitle to a lesson step's headline + body text. These rules are in a
   later sheet (and the title rule adds specificity via `>`), so they override the template's
   Tailwind utilities — no Tailwind rebuild needed. */
.lx-visualization > h2 { font-size: 1.5rem; }                            /* title  = step ## headline (.code-prose h2 = 1.5rem) */
.lx-viz-goal { position: relative; padding-left: 1.3rem; font-size: 1.125rem; line-height: 1.7; color: #cbd5e1; }  /* subtitle = a bulleted step body line */
.lx-viz-goal::before { content: ""; position: absolute; left: 0.28rem; top: 0.85em; width: 0.42rem; height: 0.42rem; border-radius: 999px; background: var(--lv-steel); transform: translateY(-50%); }
.lx-viz-goal strong, .lx-viz-goal b { color: #f1f5f9; }                 /* **bold** terms in the subtitle stand out */
/* the two intro bullets (equation anchor + subtitle) share one boxed panel, like the other boxes */
.lx-viz-intro { padding: 0.7rem 0.9rem; border-radius: var(--lv-radius); background: rgba(8, 14, 30, 0.55); border: 1px solid rgba(104, 130, 176, 0.22); }
.lx-viz-intro > :first-child { margin-top: 0; }

/* the general-form equation anchor — a bullet directly under the title (e.g. y = ax² + bx + c), so
   the student always sees what they're manipulating. Required for graph viz; the bold variables are
   colour-coded, tying the equation to the slider thumbs + the plotted curve. */
.lx-viz-eqn {
  position: relative; margin-top: 0.55rem; padding-left: 1.3rem;
  font-size: 1.25rem; line-height: 1.45; color: #eaf1fb; font-variant-numeric: tabular-nums;
}
.lx-viz-eqn::before {
  content: ""; position: absolute; left: 0.28rem; top: 0.72em;
  width: 0.44rem; height: 0.44rem; border-radius: 999px; background: var(--lv-steel); transform: translateY(-50%);
}
.lx-viz-eqn p { margin: 0; }
/* the anchor's bold terms ARE the variables, in order → colour them to match the sliders/knobs */
.lx-viz-eqn strong, .lx-viz-eqn b { font-weight: 700; }
.lx-viz-eqn strong:nth-of-type(1) { color: #fbbf24; }   /* a — amber */
.lx-viz-eqn strong:nth-of-type(2) { color: #38bdf8; }   /* b — sky */
.lx-viz-eqn strong:nth-of-type(3) { color: #f472b6; }   /* c — pink */
.lx-viz-eqn strong:nth-of-type(4) { color: #34d399; }   /* d — green */
/* per-variable spans for prose (e.g. the subtitle, where bold also marks concept words) */
.vc-a { color: #fbbf24; } .vc-b { color: #38bdf8; } .vc-c { color: #f472b6; } .vc-d { color: #34d399; }
.vc-a, .vc-b, .vc-c, .vc-d { font-weight: 700; }
/* concept colours — match the readout-card accents (amber · green · cyan · steel-blue) */
.ca-amber { color: #fed7aa; } .ca-green { color: #a7f3d0; } .ca-cyan { color: #a5f3fc; } .ca-violet { color: #c7d3ea; }
.ca-amber, .ca-green, .ca-cyan, .ca-violet { font-weight: 700; }

/* instruction bullets above the widget — RETIRED (2026-07-11 user pass): the widgets are
   self-evident and the how-to lines read as clutter, so they are hidden site-wide. Most
   modules still inline the <ul class="lv-howto"> markup (and _base.js howto() now returns
   ""); keep this as display:none rather than deleting so any straggler stays invisible. */
.lv-howto { display: none; }
/* slider header reads "a = 1.0": the variable NAME is the headline, the value is secondary */
.lv .lx-viz-control-top { justify-content: flex-start; gap: 0.3rem; }
.lv-cvar { font-size: 1.2rem; font-weight: 700; color: #f1f5f9; }
.lv-ceq  { font-size: 1.05rem; color: #94a3b8; }
.lv-cval { font-size: 1.05rem; font-weight: 600; color: #cbd5e1; }

/* polished range slider — a recessed dark track + a raised gradient thumb with a colour-tied glow
   ring (the ring + bloom take the knob's own --vc, so amber knobs glow amber, etc.). */
.lv .lx-viz-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 0.45rem; margin: 0.35rem 0;
  border-radius: 999px; cursor: pointer; outline: none;
  background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.32);
}
.lv .lx-viz-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -0.35rem;
  width: 1.15rem; height: 1.15rem; border-radius: 999px;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 52%), var(--vc, #8fa8cf);
  border: 2px solid #0d1424;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 10px color-mix(in srgb, var(--vc, #8fa8cf) 45%, transparent), 0 0 0 5px color-mix(in srgb, var(--vc, #8fa8cf) 20%, transparent);
  cursor: pointer; transition: box-shadow 0.12s ease;
}
.lv .lx-viz-range:hover::-webkit-slider-thumb,
.lv .lx-viz-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 14px color-mix(in srgb, var(--vc, #8fa8cf) 55%, transparent), 0 0 0 6px color-mix(in srgb, var(--vc, #8fa8cf) 30%, transparent);
}
.lv .lx-viz-range::-moz-range-track { height: 0.45rem; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.lv .lx-viz-range::-moz-range-thumb {
  width: 1.15rem; height: 1.15rem; border: 2px solid #0d1424; border-radius: 999px;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 52%), var(--vc, #8fa8cf);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 10px color-mix(in srgb, var(--vc, #8fa8cf) 45%, transparent); cursor: pointer;
}

/* controls grouped in colour-coded boxes (optional, like the momentum A/B groups) */
.lv-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.lv-cgroup {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 0.65rem 0.8rem 0.75rem; border-radius: 0.65rem;
  border: 1px solid var(--cg, rgba(104, 130, 176, 0.2)); background: rgba(255, 255, 255, 0.03);
}
.lv-cghead { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.92rem; color: #e8eef6; }
.lv-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.3rem; height: 1.3rem; border-radius: 999px;
  font-weight: 800; font-size: 0.78rem; color: #07121d; background: var(--chip, #94a3b8);
}
.lv-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* a diagram/section caption line */
.lv-bartitle { color: #dbe4ef; font-size: 0.95rem; font-weight: 650; }
.lv-bartitle span { color: #8aa0b6; font-weight: 500; }

/* ── readout cards — VALUE-FIRST + accent glow ──────────────────────────────────────────
   the big number/value is the headline; the concept name is a small eyebrow above it. The
   grid is count-aware so a trimmed readout never looks lopsided (1 → full, 3 → three-up,
   2 and 4 use the default two-column = a tidy single row or 2×2). */
.lv-readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.lv-readout:has(> .lv-rcard:only-child) { grid-template-columns: 1fr; }
.lv-readout:has(> .lv-rcard:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lv-rcard {
  position: relative; overflow: hidden; min-height: 4.2rem;
  padding: 0.62rem 0.85rem 0.66rem 1.05rem; border-radius: var(--lv-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.3));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 22px var(--rc-glow, rgba(40, 72, 140, 0.18)), 0 3px 7px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.lv-rcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0.28rem; background: var(--rc, #6b86b5); box-shadow: 0 0 12px var(--rc, #6b86b5); }
/* card: a small uppercase eyebrow (concept name), then the value as the bold headline, then detail */
.lv-rlabel { display: block; font-size: var(--lv-rlabel-size); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--lv-ink-soft); }
.lv-rval { display: block; margin-top: 0.16rem; font-weight: 700; font-size: var(--lv-rval-size); line-height: 1.14; color: #ffffff; font-variant-numeric: tabular-nums; }
.lv-rsub { display: block; margin-top: 0.14rem; font-size: 0.74rem; color: #8a9bb0; font-variant-numeric: tabular-nums; }
/* accent helpers (a module adds one per card): set the bar/glow colour + tint the eyebrow */
.lv-rc-cyan   { --rc: #22d3ee; --rc-glow: rgba(34, 211, 238, 0.2);  } .lv-rc-cyan   .lv-rlabel { color: #7fd4e6; }
.lv-rc-amber  { --rc: #fb923c; --rc-glow: rgba(251, 146, 60, 0.22); } .lv-rc-amber  .lv-rlabel { color: #e8b58c; }
.lv-rc-green  { --rc: #34d399; --rc-glow: rgba(52, 211, 153, 0.2);  } .lv-rc-green  .lv-rlabel { color: #86dcbe; }
/* legacy class name kept (144 modules call card(…, "violet")); recoloured to the steel-blue chrome */
.lv-rc-violet { --rc: #8fa8cf; --rc-glow: rgba(40, 72, 140, 0.28); border-color: rgba(104, 130, 176, 0.3); } .lv-rc-violet .lv-rlabel { color: #a9c0e2; }

/* ── the LIVE result strip — sits directly above the sliders, the hero feedback as you drag ──
   big, bright, with a deep muted-blue bloom so it reads instantly without shouting. (The
   letter-form anchor is up under the title; this carries the current numbers.) */
.lv-eq {
  margin: 0; text-align: center;
  padding: 0.7rem 1rem; border-radius: var(--lv-radius);
  background: linear-gradient(180deg, rgba(22, 40, 80, 0.6), rgba(8, 13, 28, 0.9));
  border: 1px solid var(--lv-edge);
  box-shadow: 0 0 30px var(--lv-glow), 0 0 60px var(--lv-glow-far), inset 0 0 0 1px rgba(120, 145, 190, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--lv-ink); font-size: var(--lv-eq-size); line-height: 1.4; font-weight: 600; font-variant-numeric: tabular-nums;
}
.lv-eq b { color: #ffffff; font-weight: 700; }
.lv-note {
  margin: 0; padding: 0.55rem 0.75rem;
  border: 1px solid rgba(251, 191, 36, 0.32); border-radius: var(--lv-radius);
  background: rgba(251, 191, 36, 0.08); color: #fcd34d; font-size: 0.85rem;
}

/* ── graph kit (makeGraph in _base.js): a fixed-viewBox SVG plot ──────────────────────── */
.lv-stage {
  border: 1px solid rgba(104, 130, 176, 0.16); border-radius: 0.8rem; padding: 0; overflow: hidden;
  background:
    radial-gradient(circle at 50% 14%, rgba(48, 78, 142, 0.12), transparent 55%),
    linear-gradient(180deg, #0a0f1a, #06090f);
}
.lv-graph { display: block; width: 100%; height: auto; color: rgba(203, 213, 225, 0.6); }
.lv-plot { fill: rgba(0, 0, 0, 0.22); stroke: none; }   /* a darker backdrop, NO border — the bordered .lv-stage is the only box */
.lv-grid { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.lv-axis { stroke: rgba(203, 213, 225, 0.55); stroke-width: 1.3; }
.lv-tick { fill: #97a6ba; font-size: 9px; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: rgba(15, 23, 42, 0.85); stroke-width: 2.4px; stroke-linejoin: round; }   /* halo so on-axis labels read over the grid */
.lv-axislabel { fill: #aebdce; font-size: 11px; font-weight: 600; font-style: italic; paint-order: stroke; stroke: #0b1220; stroke-width: 3px; stroke-linejoin: round; }   /* halo so a curve grazing the axis title (e.g. a steep zero-crossing at the frame edge) passes visually behind it */
.lv-curve { stroke: var(--lv-steel, #8fa8cf); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(80, 115, 185, 0.55)); }
.lv-mk-dot { fill: #34d399; stroke: #04130c; stroke-width: 0.8; }
.lv-mk-int { fill: #22d3ee; }
.lv-mk-star { fill: #fbbf24; stroke: #3a2a05; stroke-width: 0.6; }
.lv-mk-infl { fill: #8fa8cf; stroke: #0b1220; stroke-width: 0.6; }
.lv-tangent { fill: none; stroke: #fbbf24; stroke-width: 2; stroke-dasharray: 5 3; }   /* calculus: tangent line */
.lv-mk-tan { fill: #fbbf24; stroke: #1a1205; stroke-width: 0.6; }
.lv-area { fill: rgba(56, 189, 248, 0.22); stroke: none; }                              /* calculus: shaded ∫ region */
.lv-bar { fill: rgba(56, 189, 248, 0.5); stroke: #38bdf8; stroke-width: 0.8; }          /* statistics / sequence bars */
.lv-bar-hi { fill: rgba(251, 191, 36, 0.62); stroke: #fbbf24; }
.lv-drop { stroke: rgba(251, 191, 36, 0.55); stroke-width: 1.4; stroke-dasharray: 3 3; }   /* marker drop-line */
.lv-asym { stroke: rgba(148, 163, 184, 0.55); stroke-width: 1.4; stroke-dasharray: 4 4; }   /* asymptote / reference line */
.lv-level { stroke: rgba(203, 213, 225, 0.7); stroke-width: 2; }                            /* energy level */
.lv-area-warm { fill: rgba(251, 113, 133, 0.28); stroke: none; }                            /* shaded reactive tail */
.lv-curve-dash { stroke: #fb7185; stroke-width: 2; stroke-dasharray: 6 4; }                 /* secondary dashed curve */
.lv-on { fill: #34d399; }    /* logic/binary "1" / on */
.lv-off { fill: #64748b; }   /* logic/binary "0" / off */
.lv-mk-tag { fill: #e8eef6; font-size: 9px; font-weight: 700; paint-order: stroke; stroke: #0b1220; stroke-width: 2.6px; stroke-linejoin: round; }   /* dark halo so labels read over the curve/axes */

@media (max-width: 600px) { .lv-controls { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .lv-readout, .lv-readout:has(> .lv-rcard) { grid-template-columns: 1fr; } }