/* The grown-ups' account pages (2026-10-19): /join/<token> (an invited parent
   makes their account), /forgot, /reset/<token> and /email/confirm/<token>.
   The overhaul palette and type, as on the sign-in page and the parent's app. */
:root { --paper:#FFF8EC; --cloud:#FFFFFF; --sand:#EFE3CC; --ink:#16323F; --slate:#4F6470;
  --teal:#0F9E92; --teal-deep:#0A6E66; --teal-mist:#D6F1EC; --coral:#FF7A59; --brick:#B93A17;
  --blush:#FFE3DA; --amber:#FFC145; --honey:#FFF1C9; --leaf:#3FAE5A; --leaf-deep:#1F7A3A; --mint:#DDF5E3;
  --chip-steel:#E6EEF1; --chip-teal:#2DD4BF; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; background: var(--paper); color: var(--ink);
  font-family: 'Nunito', system-ui, -apple-system, sans-serif; font-size: 17px; line-height: 1.5; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
a { color: var(--teal-deep); font-weight: 700; }
.hidden { display: none !important; }
.ac-band { background: var(--teal-mist); padding: 18px 20px 20px; }
.ac-band-in, .ac-main { max-width: 560px; margin: 0 auto; }
.ac-brand { font-family: 'Fredoka', 'Nunito', system-ui, sans-serif; font-weight: 600; font-size: 1.6rem; margin: 0 0 8px; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.ac-brand span { color: var(--teal-deep); }
.ac-hello { display: flex; align-items: center; gap: 12px; }
.ac-bubble { position: relative; background: var(--cloud); border: 3px solid var(--ink); border-radius: 22px; padding: 10px 16px;
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif; font-weight: 600; font-size: 1.15rem; line-height: 1.3; flex: 1; }
.ac-bubble::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  border: 9px solid transparent; border-right-color: var(--ink); border-left: 0; }
.ac-main { padding: 22px 20px 40px; }
h1 { font-family: 'Fredoka', 'Nunito', system-ui, sans-serif; font-weight: 600; font-size: 1.9rem; line-height: 1.2; margin: 0 0 6px; }
.ac-sub { color: var(--slate); margin: 0 0 18px; }
.ac-card { background: var(--cloud); border: 2px solid var(--sand); border-radius: 22px; padding: 22px 20px; }
label.ac-label { display: block; font-weight: 800; margin: 16px 0 6px; }
.ac-input { display: block; width: 100%; font: inherit; font-size: 1.05rem; padding: .8rem 1rem; border: 2px solid var(--slate);
  border-radius: 16px; background: var(--cloud); color: var(--ink); }
.ac-input:focus { border-color: var(--teal-deep); outline: 3px solid var(--teal-mist); outline-offset: 0; }
.ac-fixed { display: flex; align-items: center; gap: 10px; padding: .8rem 1rem; border: 2px dashed #CDBFA6; border-radius: 16px;
  background: #F6EEDF; font-weight: 700; word-break: break-all; }
.ac-note { color: var(--slate); font-size: .9rem; margin: 6px 0 0; }
.ac-pw { position: relative; }
.ac-pw .ac-input { padding-right: 6.2rem; }
.ac-show { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: var(--teal-mist); color: var(--teal-deep);
  font: inherit; font-weight: 800; font-size: .95rem; border-radius: 999px; padding: 0 .9rem; min-height: 44px; min-width: 64px; cursor: pointer; }
.ac-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 4px; }
.ac-meter i { height: 7px; border-radius: 99px; background: var(--sand); }
.ac-meter i.on { background: var(--leaf); }
.ac-meter.weak i.on { background: var(--coral); }
.ac-strength b { color: var(--leaf-deep); }
.ac-meter.weak + .ac-strength b { color: var(--brick); }
.ac-check { display: flex; gap: 12px; align-items: center; min-height: 44px; margin: 18px 0 6px; font-weight: 600; cursor: pointer; }
.ac-check input { width: 26px; height: 26px; margin: 0; flex: 0 0 auto; accent-color: var(--teal-deep); }
.ac-btn { display: block; width: 100%; font: inherit; font-family: 'Fredoka', 'Nunito', system-ui, sans-serif; font-weight: 600; font-size: 1.25rem;
  color: #fff; background: var(--teal-deep); border: none; border-radius: 999px; padding: .85rem 1rem; margin-top: 16px; cursor: pointer;
  box-shadow: 0 4px 0 #064A45; text-align: center; text-decoration: none; }
.ac-btn:disabled { opacity: .55; cursor: default; }
.ac-err { color: var(--brick); font-weight: 700; min-height: 1.4em; margin: 10px 0 0; }
.ac-foot { text-align: center; color: var(--slate); font-size: .92rem; margin-top: 16px; }
.ac-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 0 14px; text-decoration: none; }
.ac-center { text-align: center; }
.ac-center .bot { margin: 0 auto 6px; display: block; }
.ac-kids { display: flex; gap: 14px; align-items: center; background: var(--blush); border: 2px solid #F5C7B8; border-radius: 22px; padding: 16px; margin-top: 18px; }
.ac-kids b.ac-inline { display: inline; font-family: inherit; font-weight: 800; font-size: inherit; }
.ac-kids b { display: block; font-family: 'Fredoka', 'Nunito', system-ui, sans-serif; font-weight: 600; font-size: 1.15rem; }
.ac-privacy { text-align: center; margin-top: 28px; font-size: .9rem; }
.ac-privacy a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.bot .metal { fill: var(--chip-steel); stroke: var(--ink); stroke-width: 4; }
.bot .plate { fill: var(--ink); }
.bot .eye { fill: var(--chip-teal); }
.bot .smile { fill: none; stroke: var(--chip-teal); stroke-width: 6; stroke-linecap: round; }
.bot .cheek, .bot .ear { fill: var(--coral); }
.bot .ear { stroke: var(--ink); stroke-width: 3; }
.bot .ear-ring { fill: none; stroke: var(--teal); stroke-width: 5; stroke-linecap: round; }
.bot .antenna-glow { fill: var(--amber); opacity: .4; }
.bot .antenna-stem { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.bot .antenna-tip { fill: var(--amber); stroke: var(--ink); stroke-width: 3; }
.bot .flat { fill: none; stroke: var(--chip-teal); stroke-width: 6; stroke-linecap: round; }
@media (max-width: 420px) { h1 { font-size: 1.6rem; } .ac-bubble { font-size: 1.02rem; } }