/* ═══════════════════════════════════════════════════════════════════════════
   site-mobile.css — the SHARED mobile/tablet foundation.

   Linked LAST on all 23 pages (immediately after site-nav.css), so it wins on
   equal specificity over each page's inline <style>, theme.css, cells.css,
   survey.css and guide.css without any of them being edited.

   It owns four cross-cutting things and nothing else. Page-specific layout
   stays in each page's own sheet:

     1. LABEL TYPE FLOOR   — the design's uppercase-mono label idiom renders at
                             8–10.5px. Fine on a desktop, genuinely hard to read
                             on a phone. Bumped to >=11.5px on small screens with
                             tracking eased so the wider glyphs still fit. Body
                             copy is untouched: this is a floor, not a rescale.
     2. TAP TARGETS        — expanded to >=44px via an invisible ::after overlay,
                             so the HIT AREA grows and the VISUAL size does not.
                             Bumping padding instead would relayout the chrome.
     3. SAFE AREA          — every page sets viewport-fit=cover but nothing ever
                             consumed env(safe-area-inset-*). On a notched phone
                             the fixed chrome ran under the notch, and in
                             LANDSCAPE (the orientation the imagers ask for) the
                             notch eats the left edge. Now inset on all sides.
     4. ROTATE PROMPT      — styling for the landscape hint that site-rotate.js
                             shows on the full-bleed imaging tools. Behaviour is
                             in the JS; the look lives here so it themes with the
                             rest of the site.

   Everything is inside a max-width query except the safe-area and text-adjust
   rules, which are correct at every size.
   ═══════════════════════════════════════════════════════════════════════════ */

/* iOS inflates font sizes in landscape unless told not to. This must apply at
   ALL widths — it is the reason a page can look right in portrait and wrong
   the moment the phone is turned. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* Nothing may be wider than the screen. A single overflowing element produces a
   horizontal scrollbar that makes an otherwise-correct page feel broken. */
html,body{ overflow-x:clip; }
img,svg,video,canvas,table{ max-width:100%; }

