/* public/css/learn-vis.css: Learn pictures, the worked-example stepper, the quick-technique tiles and the folded Learn page
   (docs/design/learn-visuals.md §3, §4, §2; DECISIONS 91–93). Colors are roles over the themes.css tokens, never the accent
   (violet means "this pays ✱"). The server writes each picture's final frame; --beat on the figure picks the frame, and
   only opacity, transform and stroke-dashoffset animate (no layout shift). Reduced motion (the OS or the motion setting):
   no transitions at all. Needs only themes.css, so the static /mental-math pages can use it as it is. */

@property --b { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --u { syntax: '<number>'; inherits: false; initial-value: 99; }
@property --m1 { syntax: '<number>'; inherits: false; initial-value: 99; }
@property --m2 { syntax: '<number>'; inherits: false; initial-value: 99; }
@property --m3 { syntax: '<number>'; inherits: false; initial-value: 99; }
@property --dx1 { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --dx2 { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --dx3 { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --dy1 { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --dy2 { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --dy3 { syntax: '<length>'; inherits: false; initial-value: 0px; }

/* ---------------------------------------------------------------- the picture */
.vis { position: relative; margin: 0; width: 100%; max-width: 480px; background: var(--bg); }
.vis svg { display: block; width: 100%; height: auto; aspect-ratio: 360 / var(--vh, 150); overflow: visible;
  font: 600 13px/1 var(--font-ui); font-variant-numeric: tabular-nums; stroke-width: 1.5; }
.vis :is(line, rect, circle, path, polygon) { fill: none; stroke: none; stroke-linecap: round; stroke-linejoin: round; } /* width: inherited, so a node's own stroke-width wins */
.vis text { fill: var(--ink); stroke: none; }
.vis .s-ink { stroke: var(--ink); } .vis .s-muted { stroke: var(--muted); } .vis .s-rule { stroke: var(--rule); }
.vis .s-hi { stroke: var(--link); } .vis .s-ok { stroke: var(--ok); }
.vis .f-ink { fill: var(--ink); } .vis .f-muted { fill: var(--muted); } .vis .f-rule { fill: var(--rule); } .vis .f-fill { fill: var(--mark); }
.vis .f-hi { fill: var(--link); } .vis .f-ok { fill: var(--ok); } .vis .f-bg { fill: var(--bg); }
.vis .f-part { fill: color-mix(in srgb, var(--link) 24%, var(--bg)); }
.vis .f-part2 { fill: color-mix(in srgb, var(--link) 11%, var(--bg)); }
.vis .f-okfill { fill: color-mix(in srgb, var(--ok) 22%, var(--bg)); }
.vis .t-muted { fill: var(--muted); } .vis .t-hi { fill: var(--link); } .vis .t-ok { fill: var(--ok); }
.vis .bold { font-weight: 700; } .vis .z12 { font-size: 12px; font-weight: 500; } .vis .z24 { font-size: 24px; font-weight: 700; }
.vis .dash { stroke-dasharray: 4 4; }

/* beats: a node shows from beat --b and leaves at beat --u; .draw strokes itself in; .mv moves on beats --m1..3 */
.vis .bt { --on: clamp(0, calc(var(--beat) - var(--b) + 1), 1); opacity: min(var(--on), clamp(0, calc(var(--u) - var(--beat)), 1)); }
.vis .draw { stroke-dasharray: 100px 100px; stroke-dashoffset: calc((1 - var(--on, 1)) * 100px); }
.vis .mv {
  --k1: clamp(0, calc(var(--beat) - var(--m1) + 1), 1); --k2: clamp(0, calc(var(--beat) - var(--m2) + 1), 1); --k3: clamp(0, calc(var(--beat) - var(--m3) + 1), 1);
  transform: translate(calc(var(--k1) * var(--dx1) + var(--k2) * var(--dx2) + var(--k3) * var(--dx3)),
    calc(var(--k1) * var(--dy1) + var(--k2) * var(--dy2) + var(--k3) * var(--dy3)));
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) .vis:not(.still) .bt { transition: opacity .35s ease-out, stroke-dashoffset .6s ease-in-out; }
  html:not([data-motion="reduce"]) .vis:not(.still) .mv { transition: transform .55s cubic-bezier(.3, .7, .3, 1), opacity .35s ease-out; }
}
html[data-motion="full"] .vis:not(.still) .bt { transition: opacity .35s ease-out, stroke-dashoffset .6s ease-in-out; }
html[data-motion="full"] .vis:not(.still) .mv { transition: transform .55s cubic-bezier(.3, .7, .3, 1), opacity .35s ease-out; }
.vis.snap * { transition: none !important; }

.vis-replay { position: absolute; top: -8px; right: -8px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font: 400 20px/1 var(--font-ui); cursor: pointer; }
.vis-replay:hover { color: var(--link); }
.vis-thumb { max-width: none; pointer-events: none; background: transparent; }
.vis-thumb svg { height: 64px; aspect-ratio: auto; }
.vis-thumb text:not(.z24), .vis-thumb .key { display: none; }
.vis-still { max-width: 420px; margin: var(--s2) 0; }

/* ---------------------------------------------------------------- the stepper */
.stepper { margin: var(--s3) 0 0; font-size: var(--fs-list); }
.stepper .step-prompt { margin: 0 0 var(--s1); font-size: var(--fs-body); }
.stepper .work { margin: 0; padding-left: 2.2em; }
.stepper .work li { padding: 2px var(--s2); margin: 0 0 2px calc(-1 * var(--s2)); border-radius: 3px; transition: opacity .25s ease-out, background-color .25s; }
.stepper .work li::marker { color: var(--muted); }
.stepper .n { font-weight: 700; }
.stepper .work li.is-future { opacity: 0; }
.stepper .work li.is-now { background: var(--mark); }
.stepper .step-answer { margin: var(--s2) 0 0; transition: opacity .25s ease-out; }
.stepper .step-answer.is-future { opacity: 0; }
.step-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); min-height: 44px; margin-top: var(--s1); }
.step-controls[hidden] { display: flex; visibility: hidden; }
.step-controls button { min-height: 44px; min-width: 44px; padding: 0 var(--s2); border: 1px solid var(--rule); border-radius: 3px;
  background: var(--bg); color: var(--ink); font: 600 var(--fs-list)/1 var(--font-ui); cursor: pointer; }
.step-controls button[aria-disabled="true"] { color: var(--muted); cursor: default; opacity: .6; }
.step-controls .step-all { border-color: transparent; color: var(--link); margin-left: auto; }
.step-controls .meta { min-width: 4.5em; text-align: center; }
@keyframes n-flash { from { background: color-mix(in srgb, var(--link) 22%, var(--bg)); } to { background: transparent; } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) .stepper .is-now .n-new { animation: n-flash .6s ease-out; border-radius: 2px; }
}
html[data-motion="full"] .stepper .is-now .n-new { animation: n-flash .6s ease-out; border-radius: 2px; }
html[data-motion="reduce"] .stepper .work li, html[data-motion="reduce"] .stepper .step-answer { transition: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) .stepper .work li, html:not([data-motion="full"]) .stepper .step-answer { transition: none; } }

/* ---------------------------------------------------------------- an opened technique: picture, step cards, stepper */
.lv { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: var(--s3) 0 var(--s2); }
.lv-side { min-width: 0; }
.lv.has-vis .step-cards { order: 2; }
.step-cards { list-style: none; counter-reset: card; padding: 0; margin: 0; display: grid; gap: var(--s2); font-size: var(--fs-list); line-height: 1.4; }
.step-cards li { counter-increment: card; position: relative; padding: var(--s2) var(--s3) var(--s2) 2.4em; border: 1px solid var(--rule); border-radius: 4px; }
.step-cards li::before { content: counter(card); position: absolute; left: var(--s3); top: var(--s2); font-weight: 700; color: var(--link); }
@media (min-width: 760px) {
  .lv.has-vis { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .lv.has-vis .step-cards { grid-row: 1 / span 2; grid-column: 2; }
}
@media (max-width: 640px) {
  .step-cards { gap: var(--s1); }
  .step-cards li { border: 0; border-left: 2px solid var(--rule); border-radius: 0; padding: 2px 0 2px 2.2em; }
  .step-cards li::before { left: var(--s2); top: 2px; }
}

/* ---------------------------------------------------------------- the hub's tiles */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s3); margin: var(--s3) 0 var(--s5); }
.quick-grid .quick { border: 1px solid var(--rule); border-radius: 6px; padding: 0; background: var(--bg); min-width: 0; }
.quick-grid .quick > summary { display: grid; grid-template-rows: auto auto 1fr; gap: 2px; padding: var(--s3); min-height: 44px; list-style: none; }
.quick-grid .quick > summary::-webkit-details-marker { display: none; }
.quick-grid .quick > summary:hover { background: var(--mark); }
.quick-grid .quick > summary .vis-thumb { margin-bottom: var(--s2); }
.quick-grid .quick .q-name { font-weight: 700; }
.quick-grid .quick .q-when { color: var(--muted); font-size: var(--fs-meta); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.quick-grid .quick[open] { grid-column: 1 / -1; }
.quick-grid .quick[open] > summary { grid-template-rows: none; display: block; border-bottom: 1px solid var(--rule); }
.quick-grid .quick[open] > summary .vis-thumb { display: none; }
.quick-grid .quick[open] .q-name { font-size: var(--fs-h2); }
.quick-grid .quick[open] .q-when { display: block; font-size: var(--fs-list); }
.quick-grid .quick-body { padding: 0 var(--s3) var(--s3); }
.quick-grid .quick-body .used-in { margin: var(--s2) 0 0; }
.quick-grid .quick-body .used-in > summary { min-height: 44px; display: flex; align-items: center; color: var(--muted); font-size: var(--fs-meta); }

/* ---------------------------------------------------------------- the folded Learn page */
.learn .fold > summary, .learn .technique-fold > summary { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); }
.learn .technique-fold { border-bottom: 1px solid var(--rule); }
.learn .technique-fold > summary .t-name { font-weight: 700; }
.learn .technique-fold > summary .meta { flex: 1 1 14rem; }
.learn .technique-fold > summary .vis-thumb { width: 72px; flex: 0 0 72px; }
.learn .technique-fold > summary .vis-thumb svg { height: 36px; }
.learn .technique-fold[open] > summary .vis-thumb { display: none; }
.learn .technique-fold > summary::before, .learn .fold-mistakes > summary::before, .quick-grid .used-in > summary::before {
  content: '▸'; color: var(--muted); width: 1em; flex: 0 0 1em; transition: transform .15s; }
.learn .fold-mistakes > summary::before { margin-top: var(--s5); }
.learn .technique-fold[open] > summary::before, .learn .fold-mistakes[open] > summary::before, .quick-grid .used-in[open] > summary::before { transform: rotate(90deg); }
.learn .technique-fold > summary::-webkit-details-marker, .learn .fold-mistakes > summary::-webkit-details-marker { display: none; }
.learn .technique-fold .technique h3 { display: none; }
.learn .technique-fold .technique > .meta:first-of-type { display: none; }
.learn .fold-mistakes > summary .sec-h { flex: 1; margin: var(--s5) 0 0; }
.learn .idea-more > summary { color: var(--link); font-size: var(--fs-list); }