/* ==========================================================================
   TProM Team — the phone pass

   Everything above this file was drawn for a window an arm's length away.
   A phone is held at thirty centimetres, in one hand, and answered with a
   thumb — so three things that are right on a desk are wrong in a pocket:

     1. Type. The scale is fluid on vw, which means on a 375px screen every
        step sits at its floor, and those floors were chosen to sit beside a
        1440px layout. Meta text landed at 9.6px. Here the small end of the
        scale is lifted; the large end is left alone.
     2. Targets. A thumb is roughly 44px wide. Orbit dots, footer links and
        the contact address were all half that. Where the design needs the
        mark to stay small, the *hit area* grows instead of the dot.
     3. Edges. iOS now hands us the full screen (viewport-fit=cover), so the
        notch and the home indicator are ours to avoid.

   Loaded last on purpose: these are corrections to rules that already won
   the cascade, and they should not have to fight it with specificity.
   ========================================================================== */

/* ── 1. Type ─────────────────────────────────────────────────────────────
   Small, tracked, upper-case labels read smaller than their point size, so
   the floor here is a little above where body text would need to be. */
@media (max-width: 640px) {
  :root {
    --fs-body: 1rem;
    --fs-lead: 1.08rem;
    --fs-meta: 0.78rem;
  }

  /* Labels and counters set in their own rem values, below the token. */
  .gate__link .nav__idx,
  .lang__option-code,
  .footer__col-title,
  .portfolio-note__label,
  .policy-summary__label,
  .cap__group-label,
  .dossier__index,
  .dossier__cat,
  .dossier__tech,
  .dossier__fact::before {
    font-size: 0.8rem;
  }

  .orrery__num,
  .dossier__badge,
  .dossier__label,
  .plate__bar,
  .more__cats {
    font-size: 0.78rem;
  }

  .footer__clock,
  .proc__step-num,
  .svc__num,
  .policy-block__num {
    font-size: 0.82rem;
  }

  .orrery__read {
    font-size: 0.8rem;
  }
  .orrery__dot {
    font-size: 0.72rem;
  }

  /* Arabic sets its own sizes for these labels — a little larger, because
     the script needs it — and those rules outrank the ones above. This is
     the only one that still lands under the floor. */
  html[lang='ar'] .dossier__label {
    font-size: 0.8rem;
  }
}

/* ── 2. Targets ──────────────────────────────────────────────────────────
   Coarse pointer only, so nothing about the mouse-driven design moves. */
@media (pointer: coarse) {
  /* The orbit dots and the sound toggle have to stay small — they are
     bodies in orbit, not buttons — so an invisible 44px disc is centred
     under each one and takes the tap. ::after is already the focus ring. */
  .orrery__dot::before,
  .orrery__sound::before {
    content: '';
    position: absolute;
    /* Physical `left`/`top`, not the logical pair: the centring transform
       below is physical, and in Arabic `inset-inline-start` resolves to
       `right`, which threw every one of these hit areas 44px to the left of
       the control it belongs to. The sound toggle's landed on top of orbit
       node 03 and swallowed its taps. */
    left: 50%;
    top: 50%;
    inline-size: max(100%, 44px);
    block-size: max(100%, 44px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
  .orrery__sound {
    position: relative;
  }

  /* Standalone links — a row in the footer, the address on the contact
     page, the note's policy link. Each is its own line already, so the
     target can simply grow to the full height without disturbing text. */
  .footer__link,
  .footer__meta a,
  .contact-mail__address,
  .portfolio-note__link,
  .link {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }

  /* Chrome: the mark, the burger and the language control all sat one or
     two pixels under the line. */
  .brand,
  .burger,
  .lang__toggle,
  .lang__option,
  .btn {
    min-block-size: 44px;
  }
  .brand,
  .burger {
    min-inline-size: 44px;
  }

  /* The project title is a link inside a heading, so it has to stay inline
     — it wraps. Vertical padding on an inline box grows the hit area
     without moving the line it sits on. */
  .dossier__name a {
    padding-block: 5px;
  }

  /* Each footer row is 44px tall now, so the list's own 0.62rem gap on top
     of that would stretch the columns for no reason. */
  .footer__list {
    gap: 0;
  }

  /* iOS paints a grey box over any tapped link; the site has its own
     pressed states and the grey fights the violet. */
  a,
  button {
    -webkit-tap-highlight-color: rgba(178, 91, 240, 0.18);
  }
}

/* ── 3. Edges ────────────────────────────────────────────────────────────
   The header, the menu and the shell take their safe-area insets in the
   files that own them. What is left is the bottom of the page: the footer
   sits against the home indicator, and the back-to-orbit button sits in
   the corner the indicator crosses. */
.footer {
  padding-block-end: max(24px, calc(env(safe-area-inset-bottom) + 12px));
}

@media (max-width: 900px) {
  .toorbit {
    margin-block-end: env(safe-area-inset-bottom);
  }
}