/* The mockups' page ground. Everything else comes from the kit (tokens.css, ats-ui.css, base.css); a page's own
   layout lives in pages/<slug>.css with classes prefixed m-. Tokens only. */
html, body { margin: 0; }
body {
  background: var(--ats-bg);
  color: var(--ats-fg);
  font-family: var(--ats-font-body);
  font-size: var(--ats-text-body);
}

/* Cockpit's frame: the YouTube menu's channel picker and the data stamp in the top bar. */
.m-channel { display: flex; flex-direction: column; gap: 4px; padding-inline: 4px; }
.m-channel-label {
  font-family: var(--ats-font-display); font-size: var(--ats-text-micro); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ats-muted);
}
.m-data-note { color: var(--ats-muted); font-size: var(--ats-text-caption); }

/* The website frame (lib/site.tsx) is the kit's SiteHeader and SiteFooter; the pages' own content width is here. */
.m-site-wrap { max-inline-size: 1280px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); box-sizing: border-box; }
@media (max-width: 1023px) { .m-site-theme { display: none; } }