/* One editing strip on compact screens. Native horizontal scrolling keeps all
   controls reachable while popovers retain their body portals. */
@media (max-width: 767px) {
  [data-site-editor-root] [data-editor-context-bar] { height: 44px; min-height: 44px; }
  [data-site-editor-root] [data-editor-toolbar-dock] {
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  [data-site-editor-root] [data-editor-toolbar-dock]::-webkit-scrollbar { display: none; }
  [data-site-editor-root] [data-editor-toolbar-dock] [data-editor-canvas-toolbar][data-editor-toolbar-placement="docked"],
  [data-site-editor-root] [data-editor-toolbar-dock] [data-editor-canvas-toolbar][data-editor-toolbar-placement="docked"]:has(> [data-editor-toolbar-identity]) {
    display: flex; flex-wrap: nowrap; align-items: stretch;
    width: max-content; min-width: 100%; height: 44px; min-height: 44px;
  }
  [data-site-editor-root] [data-editor-toolbar-dock] [data-editor-toolbar-identity] {
    flex: 0 0 auto; grid-area: auto; max-width: none;
  }
  [data-site-editor-root] [data-editor-toolbar-dock] [data-editor-toolbar-tools] {
    flex: 0 0 auto; grid-area: auto; min-width: max-content;
    padding: 0 4px; border-top: 0;
  }
  [data-site-editor-root] [data-editor-toolbar-dock] .editor-adaptive-toolbar {
    --editor-toolbar-scroll: 1;
    flex: 0 0 auto; min-width: max-content; max-width: none; overflow: visible;
  }
  [data-site-editor-root] [data-editor-toolbar-dock] [data-editor-canvas-toolbar] > [data-editor-actions-trigger] {
    grid-area: auto; margin-left: 0;
  }
}
@media (max-width: 1279px) {
  /* Reserve the fixed controls exactly once, with no extra dead strip. */
  [data-site-editor-root] [data-editor-canvas-viewport]:not([data-editor-website-preview="true"]) {
    padding-bottom: var(--editor-mobile-bar-height);
  }
}
/* Portable header navigation follows the preview's logical breakpoint. Its
   automatic mobile trigger occupies the same row rather than a second band. */
[data-site-editor-root] [data-editor-preview-frame][data-site-preview-mode="mobile"]
  [data-site-global-header] .site-portable-native .site-global-nav-desktop { display: none !important; }
[data-site-editor-root] [data-editor-preview-frame][data-site-preview-mode="mobile"]
  [data-site-header-mobile-menu-slot] {
    position: absolute; inset-inline-end: 12px; top: 50%;
    transform: translateY(-50%); margin: 0;
  }

/* Toolbar portals must fit the space between the two editor bars, including
   Android's reduced visual viewport while the keyboard is visible. */
@media (max-width: 767px) {
  :is([data-editor-selection-setting-popover], [data-editor-element-quick-popover],
      [data-editor-text-size-menu], [data-editor-line-spacing-menu],
      [data-editor-text-alignment-menu], [data-editor-actions-menu]) {
    box-sizing: border-box;
    max-height: min(var(--radix-popover-content-available-height, 100dvh),
      max(44px, calc(var(--editor-portal-viewport-height, 100dvh) - 57px - 44px - var(--editor-mobile-bar-height, calc(64px + env(safe-area-inset-bottom, 0px))) - 16px)));
    overflow-y: auto; overscroll-behavior: contain;
  }
}


/* Sites should start with the sites, including on a small phone. Keep the
   menu, create action and filters comfortably touchable in a compact stack. */
@media (max-width: 639px) {
  .operator-theme-shell[data-personal-os-polish]:has([data-personal-sites-root]) [data-personal-os-mobile-menu] {
    min-height: 44px; height: 44px; margin-bottom: 10px;
    padding-block: 0; border-bottom: 0; background: transparent;
  }
  .operator-theme-shell[data-personal-os-polish] #account-dashboard-main-content [data-personal-sites-heading] {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0; padding: 12px; gap: 8px; border-radius: 12px;
  }
  .operator-theme-shell[data-personal-os-polish] #account-dashboard-main-content [data-personal-sites-heading] > div:first-child {
    display: flex; flex: initial; flex-basis: auto; gap: 4px 6px;
  }
  .operator-theme-shell[data-personal-os-polish] #account-dashboard-main-content [data-personal-sites-heading] h2 {
    font-size: 20px; line-height: 1.2; white-space: nowrap;
  }
  .operator-theme-shell[data-personal-os-polish] #account-dashboard-main-content [data-personal-sites-heading] [data-slot="badge"] {
    font-size: 10px; line-height: 1.3; padding: 2px 6px;
  }
  .operator-theme-shell[data-personal-os-polish] #account-dashboard-main-content .personal-sites-heading-actions { max-width: 125px; }
  .operator-theme-shell[data-personal-os-polish] #account-dashboard-main-content [data-personal-sites-heading] [data-personal-sites-create] {
    padding-inline: 10px; font-size: 12px; white-space: nowrap; border-radius: 8px;
  }
  .operator-theme-shell[data-personal-os-polish] [data-personal-site-filters] {
    padding: 8px; gap: 0; border-radius: 12px;
  }
  .operator-theme-shell[data-personal-os-polish] [data-personal-site-filters]:has(#personal-sites-filter-options:not(.hidden)) { gap: 8px; }
}

@media (max-width: 639px) {
  /* Honor Radix's measured free space instead of a full-screen menu cap. */
  body:has(.operator-theme-shell[data-personal-os-polish] [data-personal-sites-root])
    [data-radix-popper-content-wrapper] :is([role="listbox"], [role="menu"]) {
    box-sizing: border-box;
    max-height: min(var(--radix-popper-available-height, 100dvh), calc(100dvh - 24px));
    max-width: calc(100vw - 24px); overflow-y: auto; overscroll-behavior: contain;
  }
}