/* Copyright Ayers Electronics Inc. All rights reserved. */
/* phones and tablets. */
/* ---- phones: every head wraps, every edge keeps the safe area ---- */
@media (max-width: 767px) {
  /* The card keeps its grammar on a phone; the code and the QR stack, the tiles shrink to fit six across. */
  /* The sign-in row has no width for three columns here, so it stacks in the same reading order. */
  .gate-to-row[data-who="yes"] {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 8px;
    padding: 0;
  }

  .gate-to-row[data-who="yes"] .gate-server,
  html[data-tv] .gate-to-row[data-who="yes"] .gate-server {
    align-items: flex-start;
    text-align: left;
  }

  .gate-card {
    padding: 14px 16px 16px;
    max-width: calc(100vw - 24px);
  }
  .gate-code {
    justify-content: center;
    min-height: 46px;
  }
  .gate-code > * + * {
    margin-left: 8px;
  }
  .gate-code-char {
    width: 2.125rem;
    height: 2.875rem;
    font-size: var(--type-title);
  }
  .gate-where {
    text-align: center;
    max-width: none;
  }
  .gate-qr-row {
    justify-content: center;
  }
  .gate-bar {
    flex-wrap: wrap;
  }
  #guideHead {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: calc(8px + var(--safe-top)) max(12px, var(--safe-right)) 8px max(12px, var(--safe-left));
  }
  #guideDetail {
    padding: 8px max(var(--guide-surface-margin), var(--safe-right)) 8px
      max(var(--guide-surface-margin), var(--safe-left));
    gap: 10px;
  }
  #guideDetailTitle {
    font-size: var(--type-label);
  }
  /* The compact pass (PhoneGeometry): the surface starts at the top, one 44px control row (the
     segmented control and CLOSE), the caption in place of the preview, the head and ON NOW at the
     full width, no picture frame in the pane. */
  /* The row scrolls sideways inside itself when its words outgrow the width, as a rail does: Switch
     Profile stays one tap from the head, no word is clipped and the page never scrolls sideways. */
  #guideHead {
    flex-wrap: nowrap;
    min-height: var(--phone-head-row);
    box-sizing: border-box;
    padding: var(--safe-top) max(12px, var(--safe-right)) 0 max(12px, var(--safe-left));
    gap: 8px;
    overflow-x: auto;
  }
  /* The phone shows its own clock; a page hides the page's. */
  body.page-up #clock {
    display: none;
  }
  /* The control fills the 44px row with its faces AT the floor: the ring is drawn over the buttons
     (.seg::after) rather than around them, so the 1px border no longer eats 2px of each face
     (residual, measured at 360 and 390: buttons 42 and the arrow 40 inside a 44 row). The row does not grow. */
  #guideHead .seg {
    border: none;
  }
  #guideHead .seg::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid var(--border);
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
  }
  #guideHead .seg-btn {
    min-height: 44px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 4px 12px;
  }
  #guideCloseBtn,
  #headSwitchProfile,
  #headPickTogether,
  #headSurpriseMe,
  #headMusicMode,
  #headSyncTvs,
  #headAskMagpie,
  #modeSettings {
    flex: none;
    min-height: 44px;
  } /* Back and the head's icons keep the floor on a phone too */
  #previewCaption {
    display: block;
    width: 100%;
    min-height: var(--phone-caption);
    box-sizing: border-box;
    padding: 0 max(12px, var(--safe-right)) 0 max(12px, var(--safe-left));
    border: 0;
    border-radius: 0;
    background: var(--panel);
    color: var(--text);
    text-align: left;
    font-size: var(--type-label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--border-soft);
  }
  #previewCaption::before {
    content: "";
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    margin-right: 0.4em;
    vertical-align: -0.05em;
    background-color: var(--muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M15 6 L9 12 L15 18%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E")
      center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M15 6 L9 12 L15 18%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E")
      center / contain no-repeat;
  } /* the way back to the player */
  #guideDetail,
  #guideLegend {
    display: none;
  } /* the band's picture and text, and the colour key under them, give way to the caption */
  #odPreviewWrap,
  #odPan {
    display: none;
  } /* no thumbnail or now-line in the pane on a phone - the caption is the way back */
  /* A real container again on a phone: the search and filters wrap as one full-width group under the
     categories, rather than each becoming its own item on the wrapping row. */
  #odFilters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  #odScroll,
  #odAllGrid {
    padding: 12px max(12px, var(--safe-right)) 40px max(12px, var(--safe-left));
  }
  #odAllHead {
    padding: 10px max(12px, var(--safe-right)) 10px max(12px, var(--safe-left));
  }
}

/* ---- tablets ---- */
@media (min-width: 768px) and (max-width: 1024px) {
  #guideHead {
    padding: calc(var(--top-line-top) + var(--safe-top)) max(var(--guide-surface-margin), var(--safe-right))
      var(--head-foot) max(var(--guide-surface-margin), var(--safe-left));
  }
  /* the search field keeps the stop's width here too - this block covers the television's own 960px viewport */
}