/* Learn topic pages /learn/<topic>/ and level pages /learn/level/<level>/ (design key learn-topic): fixes over the
   design's stylesheet (assets/css/p/learn-topic.css, generated). Colours are the page's own tokens (dark / light). */

/* The topic chips under the hero: on wide screens every topic is on screen — the row wraps (the design scrolled it
   sideways without a scrollbar, so 4–5 topics were out of reach for a mouse); phones keep the swipeable row. */
@media (width >= 1024px) {
  main [role="navigation"][aria-label="Topics"],
  main [role="navigation"][aria-label="Levels"] {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* Level tabs of "All … guides": a level without guides in the topic is disabled (data-n="0", assets/js/p/learn-topic.js)
   — dimmed, no pointer, never an empty grid */
main [role="tablist"] button[role="tab"][data-n="0"] {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
/* the counts in the tabs at full contrast (the design's 0.6 opacity gave 2.1:1 in the light theme) */
main [role="tablist"] button[role="tab"] > span + span {
  opacity: 1;
}