/* THE PARENT SCREEN. FOUR STEPS, one question each. Mandatory, not skippable.

   ⚠️ REBUILT AS A STEPPER 2026-09-10 on the owner's call — it had been one long scrolling
   form, judged "too information dense and daunting". The age <select> was replaced
   by a grid of chips at the same time: on a one-question screen there is room to show all
   twelve, and a dropdown hides every option behind a native picker.

   The recorded failure was that a PARENT did not understand. Child scaffolding does not
   fix that, which is why this screen exists at all and why it is not skippable.

   GATE C: a real parent and a real child who have never seen this get through it with no
   help. If C fails, nothing ships. So: nothing clever, nothing that needs explaining, and
   no field whose answer a parent has to estimate.

   Frame tokens only — this is chrome, not a scene. */

.parent {
  min-height: 100dvh;
  background: var(--frame-bg);
  color: var(--frame-ink);
  font-family: var(--font-ui);
  /* Vertical scrolling is fine and expected; horizontal is a defect. */
  overflow-x: hidden;
  padding: 26px 20px calc(30px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  max-width: 560px;
  margin: 0 auto;
}

.p-title { font-size: 25px; font-weight: 700; margin: 4px 0 6px; line-height: 1.25; }

/* ONE PLAIN SENTENCE on why we ask and what this is. It sits at the TOP, before the first
   question, because a parent who does not know what they are filling in is the exact
   failure this screen was added to fix. */
.p-intro { font-size: 16px; line-height: 1.5; color: var(--frame-muted); margin: 0 0 22px; }

.p-q { margin: 0 0 22px; }
.p-label { display: block; font-size: 17px; font-weight: 600; margin: 0 0 9px; }
.p-hint  { font-size: 14px; color: var(--frame-muted); margin: -4px 0 9px; }

/* 16px MINIMUM on every field. Below 16px, iOS Safari zooms the page on focus and never
   zooms back — which leaves a parent pinching their way out of the first screen of the
   product. This is the single most expensive px value on the page. */
.p-input {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--tap-min);
  font-size: 16px;
  padding: 11px 13px;
  border: 2px solid var(--frame-line);
  border-radius: var(--radius);
  background: var(--frame-bg);
  color: var(--frame-ink);
}
.p-input:focus {
  outline: none;
  border-color: var(--frame-accent);
}

/* The four English-use answers, as full-width cards. Radios rather than a dropdown because
   the wording IS the question — a parent has to read all four to find the one that is
   actually true of their child, and a collapsed dropdown hides three of them. */
.p-choices { display: flex; flex-direction: column; gap: 9px; }
.p-choice {
  display: flex; align-items: flex-start; gap: 11px;
  min-height: var(--tap-min);
  padding: 13px;
  border: 2px solid var(--frame-line);
  border-radius: var(--radius);
  background: var(--frame-bg);
  color: var(--frame-ink);
  text-align: left;
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
}
.p-choice[aria-checked="true"] {
  border-color: var(--frame-accent);
  box-shadow: inset 0 0 0 1px var(--frame-accent);
}
.p-dot {
  flex: 0 0 auto;
  width: 20px; height: 20px; margin-top: 1px;
  border: 2px solid var(--frame-muted);
  border-radius: 50%;
}
.p-choice[aria-checked="true"] .p-dot {
  border-color: var(--frame-accent);
  background: radial-gradient(var(--frame-accent) 0 45%, transparent 47%);
}
.p-choice em { font-style: normal; color: var(--frame-muted); }

/* The consent line. A real control, not a formality: DPDP treats anyone under 18 as a
   child and requires parental consent. */
.p-consent {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px;
  border: 2px solid var(--frame-line);
  border-radius: var(--radius);
  font-size: 15px; line-height: 1.5;
  text-align: left;
  color: var(--frame-ink);
  width: 100%;
  box-sizing: border-box;
}
.p-consent[aria-checked="true"] { border-color: var(--ok); }
.p-tick {
  flex: 0 0 auto;
  width: 22px; height: 22px; margin-top: 1px;
  border: 2px solid var(--frame-muted);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--on-accent);
  font-size: 15px; line-height: 1;
}
.p-consent[aria-checked="true"] .p-tick {
  background: var(--ok); border-color: var(--ok);
}

