/* Copyright Ayers Electronics Inc. All rights reserved. */
/* the sign-in gate. */
/* ---- sign-in gate ---- */
/* The dialog grammar: one card, the wordmark, one lead line, labelled group boxes, an
   action bar with the state word at its right, one primary button. Sized to a 540px television:
   the whole Quick Connect face, mark to Terms, fits with a margin (measured, 38-502 of 540). */
#gate {
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gate-card {
  --gate-card-w: 620px;
  width: var(--gate-card-w);
  max-width: 92vw;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 14px 28px 16px;
  text-align: center;
}
.gate-brand {
  font-size: var(--type-title);
  line-height: 1;
  margin-bottom: 4px; /* the wordmark's own face and colour */
}
.gate-lead {
  font-size: var(--type-label);
  color: var(--muted);
  margin: 0 0 10px;
}
.gate-lead:empty {
  display: none;
}
/* A group box: the bordered section with its title cut into the top edge, the one device that says
   what each part is - every section sits in a group box so its own boundary reads. */
.gate-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0 0 12px;
  padding: 8px 12px 10px;
  text-align: left;
  min-width: 0;
}
.gate-group > legend {
  padding: 0 6px;
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
}
/* The server: its name in the text ink, the address a step quieter under it; no name leaves the address alone. */
.gate-server {
  display: flex;
  flex-direction: column;
  padding: 2px 8px 4px;
  line-height: 1.2;
}
.gate-server > * + * {
  margin-top: 2px;
}
#gateServerName {
  font-size: var(--type-body);
  font-weight: 600;
  color: var(--text);
}
#gateServerName:empty {
  display: none;
}
#gateServerHost {
  font-size: var(--type-label);
  color: var(--muted);
}
/* The action bar above a group's content: the actions at the left, the state word at the right. */
.gate-bar > * + * {
  margin-left: 10px;
}
.gate-bar {
  display: flex;
  align-items: center;
  padding: 2px 0 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.gate-act {
  padding: 7px 12px;
  font-size: var(--type-label);
  font-weight: 600;
  white-space: nowrap;
}
.gate-status {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: var(--type-label);
  color: var(--muted);
  min-height: 18px;
  text-align: right;
}
.gate-status > * + * {
  margin-left: 8px;
}
.gate-pulse {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-round);
  background: var(--accent);
  animation: gate-pulse 1.6s ease-in-out infinite;
  flex: none;
}
.gate-status.expired .gate-pulse {
  background: var(--error);
  animation: none;
}
#gateStatusTimer:empty {
  display: none;
} /* the countdown's own span, outside the live region */
/* A code turned away: the Quick Connect box keeps only its sentence and Try Again. */
#gateQuick:not(.denied) .gate-denied {
  display: none;
}
#gateQuick.denied .gate-bar,
#gateQuick.denied .gate-code,
#gateQuick.denied .gate-where,
#gateQuick.denied > .gate-cell-scan,
#gateQuick.denied > .gate-cell-row {
  display: none;
}
.gate-denied {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 0;
}
.gate-denied > * + * {
  margin-top: 16px;
}
.gate-denied-text {
  margin: 0;
  font-size: var(--type-body);
  color: var(--text);
}
@keyframes gate-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gate-pulse {
    animation: none;
  }
}
/* The gate's sections as a grid of boxes: one column by default - the 960x540 band and
   phones stack them - and on a television (1280+) the code's box wide at the left with the QR's own box
   at its right, the password way across the bottom; the grid's gap is the only spacing between boxes.
   The card grows to 880px there and still clears the 100px watermark inset and the HUD rails at 1080p
   (520px of air each side, centred). */
.gate-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.gate-grid > .gate-group {
  margin: 0;
}
.gate-cell-wide {
  grid-column: 1 / -1;
}
.gate-grid .switch {
  margin-top: 6px;
}
/* The 960x540 band (the Fire TV's CSS size) is two columns too: stacked, the four boxes run 674px tall
   on a 540px screen. The code takes 3/5 and the QR 2/5 there as well; only the card's width differs.
   The wide card is the desk browser's alone: a set draws the page at 960 CSS px (TvViewport), where
   860 across is a 50px gutter and the whole screen, so a television keeps the base 620px card and its
   44x58 code tiles. The flag is the shell's own width hint, on <html> from the head
   (js/theme-boot.js); width alone cannot tell a set from a desk window in this band. */
