/* Copyright Ayers Electronics Inc. All rights reserved. */
/* touch (pointer: coarse). Every rule here is keyed off the page's television flag (<html data-tv>,
   js/theme-boot.js): a set whose WebView reports a coarse pointer still draws the remote's layout,
   and a real touch screen gets the finger's. */

/* ---- touch (pointer: coarse): what only a finger needs ---- */
@media (pointer: coarse) {
  /* guide.touchRowEpx (48): a finger's row clears the 44px floor between its 4px insets; the 30px
     timebar (the favorites header inside it) is the one chrome row left under the floor. This is
     the first-paint fallback - js/guide-row.js's measureLane picks the same value at runtime, unless
     the surface is a phone, whose own row (also 48) wins instead. */
  html:not([data-tv]) {
    --guide-row-h: 48px;
  }
  /* Key chips and key hints name keys a finger does not have (a legend
     may only name an action that is actually wired). */
  html:not([data-tv]) #odHintText,
  html:not([data-tv]) #odPlayHint,
  html:not([data-tv]) .dialog-hint {
    display: none;
  }
  /* Inline links keep their text where it is and grow their tap area to the floor (16px each side of
     a 13px line clears 44; 14 left it at 41). */
  html:not([data-tv]) #demoStrip a,
  html:not([data-tv]) #demoVersion a,
  html:not([data-tv]) .gate-legal a,
  html:not([data-tv]) #stillWatching .gate-download a {
    display: inline-block;
    padding: 16px 8px;
    margin: -16px -8px;
  }
  /* The search page's tabs are real buttons, but search.css sizes them for a mouse pointer at
     every width under 1280 (30px, 40px past it) - a finger gets the floor here instead. */
  html:not([data-tv]) .search-tab {
    min-height: var(--control-min-height, 44px);
  }
  /* The guide head's bar, its tabs, Back word and its icons are sized to the top line for a remote; a
     finger gets the floor. */
  html:not([data-tv]) #guideHead .seg,
  html:not([data-tv]) #guideHead .seg-btn,
  html:not([data-tv]) #guideCloseBtn,
  html:not([data-tv]) #headSwitchProfile,
  html:not([data-tv]) #headPickTogether,
  html:not([data-tv]) #headSurpriseMe,
  html:not([data-tv]) #headMusicMode,
  html:not([data-tv]) #headSyncTvs,
  html:not([data-tv]) #headAskMagpie,
  html:not([data-tv]) #modeSettings {
    min-height: var(--control-min-height, 44px);
  }
  /* The colour key's items and More sit on a 20px line for a remote; a finger gets the floor. */
  html:not([data-tv]) #guideLegend .legend-item {
    min-height: var(--control-min-height, 44px);
  }
  /* A slider stands 24px tall for a mouse (Now Playing's seek bar); a finger gets the floor. */
  html:not([data-tv]) [role="slider"],
  html:not([data-tv]) .now-playing-seek {
    min-height: var(--control-min-height, 44px);
  }
  /* The controls a sheet sizes for a mouse or a remote under the floor: the search scope, On Demand's
     filters and sort, and the panel's rows take the floor for a finger. */
  html:not([data-tv]) .search-scope-btn,
  html:not([data-tv]) #odFilters .filter-ctl,
  html:not([data-tv]) .xray-row {
    min-height: var(--control-min-height, 44px);
  }
  /* The sort's two glyph buttons and the demo's Download mark are narrower than the floor too. */
  html:not([data-tv]) #odSortDir .seg-btn,
  html:not([data-tv]) #demoMark {
    min-height: var(--control-min-height, 44px);
    min-width: var(--control-min-height, 44px);
  }
  /* The profile-name and invite-code faces lay the keypad into the page on every head: under a finger
     its keys take the floor and the slot holds every row the pad draws. */
  html:not([data-tv]) .page-keypad.inline .key,
  html:not([data-tv]) #firstRun .page-keypad.inline .key {
    height: var(--control-min-height, 44px);
  }
  html:not([data-tv]) .firstrun-keypad-slot {
    height: auto;
  }
  /* The profile family's rows stand at the television's 39; under a finger they take the floor. */
  html:not([data-tv]) .firstrun-actions .primary,
  html:not([data-tv]) .firstrun-actions .ghost,
  html:not([data-tv]) .pin-pad-grid .key,
  html:not([data-tv]) .profile-edit-row {
    min-height: var(--control-min-height, 44px);
  }
  /* The search field's input fills its box, so the box takes the wide screen's 48. */
  html:not([data-tv]) .search-field {
    height: 48px;
  }
}

/* ---- a phone under a finger: the guide cell fills its 48px row ----
   The row is the law's 48 (PhoneGeometry.GridRowEpx, written inline by js/guide-row.js, which wins
   over the touch row above - also 48, the same comfortable figure, but a phone's own choice); the
   cell's 2px insets left it at 43, under the floor. On a phone the insets go and the row's own 1px
   rule is the only gap, so the cell is 47. */
@media (max-width: 767px) and (pointer: coarse) {
  html:not([data-tv]) .g-cell {
    top: 0;
    bottom: 0;
  }
}