/* Race-track toy (section #track-demo). Everything is scoped to .track-toy except the elements
   that are moved to <body> while enlarged (#tt-plotbox.enlarged, #tt-plot-backdrop). */
.track-toy .tt-head{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:end;margin-bottom:30px}
.track-toy .tt-head .prose p{font-size:14px}
.track-toy .panel{background:#fff;border:1px solid var(--line);border-radius:4px}
.track-toy .stage{display:grid;grid-template-columns:270px minmax(0,1fr);gap:18px;align-items:start}
.track-toy .sidebar{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;padding:14px 16px}
.track-toy .sidebar fieldset{border:0;border-top:1px solid var(--line);padding:12px 0 2px;margin:12px 0 0}
.track-toy .sidebar legend{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;font-weight:700;display:flex;align-items:center;gap:8px;padding:0}
.track-toy .swatch{width:12px;height:3px;border-radius:2px;display:inline-block;margin:0}
.track-toy label{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);margin:6px 0;text-transform:none;letter-spacing:0;position:static}
.track-toy label output{color:var(--ink);font-variant-numeric:tabular-nums}
.track-toy label.check{justify-content:flex-start}
.track-toy input[type=range]{width:100%;accent-color:var(--inter)}
.track-toy .buttons{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.track-toy button{font:inherit;font-size:12px;border:1px solid var(--ink);background:#fff;color:var(--ink);border-radius:3px;padding:8px 14px;cursor:pointer}
.track-toy button.primary{background:var(--ink);color:#fff}
.track-toy button:focus-visible,.track-toy input:focus-visible{outline:3px solid var(--inter);outline-offset:3px}
.track-toy .small-btn{margin-top:10px;font-size:11px;padding:6px 12px;border-color:var(--line)}
.track-toy .small-btn:hover{border-color:var(--ink)}
.track-toy #tt-status{font-size:11.5px;color:var(--muted);margin:4px 0 0;min-height:52px}
.track-toy .legend{font-size:11px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px}
.track-toy .legend span{display:inline-flex;align-items:center;gap:6px}
.track-toy .plotbox{border-top:1px solid var(--line);margin-top:12px;padding-top:10px}
.track-toy .plotbox h3,#tt-plotbox h3{font-size:12px;font-weight:600;margin:0;letter-spacing:0}
.track-toy .hint,#tt-plotbox .hint{font-weight:400;font-size:10px;color:var(--muted);margin-left:6px}
#tt-plot svg{width:100%;height:auto;display:block}
.track-toy .trackfig{margin:0;padding:8px 10px;position:sticky;top:12px}
.track-toy .trackfig figcaption{border-top:1px solid var(--line);padding-top:8px}
#tt-figure svg{width:100%;height:auto;max-height:calc(100vh - 90px);display:block;margin:auto}
.track-toy .tt-callout{transition:opacity .15s;cursor:zoom-in}
.track-toy .tt-callout[aria-pressed=true]{cursor:zoom-out}
.track-toy .tt-callout:focus{outline:none}
.track-toy .tt-callout:focus-visible rect:first-child{stroke:var(--inter);stroke-width:2}
.track-toy .tt-callout *{vector-effect:non-scaling-stroke}
.track-toy .tt-paths{transition:opacity .2s}
.track-toy .tt-marker{cursor:pointer}
.track-toy .tt-marker.active .tt-dot{fill:var(--inter)}
.track-toy .caveat{margin-top:30px;border-top:1px solid var(--line);padding-top:18px;font-size:12px;color:var(--muted);display:grid;grid-template-columns:1fr 1fr;gap:12px 40px}
.track-toy .caveat strong{color:var(--ink);font-weight:600}
#tt-plotbox{cursor:zoom-in}
#tt-plotbox:focus-visible{outline:3px solid var(--inter);outline-offset:3px}
#tt-plotbox.enlarged{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(900px,92vw);z-index:30;background:#fff;border:1px solid var(--line);border-radius:4px;padding:20px 24px;margin:0;cursor:zoom-out;box-shadow:0 12px 40px rgba(22,32,42,.18);font-family:var(--sans)}
#tt-plotbox.enlarged h3{font-size:15px}
#tt-plotbox.enlarged .legend{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px}
#tt-plotbox.enlarged .legend span{display:inline-flex;align-items:center;gap:6px}
#tt-plotbox.enlarged .swatch{width:12px;height:3px;border-radius:2px;display:inline-block}
#tt-plotbox.enlarged svg polyline{vector-effect:non-scaling-stroke}
#tt-plotbox.enlarged:focus-visible{outline:none}
#tt-plot-backdrop{position:fixed;inset:0;background:rgba(244,246,247,.8);z-index:29;cursor:zoom-out}
.track-toy .only-compact{display:none}

@media(max-width:1000px){.track-toy .tt-head{grid-template-columns:1fr;gap:20px}}
@media(max-width:900px){
  .track-toy .stage{grid-template-columns:1fr}
  .track-toy .sidebar{position:static;max-height:none}
  .track-toy .trackfig{position:static}
}
/* small screens: the track alone, one full-width window, controls in a bar at the bottom of the screen */
@media(max-width:720px){
  .track-toy .stage{display:block}
  .track-toy .only-compact{display:block}
  .track-toy #tt-figure.compact .tt-callouts,.track-toy #tt-figure.compact .tt-leaders,.track-toy #tt-figure.compact .tt-banner{display:none}
  .track-toy .trackfig{padding:8px}
  #tt-figure svg{max-height:none}
  .track-toy .trackfig figcaption{display:none}
  .track-toy #tt-caption{padding:10px 4px 2px;min-height:96px}
  .track-toy .cap-kicker{font-size:10px;letter-spacing:1.2px;font-weight:700;color:var(--muted);margin:0}
  .track-toy .cap-title{font-size:15px;font-weight:600;margin:2px 0 4px}
  .track-toy .cap-desc{font-size:12.5px;color:var(--muted);margin:0}
  .track-toy #tt-single{border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
  .track-toy .single-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:600}
  .track-toy .single-nav button{font-size:20px;line-height:1;padding:6px 14px}
  .track-toy #tt-single-svg{width:100%;height:auto;display:block;margin-top:6px;touch-action:pan-y}
  .track-toy .single-hint{font-size:11px;color:var(--muted);margin:4px 0 0;text-align:center}
  .track-toy .caveat{grid-template-columns:1fr}
  .track-toy{padding-bottom:90px}
  .track-toy .sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:25;max-height:60vh;overflow:auto;border-radius:12px 12px 0 0;
                      padding:10px 14px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(22,32,42,.12);margin:0;
                      transition:transform .25s ease}
  .track-toy .sidebar.offscreen{transform:translateY(110%)}
  .track-toy .sidebar .buttons{display:flex;gap:8px}
  .track-toy .sidebar .buttons button{flex:1;padding:10px 0}
  .track-toy .sidebar>*:not(.buttons){display:none}
  .track-toy .sidebar.open>*:not(.buttons){display:block}
  .track-toy .sidebar.open>label{display:flex}
  .track-toy .sidebar.open{padding-bottom:16px}
  #tt-plotbox.enlarged{width:94vw;padding:14px}
}