:root {
  --navy: #17324d;
  --navy-2: #244b6b;
  --blue: #2b6f92;
  --teal: #087c78;
  --brand-teal: #24b9ad;
  --teal-soft: #e5f4f2;
  --blue-soft: #eaf3f8;
  --gold: #d69b32;
  --gold-soft: #fff4dc;
  --ink: #1f2d3a;
  --muted: #5d6c79;
  --line: #d6e0e7;
  --surface: #ffffff;
  --canvas: #f3f6f8;
  --danger: #a33b3b;
  --shadow: 0 12px 30px rgba(23, 50, 77, .10);
  --radius: 14px;
}

* { box-sizing: border-box; }
.needs-grade .step-panel[data-panel="1"] > :not(.section-heading):not(.grade-picker) { display: none; }
.needs-grade .grade-picker::after { content: "Choose a grade to see its standards and begin your plan."; display: block; margin-top: 1rem; color: var(--muted); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: #fff; color: var(--navy); padding: .75rem 1rem; }
.skip-link:focus { left: .75rem; top: .75rem; }

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem clamp(1rem, 4vw, 3.5rem);
  color: #fff;
  background: linear-gradient(118deg, #17324d 0%, #244b6b 60%, #176d72 100%);
}
.brand { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.brand-mark {
  display: block; flex: 0 0 3.25rem; width: 3.25rem; height: 3.25rem; border-radius: 14px;
  object-fit: cover; border: 3px solid #fff; background: var(--navy);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.brand h1 { margin: 0; font-size: clamp(1.2rem, 2.5vw, 1.65rem); line-height: 1.2; }
.brand p { margin: .18rem 0 0; color: #d6e7ef; font-size: .92rem; }
.header-actions, .header-tool-buttons { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; }
.header-nav { display: flex; align-items: center; gap: .4rem; }
.header-link { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem .65rem; border: 0; border-radius: 8px; background: transparent; color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none; }
.header-link:hover, .header-link:focus-visible { background: rgba(255,255,255,.12); }
.mobile-tools-toggle, .mobile-draft-toggle { display: none; }
.privacy-badge { padding: .4rem .7rem; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; font-size: .84rem; white-space: nowrap; }
.privacy-strip { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .72rem clamp(1rem, 4vw, 3.5rem); background: var(--blue-soft); border-bottom: 1px solid #cbdde8; color: var(--navy); font-size: .93rem; }
.field-help { display: block; margin-top: .45rem; color: var(--muted); font-size: .875rem; line-height: 1.45; }
.export-status { margin: .9rem 0 0; padding: .75rem .9rem; border-radius: .75rem; font-weight: 700; line-height: 1.45; }
.export-status.pending { background: #fff4d8; color: #704b00; border: 1px solid #e8c76b; }
.export-status.complete { background: #e8f7f4; color: #0c625d; border: 1px solid #8dcac4; }
.quick-tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 1240px; margin: 1rem auto 0; padding: .8rem 1rem; background: #f4faf9; border: 1px solid #c5e4df; border-radius: 1rem; }
.quick-tools-copy { display: grid; gap: .15rem; min-width: 12rem; }
.quick-tools-copy strong { color: var(--navy); font-size: .98rem; }
.quick-tools-copy span { color: var(--muted); font-size: .84rem; }
.quick-tool-buttons { display: grid; grid-template-columns: repeat(5, minmax(9rem, 1fr)); gap: .55rem; flex: 1; }
.quick-tool { display: grid; gap: .16rem; text-align: left; padding: .65rem .75rem; border: 1px solid #b9d9d5; border-radius: .7rem; background: #fff; color: var(--navy); cursor: pointer; }
.quick-tool:hover, .quick-tool:focus-visible { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20, 139, 133, .14); }
.quick-tool span { font-weight: 800; font-size: .88rem; }
.quick-tool small { color: var(--muted); line-height: 1.25; font-size: .76rem; }
.strip-button { flex: 0 0 auto; border: 0; padding: .25rem .1rem; color: var(--navy); background: transparent; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.draft-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem clamp(1rem, 3vw, 2rem); border-bottom: 1px solid var(--line); background: #fff; }
.draft-status { display: grid; min-width: 220px; }
.draft-status strong { color: var(--navy); font-size: .86rem; }
.draft-status span { color: var(--muted); font-size: .82rem; }
.draft-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.draft-actions .button { padding: .46rem .7rem; font-size: .86rem; }
.draft-bar.not-ready .draft-actions { display: none; }
.draft-bar.not-ready .draft-status span { color: var(--muted); }

.step-nav {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem;
  max-width: 1280px; margin: 0 auto; padding: 1rem clamp(1rem, 3vw, 2rem) .2rem;
}
.step-link {
  display: flex; align-items: center; gap: .6rem; border: 0; border-bottom: 3px solid var(--line);
  padding: .7rem .3rem; color: var(--muted); background: transparent; text-align: left; font-weight: 650;
}
.step-link span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #e3e9ed; color: var(--navy); }
.step-link.active { color: var(--navy); border-color: var(--brand-teal); }
.step-link.active span, .step-link.complete span { color: var(--navy); background: var(--brand-teal); }

.workspace {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.25rem;
  max-width: 1280px; margin: 0 auto; padding: 1.15rem clamp(1rem, 3vw, 2rem) 4rem;
}
.builder-column, .summary-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.builder-column { overflow: hidden; }
.step-panel { display: none; padding: clamp(1.25rem, 3vw, 2rem); }
.step-panel.active { display: block; }
.summary-card { padding: 1.25rem; }
.completion-summary { margin-top: 1.5rem; box-shadow: none; }
.completion-summary dl { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; }
.completion-summary dl > div { border-top: 1px solid var(--line); }
.completion-summary .summary-actions { grid-template-columns: 1fr 1fr; align-items: center; }
.completion-summary .summary-actions .button-chart { color: var(--blue); border-color: #9fc2d5; background: #fff; }
.completion-summary .summary-actions .text-button { grid-column: 1 / -1; }
.summary-top, .output-heading, .subsection-title, .dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.summary-card h2 { margin: .25rem 0; color: var(--navy); font-size: 1.25rem; }
.summary-skill { margin: .2rem 0 1rem; color: var(--muted); }
.summary-card dl { margin: 0; }
.summary-card dl > div { padding: .85rem 0; border-top: 1px solid var(--line); }
.summary-card dt { margin-bottom: .28rem; color: var(--navy); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.summary-card dd { margin: 0; font-size: .92rem; line-height: 1.48; }
.summary-actions { display: grid; gap: .6rem; margin-top: 1rem; }
.fine-print { margin: 1rem 0 0; color: var(--muted); font-size: .8rem; }
.grade-chip, .optional-tag, .counter { display: inline-flex; align-items: center; padding: .3rem .58rem; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: .8rem; font-weight: 750; }

.section-heading { display: grid; grid-template-columns: minmax(260px, 1.15fr) minmax(260px, .85fr); gap: 2rem; align-items: end; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.section-heading h2, .subsection h3, .dialog-header h2 { margin: .1rem 0 0; color: var(--navy); line-height: 1.25; }
.section-heading h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.section-heading p { margin: 0; color: var(--muted); }
.eyebrow { color: var(--teal); font-size: .76rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }

fieldset { border: 0; margin: 0; padding: 0; }
.grade-picker { margin: 1.3rem 0 1rem; }
.grade-picker legend, .field-label, label { color: var(--navy); font-weight: 700; }
.grade-buttons { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }
.grade-button { min-width: 2.9rem; padding: .58rem .7rem; border: 1px solid var(--line); border-radius: 9px; color: var(--navy); background: #fff; font-weight: 750; }
.grade-button:hover { border-color: var(--teal); background: var(--teal-soft); }
.grade-button.active { color: var(--navy); border-color: var(--brand-teal); background: var(--brand-teal); }
.select, .text-input, textarea, input[type="search"] {
  width: 100%; border: 1px solid #bccbd5; border-radius: 9px; padding: .72rem .8rem; color: var(--ink); background: #fff;
}
.select:focus, textarea:focus, input:focus, button:focus-visible { outline: 3px solid rgba(43,111,146,.24); outline-offset: 2px; border-color: var(--blue); }
textarea { resize: vertical; min-height: 88px; }
.field-label { display: block; margin-bottom: .45rem; }
label .select, label textarea { display: block; margin-top: .4rem; font-weight: 400; }
.timeframe-field { display: block; margin-top: 1.2rem; }
.timeframe-field .text-input { display: block; margin-top: .4rem; font-weight: 400; }
.timeframe-field small { display: block; margin-top: .35rem; color: var(--muted); font-size: .82rem; font-weight: 400; }

.standard-card { margin-top: 1rem; padding: 1.15rem; border: 1px solid #bfd7e4; border-left: 5px solid var(--blue); border-radius: 10px; background: var(--blue-soft); }
.standard-card h3 { margin: 0 0 .35rem; color: var(--navy); font-size: 1.12rem; }
.standard-card p { margin: .35rem 0; }
.standard-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .85rem; }
.mini-info { padding: .75rem; border-radius: 8px; background: rgba(255,255,255,.75); }
.mini-info strong { display: block; color: var(--navy); font-size: .82rem; }
.mini-info span { color: var(--muted); font-size: .9rem; }

.subsection { margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.subsection-title { margin-bottom: .85rem; }
.subsection-help { max-width: 760px; margin: .3rem 0 0; color: var(--muted); font-size: .9rem; }
.form-grid { display: grid; gap: 1rem; margin-top: 1rem; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guidance-callout, .selected-plan, .guardrail { margin-top: 1rem; padding: .85rem 1rem; border-radius: 9px; background: var(--teal-soft); border-left: 4px solid var(--teal); }
.muted { color: var(--muted); }

.goal-output { margin-top: 1.25rem; padding: 1.2rem; border-radius: 12px; color: #fff; background: linear-gradient(125deg, var(--navy), var(--navy-2)); }
.goal-output h3 { margin: 0; }
.goal-output p { margin: .8rem 0 0; font-size: 1.05rem; }
.goal-output .text-button { color: #bfeae8; }
.objective-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; counter-reset: objectives; }
.objective-item { position: relative; padding: .9rem 1rem .9rem 3.3rem; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfd; }
.objective-item::before { counter-increment: objectives; content: counter(objectives); position: absolute; left: .75rem; top: .78rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 7px; color: #fff; background: var(--blue); font-size: .78rem; font-weight: 800; }
.benchmark-label { display: block; margin-bottom: .35rem; color: var(--navy); font-size: .88rem; }
.objective-input { min-height: 112px; margin: 0; background: #fff; }
.objective-note { margin-top: .55rem; color: var(--muted); font-size: .86rem; }

.instruction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.info-card, .instruction-card { padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfd; }
.instruction-card h3 { margin: .25rem 0 .45rem; color: var(--navy); font-size: 1.03rem; }
.instruction-card p, .info-card p { margin: 0; }
.scaffold-choices { display: grid; gap: .75rem; }
.scaffold-choice { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.scaffold-choice label { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; background: #fff; }
.scaffold-choice label > span { display: grid; gap: .3rem; min-width: 0; }
.scaffold-choice input { width: 1.1rem; height: 1.1rem; margin-top: .16rem; accent-color: var(--teal); }
.scaffold-choice details { padding: 0 1rem .85rem 2.85rem; color: var(--muted); font-size: .91rem; }
.scaffold-choice summary { color: var(--blue); cursor: pointer; font-weight: 700; }
.scaffold-choice.selected { border-color: var(--teal); background: var(--teal-soft); }
.support-type-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: .8rem 0 1rem; }
.support-type-legend div { display: grid; gap: .12rem; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; }
.support-type-legend strong { color: var(--navy); font-size: .82rem; }
.support-type-legend span { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.scaffold-meta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.scaffold-type, .grade-fit, .inline-support-type { display: inline-flex; width: fit-content; padding: .18rem .48rem; border-radius: 999px; font-size: .68rem; font-weight: 800; line-height: 1.25; }
.scaffold-type { color: #17445b; background: #dceff7; }
.scaffold-type.thinking { color: #4c3c08; background: #f5e8b8; }
.scaffold-type.access { color: #155144; background: #d9f1e9; }
.scaffold-type.management { color: #5b376f; background: #eee1f5; }
.grade-fit { color: #475664; background: #edf1f4; }
.current-fit { display: block; color: var(--blue); font-weight: 700; }
.inline-support-type { margin-left: .2rem; color: #475664; background: #edf1f4; vertical-align: middle; }
.resource-item summary .scaffold-type { margin-left: .45rem; vertical-align: middle; }
.scaffold-choice .visual-example { margin: 0 .85rem .85rem 2.85rem; padding: 0; border: 1px solid #bfd7e4; border-radius: 9px; background: #f8fbfd; overflow: hidden; }
.scaffold-choice .visual-example > summary { padding: .72rem .8rem; color: var(--navy); background: var(--blue-soft); }
.visual-example-body { padding: .85rem; }
.visual-sample-badge, .example-available { display: inline-flex; align-items: center; margin-left: .45rem; padding: .16rem .42rem; border-radius: 999px; color: #fff; background: var(--blue); font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.template-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.template-action { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; padding: .55rem .7rem; border: 1px solid var(--teal); border-radius: 7px; color: var(--teal); background: #fff; cursor: pointer; font-weight: 800; }
.template-action:first-child { color: var(--navy); background: var(--brand-teal); }
.example-canvas { padding: .85rem; border: 1px solid #cbd7df; border-radius: 9px; color: var(--ink); background: #fff; box-shadow: 0 4px 14px rgba(23,50,77,.07); }
.example-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--teal); }
.example-title span { color: var(--navy); font-size: 1rem; font-weight: 850; }
.example-title small { color: var(--muted); font-size: .76rem; }
.example-question, .example-caption { margin: .7rem 0; color: var(--muted); }
.example-note { margin: .55rem 0 0; color: var(--muted); font-size: .78rem; }
.detail-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.example-card { min-height: 92px; padding: .65rem; border: 2px solid #bfd7e4; border-radius: 8px; background: #f8fbfd; }
.example-card span { display: block; margin-bottom: .38rem; color: var(--blue); font-size: .66rem; font-weight: 850; letter-spacing: .06em; }
.example-card.extra { border-style: dashed; color: var(--muted); background: #fafafa; }
.example-card.extra span { color: var(--muted); }
.example-finish { margin-top: .65rem; padding: .6rem .7rem; border-left: 4px solid var(--teal); background: var(--teal-soft); }
.sound-example { padding-top: .7rem; text-align: center; }
.sound-boxes { display: flex; justify-content: center; gap: .55rem; margin: .7rem 0; }
.sound-boxes > div { display: grid; place-items: center; width: 76px; min-height: 84px; padding: .35rem; border: 2px solid var(--navy); border-radius: 7px; background: #fff; }
.sound-boxes i { width: 18px; height: 18px; margin-bottom: .25rem; border-radius: 50%; background: var(--gold); }
.sound-boxes b { color: var(--navy); font-size: 1.15rem; }
.sound-boxes small { color: var(--muted); }
.sound-example p { margin: .45rem 0 0; color: var(--muted); }
.matrix-example { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .55rem; margin-top: .75rem; }
.matrix-column { display: grid; align-content: start; gap: .35rem; padding: .55rem; border: 1px solid #bfd7e4; border-radius: 7px; background: var(--blue-soft); text-align: center; }
.matrix-column strong { color: var(--navy); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.matrix-column span { padding: .3rem; border-radius: 5px; background: #fff; font-weight: 750; }
.matrix-column.base { align-content: center; border-color: var(--teal); background: var(--teal-soft); }
.matrix-column.base span { color: var(--teal); font-size: 1.05rem; }
.matrix-column .blank-token { color: var(--muted); font-weight: 500; }
.word-results { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: .65rem; }
.word-results span { padding: .28rem .5rem; border-radius: 999px; color: #fff; background: var(--teal); font-weight: 750; }
.aee-grid { display: grid; gap: .55rem; }
.aee-grid > div { display: grid; grid-template-columns: 150px 1fr; gap: .6rem; padding: .6rem .7rem; border: 1px solid #cbd7df; border-radius: 7px; }
.aee-grid strong { color: var(--navy); }
.aee-grid > div:nth-child(1) { border-left: 5px solid var(--blue); }
.aee-grid > div:nth-child(2) { border-left: 5px solid var(--teal); }
.aee-grid > div:nth-child(3) { border-left: 5px solid var(--gold); }
.frame-levels { display: grid; gap: .55rem; margin-top: .7rem; }
.frame-levels > div { display: grid; grid-template-columns: 92px 1fr; gap: .65rem; align-items: start; padding: .6rem .7rem; border-radius: 7px; background: var(--blue-soft); }
.frame-levels > div:nth-child(2) { background: var(--teal-soft); }
.frame-levels > div:nth-child(3) { border: 1px dashed #afbdc6; background: #fff; }
.frame-levels strong { color: var(--navy); }
.main-idea-example { display: grid; gap: .65rem; margin-top: .7rem; }
.main-idea-box { display: grid; gap: .2rem; padding: .65rem .75rem; border: 2px solid var(--teal); border-radius: 8px; background: var(--teal-soft); text-align: center; }
.main-idea-box strong, .detail-branches strong { color: var(--navy); }
.detail-branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.detail-branches > div { display: grid; gap: .25rem; padding: .6rem; border: 1px solid #bfd7e4; border-radius: 7px; background: var(--blue-soft); }
.cause-effect-example { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .4rem; align-items: center; margin: .7rem 0; }
.cause-effect-example > div { display: grid; gap: .25rem; min-height: 105px; align-content: center; padding: .6rem; border: 1px solid #bfd7e4; border-radius: 7px; background: var(--blue-soft); }
.cause-effect-example > div:last-child { border-color: #b8d9d5; background: var(--teal-soft); }
.cause-effect-example b { color: var(--navy); }
.cause-effect-example i { color: var(--teal); font-size: 1.35rem; font-style: normal; font-weight: 850; }
.evidence-bank { display: grid; gap: .5rem; }
.evidence-choice { display: grid; gap: .2rem; padding: .6rem .7rem; border: 1px solid #bfd7e4; border-radius: 7px; background: #f8fbfd; }
.evidence-choice b { color: var(--blue); font-size: .78rem; }
.evidence-choice.selected { border: 2px solid var(--teal); background: var(--teal-soft); }
.evidence-choice.selected b { color: var(--teal); }
.evidence-choice.distractor { border-style: dashed; color: var(--muted); background: #fafafa; }
.evidence-choice.distractor b { color: var(--muted); }
.spelling-card { display: grid; grid-template-columns: 92px 1fr; gap: .7rem; align-items: stretch; margin: .7rem 0; }
.sound-symbol { display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--navy); font-size: 1.65rem; font-weight: 850; }
.spelling-patterns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.spelling-patterns > span { display: grid; place-items: center; padding: .55rem; border: 1px solid #bfd7e4; border-radius: 7px; color: var(--navy); background: var(--blue-soft); font-size: 1.05rem; font-weight: 850; }
.spelling-patterns small { color: var(--muted); font-size: .72rem; font-weight: 500; }
.story-map-example { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .7rem; }
.story-map-example > div { display: grid; gap: .22rem; padding: .6rem .7rem; border: 1px solid #bfd7e4; border-radius: 7px; background: var(--blue-soft); }
.story-map-example > div:nth-child(3), .story-map-example > div:nth-child(4) { background: var(--teal-soft); }
.story-map-example b { color: var(--navy); }
.chunked-text-example { display: grid; gap: .55rem; margin-top: .7rem; }
.chunked-text-example > div { padding: .6rem .7rem; border-left: 5px solid var(--blue); border-radius: 0 7px 7px 0; background: var(--blue-soft); }
.chunked-text-example > div:nth-child(2) { border-left-color: var(--teal); background: var(--teal-soft); }
.chunked-text-example > div:nth-child(3) { border-left-color: var(--gold); background: #fffbef; }
.chunked-text-example b { color: var(--navy); }
.chunked-text-example p { margin: .25rem 0 .4rem; }
.chunked-text-example span { color: var(--muted); font-size: .76rem; font-weight: 800; letter-spacing: .025em; }
.reference-sheet-example { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .7rem; }
.reference-sheet-example > div { display: grid; gap: .3rem; padding: .7rem; border: 1px solid #bfd7e4; border-radius: 7px; background: var(--blue-soft); }
.reference-sheet-example > div:nth-child(2) { border-color: #b8d9d5; background: var(--teal-soft); }
.reference-sheet-example > div:nth-child(3) { border-color: #dac99c; background: #fffbef; }
.reference-sheet-example b { color: var(--navy); }
.syllable-example { display: grid; place-items: center; gap: .65rem; margin: .7rem 0; }
.whole-word { color: var(--muted); font-size: .85rem; text-decoration: line-through; }
.marked-word { display: flex; align-items: center; gap: .5rem; }
.marked-word span { display: grid; place-items: center; min-width: 72px; padding: .48rem .55rem; border: 2px solid var(--navy); border-radius: 7px; color: var(--navy); background: #fff; font-size: 1.15rem; font-weight: 850; }
.marked-word small { color: var(--muted); font-size: .64rem; font-weight: 600; }
.marked-word i { color: var(--teal); font-size: 1.25rem; font-style: normal; font-weight: 850; }
.blend-word { padding: .4rem .7rem; border-radius: 999px; background: var(--teal-soft); }
.rehearsal-example { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: .35rem; align-items: center; margin-top: .7rem; }
.rehearsal-example > div { display: grid; gap: .22rem; min-height: 106px; align-content: center; padding: .55rem; border: 1px solid #bfd7e4; border-radius: 7px; background: var(--blue-soft); }
.rehearsal-example > div:nth-of-type(3), .rehearsal-example > div:nth-of-type(4) { border-color: #b8d9d5; background: var(--teal-soft); }
.rehearsal-example b { color: var(--navy); }
.rehearsal-example > i { color: var(--teal); font-style: normal; font-weight: 850; }
.question-cue-example { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: .7rem 0; }
.question-cue-example > div { display: grid; gap: .3rem; padding: .7rem; border: 1px solid #bfd7e4; border-radius: 7px; background: var(--blue-soft); }
.question-cue-example > div:last-child { border-color: #b8d9d5; background: var(--teal-soft); }
.question-cue-example b { color: var(--navy); }
.question-cue-example em { color: var(--muted); font-size: .78rem; }
.sample-board, .sample-paper, .source-card, .sample-text-page, .visual-field, .tts-example, .context-clue { margin-top: .7rem; padding: .7rem; border: 1px solid #bfd7e4; border-radius: 8px; background: #f8fbfd; }
.sample-board p, .sample-paper p, .sample-text-page p, .context-clue p { margin: .35rem 0; }
.sample-paper { position: relative; padding-left: 1rem; background: repeating-linear-gradient(#fff, #fff 31px, #d8e2e8 32px); }
.start-dot { display: inline-flex; padding: .2rem .45rem; border-radius: 999px; color: #fff; background: var(--teal); font-size: .68rem; font-weight: 850; }
.sample-writing-line { height: 24px; margin-bottom: .4rem; border-bottom: 2px solid #90a4b1; }
.sample-writing-line.active-line { border-bottom-color: var(--teal); }
.muted-line { color: var(--muted); }
.sample-key { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.sample-key span { padding: .2rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.key-blue, .mark-blue { background: #dcecf6; }
.key-teal, .mark-teal { background: #dcefeb; }
.key-gold, .mark-gold { background: #fff0bf; }
.sample-text-page { position: relative; padding-left: 2.2rem; }
.evidence-flag { position: absolute; left: -.35rem; top: .75rem; padding: .22rem .48rem; border-radius: 0 6px 6px 0; color: #fff; background: var(--blue); font-size: .7rem; font-weight: 850; }
.evidence-flag.second { top: 4.7rem; background: var(--teal); }
.sample-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: .35rem; align-items: center; margin: .7rem 0; }
.sample-flow > div, .tool-choice > div { display: grid; gap: .22rem; min-height: 94px; align-content: center; padding: .55rem; border: 1px solid #bfd7e4; border-radius: 7px; background: var(--blue-soft); }
.sample-flow > i, .tool-choice > i { color: var(--teal); font-style: normal; font-weight: 850; }
.sample-flow b, .tool-choice b { color: var(--navy); }
.morpheme-flow { grid-template-columns: 1fr auto 1.2fr auto 1fr; }
.speech-flow, .inference-flow { grid-template-columns: 1fr auto 1fr auto 1fr; }
.sample-result { margin-top: .6rem; padding: .55rem .7rem; border-left: 4px solid var(--teal); background: var(--teal-soft); text-align: center; }
.mouth-cue { display: grid; grid-template-columns: 90px 1fr; gap: .8rem; align-items: stretch; margin-top: .7rem; }
.mouth-cue > div:last-child { display: grid; grid-template-columns: 58px 1fr; gap: .35rem .55rem; padding: .65rem; border-radius: 7px; background: var(--blue-soft); }
.mouth-cue b { color: var(--navy); }
.near-point-example, .comparison-example, .glossary-example { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .55rem; margin-top: .7rem; }
.near-point-example > div, .comparison-example > div, .glossary-example > div { display: grid; gap: .3rem; padding: .7rem; border: 1px solid #bfd7e4; border-radius: 7px; background: var(--blue-soft); }
.near-point-example > div:last-child, .comparison-example > div:last-child { border-color: #b8d9d5; background: var(--teal-soft); }
.near-point-example b, .comparison-example b, .glossary-example b { color: var(--navy); }
.copy-line { padding-bottom: .3rem; border-bottom: 2px solid #90a4b1; }
.sample-grid { display: grid; gap: .5rem; margin-top: .7rem; }
.sample-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.sample-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.sample-card { display: grid; gap: .25rem; min-height: 82px; align-content: center; padding: .65rem; border: 1px dashed #9fb1bd; border-radius: 7px; background: #fff; }
.sample-card.filled, .sample-grid.three .sample-card { border-style: solid; border-color: #bfd7e4; background: var(--blue-soft); }
.sample-card b { color: var(--navy); }
.mapping-grid { display: grid; gap: .35rem; margin-top: .7rem; }
.mapping-grid > div { display: grid; grid-template-columns: 80px repeat(3, 1fr); gap: .35rem; align-items: center; }
.mapping-grid b, .mapping-grid span { display: grid; place-items: center; min-height: 46px; border: 2px solid var(--navy); border-radius: 6px; background: #fff; }
.mapping-grid span { border-color: var(--teal); color: var(--teal); font-size: 1.05rem; font-weight: 850; }
.semantic-map { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; margin-top: .7rem; }
.semantic-map > div { display: grid; gap: .2rem; padding: .6rem; border: 1px solid #bfd7e4; border-radius: 7px; background: var(--blue-soft); }
.semantic-map .center-word { grid-column: 1 / -1; place-items: center; border: 2px solid var(--teal); color: var(--teal); background: var(--teal-soft); font-size: 1.1rem; font-weight: 850; }
.semantic-map b { color: var(--navy); }
.source-card { display: grid; gap: .45rem; }
.source-card > b { padding-bottom: .35rem; border-bottom: 2px solid var(--teal); color: var(--navy); }
.prompt-ladder { display: grid; gap: .45rem; margin-top: .7rem; }
.prompt-ladder > div { display: grid; grid-template-columns: 110px 1fr; gap: .5rem; padding: .55rem .65rem; border-radius: 7px; background: var(--blue-soft); }
.prompt-ladder > div:nth-child(n+3) { background: var(--teal-soft); }
.prompt-ladder b { color: var(--navy); }
.transition-bank { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; margin-top: .7rem; }
.transition-bank > div { display: flex; flex-wrap: wrap; gap: .35rem; padding: .6rem; border: 1px solid #bfd7e4; border-radius: 7px; background: var(--blue-soft); }
.transition-bank b { width: 100%; color: var(--navy); }
.transition-bank span { padding: .2rem .4rem; border-radius: 999px; background: #fff; }
.comparison-example small, .glossary-example em { color: var(--muted); }
.visual-field { display: grid; gap: .4rem; }
.visual-field > div { padding: .55rem; border-radius: 6px; }
.dimmed-item { color: #a4afb6; background: #eef1f3; filter: blur(.6px); }
.focus-item { border: 2px solid var(--teal); color: var(--navy); background: var(--teal-soft); font-weight: 850; }
.visual-field > span { color: var(--muted); font-size: .78rem; }
.tts-example { display: grid; grid-template-columns: 52px 1fr; gap: .55rem; align-items: center; }
.tts-example button { width: 48px; height: 48px; border: 0; border-radius: 50%; color: #fff; background: var(--teal); font-size: 1rem; }
.tts-example > div { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; }
.tts-example > div span { padding: .2rem .45rem; border-radius: 999px; background: var(--blue-soft); font-size: .72rem; }
.curated-sources { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; margin-top: .7rem; }
.curated-sources > div { display: grid; gap: .2rem; padding: .65rem; border: 1px solid #bfd7e4; border-radius: 7px; background: var(--blue-soft); }
.curated-sources .selected { border: 2px solid var(--teal); background: var(--teal-soft); }
.curated-sources b { color: var(--navy); }
.curated-sources small { color: var(--muted); }
.single-check { display: flex; gap: .7rem; align-items: center; margin-top: .7rem; padding: .75rem; border: 2px solid var(--teal); border-radius: 8px; background: var(--teal-soft); }
.single-check p { margin: .2rem 0 0; }
.checked-box { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 5px; color: #fff; background: var(--teal); font-weight: 850; }
.muted-checks { display: flex; gap: .7rem; margin-top: .45rem; color: #a4afb6; font-size: .78rem; }
.sentence-strips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.sentence-strips span { padding: .5rem .65rem; border: 1px solid #bfd7e4; border-radius: 7px; background: var(--blue-soft); box-shadow: 0 2px 4px rgba(23,50,77,.08); }
.feature-hunt, .context-clue { display: grid; gap: .45rem; margin-top: .7rem; }
.feature-hunt > div, .context-clue > div { display: grid; grid-template-columns: auto 90px 1fr; gap: .5rem; align-items: center; padding: .55rem; border-radius: 7px; background: var(--blue-soft); }
.feature-hunt b { color: var(--navy); }
.feature-hunt small { color: var(--muted); }
.comparison-table { display: grid; gap: 1px; margin-top: .7rem; overflow: hidden; border: 1px solid #bfd7e4; border-radius: 7px; background: #bfd7e4; }
.comparison-table > div { display: grid; grid-template-columns: 100px 1fr 1fr; gap: 1px; }
.comparison-table span, .comparison-table b { padding: .5rem; background: #fff; }
.comparison-table > div:first-child b { color: #fff; background: var(--navy); }
.context-clue > div { grid-template-columns: auto 1fr; }
.genre-organizer { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; margin-top: .7rem; }
.genre-organizer > div { display: grid; gap: .2rem; padding: .6rem; border: 1px solid #bfd7e4; border-radius: 7px; background: var(--blue-soft); }
.genre-organizer .topic-box { grid-column: 1 / -1; border: 2px solid var(--teal); background: var(--teal-soft); text-align: center; }
.genre-organizer b { color: var(--navy); }
.genre-organizer small { color: var(--muted); }
.figurative-chart { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; margin-top: .7rem; }
.figurative-chart > div { display: grid; gap: .25rem; padding: .6rem; border: 1px solid #bfd7e4; border-radius: 7px; background: var(--blue-soft); }
.figurative-chart b { color: var(--navy); }
.tool-choice { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .4rem; align-items: center; margin-top: .7rem; }
.syntax-example { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; font-size: 1rem; }
.syntax-example span { padding: .5rem .6rem; border-radius: 7px; font-weight: 750; }
.syntax-who { background: #dcecf6; }
.syntax-action { background: #dcefeb; }
.syntax-detail { background: #fff0bf; }
.deadline-example { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .45rem; margin-top: .7rem; }
.deadline-example > div { display: grid; gap: .25rem; padding: .55rem; border: 1px solid #cbd7df; border-radius: 7px; background: #fafafa; }
.deadline-example .done { color: var(--muted); background: #eef1f3; }
.deadline-example .current { border: 2px solid var(--teal); background: var(--teal-soft); }
.deadline-example b { color: var(--navy); }
.blending-example { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; margin-top: .7rem; }
.blending-example > div { display: grid; gap: .3rem; place-items: center; padding: .7rem; border: 1px solid #bfd7e4; border-radius: 7px; background: var(--blue-soft); }
.blending-example > div:last-child { border: 2px solid var(--teal); background: var(--teal-soft); font-size: 1.1rem; }
.blending-example b { color: var(--navy); }
.library-example { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.library-example h4 { margin: 0 0 .6rem; color: var(--navy); }
.language-card { margin-top: 1.2rem; padding: 1rem; border: 1px solid #dac99c; border-radius: 10px; background: #fffbef; }
.language-card h3 { margin: .2rem 0 .45rem; color: #624a1f; }
.language-card p { margin: 0; }

.monitor-card { margin-top: 1.25rem; border: 1px solid #b8d9d5; border-radius: 12px; overflow: hidden; }
.monitor-card-header { padding: 1rem 1.15rem; color: #fff; background: var(--teal); }
.monitor-card-header h3 { margin: .1rem 0; }
.monitor-card-body { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0; }
.monitor-detail { padding: 1rem; border-top: 1px solid var(--line); }
.monitor-detail:nth-child(odd) { border-right: 1px solid var(--line); }
.monitor-detail strong { display: block; color: var(--navy); font-size: .82rem; }
.monitor-detail p { margin: .3rem 0 0; }
.monitoring-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .86rem; }
.data-table th { padding: .65rem; color: #fff; background: var(--navy-2); text-align: left; }
.data-table td { height: 48px; padding: .5rem; border: 1px solid var(--line); }
.chart-print-choice { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .7rem; margin-top: .85rem; padding: .85rem 1rem; border: 1px solid #b8d9d5; border-radius: 9px; background: var(--teal-soft); cursor: pointer; }
.chart-print-choice input { width: 1.2rem; height: 1.2rem; margin-top: .12rem; accent-color: var(--teal); }
.chart-print-choice span, .chart-print-choice small { display: block; }
.chart-print-choice strong { color: var(--navy); }
.chart-print-choice small { margin-top: .15rem; color: var(--muted); }
.chart-print-choice em { padding: .25rem .5rem; border-radius: 999px; color: var(--muted); background: #fff; font-size: .78rem; font-style: normal; font-weight: 750; white-space: nowrap; }
.chart-print-choice.included { border-color: var(--teal); }
.chart-print-choice.included em { color: #fff; background: var(--teal); }

.panel-actions { display: flex; justify-content: space-between; padding: 1rem clamp(1.25rem, 3vw, 2rem); border-top: 1px solid var(--line); background: #fbfcfd; }
.button { border: 1px solid transparent; border-radius: 9px; padding: .65rem .95rem; font-weight: 750; }
.button-primary { color: var(--navy); background: var(--brand-teal); }
.button-primary:hover { background: #1eaa9f; }
.button-secondary { color: var(--navy); border-color: #b9cad5; background: #fff; }
.button:disabled, .text-button:disabled { cursor: not-allowed; opacity: .48; }
.app-header .button-secondary { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
.text-button { border: 0; padding: .25rem; color: var(--blue); background: transparent; font-weight: 750; }
.icon-button { border: 0; padding: 0; width: 2.2rem; height: 2.2rem; color: var(--navy); background: transparent; font-size: 1.8rem; line-height: 1; }

dialog { width: min(1000px, calc(100% - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: var(--radius); color: var(--ink); box-shadow: 0 25px 70px rgba(12,36,55,.3); }
dialog::backdrop { background: rgba(13, 34, 50, .66); }
.dialog-header { position: sticky; top: 0; z-index: 3; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); background: #fff; }
.resource-dialog-top { position: sticky; top: 0; z-index: 4; background: #fff; box-shadow: 0 1px 0 var(--line); }
.resource-dialog-top .dialog-header { position: static; }
.resource-tabs { display: flex; flex-wrap: wrap; gap: .5rem; padding: .85rem 1.25rem 0; background: #fff; }
.template-library { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: .8rem; }
.template-library-card { padding: 1rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.template-library-card h3 { margin: 0 0 .45rem; color: var(--navy); font-size: 1.05rem; }
.template-library-card p { margin: 0; color: var(--muted); }
.resource-tab { padding: .65rem .85rem; border: 0; border-bottom: 3px solid transparent; color: var(--muted); background: transparent; font-weight: 750; }
.resource-tab.active { color: var(--navy); border-color: var(--teal); }
.resource-panel { display: none; padding: 1rem 1.25rem 1.5rem; }
.resource-panel.active { display: block; }
.search-label { display: block; margin-bottom: 1rem; }
.search-label input { display: block; margin-top: .4rem; }
.resource-list { display: grid; gap: .7rem; }
.resource-item { border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.resource-item > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; color: var(--navy); cursor: pointer; font-weight: 800; }
.resource-item .example-available { margin-left: auto; white-space: nowrap; }
.resource-item-body { padding: 0 1rem 1rem; }
.resource-item-body p { margin: .45rem 0; }
.resource-item-body strong { color: var(--navy); }
.resource-item .visual-example { margin-top: .9rem; border: 1px solid #bfd7e4; border-radius: 9px; overflow: hidden; background: #f8fbfd; }
.resource-item .visual-example > summary { padding: .72rem .8rem; color: var(--navy); background: var(--blue-soft); cursor: pointer; font-weight: 800; }
.resource-intro { margin-top: 0; color: var(--muted); }
.progression-grid { display: grid; grid-template-columns: repeat(7, minmax(180px,1fr)); gap: .55rem; overflow-x: auto; }
.progression-grade { padding: .7rem; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; font-size: .86rem; }
.progression-grade strong { display: block; margin-bottom: .35rem; color: var(--teal); }
.passage-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 240px)); gap: .75rem; margin: 1rem 0; }
.passage-filters label { color: var(--navy); font-size: .86rem; font-weight: 800; }
.passage-filters .select { margin-top: .35rem; }
.passage-library { display: grid; gap: .8rem; }
.passage-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.passage-card > summary { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; padding: .9rem 1rem; color: var(--navy); cursor: pointer; }
.passage-card > summary strong { font-size: 1rem; }
.passage-card > summary small { grid-column: 1; color: var(--muted); }
.passage-grade { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: .22rem .5rem; border-radius: 999px; color: #155144; background: #d9f1e9; font-size: .74rem; font-weight: 850; }
.passage-card-body { padding: 0 1rem 1rem; }
.passage-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.passage-meta span { padding: .2rem .5rem; border-radius: 999px; color: #475664; background: #edf1f4; font-size: .72rem; font-weight: 750; }
.passage-text { padding: 1rem; border: 1px solid #d8e1e7; border-radius: 8px; color: var(--ink); background: #fbfcfd; font-size: 1rem; line-height: 1.65; white-space: pre-line; }
.passage-task { margin-top: .7rem; padding: .75rem; border-left: 4px solid var(--teal); background: var(--teal-soft); }
.passage-task p { margin: .25rem 0; }
.passage-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }

.document-dialog { width: min(900px, calc(100% - 2rem)); }
.passage-guide { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.passage-guide h3 { margin: .2rem 0 .7rem; color: var(--navy); }
.passage-guide p { margin: .55rem 0; }
.passage-guide details { margin: .75rem 0; }
.passage-guide summary { color: var(--teal); font-weight: 750; cursor: pointer; }
.passage-guide li { margin: .35rem 0; }
.passage-guide input { width: 100%; }
.passage-guide .benchmark-tip { margin-bottom: 0; }
.document-help { margin: 1rem 1.25rem .5rem; color: var(--muted); }
.document-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; padding: .5rem 1.25rem 1rem; }
.document-toolbar a.button { text-decoration: none; }
.google-docs-handoff { margin: 0 1.25rem 1rem; padding: .7rem .85rem; border: 1px solid #b8d9d5; border-radius: 8px; color: var(--navy); background: var(--teal-soft); }
.print-option { display: flex; align-items: flex-start; gap: .55rem; margin-left: auto; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--blue-soft); }
.print-option input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--teal); }
.print-option span, .print-option small { display: block; }
.print-option strong { color: var(--navy); font-size: .88rem; }
.print-option small { margin-top: .05rem; color: var(--muted); font-size: .76rem; }
.document-preview { width: 8.5in; max-width: calc(100% - 2rem); min-height: 11in; margin: 0 auto 1.5rem; padding: .48in .55in; border: 1px solid #ccd5dc; background: #fff; box-shadow: 0 8px 28px rgba(23,50,77,.12); font-family: Arial, sans-serif; font-size: 10pt; line-height: 1.25; }
.document-preview h1 { margin: 0 0 .12in; color: var(--navy); font-size: 18pt; }
.document-preview h2 { margin: .12in 0 .05in; padding-bottom: .025in; border-bottom: 1px solid #9fb3c0; color: var(--navy); font-size: 11pt; }
.document-preview h3 { margin: .06in 0 .02in; color: var(--teal); font-size: 9pt; text-transform: uppercase; letter-spacing: .04em; }
.document-preview p { margin: .02in 0 .055in; }
.doc-identification { display: flex; align-items: flex-end; gap: .08in; margin: .02in 0 .09in; color: var(--navy); }
.doc-identification strong { white-space: nowrap; }
.doc-identification span { flex: 1; min-width: 2in; height: .2in; border-bottom: 1px solid #748b9c; }
.document-preview .doc-meta { display: flex; gap: .25in; margin-bottom: .08in; color: var(--muted); }
.document-preview .doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .08in .2in; }
.document-preview .doc-box { padding: .07in .09in; border: 1px solid #cdd8df; border-radius: 5px; }
.document-preview .doc-objectives { margin: .02in 0; padding-left: .22in; }
.document-preview .doc-objectives li { margin-bottom: .035in; }
.document-preview .doc-footer { margin-top: .08in; padding-top: .05in; border-top: 1px solid #ccd5dc; color: var(--muted); font-size: 8pt; }
.template-document { padding: .45in .5in; }
.template-sheet { min-height: 9.85in; font-family: Arial, sans-serif; }
.template-page-break { margin-top: .5in; padding-top: .45in; border-top: 4px solid #d8e2e8; }
.template-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .2in; padding-bottom: .09in; border-bottom: 2px solid var(--teal); }
.template-heading span { color: var(--teal); font-size: 8pt; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.template-heading h1 { margin: .025in 0 0; }
.template-heading > strong { padding: .05in .09in; border-radius: 999px; color: var(--blue); background: var(--blue-soft); font-size: 8pt; white-space: nowrap; }
.template-directions { margin: .1in 0 .15in !important; color: var(--muted); }
.template-box { margin-bottom: .1in; padding: .1in .12in; border: 1px solid #9fb3c0; border-radius: 5px; background: #fff; }
.template-box > b { display: block; margin-bottom: .04in; color: var(--navy); font-size: 8.5pt; text-transform: uppercase; letter-spacing: .035em; }
.template-focus { border: 2px solid var(--teal); background: #f3faf8; }
.template-blue { border-left: 5px solid var(--blue); }
.template-teal { border-left: 5px solid var(--teal); }
.template-gold { border-left: 5px solid var(--gold); }
.template-line { height: .28in; border-bottom: 1px solid #9fb3c0; }
.template-two, .template-three { display: grid; gap: .1in; }
.template-two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.template-three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.template-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .08in; align-items: center; }
.template-flow > span { color: var(--teal); font-size: 16pt; font-weight: 850; }
.template-table { width: 100%; margin-bottom: .12in; border-collapse: collapse; table-layout: fixed; }
.template-table th { padding: .07in; border: 1px solid #879aa7; color: #fff; background: var(--navy-2); font-size: 8.5pt; text-align: left; }
.template-table td { height: .62in; padding: .06in; border: 1px solid #9fb3c0; vertical-align: top; }
.mapping-template th { width: 17%; }
.mapping-template td { height: 1.05in; }
.syllable-template td { height: .68in; }
.template-checklist { margin-bottom: .12in; padding: .1in .12in; border: 1px solid #9fb3c0; border-radius: 5px; }
.template-checklist p { margin: .06in 0; }
.sound-template-row { display: flex; align-items: center; gap: .08in; margin-bottom: .12in; }
.sound-template-row b { width: .8in; color: var(--navy); font-size: 8.5pt; }
.sound-template-row span { width: .75in; height: .75in; border: 2px solid var(--navy); }
.data-record-preview { min-height: 11in; }
.data-record-preview .record-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .2in; padding-bottom: .08in; border-bottom: 2px solid var(--teal); }
.data-record-preview .record-heading h1 { margin: .02in 0 0; }
.data-record-preview .record-heading > strong { padding: .05in .1in; border-radius: 999px; color: var(--blue); background: var(--blue-soft); white-space: nowrap; }
.data-record-preview .record-kicker { color: var(--teal); font-size: 8pt; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.data-record-preview .record-intro { margin: .06in 0 .12in; color: var(--muted); }
.data-record-preview .record-goal { display: grid; gap: .035in; padding: .1in .12in; border: 1px solid #cdd8df; border-left: 4px solid var(--teal); border-radius: 5px; background: #f7fafb; }
.data-record-preview .record-goal strong, .data-record-preview .record-plan strong { color: var(--navy); font-size: 8pt; text-transform: uppercase; letter-spacing: .04em; }
.data-record-preview .record-plan { display: grid; grid-template-columns: 1fr 1.65fr .8fr; gap: .08in; margin-top: .1in; }
.data-record-preview .record-plan > div { display: grid; gap: .025in; padding: .07in .09in; border: 1px solid #cdd8df; border-radius: 4px; }
.data-record-preview .record-table { width: 100%; margin-top: .15in; border-collapse: collapse; table-layout: fixed; }
.data-record-preview .record-table th { padding: .07in; color: #fff; background: var(--navy-2); font-size: 8pt; text-align: left; }
.data-record-preview .record-table td { height: 1.06in; padding: .06in; border: 1px solid #aebdc7; vertical-align: top; }
.data-record-preview .record-table th:nth-child(1) { width: 10%; }
.data-record-preview .record-table th:nth-child(2) { width: 17%; }
.data-record-preview .record-table th:nth-child(3) { width: 12%; }
.data-record-preview .record-table th:nth-child(4) { width: 16%; }
.data-record-preview .record-table th:nth-child(5) { width: 27%; }
.data-record-preview .record-table th:nth-child(6) { width: 18%; }

.readiness-card { margin-top: 1.25rem; padding: 1rem; border: 1px solid #bfd7e4; border-radius: 12px; background: var(--blue-soft); }
.readiness-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.readiness-heading h3 { margin: .15rem 0 0; color: var(--navy); }
.readiness-heading > strong { padding: .35rem .6rem; border-radius: 999px; color: var(--blue); background: #fff; font-size: .82rem; white-space: nowrap; }
.readiness-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: .85rem; }
.readiness-item { display: flex; align-items: flex-start; gap: .55rem; padding: .65rem .7rem; border-radius: 8px; background: rgba(255,255,255,.8); }
.readiness-icon { display: grid; place-items: center; flex: 0 0 1.35rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; color: var(--muted); border: 1px solid #afbdc6; font-size: .78rem; font-weight: 900; }
.readiness-item.complete .readiness-icon { color: #fff; border-color: var(--teal); background: var(--teal); }
.readiness-item span:last-child { font-size: .88rem; }

.guide-dialog { width: min(680px, calc(100% - 2rem)); max-height: min(760px, calc(100dvh - 1.5rem)); margin: auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.guide-dialog .dialog-header { align-items: center; }
.guide-dialog .dialog-header > div { min-width: 0; }
.guide-dialog .icon-button { flex: 0 0 3rem; width: 3rem; height: 3rem; border-radius: 50%; background: var(--blue-soft); font-size: 2rem; }
.guide-steps { display: grid; gap: .75rem; margin: 0; padding: 1.2rem 1.35rem 1rem 3.5rem; }
.guide-steps li { padding-left: .2rem; }
.guide-steps strong, .guide-steps span { display: block; }
.guide-steps strong { color: var(--navy); }
.guide-steps span { margin-top: .12rem; color: var(--muted); }
.guide-privacy { margin: 0 1.25rem 1.25rem; padding: .85rem 1rem; border-left: 4px solid var(--brand-teal); border-radius: 8px; color: var(--navy); background: var(--blue-soft); }
.guide-footer { position: sticky; bottom: 0; z-index: 2; padding: .8rem 1.25rem max(.8rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255,255,255,.97); }
.guide-footer .button { width: 100%; min-height: 48px; }

.install-dialog { width: min(620px, calc(100% - 2rem)); }
.install-content { display: grid; grid-template-columns: 88px 1fr; gap: 1.1rem; padding: 1.25rem; }
.install-content h3 { margin: 0 0 .35rem; color: var(--navy); }
.install-content h3:not(:first-child) { margin-top: 1.15rem; }
.install-content ol { margin: .35rem 0 0; padding-left: 1.25rem; }
.install-content li { margin: .3rem 0; }
.install-content p { margin: .35rem 0 0; }
.install-app-mark { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 22px; color: #fff; background: linear-gradient(145deg, var(--navy), var(--teal)); box-shadow: var(--shadow); font-size: 1.45rem; font-weight: 850; letter-spacing: .08em; }
.install-note { margin-top: 1rem !important; padding: .75rem; border-radius: 8px; color: var(--muted); background: var(--blue-soft); }

@media (display-mode: standalone) {
  #installButton { display: none; }
}

.toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 20; transform: translateY(120px); opacity: 0; padding: .75rem 1rem; border-radius: 9px; color: #fff; background: var(--navy); box-shadow: var(--shadow); transition: .2s ease; }
.toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 960px) {
  .completion-summary dl { grid-template-columns: 1fr; gap: 0; }
  .completion-summary .summary-actions { grid-template-columns: 1fr 1fr; }
  .completion-summary .summary-actions .text-button { grid-column: 1 / -1; }
  .step-link { font-size: .86rem; }
}
@media (max-width: 700px) {
  .quick-tools { display: block; margin: .75rem .75rem 0; }
  .quick-tools-copy { margin-bottom: .65rem; }
  .quick-tool-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-header { position: relative; z-index: 10; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .8rem 1rem; }
  .brand { gap: .65rem; }
  .brand-mark { flex-basis: 2.9rem; width: 2.9rem; height: 2.9rem; border-radius: 12px; }
  .brand h1 { font-size: 1.05rem; }
  .brand p, .privacy-badge { display: none; }
  .header-actions { width: auto; }
  .header-tool-buttons { display: flex; }
  .header-tool-buttons .button { padding: .48rem .62rem; font-size: .8rem; white-space: nowrap; }
  .privacy-strip { flex-direction: row; align-items: center; padding: .58rem 1rem; font-size: .82rem; line-height: 1.35; }
  .privacy-strip .strip-button { white-space: nowrap; }
  .draft-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .55rem 1rem; }
  .draft-status { min-width: 0; }
  .draft-status span { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.25; }
  .mobile-draft-toggle { display: inline-flex; white-space: nowrap; }
  .draft-actions { display: none; grid-column: 1 / -1; width: 100%; padding-top: .5rem; border-top: 1px solid var(--line); }
  .draft-bar.open .draft-actions { display: flex; }
  .step-nav { position: sticky; top: 0; z-index: 8; padding: .5rem 1rem 0; background: rgba(243,246,248,.97); box-shadow: 0 1px 0 rgba(23,50,77,.08); backdrop-filter: blur(10px); }
  .step-nav { grid-template-columns: repeat(5, 1fr); }
  .step-link { justify-content: center; }
  .step-link span { flex: 0 0 1.8rem; }
  .step-link { font-size: 0; }
  .step-link span { font-size: .9rem; }
  .section-heading { grid-template-columns: 1fr; gap: .6rem; }
  .form-grid.two, .form-grid.three, .instruction-grid, .monitoring-grid, .monitor-card-body { grid-template-columns: 1fr; }
  .monitor-detail:nth-child(odd) { border-right: 0; }
  .standard-meta { grid-template-columns: 1fr; }
  .step-panel { padding: 1.1rem; }
  .objective-list { grid-template-columns: 1fr; }
  .objective-input { min-height: 96px; }
  .summary-actions { grid-template-columns: 1fr; }
  .document-toolbar { flex-direction: column; }
  .print-option { width: 100%; margin-left: 0; }
  .chart-print-choice { grid-template-columns: auto 1fr; }
  .chart-print-choice em { grid-column: 2; justify-self: start; }
  .install-content { grid-template-columns: 1fr; }
  .install-app-mark { width: 72px; height: 72px; border-radius: 18px; }
  .resource-dialog-top { box-shadow: 0 2px 8px rgba(23,50,77,.08); }
  .resources-dialog .dialog-header { padding: .8rem 1rem; }
  .resources-dialog .dialog-header h2 { font-size: 1.2rem; }
  .resource-tabs { flex-wrap: nowrap; gap: .2rem; overflow-x: auto; padding: 0 .75rem; scrollbar-width: thin; }
  .resource-tab { flex: 0 0 auto; padding: .62rem .68rem; font-size: .84rem; white-space: nowrap; }
  .passage-filters { grid-template-columns: 1fr; }
  .readiness-list { grid-template-columns: 1fr; }
  .guide-dialog { width: calc(100% - .75rem); max-height: calc(100dvh - .75rem); border-radius: 12px; }
  .guide-dialog .dialog-header { padding: .7rem .85rem; }
  .guide-dialog .dialog-header h2 { font-size: 1.18rem; }
  .guide-dialog .dialog-header .eyebrow { font-size: .7rem; }
  .guide-steps { gap: .65rem; padding: 1rem .95rem .9rem 2.55rem; }
  .guide-steps li { padding-left: 0; }
  .guide-privacy { margin: 0 .85rem .85rem; }
  .guide-footer { padding-inline: .85rem; }
  .scaffold-choice .visual-example { margin-left: .85rem; }
  .support-type-legend { grid-template-columns: 1fr; }
  .example-title { align-items: flex-start; flex-direction: column; gap: .15rem; }
  .detail-card-grid { grid-template-columns: 1fr; }
  .example-card { min-height: 0; }
  .aee-grid > div, .frame-levels > div { grid-template-columns: 1fr; gap: .25rem; }
  .matrix-example { grid-template-columns: 1fr; }
  .sound-boxes > div { width: 64px; min-height: 76px; }
  .detail-branches, .spelling-patterns, .story-map-example, .cause-effect-example { grid-template-columns: 1fr; }
  .cause-effect-example > div { min-height: 0; }
  .cause-effect-example i { justify-self: center; transform: rotate(90deg); }
  .spelling-card { grid-template-columns: 72px 1fr; }
  .reference-sheet-example, .rehearsal-example, .question-cue-example { grid-template-columns: 1fr; }
  .rehearsal-example > div { min-height: 0; }
  .rehearsal-example > i { justify-self: center; transform: rotate(90deg); }
  .sample-flow, .morpheme-flow, .speech-flow, .inference-flow, .tool-choice { grid-template-columns: 1fr; }
  .sample-flow > div, .tool-choice > div { min-height: 0; }
  .sample-flow > i, .tool-choice > i { justify-self: center; transform: rotate(90deg); }
  .sample-grid.two, .sample-grid.three, .near-point-example, .comparison-example, .glossary-example, .semantic-map, .transition-bank, .question-cue-example, .figurative-chart, .blending-example { grid-template-columns: 1fr; }
  .semantic-map .center-word { grid-column: auto; }
  .curated-sources, .genre-organizer, .deadline-example { grid-template-columns: 1fr; }
  .genre-organizer .topic-box { grid-column: auto; }
  .mouth-cue { grid-template-columns: 72px 1fr; }
  .comparison-table { overflow-x: auto; }
  .comparison-table > div { min-width: 460px; }
  .feature-hunt > div { grid-template-columns: auto 1fr; }
  .feature-hunt small { grid-column: 2; }
  .mapping-grid > div { grid-template-columns: 64px repeat(3, 1fr); }
  .template-actions { flex-direction: column; }
  .template-action { width: 100%; }
  .template-two, .template-three, .template-flow { grid-template-columns: 1fr; }
  .template-flow > span { justify-self: center; transform: rotate(90deg); }
  .template-sheet { min-height: 0; }
  .document-preview { padding: 1rem; }
  .document-preview .doc-grid { grid-template-columns: 1fr; }
  .document-preview .doc-meta { flex-wrap: wrap; gap: .35rem .75rem; }
  .template-heading { flex-direction: column; }
  .template-heading h1 { font-size: 1.3rem; overflow-wrap: anywhere; }
  #templatePdfDownloads { display: flex; flex-direction: column; gap: .65rem; max-width: 100%; }
  .sound-template-row { gap: .25rem; }
  .sound-template-row b { width: 3.5rem; flex-shrink: 0; }
  .sound-template-row span { width: min(2rem, 9vw); height: 2rem; }
}

[hidden] { display: none !important; }

#printExportRoot { display: none; }
.doc-identification span { flex: 0 1 2.7in; min-width: 0; max-width: 2.7in; }
.concise-plan > h1 { padding-bottom: .1in; border-bottom: 2px solid var(--teal); }
.concise-plan ol { padding-left: .22in; margin: .06in 0 .12in; }
.concise-plan li { padding-left: .02in; margin-bottom: .09in; }

@media print {
  @page { size: letter portrait; margin: .5in; }
  html, body { height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: white !important; overflow: visible !important; }
  body > :not(#printExportRoot) { display: none !important; }
  #printExportRoot { display: block !important; color: #172f45; background: white; }
  #printExportRoot .document-preview { display: block; position: static; width: auto; max-width: none; min-height: 0; margin: 0; padding: 0; border: 0; box-shadow: none; font-size: 10.5pt; line-height: 1.32; }
  #printExportRoot .document-preview h1 { font-size: 20pt; }
  #printExportRoot .document-preview h2 { font-size: 11.5pt; margin-top: .15in; break-after: avoid; page-break-after: avoid; }
  #printExportRoot .document-preview p, #printExportRoot li, #printExportRoot .doc-box { break-inside: avoid; page-break-inside: avoid; }
  #printExportRoot .doc-identification { margin: .12in 0; }
  #printExportRoot .doc-meta { flex-wrap: wrap; gap: .08in .2in; }
  #printExportRoot .doc-grid { grid-template-columns: 1fr 1fr; }
  #printExportRoot .teacher-guidance-page { break-before: page; page-break-before: always; margin: 0; }
  #printExportRoot .data-record-preview, #printExportRoot .support-template-preview { break-before: page; page-break-before: always; }
  #printExportRoot .record-heading { flex-direction: row; }
  #printExportRoot .record-plan { grid-template-columns: 1fr 1.65fr .8fr; break-inside: avoid; }
  #printExportRoot .record-goal { break-inside: avoid; }
  #printExportRoot .record-table { break-inside: avoid; page-break-inside: avoid; }
  #printExportRoot .record-table tr { break-inside: avoid; page-break-inside: avoid; }
  #printExportRoot .record-table td { height: .88in; }
  #printExportRoot .record-table th { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  #printExportRoot .record-table thead { display: table-header-group; }
  #printExportRoot .template-sheet { min-height: 0; break-after: page; page-break-after: always; }
  #printExportRoot .template-sheet:last-child { break-after: auto; page-break-after: auto; }
  #printExportRoot .template-page-break { margin: 0; padding: 0; border: 0; }
  #printExportRoot .template-heading { flex-direction: row; }
}

.ml-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.ml-detail { padding: .9rem; border-radius: 8px; background: rgba(255,255,255,.8); border: 1px solid #e8ddc1; }
.ml-detail h4 { margin: 0 0 .4rem; color: #624a1f; font-size: .95rem; }
.ml-detail p { line-height: 1.6; }
.ml-quick-note { margin-bottom: 0; color: var(--muted); }
.ml-more { margin-top: 1rem; padding: .8rem .9rem; border: 1px solid #e2d6b5; border-radius: 9px; background: rgba(255,255,255,.55); }
.ml-more summary { color: var(--navy); font-weight: 800; cursor: pointer; }
.doc-box .ml-detail { padding: 0; margin-top: .65rem; border: 0; }
@media (min-width: 900px) { .ml-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ml-grid { grid-template-columns: 1fr; } }

.benchmark-date-label { display: block; font-size: .88rem; font-weight: 700; margin: .5rem 0 .3rem; }
.benchmark-date-input { width: 100%; min-height: 44px; margin-bottom: .65rem; }

.no-support-option { display: block; padding: .8rem; margin-bottom: .8rem; border: 1px solid var(--line); border-radius: 8px; }
.no-support-option input { width: auto; }
.no-support-option small { display: block; color: var(--muted); }
.teacher-guidance-page { break-before: page; margin-top: 1rem; }

/* Export previews must fit narrow screens without long unbreakable writing lines. */
.doc-identification { flex-wrap: wrap; }
.doc-identification strong { white-space: normal; }
.doc-identification span { flex: 0 1 2.7in; width: 2.7in; max-width: 100%; min-width: 0; }
.template-inline-rule { display: block; width: 100%; height: .2in; border-bottom: 1px solid #9fb3c0; }
.document-preview, .template-box, .record-plan > div { min-width: 0; overflow-wrap: anywhere; }
.teacher-guidance-page { margin-top: 0; }
@media screen and (max-width: 700px) {
 .data-record-preview .record-heading { display: block; }
 .data-record-preview .record-heading > strong { display: inline-block; margin-top: .1in; }
 .data-record-preview .record-plan { grid-template-columns: 1fr; }
 .document-preview .record-table { font-size: 8pt; }
 .document-preview .record-table th { padding: .04in; }
}
@media print {
 #printExportRoot .teacher-guidance-page { break-before: page; page-break-before: always; }
 #printExportRoot .doc-identification { flex-wrap: nowrap; }
 #printExportRoot .doc-identification strong { white-space: nowrap; }
 #printExportRoot .template-box, #printExportRoot .template-checklist, #printExportRoot .template-table { break-inside: avoid; page-break-inside: avoid; }
}

.guidance-supports { display: block; }
.guidance-supports .doc-box { margin: .07in 0; }
@media print {
 #printExportRoot .teacher-guidance-page { font-size: 10pt; line-height: 1.25; }
 #printExportRoot .teacher-guidance-page .ml-detail { padding: .06in .08in; margin-top: .06in; }
 #printExportRoot .teacher-guidance-page .ml-detail h4 { margin: 0 0 .03in; font-size: 10pt; }
 #printExportRoot .teacher-guidance-page .ml-detail p { line-height: 1.25; }
}
@media print {
 #printExportRoot .teacher-guidance-page { font-size: 9.5pt; line-height: 1.22; }
 #printExportRoot .teacher-guidance-page h2 { margin-top: .09in; }
 #printExportRoot .teacher-guidance-page h1 { font-size: 18pt; margin-bottom: .08in; }
}

.measurement-support-field { display: block; margin: 1rem 0; }
.measurement-support-field .text-input { margin-top: .5rem; }

/* One clear completion action; optional export choices live in the preview. */
.completion-summary .summary-actions { grid-template-columns: 1fr; gap: .65rem; }
.completion-summary .summary-actions .button { width: 100%; min-height: 52px; }
.completion-summary .summary-actions .text-button { justify-self: center; padding: .5rem; }
.completion-summary .export-status { padding: 0; border: 0; background: transparent; color: var(--muted); font-weight: 400; font-size: .9rem; }
.app-update-notice { position: fixed; bottom: max(1rem, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 100; width: min(32rem, calc(100% - 2rem)); padding: .85rem 1rem; border: 1px solid #8dcac4; border-radius: 10px; background: #e8f7f4; color: #17324d; box-shadow: var(--shadow); font-size: .95rem; }

/* Matching student checks and a separate answer key. */
.check-passage { white-space: pre-line; line-height: 1.65; }
.check-word-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 2rem; margin-top: 1.4rem; font-size: 1.25rem; }
.check-word-grid span { min-width: 0; }
.check-writing-line { display: block; width: 100%; height: 1.8rem; border-bottom: 1px solid #8399a8; }
.check-response { margin-top: 1rem; }
.check-key-table { width: 100%; border-collapse: collapse; }
.check-key-table th,.check-key-table td { border: 1px solid #bacbd4; padding: .3rem; text-align: left; }
.check-page { margin-top: 1.2rem; }
@media print {
 #printExportRoot .check-page { break-before: page; page-break-before: always; }
 #printExportRoot > .document-preview > .check-page:first-child { break-before: auto; page-break-before: auto; }
 #printExportRoot #progressCheckPreview { display: block; }
 #printExportRoot .check-passage { line-height: 1.4; font-size: 12pt; }
 #printExportRoot .check-word-grid { font-size: 18pt; gap: .23in 1in; }
 #printExportRoot .spelling-grid { font-size: 12pt; }
 #printExportRoot .check-writing-line { height: .27in; }
 #printExportRoot .check-key-table { break-inside: avoid; }
 #printExportRoot .check-teacher-page { font-size: 10pt; line-height: 1.28; }
}

/* Keep the selected supports and reduction guidance readable at every width. */
.selected-plan-heading { margin: 0 0 .75rem; font-size: 1rem; line-height: 1.4; }
.selected-plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.selected-plan-list li { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-width: 0; }
.selected-plan-name { line-height: 1.5; overflow-wrap: anywhere; }
.selected-plan-list .inline-support-type { margin-left: 0; font-size: .875rem; max-width: 100%; }
.selected-plan-guidance { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid #bdd9d7; }
.selected-plan-guidance h4 { margin: 0 0 .35rem; font-size: 1rem; line-height: 1.4; }
.selected-plan-guidance p { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }

/* Consistent screen spacing and responsive alignment across the builder and resources. */
@media screen {
  .quick-tools { max-width: 1216px; width: calc(100% - clamp(2rem, 6vw, 4rem)); }
  .quick-tools-copy { min-width: 0; flex: 0 1 13rem; }
  .quick-tool-buttons { grid-template-columns: repeat(5, minmax(0, 1fr)); min-width: 0; align-items: stretch; }
  .quick-tool { min-width: 0; align-content: start; }
  .quick-tool small { font-size: .8125rem; line-height: 1.4; }
  .step-link span { flex: 0 0 1.8rem; }
  .section-heading { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
  .section-heading > p { padding-top: .3rem; line-height: 1.6; }
  .form-grid > *, .instruction-grid > *, .monitoring-grid > *, .ml-grid > *, .summary-top > div, .dialog-header > div, .output-heading > * { min-width: 0; }
  .subsection-title, .output-heading, .summary-top { flex-wrap: wrap; gap: .6rem 1rem; }
  .subsection-title > div { flex: 1 1 16rem; min-width: 0; }
  .optional-tag, .counter, .grade-chip { max-width: 100%; line-height: 1.4; }
  .button, .template-action { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; line-height: 1.4; }
  .panel-actions { align-items: center; gap: .75rem; }
  .icon-button { flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; }
  dialog { max-height: calc(100dvh - 2rem); }
  .resource-item > summary { flex-wrap: wrap; justify-content: flex-start; gap: .5rem; overflow-wrap: anywhere; }
  .resource-item summary .scaffold-type { margin-left: 0; }
  .scaffold-type, .grade-fit, .example-available, .visual-sample-badge { font-size: .75rem; max-width: 100%; }
  .scaffold-choice input, .chart-print-choice input, .print-option input { flex-shrink: 0; margin-left: 0; }
  .no-support-option { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: .25rem .65rem; align-items: start; }
  .no-support-option input { width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; }
  .no-support-option small { grid-column: 2; line-height: 1.5; font-weight: 400; }
  .document-toolbar { align-items: stretch; }
  .ml-detail p + p { margin-top: .6rem; }
  .toast { max-width: calc(100% - 2rem); overflow-wrap: anywhere; }
}
@media screen and (max-width: 1100px) {
  .quick-tools { flex-direction: column; align-items: stretch; }
  .quick-tools-copy { flex: auto; }
  .quick-tool-buttons { flex: auto; }
  .app-header { flex-wrap: wrap; gap: 1rem; }
  .header-actions { margin-left: auto; }
}
@media screen and (max-width: 700px) {
  .quick-tools { width: auto; margin: .75rem 1rem 0; padding: .85rem; }
  .quick-tool-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-tool:last-child { grid-column: 1 / -1; }
  .section-heading { grid-template-columns: 1fr; gap: .65rem; }
  .section-heading > p { padding-top: 0; }
  .workspace { padding: 1rem 1rem 2rem; }
  .panel-actions { padding: 1rem 1.1rem; }
  .panel-actions .button { flex: 1 1 0; min-width: 0; }
  .completion-summary { padding: 1rem; }
  .completion-summary .summary-actions { grid-template-columns: 1fr; }
  .resource-panel { padding: 1rem 1rem 1.25rem; }
  .resource-dialog-top { box-shadow: 0 2px 8px rgba(23,50,77,.08); }
  .resource-item .example-available { margin-left: 0; white-space: normal; }
  .resource-item > summary { padding: .85rem; }
  .resource-item-body, .passage-card-body { padding: 0 .85rem .85rem; }
  .scaffold-choice details { padding-left: 1rem; }
  .document-toolbar > .button { width: 100%; }
  .document-preview { min-height: 0; }
  .prompt-ladder > div { grid-template-columns: 1fr; gap: .25rem; }
  .marked-word { flex-wrap: wrap; justify-content: center; }
  .sound-boxes { flex-wrap: wrap; }
  .muted-checks { flex-wrap: wrap; }
}
@media screen and (max-width: 380px) {
  .app-header { grid-template-columns: 1fr; }
  .header-actions { margin-left: 0; justify-content: flex-start; }
  .privacy-strip { flex-wrap: wrap; gap: .35rem; }
  .draft-bar { grid-template-columns: 1fr; }
  .mobile-draft-toggle { justify-self: start; }
  .subsection-title > div { flex-basis: 100%; }
}

/* Keep desktop planning controls prominent while retaining the mobile flow. */
@media screen and (min-width: 1000px) {
  .app-header { padding: .85rem max(2rem, calc((100vw - 1216px) / 2)); gap: 1rem; }
  .header-tool-buttons .button { min-height: 40px; padding: .4rem .7rem; font-size: .875rem; }
  .privacy-strip { padding: .55rem max(2rem, calc((100vw - 1216px) / 2)); font-size: .875rem; line-height: 1.45; }
  .quick-tools { flex-direction: row; align-items: center; gap: .8rem; margin-top: .8rem; padding: .65rem .8rem; box-shadow: none; }
  .quick-tools-copy { flex: 0 0 6.5rem; }
  .quick-tools-copy > span { display: none; }
  .quick-tool-buttons { flex: 1; gap: .45rem; }
  .quick-tool { padding: .55rem .65rem; }
  .quick-tool > span { font-size: .9rem; line-height: 1.35; }
  .quick-tool small { font-size: .875rem; line-height: 1.4; }
  .draft-bar { max-width: 1216px; margin: .75rem auto 0; padding: .6rem .85rem; border: 1px solid var(--line); border-radius: 10px; }
  .draft-status strong, .draft-status span { font-size: .875rem; }
  .step-nav { position: sticky; top: 0; z-index: 8; background: var(--canvas); padding-top: .6rem; }
  .step-link { padding: .7rem .6rem; font-size: .95rem; border-radius: 8px 8px 0 0; }
  .step-link.active { background: var(--teal-soft); }
  .workspace { padding-top: .8rem; }
  .step-panel { padding: 1.5rem 1.75rem; }
}
@media screen and (max-width: 700px) {
  .header-actions { gap: .35rem; }
  .header-nav { gap: 0; }
  .header-link { padding: .35rem .4rem; font-size: .8rem; }
  .app-header:has(.header-nav) { grid-template-columns: 1fr; }
  .app-header:has(.header-nav) .header-actions { width: 100%; justify-content: space-between; margin-left: 0; }
}

/* About shares the builder's navy and teal identity. */
.brand-home { color: #fff; text-decoration: none; }
.brand-title { display: block; font-size: clamp(1.2rem, 2.5vw, 1.65rem); line-height: 1.2; }
.about-main { max-width: 1216px; margin: auto; padding: 2.75rem 2rem 3rem; }
.about-intro { max-width: 780px; margin-bottom: 2rem; }
.about-intro h1 { margin: .5rem 0 1rem; color: var(--navy); font-size: clamp(2rem, 4.3vw, 3.25rem); line-height: 1.13; letter-spacing: -.025em; }
.about-intro > p { margin: 0; max-width: 670px; font-size: 1.125rem; color: var(--muted); }
.about-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.25rem; }
.about-card { padding: 1.75rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.about-card h2, .about-connections h2, .about-creator h2 { margin: 0 0 .9rem; color: var(--navy); line-height: 1.25; font-size: 1.5rem; }
.about-card p { margin: .75rem 0; }
.about-card p:last-child { margin-bottom: 0; }
.about-purpose { border-top: 5px solid var(--brand-teal); }
.about-emphasis { padding-top: .9rem; border-top: 1px solid var(--line); color: var(--navy); font-weight: 750; }
.about-connections { margin-top: 2.25rem; }
.about-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.about-steps article { padding: 1.25rem; background: var(--blue-soft); border-radius: 12px; }
.about-steps article > span { color: var(--teal); font-weight: 850; font-size: .9rem; }
.about-steps h3 { margin: .45rem 0; color: var(--navy); font-size: 1.05rem; line-height: 1.35; }
.about-steps p { margin: 0; }
.about-creator { display: grid; grid-template-columns: 1fr 1.6fr; gap: 2rem; margin-top: 2.5rem; padding: 1.75rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-creator h2 { margin-top: .4rem; }
.about-creator p { margin: 0 0 .85rem; }
.about-creator p:last-child { margin: 0; }
.about-footer { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-top: 1.5rem; }
.about-footer p { max-width: 710px; color: var(--muted); }
.about-footer .button { flex-shrink: 0; text-decoration: none; }
@media (max-width: 900px) {
  .about-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .about-main { padding: 1.75rem 1rem 2rem; }
  .about-grid, .about-creator { grid-template-columns: 1fr; gap: 1rem; }
  .about-card { padding: 1.25rem; }
  .about-footer { flex-direction: column; align-items: stretch; gap: .5rem; }
  .about-page .app-header > .button { justify-self: start; }
}
@media (max-width: 380px) {
  .about-steps { grid-template-columns: 1fr; }
}

/* A quieter editorial hierarchy for the About page. */
.about-main { max-width: 1120px; padding-top: 2.25rem; }
.about-intro { max-width: 760px; margin-bottom: 1.75rem; }
.about-intro h1 { max-width: 720px; font-size: clamp(1.85rem, 3.1vw, 2.6rem); line-height: 1.2; letter-spacing: -.02em; margin: .55rem 0 .85rem; }
.about-intro > p { font-size: 1.0625rem; line-height: 1.65; }
.about-page .eyebrow { font-size: .875rem; letter-spacing: .075em; }
.about-grid { grid-template-columns: 1.2fr 1fr; gap: 1rem; }
.about-card { padding: 1.5rem; border-radius: 12px; }
.about-card h2, .about-connections h2 { font-size: 1.3rem; font-weight: 750; margin-bottom: .75rem; }
.about-card p, .about-steps p, .about-creator p, .about-footer p { font-size: 1rem; line-height: 1.65; }
.about-purpose { border-top-width: 3px; }
.about-connections { margin-top: 2rem; }
.about-steps { gap: .75rem; }
.about-steps article { border: 1px solid #d2e2ea; background: #f5f9fb; padding: 1.15rem; border-radius: 10px; }
.about-steps h3 { font-size: 1rem; }
.about-steps article > span { font-size: .875rem; }
.about-creator { grid-template-columns: minmax(0, .85fr) minmax(0, 1.65fr); align-items: start; gap: 1.5rem; margin-top: 2rem; padding: 1.5rem; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 12px; }
.about-creator h2 { margin: .45rem 0 0; font-size: 1.35rem; line-height: 1.3; font-weight: 750; letter-spacing: -.01em; }
.about-creator > div { min-width: 0; }
.about-creator p { margin-bottom: .7rem; }
.about-footer { margin-top: 1rem; gap: 1.5rem; }
.about-footer p { font-size: .9375rem; margin: .5rem 0; }
@media (max-width: 700px) {
  .about-main { padding: 1.5rem 1rem 2rem; }
  .about-intro { margin-bottom: 1.25rem; }
  .about-intro h1 { font-size: 1.9rem; }
  .about-grid, .about-creator { grid-template-columns: 1fr; }
  .about-card { padding: 1.2rem; }
  .about-creator { padding: 1.2rem; gap: .85rem; margin-top: 1.5rem; }
  .about-creator h2 { font-size: 1.3rem; }
  .about-steps { grid-template-columns: 1fr; gap: .6rem; }
  .about-steps article { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .15rem .5rem; padding: 1rem; }
  .about-steps article > span { grid-row: 1 / 3; padding-top: .1rem; }
  .about-steps h3 { margin: 0; }
  .about-steps p { grid-column: 2; }
}

/* Compact mobile brand lockup: information links sit directly under the title. */
/* Mobile app chrome: a blue brand bar and a separate navigation row. */
.mobile-privacy-copy { display: none; }
@media screen and (max-width: 700px) {
  .app-header:has(.header-nav) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 .5rem; padding: .75rem 1rem 0;
    color: #fff; background: linear-gradient(118deg, #17324d 0%, #244b6b 60%, #176d72 100%);
    border-bottom: 1px solid rgba(255,255,255,.15);
  }
  .app-header:has(.header-nav) > .brand {
    display: flex; grid-column: 1; grid-row: 1; gap: .6rem;
  }
  .app-header:has(.header-nav) .brand-mark {
    flex: 0 0 36px; width: 36px; height: 36px;
    border: 1px solid rgba(255,255,255,.65); border-radius: 10px; box-shadow: none;
  }
  .app-header:has(.header-nav) .brand h1 { font-size: 1.125rem; line-height: 1.3; }
  .app-header:has(.header-nav) > .header-actions { display: contents; }
  .app-header:has(.header-nav) .header-nav {
    grid-column: 1 / -1; grid-row: 2; gap: 1.25rem;
    margin-top: .4rem; border-top: 1px solid rgba(255,255,255,.18);
  }
  .app-header:has(.header-nav) .header-link {
    min-height: 44px; padding: .35rem 0;
    color: #e1edf4; font-size: .875rem; font-weight: 500;
    border-radius: 0;
  }
  .app-header:has(.header-nav) .header-link:hover,
  .app-header:has(.header-nav) .header-link:focus-visible { color: #fff; background: transparent; }
  .app-header:has(.header-nav) .header-tool-buttons { grid-column: 2; grid-row: 1; }
  .app-header:has(.header-nav) .header-tool-buttons .button {
    color: #fff; border-color: rgba(255,255,255,.5); background: transparent;
    font-size: .875rem; padding: .4rem .55rem; min-height: 36px;
  }
  .privacy-strip {
    margin: .75rem 1rem 0; padding: .1rem 0 .1rem .65rem;
    border: 0; border-left: 2px solid var(--brand-teal);
    background: transparent; color: var(--muted);
    font-size: .875rem; line-height: 1.45;
  }
  .privacy-strip strong { color: var(--navy); font-weight: 600; }
  .desktop-privacy-copy { display: none; }
  .mobile-privacy-copy { display: block; }
  .quick-tools {
    margin: 1rem 1rem 0; padding: 0; border: 0;
    border-radius: 0; background: transparent; box-shadow: none;
  }
  .quick-tools-copy { margin-bottom: .5rem; }
  .quick-tools-copy strong { font-size: .875rem; font-weight: 600; }
  .quick-tools-copy > span { display: none; }
  .quick-tool-buttons { gap: .5rem; }
  .quick-tool { min-height: 54px; align-content: center; padding: .65rem .75rem; border-color: var(--line); border-radius: 8px; }
  .quick-tool span { font-size: .875rem; font-weight: 600; line-height: 1.4; }
  .quick-tool small { display: none; }
  .quick-tool:last-child { grid-column: 1 / -1; min-height: 44px; }
  .draft-bar { margin-top: .85rem; }
}
@media screen and (max-width: 360px) {
  .app-header:has(.header-nav) { padding-inline: .75rem; }
  .app-header:has(.header-nav) .brand h1 { font-size: 1rem; }
  .app-header:has(.header-nav) .brand-mark { flex-basis: 32px; width: 32px; height: 32px; }
}
@media screen and (max-width: 700px) and (display-mode: standalone) {
  .app-header:has(.header-nav) .header-tool-buttons { display: none; }
}

/* About typography stays readable while using less space on phones. */
@media screen and (max-width: 700px) {
  .about-main { padding-top: 1.25rem; }
  .about-intro h1 { font-size: 1.625rem; line-height: 1.25; margin: .4rem 0 .65rem; }
  .about-intro > p { font-size: 1rem; line-height: 1.55; }
  .about-card h2, .about-connections h2, .about-creator h2 { font-size: 1.25rem; line-height: 1.3; }
  .about-card p, .about-steps p, .about-creator p { font-size: 1rem; line-height: 1.55; }
  .about-card { padding: 1rem; }
  .about-card p { margin: .6rem 0; }
  .about-connections { margin-top: 1.5rem; }
  .about-creator { padding: 1rem; gap: .7rem; }
}

/* Mobile About steps read as one sequence rather than separate panels. */
@media screen and (max-width: 700px) {
  .about-card h2 { margin-bottom: .55rem; }
  .about-emphasis { padding-top: .65rem; font-weight: 600; }
  .about-connections > h2 { margin-bottom: .65rem; }
  .about-steps { gap: 0; border-top: 1px solid var(--line); }
  .about-steps article {
    grid-template-columns: 1.5rem minmax(0, 1fr); gap: .2rem .65rem;
    padding: .85rem 0; border: 0; border-bottom: 1px solid var(--line);
    border-radius: 0; background: transparent;
  }
  .about-steps article > span { font-weight: 600; }
  .about-steps h3 { font-weight: 650; }
  .about-steps p { color: var(--muted); }
}

.brand-icon-link { display: inline-flex; flex: 0 0 auto; border-radius: 10px; }
.brand-icon-link:focus-visible, .brand-home:focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 4px; }