/* /family: only what auth-page.css (shared sign-in look) doesn't already cover. */
.family-form{display:grid;gap:var(--vq-space-3)}
.family-hint{margin:0;color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-xs)/1.4 var(--vq-font)}
.family-hint a{color:var(--vq-ink);text-decoration:underline}
.family-check{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--vq-space-3);color:var(--vq-ink);font:var(--vq-weight-medium) var(--vq-text-sm)/1.4 var(--vq-font);cursor:pointer}
.family-check input{width:20px;height:20px;min-height:0;margin:0;padding:0;accent-color:var(--vq-ink);appearance:auto;cursor:pointer}
.family-check a{color:var(--vq-ink);text-underline-offset:3px}
.family-subhead{margin:var(--vq-space-2) 0 0;color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-lg)/1.2 var(--vq-font);letter-spacing:var(--vq-tracking-tight)}
.family-children{display:grid;gap:var(--vq-space-2);margin:0;padding:0;list-style:none}
.family-child{display:flex;align-items:center;gap:var(--vq-space-3);min-height:var(--vq-tap);padding:var(--vq-space-3) var(--vq-space-4);border:var(--vq-border);border-radius:var(--vq-radius-md);background:var(--vq-surface)}
.family-child>span:nth-child(2){display:grid;gap:2px;min-width:0}
.family-child strong{overflow:hidden;font:var(--vq-weight-bold) var(--vq-text-md)/1.25 var(--vq-font);text-overflow:ellipsis;white-space:nowrap}
.family-child small{color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-xs)/1.2 var(--vq-font)}
.family-child-avatar{display:grid;flex:none;place-items:center;width:36px;height:36px;border-radius:var(--vq-radius-pill);background:var(--vq-ink);color:var(--vq-on-ink);font:var(--vq-weight-bold) var(--vq-text-sm)/1 var(--vq-font)}
.family-empty{padding:var(--vq-space-4);border:var(--vq-border);border-style:dashed;border-radius:var(--vq-radius-md);color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-sm)/1.4 var(--vq-font)}
.family-loading{display:grid;place-items:center;min-height:120px}
.auth-content>[data-view]{display:grid;gap:clamp(20px,3vh,28px)}
.auth-content>[data-view][hidden]{display:none}
.family-form input[readonly]{background:transparent;color:var(--vq-ink-muted);cursor:default}
button.family-child{width:100%;color:var(--vq-ink);text-align:left;cursor:pointer}
button.family-child:hover{background:var(--vq-accent-soft)}
.family-child>svg{flex:none;width:18px;height:18px;margin-left:auto;color:var(--vq-ink-subtle)}
.family-child-avatar svg{width:18px;height:18px}
.family-remove{margin-left:auto;padding:0 var(--vq-space-2)}
.family-code{display:grid;justify-items:center;gap:var(--vq-space-3);padding:var(--vq-space-5) var(--vq-space-4);border:var(--vq-border);border-radius:var(--vq-radius-lg);background:var(--vq-surface)}
/* The QR keeps its own white background and dark modules in both themes so cameras can read it. */
.family-qr{width:min(220px,70vw);aspect-ratio:1}
.family-qr svg{display:block;width:100%;height:100%}
.family-code-text{margin:0;color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-2xl)/1 var(--vq-font);letter-spacing:.12em;font-variant-numeric:tabular-nums}
.family-code-input{font:var(--vq-weight-bold) var(--vq-text-lg)/1 var(--vq-font);letter-spacing:.12em;text-transform:uppercase}
.family-step{display:grid;gap:clamp(20px,3vh,28px)}
.family-step[hidden]{display:none}
.family-danger strong{color:var(--vq-danger)}
/* Getting-started steps: numbered, the current one highlighted, finished ones ticked (set by family.js). */
.family-steps{display:grid;gap:var(--vq-space-2);margin:0;padding:0;list-style:none;counter-reset:family-step}
.family-steps>li{position:relative;display:grid;gap:2px;padding:var(--vq-space-3) var(--vq-space-4) var(--vq-space-3) calc(var(--vq-space-4) + 36px);border:var(--vq-border);border-radius:var(--vq-radius-md);background:var(--vq-surface);counter-increment:family-step}
.family-steps>li::before{content:counter(family-step);position:absolute;top:var(--vq-space-3);left:var(--vq-space-3);display:grid;place-items:center;width:26px;height:26px;border:var(--vq-border);border-radius:var(--vq-radius-pill);color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-xs)/1 var(--vq-font)}
.family-steps strong{color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-sm)/1.3 var(--vq-font)}
.family-steps small{color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-xs)/1.4 var(--vq-font)}
.family-steps>li.is-current{border-color:var(--vq-ink);background:var(--vq-accent-soft)}
.family-steps>li.is-current::before{background:var(--vq-ink);color:var(--vq-on-ink)}
.family-steps>li.is-done{opacity:.6}
.family-steps>li.is-done::before{content:"✓"}
.family-steps--plain>li{background:transparent}
a.family-child{width:100%;color:var(--vq-ink);text-decoration:none}
a.family-child:hover{background:var(--vq-accent-soft)}
.family-note{margin:0;color:var(--vq-ink);font:var(--vq-weight-medium) var(--vq-text-sm)/1.4 var(--vq-font)}
.family-help summary{min-height:var(--vq-tap);display:flex;align-items:center;color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-sm)/1.2 var(--vq-font);cursor:pointer}
.family-help{display:grid;gap:var(--vq-space-2)}
.family-help[hidden]{display:none}
/* #104: a parent's Leave or Remove sits at the card's right edge. */
.family-parent>.mode-toggle,.family-parent>.vq-chip{flex:none;margin-left:auto}
/* Sponsors (owner, 2026-10-09): how a joining sponsor knows the children, as two of the same check rows. */
.family-relation{display:grid;gap:var(--vq-space-3);min-width:0;margin:0;padding:0;border:0}
.family-relation legend{margin-bottom:var(--vq-space-2);padding:0}
/* Each child's card on Your family: its button opens the child's progress (where a sponsor challenges them). */
.family-child-open{display:flex;flex:1;align-items:center;gap:var(--vq-space-3);min-width:0;min-height:var(--vq-tap);margin:0;padding:0;border:0;background:transparent;color:var(--vq-ink);font:inherit;text-align:left;cursor:pointer}
.family-child-open>span:last-child{display:grid;gap:2px;min-width:0}
/* The WhatsApp way (owner, 2026-10-20): flat rows, a bigger round initial, a hairline between rows; a child's initial
   in the accent so the children stand out above everyone else. */
