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

/* ---- select a profile (js/profile-picker.js, pages/select-profile.html) ----
   One row of round tiles, run like a rail from the glass: each person's picture fills its circle
   inside an 11 rim, the name sits under it, and Add Profile is the last tile. The focused person's
   name carries two small round buttons, Edit and Move. The tile is shared with the sign-in gate's
   faces (js/profile-tile.js), so the circle, the rim and the badges reach them too; the rail, the
   buttons and the editor are this screen's alone. The ring is the page's own signature; every colour is a token. */
/* The frame, the card and the heading are the family's (css/components/profile-family.css); this
   sheet sets the row's own measures. */
#profilePicker {
  --picker-left: var(--page-margin);
  --picker-right: var(--page-margin);
  --row-start: 54px;
  z-index: 46;
}
/* Shown only for a set that already carries a fresh local profile: the sheet's lead line under
   the swapped heading, above the same row. */
.profile-picker-lead {
  margin: -8px 0 0;
  font-size: var(--type-body);
  color: var(--muted);
  text-align: center;
}
/* --profile-grid-gap is the space between two tiles, drawn as half of it on every side of each tile
   and pulled back by the grid's own margin, so a centred wrapping row keeps its edges (a flex gap is
   dropped by the television floor). The sign-in gate's faces wrap this way. */
.profile-picker-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  --profile-grid-gap: 24px;
  margin: calc(var(--profile-grid-gap) / -2);
  max-width: calc(904px + var(--profile-grid-gap));
}
.profile-picker-grid > * {
  margin: calc(var(--profile-grid-gap) / 2);
}
/* Who's Watching's row runs the glass's whole width, pulled out past the layer's own margins; the
   row scrolls inside it and never the layer. The first tile starts --row-start in from the glass. A
   row that fits stands centred; a longer one starts from the glass and glides (js/picker-row.js). */
.profile-picker-rail {
  position: relative;
  justify-self: stretch;
  margin: 0 calc(-1 * var(--picker-right)) 0 calc(-1 * var(--picker-left));
}
.profile-picker-row {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
}
#profilePickerGrid {
  position: relative;
  flex-wrap: nowrap;
  width: max-content;
  max-width: none;
  margin: 0 auto;
  padding: 8px calc(var(--row-start) - var(--profile-grid-gap) / 2);
}
#profilePickerGrid > * {
  flex: 0 0 auto;
}
/* An end with more past it wears the page's own ground fading to clear, darker as the row travels
   (js/picker-row.js sets how dark). */
.profile-picker-shade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 64px;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.profile-picker-shade-before {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
  opacity: var(--row-shade-before, 0);
}
.profile-picker-shade-after {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
  opacity: var(--row-shade-after, 0);
}
.profile-tile {
  --profile-tile: 152px;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: var(--profile-tile);
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
}
/* The profile circle uses the page's regular theme-coloured focus ring. */
.profile-tile {
  --focus-ring-outset: 0 0 0 var(--focus-ring-width) var(--accent);
}
.profile-tile-face,
.profile-tile-plus {
  display: grid;
  place-items: center;
  width: var(--profile-tile);
  height: var(--profile-tile);
  border-radius: var(--radius-round);
  background: var(--panel);
  font-size: var(--type-display);
  color: var(--muted);
}
/* The picture fills its circle inside a rim of the plate, 11 on the 152 tile and in proportion on a
   smaller one; the padding wears the picture's own ground, so a kids tile's band stays the band. */
.profile-tile img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: calc(var(--profile-tile) * 11 / 152);
  border-radius: var(--radius-round);
}
.profile-tile-name {
  max-width: var(--profile-tile);
  overflow: hidden;
  font-size: var(--type-body);
  color: var(--muted);
  transition: color 160ms ease;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Focus rings the circle alone and brightens the name under it, outside the ring; the button itself
   never wears base.css's ring. Plain :focus, as every remote-driven stop is (css/base.css). */
.profile-tile:focus {
  outline: none;
  box-shadow: none;
  color: var(--text);
}
.profile-tile:focus .profile-tile-name,
.profile-seat:focus-within .profile-tile-name {
  font-weight: 700;
}
.profile-tile:focus .profile-tile-face,
.profile-tile:focus .profile-tile-plus {
  outline: none;
  box-shadow: var(--focus-ring-outset);
}
/* A kids tile is smaller whole: the rainbow, the picture and the pill together at nine tenths,
   standing on the foot of its place in the row. The ring's band is kids-ring.css's; nothing clips
   the holder, so the pill under the circle and the ring round it show whole. */
.profile-tile-face.kids-ring[data-kids="yes"] {
  clip-path: none;
  transform: scale(0.9);
  transform-origin: 50% 100%;
}
/* A person's seat: their tile and, under the name, small round buttons side by side, Edit and Move,
   each with its word beneath (js/picker-seat.js). They show on the focused person alone, and under
   every name on a phone, which has no focus; their room is always kept so the row never moves as the
   focus does. Two buttons together are the tile's 152, so a long word ends in an ellipsis rather than
   widening the seat. */
.profile-seat {
  --focus-ring-outset: 0 0 0 var(--focus-ring-width) var(--accent);
  display: grid;
  justify-items: center;
  gap: 8px;
}
.profile-seat-actions {
  display: flex;
  justify-content: center;
}
.profile-seat-button {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 76px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  opacity: 0;
  cursor: pointer;
  transition: opacity 160ms ease;
}
.profile-seat-circle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-round);
  background: var(--panel);
}
.profile-seat-circle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.profile-seat-label {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--type-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-seat:focus-within .profile-seat-button {
  opacity: 1;
}
.profile-seat-button:focus {
  outline: none;
  box-shadow: none;
  color: var(--text);
}
.profile-seat-button:focus .profile-seat-circle {
  box-shadow: var(--focus-ring-outset);
}
.profile-seat-button:focus .profile-seat-label {
  font-weight: 700;
}
/* Editing one person: the others fade and the row's shades go, the person slides to the middle
   (js/profile-edit.js sets how far) and their options stand beside them. */
#profilePickerGrid > * {
  transition:
    opacity 220ms ease,
    transform 260ms ease;
}
#profilePicker.profile-editing #profilePickerGrid > :not(.profile-seat-chosen) {
  opacity: 0;
  pointer-events: none;
}
#profilePicker.profile-editing .profile-picker-shade,
#profilePicker.profile-editing .profile-seat-button,
#profilePicker.profile-editing .profile-picker-lead {
  opacity: 0;
}
.profile-seat-chosen {
  transform: translateX(var(--edit-shift, 0));
}
@media (prefers-reduced-motion: reduce) {
  #profilePickerGrid > *,
  .profile-seat-button,
  .profile-picker-shade {
    transition: none;
  }
}
/* A phone: 16 at the sides, the notch cleared, two tiles across the row, and the buttons under every name;
   the extra 16 in the width leaves room for a desk browser's scrollbar in a phone-sized window. */
