/* 21-know-viz.css — page-scoped chrome for interactive visualizations embedded in /know handouts.
   The /know reader (web only — never the PDFs) can carry the same explorable widgets as /learn.
   It loads viz/_shared.css (the neutral .lv-* graph/readout kit) + each used type's viz/<t>.css;
   this sheet supplies only the few .lx-* "chrome" classes those modules need that otherwise live
   in 17-learn.css (the lesson page), so the high-traffic subject page stays lean instead of pulling
   the whole lesson stylesheet. Plain CSS, page-scoped (no Tailwind rebuild — mirrors 20-simulate.css).

   LOAD ORDER (set in know/topics.html): this sheet FIRST, then viz/_shared.css — so _shared's
   `.lv .lx-viz-range` / `.lv .lx-viz-control-top` polish overrides the base rules here, exactly as
   on the lesson page (17-learn.css then _shared.css). The .lx-* values below are copied faithfully
   from 17-learn.css; keep them in sync if that chrome changes. */

/* ── the "Explore" card: an inviting, interactive sibling to .learn-content-body ───────────── */
.lx-visualization {
  position: relative;
  margin-top: 0.85rem;
  padding: 1rem 1.1rem 1.15rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(167, 139, 250, 0.26);          /* violet hint = "interactive, explore me" */
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(167, 139, 250, 0.09), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  box-shadow: 0 4px 18px rgba(8, 6, 20, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.lx-visualization > h2 { margin: 0; color: #f4f2ff; }    /* title (size comes from _shared.css) */
.lx-viz-body { margin-top: 1rem; }

/* the "EXPLORE" eyebrow label (violet, since these widgets are exploratory) */
.lx-practice-label {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgb(167, 139, 250); margin-bottom: 0.5rem;
}
.lx-practice-ico { width: 0.95rem; height: 0.95rem; flex-shrink: 0; }
.lx-viz-goal :is(p) { margin: 0; }

/* ── slider + button chrome (copied from 17-learn.css; _shared.css adds the .lv-scoped polish) ── */
.lx-viz-control { display: grid; gap: 0.35rem; min-width: 0; }
.lx-viz-control-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.5rem; color: #cbd5e1; font-size: 0.86rem;
}
.lx-viz-control-top strong { color: #fff; font-variant-numeric: tabular-nums; }
.lx-viz-range { width: 100%; accent-color: rgb(34, 211, 238); }
.lx-viz-range:focus-visible { outline: 2px solid rgba(34, 211, 238, 0.65); outline-offset: 2px; border-radius: 4px; }
.lx-viz-unit { color: #7f8fa4; font-size: 0.75rem; line-height: 1; }

.lx-viz-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 2.25rem; padding: 0.48rem 0.9rem;
  border: 1px solid rgba(34, 211, 238, 0.36); border-radius: 999px;
  background: rgba(34, 211, 238, 0.14); color: rgb(165, 243, 252);
  font-size: 0.86rem; font-weight: 650; cursor: pointer;
}
.lx-viz-button:hover:not(:disabled) { background: rgba(34, 211, 238, 0.22); }
.lx-viz-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.55);
}
.lx-viz-button:disabled { opacity: 0.58; cursor: default; }
.lx-viz-button--quiet {
  border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.045); color: #cbd5e1;
}
.lx-viz-button--quiet:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.lx-viz-button svg {
  width: 1rem; height: 1rem; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.lx-viz-button svg[data-icon="play"] { fill: currentColor; stroke: none; }

/* ▼▼ LIGHT THEME — GENERATED by scripts/build_light_theme.py from the rules above. Do not edit by hand: run the builder. Hand tuning goes in 36-theme-light.css. ▼▼ */
html[data-theme="light"] .lx-practice-label{color:rgb(35 2 130)}
/* ▲▲ LIGHT THEME END ▲▲ */