/* The family sign-in and consent cards (hosted app only). Same slate and chalk as the board. */
.family-gate {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 16px;
  background: radial-gradient(120% 90% at 30% 20%, #2f3b3e, var(--slate) 55%, var(--slate-deep));
}
.family-card {
  width: min(460px, 100%); padding: 28px 24px;
  border: 2px solid rgba(241, 238, 230, 0.22); border-radius: 16px;
  background: rgba(31, 40, 42, 0.72); color: var(--chalk);
  font: 17px/1.5 var(--font-ui);
}
.family-brand { margin: 0 0 18px; font: 600 26px/1 var(--font-hand); letter-spacing: 0.01em; }
.family-brand span { color: var(--chalk-yellow); }
.family-card h1 { margin: 0 0 10px; font: 700 24px/1.2 var(--font-hand); color: var(--chalk-yellow); }
.family-card p, .family-card ul { margin: 0 0 14px; }
.family-card ul { padding-left: 20px; }
.family-card a { color: var(--chalk-yellow); }
.family-form { display: grid; gap: 10px; margin-top: 8px; }
.family-form label { font-weight: 700; }
.family-form input[type="email"] {
  font: inherit; padding: 12px 14px; border-radius: 10px;
  border: 2px solid rgba(241, 238, 230, 0.4); background: var(--slate-deep); color: var(--chalk);
}
.family-form button {
  font: 700 17px var(--font-ui); padding: 13px 18px; border: 0; border-radius: 999px;
  background: var(--chalk-yellow); color: #262422; cursor: pointer;
}
.family-form button:disabled { opacity: 0.5; cursor: default; }
.family-form :focus-visible { outline: 3px solid var(--chalk-yellow); outline-offset: 3px; }
.family-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; }
.family-check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--chalk-yellow); }
.family-note { min-height: 1.5em; color: var(--chalk-dim); font-size: 15px; }

/* Hosted extras: 13+ confirmation, the AI note, lesson time in Grown-ups, the checkout toast. */
.age-check { margin: 4px 0 10px; font-size: 15px; line-height: 1.4; color: var(--chalk); }
.ai-note { margin: 14px 0 0; font: 14px/1.45 var(--font-ui); color: var(--chalk-dim); }
.billing-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; max-width: min(520px, calc(100% - 32px)); padding: 12px 18px; border-radius: 12px; background: var(--slate-deep); color: var(--chalk); border: 2px solid var(--chalk-yellow); font: 15px/1.45 var(--font-ui); }

.family-fine { margin: 14px 0 0; font-size: 13px; color: var(--chalk-dim); }
.family-fine a, .family-check a { color: var(--chalk-yellow); }
.time-banner { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--chalk-yellow); font: 15px/1.45 var(--font-ui); color: var(--chalk); }
.time-banner button { margin-top: 8px; }
.family-captcha:empty { display: none; }
.family-captcha { min-height: 65px; }

/* The app's name on the wooden frame: one color, so it reads on the wood. */
.brand b { color: inherit; font-weight: inherit; }
.family-switch { margin: 16px 0 0; font-size: 15px; } .family-switch a { color: var(--chalk-yellow); font-weight: 700; }
.family-hint { margin: -2px 0 4px; font-size: 14px; color: var(--chalk-dim); }
.family-hint a { color: var(--chalk-yellow); }
.family-form input[type="password"] { font: inherit; padding: 12px 14px; border-radius: 10px; border: 2px solid rgba(241, 238, 230, 0.4); background: var(--slate-deep); color: var(--chalk); }

/* Lesson time in Grown-ups: written on the panel's paper in its ink, in its own grid row. */
.grownups.with-time[open] { grid-template-rows: auto auto auto minmax(0, 1fr); }
#gu-signout { margin-left: auto; }
.gu-time { display: grid; gap: 8px; margin: 0; padding: 6px 24px 18px 72px; color: var(--ink); font: 16px/1.5 var(--font-ui); border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.gu-time h3 { margin: 0; font: 700 13px var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.gu-time p { margin: 0; }
.gu-time-left b { font: 700 22px var(--font-hand); color: var(--ink); }
.gu-buy { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.gu-buy label { font-weight: 700; color: var(--ink-soft); }
.gu-buy select { font: inherit; padding: 9px 12px; border-radius: 10px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); }
.gu-small { font-size: 14px; color: var(--ink-soft); }
.gu-small a { color: var(--ink); font-weight: 700; }
@media (max-width: 640px) { .gu-time { padding-left: 24px; } }
@media (max-width: 640px) { .gu-head { gap: 8px; } .gu-head h2 { font-size: 22px; white-space: nowrap; } .gu-head .close { white-space: nowrap; padding-inline: 12px; } }