/* Phones use the existing app browser instead of two competing desktop rails. */
@media (max-width: 740px) {
  body.stable-desktop { --desktop-taskbar-height: 72px; }

  .stable-desktop .desktop-columns,
  .stable-desktop footer > .frame-actions,
  .stable-desktop .start-controls > .frame-actions { display: none; }

  .stable-desktop footer {
    display: grid;
    grid-template-columns: auto 32px 32px minmax(0, 1fr);
    grid-template-rows: 32px 28px;
    gap: 3px 6px;
    padding: 4px 18px 4px 8px;
  }

  .stable-desktop footer #start-button {
    grid-area: 1 / 1;
    height: 32px;
    min-height: 32px;
    gap: 6px;
    padding: 4px 8px;
    font-size: 12px;
  }

  .stable-desktop footer #start-button span { display: inline; }
  .stable-desktop footer #start-button img { width: 20px; height: 20px; }

  .stable-desktop footer :is(#overview-button, #activity-button) {
    grid-row: 1;
    justify-self: stretch;
    width: 32px;
    height: 32px;
    min-height: 32px;
    margin: 0;
    padding: 6px;
  }

  .stable-desktop footer #overview-button { grid-column: 2; }
  .stable-desktop footer #activity-button { grid-column: 3; }
  .stable-desktop footer :is(.overview-label, .activity-label) { display: none; }
  .stable-desktop footer #activity-count {
    position: absolute;
    right: -3px;
    bottom: -2px;
    min-width: 12px;
    height: 12px;
    padding: 0 2px;
    font-size: 8px;
    line-height: 12px;
  }

  .stable-desktop footer .footer-status {
    grid-area: 1 / 4;
    min-width: 0;
    font-size: 10px;
  }

  .stable-desktop footer #clock { gap: 6px; }
  .stable-desktop footer #tasks {
    grid-area: 2 / 1 / 3 / -1;
    width: 100%;
    min-height: 28px;
    padding: 0;
    border: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .stable-desktop #tasks .task { height: 28px; padding: 4px 8px; }
  .stable-desktop footer #show-desktop-button { width: 10px; }

  .stable-desktop #start-menu {
    inset: 8px 8px calc(var(--desktop-taskbar-height) + 8px);
    width: auto;
    max-height: none;
    padding: 10px;
  }

  .stable-desktop #close-start-menu { width: 36px; height: 36px; }
  .stable-desktop #start-search { min-height: 42px; font-size: 16px; }
  .stable-desktop .start-browser,
  .stable-desktop .start-results { flex: 1; height: auto; max-height: none; }
  .stable-desktop .category-browse { min-height: 44px; font-size: 13px; }
  .stable-desktop .search-result { min-height: 44px; }
  .stable-desktop .start-category-status:empty { display: none; }
  .stable-desktop #start-back { min-height: 40px; }
  .stable-desktop :is(#restart-session, #shutdown-session) { min-height: 36px; }

  /* Use the same breakpoint for navigation, window space, and taskbar layout. */
  .stable-desktop .window:not(.clock-window):not(.stopwatch-window):not(.sticky-window):not(.minesweeper-window):not(.calendar-window):not(.world-clock-window):not(.desktop-size-window):not(.desktop-widget):not(.maximized) {
    left: 8px !important;
    top: 8px !important;
    width: calc(100% - 16px) !important;
    height: calc(100% - 16px) !important;
    min-width: 0;
    min-height: 0;
    resize: none;
  }

  .stable-desktop .titlebar { padding-left: 8px; }
  .stable-desktop .titlebar strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 740px) and (max-height: 500px) {
  .stable-desktop #start-menu { padding: 6px; }
  .stable-desktop .frame-controls-heading { margin-bottom: 4px; }
  .stable-desktop #close-start-menu { height: 32px; }
  .stable-desktop #start-search { min-height: 36px; margin-bottom: 6px; padding-block: 6px; }
  .stable-desktop .start-controls { display: none; }
  .stable-desktop .start-session-actions { margin-top: 6px; padding-top: 6px; }
  .stable-desktop .start-category-heading { flex-wrap: nowrap; min-height: 40px; padding: 2px; }
  .stable-desktop #start-back { flex: 0 0 auto; min-height: 36px; margin: 0; }
  .stable-desktop .start-category-heading h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}