/* Keep the area summary below the sticky header on short viewports. */
.area-selection {
  max-height: max(160px, calc(100dvh - var(--app-bar-height) - 160px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.area-selection-buttons {
  position: sticky;
  bottom: 0;
  padding-top: 8px;
  background: var(--paper);
}

/* Area selection needs a clear canvas and reachable actions on small screens. */
@media (max-width: 700px) {
  .workspace:has(.area-selection:not([hidden])) {
    height: calc(100dvh - 116px);
    min-height: 0;
  }

  .world:has(.area-selection:not([hidden])) {
    min-height: 0;
  }

  .world:has(.area-selection:not([hidden])) :is(.world-title, .world-location, .world-tag, .empty-world) {
    visibility: hidden;
  }

  .world:has(.area-selection:not([hidden])) .build-dock {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    transform: none;
  }

  .area-selection {
    width: 100%;
    max-height: calc(46dvh - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--paper);
    box-shadow: 0 -4px 24px #453b2515;
  }

  .area-selection-heading {
    gap: 8px;
  }

  .area-selection-heading strong {
    min-width: 0;
    font-size: 17px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .area-selection-heading button {
    flex: none;
    min-height: 44px;
    padding: 8px;
  }

  .area-selection p {
    min-height: 0;
    margin: 4px 0 8px;
    font-size: 12px;
    line-height: 1.4;
  }

  .area-selection .area-timing {
    max-width: none;
    margin: 0 0 8px;
    font-size: 10px;
    line-height: 1.35;
  }

  .area-selection-buttons {
    gap: 6px;
  }

  .area-selection-buttons :is(.primary, .secondary, .cancel-build) {
    min-height: 44px;
    min-width: 44px;
    padding: 10px;
    font-size: 12px;
  }

  .area-selection-buttons .primary {
    justify-content: center;
  }

  .world:has(.area-selection:not([hidden])) .world-bottom {
    position: absolute;
    top: 8px;
    bottom: auto;
    left: auto;
    right: max(8px, env(safe-area-inset-right));
  }

  .world:has(.area-selection:not([hidden])) .zoom :is(#explore-mode, #rotate-left, #rotate-right, #rotation-value, .control-divider, #back-overview) {
    display: none;
  }

  .world:has(.area-selection:not([hidden])) .zoom button {
    min-width: 44px;
    height: 44px;
  }
}