/* Fitting every screen (docs/features/viewport-fit.md; Laith, 19 Oct 2026: "the size of stuff should adapt correctly
   on whatever device"). Loaded last. The layout is set by width everywhere else; this adds what width alone missed:
   1. Touch screens: no text field under 16px. Smaller, and iOS Safari zooms the page in when the field is tapped
      and leaves it zoomed, so the site no longer fits the screen. (The guide's ask field was 15px; the others are
      16px or more already and keep their sizes.)
   2. Landscape screens 899px wide or less and 560px tall or less (a phone on its side, a small window): the section
      glyphs join the bar instead of a second row, and the City's list and switch sit under the bar.
   3. Short screens: the welcome takes its sizes from the screen's height, under the bar where the glyphs are in it,
      under the glyph row where they are not, so the title, the City and its doors all fit. */

@media (pointer: coarse) {
  .guide.orb .ask-input, .guide .ask-input { font-size: 16px; }
  :is(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):not([class]) { font-size: 16px; }
}

/* phones with the glyphs in a row under the bar (upright, or on their side but taller than 560px): the map's zoom-out
   glass sat on the row's last glyph (My URUK) at 390 x 844; it goes under the row, and in the journey under the rail.
   The 2D plan's own glass (.plan-reset, fix/plan-2d-interaction) shares its place and goes with it. */
@media (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 561px) {
  .map-reset, .plan-reset { top: calc(var(--sa-t) + 104px); }
  body[data-journey] :is(.map-reset, .plan-reset) { top: calc(var(--sa-t) + 134px); }
}

/* 2. on its side: the glyphs in the bar, icons only (their names are their labels and tooltips) */
@media (max-width: 899px) and (max-height: 560px) and (orientation: landscape) {
  .sections { position: static; inset: auto; flex: 1; justify-content: flex-end; gap: 0; margin-inline-end: 6px; }
  .section-word { flex-direction: row; min-height: var(--tap); padding: 0 6px; }
  .section-word .lb { display: none; }
  .page, .district-page { padding-top: calc(var(--sa-t) + 76px); }
  .heart-renders-pic { margin-top: 0; }
  .uh-acts { top: calc(var(--sa-t, 0px) + 66px) !important; }
  .journey-rail { top: calc(var(--sa-t) + 60px); }
  .origin-skip { top: calc(var(--sa-t) + 64px) !important; }
  /* the City's list: one row of words under the bar, scrolled sideways (clear of a notch's inset), its switch at the
     row's end, clear of the map's zoom-out glass. On the 3D city as on the plan (body[data-cityview] matches the 3D
     city's own panel rule, so this wins by coming last). */
  .city-seal, body[data-cityview] .city-seal { inset-inline: 0 calc(var(--gutter) + 196px); top: calc(var(--sa-t) + 60px); max-width: none; display: flex; gap: 18px;
    padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px));
    overflow-x: auto; scrollbar-width: none; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0; }
  .city-seal::-webkit-scrollbar { display: none; }
  .city-seal .drum-item { grid-template-columns: auto auto; column-gap: 6px; align-items: baseline; white-space: nowrap; min-height: var(--tap); }
  .city-seal .drum-n, .city-seal .drum-item[aria-current="true"] .drum-n { grid-row: auto; font-size: 18px; }
  .city-seal .drum-t, .city-seal .drum-item[aria-current="true"] .drum-t { font-size: 17px; }
  .city-seal .drum-s { display: none !important; }
  .city-switch, body[data-journey] .city-switch { top: calc(var(--sa-t) + 60px); inset-inline-end: calc(max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) + 56px); }
  /* in the journey: the list steps aside (the journey drives the plan) and the rail of steps keeps clear of the switch;
     on the Street its controls sit where the rail would (as on upright phones) */
  body[data-journey] .city-seal { display: none; }
  body[data-journey][data-scene="masterplan"] .journey-rail { inset-inline-end: calc(var(--gutter) + 196px); }
  body[data-scene="homes"] .journey-rail { display: none; }
}
/* small phones on their side (667 x 375): the wordmark steps out of the bar (the mark keeps it); the smallest
   (568 x 320): the language too (the menu has it). Every glyph keeps its 44px and the menu stays on the screen. */
@media (max-width: 720px) and (max-height: 560px) and (orientation: landscape) {
  .top .logo .bw { display: none; }
}
@media (max-width: 640px) and (max-height: 560px) and (orientation: landscape) {
  .top #lang { display: none; }
  .top-actions { gap: 4px; }
}
/* the upright phones' row of glyphs: each one a full 44px tap (it was 43); the City's switch clear of the map's
   zoom-out glass (they overlapped at 390 x 844) */