@media (min-width: 900px) {
  html:not([data-tv]) .gate-card {
    --gate-card-w: 860px;
  }
  .gate-card {
    padding: 12px 24px 12px;
  }
  .gate-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
  /* A box that is one sentence and one switch reads as a row on a television: the sentence at the
     left, the switch at the right - a stacked pair would push the card past 540px on the band. The
     row is a div inside the fieldset, since a fieldset is a flex container only from Chromium 86. */
  .gate-row-body {
    display: flex;
    align-items: center;
  }
  .gate-card .gate-cell-row .gate-copy {
    margin: 0;
    flex: 1 1 auto;
    text-align: left;
  }
  .gate-card .gate-cell-row .switch {
    width: auto;
    margin: 0 0 0 14px;
    flex: none;
  } /* outranks .gate-card .switch { width: 100% } below */
  .gate-cell-scan .gate-qr-row {
    flex-direction: column;
    align-items: center;
  }
  .gate-cell-scan .gate-qr-row > * + * {
    margin-left: 0;
    margin-top: 10px;
  }
  .gate-cell-scan .gate-qr {
    width: 110px;
    height: 110px;
  }
  .gate-cell-scan .gate-qr-caption,
  .gate-cell-scan .gate-qr-address {
    max-width: none;
  }
  /* A television keeps the whole card inside the title-safe area (48 px in from each edge of the 540
     band): the copy under the code, the state line and the sentence beside
     the switch take the label size, the QR is 96, and the groups sit closer. Measured at 960x540: 500 px
     tall as the desk card stacks, 444 is the most that fits inside the floor. */
  html[data-tv] .gate-card {
    padding: 10px 24px;
  }
  html[data-tv] .gate-brand {
    margin-bottom: 2px;
  }
  html[data-tv] .gate-lead {
    margin-bottom: 6px;
  }
  html[data-tv] .gate-group {
    margin-bottom: 8px;
    padding: 4px 12px 6px;
  }
  html[data-tv] .gate-where,
  html[data-tv] .gate-status,
  html[data-tv] .gate-card .gate-cell-row .gate-copy {
    font-size: var(--type-label);
  }
  html[data-tv] .gate-card .gate-cell-row .switch {
    padding: 6px 12px;
    min-height: 36px;
  }
  html[data-tv] .gate-bar {
    padding: 0 0 4px;
    margin-bottom: 4px;
  }
  html[data-tv] .gate-cell-scan .gate-qr {
    width: 96px;
    height: 96px;
  }
  html[data-tv] .gate-legal {
    margin-top: 6px;
  }
  /* The household on one row: each face keeps the picker's 152px while the row has room and shares
     the row once it has not, up to six across (js/auth-people.js writes the count); a seventh wraps
     at the six-across size. The row is the card less its side padding (24px each) and the group
     box's (12px and a 1px border each), and the 1px keeps rounding from wrapping the last face. */
  #gatePeopleGrid {
    --gate-count: 6;
    --gate-row: calc(min(var(--gate-card-w), 92vw) - 74px);
  }
  #gatePeopleGrid[data-count="1"] {
    --gate-count: 1;
  }
  #gatePeopleGrid[data-count="2"] {
    --gate-count: 2;
  }
  #gatePeopleGrid[data-count="3"] {
    --gate-count: 3;
  }
  #gatePeopleGrid[data-count="4"] {
    --gate-count: 4;
  }
  #gatePeopleGrid[data-count="5"] {
    --gate-count: 5;
  }
  #gatePeopleGrid .profile-tile {
    --profile-tile: min(
      152px,
      calc((var(--gate-row) - var(--profile-grid-gap) * (var(--gate-count) - 1)) / var(--gate-count) - 1px)
    );
  }
}
@media (min-width: 1280px) {
  html:not([data-tv]) .gate-card {
    --gate-card-w: 880px;
  }
}