/* Visual learning mode — concept map + deck + interactive widgets. Themed via CSS vars. */
.view.visual{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:2rem; align-items:start }
.vz-rail{ position:sticky; top:4.6rem; align-self:start }
.vz-exit{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--ink-faint); margin-bottom:1rem; transition:.15s }
.vz-exit:hover{ color:var(--amber) }
.vz-kicker{ font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--amber-deep); margin-bottom:.5rem }
.vz-map{ width:100%; height:auto; background:var(--bg-2); border:1px solid var(--line); border-radius:14px }
.vz-node{ cursor:pointer }
.vz-node circle{ transition:.15s }
.vz-legend{ display:flex; gap:1rem; margin-top:.7rem; font-size:.7rem; color:var(--ink-faint) }
.vz-legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:.3rem; vertical-align:middle }

.vz-body{ max-width:640px }
.vz-meta{ font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--amber-deep); margin-bottom:.4rem }
.vz-title{ font-family:'Fraunces',serif; font-weight:800; font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.1; margin-bottom:1rem }
.vz-figure{ background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:1.1rem }
.vz-figure svg, .viz-svg{ display:block; width:100%; height:auto }
.vz-caption{ color:var(--ink-dim); font-size:1rem; line-height:1.6; margin-top:1rem }

/* themed SVG text inside authored visuals — the dia-* classes are scoped to .g-fig in guide.css, so re-theme + re-size them here (otherwise the browser default serif leaks in) */
.vz-figure svg text, .viz-svg text{ font-family:'Hanken Grotesk',system-ui,sans-serif; fill:var(--ink-dim) }
.vz-figure .dia-txt{ fill:var(--ink); font-family:'Hanken Grotesk',sans-serif; font-size:11px; font-weight:600 }
.vz-figure .dia-sub{ fill:var(--ink-dim); font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.02em }
.viz-svg text{ font-family:'JetBrains Mono',monospace; font-size:10px }

/* study links — integrate the visual into the real pack flow */
.vz-study{ display:flex; align-items:center; gap:.6rem; margin-top:1.2rem; flex-wrap:wrap }
.vz-study-lbl{ font-family:'JetBrains Mono',monospace; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-right:.2rem }
.vz-act{ display:inline-flex; align-items:center; padding:.4rem .9rem; border:1px solid var(--line-2); border-radius:999px; font-size:.82rem; font-weight:600; color:var(--ink-dim); transition:.15s }
.vz-act:hover{ border-color:var(--amber); color:var(--amber); background:color-mix(in srgb, var(--amber) 8%, transparent) }

/* visual embedded at the top of a Learn lesson */
.lesson-visual{ margin:0 0 1.6rem; max-width:560px }
.lesson-visual-link{ display:inline-block; margin:.2rem 0 1.4rem; font-family:'JetBrains Mono',monospace; font-size:.82rem; color:var(--amber); border-bottom:1px solid color-mix(in srgb,var(--amber) 40%,transparent); transition:.15s }
.lesson-visual-link:hover{ color:var(--amber-deep); border-color:var(--amber) }

/* themed SVG primitives for widgets + authored visuals */
.viz-stroke{ stroke:var(--amber); stroke-width:2.5; fill:none }
.viz-fill{ fill:color-mix(in srgb, var(--amber) 14%, transparent); stroke:none }
.viz-axis{ stroke:var(--line-2); stroke-width:1.5 }
.viz-accent-line{ stroke:var(--amber-deep); stroke-width:1.5 }
.viz-dot{ fill:var(--amber); stroke:var(--bg); stroke-width:2; cursor:ns-resize }
.viz-dot:focus-visible{ outline:2px solid var(--amber); outline-offset:2px }
.viz-readout, .viz-out{ font-family:'JetBrains Mono',monospace; color:var(--ink-dim); font-size:.85rem }

.viz-control{ display:flex; align-items:center; gap:.7rem; margin-top:.8rem }
.viz-control label{ font-size:.8rem; color:var(--ink-dim); min-width:5.5rem }
.viz-control input[type=range]{ flex:1; accent-color:var(--amber) }
.viz-control .viz-out{ min-width:3rem; text-align:right }

/* e1RM / plate calculator widget */
.e1rm-controls{ flex-wrap:wrap; gap:1rem }
.e1rm-controls .e1rm-in{ display:inline-flex; align-items:center; gap:.4rem; min-width:0; font-size:.8rem; color:var(--ink-dim) }
.e1rm-in input{ width:5rem; background:var(--bg-2); color:var(--ink); border:1px solid var(--line-2); border-radius:8px; padding:.3rem .45rem; font-family:'JetBrains Mono',monospace; accent-color:var(--amber) }
.e1rm-tbl{ width:100%; border-collapse:collapse; margin-top:.8rem; font-family:'JetBrains Mono',monospace; font-size:.8rem }
.e1rm-tbl th, .e1rm-tbl td{ text-align:left; padding:.28rem .5rem; border-bottom:1px solid var(--line) }
.e1rm-tbl th{ color:var(--ink-faint); font-weight:600; letter-spacing:.04em }
.e1rm-tbl td{ color:var(--ink-dim) }
.e1rm-tbl tr td:first-child{ color:var(--amber) }

.vz-nav{ display:flex; align-items:center; gap:1rem; margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line) }
.vz-nav button{ display:inline-flex; align-items:center; gap:.4rem; padding:.6rem 1rem; border:1px solid var(--line-2); border-radius:10px; color:var(--ink-dim); transition:.15s }
.vz-nav button:hover{ border-color:var(--amber); color:var(--amber) }
.vz-nav .vz-count{ margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--ink-faint) }

@media (max-width:860px){ .view.visual{ grid-template-columns:1fr; gap:1rem } .vz-rail{ position:static } .vz-body{ max-width:none } }