/* Train Tracks learning and possible-move states. Scoped to this game. */
body[data-playing="tracks"] {
  --track-next-surface: oklch(93% .03 224);
  --track-next-ink: oklch(39% .1 229);
  --track-next-hover: oklch(88% .046 226);
  --track-active: var(--site-accent, oklch(54% .162 35));
  --track-guide-surface: var(--site-paper, oklch(96% .016 96));
  --track-guide-line: var(--site-line, oklch(82% .016 106));
  --track-guide-ink: var(--site-ink, oklch(26% .013 119));
  --track-guide-muted: var(--site-muted, oklch(50% .014 109));
}
body[data-playing="tracks"] .level-progress { display: none; }
body[data-playing="tracks"] .track-guide {
  display: grid;
  gap: .5rem;
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--track-guide-line);
  border-radius: .875rem;
  background: var(--track-guide-surface);
  color: var(--track-guide-ink);
  text-align: left;
  font-size: .875rem;
  line-height: 1.55;
}
body[data-playing="tracks"] .track-guide-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: .375rem .75rem; }
body[data-playing="tracks"] .track-guide-kicker { color: var(--track-active); font-size: .6875rem; font-weight: 800; letter-spacing: .08em; }
body[data-playing="tracks"] .track-guide h2 { margin: 0; font-size: 1.125rem; line-height: 1.3; }
body[data-playing="tracks"] .track-guide p { margin: 0; color: var(--track-guide-muted); }
body[data-playing="tracks"] .track-guide strong { color: var(--track-guide-ink); }
body[data-playing="tracks"] .track-guide-example { padding-left: .75rem; border-left: 3px solid var(--track-active); }
body[data-playing="tracks"] .track-guide-rule { padding-left: .75rem; border-left: 3px solid var(--track-active); }
body[data-playing="tracks"] .track-guide-worked { border-top: 1px solid var(--track-guide-line); }
body[data-playing="tracks"] .track-guide-worked summary { display: flex; align-items: center; min-height: 2.75rem; font-weight: 700; cursor: pointer; }
body[data-playing="tracks"] .track-guide-worked ol { margin: 0 0 .5rem; padding-left: 1.5rem; color: var(--track-guide-muted); }
body[data-playing="tracks"] .track-guide-worked li + li { margin-top: .375rem; }
body[data-playing="tracks"] .track-guide-next { display: flex; align-items: center; gap: .75rem; }
body[data-playing="tracks"] .track-guide-next-icon {
  display: grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem;
  border: 2px dashed var(--track-next-ink); border-radius: .5rem;
  background: var(--track-next-surface); color: var(--track-next-ink);
  font-size: 1.25rem; font-weight: 800; line-height: 1;
}
body[data-playing="tracks"] .track-cell.available { background: var(--track-next-surface); box-shadow: none; }
body[data-playing="tracks"] .track-cell.available::after {
  content: ''; position: absolute; inset: .25rem; border: 2px dashed var(--track-next-ink);
  border-radius: .375rem; pointer-events: none;
}
body[data-playing="tracks"] .track-cell.available .step {
  color: var(--track-next-ink); font-size: clamp(1.125rem, 3vw, 1.75rem);
  font-weight: 800; animation: none;
}
body[data-playing="tracks"] .track-cell.available:hover { background: var(--track-next-hover); }
body[data-playing="tracks"] .track-cell.track-end { box-shadow: inset 0 0 0 3px var(--track-active); }
body[data-playing="tracks"] .track-cell.track-goal { background: var(--track-guide-surface); }
body[data-playing="tracks"] .track-cell.track-goal.available { background: var(--track-next-surface); }
body[data-playing="tracks"] .track-cell:focus-visible { outline: 3px solid var(--track-next-ink); outline-offset: -4px; z-index: 2; }
body[data-playing="tracks"] .track-cell:disabled { cursor: default; opacity: 1; }
body[data-playing="tracks"] .track-cell:disabled:not(.path):hover { background: transparent; }
@media (max-width: 650px) {
  body[data-playing="tracks"] .track-guide { padding: .875rem; margin-bottom: 1rem; }
  body[data-playing="tracks"] .track-guide-heading { display: block; }
  body[data-playing="tracks"] .track-guide h2 { margin-top: .125rem; }
}
@media (forced-colors: active) {
  body[data-playing="tracks"] .track-guide, body[data-playing="tracks"] .track-guide-next-icon,
  body[data-playing="tracks"] .track-cell.available::after { border-color: ButtonText; }
  body[data-playing="tracks"] .track-cell.available .step { color: ButtonText; }
}