.family-list{gap:0}
#parent-list:not(:empty){border-top:1px solid var(--vq-line)}
.family-list .family-child{padding-inline:0;border:0;border-radius:0;background:transparent}
.family-list>li+li .family-child{border-top:1px solid var(--vq-line)}
.family-list .family-child-avatar{width:44px;height:44px;font-size:var(--vq-text-md)}
.family-child-avatar--kid{background:var(--vq-accent);color:var(--vq-surface)}
.family-list button.family-child:hover,.family-list .family-child-open:hover{background:transparent}
#parent-list .family-empty{padding:var(--vq-space-3) 0}
/* The round + (WhatsApp's new chat): bottom right of the app frame, above the phone's home bar. */
.family-fab{position:fixed;right:max(var(--app-frame-inset-x),calc((100vw - var(--app-frame-max-width)) / 2 + var(--vq-space-5)));bottom:var(--app-frame-inset-bottom);display:grid;place-items:center;width:56px;height:56px;border:0;border-radius:var(--vq-radius-pill);background:var(--vq-accent);color:var(--vq-surface);box-shadow:var(--vq-shadow-float);cursor:pointer}
.family-fab[hidden]{display:none}
.family-fab svg{width:26px;height:26px}
[data-view=home]{padding-bottom:calc(56px + var(--vq-space-5))}
/* One look for every /family screen (owner, 2026-10-20: "some pages are centre aligned, some left"): each starts at
   the top, its heading where every other screen's is, and reads from the left edge like its form's labels. Scoped to
   the onboarding screens, marked .onboard (/family; /join since 2026-10-21): other pages share this file. */
