/**
 * phone.css — the site in the hand. Loaded last. Every rule sits behind a
 * touch or a phone query, so no desktop ever matches one (the behaviour
 * half is js/phone.js; the lab room's still is in lab3d.css). Scopes:
 *
 *   touch ..... (hover: none), (pointer: coarse) — a finger, any size:
 *               no tap flash, no zoom into a field
 *   phone ..... (max-width: 720px), (pointer: coarse) and (max-height: 500px)
 *               — a phone held either way (utils.js PHONE_MQ): the bar
 *               tucks, fingertip targets, rows that show they scroll
 *   upright ... (max-width: 720px) — the phone held upright: denser cards
 */

/* ═════════════════════════════ touch ═════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  /* the tap answers with the press (js/phone.js), not a grey flash;
     the text keeps its size when the phone turns sideways */
  html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  /* iOS zooms the whole page into any field set smaller than 16px */
  input:not([type="range"], [type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"]),
  select, textarea { font-size: 16px; }
}

/* ═════════════════════════════ phone ═════════════════════════════ */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {

  /* ── the bar tucks away while the page is read downward (js/phone.js);
     a hairline at the screen's edge keeps the place while it is away ── */
  .topbar { transition: translate .45s var(--ease-out-expo); }
  .topbar.is-tucked { translate: 0 calc(-100% - 12px); }
  .phone-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 501; pointer-events: none;
    opacity: 0; transition: opacity .3s var(--ease-out-quart);
  }
  .phone-progress i {
    display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--blue), var(--steel));   /* the palette into the website's blue */
  }
  .topbar.is-tucked ~ .phone-progress { opacity: 1; }

  /* ── fingertip targets: 40px and up, the look unchanged where the row
     is tight (the reach grows, not the button) ── */
  .switch-tab { padding-block: 10px; }
  .rail-prev, .rail-next { position: relative; }
  .rail-prev::before, .rail-next::before { content: ""; position: absolute; inset: -8px; }
  .st-tab { padding-block: 10px; }
  .plant-filter { padding: 10px 16px; }
  .batch-play { padding-block: 8px; }
  .lab-poi { padding-block: 10px; }
  .vp-btn { width: 40px; height: 40px; }
  .cta-btn { padding-block: 13px; }
  .field input { min-height: 44px; }
  /* a link in a line of text: its reach grows above and below (inline
     padding moves nothing) */
  :is(.footer-col h2 a, .footer-base a) { padding-block: 12px; }
  /* the scrubber: a finger's height to grab, its handle always shown */
  .vp-scrub { height: 40px; }
  .vp-played::after { transform: translateY(-50%) scale(1); }

  /* ── the 360° tour: the viewer's own scene caption (bottom left)
     repeats the tour's title bar — on a phone the room wants the space ── */
  .pnlm-panorama-info { display: none !important; }

  /* ── the smallest labels: none under 11px ── */
  :is(.twin-stage-n, .bridge-tag, .stop-min, .st-tab-n, .card-cat-badge,
      .orbit-sphere-index, .orbit-year-label, .hood-record-live, .hood-foot-label, .alcoa-entry-label,
      .ebr-sig-caption, .pass-id, .lab-hint, .lab-poi-go, .lab-poi-num, .plant-stat-label,
      .plant-aside-eyebrow, .ebr-who, .ebr-status, .hood-record-note, .thumb-lit-tag, .footer-badges li,
      .rail-of, .plan-step-extra, .live-badge, .orbit-hint, .hrec-demo, .hrec-stage-k) { font-size: 11px; }
}

/* ═════════════════════════════ upright ═════════════════════════════ */
@media (max-width: 720px) {

  /* ── 02 · the lab floor: its chrome fits the photo — the chapter title
     names the view, so the badge steps aside; the tools beside the tour
     become their glyphs (their words stay their names) ── */
  .lab-badge { display: none; }
  .lab-overlay { justify-content: flex-end; }
  .lab-tool:not(.primary) { width: 36px; height: 36px; padding: 0; gap: 0; justify-content: center; font-size: 0; }
  .lab-tool:not(.primary) .lab-tool-glyph { font-size: 14px; }
  .lab-tool.primary { padding-block: 9px; }

  /* ── home · GxP: one line each, the shield beside the name ── */
  .standards-grid { gap: 8px; }
  .standard {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 2px;
    align-items: center; padding: 14px 16px;
  }
  .standard-icon { grid-row: span 2; margin: 0; }

  /* ── home · challenges: the arrow rides at the right, not on a line of its own ── */
  .challenge { padding: 16px 52px 16px 18px; gap: 4px; }
  .challenge .nudge-icon { left: auto; right: 20px; bottom: auto; top: 50%; translate: 0 -50%; }

  /* ── a station's detail: its one column is the screen's width, not
     its widest child's (the walkthrough ran 220px off the right edge) ── */
  .detail-body { grid-template-columns: minmax(0, 1fr); }

  /* ── the footer's links: a finger's height each ── */
  .footer-col ul { gap: 0; }
  .footer-col li a { display: inline-block; padding: 8px 0; font-size: 14px; }

  /* ── rows that scroll sideways say so: the far edge fades, and a flick
     lands on an item; a spacer lets the last one clear the fade ── */
  :is(.st-tabs, .plant-filters, .lab-rail, .batch-steps) {
    scroll-snap-type: x proximity; scroll-padding-inline: 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
  :is(.st-tabs, .plant-filters, .lab-rail, .batch-steps) > * { scroll-snap-align: start; }
  :is(.st-tabs, .plant-filters, .lab-rail)::after { content: ""; flex: none; width: 28px; }
}