/* SINCE 2026-10-11 the box is one quiet line under the age (his note: its own screen made too much
   of it) - no border, small type, still a full 44px row to tap. "Read more" beside it opens the sheet. */
.p-agree { display: flex; align-items: center; gap: 6px; margin-top: 18px; }
.p-agree .p-consent {
  flex: 1 1 auto; width: auto;
  border: 0; padding: 10px 4px; min-height: 44px;
  font-size: 14px; color: var(--frame-muted);
  align-items: center;
}
.p-agree .p-consent[aria-checked="true"] { color: var(--frame-ink); }
.p-more {
  flex: 0 0 auto;
  min-height: 44px; padding: 0 8px;
  font-size: 14px; font-weight: 700;
  color: var(--frame-ink);
  text-decoration: underline; text-underline-offset: 3px;
}

/* The details, for a parent who asks. A native <dialog>: Esc and the backdrop close it. */
.p-sheet {
  width: min(480px, calc(100vw - 32px)); max-height: 85dvh;
  box-sizing: border-box; overflow-y: auto;
  padding: 22px 20px 18px;
  border: 0; border-radius: var(--radius);
  background: var(--frame-bg); color: var(--frame-ink);
  font-family: var(--font-ui);
}
.p-sheet::backdrop { background: rgba(0, 0, 0, .45); }
.p-sheet h2 { font-size: 19px; margin: 0 0 10px; }
.p-sheet ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.55; }
.p-sheet li + li { margin-top: 8px; }
.p-sheet-link {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px;
  color: var(--frame-ink); font-size: 14px; font-weight: 700;
}
.p-sheet .p-go { margin-top: 8px; }

.p-go {
  width: 100%;
  min-height: 56px;
  margin-top: 22px;
  /* The landing page's call to action (2026-10-11): a green pill, white bold text, a soft shadow. */
  border-radius: 999px;
  background: var(--cta);
  color: var(--on-cta);
  font-size: 19px;
  font-weight: 800;
  box-shadow: 0 12px 24px -14px rgba(18, 133, 94, .85), inset 0 -3px 0 rgba(0,0,0,.15);
}
.p-go:active { transform: scale(.98); }
/* NEVER DISABLED. A dead button with no explanation is the silent no-op that shipped once.
   It is always tappable and always says what is still missing. */
.p-go[data-incomplete="1"] { background: var(--frame-muted); box-shadow: none; }

/* Feedback on an incomplete submit — every activity must have a way forward, and that
   starts here. Amber, never red: this is a consequence, not a verdict on a parent either. */
.p-miss {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--frame-ink);
  border-left: 4px solid var(--not-yet);
  padding-left: 11px;
  min-height: 1em;
}
.p-miss:empty { display: none; }

.p-fine {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--frame-muted);
}

/* ---- the sign-in screen (step 4) ---------------------------------------------------
   Shown ONLY when there is no session to restore. A returning parent never sees it, so it
   is a failure state and a first-run state, never a routine one — which is why it is short
   and has exactly one control. */

.signin {
  /* One column, top-aligned (2026-10-11): the mark, the welcome card, the small print. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 18px;
}
.s-brand { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: var(--tap-min);
  color: inherit; text-decoration: none; font-weight: 900; font-size: 19px; }
.s-brand svg { width: 30px; height: 30px; flex: 0 0 auto; }

.s-card { border: 2px solid var(--frame-line); border-radius: 22px; padding: 22px 18px 18px; margin-top: auto; }   /* the card and the small print sit in the middle of the screen, the mark at the top */
.s-title { margin-top: 0; }
.s-intro { margin-bottom: 14px; }
.s-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.s-list li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.s-list li::before { content: "✓"; display: inline-grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto;
  border-radius: 50%; background: var(--cta); color: var(--on-cta); font-size: 14px; font-weight: 900; }
.s-fine { margin-top: 0; margin-bottom: auto; text-align: center; }
.s-fine a { color: inherit; font-weight: 700; }

.s-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* The mark is a fixed-size SVG; without this it stretches to the flex line height. */
  line-height: 1;
}
.s-google svg { flex: 0 0 auto; }
/* `display:flex` above would otherwise beat the hidden attribute (2026-10-11). */
.s-google[hidden] { display: none; }

