/* Equyx — the phone.
 *
 * Loaded LAST so it wins without anyone writing !important.
 *
 * SCOPED TO `pointer: coarse`, NOT TO A WIDTH. A 44px control is right for a
 * thumb and wrong for a mouse: applying it by viewport width would fatten a
 * narrow desktop window that has a perfectly precise cursor, and would miss a
 * tablet that is wide AND touched. The width clause is a second chance for
 * browsers that report no pointer type, not the main rule.
 *
 * 44px is Apple's figure and 48 is Google's; the harness checks 40, so every
 * rule here clears all three.
 */
@media (pointer: coarse), (max-width: 760px) {

  /* THE TAP TARGET. Measured failures this fixes, on iPhone SE / iPhone 14 /
     Pixel 7: the sign-in inputs at 281x34, "Forgot password" at 82x26,
     "Continue without signing in" at 164x26, and a Newswire headline at
     257x28. min-height rather than height, so nothing that already wraps to
     two lines gets clipped. */
  .btn, button, [role="button"], select,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="number"] {
    min-height: 44px;
  }

  /* A link styled as a button is still a tap target. Centring rather than
     padding keeps the text where it was. */
  .linkish, .linkish.sm, .gate-guest .linkish, .gate-email .linkish.sm {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 6px;
  }

  /* iOS ZOOMS THE WHOLE PAGE when a focused input is under 16px, and it does
     not zoom back out. That single behaviour is what makes a sign-in form feel
     broken on an iPhone, and no amount of viewport tuning prevents it - only
     the font size does.

     THE BARE SELECTOR IS NOT ENOUGH, and loading last does not save it: a
     later rule only wins at EQUAL specificity. `.gate-email input` (0,1,1)
     beats `input` (0,0,1) wherever it sits in the file, which is why the
     sign-in boxes stayed at 12px after this block was first written. Each
     offender is therefore matched at its own specificity. console.css and
     aime.css already do this for the ask boxes and the alert form - these are
     the ones nobody had reached yet. */
  input, select, textarea { font-size: 16px; }

  .gate-email input,
  .cc-form input, .cc-renew input, .sm-grid input, .sm-grid select, .sm-confirm input,
  .sig-num input, .sd-size input, .watch-add input {
    font-size: 16px;
  }

  /* A headline is a link people aim a thumb at. */
  .nw-item a, .nw-item .nw-title, .nw-list a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Grey flash on every tap, on a dark financial UI, reads as a glitch. */
  * { -webkit-tap-highlight-color: transparent; }

  /* The notch and the home indicator. Without this the rail's last item sits
     under the bar on an iPhone and cannot be tapped at all. */
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .crail, .cbody, .console {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Rubber-banding the whole document behind a fixed app chrome looks like the
     app came loose. Panes keep their own momentum scrolling. */
  html, body { overscroll-behavior-y: none; }
  .pane, .cbody, .crail { -webkit-overflow-scrolling: touch; }

  /* A table on a phone scrolls sideways INSIDE ITS OWN BOX. The document must
     not, which is the other thing the harness measures. */
  .pane table, .scr-table, .st-table { min-width: 0; }
}

/* ---- Install app ------------------------------------------------------- */
/* Not inside the media query: the button belongs at the top on a desktop too,
   where Chrome's install icon is equally easy to miss. */
.pwa-wrap { position: relative; display: inline-flex; }

.pwa-btn { white-space: nowrap; }

.pwa-hint {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: min(300px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid var(--line, #2a3242);
  border-radius: 10px;
  background: var(--panel, #131823);
  color: var(--ink, #c9d3e4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  font-size: 12.5px;
  line-height: 1.5;
}
.pwa-hint b { display: block; margin-bottom: 6px; }
.pwa-hint ol { margin: 0 0 8px; padding-left: 18px; }
.pwa-hint li { margin: 4px 0; }
.pwa-hint svg { vertical-align: -2px; }
.pwa-hint .muted { font-size: 11.5px; }

/* An installed window has no address bar to fall back on, so the app's own
   chrome has to clear the status bar itself. */
@media (display-mode: standalone) {
  .ctop, .chead { padding-top: max(8px, env(safe-area-inset-top)); }
}
/* The install offer sits on the brand row, pushed to its end. `auto` rather
   than a gap so the mark and the name stay together whatever the name's
   length, and the button goes to the far side. */
.brand-row { display: flex; align-items: center; gap: 10px; }
.gate-install { margin-left: auto; display: inline-flex; }
@media (max-width: 560px) {
  .brand-row { flex-wrap: wrap; }
  .gate-install { margin-left: 0; width: 100%; }
  .gate-install .pwa-btn, .gate-install .pwa-wrap { width: 100%; justify-content: center; }
}