/* ScaleMastery — base site stylesheet.
 *
 * Static, hand-authored. No build step. Loaded between brand-tokens.css
 * and brand.css per the chain in Routes/Layouts.fs's pageWithHead. Holds
 * only the framework-level pieces that don't fit either neighbour:
 *
 *   - resets (margin / box-sizing / text rendering)
 *   - the engraved-score block fallback (used by un-migrated callers
 *     that still emit the `engraved-score` class without `sm-stave-card`)
 *   - smooth-scroll for in-page anchors
 *
 * Brand visual language lives in brand.css; design tokens live in
 * brand-tokens.css. Don't put utility classes here.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Smooth scroll for in-page anchor links (honours reduced-motion). */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Engraved-score block — when libverovio.dll lands the container holds
 * an inline <svg> emitted by Verovio. Make sure it stretches reasonably
 * and stays inside the reading column. */
.engraved-score svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Sticky-footer ad bar — body padding shim. Applied by ad-dismiss.js
 * only when the bar is present AND not session-dismissed; so paid-tier
 * pages and dismissed sessions don't waste vertical space below the
 * page footer. Heights match the bar's content + frame padding:
 * 90px ad creative + 12px vertical padding ≈ 102px desktop; 50px ad +
 * padding ≈ 72px mobile. */
body.sm-has-sticky-ad {
  padding-bottom: 104px;
}
@media (max-width: 640px) {
  body.sm-has-sticky-ad {
    padding-bottom: 74px;
  }
}

/* Dismiss button hover affordance. Hover lifts the border colour so
 * the × reads as interactive without being aggressive. */
#sm-ad-dismiss:hover,
#sm-ad-dismiss:focus-visible {
  border-color: var(--ink-mute);
  color: var(--ink);
  outline: none;
}