.auth-panel:has(.onboard){align-items:start;padding-top:var(--vq-space-6)}
.onboard{align-content:start}
.onboard:has(>[data-view=home]:not([hidden])){align-content:stretch}
.onboard :is(.auth-copy,.auth-footer,.form-status,.auth-beta-note){text-align:left}
.onboard .auth-footer{justify-items:start}
.onboard .mode-toggle{padding-inline:0;text-align:left}
/* The actions (Add another child, Invite…) look like actions, not members (owner, 2026-10-10): dashed, no fill, accent. */
.family-child.family-cta{border-style:dashed;background:transparent;color:var(--vq-accent)}
.family-cta .family-child-avatar{background:var(--vq-accent);color:var(--vq-surface)}
.family-cta small{color:var(--vq-accent)}
#parent-list .family-empty,#child-devices .family-empty{padding:0;border:0;text-align:left}
/* Remove (and Leave) is a filled round icon (owner, 2026-10-10); the confirm step says what it does. */
.family-remove{display:grid;flex:none;place-items:center;width:36px;height:36px;margin-left:auto;border:0;border-radius:var(--vq-radius-pill);background:var(--vq-ink);color:var(--vq-surface);cursor:pointer}
/* A pending invite (owner, 2026-10-10): an hourglass with a soft pulsing dot (still under reduced motion); Resend and
   the round cancel at the end of the row. */
.family-pending-avatar{position:relative}
.family-pending-avatar::after{content:"";position:absolute;top:0;right:0;width:10px;height:10px;border:var(--vq-border-width) solid var(--vq-surface);border-radius:var(--vq-radius-pill);background:var(--vq-warning);animation:family-pending-pulse 1.6s ease-in-out infinite}
@keyframes family-pending-pulse{50%{opacity:.35;transform:scale(.8)}}
@media(prefers-reduced-motion:reduce){.family-pending-avatar::after,.family-live-dot{animation:none}}
.family-pending-actions{display:flex;flex:none;align-items:center;gap:var(--vq-space-2);margin-left:auto}
.family-pending-actions .family-remove{margin-left:0}
.family-invitee{display:grid;gap:var(--vq-space-2)}
.family-invitee label{font:var(--vq-weight-bold) var(--vq-text-md)/1.3 var(--vq-font)}
/* On a computer (no share sheet): the invite link with Copy (owner, 2026-10-10). */
#parent-status:has(.family-link){display:grid;gap:var(--vq-space-2);color:var(--vq-ink-muted)}
.family-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--vq-space-2)}
.family-link input{min-width:0;min-height:var(--vq-tap);padding:0 var(--vq-space-3);border:var(--vq-border);border-radius:var(--vq-radius-sm);background:var(--vq-surface);color:var(--vq-ink);font:var(--vq-weight-medium) var(--vq-text-sm)/1 var(--vq-font)}
.family-link button{width:auto;padding:0 var(--vq-space-4)}
/* The stepper over each add screen's title (global.css .vq-steps). */
.auth-copy .vq-steps{margin-bottom:var(--vq-space-4)}
#invite-submit[hidden],.family-link[hidden]{display:none}
/* "or" between the child's own device and the parent's (owner, 2026-10-10), like a sign-up page. */
/* A child's link sent or phone set up (owner, 2026-10-20): the tick inline with the title, two even lines, Done. */
.family-done{display:grid;gap:var(--vq-space-3)}
.family-done h1{margin:0}
.family-done-head{display:flex;align-items:center;gap:var(--vq-space-2)}
.family-done-head svg{flex:none;width:.85em;height:.85em;color:var(--vq-success)}
.family-done-text{margin:0;color:var(--vq-ink-muted);font:var(--vq-text-sm)/1.5 var(--vq-font)}
.family-done #child-next{justify-self:stretch;margin-top:var(--vq-space-5)}
.family-or[hidden]{display:none}
/* Narrow (a zoomed phone, tokens.css): a slide's title one size down, so "Shishyagan" fits on its line. */
@media (max-width:319px){
  .family-slide-title{font-size:var(--vq-text-lg)}
  /* The pager keeps its arrows and dots; "1 / 4" (the dots say it) goes. */
  .family-dots{gap:var(--vq-space-1)}
  #family-step{display:none}
  .family-dots{margin-right:auto}
  /* A name or "Add another child" wraps rather than ending in "…"; the chevron gives it the room. */
  .family-child strong{white-space:normal;overflow-wrap:break-word}
  .family-child>svg{display:none}
  .family-child{padding-inline:var(--vq-space-3)}
}

