/* /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);text-align:center}
.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-align:center;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}
/* One slide per group (owner, 2026-10-10): its title (Sanskrit, English under it), then Back, dots and Next, filled. */
.family-slide-title{display:grid;gap:2px;margin:0 0 var(--vq-space-3);font:var(--vq-weight-bold) var(--vq-text-xl)/1.2 var(--vq-font)}
.family-slide-title small{color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-md)/1.3 var(--vq-font)}
.family-pager{display:flex;align-items:center;justify-content:space-between;gap:var(--vq-space-3);margin-top:var(--vq-space-4)}
.family-pager[hidden]{display:none}
.family-pager-button{display:grid;place-items:center;width:var(--vq-tap);height:var(--vq-tap);border:0;border-radius:var(--vq-radius-pill);background:var(--vq-accent);color:var(--vq-surface);cursor:pointer}
.family-pager-button:disabled{opacity:.35;cursor:default}
.family-dots{display:flex;gap:var(--vq-space-2);margin-left:auto}
.family-dots span{width:8px;height:8px;border-radius:var(--vq-radius-pill);background:var(--vq-line)}
.family-dots span.is-active{background:var(--vq-accent)}
#family-step{margin-right:auto;color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-sm)/1 var(--vq-font)}
.family-tab-off,#children-title,#parents-title{display:none}
/* The family itself starts at the top (owner, 2026-10-10); the sign-in steps stay centred (auth-page.css). */
.auth-panel:has([data-view=home]:not([hidden])){align-items:start}
.auth-content:has(>[data-view=home]:not([hidden])){align-content:stretch}
/* 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}
/* The pager stays at the bottom of the screen on every slide (owner, 2026-10-10), not under each slide's list. */
.auth-panel:has([data-view=home]:not([hidden])) .auth-content{height:100%}
[data-view=home]:not([hidden]){display:flex;flex-direction:column;min-height:100%}
.family-pager{position:sticky;bottom:0;margin-top:auto;padding:var(--vq-space-3) 0;background:transparent}
/* 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{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. */
.family-or{display:flex;align-items:center;gap:var(--vq-space-3);margin:var(--vq-space-4) 0;color:var(--vq-ink-muted);font:var(--vq-weight-bold) var(--vq-text-sm)/1 var(--vq-font);text-transform:uppercase}
.family-or::before,.family-or::after{content:"";flex:1;border-top:var(--vq-border)}
.family-or[hidden]{display:none}
/* "Where will Zoe practise?": everything centred, like sign-up (owner, 2026-10-10). */
[data-view=child] .family-subhead,[data-view=child] .family-hint,[data-view=child] .family-note{text-align:center}