/* =============================================================================
   hello.css: child sign-in (launch plan 8): the family computer, the picture code,
   the code from a parent's phone, the Child side of /SignIn (App/_signin_child.html),
   and the parent's small pages for them. Loaded by App/HelloBase.html, and by
   front's SignIn2.html for the Child side.

   From the design's redesign/mockups/launch/_src/css: 50-signin.css (the si-* pieces,
   SPEC.md section 6) under its names. The door pieces of 30-door.css (.hc-doorgrid,
   .hc-doorcard, .hc-otp, .hc-notice, .hc-ticks, .hc-fine, .hc-av-a..d, the printed card
   .hc-pcard) are shared: hc-ui.css section 33. HelloBase sets site_page = 'new', so these
   pages have no classic sheet; Bootstrap's element rules still reach them (the resets below).
   ============================================================================= */

/* ---- 0. The base elements reset inside our own root ---------------------------------------- */
.hl-reset { font-family: var(--hc-font); line-height: 1.5; }
.hl-page { font-family: var(--hc-font); font-size: var(--hc-fs-md); line-height: 1.5; color: var(--hc-glass-ink); -webkit-font-smoothing: antialiased; }
/* Resets at element weight (:where adds nothing), so Bootstrap's and the old site's element rules give way
   and every hc- component class still wins */
:where(.hl-page, .hl-reset), :where(.hl-page, .hl-reset) *, :where(.hl-page, .hl-reset) *::before, :where(.hl-page, .hl-reset) *::after { box-sizing: border-box; }
:where(.hl-page, .hl-reset) :is(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
:where(.hl-page, .hl-reset) :is(h1, h2, h3) { font-family: var(--hc-font); font-size: inherit; font-weight: var(--hc-weight-head, 800); line-height: 1.15; letter-spacing: -.012em; color: inherit; text-wrap: balance; }
:where(.hl-page, .hl-reset) :is(ul, ol) { list-style: none; }
:where(.hl-page, .hl-reset) label { display: block; max-width: none; margin: 0; font-weight: inherit; }
:where(.hl-page, .hl-reset) :is(button, input, select, textarea) { font-family: inherit; }
:where(.hl-page, .hl-reset) a { color: var(--hc-accent-ink); text-underline-offset: .18em; }
:where(.hl-page, .hl-reset) svg { display: inline-block; vertical-align: middle; }
:where(.hl-page, .hl-reset) [hidden] { display: none !important; }
:where(.hl-page, .hl-reset) :focus-visible { outline: 3px solid var(--hc-focus); outline-offset: 3px; }
.hl-page .hc-paper { color: var(--hc-ink); }
.hl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- A. Door pieces this stream draws its own way (the shared ones: hc-ui.css section 33) ---- */
.hc-door .hc-input--text { text-align: left; }
.hc-door .hc-field { display: grid; gap: 6px; }
.hc-door .hc-field__label { font-size: var(--hc-fs-sm); font-weight: 750; color: var(--hc-ink-2); }
.hc-field__help { font-size: var(--hc-fs-xs); font-weight: 600; color: var(--hc-ink-3); }
.hc-linkrow .hl-linkbtn { color: var(--hc-accent-ink); text-decoration: none; }
.hc-linkrow .hl-linkbtn:hover { text-decoration: underline; }

/* ---- B. Sign-in pieces (50-signin.css, SPEC.md section 6) ---------------------------------- */
.si-card .hc-seg { margin-bottom: var(--hc-s-5); }
.si-title { font-size: var(--hc-fs-2xl); }
.si-hello { display: flex; align-items: center; gap: var(--hc-s-3); }
.si-hello .hc-companion { --hc-companion-size: 56px; }
.si-input { font-size: var(--hc-fs-lg); letter-spacing: .01em; }
.si-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.si-foot a { display: inline-flex; align-items: center; gap: 6px; }
.si-foot svg { width: 16px; height: 16px; }
.si-otp { grid-template-columns: repeat(3, minmax(0, 60px)) 6px repeat(3, minmax(0, 60px)); }
.si-otp > span { height: 68px; font-size: 30px; }
.si-fine { display: flex; align-items: center; gap: 6px; font-size: var(--hc-fs-sm); font-weight: 650; color: var(--hc-ink-2); }
.si-fine svg { width: 16px; height: 16px; }
.si-side { align-self: start; }
.si-side__p { margin-top: var(--hc-s-2); color: var(--hc-glass-ink-2); }
.si-steps { list-style: none; display: grid; gap: var(--hc-s-3); margin-top: var(--hc-s-4); }
.si-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; font-weight: 650; line-height: 1.4; }
.si-steps li > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 800; font-size: 14px; color: var(--hc-on-accent); background: var(--hc-accent); }
.si-grid--child .hc-doorcard { box-shadow: var(--hc-e-4); padding-top: var(--hc-s-6); }
.si-grid--child .hc-doorcard__body { margin-top: var(--hc-s-5); }
.si-grid--child .hc-doorcard__foot { margin-top: var(--hc-s-3); padding-top: var(--hc-s-3); }
.si-coderow { justify-content: center; }
.si-coderow a { display: inline-flex; align-items: center; gap: 6px; }
.si-coderow svg { width: 18px; height: 18px; }