@media (max-width: 767px) {
  #profilePicker {
    --picker-left: max(16px, var(--safe-left));
    --picker-right: max(16px, var(--safe-right));
    --row-start: 16px;
    padding: max(var(--page-margin-vertical), var(--safe-top)) var(--picker-right)
      max(var(--page-margin-vertical), var(--safe-bottom)) var(--picker-left);
  }
  #profilePicker .profile-picker-grid {
    --profile-grid-gap: 16px;
  }
  #profilePicker .profile-tile {
    --profile-tile: min(152px, calc((100vw - 64px) / 2));
  }
  .profile-seat-button {
    opacity: 1;
  }
}
/* The Add tile stands at the top of the row beside the seats, its word level with the names. */
.profile-tile-add {
  align-self: flex-start;
}
/* A refusal line with nothing to say takes no row of the card. */
#profilePickerRefused:empty {
  display: none;
}
/* A short screen, a television at 960 by 540 above all: the heading, the row and the waiting line must
   all stand on the glass at once, since nothing on a remote scrolls this layer. The card's gaps close
   a little, and the buttons' room is no longer kept under the name (they draw over the waiting line's
   reserved space, which only shows once no tile holds the focus). The row clips up and down, so the grid
   keeps the buttons' room inside it and the rail hands it back; the waiting line stands above it. */
@media (max-height: 600px) {
  .profile-picker-card {
    --seat-button-room: calc(58px + 1.5rem);
  }
  #profilePickerGrid {
    padding-bottom: calc(8px + var(--seat-button-room));
  }
  .profile-picker-rail {
    margin-bottom: calc(-1 * var(--seat-button-room));
  }
  .profile-picker-waiting {
    position: relative;
  }
  .profile-seat {
    position: relative;
  }
  .profile-seat-actions {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 8px;
    transform: translateX(-50%);
  }
}
/* A phone on its side is 390 tall: smaller tiles keep the row under the heading. */
@media (max-height: 430px) and (orientation: landscape) {
  #profilePicker .profile-picker-grid {
    --profile-grid-gap: 16px;
  }
  #profilePicker .profile-tile {
    --profile-tile: 104px;
  }
}
/* One tile is picked and this television waits on another screen's yes. Hidden, the row keeps its
   space and draws nothing, so the row above it never moves when the waiting line appears. It takes
   no focus: the ring stays on the pressed tile. */
.profile-picker-waiting {
  display: grid;
  justify-items: center;
  gap: 12px;
}
#profilePickerWaiting.hidden {
  display: grid !important;
  visibility: hidden;
}
.profile-picker-sub {
  margin: 0;
  min-height: 1.5em;
  font-size: var(--type-body);
  line-height: 1.5;
  color: var(--muted);
}
.profile-tile-face {
  position: relative;
}
/* The badges sit on the circle's edge at its 45 degree points: a 26 badge centred there stands
   (1 - 1/sqrt 2) / 2 of the tile, less half itself, in from the corner of the tile's box. The lock
   (a profile with a PIN) stands top right; the check (the tile a press picked, waiting on another
   screen's yes) bottom right, so a picked PIN profile reads both. A kids tile never wears the lock. */
.checkbadge,
.lockbadge {
  position: absolute;
  right: calc(var(--profile-tile) * 0.1464 - 13px);
  width: 26px;
  height: 26px;
  border-radius: var(--radius-round);
  background: var(--accent);
  display: grid;
  place-items: center;
}
.checkbadge {
  bottom: calc(var(--profile-tile) * 0.1464 - 13px);
}
.lockbadge {
  top: calc(var(--profile-tile) * 0.1464 - 13px);
}
.checkbadge svg,
.lockbadge svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--on-accent);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.checkbadge svg {
  stroke-linecap: round;
  stroke-width: 2.4;
}