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

/* ---- the profile family: Select a Profile, Edit Profile, Create Your Profile, Choose a PIN ----
   One frame, one card, one heading and one row height, read by the four screens
   (pages/select-profile.html, pages/first-run.html, pages/pin-pad.html). The look is Select a
   Profile's: the page ground, a centred column, the heading in the text ink over a 20 gap. A screen
   adds only what it alone draws. The layer clips, so a card taller than the glass scrolls from its own
   start: auto margins centre the card and drop to zero on overflow, where a centred flex item would
   spill past both edges. Every colour is a token. */
:root {
  --family-gap: 20px;
  --family-row-height: 48px;
  /* The air between stacked rows and keys, and between controls side by side. */
  --family-row-gap: 5px;
  --family-inline-gap: 12px;
}
html[data-tv] {
  --family-row-height: 39px;
}
.profile-family {
  display: flex;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--page-margin-vertical) var(--page-margin);
  background: var(--bg);
}
.profile-family[hidden] {
  display: none;
}
/* A row of the family is the row height (39 on a television), below the 44 pointer floor every button
   carries, so the floor does not hold it: a button taller than its row spills past the card. */
.firstrun-actions .primary,
.firstrun-actions .ghost,
.pin-pad-grid .key,
.profile-edit-row {
  min-height: 0;
}
.profile-family-card {
  position: relative;
  margin: auto;
  width: 100%;
  display: grid;
  justify-items: center;
  gap: var(--family-gap);
}
.profile-family-heading {
  margin: 14px 0 0;
  height: 30px;
  font-size: var(--type-heading);
  font-weight: 600;
  line-height: 30px;
  color: var(--text);
  text-align: center;
}
/* A short screen, a television at 960 by 540 above all: nothing on a remote scrolls these layers, so
   the gaps close a little and the heading stands at the card's top. */
@media (max-height: 600px) {
  .profile-family-card {
    --family-gap: 16px;
  }
  .profile-family-heading {
    margin-top: 0;
  }
}