/* Desktop-only extension point. Scope rules with [data-ui-mode="desktop"].
   The width guard keeps the layout stable before the client sets the mode,
   mirroring the pre-init fallback in ui/mobile.css. */

/* Home screen: the page name, settings icon and scan-to-play panel belong in
   the real viewport corners, not on the edges of the centered content column. */
@media (min-width: 768px) {
  body:not([data-ui-mode="mobile"]) #home .home-nav .page-capsule {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 5;
  }

  body:not([data-ui-mode="mobile"]) #home .home-profile-actions,
  body:not([data-ui-mode="mobile"]) #home .home-nav > .settings-icon {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 5;
  }

  body:not([data-ui-mode="mobile"]) #home .mobile-entry {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 5;
  }

  /* Both nav items are out of flow now; drop the empty row it leaves behind. */
  body:not([data-ui-mode="mobile"]) #home .home-nav {
    min-height: 0;
  }

  /* Desktop has the width for one row; mobile keeps the stacked buttons. */
  body:not([data-ui-mode="mobile"]) #home .mode-buttons {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }
}

/* Home screen: the wordmark holds the vertical centre of the viewport and the
   two mode buttons sit low, above the pinned scan-to-play panel. */
@media (min-width: 768px) {
  /* <main>'s padding shifts with the active version's injected layout styles,
     so drop it while the home panel owns the page: the panel then measures
     exactly one viewport and its centre line is the viewport's centre line. */
  body:not([data-ui-mode="mobile"]) main:has(> #home:not(.hidden)) {
    padding: 0;
  }

  body:not([data-ui-mode="mobile"]) #home {
    min-height: 100svh;
  }
}

/* Short windows cannot fit a centred wordmark and a bottom-anchored button
   stack without the two touching, so they keep the stacked flow layout. */
@media (min-width: 768px) and (min-height: 700px) {
  /* Only the brand group stays in flow, so .home-center's own auto margins
     centre the wordmark on the viewport. Its width stays shrink-to-fit, which
     keeps the ::before glow hugging the wordmark instead of the whole column. */
  body:not([data-ui-mode="mobile"]) #home .home-center {
    padding: 0;
  }

  /* Anchor to the centred brand group so scrolling moves both together.
     Its half-height plus the remaining half-viewport preserves the original
     button position, 120px above the initial viewport bottom. */
  body:not([data-ui-mode="mobile"]) #home .home-actions {
    position: absolute;
    bottom: calc(120px - (100svh - 100%) / 2);
    left: 50%;
    width: max-content;
    max-width: calc(100vw - 48px);
    transform: translateX(-50%);
    z-index: 5;
  }

  body:not([data-ui-mode="mobile"]) #home .home-actions .error {
    margin-inline: auto;
  }
}