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

/* ---- a person's editor on Who's Watching (js/profile-edit.js, pages/select-profile.html
   #profileEdit) ----
   One list beside the person, 490 wide, placed by js/profile-edit.js: rows 40 high on a television with
   a round glyph at the start, 5 between them and 12 more before Remove Profile;
   under a finger every row and chip is 44 or more. The focused row or face wears the picker's accent
   ring, and a row goes bold. Change Picture opens the face set in the list's place. Every colour is a token. */
.profile-edit {
  --focus-ring-outset: 0 0 0 var(--focus-ring-width) var(--accent);
  position: fixed;
  left: var(--edit-left, 0);
  top: var(--edit-top, 0);
  z-index: 1;
  width: 490px;
}
.profile-edit.hidden,
.profile-edit-list.hidden,
.profile-edit-row.hidden {
  display: none;
}
.profile-edit-row {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: var(--family-row-height);
  margin: 0 0 var(--family-row-gap);
  padding: 0 15px;
  border: 0;
  border-radius: var(--radius);
  background: var(--panel);
  font: inherit;
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.4px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
/* Each row's mark: one of our drawn icons (pages/details-icons.html) on a small round plate. */
.profile-edit-ico {
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  margin-right: 13px;
  padding: 5px;
  border-radius: var(--radius-round);
  background: var(--elevated);
  color: var(--muted);
}
.profile-edit-row:focus {
  outline: none;
  box-shadow: var(--focus-ring-outset);
  background: var(--elevated);
  font-weight: 700;
  color: var(--text);
}
.profile-edit-row:focus .profile-edit-ico,
.profile-edit-field:focus-within .profile-edit-ico {
  background: var(--accent);
  color: var(--on-accent);
}
.profile-edit-apart {
  margin-top: 12px;
}
.profile-edit-danger {
  color: var(--live);
}
.profile-edit-done {
  justify-content: center;
  margin-top: 11px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}
.profile-edit-done:focus {
  --focus-ring-outset: 0 0 0 var(--focus-ring-width) var(--text);
  background: var(--accent);
  color: var(--on-accent);
}
/* Under Change Picture's faces, how to choose and how to go back. */
.profile-edit-hint {
  margin: 10px 0 0;
  font-size: var(--type-label);
  line-height: 1.4;
  color: var(--muted);
}
/* The Name row holds its box whole: the box fills the rest of the row inside its height, the text at
   its left, and the ring is the row's own while the box has the focus, never the box's. */
.profile-edit-field:focus-within {
  box-shadow: var(--focus-ring-outset);
  background: var(--elevated);
}
.profile-edit-name {
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  margin: 6px 0 6px 12px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius);
  background: var(--bg);
  font: inherit;
  font-weight: 400;
  color: var(--muted);
  text-align: left;
  text-overflow: ellipsis;
}
.profile-edit-name:focus {
  outline: none;
  box-shadow: none;
  color: var(--text);
}
.profile-edit-name::placeholder {
  color: var(--muted);
}
/* The PIN row: its word, then Set a PIN alone, or Change PIN and Remove PIN, at the row's far end. */
.profile-edit-pin {
  cursor: default;
}
.profile-edit-pin > span {
  margin-right: auto;
}
.profile-edit-chip {
  height: 44px;
  margin: 0 0 0 8px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius);
  background: var(--control-fill);
  font: inherit;
  font-size: var(--type-label);
  color: var(--text);
  cursor: pointer;
}
html[data-tv] .profile-edit-chip {
  height: 28px;
}
/* Kids Profile, a fact: its word, its value at the row's far end, and who changes it under the row. The
   remote passes over it. */
.profile-edit-fact {
  cursor: default;
}
.profile-edit-value {
  margin-left: auto;
  font-weight: 400;
  color: var(--muted);
}
/* Remove Profile's question: the person's name, what goes with them, then Keep and Remove. */
.profile-edit-ask {
  margin: 0 0 6px;
  font-size: var(--type-heading);
  font-weight: 600;
  color: var(--text);
}
.profile-edit-note {
  margin: 0 0 14px;
  font-size: var(--type-label);
  color: var(--muted);
}
.profile-edit-error {
  margin: 8px 0 0;
}
/* The face set, in the list's place: the first run's own five across. */
.profile-edit-faces {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 12px;
  width: 380px;
}
.profile-edit-faces.hidden {
  display: none;
}
/* A phone: the list across the foot of the screen under the person. */
@media (max-width: 767px) {
  .profile-edit {
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 16px;
    width: auto;
  }
  .profile-edit-faces {
    width: 100%;
  }
}