@media (max-width: 899px) { .section-word { min-height: var(--tap); } }
@media (max-width: 760px) { .city-switch { inset-inline-end: calc(var(--gutter) + 56px); } }

/* 3. short screens with the glyphs in the bar (wide, or on its side): the welcome starts under the bar */
@media (max-height: 560px) and (min-width: 900px), (max-width: 899px) and (max-height: 560px) and (orientation: landscape) {
  .land-title { top: calc(var(--sa-t) + 64px); font-size: clamp(28px, 8vh, 44px); }
  .intro-tagline { top: calc(var(--sa-t) + 70px + clamp(34px, 9.5vh, 52px)); font-size: 13px; max-width: min(62ch, calc(100% - 2 * var(--gutter))); margin-inline: auto; }
  body[data-scene="landing"] .guide.orb { --welcome-guide-top: calc(var(--sa-t) + 114px + clamp(34px, 9.5vh, 52px)); row-gap: 6px; }
  body[data-scene="landing"] .guide.orb .guide-orb { width: clamp(64px, 22vh, 160px); height: clamp(64px, 22vh, 160px); }
  body[data-scene="landing"] .guide.orb .guide-line { font-size: 15px; }
  body[data-scene="landing"] .pulse { display: none; }
}
/* short upright phones (an iPhone SE with Safari's bars, 375 x 553): the welcome starts under the glyph row */
@media (max-width: 899px) and (max-height: 560px) and (orientation: portrait) {
  /* room for a title on two lines (Spanish at 360px) */
  .land-title { top: calc(var(--sa-t) + 104px); font-size: clamp(26px, 5.5vh, 34px); }
  .intro-tagline { top: calc(var(--sa-t) + 112px + 2 * clamp(26px, 5.5vh, 34px)); font-size: 13px; }
  body[data-scene="landing"] .guide.orb { --welcome-guide-top: calc(var(--sa-t) + 172px + 2 * clamp(26px, 5.5vh, 34px)); row-gap: 6px; }
  body[data-scene="landing"] .guide.orb .guide-orb { width: clamp(72px, 20vh, 160px); height: clamp(72px, 20vh, 160px); }
  body[data-scene="landing"] .guide.orb .guide-line { font-size: 15px; }
  body[data-scene="landing"] .pulse { display: none; }
}

/* Arabic's letters reach further below the line than the Latin ones: the tagline a little lower, clear of the title */
html[lang="ar"] .intro-tagline { margin-top: 8px; }

/* short wide windows (1024 x 500, 1280 x 600): the City's list as a row under the bar, as on phones, so it does not
   reach down into the guide; in the journey it steps aside (the journey drives the plan) */
@media (min-width: 900px) and (max-height: 720px) {
  .city-seal, body[data-cityview] .city-seal { inset-inline: 0 calc(var(--gutter) + 196px); top: calc(var(--sa-t) + 76px); max-width: none; display: flex; gap: 22px; padding: 0 var(--gutter);
    overflow-x: auto; scrollbar-width: none; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0; }
  .city-seal::-webkit-scrollbar { display: none; }
  .city-seal .drum-item { grid-template-columns: auto auto; column-gap: 6px; align-items: baseline; white-space: nowrap; min-height: var(--tap); }
  .city-seal .drum-n, .city-seal .drum-item[aria-current="true"] .drum-n { grid-row: auto; font-size: 18px; }
  .city-seal .drum-t, .city-seal .drum-item[aria-current="true"] .drum-t { font-size: 17px; }
  .city-seal .drum-s { display: none !important; }
  .city-switch { top: calc(var(--sa-t) + 76px); }
  body[data-journey] .city-seal { display: none; }
}
/* wide windows in the journey: the rail sits lower from 1180 px (72 px), into the Street's controls' row: they step
   under it (they touched in Spanish) */
@media (min-width: 1180px) { body[data-journey] .uh-acts { top: calc(var(--sa-t, 0px) + 100px); } }
/* the shortest screens (a small phone on its side): the guide's words keep to two lines and its offers to one row,
   both scrolling, so the guide stays under the City's list */
@media (max-height: 360px) {
  .guide.orb:not(.centre) .guide-line { max-height: 2.8em; }
  .guide.orb:not(.centre):not(.docked) .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } /* one row of offers, scrolled sideways */
  .guide.orb:not(.centre):not(.docked) .chips::-webkit-scrollbar { display: none; }
  .guide.orb:not(.centre):not(.docked) .chips .chip { flex: none; white-space: nowrap; }
}