/* #263 The parents' way in (owner, 2026-10-20): Google first, in its standard light button, then "or", then the
   email and its Continue (white once the email is valid, app-header.js), the legal line in the hint's grey. */
.google-action,.quiet-action{display:inline-flex;align-items:center;justify-content:center;gap:var(--vq-space-3);width:100%;min-height:var(--vq-button-height);padding:var(--vq-space-2) var(--vq-space-4);border:var(--vq-border);border-radius:var(--vq-radius-sm);font:var(--vq-weight-bold) var(--vq-text-md)/1.2 var(--vq-font);cursor:pointer}
.google-action{background:var(--vq-ink);color:var(--vq-on-ink)}
.quiet-action{background:transparent;color:var(--vq-ink)}
.quiet-action svg{width:var(--vq-space-4);height:var(--vq-space-4);stroke-width:2.4}
.quiet-action:hover{border-color:var(--vq-accent)}
.google-action:active,.quiet-action:active{transform:scale(.985)}
.auth-or{display:flex;align-items:center;gap:var(--vq-space-3);margin:0;color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-xs)/1 var(--vq-font)}
.auth-or::before,.auth-or::after{content:"";flex:1;border-top:var(--vq-border-width) solid var(--vq-line)}
[data-view="signin"] .family-hint a{color:inherit;font-weight:inherit;text-underline-offset:3px}
#signin-email{font-weight:var(--vq-weight-medium)}
/* Your profile (owner, 2026-10-20): no pencil while there is no child to be called anything; Delete my account a
   quiet red line below, not a card. */
#edit-call-names:disabled{cursor:default}
#edit-call-names:disabled>svg{display:none}
.family-delete-account{width:100%;margin-top:var(--vq-space-6);border:0;background:transparent;cursor:pointer}
/* A child's delete (owner, 2026-10-20) stays off while her code or her done screen shows: that screen has one job. */
#delete-child{width:100%;margin-top:var(--vq-space-6);border:0;background:transparent;cursor:pointer}
#delete-child[hidden],[data-view=child]:has(#invite-panel:not([hidden]),#child-done:not([hidden])) #delete-child{display:none}
/* The email code (owner, 2026-10-20): six spaced digits, so it reads as six numbers before one is typed. */
.family-code-digits{font:var(--vq-weight-bold) var(--vq-text-xl)/1 var(--vq-font);letter-spacing:.5em}
#code-help .mode-toggle{min-height:var(--vq-tap);vertical-align:middle}
#code-help .mode-toggle:disabled{color:var(--vq-ink-subtle);cursor:default}
#change-email{min-height:0;vertical-align:baseline;font-size:inherit}
/* The exam as choices in view (owner, 2026-10-20): a card a choice, the picked one in the accent. */
.family-options{display:grid;gap:var(--vq-space-2);min-width:0;margin:0;padding:0;border:0}
.family-options[hidden]{display:none}
.family-options legend{margin-bottom:var(--vq-space-2);padding:0;color:var(--app-ink);font:800 .8rem/1.2 var(--vq-font)}
#child-course{display:grid;gap:var(--vq-space-2)}
.family-option{display:flex;align-items:center;gap:var(--vq-space-3);min-height:var(--vq-button-height);padding:0 var(--vq-space-4);border:var(--vq-border);border-radius:var(--vq-radius-sm);color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-md)/1.2 var(--vq-font);cursor:pointer}
.family-option input{width:20px;height:20px;min-height:0;margin:0;padding:0;accent-color:var(--vq-accent);appearance:auto;cursor:pointer}
.family-option:has(input:checked){border-color:var(--vq-accent);background:var(--vq-accent-soft)}
/* Waiting for the child (owner, 2026-10-20): a soft live dot before the title, the pending invite's pulse. */
.family-live-dot{display:inline-block;width:.4em;height:.4em;margin-right:.35em;border-radius:var(--vq-radius-pill);background:var(--vq-accent);vertical-align:.18em;animation:family-pending-pulse 1.6s ease-in-out infinite}