/* The code field: one real input; with js/app/hello.js the six boxes show what is typed and the input lies over them */
.si-otpfield { position: relative; display: grid; gap: 6px; justify-items: start; }
.si-otpfield .si-otp { display: none; }
.si-codeinput { font-size: 28px !important; font-weight: 800 !important; letter-spacing: .3em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.js-otp .si-otpfield .si-otp { display: grid; }
.js-otp .si-otpfield .si-codeinput { position: absolute; left: 0; right: 0; bottom: 0; height: 68px; min-height: 0; opacity: 0; cursor: text; }
.js-otp .si-otpfield:focus-within .si-otp > span.is-active { border-color: var(--hc-accent); box-shadow: 0 0 0 4px var(--hc-accent-soft); }

/* The faces of the family computer */
.si-face { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; font-size: 48px; font-weight: 800; color: #fff;
  background: linear-gradient(160deg, var(--hc-avatar-a, #7B5CFF), var(--hc-avatar-b, #4A2DD8));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 10px 24px -8px rgba(var(--hc-shadow), .45); }
.si-face--sm { width: 56px; height: 56px; font-size: 24px; flex: none; }
.si-face--parent { color: var(--hc-ink-2); background: var(--hc-paper); border: 2px dashed var(--hc-paper-line); box-shadow: var(--hc-e-1); }
.si-face--parent svg { width: 40px; height: 40px; }

/* Who's learning? */
.si-hello-wrap { display: grid; justify-items: center; gap: var(--hc-s-6); padding-top: var(--hc-s-7); }
.si-big { font-size: var(--hc-fs-4xl); font-weight: 800; letter-spacing: -.025em; }
.si-people { list-style: none; display: flex; justify-content: center; gap: var(--hc-s-5); flex-wrap: wrap; }
.si-person { display: grid; justify-items: center; gap: 10px; width: 220px; padding: var(--hc-s-6) var(--hc-s-4) var(--hc-s-5); border-radius: var(--hc-r-xl);
  color: var(--hc-glass-ink); text-decoration: none; transition: transform var(--hc-dur-4) var(--hc-ease-spring-soft); }
a.si-person:hover, a.si-person:focus { color: var(--hc-glass-ink); text-decoration: none; transform: translateY(-4px) scale(1.02); }
.si-person { text-align: center; }
.si-person b { font-size: var(--hc-fs-xl); font-weight: 800; }
.si-person--parent { opacity: .92; }
.si-person__sub { font-size: var(--hc-fs-sm); font-weight: 650; color: var(--hc-glass-ink-2); }

/* Picture code */
.si-code-wrap { max-width: 640px; margin: var(--hc-s-5) auto 0; padding: var(--hc-s-5); border-radius: var(--hc-r-xl); display: grid; gap: var(--hc-s-4); }
.si-code-head { display: flex; align-items: center; gap: var(--hc-s-3); }
.si-code-title { font-size: var(--hc-fs-2xl); font-weight: 800; letter-spacing: -.02em; }
.si-slots { display: grid; grid-template-columns: repeat(4, 60px); justify-content: center; gap: 12px; }
.si-slots > span { display: grid; place-items: center; height: 60px; border-radius: var(--hc-r-md); background: rgba(255,255,255,.5); border: 2px dashed rgba(var(--hc-shadow), .25); }
.si-slots i { width: 18px; height: 18px; border-radius: 50%; background: var(--hc-accent); }
.si-slots .is-full { background: var(--hc-paper); border: 2px solid var(--hc-paper-line); box-shadow: var(--hc-e-1); }
.si-slots .is-next { border: 2px solid var(--hc-accent); box-shadow: 0 0 0 4px var(--hc-accent-soft); background: var(--hc-paper); }
.si-slots svg { width: 42px; height: 42px; }
.si-pics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: var(--hc-s-4); border-radius: var(--hc-r-lg); }
.si-pic { display: grid; place-items: center; height: 92px; padding: 0; border-radius: var(--hc-r-md); border: 2px solid var(--hc-paper-line); background: var(--hc-paper-2);
  line-height: 1; cursor: pointer; transition: transform var(--hc-dur-3) var(--hc-ease-spring); }
.si-pic svg { width: 72px; height: 72px; pointer-events: none; }
.si-pic:hover { transform: translateY(-2px); border-color: var(--hc-accent); }
.si-pic:active { transform: scale(var(--hc-press)); }
.si-pic:disabled { cursor: default; opacity: .6; transform: none; }
.si-code-foot { text-align: center; font-weight: 750; font-size: var(--hc-fs-sm); }
.si-code-foot a { color: var(--hc-glass-ink); }
.si-locked { display: grid; justify-items: center; gap: var(--hc-s-2); padding: var(--hc-s-6) var(--hc-s-5); border-radius: var(--hc-r-lg); text-align: center; }
.si-locked__icon { width: 44px; height: 44px; color: var(--hc-sun-ink); }
.si-locked__title { font-size: var(--hc-fs-xl); font-weight: 800; }
.si-locked__text { color: var(--hc-ink-2); margin-bottom: var(--hc-s-3); }
.hl-padrow { display: flex; justify-content: center; gap: var(--hc-s-3); }

/* The parent's phone: the sheet (here a page of its own) */
.si-sheet { display: grid; justify-items: center; gap: var(--hc-s-3); max-width: 480px; margin: 0 auto; padding: var(--hc-s-5); border-radius: var(--hc-r-xl); box-shadow: var(--hc-e-3); text-align: center; }
.si-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hc-s-3); width: 100%; text-align: left; }
.si-sheet__title { font-size: var(--hc-fs-xl); font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.si-qr { width: 196px; height: 196px; padding: 10px; border-radius: var(--hc-r-md); background: #fff; border: 1px solid var(--hc-paper-line); box-shadow: var(--hc-e-1); }
.si-qr svg { width: 100%; height: 100%; display: block; }
.si-sheet__or { font-size: var(--hc-fs-sm); font-weight: 650; color: var(--hc-ink-2); line-height: 1.45; }
.si-shortcode { display: flex; gap: 14px; font-size: 40px; font-weight: 800; letter-spacing: .12em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--hc-ink); }
.si-shortcode span { padding: 10px 6px 10px 14px; border-radius: var(--hc-r-md); background: var(--hc-paper-2); border: 1px solid var(--hc-paper-line); }
.si-sheet__fine { display: flex; align-items: center; gap: 6px; font-size: var(--hc-fs-sm); font-weight: 700; color: var(--hc-sun-ink); }
.si-sheet__fine svg { width: 16px; height: 16px; }
.si-sheet__how { width: 100%; text-align: left; }

/* ---- C. This stream's own pages ------------------------------------------------------------ */
.hl-card { max-width: 640px; margin: 0 auto; }
.hl-card .hc-doorcard__body { margin-top: var(--hc-s-5); }
.hl-h2 { font-size: var(--hc-fs-lg); font-weight: 800; }
.hl-muted { color: var(--hc-ink-2); font-size: var(--hc-fs-sm); }
.hl-actions { display: flex; flex-wrap: wrap; gap: var(--hc-s-3); align-items: center; }
.hl-linkbtn { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; cursor: pointer; }
.hl-list { display: grid; gap: var(--hc-s-2); }
.hl-list li { display: flex; align-items: center; gap: var(--hc-s-3); padding: var(--hc-s-3) var(--hc-s-4); border-radius: var(--hc-r-md); background: var(--hc-paper-2); border: 1px solid var(--hc-paper-line); }
.hl-list b { font-weight: 800; }
.hl-list form { margin: 0; }
.hl-chosen { display: flex; justify-content: center; gap: 12px; }
.hl-chosen span { display: grid; justify-items: center; gap: 4px; padding: 8px; border-radius: var(--hc-r-md); background: var(--hc-paper-2); border: 1px solid var(--hc-paper-line); font-size: var(--hc-fs-xs); font-weight: 750; color: var(--hc-ink-2); }
.hl-chosen svg { width: 48px; height: 48px; }
.hl-section + .hl-section { margin-top: var(--hc-s-5); padding-top: var(--hc-s-5); border-top: 1px solid var(--hc-paper-line); }
.hl-section > * + * { margin-top: var(--hc-s-3); }
.hl-picker .si-slots > span { background: var(--hc-paper-2); }

/* The printed sign-in card: hc-ui.css's .hc-pcard; here only its place on the page */
.hl-print { margin-top: var(--hc-s-5); }

@media (max-width: 640px) {
  .si-side { display: none; }
  .si-title { font-size: var(--hc-fs-xl); }
  .si-hello .hc-companion { --hc-companion-size: 44px; }
  .si-otp { grid-template-columns: repeat(3, minmax(0, 1fr)) 4px repeat(3, minmax(0, 1fr)); width: 100%; }
  .si-otp > span { height: 54px; font-size: 24px; }
  .js-otp .si-otpfield .si-codeinput { height: 54px; }
  .si-otpfield { justify-items: stretch; }
  .si-big { font-size: var(--hc-fs-3xl); }
  .si-person { width: 150px; padding: var(--hc-s-4) var(--hc-s-3); }
  .si-face:not(.si-face--sm) { width: 84px; height: 84px; font-size: 36px; }
  .si-code-title { font-size: var(--hc-fs-xl); }
  .si-code-wrap { padding: var(--hc-s-4) var(--hc-s-3); }
  .si-pics { gap: 8px; padding: var(--hc-s-3); }
  .si-pic { height: 80px; }
  .si-pic svg { width: 54px; height: 54px; }
  .si-slots { grid-template-columns: repeat(4, 54px); gap: 10px; }
  .si-slots > span { height: 54px; }
  .si-shortcode { font-size: 34px; gap: 10px; }
}
@media print {
  .hl-noprint { display: none !important; }
  .hl-print { margin: 0; }
  .hc-site__body { background: #fff !important; }
}
.si-card > form.hc-linkrow { margin-top: var(--hc-s-4); }
.si-card > form.hc-linkrow .hl-linkbtn { color: var(--hc-accent-ink); }

/* Bootstrap's a:hover and a:focus underline must not reach links drawn as tiles (hc-ui.css answers it for buttons) */
.hl-page a:is(:hover, :focus) { text-decoration: none; }
.hl-page .hc-linkrow a:is(:hover, :focus), .hl-page .hc-doorcard__foot a:is(:hover, :focus) { text-decoration: underline; }