/*
 * Mobile layer.
 *
 * Loaded last on every page, after theme.css and the page's own sheet, and it
 * only ever adds rules under `[data-layout='mobile']` or a max-width query. A
 * desktop load parses this and matches nothing.
 *
 * `data-layout` is set before the first paint by js/device-boot.js and is not
 * the same question as `@media (max-width: N)`: a phone held sideways is 932
 * CSS pixels wide and still a phone. Anything that decides *which layout you
 * get* keys on the attribute; anything that is genuinely about available width
 * — how many columns a grid can hold — stays a media query, because that one
 * really is a question about the number.
 *
 * Four things this file is responsible for, in order of how much they matter:
 *
 *  1. The 16px input floor. Mobile Safari zooms the whole page when a field
 *     smaller than 16px takes focus, and it does not zoom back out. Every form
 *     in the app was 14px.
 *  2. Safe areas. A notch covers the top bar and the home indicator sits under
 *     anything pinned to the bottom, which on the session screen is the mic.
 *  3. Touch targets. A 29px `.btn--sm` is under half the 44px the platform HIG
 *     asks for and misses often enough to feel broken rather than small.
 *  4. Overflow. One element wider than the viewport gives the whole document a
 *     horizontal scroll, and the symptom — the page drifts sideways when you
 *     try to scroll it down — reads as a broken site, not a wide table.
 */

/* -- safe areas ------------------------------------------------------------
 *
 * Named once, so nothing downstream has to write `env()` with its own fallback.
 * `env()` resolves to 0px on every browser that does not implement it, but only
 * where the property parses at all, so the four-argument form with a fallback
 * is what keeps this from dropping the whole declaration on older Android.
 */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

@supports not (padding: env(safe-area-inset-top)) {
  :root {
    --safe-t: 0px;
    --safe-r: 0px;
    --safe-b: 0px;
    --safe-l: 0px;
  }
}

/* -- document --------------------------------------------------------------- */

