/* PXLS v73: deployment-safe final pass and a true one-screen welcome layout. */

/* The page shell already owns the top-bar space. Do not subtract its height twice. */
@media (min-width: 801px) {
  body:has(#welcome-page:not([hidden])) .dashboard-page {
    height: 100dvh !important;
    min-height: 0 !important;
    padding-top: var(--header) !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #welcome-page:not([hidden]) {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16px clamp(20px, 3vw, 44px) 18px !important;
    display: grid !important;
    grid-template-rows: minmax(300px, 1fr) auto minmax(138px, 172px) !important;
    gap: 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #welcome-page:not([hidden]) > .welcome-hero {
    min-height: 0 !important;
    height: 100% !important;
    padding: clamp(22px, 3vh, 42px) clamp(28px, 3.5vw, 54px) !important;
  }

  #welcome-page:not([hidden]) .creative-scene {
    min-height: min(34vh, 360px) !important;
  }

  #welcome-page:not([hidden]) > .welcome-intro {
    min-height: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas: "kicker title" "kicker copy" !important;
    column-gap: 22px !important;
    align-items: center !important;
    padding: 2px 4px !important;
  }

  #welcome-page:not([hidden]) > .welcome-intro .directory-kicker {
    grid-area: kicker;
    margin: 0 !important;
  }

  #welcome-page:not([hidden]) > .welcome-intro h2 {
    grid-area: title;
    margin: 0 !important;
    font-size: clamp(18px, 2vw, 25px) !important;
  }

  #welcome-page:not([hidden]) > .welcome-intro p {
    grid-area: copy;
    margin: 2px 0 0 !important;
    line-height: 1.35 !important;
  }

  #welcome-page:not([hidden]) > .premium-welcome {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 15px clamp(24px, 3vw, 42px) !important;
    grid-template-columns: minmax(120px, .48fr) 1.52fr !important;
    gap: clamp(20px, 3vw, 42px) !important;
    align-items: center !important;
  }

  #welcome-page:not([hidden]) .premium-orbit {
    width: min(128px, 100%) !important;
    min-height: 112px !important;
    max-width: 128px !important;
  }

  #welcome-page:not([hidden]) .premium-orbit > span:last-child {
    font-size: 54px !important;
  }

  #welcome-page:not([hidden]) .premium-orbit .xp-pixel {
    width: 38px !important;
    height: 38px !important;
  }

  #welcome-page:not([hidden]) .premium-story h2 {
    margin: 3px 0 5px !important;
    font-size: clamp(23px, 2.5vw, 37px) !important;
    line-height: 1.02 !important;
  }

  #welcome-page:not([hidden]) .premium-story p {
    margin: 4px 0 8px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    max-width: 720px !important;
  }

  #welcome-page:not([hidden]) .premium-story small {
    display: inline !important;
    margin: 0 0 0 10px !important;
    font-size: 8px !important;
  }

  #welcome-page:not([hidden]) .premium-story .xp-primary {
    display: inline-flex !important;
    padding: 9px 12px !important;
  }
}

@media (min-width: 801px) and (max-height: 720px) {
  #welcome-page:not([hidden]) {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    grid-template-rows: minmax(272px, 1fr) auto 126px !important;
    gap: 8px !important;
  }

  #welcome-page:not([hidden]) > .welcome-hero {
    padding-block: 18px !important;
  }

  #welcome-page:not([hidden]) .welcome-actions {
    margin: 16px 0 !important;
  }

  #welcome-page:not([hidden]) .welcome-hero h1 {
    margin: 12px 0 !important;
  }

  #welcome-page:not([hidden]) .premium-story p,
  #welcome-page:not([hidden]) .premium-story small {
    display: none !important;
  }
}

/* On smaller screens, scrolling is preferable to hiding any content. */
@media (max-width: 800px) {
  body:has(#welcome-page:not([hidden])) {
    overflow: auto !important;
  }

  body:has(#welcome-page:not([hidden])) .dashboard-page,
  #welcome-page:not([hidden]) {
    height: auto !important;
    min-height: calc(100dvh - var(--header)) !important;
    overflow: visible !important;
  }
}