@import url('./comp-layout.css');
@import url('./ui/components.css');
@font-face { font-family: 'Inria Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url('./assets/fonts/inria-serif-700.ttf') format('truetype'); }
@font-face { font-family: 'Unna'; font-style: normal; font-weight: 400; font-display: swap; src: url('./assets/fonts/unna-400.ttf') format('truetype'); }
.app-shell:has(.welcome-frame) { width: min(100%, 853px); }
.app-shell:has(.welcome-frame) > .site-header,
.app-shell:has(.welcome-frame) > .journey-bar,
.app-shell:has(.welcome-frame) > .progress-track { display: none; }
.welcome-frame { position: relative; width: 100%; isolation: isolate; container-type: inline-size; aspect-ratio: 853 / 1844; background: #f8f7f3 url('./assets/plates/paper-grain.png') repeat; background-size: 570px; }
.welcome-landscape { position: absolute; left: var(--r-origami-landscape-x); top: var(--r-origami-landscape-y); width: var(--r-origami-landscape-w); height: var(--r-origami-landscape-h); object-fit: contain; pointer-events: none; }
.welcome-frame :is(p,h1,h2) { margin: 0; }
.welcome-header { color: #0e2222; }
.r-wordmark .tova-wordmark { width: 100%; height: 100%; display: block; }
.r-preview { font-size: 3.75cqw; color: #45535e; line-height: 1.3; }
.welcome-title { display: contents; color: #0e2222; }
.r-headline-first { font: 700 13.60cqw / 1.03 'Inria Serif', Georgia, serif; letter-spacing: -.04em; white-space: nowrap; }
.r-headline-last { font: 400 15.71cqw / 1 'Unna', Georgia, serif; letter-spacing: -.04em; white-space: nowrap; }
.r-accent { overflow: visible; z-index: -1; }
.r-support { padding-top: 2.5cqw; font-size: 5.35cqw; line-height: 1.2; letter-spacing: -.035em; color: #354455; }
.r-example-heading { font: 700 6.15cqw / 1 'Inria Serif', Georgia, serif; letter-spacing: -.04em; color: #0e2222; white-space: nowrap; }
.r-example { border: 1px solid #dce0d2; border-radius: 1.65cqw; }
.r-example::after { content: ''; position: absolute; top: 50%; left: 5%; right: 5%; height: 1px; background: #dce0d2; }
.r-nils, .r-astrid { font-size: 3.85cqw; line-height: 1.18; letter-spacing: -.035em; color: #53606a; white-space: nowrap; }
.r-nils strong, .r-astrid strong { font-family: 'Inria Serif', Georgia, serif; font-weight: 700; color: #0e2222; }
.welcome-proof-icon { display: grid; place-items: center; border-radius: 50%; background: #e4ecdf; color: #0d342b; }
.welcome-proof-icon svg { width: 62%; height: 62%; }
.r-example-label { font-size: 2.81cqw; color: #62706f; line-height: 1.3; }
.welcome-primary { display: flex; justify-content: center; align-items: center; gap: 2.2cqw; border: 0; border-radius: 9cqw; background: #0d342b; color: #f8f7f3; font: 700 6.2cqw / 1 'Inria Serif', Georgia, serif; }
.welcome-primary svg { width: 5.1cqw; height: 5.1cqw; }
.welcome-primary:hover { background: #1d4a3e; }
.r-footer { font-size: 3.05cqw; line-height: 1.3; white-space: nowrap; text-align: center; letter-spacing: -.035em; color: #5e696d; }

/* Task screens inherit the approved composition's material and type, but use
   normal document flow so error messages and longer copy can grow safely. */
.app-shell { background: #f8f7f3 url('./assets/plates/paper-grain.png') repeat; background-size: 570px; }
.site-header { height: 102px; padding: 30px 26px 16px; align-items: center; }
.wordmark { width: 112px; height: 43px; display: block; }
.wordmark .tova-wordmark { width: 100%; height: 100%; display: block; }
.google-signin { display: block; width: 252px; max-width: 100%; padding: 0; margin: 0 auto; border: 0; border-radius: 30px; background: transparent; cursor: pointer; }
.google-signin img { display: block; width: 100%; height: auto; }
.google-signin:hover:not(:disabled) { opacity: .88; }
.google-signin:disabled { opacity: .5; cursor: not-allowed; }
.prototype-label { font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.journey-bar { height: 40px; justify-content: flex-start; }
.back-button { font-size: 15px; font-weight: 400; }
.step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.progress-track { margin: -20px 26px 26px 115px; height: 4px; border-radius: 4px; overflow: hidden; }
.progress-track span { background: #254c3b; }
.screen { padding-top: 28px; min-height: calc(100svh - 174px); }
.screen h1, .screen h2, .email-preview h2 { font-family: 'Inria Serif', Georgia, serif; font-weight: 700; letter-spacing: -.04em; }
.screen h1, .delivery-screen h1 { font-size: clamp(41px, 12.8vw, 54px); line-height: 1.04; text-wrap: initial; }
.intro > p { font-size: 19px; line-height: 1.4; margin-top: 20px; }
.origami-art--compact { height: 190px; margin: 22px auto 10px; }
.primary-button, .delivery-screen .primary-button { min-height: 58px; justify-content: center; border-radius: 34px; font: 700 22px / 1.2 'Inria Serif', Georgia, serif; text-align: center; padding: 15px 18px; }
.secondary-button { font-size: 16px; font-weight: 400; }
.quiet-copy, .field-help { font-size: 14px; line-height: 1.5; }
.action-dock { padding-top: 28px; }
.single-choice { background: var(--forest-900); color: var(--surface); border: 0; border-radius: 34px; padding: 16px 22px; min-height: 62px; text-align: center; }
.single-choice strong { color: var(--surface); font: 700 22px / 1.2 'Inria Serif', Georgia, serif; }
.single-choice .choice-mark { color: var(--surface); border-color: var(--surface); }
.single-choice .choice-copy small { color: #e8eedf; font-size: 12px; }
.single-choice > svg { stroke: var(--surface); }
.single-choice:disabled { background: #56645b; opacity: .85; }
.identity-rule { display: flex; align-items: flex-start; gap: 16px; margin-top: 24px; }
.identity-rule > svg { width: 34px; height: 34px; margin-top: 2px; }
.identity-rule strong { font: 700 23px / 1.2 'Inria Serif', Georgia, serif; color: var(--forest-900); }
.identity-rule p { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 5px 0 0; }
.account-screen .quiet-copy { margin-top: 20px; }
.language-screen .origami-art--compact { height: 122px; margin-top: 10px; }
.language-screen .language-options { margin-top: 16px; }
.language-screen .quiet-copy { margin-top: 16px; }
.language-options { margin: 24px 0 0; padding: 0; border: 0; }
.language-options legend { margin-bottom: 9px; color: var(--forest-900); font-size: 14px; font-weight: 700; }
.language-option { display: flex; align-items: center; gap: 15px; min-height: 72px; padding: 11px 0; border-top: 1px solid var(--line); cursor: pointer; }
.language-option:last-child { border-bottom: 1px solid var(--line); }
.language-option input { width: 21px; height: 21px; margin: 0; accent-color: var(--forest-900); }
.language-option strong, .language-option small { display: block; }
.language-option strong { color: var(--forest-900); font-size: 17px; }
.language-option small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.language-option:has(input:focus-visible) { outline: 3px solid #68813e; outline-offset: 3px; }
.source-hero { justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); margin-top: 16px; padding-bottom: 14px; }
.source-hero > div { flex: 1; min-width: 0; }
.source-hero strong { font: 700 27px / 1.2 'Inria Serif', Georgia, serif; }
.source-hero span { font-size: 17px; line-height: 1.45; }
.source-hero .origami-art { width: 49%; height: 205px; }
.school-screen .intro > p { font-size: 17px; }
.editorial-rule strong { font: 700 22px / 1.2 'Inria Serif', Georgia, serif; }
.editorial-rule p { font-size: 15px; line-height: 1.5; }
.bankid-panel { border: 0; border-radius: 12px; }
.pupil-list { margin-top: 12px; border-top: 0; }
.pupil { min-height: 76px; }
.pupil strong { font: 700 26px / 1.2 'Inria Serif', Georgia, serif; }
.pupil small { font-size: 15px; }
.pupil-avatar { width: 48px; height: 48px; flex-basis: 48px; font-size: 28px; }
.fold-sequence { margin-top: 34px; margin-bottom: 20px; }
.fold-sequence .origami-art { height: 130px; }
.sync-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 0; gap: 16px; }
.sync-steps p { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; border: 0; font: 700 20px / 1.2 'Inria Serif', Georgia, serif; }
.step-check { background: #e4ecdf; width: 27px; height: 27px; }
.sync-screen > .quiet-copy { padding: 18px; border-radius: 12px; background: #edf0e4; margin-top: 30px; }
.week-screen { display: grid; grid-template-columns: minmax(0,1fr) 112px; column-gap: 8px; }
.week-screen > .intro { grid-column: 1; grid-row: 1; }
.week-screen h1 { font-size: 43px; }
.week-screen .intro p { font-size: 13px; width: 145%; }
.week-screen > .origami-art { grid-column: 2; grid-row: 1; height: 132px; width: 112px; margin: 0; align-self: start; }
.week-screen > :not(.intro):not(.origami-art) { grid-column: 1 / -1; }
.week-screen h2 { font-size: 29px; }
.attention-section { margin-top: 28px; background: transparent; padding: 0; }
.attention-item { padding: 17px 14px; background: #edf0e4; }
.attention-item:first-of-type { border-radius: 12px 12px 0 0; border-top: 0; }
.attention-item:last-child { border-radius: 0 0 12px 12px; }
.attention-item strong { font: 700 21px / 1.15 'Inria Serif', Georgia, serif; }
.attention-item p { font-size: 15px; }
.attention-item small { font-size: 12px; }
.week-timeline, .change-note { margin-top: 26px; }
.day-row { grid-template-columns: 58px 1fr; }
.date-cell strong { font-family: inherit; font-size: 15px; color: var(--muted); }
.day-content strong { font-size: 16px; }
.day-content p { font-size: 14px; }
.option-list { margin-top: 28px; border-top-color: var(--line); }
.option { min-height: 120px; }
.option strong { font: 700 25px / 1.1 'Inria Serif', Georgia, serif; }
.option small { font-size: 15px; line-height: 1.35; }
.option-state { font-size: 14px; min-width: 53px; }
.optional-landscape { margin: 0 -26px -20px; }
.optional-landscape .origami-art { height: 156px; margin: 0; }
.briefing-proof { position: relative; padding: 0 0 90px; margin: 24px -12px 0; }
.briefing-proof > .origami-art { position: absolute; bottom: -28px; margin: 0; width: 100%; height: 340px; object-fit: contain; }
.briefing-proof .email-preview { position: relative; margin: 0 27px; padding: 20px 22px; background: #fbf9f2 url('./assets/plates/paper-grain.png'); background-size: 500px; border: 0; }
.email-top { border-bottom-color: var(--line); }
.email-top > span:first-child { font: 700 25px / 1 'Inria Serif', Georgia, serif; color: var(--forest-900); }
.briefing-proof h2 { margin-top: 20px; font-size: 37px; }
.briefing-proof .email-section { padding: 15px 0 8px; }
.briefing-proof .email-section h3 { font: 700 23px / 1.1 'Inria Serif', Georgia, serif; }
.briefing-proof .email-section p { padding: 10px 0; border-top: 1px solid var(--line); margin: 0; }
.briefing-proof .email-section p:first-child { border-top: 0; }
.email-context { font-size: 14px; line-height: 1.4; color: var(--muted); }
.briefing-screen > .quiet-copy { margin-top: 12px; }
.recipients-screen { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); column-gap: 10px; }
.recipients-screen > * { grid-column: 1 / -1; }
.recipients-screen > .origami-art { grid-column: 2; grid-row: 2; width: 100%; height: 145px; margin: 14px 0 0; }
.recipients-screen > .sharing-note { grid-column: 1; grid-row: 2; border: 0; margin: 16px 0 0; padding: 0; font-size: 14px; }
.recipient-list { margin-top: 20px; }
.recipient-list li:first-child { background: #edf0e4; border: 0; padding: 16px; border-radius: 12px; }
.recipient-form { margin-top: 24px; }
.recipient-form input { background: transparent; border-color: #aeb8a8; border-radius: 9px; }
.secondary-outline { width: 100%; border-radius: 9px; font-size: 16px; font-weight: 400; }
.recipient-link-screen { min-height: calc(100svh - 102px); }
.recipient-link-screen .intro > p { max-width: 34ch; }
.recipient-link-art { height: 142px; margin: 16px 0 10px; display: flex; justify-content: flex-end; overflow: hidden; }
.recipient-link-art .origami-art { width: 190px; height: 158px; margin: 0; }
.recipient-link-scope { padding: 22px 0 8px; border-top: 1px solid var(--forest-900); border-bottom: 1px solid var(--line); }
.recipient-link-scope h2 { margin: 0 0 12px; font-size: 25px; line-height: 1.12; }
.recipient-link-scope p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; }
.recipient-link-screen .action-dock .quiet-copy { margin-top: 18px; }
.source-email-preview-shell { width: min(100%, 600px); }
.source-email-preview-screen { min-height: calc(100svh - 102px); }
.source-email-preview-screen .intro > p { max-width: 100%; overflow-wrap: anywhere; font-size: 15px; }
.source-email-preview-boundary { margin-top: 28px; padding: 18px 0 16px; border-top: 1px solid var(--forest-900); border-bottom: 1px solid var(--line); }
.source-email-preview-boundary strong { color: var(--forest-900); font: 700 22px / 1.2 'Inria Serif', Georgia, serif; }
.source-email-preview-boundary p { margin: 9px 0 0; max-width: 65ch; font-size: 15px; line-height: 1.5; }
.source-email-preview-frame { display: block; width: 100%; min-height: 600px; margin-top: 24px; border: 0; background: var(--surface); }
.source-email-preview-back, .saved-week-email-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--forest-900); font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.source-email-preview-back:focus-visible, .saved-week-email-link:focus-visible { outline: 3px solid #68813e; outline-offset: 3px; }
.saved-week-email-link { margin-top: 12px; }
.completion-screen { padding-top: 0; }
.completion-screen > .origami-art { height: 195px; margin: 0 0 24px; }
.completion-screen .settings-links { border-top: 1px solid var(--line); }
.completion-screen .settings-links > * { border-bottom: 1px solid var(--line); width: 100%; padding: 13px 0; text-align: left; }
.reconnection-screen > .origami-art { height: 180px; }
.reconnection-screen .editorial-rule:first-of-type { background: #edf0e4; padding: 18px; border-radius: 12px; border: 0; }
.prototype-footer { padding-top: 18px; }
@media (max-width:359px) {
 .welcome-frame { min-height: 760px; }
 .r-example-label { font-size: 12px; }
 .r-footer { font-size: 12px; white-space: normal; left: 7%; width: 86%; }
 .r-nils,.r-astrid { font-size: 14px; white-space: normal; line-height: 1.1; }
 .r-nils br,.r-astrid br { display: none; }
 .r-example { width: 58%; }
 .r-nils,.r-astrid { width: 38%; }
 .r-support { font-size: 18px; letter-spacing: -.035em; }
 .r-support br { display:none; }
 .screen h1,.delivery-screen h1 { font-size: 41px; }
 .screen { padding-left: 22px; padding-right: 22px; }
 .intro > p { font-size: 17px; }
 .option strong { font-size: 22px; }
 .option small { font-size: 14px; }
 .optional-landscape { margin-left: -22px; margin-right: -22px; }
 .week-screen { grid-template-columns: minmax(0,1fr) 82px; }
 .week-screen h1 { font-size: 37px; }
 .week-screen > .origami-art { width: 82px; height: 108px; }
 .sync-steps { gap: 9px; }
 .sync-steps p { font-size: 18px; }
}

/* Connection management is a settings task, separate from the signup hero. */
.school-settings-screen .intro h1 { font-size: clamp(36px, 10vw, 46px); }
.school-settings-screen .intro > p { margin-top: 12px; }
.school-settings-screen .bankid-panel { margin-top: 24px; padding: 20px; }
.school-settings-screen .bankid-panel strong { font-size: 21px; line-height: 1.3; }
.school-settings-screen .bankid-panel p { font-size: 16px; }
.connection-records { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.connection-records h2 { margin: 0; font-size: 24px; }
.connection-records p, .connection-details p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.connection-records .secondary-button { margin-top: 16px; text-align: left; }
.connection-details { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 16px; }
.connection-details summary { min-height: 44px; padding: 12px 0; cursor: pointer; color: var(--forest-900); }
.connection-details .secondary-button { margin-top: 16px; }

.family-school { margin-top: 28px; padding: 24px 0; border-block: 1px solid var(--line); }
.family-school h2 { margin: 0 0 12px; font-size: 24px; }
.family-school > .text-button { min-height: 44px; font-size: 16px; }
.family-school-actions { display: grid; gap: 8px; margin-top: 12px; }
.family-school-actions .text-button { min-height: 44px; text-align: left; font-size: 15px; }
.family-school-actions .secondary-button { text-align: left; }
.account-home-screen .origami-art--compact { height: 96px; margin: 12px auto; }

/* Returning settings start with the task and its current state. Signup keeps
   the larger illustrated introductions. */
.screen.settings-screen h1 { font-size: clamp(34px, 9vw, 42px); line-height: 1.12; }
.settings-screen .calendar-heading { grid-template-columns: minmax(0, 1fr) auto; }
.settings-screen .family-school { margin-top: 24px; padding: 20px 0; }
.settings-screen .family-school + .editorial-rule { margin-top: 24px; padding-top: 0; border-top: 0; }
.settings-screen .account-identity { margin-top: 32px; padding: 16px 0 0; border-top: 1px solid var(--line); border-bottom: 0; }
.settings-screen .account-identity span { margin-bottom: 0; font-size: 14px; }
.settings-screen .account-identity .text-button { min-height: 44px; }
.settings-screen .connection-records { margin-top: 24px; padding-top: 12px; }
.settings-screen .connection-records .secondary-button { margin-top: 0; }