/* Google's own button (an iframe it draws) sits centred in this slot; empty, it takes no room. */
.s-gis { display: flex; justify-content: center; min-height: 44px; margin: 8px 0;
  /* Google's iframe is a light document; under a dark page it paints an opaque white box
     unless its container's colour scheme matches it. */
  color-scheme: light; }
.s-gis:empty { display: none; }
/* The placeholder: the size of Google's pill, quiet, no logo - nothing that looks like a button. */
.s-wait { display: flex; align-items: center; justify-content: center; width: 300px; max-width: 100%; height: 44px;
  border-radius: 999px; border: 1px solid var(--frame-line); color: var(--frame-muted); font-size: 14px; }


/* ---- the stepper (2026-09-10) --------------------------------------------------------
   ONE QUESTION PER SCREEN. The bar is the only thing that persists between steps, so the
   shape of the screen is learned once and never re-read. */

.pstepper {
  min-height: 100dvh;              /* dvh, not vh — mobile chrome makes vh overshoot */
  display: flex;
  flex-direction: column;
}

.ps-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap-min);
  margin-bottom: 8px;
}

/* 44px hit area even though the glyph inside is small — CLAUDE.md's tap-target rule, and
   a six-year-old's parent is often holding the phone one-handed. */
.ps-back {
  flex: 0 0 auto;
  width: var(--tap-min); height: var(--tap-min);
  margin-left: -11px;              /* optically flush with the text below it */
  border: 0; background: none;
  color: var(--frame-ink);
  font-size: 30px; line-height: 1;
  border-radius: var(--radius);
  cursor: pointer;
}
.ps-back[hidden] { display: none; }

.ps-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--frame-muted);
  font-variant-numeric: tabular-nums;
}

/* Four segments rather than a sliding fill: a parent can COUNT what is left, which is the
   whole reason the stepper shows a denominator at all. */
.ps-track { flex: 1 1 auto; display: flex; gap: 5px; }
.ps-track i {
  flex: 1 1 0;
  height: 4px;
  border-radius: 2px;
  background: var(--frame-line);
  transition: background .18s ease;
}
.ps-track i[data-on="1"] { background: var(--frame-accent); }

/* Centred, so a one-question step does not sit under the notch with everything below it
   empty. justify-content, never position:fixed — a fixed footer is covered by the iOS
   keyboard the moment the name field is focused. */
.ps-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 12px;
}

.ps-q {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 6px;
}

/* WHY WE ASK, in one short line, and only where it is not obvious. Anything longer belongs
   nowhere on this screen. */
.ps-why {
  font-size: 15px;
  line-height: 1.5;
  color: var(--frame-muted);
  margin: 0 0 18px;
}
.ps-q + .p-input, .ps-q + .p-choices { margin-top: 18px; }

/* THE AGE DROPDOWN. It was briefly a grid of twelve chips (2026-09-10, morning) and went
   back to a select the same day: the wall of chips was judged daunting, and the list has
   to carry the whole K-12 range as more levels are authored. Fifteen chips is a wall;
   fifteen options in a native picker is a scroll.

   appearance:none strips the OS chrome so it matches .p-input exactly; the caret is drawn
   below rather than left to the platform, which otherwise renders a tiny grey triangle that
   is invisible in dark mode. */
.p-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  cursor: pointer;
  /* A caret, as a background image, so no extra element and nothing to mis-align.
     currentColor is not allowed in a url(), so this is two stacked linear-gradients. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--frame-muted) 50%),
    linear-gradient(135deg, var(--frame-muted) 50%, transparent 50%);
  background-position: right 20px center, right 14px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
/* The native option list is drawn by the OS and does NOT inherit our tokens. Naming both
   explicitly is what stops white-on-white in one theme — recurring bug #12, in the one
   place a stylesheet has almost no reach. */
.p-select option { background: var(--frame-bg); color: var(--frame-ink); }