@import url('./reviewbook.css');
@import url('./parent-tokens.css');
/* Only necessary functional states and bounded text containment; original themes own the screens. */
.m2-status { margin: 12px 16px; overflow-wrap: anywhere; }
.m2-status:empty { display: none; }
.m2-bound { min-width: 0; overflow-wrap: anywhere; }
.m2-fields { display: flex; flex-direction: column; gap: 16px; }
.m2-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.m2-actions button { min-height: 44px; }
.m2-notice { margin-top: 12px; }
.m2-dialog { border: 1px solid #d5cfc6; border-radius: 16px; padding: 24px; max-width: min(460px,calc(100vw - 32px)); background: #fbf9f6; color: #1d1b18; font-family: inherit; }
.m2-dialog::backdrop { background: #1d1b1855; }
.m2-dialog h2 { font-family: Newsreader,serif; font-size:1.5rem; }
.m2-dialog p { margin-block: 12px; }
.m2-dialog button { min-height: 44px; padding: 8px 16px; }
:focus-visible { outline: 2px solid #234a3e; outline-offset: 3px; }
button:disabled { opacity: .55; }
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}

.m2-bound h2,.m2-bound p,.m2-bound .flex-col { min-width: 0; overflow-wrap: anywhere; }
.m2-fields textarea { height: auto; min-height: 120px; }

.m2-back { min-height: 44px; padding: 12px 16px; margin: 12px 16px; }
.m2-dialog { overflow-wrap: anywhere; max-height: calc(100dvh - 32px); overflow-y: auto; }

.m2-resource-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Account actions are peers, including long invitation labels. */
.m2-dialog .m2-account-actions { display: grid !important; grid-template-columns: minmax(0,1fr); grid-auto-rows: minmax(48px,1fr); gap: 12px; }
.m2-dialog .m2-account-actions > button { width: 100%; min-width: 0; height: 100%; }

/* Privacy-gated resume is a parent-facing screen, including after sign-out. */
.m2-lifecycle-recovery { box-sizing: border-box; width: calc(100% - 32px); max-width: 480px; margin: 32px auto; padding: 24px; border-radius: 16px; background: #ffffff; color: #414845; }
.m2-lifecycle-recovery h1 { margin: 0 0 12px; font-family: Newsreader,serif; font-size:1.875rem; line-height: 1.2; color: #234a3e; }
.m2-lifecycle-recovery p { margin: 0 0 24px; line-height: 1.5; overflow-wrap: anywhere; }
.m2-lifecycle-recovery button { width: 100%; min-height: 48px; }

/* CR1: keep the supplied hierarchy while containing long campus names. */
[data-cohort-screen="find_your_school"] header:not(body > header) { position: static; height: auto; margin-bottom: 24px; }
[data-cohort-hook="school-directory-note"] { margin-block: 16px; }
[data-cohort-hook="school-results"] h2 { font-size:1.25rem; line-height: 1.3; overflow-wrap: anywhere; }
[data-cohort-hook="school-submit"] { height: auto; min-height: 52px; padding-block: 12px; }
[data-cohort-hook="school-actions"] { padding-bottom: max(16px,env(safe-area-inset-bottom)); }
.m2-fields label { min-width: 0; }
.m2-fields input:not([type=checkbox]):not([type=radio]) { box-sizing: border-box; min-width: 0; width: 100%; }
.m2-colour-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.m2-colour-choice { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 80px; padding: 12px; border: 2px solid transparent; border-radius: 8px; background: #f4f0e8; color: #1d1b18; }
.m2-colour-choice.m2-colour-selected { border-color: #093328; }
.m2-colour-swatch { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
[data-cohort-hook="child-switcher"].m2-family-selector { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; overflow-x: auto; }
.m2-family-selector > button { box-sizing: border-box; min-width: 0; width: 100%; min-height: 64px; padding: 8px 4px; white-space: normal; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.m2-family-selector > button:nth-child(n+4) { min-width: 104px; }
.m2-family-selector > button > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m2-family-selector > button[aria-selected="true"] { outline: 2px solid #093328; outline-offset: -2px; background: #eeebe5; color: #093328; }
.m2-add-child { margin-top: 8px; min-height: 44px; }
[hidden] { display: none !important; }
body[data-ui-controls] .m2-colour-choice[aria-checked="true"] { border: 2px solid #093328; box-shadow: 0 0 0 1px #093328; }
.m2-school-heading { flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
[data-cohort-hook="year-options"] button { min-height: 44px; min-width: 44px; }

/* CR1.1 — one calm visual language for sheets, states and steps. Approved palette only. */
:root { --m2-ink:var(--p-ink); --m2-muted:var(--p-meta); --m2-line:var(--p-line); --m2-card:var(--p-card); --m2-green:var(--p-primary); --m2-green-deep:var(--p-deep); --m2-terracotta:var(--p-terracotta); --m2-tint:var(--p-quiet); --m2-ease:cubic-bezier(.22,.8,.3,1); }
html { background:#fbf9f6; }
body { background:#fbf9f6; }
/* Brand: the approved lockup once; the duplicate typed wordmark beside it is redundant. */
header img[data-cohort-hook="header-logo"] { height:32px; padding:6px 0; } /* 32px artwork like the other headers; 6px padding keeps the 44px target */
header [data-cohort-hook="header-logo"] + span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* The local-test statement stays truthful but no longer dominates every screen. */
main > div > .m2-status, main > .m2-status { margin:8px 16px 0; font-size:0.75rem; line-height:1.4; color:var(--m2-muted); }
/* Keep standalone setup/status copy in the same reading column as its page. */
main[data-cohort-screen="multiple_children"] > div > .m2-status { box-sizing:border-box; width:100%; max-width:var(--page-max); margin-inline:auto; padding-inline:var(--gutter); }
.m2-loading { position:fixed; left:0; right:0; top:42%; margin:0; text-align:center; color:var(--m2-muted); font-size:0.875rem; pointer-events:none; }
/* Top back link: same place on every secondary screen. */
.m2-back-top { display:inline-flex; align-items:center; gap:4px; margin:8px 8px 0; min-height:44px; padding:8px 12px; color:var(--m2-green); background:transparent; border:0; }
.m2-back-top::before { content:'‹'; font-size:1.625rem; line-height:1; margin-top:-3px; }
/* Family cards */
.m2-child-card .m2-school-row { background:transparent; padding:0; }
.m2-status-box { background:var(--m2-tint); }
.m2-status-line { align-items:flex-start; }
.m2-state-label { color:var(--m2-green); font-weight:600; }
.m2-child-card[data-tone="attention"] .m2-state-label { color:var(--m2-terracotta); }
.m2-edit-button { min-height:44px; padding:0 12px; border-radius:22px; color:var(--m2-green); background:var(--m2-tint); font-weight:600; font-size:0.875rem; }
.m2-card-cta { min-height:44px; display:flex; align-items:center; justify-content:space-between; width:100%; padding:0 16px; border-radius:14px; background:var(--m2-green); color:#fff !important; font-weight:600; }
.m2-child-card[data-tone="ok"] .m2-card-cta { background:var(--m2-tint); color:var(--m2-green) !important; }
.m2-child-card > div:last-child .pt-space-xs { padding-top:0; }
.m2-rows { display:flex; flex-direction:column; gap:8px; margin:16px 16px 0; }
.m2-row { display:flex; align-items:center; gap:12px; width:100%; min-height:64px; padding:12px 16px; text-align:left; border:1px solid var(--m2-line); border-radius:14px; background:var(--m2-card); color:var(--m2-ink); }
.m2-row-text { display:flex; flex-direction:column; flex:1; min-width:0; gap:8px; }
.m2-row-title { font-weight:600; font-size:1rem; line-height:1.5rem; }
.m2-row-body { font-size:0.875rem; font-weight:400; color:var(--m2-muted); line-height:1.25rem; }
/* Selector: only when two or more children. */
.m2-family-selector { grid-template-columns:repeat(auto-fit,minmax(0,1fr)) !important; }
/* Sheets (dialogs) */
.m2-dialog { padding:0; width:min(460px,calc(100vw - 24px)); border-radius:20px; box-shadow:0 24px 60px #09332826; }
.m2-dialog > * { margin-inline:20px; }
.m2-dialog > :first-child { margin-top:20px; }
.m2-dialog > :last-child { margin-bottom:20px; }
.m2-dialog > .m2-sheet, .m2-dialog > form.m2-sheet { margin:0; padding:20px; }
.m2-sheet { display:flex; flex-direction:column; gap:16px; }
.m2-sheet-head { display:flex; flex-direction:column; gap:4px; }
.m2-sheet-head h2 { margin:0; font-size:1.625rem; line-height:1.15; }
.m2-eyebrow { margin:0; font-size:0.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--m2-terracotta); font-weight:700; }
.m2-sheet-context { margin:0; color:var(--m2-muted); font-size:0.875rem; }
.m2-sheet-copy { margin:0 !important; font-size:1rem; line-height:1.5; color:var(--m2-ink); }
.m2-sheet-meta, .m2-hint { margin:0 !important; font-size:0.8125rem; line-height:1.4; color:var(--m2-muted); }
.m2-sheet-actions { display:flex; flex-direction:column; gap:10px; }
.m2-sheet-actions > * { width:100%; }
.m2-quiet-button, .m2-link-button { background:transparent !important; color:var(--m2-green) !important; border:0 !important; box-shadow:none !important; min-height:44px; font-weight:600; }
.m2-link-button { align-self:flex-start; padding-inline:0 !important; }
.m2-danger-link { background:transparent !important; color:var(--m2-terracotta) !important; border:0 !important; box-shadow:none !important; min-height:44px; font-weight:600; }
.m2-code-block { background:var(--m2-tint); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:4px; }
.m2-code-label { margin:8px 0 0; font-size:0.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--m2-muted); }
.m2-code-label:first-child { margin-top:0; }
.m2-code-value, .m2-code-link { margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.875rem; line-height:1.5; color:var(--m2-ink); word-break:break-all; user-select:all; -webkit-user-select:all; }
.m2-code-link { font-size:0.75rem; color:var(--m2-muted); }
.m2-invite-hidden { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.m2-invite-feedback { min-height:20px; margin:0 !important; font-size:0.875rem; color:var(--m2-green); }
.m2-invite-feedback:empty { min-height:0; }
.m2-field { display:flex; flex-direction:column; gap:8px; }
.m2-edit-name { border:1px solid var(--p-control-line); color:var(--m2-ink); background:var(--m2-card); }
.m2-colour-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,7rem),1fr)); gap:8px; }
.m2-colour-row .m2-colour-choice { min-height:76px; padding:10px 4px; font-size:0.75rem; text-align:center; }
.m2-colour-row .m2-colour-swatch { width:32px; height:32px; }
.m2-summary { display:flex; flex-direction:column; gap:4px; background:var(--m2-tint); border-radius:14px; padding:14px 16px; }
.m2-summary p { margin:0 !important; }
.m2-summary-school { font-weight:600; }
.m2-summary-year { color:var(--m2-muted); font-size:0.875rem; }
/* Steps: plain text progress, no percentages. */
.m2-steps { list-style:none; margin:8px 0 16px; padding:0; display:flex; flex-direction:column; gap:10px; }
.m2-step { display:flex; align-items:flex-start; gap:12px; color:var(--m2-muted); font-size:0.9375rem; line-height:1.4; }
.m2-step-mark { flex:0 0 26px; height:26px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--m2-line); font-size:0.8125rem; font-weight:700; }
.m2-step[data-state="done"] .m2-step-mark { background:var(--m2-green); border-color:var(--m2-green); color:#fff; }
.m2-step[data-state="current"] { color:var(--m2-ink); font-weight:600; }
.m2-step[data-state="current"] .m2-step-mark { border-color:var(--m2-green); color:var(--m2-green); }
.m2-step-text { padding-top:2px; }
/* Motion: short, purposeful, never delaying input. */
.m2-dialog[open] { animation:m2-sheet-in 220ms var(--m2-ease); }
.m2-dialog[open]::backdrop { animation:m2-fade-in 200ms ease-out; }
@keyframes m2-sheet-in { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes m2-fade-in { from { opacity:0; } to { opacity:1; } }
button, a, [role="button"] { touch-action:manipulation; }
button:active:not(:disabled) { transform:scale(.985); transition:transform 80ms ease-out; }
/* Screen-to-screen: browsers that support cross-document view transitions crossfade
   the page while the header and tab bar stay put. Others navigate normally. */
@view-transition { navigation:none; }
/* Names must be unique per page: only the top-level header and tab bar take part. */
body > header { view-transition-name:cohort-header; }
body > nav.fixed, body > nav[class*="fixed"] { view-transition-name:cohort-tabs; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:180ms; animation-timing-function:var(--m2-ease); }
::view-transition-group(cohort-header), ::view-transition-group(cohort-tabs) { animation-duration:0s; }
@media (prefers-reduced-motion:reduce) {
 .m2-dialog[open], .m2-dialog[open]::backdrop { animation:none; }
 button:active:not(:disabled) { transform:none; }
 ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation:none !important; }
}
body[data-ui-controls] .m2-sheet-actions > [data-ui-button], body[data-ui-controls] .m2-sheet > [data-ui-button] { width:100%; max-width:none; align-self:stretch; }
body[data-ui-controls] .m2-sheet-actions > [data-ui-button="primary"] { background:var(--m2-green); color:#fff; }
body[data-ui-controls] .m2-sheet-actions > [data-ui-button="danger"] { background:var(--m2-terracotta); color:#fff; border-color:var(--m2-terracotta); }
body[data-ui-controls] .m2-sheet-actions > .m2-quiet-button { border:1px solid var(--m2-line) !important; }
.m2-colour-row .m2-colour-choice { overflow-wrap:normal; word-break:normal; hyphens:none; font-size:0.6875rem; padding:10px 2px; }
.m2-dialog .m2-colour-row .m2-colour-choice { overflow-wrap:normal; }
body[data-ui-controls] .m2-back-top { border:0; background:transparent; min-height:44px; padding:8px 12px 8px 8px; align-self:flex-start; font-weight:600; }
[data-cohort-hook="joining-privacy"] { margin-top:24px; }
.m2-dialog .m2-code-block p { margin:0; }
.m2-dialog .m2-code-block .m2-code-label:not(:first-child) { margin-top:14px; }
body[data-ui-controls] .m2-row { width:100%; max-width:none; align-self:stretch; padding:12px 16px; min-height:64px; border:1px solid var(--m2-line); background:var(--m2-card); }
main h1 + p:empty { display:none; }
.m2-colour-heading { margin-top:8px; margin-bottom:8px; }
body[data-ui-controls] .m2-secondary-cta { width:100%; max-width:none; background:transparent; color:var(--m2-green); border:1.5px solid var(--m2-green); font-weight:600; }
[data-cohort-hook="child-switcher"].m2-family-selector { padding:3px; }

.m2-colour-row .m2-colour-choice { align-self:stretch; height:auto; }
.m2-dialog > .m2-sheet, .m2-dialog > form.m2-sheet { padding-top:24px; }
.m2-more { margin:12px 0 16px; }
.m2-more > summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--m2-green); font-weight:600; }
.m2-more[open] > summary { margin-bottom:8px; }
/* Programmatic focus lands on the sheet heading so the keyboard stays down; it is not a control. */
.m2-sheet-head:focus, .m2-sheet-head:focus-visible { outline:none; }

/* CR1.2-01 — neutral loading frame shown while the session is confirmed. Static on purpose: no names,
   counts or codes, and nothing that moves. It sits where the page content will be. */
.m2-cover { padding:88px 16px 96px; min-height:100vh; box-sizing:border-box; background:#fbf9f6; }
.m2-cover .m2-sk-title { width:44%; height:34px; border-radius:8px; background:#eeebe5; margin:16px 0 14px; }
.m2-cover .m2-sk-line { width:72%; height:16px; border-radius:6px; background:#f1ede6; margin-bottom:28px; }
.m2-cover .m2-sk-card { height:220px; border-radius:16px; background:#ffffff; box-shadow:0 1px 3px #0000000f; margin-bottom:16px; }
.m2-cover .m2-sk-short { height:150px; }
/* CR1.2-04 — the full technical code/link is one tap away, not the main event. */
.m2-tech { border-radius:14px; background:var(--m2-tint); padding:0 16px; }
.m2-tech-summary { min-height:48px; display:flex; align-items:center; cursor:pointer; color:var(--m2-green); font-weight:600; list-style:none; }
.m2-tech-summary::-webkit-details-marker { display:none; }
.m2-tech[open] .m2-tech-summary { margin-bottom:4px; }
.m2-tech .m2-code-block { background:transparent; padding:0 0 16px; }
.m2-wait-note { margin-top:12px !important; }
/* CR1.2-06 — identity dot beside the child's name on the joining screen; school place under the name. */
.m2-mini-avatar { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; margin-right:6px; font-size:0.6875rem; font-weight:700; vertical-align:middle; }
.m2-school-detail, .m2-join-school-detail { display:block; }
.m2-child-card .m2-school-detail { margin-top:2px; }
/* CR1.2-06 — the child selector is a strip that scrolls inside itself, so long lists and large text never widen the page. */
[data-cohort-hook="child-switcher"].m2-family-selector { display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; overflow-y:hidden; max-width:100%; gap:8px; padding:3px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
[data-cohort-hook="child-switcher"].m2-family-selector > button { flex:1 0 80px; min-width:80px !important; width:auto; scroll-snap-align:start; }
/* Approved family reference: equal selectors and one consistent primary action
 * per child's card; status stays in its own label, rather than button colour. */
.m2-family-selector > button { border-radius:14px; min-height:80px; border:1px solid var(--m2-line,#e3ded6); }
.m2-child-card { border-radius:18px; }
.m2-child-card .m2-status-box { background:transparent; padding:0; }
.m2-child-card .m2-card-cta,.m2-child-card[data-tone="ok"] .m2-card-cta { min-height:48px; background:var(--m2-green); color:#fff !important; }

/* CRE03-P01 entry: fields stay visible on the paper background, privacy facts are a collapsed help under the action (LX14) */
[data-m2-form] input:not([type=checkbox]):not([type=radio]) { border:1px solid var(--m2-line); }
[data-m2-form] input:focus-visible { outline:2px solid var(--m2-green); outline-offset:2px; }
.m2-privacy-help { margin-top:12px; border:1px solid var(--m2-line); border-radius:12px; background:var(--m2-card); }
.m2-privacy-help > summary { min-height:44px; display:flex; align-items:center; padding:0 16px; cursor:pointer; font-weight:600; color:var(--m2-green); }
.m2-privacy-help > summary:focus-visible { outline:2px solid var(--m2-green); outline-offset:2px; border-radius:12px; }
.m2-privacy-help > p { margin:0; padding:0 16px 12px; color:var(--m2-muted); overflow-wrap:anywhere; }
.m2-reference { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; padding:2px 8px; border-radius:6px; background:var(--m2-tint); user-select:all; }
/* CRE03-P01: the test-preview notice aligns with the page margin instead of indenting a second time, so the title and fields start higher (type size unchanged) */
main[data-cohort-screen="child_details"] > div > .m2-status { margin:4px 0 8px; }

/* CRE03-P02: the school-confirmation link and checkbox use the Cohort colours, not the browser default */
main[data-cohort-screen] a[href*="openstreetmap"] { color:var(--m2-green); text-decoration:underline; text-underline-offset:3px; }
main[data-cohort-screen] input[type="checkbox"], main[data-cohort-screen] input[type="radio"] { accent-color:var(--m2-green-deep); }
.m2-school-range { color:var(--m2-muted); margin-top:2px; }
/* a hidden screen element stays hidden even where a utility class sets its display */
[data-cohort-hook][hidden] { display:none !important; }
main.m2-loading-school > div > *:not(.m2-status) { visibility:hidden; }
/* CRE03-P03: the last action of a tall dialog (for example "Not now") sat on the dialog's bottom edge, level with the tab bar behind it. The dialog keeps its own bottom space and scrolls inside the screen. */
.m2-dialog { padding-bottom:calc(20px + env(safe-area-inset-bottom)); max-height:calc(100dvh - 24px); }

/* The M2 bar supplies its own gutter; the shared selector must scroll inside it. */
body[data-parent-design] .m2-family-switcher .x3-childsel {
  width: 100%; margin-inline: 0; padding-inline: 0; box-sizing: border-box;
}