/* Copyright Ayers Electronics Inc. All rights reserved. */

/* ---- first run: the profile before any network (js/first-run.js, pages/first-run.html) ----
   The gate's own card grammar over the picture, one face at a time and one decision to a face.
   Nothing scrolls: a 540px television leaves 492px of content inside the page's margins, and
   every block below declares the height and the air under it that the stack is summed from
   (js/first-run-face.test.mjs). The name face runs 484 of 492 with its keys drawn under the field and
   the chosen picture beside it, the picture face 356, the theme face 266 and the review 377. */
#firstRun {
  z-index: 45;
  /* Fire TV asks 28 device px of body text and the set draws this page at 960 on a 1920 panel, so the
     smallest word on the card is 14. */
  --firstrun-label: 0.875rem;
}
/* A phone keeps 16 at its sides, so the name's seven keys stay wider than 24 at 320. */
@media (max-width: 767px) {
  #firstRun {
    padding-left: max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
  }
}
/* The family's card (css/components/profile-family.css) drawn for one width on every head. The faces
   below are stacks summed to the pixel, so the card keeps no gap between them and each stretches the
   card's width. */
#firstRun .firstrun-card {
  --family-gap: 0px;
  justify-items: stretch;
  width: 620px;
  max-width: 100%;
  padding: 0 28px;
  text-align: left;
}
/* The one line under a title: what the face is for, in the viewer's own words. */
.firstrun-subtitle {
  height: 17px;
  margin-top: 0;
  margin-bottom: 12px;
  font-size: var(--firstrun-label);
  line-height: 17px;
  color: var(--muted);
  text-align: center;
}
/* The name face reads left then down: the picture the profile opens on, the field it names beside it,
   then the keys across the card. The picture is the square the row stands as tall as. */
.firstrun-name-row {
  display: flex;
  align-items: center;
  height: 115px;
  margin-bottom: 8px;
}
#firstRun .firstrun-name-row .firstrun-icon {
  flex: 0 0 auto;
  width: 115px;
  height: 115px;
  margin: 0 16px 0 0;
}
.firstrun-keypad-slot {
  height: 221px;
  margin-bottom: 6px;
}
#firstRun .page-keypad.inline .key {
  height: 39px;
}
/* A wide screen (1280+) has room past the television floor this card is sized for: the keys grow to
   the same 44px the search page's own inline pad reaches there, rather than staying pinned to the
   960 television budget. */
@media screen and (min-width: 1280px) {
  #firstRun .page-keypad.inline .key {
    height: 44px;
  }
}
.firstrun-name-col {
  flex: 1 1 auto;
  min-width: 0;
}
.firstrun-label {
  display: block;
  height: 17px;
  margin-bottom: 0;
  font-size: var(--firstrun-label);
  line-height: 17px;
  color: var(--muted);
}
#firstRun #firstRunName {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  margin-bottom: 10px;
  font-size: var(--type-heading);
}
/* The picture face: the standard faces five across, the household's own after them. The rows share
   the block's own height, so a household that has added its own icons keeps one card rather than a
   grid that runs off the bottom of it. */
#firstRun #firstRunFaces {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: 12px;
  height: 218px;
  margin-bottom: 12px;
}
/* A face in the standard set, here and on the profile editor's face set (css/components/profile-edit.css):
   the icon art carries its own bird's colour, so the disc behind it is the panel ground. */
.profile-icon-tile {
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-round);
  cursor: pointer;
}
.profile-icon-tile[aria-checked="true"] {
  border-width: 3px;
  border-color: var(--accent);
}
.profile-icon-tile img {
  display: block;
  width: 100%;
  height: 100%;
}
/* The five themes across the card's whole 564 at once, each tile a taller preview than Settings draws. */
.firstrun-themes {
  height: 128px;
  margin-bottom: 12px;
}
#firstRunBirds .bird-row {
  margin: 0;
  padding: 0;
}
#firstRunBirds .bird-grid {
  margin: 0;
}
#firstRunBirds .bird-tile {
  min-height: 128px;
  justify-content: center;
}
#firstRunBirds .bird-tile .bird-mark {
  width: 48px;
  height: 48px;
}
/* The card's taller tile gives the name its colour word on a second line rather than an ellipsis. */
#firstRunBirds .bird-tile .bird-label {
  white-space: normal;
}
/* The review face reads the profile back: the picture that was taken, the name that was typed. */
.firstrun-review {
  height: 172px;
  margin-bottom: 12px;
  text-align: center;
}
.firstrun-icon {
  display: block;
  width: 128px;
  height: 128px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-round);
}
.firstrun-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.firstrun-review-name {
  height: 34px;
  margin: 10px 0 0;
  font-size: var(--type-title);
  line-height: 34px;
  color: var(--text);
}
/* The kids control: a checkbox, then its label with the one sentence under it, the box filling with
   the accent and a tick. The sentence stands on the face, so nothing has to be pressed to read it. */
.firstrun-child {
  display: flex;
  align-items: center;
  height: 61px;
  margin-bottom: 6px;
}
.firstrun-child > * + * {
  margin-left: 12px;
}
.firstrun-child-words {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.firstrun-child-label {
  font-size: var(--type-body);
  color: var(--text);
}
#firstRun .firstrun-child .checkbox {
  position: relative;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
#firstRun .firstrun-child .checkbox[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--accent);
}
#firstRun .firstrun-child .checkbox[aria-checked="true"]::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 3px;
  width: 6px;
  height: 13px;
  border: solid var(--on-accent);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.firstrun-helper {
  display: block;
  height: 17px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--firstrun-label);
  line-height: 17px;
  color: var(--muted);
}
/* One sentence, shown only on a set with no home to keep the profile it is making. */
.firstrun-nohome {
  margin: 12px 0 0;
  font-size: var(--firstrun-label);
  line-height: 1.4;
  color: var(--muted);
}
/* Back rides the primary's row at its left, 12px from it; the primary takes the rest of the width. A
   hidden first button (the name face's Cancel) leaves the one after it at the row's start. The row is
   the wizard's and the welcome screen's alike (pages/first-start.html), so its rules are its own, not
   one screen's: the ghost keeps its words on one line at every width. */
.firstrun-actions {
  display: flex;
  align-items: center;
  height: var(--family-row-height);
}
.firstrun-actions > * + * {
  margin-left: var(--family-inline-gap);
}
.firstrun-actions > .hidden + * {
  margin-left: 0;
}
.firstrun-actions .primary {
  flex: 1 1 auto;
  height: var(--family-row-height);
  margin-top: 0;
  margin-bottom: 0;
}
.firstrun-actions .ghost {
  flex: 0 0 auto;
  height: var(--family-row-height);
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--type-body);
  white-space: nowrap;
}
/* The Settings profile row: the icon, then the name over its one line. Nothing to press. */
.settings-profile {
  display: flex;
  align-items: center;
  padding: 8px 4px;
}
.settings-profile > * + * {
  margin-left: 12px;
}
.settings-profile-mark {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  overflow: hidden;
  background: var(--panel);
  border-radius: var(--radius-round);
}
.settings-profile-mark img {
  display: block;
  width: 100%;
  height: 100%;
}
.settings-profile-words {
  display: flex;
  flex-direction: column;
  min-width: 0;
}