/**
 * ClipScout mobile orientation refinements.
 *
 * This final cascade layer owns only geometry that depends on the combination
 * of viewport width, orientation, and available height. Component styling
 * stays with each surface stylesheet; keeping these exceptions together makes
 * portrait/landscape behavior auditable without duplicating whole components.
 */

/* On a narrow player, seven primary transport actions fit at 40px when the
 * textual time readout moves visually out of the control rail. The live text
 * remains present for assistive technology instead of using display:none. */
@media (max-width: 640px) {
  .transport-controls {
    min-height: 40px;
    gap: 3px;
  }

  .transport-button {
    width: 40px;
    height: 40px;
  }

  .embed-queue-navigation .transport-button {
    width: 44px;
    height: 44px;
  }

  .transport-time {
    position: absolute;
    width: 1px;
    min-width: 1px;
    height: 1px;
    display: block;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .related-more {
    width: 40px;
    height: 44px;
  }

  .glass-dialog-close {
    width: 44px;
    height: 44px;
  }

  .account-forgot-password {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* The clear action overlays the query well, so 38px is the largest target
     that preserves the full input and two 40px search actions on 320px. */
  .player-header .clipscout-search.clipscout-search.player-search .search-clear,
  .view-results .header-search-form.clipscout-search .search-clear {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }
}

/* Landscape phones and small tablets need phone-height chrome even after
 * their rotated width crosses conventional tablet/desktop breakpoints. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  body.member-page:not(.admin-page) .member-header {
    position: sticky;
    top: 0;
    z-index: 110;
    min-height: 64px;
    grid-template-columns: clamp(96px, 18vw, 122px) minmax(0, 1fr) auto;
    grid-template-rows: 48px;
    gap: 8px;
    padding: 8px 10px;
  }

  body.member-page:not(.admin-page) .member-header .member-brand,
  body.member-page:not(.admin-page) .member-header .member-brand img {
    width: clamp(96px, 18vw, 122px);
    height: 48px;
  }

  body.member-page:not(.admin-page) .member-search.clipscout-search {
    grid-column: 2;
    grid-row: 1;
    min-height: 48px;
    grid-template-columns: minmax(0, 1fr) 40px 42px;
    padding: 4px;
  }

  body.member-page:not(.admin-page) .member-search.clipscout-search input {
    min-height: 40px;
  }

  body.member-page:not(.admin-page) .member-search.clipscout-search button {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  body.member-page:not(.admin-page) .member-header .member-nav {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
    gap: 4px;
  }

  /* The admin uses its phone card/table treatment in short landscape. This
     second pass trades vertical hero/stat density for usable first-screen
     controls while preserving every operations section in document order. */
  .admin-page {
    --admin-mobile-header-height: calc(60px + env(safe-area-inset-top));
  }

  .admin-page .admin-header {
    min-height: var(--admin-mobile-header-height);
    padding: max(6px, env(safe-area-inset-top)) 10px 6px;
  }

  .admin-page .admin-header .member-brand img {
    width: 108px;
    height: 44px;
  }

  .admin-page .admin-main section {
    scroll-margin-top: calc(7rem + env(safe-area-inset-top));
  }

  .admin-page .admin-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(220px, .75fr);
    align-items: center;
    gap: 14px;
    padding: 16px;
  }

  .admin-page .admin-intro h1 {
    max-width: 16ch;
    font-size: clamp(2rem, 6vw, 2.75rem);
  }

  .admin-page .admin-intro p:not(.member-kicker) {
    margin-top: 8px;
    line-height: 1.4;
  }

  .admin-page .admin-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-page .admin-stat {
    min-height: 76px;
  }

  .admin-page .admin-select-grid,
  .admin-page .admin-canary-result dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-page .admin-invite-dialog {
    width: min(34rem, calc(100% - 24px));
    max-width: 34rem;
    max-height: calc(100dvh - 16px);
    margin: auto;
  }

  .admin-page .admin-invite-form {
    max-height: calc(100dvh - 16px);
    padding: 16px;
    border-radius: var(--cs-radius-panel);
  }

  /* Information pages keep their secondary navigation row, but the primary
     logo/search/account row contracts from 92px to 64px in short landscape. */
  .cs-site-header--information .information-header-main {
    min-height: 64px;
    grid-template-columns: clamp(96px, 17vw, 120px) minmax(0, 1fr) auto;
    grid-template-rows: 48px;
    gap: 10px;
    padding: 8px 12px;
  }

  .cs-site-header--information .cs-site-brand,
  .cs-site-header--information .cs-site-brand img {
    width: clamp(96px, 17vw, 120px);
    height: 48px;
  }

  .cs-site-header--information .information-search,
  .cs-site-header--information .information-search.clipscout-search {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    min-height: 48px;
  }

  .cs-site-header--information .information-search.clipscout-search {
    grid-template-columns: minmax(0, 1fr) 40px 42px;
    padding: 4px;
  }

  .cs-site-header--information .information-search.clipscout-search input {
    min-height: 40px;
  }

  .cs-site-header--information .information-search.clipscout-search button {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  .cs-site-header--information .information-header-main .header-account-actions {
    grid-column: 3;
    grid-row: 1;
  }

  .cs-site-header--information > .cs-site-nav {
    height: 40px;
    min-height: 40px;
    gap: clamp(20px, 4vw, 32px);
    padding-inline: 12px;
  }

  /* Short landscape still benefits from the same touch-target increase as a
     portrait phone. A following width guard restores visible time when the
     landscape rail has enough room for it. */
  .transport-controls {
    min-height: 40px;
    gap: 5px;
  }

  .transport-button {
    width: 40px;
    height: 40px;
  }

  .embed-queue-navigation .transport-button,
  .related-more {
    width: 44px;
    height: 44px;
  }

  .player-header .clipscout-search.clipscout-search.player-search .search-clear,
  .view-results .header-search-form.clipscout-search .search-clear {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }

  .glass-dialog-close {
    width: 44px;
    height: 44px;
  }

  .account-forgot-password {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* At 480px and wider the complete 40px transport plus a 92px time readout fits
 * without shrinking, wrapping, or introducing a horizontal control rail. */
@media (min-width: 480px) and (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .transport-time {
    position: static;
    width: auto;
    min-width: 92px;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}