/* iPhone and touch layer for the globe landing page.
   Loaded after style.css and overrides it. On phones in portrait the page is a
   normal top-to-bottom flow instead of fixed pixel positions; app.js sizes and
   places the WebGL canvas over the #markers box, which acts as the globe stage. */

/* Keep header and footer clear of the notch when a phone is in landscape. */
header,
footer {
  margin-left: max(3.3%, env(safe-area-inset-left));
  margin-right: max(3.3%, env(safe-area-inset-right));
}

.app-link-short {
  display: none;
}
/* style.css styles every direct span of .app-link as the arrow; the text labels keep the link's own size and colour. */
.app-link > .app-link-label,
.app-link > .app-link-short {
  font-size: inherit;
  color: inherit;
}
nav button {
  white-space: nowrap;
}
/* Phones: a drag that starts on the Earth or one of its labels turns the globe in any direction. app.js keeps
   #globeGrab sized to the Earth's outline; swipes that start on the space around it scroll the page. */
#globeGrab {
  display: none;
}
@media (max-width: 760px) {
  #globeGrab {
    display: block;
    position: absolute;
    border-radius: 50%;
    touch-action: none;
    pointer-events: auto;
    cursor: grab;
  }
  .marker {
    touch-action: none;
  }
}

/* No page scrolling behind an open panel. */
html:has(dialog[open]) {
  overflow: hidden;
}

/* Touch screens have no hover, so give taps visible feedback instead. */
@media (hover: none) {
  button:active,
  a:active {
    opacity: .72;
  }
}

@media (max-width: 760px) {
  :root {
    --gutter-l: max(6vw, env(safe-area-inset-left));
    --gutter-r: max(6vw, env(safe-area-inset-right));
    --stage: clamp(300px, 100vw, 470px);
  }

  /* Header: same wordmark, and the app link comes back as a short "Log in". */
  header {
    margin: 0 var(--gutter-r) 0 var(--gutter-l);
    padding-top: env(safe-area-inset-top);
    height: auto;
    min-height: 72px;
    gap: clamp(7px, 2.1vw, 12px);
  }
  /* The wordmark keeps its size and two lines; spacing gives way on the narrowest phones instead. */
  header .tagline {
    flex-shrink: 0;
  }
  #savedNav {
    padding: 1px 4px;
  }
  .app-link {
    display: flex;
    gap: 6px;
    margin-left: 2px;
    min-height: 44px;
    font-size: 13px;
    white-space: nowrap;
  }
  .app-link-label {
    display: none;
  }
  .app-link-short {
    display: inline;
  }

  /* One column in reading order: intro, globe, controls, selected territory, index, list. */
  main {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    padding: 0 var(--gutter-r) 0 var(--gutter-l);
  }
  .intro {
    display: contents;
  }
  .intro > .eyebrow {
    margin-top: 26px;
  }
  h1 {
    font-size: min(43px, 11.4vw);
    margin: 16px 0 14px;
  }
  .intro > p {
    font-size: 14px;
    line-height: 1.6;
  }
  .orbit-caption,
  .coordinates,
  .vignette,
  .grain {
    display: none;
  }

  /* Globe stage: full-bleed box; hidden off-globe labels are clipped so they can't widen the page. */
  #markers {
    order: 2;
    position: relative;
    inset: auto;
    z-index: 1;
    height: var(--stage);
    margin: 6px calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter-l));
    overflow: hidden;
  }
  /* Vertical swipes scroll the page; sideways drags and pinches go to the globe. */
  #space {
    position: absolute;
    inset: auto 0 auto 0;
    top: 330px;
    height: var(--stage);
    touch-action: pan-y;
    -webkit-mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent);
  }
  .globe-bottom {
    order: 3;
    position: static;
    width: auto;
    margin: 0;
  }
  .globe-bottom > p {
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
  }
  .controls {
    margin-top: 4px;
    gap: 10px;
  }

  .territory-strip {
    order: 4;
    position: relative;
    inset: auto;
    margin-top: 18px;
    min-height: 0;
    padding: 18px 0;
    gap: 14px 18px;
  }
  .territory-strip .primary {
    min-height: 48px;
  }

  .intro .coverage {
    order: 5;
    position: static;
    width: auto;
    margin: 34px 0 0;
  }
  .scope-control {
    width: auto;
  }
  /* 16px stops iOS Safari zooming the page when a field is focused. */
  .coverage select {
    position: static;
    width: 100%;
    min-height: 44px;
    margin-top: 2px;
    padding: 10px 12px;
    font-size: 16px;
  }

  .radar {
    order: 6;
    position: relative;
    inset: auto;
    width: auto;
    margin-top: 30px;
  }
  .radar #searchInput,
  input,
  select,
  textarea {
    font-size: 16px;
  }
  /* Let a swipe that reaches the end of the list carry on scrolling the page. */
  #territoryList {
    height: 340px;
    overscroll-behavior: auto;
  }

  footer {
    margin: 26px var(--gutter-r) 0 var(--gutter-l);
    height: auto;
    min-height: 60px;
    padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
  }

  /* Labels move with the globe every frame, so no live blur behind them; bigger tap targets. */
  .marker {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #08131ee8;
    min-height: 36px;
    padding: 0 10px;
  }

  /* Full-screen panels: clear the notch and home indicator; skip blur behind opaque sheets. */
  dialog,
  dialog::backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .dossier-top {
    height: calc(70px + env(safe-area-inset-top));
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-left: max(23px, env(safe-area-inset-left));
    padding-right: max(23px, env(safe-area-inset-right));
  }
  .dossier-scroll {
    height: calc(100% - 70px - env(safe-area-inset-top));
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }
  .dossier-title {
    flex-wrap: wrap;
  }
  .dossier-title h2 {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}