/* Mobile Site OS workspace chrome only. Personal OS, the editor canvas,
   authored pages, snapshots, and member-facing widgets remain outside scope. */
@media (max-width: 1023px) {
  .operator-theme-shell[data-site-workspace-surface] {
    --site-os-mobile-control-size: 44px;
  }

  /* This card is part of the page, so it leaves the viewport while scrolling.
     Specificity also overrides the older shared owner sticky-header rule. */
  .operator-theme-shell[data-site-workspace-surface] main.operator-workspace {
    scroll-padding-block-start: 16px;
  }

  .operator-theme-shell[data-site-workspace-surface] main.operator-workspace > [data-site-workspace-mobile-menu] {
    position: static;
    inset: auto;
    z-index: auto;
    display: block;
    min-block-size: 0;
    margin-block-end: 12px;
    padding: 8px 10px;
    border-radius: 12px;
  }

  .operator-theme-shell[data-site-workspace-surface] [data-site-workspace-mobile-menu] .site-mobile-bar-main {
    align-items: center;
    min-block-size: var(--site-os-mobile-control-size);
    gap: 8px;
  }

  .operator-theme-shell[data-site-workspace-surface] [data-site-workspace-mobile-menu] .site-mobile-menu-button {
    box-sizing: border-box;
    block-size: var(--site-os-mobile-control-size);
    min-block-size: var(--site-os-mobile-control-size);
    padding-block: 0;
    line-height: 1.2;
  }

  .operator-theme-shell[data-site-workspace-surface] [data-site-workspace-mobile-menu] .site-mobile-context {
    gap: 5px;
    margin-block-start: 6px;
    padding-block-start: 6px;
    font-size: 12px;
    line-height: 1.4;
  }

  /* Keep the native controls and their labels. The inset border lets every
     visible field and its interactive target use the same 44px height. */
  .operator-theme-shell[data-site-workspace-surface] .site-app-store .sas-filters {
    min-inline-size: 0;
    max-inline-size: 100%;
    align-items: start;
    gap: 8px;
  }

  .operator-theme-shell[data-site-workspace-surface] .site-app-store .sas-filters > :is(.sas-search, .sas-select) {
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
    block-size: var(--site-os-mobile-control-size);
    min-block-size: var(--site-os-mobile-control-size);
    border-width: 0;
    box-shadow: inset 0 0 0 1px var(--sas-line);
  }

  .operator-theme-shell[data-site-workspace-surface] .site-app-store .sas-filters > .sas-stage-select {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sas-accent) 25%, var(--sas-line));
  }

  .operator-theme-shell[data-site-workspace-surface] .site-app-store .sas-filters :is(input, select) {
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
    block-size: var(--site-os-mobile-control-size);
    min-block-size: var(--site-os-mobile-control-size);
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
  }

  .operator-theme-shell[data-site-workspace-surface] .site-app-store .sas-search input {
    flex: 1 1 auto;
  }

  .operator-theme-shell[data-site-workspace-surface] .site-app-store .sas-search > button {
    box-sizing: border-box;
    inline-size: var(--site-os-mobile-control-size);
    min-inline-size: var(--site-os-mobile-control-size);
    block-size: var(--site-os-mobile-control-size);
    min-block-size: var(--site-os-mobile-control-size);
    margin: 0;
    padding: 0;
    flex: 0 0 var(--site-os-mobile-control-size);
  }

  @container (max-width: 670px) {
    .operator-theme-shell[data-site-workspace-surface] .site-app-store .sas-filters {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container (max-width: 400px) {
    .operator-theme-shell[data-site-workspace-surface] .site-app-store .sas-filters {
      grid-template-columns: minmax(0, 1fr);
    }

    .operator-theme-shell[data-site-workspace-surface] .site-app-store .sas-filters > :is(.sas-search, .sas-select) {
      grid-column: 1 / -1;
    }
  }

  @media (forced-colors: active) {
    .operator-theme-shell[data-site-workspace-surface] .site-app-store .sas-filters > :is(.sas-search, .sas-select) {
      border-width: 0;
      outline: 1px solid CanvasText;
      outline-offset: -1px;
      box-shadow: none;
    }
  }
}

/* Member administration remains readable at phone widths without a second
   oversized workspace header or a half-width navigation field. */
@media (max-width: 767px) {
  .operator-theme-shell[data-site-workspace-surface] .site-access-workspace .sa-mobile-navigation {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    min-inline-size: 0;
    inline-size: 100%;
    align-items: start;
  }

  .operator-theme-shell[data-site-workspace-surface] .site-access-workspace .sa-mobile-navigation select {
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    min-block-size: 44px;
    border-radius: 10px;
    font-size: 16px;
  }

  .operator-theme-shell[data-site-workspace-surface] main .site-access-workspace > .sa-app-header {
    padding: 12px 14px;
    gap: 8px;
  }

  .operator-theme-shell[data-site-workspace-surface] .site-access-workspace .sa-readiness-notice {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
  }

  .operator-theme-shell[data-site-workspace-surface] .site-access-workspace .sa-readiness-notice .sa-readiness-icon {
    display: none;
  }

  .operator-theme-shell[data-site-workspace-surface] .site-access-workspace .sa-readiness-notice h2 {
    font-size: 14px;
    line-height: 1.5;
  }

  .operator-theme-shell[data-site-workspace-surface] .site-access-workspace .sa-readiness-notice p {
    font-size: 13px;
    line-height: 1.55;
  }

  .operator-theme-shell[data-site-workspace-surface] .site-access-workspace .sa-readiness-notice > button {
    grid-column: 1 / -1;
    justify-self: stretch;
    max-inline-size: none;
    min-block-size: 44px;
  }
}