/*
 * The studio (app.html): its own page rules, which Tailwind utilities and daisyUI cannot carry.
 * Rules the app pages share (the design tiles, touch, native pseudo-elements, motion) are in
 * site/styles/ui.css. Everything else is utilities and daisyUI components in the markup (app.html,
 * src/app.js, src/ui/*). Colours are daisyUI theme variables (site/styles/theme.css).
 * In the components layer, so a utility on an element still wins over anything here.
 */
@layer components {

  /* The page itself scrolls only on a short phone (the keyboard up): elsewhere the stage and the rail
     fill the screen and scroll inside. Root elements under two media conditions; no markup to carry it. */
  html, body { height: 100%; overflow: hidden; }
  @media (max-width: 720px) { html, body { height: auto; overflow: visible; } }
  @media (max-width: 720px) and (min-height: 541px) { html, body { height: 100%; overflow: hidden; } }
  @media (display-mode: standalone), (display-mode: fullscreen) { html, body { overscroll-behavior: none; } }

  /* The lockup: the dark theme's picture in the dark theme; the paw alone where the bar is narrow
     (721-860 px) and in an installed app on a small phone beside the back arrow. Theme x width x
     display-mode on three pictures: kept together here rather than as competing display utilities. */
  .logo .logo-light { display: block; }
  .logo .logo-dark, .logo .logo-small { display: none; }
  [data-theme='dark'] .logo .logo-light { display: none; }
  [data-theme='dark'] .logo .logo-dark { display: block; }
  @media (min-width: 721px) and (max-width: 860px) {
    .brandbar .logo .logo-light, .brandbar .logo .logo-dark { display: none; }
    .brandbar .logo .logo-small { display: block; }
  }
  @media (display-mode: standalone), (display-mode: fullscreen) {
    @media (max-width: 430px) {
      .brandbar .logo .logo-light, .brandbar .logo .logo-dark { display: none; }
      .brandbar .logo .logo-small { display: block; }
    }
  }
}