/* Phone display only; keep desktop rules and business controls unchanged. */
@media (max-width: 1000px) and (hover: none) and (pointer: coarse) {
  html[data-test-premium-shell="1"] .mono-topbar {
    height: auto !important;
    min-height: 92px !important;
    flex: 0 0 auto !important;
    padding: 8px max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    background: var(--studio-bg) !important;
  }
  html[data-test-premium-shell="1"] .mono-topbar .mono-brand {
    position: static !important;
    transform: none !important;
    align-self: flex-start;
    min-height: 32px;
  }
  html[data-test-premium-shell="1"] .mono-topbar > .mono-topnav.gooey-nav-container {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: thin;
  }
  html[data-test-premium-shell="1"] .gooey-nav-container nav {
    width: max-content !important;
    min-width: 100%;
    transform: none !important;
  }
  html[data-test-premium-shell="1"] .mono-topbar > .mono-topnav.gooey-nav-container nav ul {
    gap: 6px !important;
    padding: 0 2px !important;
    justify-content: flex-start !important;
  }
  html[data-test-premium-shell="1"] .gooey-nav-container nav ul li,
  html[data-test-premium-shell="1"] .gooey-nav-container nav ul li:last-child {
    flex: 0 0 auto !important;
    height: 44px !important;
  }
  html[data-test-premium-shell="1"] .gooey-nav-container a,
  html[data-test-premium-shell="1"] .gooey-nav-container .gooey-nav-action,
  html[data-test-premium-shell="1"] .gooey-nav-container .gooey-nav-account {
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }
  html[data-test-premium-shell="1"] .gooey-nav-container .effect { display: none !important; }
  html[data-test-premium-shell="1"] .gooey-nav-container nav ul li::after {
    transition: opacity .15s ease !important;
    transform: none !important;
  }
  .model-list-select-dropdown--portal,
  .param-select-dropdown--portal,
  .dur-picker-panel--portal {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .model-list-select-dropdown--portal { transform: none !important; }
  .model-list-select-dropdown--portal.model-list-fade-enter-from,
  .model-list-select-dropdown--portal.model-list-fade-leave-to { transform: translateY(-4px) !important; }
  html[data-test-premium-shell="1"] body.home-page .focus-word,
  html[data-test-premium-shell="1"] body.home-page .pi-head-focus {
    filter: none !important;
    cursor: default;
    transition: color .15s ease !important;
  }
  html[data-test-premium-shell="1"] body.home-page .focus-frame { display: none !important; }
  html[data-test-premium-shell="1"] body.home-page .focus-container {
    width: 100% !important;
    row-gap: 32px !important;
  }
  html[data-test-premium-shell="1"] body.home-page .focus-word--title {
    margin-left: 0 !important;
    font-size: clamp(28px, 8.5vw, 54px) !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  html[data-test-premium-shell="1"] body.home-page .focus-word--intro {
    margin-right: 0 !important;
    white-space: normal !important;
  }
  html[data-test-premium-shell="1"] body.home-page .sh-hero.sh-reveal,
  html[data-test-premium-shell="1"] body.home-page .sh-hero .sh-eyebrow,
  html[data-test-premium-shell="1"] body.home-page .sh-hero .focus-container,
  html[data-test-premium-shell="1"] body.home-page .sh-hero .sh-intro {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
  }
  html[data-test-premium-shell="1"] .home-aero-host { display: none !important; }
}

@media (max-width: 1000px) and (hover: none) and (pointer: coarse) and (orientation: landscape) {
  /* A short screen needs the header to scroll away with the page. */
  html[data-test-premium-shell="1"] .mono-topbar { position: relative !important; }
  html[data-test-premium-shell="1"] body.home-page .sh-hero { padding-top: 28px !important; }
}

@media (min-width: 901px) and (max-width: 1000px) and (hover: none) and (pointer: coarse) {
  /* Wide landscape phones must retain the existing mobile creation layout. */
  html[data-test-premium-shell="1"] body.create-page .test-create-workbench {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 18px 14px 24px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  html[data-test-premium-shell="1"] body.create-page .test-create-workbench > #vid-bar-center,
  html[data-test-premium-shell="1"] body.create-page .test-create-workbench > .test-create-inspector {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
  }
  html[data-test-premium-shell="1"] body.create-page .test-create-workbench .vid-center-actions {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin-top: 12px !important;
  }
  html[data-test-premium-shell="1"] body.create-page.has-results .create-feed-area {
    width: calc(100% - 28px) !important;
    margin: 0 14px !important;
    padding: 12px 0 36px !important;
  }
}