[data-layout='mobile'] {
  /* Stops the two-finger and double-tap zoom that a `user-scalable=no` viewport
     would stop — except this one is undone by a pinch, which is the difference
     between a considered default and taking the gesture away from someone who
     needs it. */
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

[data-layout='mobile'] body {
  /* One over-wide child is enough to give the document a horizontal scroll, and
     the symptom is that vertical scrolling drifts sideways. Clipping rather than
     hiding, so a `position: sticky` header inside still sticks — `overflow:
     hidden` on the root silently kills sticky positioning everywhere below it. */
  overflow-x: clip;
  /* Momentum scrolling past the end of a page pulls the whole document, which on
     a full-screen session view detaches the pinned controls for the length of
     the bounce. */
  overscroll-behavior-y: none;
}

/* Anything that ignores its container — a wide table, a preformatted block, an
   image with intrinsic width — is clipped at the viewport rather than being
   allowed to widen the document. */
[data-layout='mobile'] img,
[data-layout='mobile'] video,
[data-layout='mobile'] canvas,
[data-layout='mobile'] svg {
  max-width: 100%;
}

/*
 * Code blocks scroll sideways rather than wrapping, because wrapping a line of
 * code changes what it says.
 *
 * Tables are deliberately not in this list. Every table in the app is already
 * inside a `.policy__scroll`-style wrapper that scrolls, and forcing
 * `display: block` on the table itself would break the column alignment that is
 * the only reason it is a table -- fixing an overflow that is not there by
 * destroying the layout that is.
 */
[data-layout='mobile'] pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* -- form controls ---------------------------------------------------------
 *
 * The 16px floor. This is not a preference: below 16px, mobile Safari zooms the
 * viewport to the focused field on every focus and never zooms back, so the rest
 * of the page is off-screen for the rest of the session. It applies to the real
 * controls only — `--t-md` stays 14px everywhere else, so this changes the size
 * of what you type and nothing else.
 */
[data-layout='mobile'] input[type='text'],
[data-layout='mobile'] input[type='email'],
[data-layout='mobile'] input[type='password'],
[data-layout='mobile'] input[type='search'],
[data-layout='mobile'] input[type='number'],
[data-layout='mobile'] input[type='tel'],
[data-layout='mobile'] input[type='url'],
[data-layout='mobile'] textarea,
[data-layout='mobile'] select {
  font-size: 16px;
  /* 8px of padding on a 16px line is a 34px control. The platform asks for 44. */
  padding-top: 11px;
  padding-bottom: 11px;
}

[data-layout='mobile'] select {
  /* Native pickers on both platforms render their own row height; the floor is
     here so the closed control matches the inputs beside it -- the kit's 44px
     phone row (`--size-control-phone`), not a 46 of its own. */
  min-height: var(--size-control-phone);
}

/* -- touch targets ---------------------------------------------------------
 *
 * 44px is the number both platforms publish, and the gap between 29px and 44px
 * is the difference between a control that is small and one that is missed.
 * Height only: these buttons keep their padding and their type size, so a row of
 * them still reads as a compact toolbar rather than as a stack of primaries.
 */

[data-layout='mobile'] .btn__icon {
  width: 42px;
  height: 42px;
}

/*
 * The invisible extension. A 38px control gets its remaining 6px as a
 * pseudo-element that overhangs the box, so the tappable area is 44 while the
 * drawn button stays 38 and the row keeps its spacing. Only on controls that
 * are actually under the touch floor — applying it everywhere would have
 * neighbouring targets overlap, and the top one would eat both taps.
 */

/* The tap flash Android draws on every touched element, which on a custom
   button is a grey rectangle that ignores the border radius. */
[data-layout='mobile'] * {
  -webkit-tap-highlight-color: transparent;
}

/* Hover styles on a touch device latch: the browser applies :hover on tap and
   leaves it applied until something else is touched, so a tapped button stays
   lit. Restricted to devices that genuinely cannot hover, so a touchscreen
   laptop keeps both. */
@media (hover: none) {
  .btn__icon:hover:not(:disabled) {
    transform: none;
  }
}

/* -- page chrome ------------------------------------------------------------ */

/*
 * The public header is a brand plus two calls to action, and at 390px the three
 * of them measure 510. The nav is what gives: 32px gaps and 24px of horizontal
 * button padding are proportions for a 1440px bar.
 */

/*
 * Below 460 even the compact nav does not fit beside the wordmark, so the
 * wordmark goes and the logo carries the link home. Only on bars that have a nav
 * to make room for -- the join screen's header is a brand and nothing else, and
 * there is no reason to strip it there.
 *
 * Hiding a *link* would be the wrong trade: both of these are the two things
 * anyone came to this page to press.
 */

/* Seven policy and role links in a row that does not wrap. It is the widest
   thing on the landing page and the reason the whole document overflowed. */

/*
 * The hero's three statistics, which are a row of value-over-label pairs
 * separated by hairlines. At this width the third label wraps onto two lines and
 * the row stops reading as three of a kind.
 */

/* A field label, its control and its explanatory hint side by side is a desktop
   form. On a phone the control gets the width and the hint goes under it. */

/* -- modals ----------------------------------------------------------------
 *
 * A centred 640px card with 24px padding is a desktop dialog. On a phone the
 * same markup should be a sheet: full width, pinned to the bottom, and tall
 * enough that the thing it is asking about is above the fold. It arrives from
 * the bottom for the same reason every native sheet does — that is the edge the
 * thumb is nearest, so the dismiss gesture and the reach gesture agree.
 */
[data-layout='mobile'] .modal {
  padding: 0;
  place-items: end stretch;
}

[data-layout='mobile'] .modal__panel {
  width: 100%;
  max-width: none;
  max-height: 92dvh;
  border-radius: var(--radius-overlay) var(--radius-overlay) 0 0;
  border-bottom: 0;
  padding-bottom: var(--safe-b);
  animation: sheet-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sheet-in {
  from {
    transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-layout='mobile'] .modal__panel {
    animation: fade-in 0.18s ease;
  }
}

[data-layout='mobile'] .modal__head {
  padding: var(--space-4) 20px;
}

[data-layout='mobile'] .modal__body {
  padding: 20px;
  gap: var(--space-4);
  /* The sheet scrolls; the page behind it must not follow when the sheet hits
     its end. */
  overscroll-behavior: contain;
}

/* Stacked, so the primary is the one under the thumb and the cancel is the one
   you have to reach for — the opposite of the desktop row, on purpose. */

/* -- toasts ---------------------------------------------------------------- */

/*
 * Top of the screen on a phone, not the bottom right. The bottom right of a
 * session is where the mic lives, and a toast that lands on the control someone
 * is holding is worse than one they have to look up for.
 */
[data-layout='mobile'] .toasts {
  top: calc(var(--space-3) + var(--safe-t));
  bottom: auto;
  left: var(--space-3);
  right: var(--space-3);
  max-width: none;
  align-items: stretch;
}

/* -- cards and grids -------------------------------------------------------
 *
 * A genuine width question, so a media query rather than the attribute: a grid
 * with a 240px minimum column fits two columns at 520px whatever the device is.
 */