/* ───────────────────────── 3. SAFE AREA ──────────────────────────────────── */
:root{
  --sa-l: env(safe-area-inset-left, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
}
/* Fixed chrome: keep content clear of the notch and the home indicator. */
.nav{ padding-left:calc(var(--gut,20px) + var(--sa-l)); padding-right:calc(var(--gut,20px) + var(--sa-r)); }
#hbar{ padding-left:calc(var(--gut,20px) + var(--sa-l)); padding-right:calc(var(--gut,20px) + var(--sa-r)); }
.wrap{ padding-left:calc(var(--gut,20px) + var(--sa-l)); padding-right:calc(var(--gut,20px) + var(--sa-r)); }
footer .foot-bot{ padding-bottom:calc(14px + var(--sa-b)); }

/* ══════════════ HANDHELD: PHONES AND TABLETS ═════════════════════════════
   Keyed on TOUCH CAPABILITY as well as width, deliberately. A width-only
   breakpoint at 860px misses an iPad in LANDSCAPE (1024px wide), which is a
   tablet held in a hand and needs finger-sized targets and readable labels
   exactly as much as the same iPad in portrait -- measured: at 1024px the nav
   fell back to 8-10px labels and 34px-tall tabs. `(hover:none) and
   (pointer:coarse)` is true on every phone and tablet at any width and false
   on a desktop mouse, so a large touch device is covered and a narrow desktop
   WINDOW is still covered by the 860px arm.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width:860px), (hover:none) and (pointer:coarse){

  /* ─────────────────── 1. LABEL TYPE FLOOR ──────────────────────────────── */
  /* Shared chrome (theme.css / cells.css / site-nav.css / survey.css). */
  .tag,
  .brand-txt,
  .num,
  .skip,
  .zc-label,.zc-hint,.zc-panel-head,.zc-btn,
  .hero-meta dt,.readout dt,.spec dt,.hero-stats dt,
  .foot-grid h5,
  #footClock,
  .back,.badge,.bdg,
  .kv dt,.kv-k,
  .cell-k,.stat-k,
  .row-id,.row-k{
    font-size:11.5px !important;
    letter-spacing:.12em;
  }
  /* Footer column headings carry the widest tracking (.24em); at a bigger size
     that alone can push a 2-word heading onto 2 lines. Ease it further. */
  .foot-grid h5{ letter-spacing:.14em; }

  /* The wordmark and its second line (10.5px / 8px) — the smallest text on the
     site, and the first thing a reader looks at. */
  .brand-txt{ font-size:13px !important; letter-spacing:.2em; }
  .brand-txt small{ font-size:11px !important; letter-spacing:.1em; }

  /* Showcase inline-styled labels (index/about/tutorials/object pages). */
  .pre-meta,.pre-log,
  .cue span,.tele,
  .step .k b,.gate .gid,
  .stream-h b,.stream-h span,
  .srow .scoord,.srow .sv,
  .legend,
  .rcard .rn,
  .ntl-m,.ntl-tag,
  .who,
  .truth-k,.disc p{
    font-size:11.5px !important;
    letter-spacing:.1em;
  }

  /* Honesty badges must never be the least readable thing on the page. */
  .badge,.bdg,.sv{ font-size:11px !important; letter-spacing:.08em; }

  /* Nested label text: these sit inside a classed parent as a bare <span>/<b>,
     so the parent's own selector never reached them. Located by measuring the
     rendered page, not by reading the stylesheets. */
  .nav .tab span,
  .nav a span,
  .foot-bot span,
  .ahero-meta dt,
  .sitestat dt,
  .cols .col h3 b,
  .seqnav-side span b,
  .ntl-htag span,.ntl-legend span,.ntl-kv dt,.ntl-footline span,
  .disc-links a,
  .port-lbl b,.port-foot span,
  .rmeta,
  .cell-thumb-tag,
  .card-sub,
  .tgroup-lbl,
  .cd-foot,
  .ztf-hips-title,
  .ztf-sidebar-verdict{
    font-size:11.5px !important;
    letter-spacing:.1em;
  }
  /* The rotate hint's own eyebrow -- it would be hypocritical to ship the
     "make small text bigger" sheet with small text of its own. */
  .rotate-hint b{ font-size:11.5px !important; }

  /* ─────────────────── 2. TAP TARGETS ───────────────────────────────────── */
  /* Invisible hit-area expansion: grows what a finger can hit, leaves the
     drawn size alone. `position:relative` is added only where it is safe —
     these are all leaf controls. */
  /* The wordmark shrinks to a 22px glyph once .brand-txt is hidden on a small
     phone. Give it a real box -- an overlay sized to exactly 44px leaves the
     probe landing on its own boundary. */
  .brand{ min-width:46px; min-height:46px; }

  .brand,
  .btn-i,
  .zc-btn,
  .zc-close,
  #cd-close,
  .ztf-hips-info-btn,
  .tab,
  .foot-grid li a,
  .back{
    position:relative;
  }
  .brand::after,
  .btn-i::after,
  .zc-btn::after,
  .zc-close::after,
  #cd-close::after,
  .ztf-hips-info-btn::after,
  .tab::after,
  .back::after{
    content:"";
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:max(100%,46px);
    height:max(100%,46px);
    /* Never paint, never block the element's own hover/active styling. */
    background:transparent;
  }
  /* Nav tabs draw 36px tall, so a 44px probe falls outside them. In an open
     dropdown they are full-width rows a thumb has to land on precisely. */
  .tab{ min-height:44px; display:inline-flex; align-items:center; }
  .tab-menu a{ min-height:44px; display:flex; align-items:center; }

  /* Footer links sit in a tight vertical list; give them real vertical room
     instead of an overlay, which would make adjacent links overlap. */
  .foot-grid li{ margin-bottom:14px; }
  .foot-grid li a{ display:inline-block; padding-block:5px; }

  /* The header pair (sound/theme) drew at 28-34px. An ::after overlay makes
     adjacent buttons' hit areas overlap each other, so grow the buttons for
     real -- there is room for it once the tab ladder has thinned. */
  .btn-i{ width:40px; height:40px; min-width:40px; }
  .backhome{ min-height:40px; display:inline-flex; align-items:center; }

  /* Aladin Lite draws its own controls at 28-30px inside the map. They are
     third-party markup, but they are still buttons a finger has to hit. */
  .aladin-btn,
  .aladin-stack-control,
  .aladin-projection-control{ min-width:40px !important; min-height:40px !important; }

  /* Form controls: checkboxes at 13px and sliders at 18px are unhittable. */
  input[type=checkbox],input[type=radio]{
    width:20px; height:20px; min-width:20px; min-height:20px;
    accent-color:var(--am,#ff9a52);
  }
  input[type=range]{ height:34px; }
  input[type=range]::-webkit-slider-thumb{ width:22px; height:22px; }
  /* iOS zooms the page in when a <16px field is focused. */
  input[type=text],input[type=search],input[type=number],select,textarea{
    font-size:16px;
  }

  /* ─────────────────── HONESTY STRIP MUST NOT TRUNCATE ──────────────────── */
  /* theme.css clips this to one line with an ellipsis, which on a phone showed
     literally "NOT …" — the honesty sentence is the one thing on the page that
     is not allowed to be cut off. Let it wrap and let the bar grow. */
  #hbar{
    height:auto; min-height:var(--hbar-h,32px);
    align-items:flex-start;
    padding-top:7px; padding-bottom:7px;
  }
  #hbar p{
    white-space:normal; overflow:visible; text-overflow:clip;
    font-size:11.5px !important; line-height:1.35;
  }
}

