/* Structural rules every bundle ships, independent of theme: how the
   templates behave, never how they look. Themes may not override these
   without good reason. */

[hidden] { display: none !important; }

/* Guided lesson steps: exactly one [data-step] is visible. The URL
   fragment (#lesson, #daily-word) selects it; with no fragment, or a
   fragment inside the Lesson step (a tab, a footnote), the first step
   shows. Works without JavaScript. */
[data-page="lesson"] [data-step] { display: none; }
[data-page="lesson"] [data-step="1"] { display: block; }
[data-page="lesson"] [data-step]:target { display: block; }
/* Needs :has(); without it step 1 stays visible alongside the targeted
   step, which is a graceful degradation rather than an empty page. */
[data-page="lesson"]:has([data-step]:target) [data-step="1"]:not(:target) { display: none; }

/* :target scrolls the step to the top of the viewport; keep the
   header and stepper in view above it. */
[data-step] { scroll-margin-top: 0; }

/* Lesson tabs: the Teaching Notes and the Questions share the sidecar
   beside the video; exactly one [data-tab] is visible. The fragment
   (#notes, #questions) selects it; with no tab fragment, the one marked
   [data-default] shows. Same pattern, and same :has() fallback, as the
   steps. */
[data-page="lesson"] [data-tab] { display: none; }
[data-page="lesson"] [data-tab][data-default] { display: block; }
[data-page="lesson"] [data-tab]:target { display: block; }
[data-page="lesson"]:has([data-tab]:target) [data-tab][data-default]:not(:target) { display: none; }

/* Imported notes cite bare URLs (footnotes); an unbreakable URL would
   widen the column past a phone screen, so links break where they must. */
[data-tab] a { overflow-wrap: anywhere; }

/* Masthead drawer: inline in the bar unless a narrow-screen rule (site.css)
   turns it into a drawer; the menu buttons show only then. */
[data-region="drawer"] { display: contents; }
[data-action="menu"], [data-action="menu-close"] { display: none; }