/* The coarse-pointer layer. LOADED LAST on purpose: media queries add no specificity, so these
 * overrides must come after every sheet that defines the controls they resize - in style.css this
 * whole block silently lost to windows.css and panel.css, which is why the first phone build
 * shipped with 20px swatches despite the rules existing.
 */

/* Coarse pointers need a bigger target than a mouse does, but only the ones you actually press.
 *
 * The bar Apple and TradingView both build to is ~44px of touchable area. Everything here is a
 * CONTROL - fields, checkboxes, swatches, list rows, menu rows - sized up only under a coarse
 * pointer so the desktop keeps its density. Inputs get 16px type on top, because iOS Safari
 * auto-zooms the page into any focused input smaller than that, and the "settings zoomed my
 * whole chart in" report is that behaviour, not a bug of ours. */
@media (pointer: coarse) {
  /* A FINGER DRAWS ON THE CHART. IT DOES NOT SELECT THE PAGE.
   *
   * "When I run my finger across the chart, it starts copying things like text on the screen."
   * A drag on a canvas is a pan to us and a text selection to the browser: it reaches past the
   * canvas, takes the toolbar labels and the legend with it, paints them blue and puts a Copy
   * bubble over the chart. Nothing on this application is a document - every string on it is a
   * label on a control - so on a touch device the whole page opts out, and the handful of places
   * where a value is worth copying opt back in below.
   *
   * The callout goes with it: a long press on a chart is the hold-to-read gesture, and iOS was
   * answering it with a share sheet. */
  body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  /* What a thumb is still allowed to take: what you type, and the numbers worth sending to
     somebody. A wallet address in a row, a price in the status bar, the tape. */
  input, textarea, [contenteditable],
  .tape-rows, .wl-row, .sb b, .stat b, .fl-row, .nw-row, .set-info {
    -webkit-user-select: text;
    user-select: text;
  }

  .ctl, .btn, .toggles button, .rail button { min-height: 30px; }
  .win-btn { width: 42px; height: 38px; }

  .fld { min-height: 40px; align-items: center; }
  .fld-input,
  input.txt,
  select.fld-input {
    min-height: 36px;
    font-size: var(--t-input-touch);
    padding: 6px 10px;
  }
  input[type="checkbox"].fld-input {
    width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
  }
  .chip { min-height: 32px; padding: 4px 12px; font-size: var(--t-md); }

  /* The colour controller: a 26px swatch and an 84px hex box are mouse furniture. */
  .cf { gap: 8px; }
  .cf-swatch { width: 40px; height: 34px; }
  .cf-hex { width: 104px; height: 34px; font-size: var(--t-input-touch); }
  .cf-native { width: 34px; height: 30px; }
  .cp-slider { height: 26px; }

  /* Menus and list rows: a row is a target, not a line of text. */
  .ctx-item { min-height: 38px; }
  .pp-item { height: 34px; }
  .pp-addbtn, .pp-custom, .pp-bin { height: 32px; }
  .pp-custom, .pp-selwrap .fld-pick, .pp-onum { font-size: var(--t-input-touch); }
  .pp-selwrap .fld-pick, .pp-onum, .pp-ibtn { height: 32px; }
  .pp-orow { min-height: 36px; }
  .pp-orow input[type="checkbox"] { width: 22px; height: 22px; }
  .pp-spin { width: 22px; }
  .ip-row { height: 36px; }
  .ip-venue, .ip-tab { min-height: 36px; }
  .ws-row { min-height: 40px; }
  .ws-icon { width: 34px; height: 34px; }
  .symrow { min-height: 38px; }
  .tab { min-height: 34px; }
  .tab-add { min-width: 36px; }
  .sb-btn, button.sb { min-height: 28px; }
  .set-foot .btn { min-height: 36px; padding: 0 16px; }
  .fb-input { min-height: 40px; font-size: var(--t-input-touch); }
  .kb-hint { display: none; } /* keyboard hints on a touch device are noise */
}