/* ══════════════ SMALL PHONES (<=430px) ═══════════════════════════════════ */
@media (max-width:430px){
  /* Gutters: 20px each side of a 390px screen is 10% of the width. */
  :root{ --gut:16px; }
  /* Display type: clamp() minimums were tuned for a desktop viewport and can
     still overflow a phone. Cap by viewport width instead. */
  .foot-mark{ font-size:clamp(26px,11vw,44px) !important; }
}

/* ═══════════════ 4. ROTATE PROMPT (site-rotate.js) ═══════════════════════ */
.rotate-hint{
  position:fixed; z-index:4000;
  left:calc(12px + var(--sa-l)); right:calc(12px + var(--sa-r));
  bottom:calc(14px + var(--sa-b));
  margin-inline:auto; max-width:440px;
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  font-family:var(--ff-m,ui-monospace,monospace);
  font-size:12px; line-height:1.4; letter-spacing:.02em;
  color:var(--ink,#e8ecf4);
  background:color-mix(in srgb,var(--am,#ff9a52) 10%,var(--bg,#0b0e16) 92%);
  border:1px solid var(--am,#ff9a52);
  border-radius:10px;
  box-shadow:0 10px 34px rgba(0,0,0,.5);
  opacity:0; transform:translateY(10px);
  transition:opacity .35s ease,transform .35s ease;
}
.rotate-hint.in{ opacity:1; transform:translateY(0); }

/* While the hint is on screen it must not sit on top of a tool's own
   bottom-anchored controls -- a toast that covers a button is a trap, not a
   hint. site-rotate.js flags the body, and the tools' bottom chrome steps up
   out of the way for the few seconds the hint is visible. */
body.rotate-hint-on #ztf-be5-toggle,
body.rotate-hint-on #ztf-be5-banner,
body.rotate-hint-on .ztf-nearby-panel,
body.rotate-hint-on .ztf-sky-panel,
body.rotate-hint-on #map-legend,
body.rotate-hint-on #cd-panel{
  transition:transform .35s ease;
  transform:translateY(-104px);
}
.rotate-hint svg{ flex:0 0 auto; width:26px; height:26px; stroke:var(--am,#ff9a52); fill:none; stroke-width:1.6; }
.rotate-hint b{ display:block; font-weight:400; color:var(--am,#ff9a52); letter-spacing:.14em; text-transform:uppercase; font-size:10.5px; margin-bottom:3px; }
.rotate-hint .rh-x{
  flex:0 0 auto; margin-left:auto; position:relative;
  width:30px; height:30px; display:grid; place-items:center;
  background:none; border:0; color:var(--ink-3,#8891a8);
  font-size:17px; line-height:1; cursor:pointer;
}
.rotate-hint .rh-x::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44px; height:44px; }
@keyframes rh-tip{ 0%,58%{transform:rotate(0)} 74%,100%{transform:rotate(90deg)} }
.rotate-hint .rh-ico{ animation:rh-tip 2.8s ease-in-out infinite; transform-origin:50% 50%; }
@media (prefers-reduced-motion:reduce){
  .rotate-hint{ transition:none; }
  .rotate-hint .rh-ico{ animation:none; }
}