/** ManaBase の各画面、教材本文、学習部品、Quizの表示。 */
/* 予習の前提と必要な節を、短時間の読み直しでも見つけられる導線。 */
.study-prerequisites, .study-outline, .study-course-sequence { margin-block: 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-md); overflow-wrap: anywhere; }
.study-prerequisites { background: var(--surface-soft); }
.study-prerequisites h2, .study-outline h2, .study-course-sequence h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.study-prerequisites ul { margin-block: 0; padding-left: 1.25rem; }
.study-outline ul, .study-course-sequence ul, .study-evidence-links ul { margin: 0; padding: 0; list-style: none; }
.study-outline a, .study-course-sequence a, .study-evidence-links a, .study-material-link { display: block; min-height: 44px; padding-block: 0.55rem; color: var(--brand-deep); text-decoration: underline; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.study-outline li + li, .study-course-sequence li + li { border-top: 1px dashed var(--line); }
.study-evidence-links { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--line); font-size: 0.9rem; }
[data-lesson-section] { scroll-margin-top: 6rem; }
[data-lesson-section]:target { outline: 2px solid var(--brand); outline-offset: 4px; }
@media (max-width: 480px) {
  .study-prerequisites, .study-outline, .study-course-sequence { padding: 0.8rem; }
}
@media print {
  .study-outline, .study-course-sequence, .study-evidence-links, .study-material-link { display: none !important; }
  [data-lesson-section]:target { outline: none; }
}
/* 図表は説明の位置に置き、狭い画面でも文字を小さくせず折り返す。 */
.lesson-visual { container: lesson-visual / inline-size; margin: 1.3rem 0 1.6rem; padding: clamp(0.7rem, 2vw, 1.4rem); border: 1px solid var(--line-strong); border-top: 4px solid var(--subject-accent); border-radius: var(--radius-md); background: var(--paper); overflow-wrap: anywhere; }
.lesson-visual-title { display: block; margin: 0 0 1rem; font-size: 1.05rem; }
.lesson-visual table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.95rem; }
.lesson-visual th, .lesson-visual td { padding: 0.7rem; border: 1px solid var(--line-strong); text-align: left; vertical-align: top; font-weight: normal; white-space: pre-line; }
.lesson-visual thead th { background: var(--brand-soft); font-weight: 700; }
.lesson-visual tbody th { background: var(--surface-soft); font-weight: 700; }
.lesson-visual tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-soft) 45%, var(--paper)); }
.lesson-visual-focus { display: grid; gap: 0.35rem; margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-left: 4px solid var(--gold); background: var(--gold-soft); line-height: 1.65; }
.lesson-visual-focus strong { color: var(--gold); font-size: 0.82rem; }
.lesson-visual-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.4rem 1rem; margin: 0.7rem 0; font-size: 0.82rem; }
.lesson-visual-tools a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand-deep); font-weight: 700; text-underline-offset: 0.25em; }
.lesson-visual-tools small { color: var(--ink-soft); font-size: inherit; }
.lesson-visual-data { max-width: 100%; overflow-x: auto; }
.lesson-visual-records { display: none; }
.lesson-visual-records dl { margin: 0; padding: 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-soft); }
.lesson-visual-records dl + dl { margin-top: 0.8rem; }
.lesson-visual-records dl > div + div { margin-top: 0.7rem; }
.lesson-visual-records dt { font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.lesson-visual-records dd { margin: 0.2rem 0 0; white-space: pre-line; }
.lesson-visual-data > ol, .lesson-visual-data > ul { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.lesson-visual li { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 0.8rem; padding: 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.lesson-visual li div { display: grid; align-content: start; gap: 0.3rem; white-space: pre-line; }
.lesson-visual li small { color: var(--ink-soft); font-size: 0.8rem; }
.lesson-visual--sequence .lesson-visual-data > ol { grid-template-columns: 1fr; gap: 1.3rem; counter-reset: none; }
.lesson-visual--sequence li { position: relative; grid-template-columns: 2rem repeat(auto-fit, minmax(9rem, 1fr)); border-left: 3px solid var(--brand); }
.lesson-visual--sequence li + li::before { content: "↓"; position: absolute; top: -1.45rem; left: 1rem; color: var(--brand-deep); font-weight: 800; }
.lesson-step-number { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand); color: var(--paper); font-weight: 800; }
.lesson-visual--sentence li { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; background: transparent; border: 0; padding: 0; }
.lesson-visual--sentence li div { flex: 1 1 8rem; padding: 0.7rem; border-bottom: 3px solid var(--brand); background: var(--brand-soft); }
.lesson-visual--sentence li div:first-child { background: var(--blue-soft); border-color: var(--blue); }
.lesson-visual .lesson-visual-caption { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.lesson-diagram-viewport { max-width: 100%; overflow-x: auto; margin-bottom: 0.5rem; border-radius: var(--radius-sm); }
.lesson-diagram-viewport img { display: block; width: 100%; min-width: min(100%, 32rem); max-width: 48rem; height: auto; margin-inline: auto; }
.lesson-visual--diagram .lesson-diagram-viewport img { min-width: 36rem; }
.lesson-diagram-viewport.lesson-diagram-viewport--responsive img { min-width: 0; }
.lesson-diagram-viewport--responsive .lesson-diagram-compact { display: none; }
.lesson-diagram-description { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 0.6rem; }
.lesson-diagram-description summary { color: var(--brand-deep); cursor: pointer; font-weight: 700; }
.lesson-diagram-description .lesson-visual-data { margin-top: 0.8rem; }
.lesson-visual > small { display: block; margin-bottom: 1rem; color: var(--ink-soft); }
.lesson-visual > .lesson-diagram-scroll-hint,
.lesson-visual .lesson-table-scroll-hint { display: none; }
.lesson-table-scroll-hint { margin-top: 0.5rem; color: var(--ink-soft); }
/* 画面幅ではなく、サイドバーや本文の余白を除いた図表の幅で案内する。 */
@container lesson-visual (max-width: 36rem) {
  .lesson-visual > .lesson-diagram-scroll-hint { display: block; }
  .lesson-diagram-viewport--responsive .lesson-diagram-wide { display: none; }
  .lesson-diagram-viewport--responsive .lesson-diagram-compact { display: block; max-width: 24rem; }
  .lesson-visual--responsive .lesson-visual-data table { display: none; }
  .lesson-visual--responsive .lesson-visual-records { display: block; }
  .lesson-visual--responsive .lesson-diagram-description .lesson-visual-data + .lesson-table-scroll-hint { display: none; }
}
@container lesson-visual (max-width: 34rem) {
  .lesson-visual-data[data-columns="4"] table { min-width: 34rem; }
  .lesson-visual-data[data-columns="4"] + .lesson-table-scroll-hint { display: block; }
}
@container lesson-visual (max-width: 28rem) {
  .lesson-visual-data[data-columns="3"] table { min-width: 28rem; }
  .lesson-visual-data[data-columns="3"] + .lesson-table-scroll-hint { display: block; }
}
@media (max-width: 640px) {
  .lesson-visual > .lesson-diagram-scroll-hint { display: block; }
}
@media (max-width: 480px) {
  .lesson-visual--responsive { margin-inline: -0.375rem; padding-inline: 0.375rem; }
  .lesson-visual th, .lesson-visual td { padding: 0.4rem; }
  .lesson-visual table { font-size: 0.9rem; }
  .lesson-visual-data[data-columns="3"] table { min-width: 28rem; }
  .lesson-visual-data[data-columns="4"] table { min-width: 34rem; }
  .lesson-visual--sequence .lesson-visual-data > ol { grid-template-columns: 1fr; }
  .lesson-visual--sequence li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); }
  .lesson-visual--sequence li div { grid-column: 2; }
  .lesson-visual--sequence li + li::before { content: "↓"; position: absolute; top: -1.4rem; left: 1rem; font-weight: 700; }
}
@media print {
  .lesson-section.lesson-section--visual { break-inside: auto; }
  .lesson-visual { container-type: normal; box-shadow: none; background: white; break-inside: auto; }
  .lesson-visual tr, .lesson-visual li, .lesson-visual img { break-inside: avoid; }
  .lesson-visual thead { display: table-header-group; }
  .lesson-diagram-viewport, .lesson-visual-data { overflow: visible; }
  .lesson-diagram-viewport img, .lesson-visual-data table { min-width: 0 !important; }
  .lesson-diagram-viewport img { width: auto; max-height: 100mm; }
  .lesson-diagram-viewport--responsive .lesson-diagram-wide { display: block; }
  .lesson-diagram-viewport--responsive .lesson-diagram-compact { display: none; }
  .lesson-visual--responsive .lesson-visual-data table { display: table; }
  .lesson-visual--responsive .lesson-visual-records { display: none; }
  .lesson-visual table,
  .lesson-diagram-description { break-inside: avoid; }
  .lesson-diagram-description > .lesson-visual-data { display: block; }
  .lesson-diagram-description summary { display: none; }
  .lesson-visual > .lesson-diagram-scroll-hint,
  .lesson-visual .lesson-table-scroll-hint { display: none; }
  .lesson-visual-tools a { display: none; }
  .lesson-visual--sequence li + li::before { content: none; }
}
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; color: var(--ink-soft); font-size: 0.78rem; }
.breadcrumb a { text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.breadcrumb span:last-child { color: var(--ink); font-weight: 700; }

.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  min-height: 380px;
  align-items: center;
  gap: clamp(28px, 5vw, 70px);
  padding: 34px 0 40px;
  border-bottom: 1px solid var(--line);
}
.subject-label { margin: 0 0 6px; color: var(--blue); font-size: 0.94rem; font-weight: 800; }
.dashboard-copy h1 { max-width: 620px; margin: 0; font-size: 2.8rem; }
.dashboard-copy > p:last-of-type { max-width: 620px; margin: 18px 0 0; color: var(--ink-soft); font-size: 1.03rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.balance-visual { margin: 0; }
.balance-visual svg { width: 100%; max-height: 300px; }
.balance-frame { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; }
.balance-cords { fill: none; stroke: var(--line-strong); stroke-width: 3; }
.balance-pans { fill: none; stroke: var(--brand); stroke-width: 7; stroke-linecap: round; }
.balance-box { fill: var(--blue-soft); stroke: var(--blue); stroke-width: 3; }
.balance-x { fill: var(--blue); font-family: var(--font-math); font-size: 22px; font-style: italic; text-anchor: middle; }
.balance-dots { fill: var(--coral); }
.balance-equation { fill: var(--ink); font-family: var(--font-math); font-size: 26px; font-weight: 700; }

.overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 30px 0; }
.overview-panel { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.overview-panel h2 { margin: 0; font-size: 1.25rem; }
.overview-panel > p:not(.eyebrow) { color: var(--ink-soft); }
.record-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin: 20px 0 0; border-top: 1px solid var(--line); }
.record-summary div { padding: 14px 5px 0; border-right: 1px solid var(--line); text-align: center; }
.record-summary div:last-child { border-right: 0; }
.record-summary dt { color: var(--ink-soft); font-size: 0.7rem; }
.record-summary dd { margin: 2px 0 0; font-weight: 850; }
.compact-flow { display: grid; gap: 11px; margin: 17px 0 0; padding: 0; list-style: none; }
.compact-flow li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; }
.compact-flow li > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: var(--radius-sm); color: #fff; background: var(--brand); font-size: 0.75rem; font-weight: 800; }
.compact-flow strong,
.compact-flow small { display: block; }
.compact-flow small { color: var(--ink-soft); }

.page-header { padding: 14px 0 30px; border-bottom: 1px solid var(--line); }
.page-header h1 { margin: 0; font-size: 2.35rem; font-family: var(--font-heading); line-height: 1.5; }
.page-header > p:last-child { max-width: 680px; margin: 12px 0 0; color: var(--ink-soft); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.section-heading h2 { margin: 0; font-size: 1.35rem; }
.section-heading > span { color: var(--ink-soft); font-size: 0.8rem; }
.unit-list { padding-top: 30px; }
.unit-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 22px; margin-top: 18px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.unit-number { color: var(--blue); font-family: var(--font-math); font-size: 1.8rem; font-weight: 800; text-align: center; }
.unit-row-copy > p:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; color: var(--ink-soft); font-size: 0.75rem; }
.unit-row-copy h3 { margin: 6px 0 3px; font-size: 1.3rem; }
.unit-row-copy > p:nth-of-type(2) { margin: 0 0 13px; color: var(--ink-soft); }

.course-terms { display: grid; gap: 34px; padding-top: 30px; }
.term-section { padding-top: 18px; border-top: 3px solid var(--line-strong); }
.term-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.term-heading > div > span { color: var(--blue); font-family: var(--font-math); font-size: 0.72rem; font-weight: 800; }
.term-heading h2 { margin: 0; font-size: 1.45rem; }
.term-heading > small { color: var(--ink-soft); font-weight: 700; }
.term-units { display: grid; gap: 10px; margin-top: 12px; }
.term-units .unit-row { margin-top: 0; }
.unit-row.is-unavailable { color: var(--ink-soft); background: var(--surface-soft); }
.unit-row.is-unavailable .unit-number { color: var(--line-strong); }
.status-chip--muted { color: var(--ink-soft); background: #dfe5e1; }
.unavailable-label { min-width: 74px; color: var(--ink-soft); font-size: 0.76rem; font-weight: 800; text-align: center; }

.grade-overview:nth-child(1) { border-top: 4px solid var(--blue); }
.grade-overview:nth-child(2) { border-top: 4px solid var(--coral); }
.grade-overview:nth-child(3) { border-top: 4px solid var(--brand); }
.grade-overview:nth-child(4) { border-top: 4px solid #8a5a9f; }
.grade-overview:nth-child(5) { border-top: 4px solid #ba6c21; }
.grade-overview:nth-child(6) { border-top: 4px solid #5272a4; }
.panel-link { display: inline-flex; margin-top: 18px; color: var(--brand); font-size: 0.84rem; font-weight: 800; text-underline-offset: 4px; }
.course-symbol--linear { background: var(--coral); }

.unit-header { display: grid; grid-template-columns: 1fr auto; gap: 35px; align-items: end; padding: 15px 0 30px; border-bottom: 1px solid var(--line); }
.unit-header h1 { margin: 0; font-size: 2.6rem; font-family: var(--font-heading); line-height: 1.5; }
.unit-header > div > p:last-child { max-width: 660px; margin: 12px 0 0; color: var(--ink-soft); }
.unit-meta { display: grid; grid-template-columns: repeat(3, 110px); margin: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.unit-meta div { padding: 12px 10px; border-right: 1px solid var(--line); text-align: center; }
.unit-meta div:last-child { border-right: 0; }
.unit-meta dt { color: var(--ink-soft); font-size: 0.68rem; }
.unit-meta dd { margin: 3px 0 0; font-size: 0.78rem; font-weight: 800; }

/* 単元TOPは、目的・意義・短い具体場面・開始導線だけを一画面で示す。 */
.unit-brief { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr); gap: clamp(18px, 3vw, 30px); margin: 24px 0 18px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.unit-brief--summary-only { grid-template-columns: minmax(0, 1fr); }
.unit-brief-summary h2 { max-width: 22ch; margin: 0; color: var(--subject-ink); font-size: clamp(1.35rem, 3vw, 1.8rem); }
.unit-brief-summary > p:not(.eyebrow) { margin: 0.75rem 0 0; font-size: 1rem; line-height: 1.8; }
.unit-brief-significance { margin-top: 1.1rem; padding: 0.8rem 0.9rem; border-left: 3px solid var(--gold); background: var(--gold-soft); }
.unit-brief-significance strong { color: var(--subject-ink); }
.unit-brief-significance p { margin: 0.25rem 0 0; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.7; }
.unit-brief-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.1rem; }
.unit-brief-actions a { margin: 0; }
.unit-brief-scenario { align-self: stretch; padding: 1.15rem 1.25rem; border: 0; border-radius: 0; background: var(--surface-soft); border-left: 2px solid var(--subject-accent); }
.unit-brief-scenario-label { display: inline-flex; margin: 0; padding: 0.25rem 0.6rem; border-radius: var(--radius-md); color: #fff; background: var(--subject-accent); font-size: 0.72rem; font-weight: 900; }
.unit-brief-scenario h3 { margin: 0.7rem 0 0; color: var(--subject-ink); font-size: 1.12rem; line-height: 1.5; }
.unit-brief-scenario-story { margin: 0.55rem 0 0; color: var(--ink); font-size: 0.88rem; line-height: 1.72; }
.unit-brief-scenario-point { margin-top: 0.75rem; padding-top: 0.65rem; border-top: 2px dotted var(--line-strong); }
.unit-brief-scenario-point strong { color: var(--subject-ink); font-size: 0.78rem; }
.unit-brief-scenario-point p { margin: 0.18rem 0 0; color: var(--ink-soft); font-size: 0.82rem; line-height: 1.65; }
.content-provenance { margin: 18px 0 26px; padding: clamp(18px, 3vw, 24px); border: 1px solid var(--line); border-left: 6px solid var(--subject-accent); border-radius: var(--radius-md); background: var(--paper); }
.content-provenance h2 { margin: 0; color: var(--subject-ink); font-size: clamp(1.2rem, 3vw, 1.5rem); }
.content-provenance h3 { margin: 1.2rem 0 0.6rem; font-size: 1rem; }
.content-provenance-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0; }
.content-provenance-badges span { padding: 0.3rem 0.65rem; border: 1px solid var(--subject-accent); border-radius: var(--radius-md); color: var(--subject-ink); background: var(--subject-soft); font-size: 0.75rem; font-weight: 850; }
.content-provenance-note,
.content-provenance-empty { margin: 0.7rem 0; color: var(--ink-soft); font-size: 0.84rem; line-height: 1.75; }
.content-provenance ul { display: grid; gap: 0.85rem; margin: 0; padding-left: 1.35rem; }
.content-provenance li p { margin: 0.25rem 0; color: var(--ink-soft); font-size: 0.82rem; line-height: 1.65; }
.content-provenance li small { display: block; color: var(--ink-soft); font-size: 0.75rem; }

.goal-panel { display: grid; grid-template-columns: 52px 1fr; gap: 18px; margin: 30px 0; padding: 22px; border: 1px solid #b9d1c5; border-left: 5px solid var(--brand); border-radius: var(--radius-sm); background: var(--brand-soft); }
.goal-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: var(--radius-md); color: #fff; background: var(--brand); font-size: 1.4rem; }
.goal-panel h2 { margin: 0; font-size: 1.3rem; }
.goal-panel ul { margin: 12px 0 0; padding-left: 1.3em; }

.content-prior { margin: 0 0 30px; padding: 20px 22px; border-left: 5px solid var(--gold); background: var(--gold-soft); }
.content-prior h2 { margin: 0; font-size: 1.2rem; }
.content-prior ul { margin: 10px 0 0; padding-left: 1.4em; }
.content-goal-ref { margin: 0 0 5px; color: var(--brand); font-size: 0.74rem !important; font-weight: 800; }
.content-formula { margin: 20px 0; padding: 16px; border: 1px solid var(--line); background: var(--paper); font-family: var(--font-math); font-size: 1.1rem !important; font-weight: 700; text-align: center; }
.worked-example-answer { margin: 0; padding: 12px 20px; border-top: 1px solid #bad2df; color: var(--correct); background: var(--correct-soft); font-weight: 800; }
.content-check-answer { color: var(--correct); font-weight: 800; }
.reasoning-process-title { margin: 18px 0 8px; color: var(--ink); font-size: 0.95rem; }
.reasoning-process { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.reasoning-process li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.reasoning-process-number { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: #fff; background: var(--subject-accent, var(--brand)); font-family: var(--font-math); font-weight: 900; }
.reasoning-process strong { display: block; color: var(--subject-ink, var(--brand)); }
.reasoning-process p { margin: 3px 0 0 !important; color: var(--ink-soft); font-size: 0.88rem !important; line-height: 1.65; }
.content-common-error { padding: 10px 12px; border-left: 4px solid var(--danger); color: #6f2e26; background: var(--danger-soft); }
.content-summary { margin-top: 30px; padding: 24px; border: 1px solid var(--line); border-top: 5px solid var(--brand); background: var(--paper); }
.content-summary h2 { margin: 0; font-size: 1.35rem; }
.content-summary ul { margin: 14px 0 0; padding-left: 1.4em; }

.stage-list-section { padding: 12px 0 30px; }
.stage-list { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.stage-list li { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 16px; padding: 17px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.stage-list li.is-complete { border-left: 5px solid var(--correct); background: #fbfdfb; }
.stage-index { color: var(--brand); font-family: var(--font-math); font-size: 1.1rem; font-weight: 800; text-align: center; }
.stage-list small { color: var(--ink-soft); font-size: 0.7rem; }
.stage-list h3 { margin: 0; font-size: 1rem; }
.stage-list p { margin: 2px 0 0; color: var(--ink-soft); font-size: 0.82rem; }
.stage-list a { padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--brand); font-size: 0.78rem; font-weight: 800; text-decoration: none; }
.stage-list-section--compact { padding: 10px 0 22px; }
.stage-list-section--compact h2 { margin: 0; font-size: 1.15rem; }
.stage-list--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.stage-list--compact li { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.55rem; padding: 0.8rem; }
.stage-list--compact .stage-index { font-size: 0.92rem; }
.stage-list--compact li > a { grid-column: 1 / -1; padding: 0.42rem 0.55rem; text-align: center; }

.understanding-panel { display: grid; grid-template-columns: minmax(240px, 0.65fr) minmax(440px, 1.35fr); min-width: 0; align-items: center; gap: 30px; margin-top: 10px; padding: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.understanding-panel h2 { margin: 0; font-size: 1.25rem; }
.understanding-panel p:last-child { margin: 7px 0 0; color: var(--ink-soft); font-size: 0.82rem; }
.understanding-scale { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; min-width: 0; max-width: 100%; gap: 6px; margin: 0; padding: 0; border: 0; }
.understanding-scale label { min-width: 0; cursor: pointer; }
.understanding-scale input { position: absolute; opacity: 0; pointer-events: none; }
.understanding-scale span { display: grid; min-height: 64px; place-content: center; padding: 5px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); font-family: var(--font-math); font-size: 1rem; font-weight: 800; text-align: center; }
.understanding-scale small { display: block; color: var(--ink-soft); font-family: var(--font-sans); font-size: 0.58rem; font-weight: 600; }
.understanding-scale input:checked + span { border: 2px solid var(--brand); color: #fff; background: var(--brand); }
.understanding-scale input:checked + span small { color: #fff; }
.understanding-scale input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }

.lesson-header { padding: 14px 0 30px; border-bottom: 1px solid var(--line); }
.lesson-header > div { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 0.76rem; }
.lesson-header h1 { max-width: 760px; margin: 12px 0 0; font-size: 2.35rem; font-family: var(--font-heading); line-height: 1.5; }
.lesson-header > p { max-width: 720px; margin: 13px 0 0; color: var(--ink-soft); font-size: 1rem; }

.lesson-section { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 22px; padding: 36px 0; border-bottom: 1px solid var(--line); }
.lesson-section-body { min-width: 0; }
.section-number { margin: 4px 0 0; color: var(--blue); font-family: var(--font-math); font-size: 1.15rem; font-weight: 800; }
.lesson-section-body > h2 { margin: 0 0 16px; font-size: 1.55rem; }
.lesson-section-body > p { font-size: 1rem; line-height: 1.95; }

.term-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 22px 0; }
.term-list div { padding: 15px; border-left: 4px solid var(--blue); background: var(--blue-soft); }
.term-list dt { color: var(--blue); font-weight: 850; }
.term-list dd { margin: 3px 0 0; font-size: 0.86rem; }
.equation-anatomy { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 15px; max-width: 520px; margin: 25px auto 5px; }
.equation-anatomy div { padding: 16px; border-bottom: 4px solid var(--blue); background: var(--paper); text-align: center; }
.equation-anatomy div:last-child { border-color: var(--coral); }
.equation-anatomy small,
.equation-anatomy strong { display: block; }
.equation-anatomy small { color: var(--ink-soft); font-size: 0.7rem; }
.equation-anatomy strong { font-family: var(--font-math); font-size: 1.8rem; }
.equation-anatomy > span { font-family: var(--font-math); font-size: 1.8rem; }

.balance-explanation { margin: 24px 0; }
.mini-balance { position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: 540px; margin: 0 auto; padding: 18px 35px 48px; background: var(--paper); text-align: center; }
.mini-balance::after { position: absolute; right: 14%; bottom: 35px; left: 14%; height: 5px; background: var(--ink); content: ""; }
.mini-balance i { position: absolute; bottom: 0; left: 50%; width: 6px; height: 38px; background: var(--ink); transform: translateX(-50%); }
.mini-balance span { padding: 10px; border-bottom: 4px solid var(--brand); font-family: var(--font-math); font-size: 1.35rem; }
.balance-explanation figcaption { max-width: 620px; margin: 13px auto 0; color: var(--ink-soft); font-size: 0.8rem; text-align: center; }

.worked-example { margin: 20px 0; border: 1px solid #bad2df; border-radius: var(--radius-sm); background: var(--paper); overflow: hidden; }
.worked-example-heading { display: grid; grid-template-columns: 80px 1fr; align-items: center; border-bottom: 1px solid #bad2df; background: var(--blue-soft); }
.worked-example-heading span { align-self: stretch; display: grid; place-items: center; color: #fff; background: var(--blue); font-size: 0.78rem; font-weight: 800; }
.worked-example-heading p { margin: 0; padding: 12px 15px; font-weight: 800; }
.equation-steps { display: grid; gap: 0; margin: 0; padding: 13px 20px; list-style: none; }
.equation-steps li { display: grid; grid-template-columns: minmax(180px, 1fr) 1fr; gap: 20px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.equation-steps li:last-child { border-bottom: 0; }
.equation-steps span { font-family: var(--font-math); font-size: 1.08rem; font-weight: 700; }
.equation-steps small { color: var(--ink-soft); }
.inline-check { margin-top: 28px; padding: 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); }
.inline-check h3 { margin: 11px 0 14px; font-size: 1.05rem; }

.verification-line { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 8px; margin: 22px 0; padding: 14px; border: 1px solid var(--line); background: var(--paper); }
.verification-line span { color: var(--ink-soft); font-size: 0.7rem; }
.verification-line strong { font-family: var(--font-math); text-align: center; }
.verification-line b { padding: 4px 7px; color: var(--correct); background: var(--correct-soft); font-size: 0.72rem; }

.property-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 22px 0; }
.property-grid div { padding: 15px; border-top: 4px solid var(--brand); background: var(--paper); }
.property-grid small,
.property-grid strong { display: block; }
.property-grid small { color: var(--ink-soft); }
.property-grid strong { margin-top: 7px; font-family: var(--font-math); font-size: 1.08rem; text-align: center; }

.transition-example { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin: 25px 0; padding: 20px; border: 1px solid var(--line); background: var(--paper); font-family: var(--font-math); font-size: 1.25rem; }
.transition-example mark { padding: 1px 4px; color: var(--danger); background: var(--danger-soft); }
.transition-example strong { color: var(--correct); }

.mistake-list { display: grid; gap: 10px; margin-top: 20px; }
.mistake-list article { display: grid; grid-template-columns: 70px 1fr; border: 1px solid var(--line); background: var(--paper); }
.mistake-list article > span { display: grid; place-items: center; color: #fff; background: var(--coral); font-size: 0.75rem; font-weight: 800; }
.mistake-list article > div { padding: 12px 15px; }
.mistake-list p { margin: 0; color: var(--danger); }
.mistake-list strong,
.mistake-list small { display: block; }
.mistake-list small { margin-top: 3px; color: var(--ink-soft); }

.formula-parts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 22px 0; }
.formula-parts > div { display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 15px; border-top: 4px solid var(--coral); background: var(--paper); }
.formula-parts strong { grid-row: 1 / 3; color: var(--coral); font-family: var(--font-math); font-size: 1.8rem; text-align: center; }
.formula-parts span { font-weight: 850; }
.formula-parts small { color: var(--ink-soft); }

.table-wrap { max-width: 100%; margin: 20px 0; overflow-x: auto; }
.value-table { width: 100%; min-width: 430px; border-collapse: collapse; background: var(--paper); text-align: center; }
.value-table caption { padding: 10px; color: var(--blue); font-weight: 800; text-align: left; }
.value-table th,
.value-table td { min-width: 64px; padding: 11px; border: 1px solid var(--line); }
.value-table th { color: #fff; background: var(--blue); }
.value-table .change-row th,
.value-table .change-row td { color: var(--ink-soft); background: var(--blue-soft); font-size: 0.8rem; }
.math-note { padding: 14px 16px; border-left: 4px solid var(--gold); background: var(--gold-soft); font-weight: 700; }
.math-note span { font-family: var(--font-math); }

.linear-graph-card { margin: 22px 0 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); overflow: hidden; }
.linear-graph-card svg { width: 100%; aspect-ratio: 31 / 18; }
.linear-graph-card figcaption { padding: 13px 16px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.8rem; }
.graph-grid path { fill: none; stroke: var(--line); stroke-width: 1; }
.graph-axes path { fill: none; stroke: var(--ink); stroke-width: 2; }
.graph-labels text { fill: var(--ink-soft); font-family: var(--font-math); font-size: 14px; }
.linear-function-line { fill: none; stroke: var(--coral); stroke-width: 5; stroke-linecap: round; }
.linear-points circle { fill: var(--blue); stroke: #fff; stroke-width: 3; }
.graph-formula-label rect { fill: var(--coral-soft); stroke: var(--coral); }
.graph-formula-label text { fill: var(--ink); font-family: var(--font-math); font-size: 18px; font-weight: 700; }

.lesson-actions { display: flex; justify-content: space-between; gap: 14px; padding-top: 28px; }

.note-panel {
  display: grid;
  gap: 14px;
  margin-top: 30px;
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-top: 5px solid var(--blue);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.note-panel h2 { margin: 0; font-size: 1.25rem; }
.note-panel-heading p { margin-bottom: 3px; }
.note-field { display: grid; gap: 7px; color: var(--ink-soft); font-size: 0.82rem; font-weight: 800; }
.note-field textarea,
.open-assessment-field textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: #fcfdfb;
  font: inherit;
  font-weight: 400;
  line-height: 1.7;
}
.note-field textarea::placeholder { color: var(--ink-soft); opacity: 0.9; }
.note-status { margin: 0; color: var(--ink-soft); font-size: 0.76rem; }
.note-status.is-error { color: var(--danger); }

.summary-band { margin: 30px 0 5px; padding: 24px; border-top: 5px solid var(--gold); background: var(--gold-soft); }
.summary-band h2 { margin: 0; font-size: 1.45rem; }
.summary-band ul { margin: 15px 0 0; padding-left: 1.3em; }
.summary-band li + li { margin-top: 7px; }
.solve-recipe { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.solve-recipe li { display: grid; grid-template-columns: 36px 1fr; gap: 11px; padding: 14px; border: 1px solid var(--line); background: var(--paper); }
.solve-recipe li > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: var(--radius-sm); color: #fff; background: var(--brand); font-weight: 800; }
.solve-recipe p { margin: 3px 0 0; color: var(--ink-soft); font-size: 0.8rem; }
.review-checks { padding: 34px 0; border-bottom: 1px solid var(--line); }
.review-checks > article { margin-top: 13px; padding: 18px; border-left: 4px solid var(--blue); background: var(--paper); }
.review-checks h3 { margin: 10px 0 14px; font-size: 1rem; }

.quiz-form { margin-top: 28px; }
.quiz-mission {
  margin-top: 28px;
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--gold-soft);
  border-top: 3px solid var(--gold);
}
.quiz-mission-heading h2 { margin: 0; color: #7a3c15; font-size: clamp(1.35rem, 3vw, 1.8rem); }
.quiz-mission-heading > p:not(.eyebrow) { max-width: 52ch; margin: 8px 0 0; color: #654f37; }
.quiz-mission-heading--active { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.quiz-mission-heading--active .eyebrow { flex-basis: 100%; }
.quiz-mission-heading--active > p:not(.eyebrow) { margin: 0; color: var(--ink-soft); font-size: 0.84rem; }
.quiz-mission-rules { display: grid; gap: 8px; margin: 20px 0; padding: 0; list-style: none; }
.quiz-mission-rules li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 7px; align-items: start; color: #654f37; font-size: 0.88rem; }
.quiz-mission-rules li > span:first-child { color: #bd6b1c; font-weight: 900; }
.quiz-mission-progress { display: flex; gap: 8px; margin: 18px 0; padding: 0; list-style: none; }
.quiz-mission-progress li { display: grid; width: 32px; height: 32px; place-items: center; border: 2px solid #d9ac7b; border-radius: 50%; color: #7a5735; background: #fffdf7; font-size: 0.78rem; font-weight: 900; }
.quiz-mission-progress li.is-current { border-color: #c66a23; color: #fff; background: #c66a23; box-shadow: none; }
.quiz-mission-progress li.is-complete { border-color: var(--correct); color: #fff; background: var(--correct); }
.quiz-mission-form { margin-top: 8px; }
.quiz-mission-form fieldset { margin: 0; padding: 0; border: 0; }
.quiz-mission-form legend { width: 100%; padding: 0 0 15px; color: #49351f; font-size: 1.04rem; font-weight: 850; }
.quiz-mission-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quiz-mission-options label { display: grid; grid-template-columns: auto 34px 1fr; align-items: center; min-height: 52px; padding: 7px 10px; border: 2px solid #e0bd8e; border-radius: var(--radius-md); color: var(--ink); background: rgba(255, 255, 255, 0.82); cursor: pointer; }
.quiz-mission-options label:hover { border-color: #c66a23; }
.quiz-mission-options input { width: 18px; height: 18px; margin: 0 8px 0 0; accent-color: #b85f1e; }
.quiz-mission-options label > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #7a5735; background: #ffebc7; font-family: var(--font-math); font-weight: 850; }
.quiz-mission-options label > strong { font-size: 0.9rem; }
.quiz-mission-options label.is-correct { border-color: var(--correct); background: var(--correct-soft); }
.quiz-mission-options label.is-selected-wrong { border-color: var(--danger); background: var(--danger-soft); }
.quiz-mission-status { min-height: 1.75em; margin: 12px 0; color: #7a3c15; font-size: 0.84rem; font-weight: 700; }
.quiz-mission-feedback { margin-top: 18px; padding: 16px; border-left: 5px solid var(--correct); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--correct-soft); }
.quiz-mission-feedback.is-incorrect { border-color: #d57c37; background: #fff0dc; }
.quiz-mission-feedback p { margin: 6px 0 0; font-size: 0.86rem; }
.quiz-mission-feedback .common-error-note { padding-top: 8px; border-top: 1px solid rgba(122, 60, 21, 0.22); color: #6f3f1d; }
.quiz-mission-next { margin-top: 14px; }
.quiz-mission-result { padding: 18px; border: 2px solid var(--correct); border-radius: var(--radius-md); background: var(--correct-soft); }
.quiz-mission-result h2 { margin: 0; color: var(--correct); font-size: 1.35rem; }
.quiz-mission-result > p:not(.eyebrow) { margin: 8px 0 0; }
.quiz-mission-result-note { color: var(--ink-soft); font-size: 0.84rem; }
.quiz-mission-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.open-assessment-page { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 22px; }
.open-assessment-page > * { min-width: 0; max-width: 100%; }
.open-assessment-page[hidden] { display: none !important; }
.open-assessment-notice { border-left-color: var(--brand); }
.open-assessment-form { display: grid; min-width: 0; gap: 22px; }
.open-assessment-prompts { display: grid; min-width: 0; max-width: 100%; gap: 16px; }
.open-assessment-field { min-width: 0; max-width: 100%; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow-wrap: anywhere; }
.open-assessment-field > p { margin-top: 0; }
.open-assessment-field .question-label { display: flex; width: auto; max-width: 100%; }
.open-assessment-field label { display: grid; min-width: 0; max-width: 100%; gap: 10px; font-weight: 750; }
.open-assessment-field textarea { width: 100%; min-width: 0; max-width: 100%; min-height: 8rem; resize: vertical; }
.assessment-success-criteria {
  margin: 2px 0;
  padding: 10px 12px;
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  font-size: 0.78rem;
  font-weight: 500;
}
.assessment-success-criteria summary { color: var(--brand-deep); font-weight: 750; cursor: pointer; }
.assessment-check-details > summary { padding: 12px 0; font-weight: 750; cursor: pointer; }
.assessment-success-criteria ul { display: grid; gap: 3px; margin: 6px 0 0; padding-left: 1.2rem; }
.open-assessment-checklist { display: grid; min-width: 0; max-width: 100%; gap: 10px; margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); overflow-wrap: anywhere; }
.open-assessment-checklist legend { padding: 0 6px; font-weight: 850; }
.open-assessment-checklist label { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.open-assessment-checklist input { width: 1.15rem; height: 1.15rem; margin-top: 0.18rem; accent-color: var(--brand); }
.open-assessment-actions { display: flex; min-width: 0; max-width: 100%; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.open-assessment-status { flex: 1 1 20rem; margin: 0; color: var(--ink-soft); }
.open-assessment-status.is-error { color: var(--danger); }

@media (max-width: 1120px) {
  .open-assessment-page .understanding-panel { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

.quiz-questions { display: grid; gap: 18px; }
.quiz-question { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); overflow: hidden; }
.quiz-question-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.quiz-question-heading span { color: var(--brand); font-weight: 850; }
.quiz-question-heading small { color: var(--ink-soft); }
.quiz-question fieldset { margin: 0; padding: 18px; border: 0; }
.quiz-question legend { width: 100%; padding: 0 0 15px; font-size: 1rem; font-weight: 800; }
.quiz-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quiz-options label { display: grid; grid-template-columns: auto 34px 1fr; align-items: center; min-height: 48px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; }
.quiz-options label:hover { border-color: var(--blue); }
.quiz-options input { width: 18px; height: 18px; margin: 0 8px 0 0; accent-color: var(--brand); }
.quiz-options label > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: var(--radius-sm); color: var(--ink-soft); background: var(--surface-soft); font-family: var(--font-math); font-weight: 800; }
.quiz-options label > strong { font-size: 0.9rem; }
.quiz-options label.is-correct { border: 2px solid var(--correct); background: var(--correct-soft); }
.quiz-options label.is-selected-wrong { border: 2px solid var(--danger); background: var(--danger-soft); }
.quiz-answer-feedback { margin: 0 18px 18px; padding: 14px; border-left: 5px solid var(--correct); background: var(--correct-soft); }
.quiz-answer-feedback.is-incorrect { border-color: var(--danger); background: var(--danger-soft); }
.quiz-answer-feedback p { margin: 5px 0 0; font-size: 0.84rem; }
.quiz-answer-feedback .reasoning-process { margin-top: 8px; }
.quiz-answer-feedback .common-error-note { padding-top: 7px; border-top: 1px solid rgba(164, 63, 52, 0.25); color: #6f2e26; }
.quiz-diagnostic { margin-top: 12px; padding: 14px; border: 1px solid #d8a76f; border-radius: var(--radius-sm); background: #fffdf7; }
.quiz-diagnostic > p { margin: 6px 0; }
.quiz-diagnostic details { margin-top: 10px; }
.quiz-diagnostic-prompt { font-weight: 800; }
.quiz-diagnostic-link { display: inline-flex; margin-top: 12px; }
.quiz-submit-row { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-top: 22px; }
.quiz-submit-row p { flex: 1; margin: 0; color: var(--danger); font-size: 0.82rem; }
.noscript-message { padding: 14px; border-left: 4px solid var(--danger); background: var(--danger-soft); }

.quiz-result { margin: 30px 0; padding: 24px; border: 1px solid #b8d3c2; border-top: 6px solid var(--correct); border-radius: var(--radius-sm); background: var(--correct-soft); }
.quiz-result h2 { margin: 0; }
.score-display { display: flex; align-items: baseline; gap: 7px; margin-top: 12px; }
.score-display strong { color: var(--correct); font-family: var(--font-math); font-size: 3rem; line-height: 1; }
.score-display b { margin-left: auto; padding: 5px 10px; border: 1px solid var(--correct); border-radius: var(--radius-sm); color: var(--correct); background: var(--paper); }
.understanding-panel--quiz { margin-top: 32px; }

.error-screen { max-width: 620px; margin: 80px auto; padding: 34px; border: 1px solid var(--line); background: var(--paper); text-align: center; }
.error-screen h1 { margin: 0; }
.error-screen p:not(.eyebrow) { margin-bottom: 24px; color: var(--ink-soft); }

.curriculum-finder {
  margin-top: 38px;
  padding: 0;
  border: 0;
  border-top: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.curriculum-finder-heading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.curriculum-finder-heading h2 { margin: 3px 0 0; font-size: 1.55rem; }
.curriculum-finder-guide { display: grid; justify-items: start; gap: 8px 24px; grid-template-columns: minmax(0, 1fr) auto; }
.curriculum-finder-guide > p { margin: 0; color: var(--ink-soft); font-size: 0.76rem; }
.curriculum-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.curriculum-field { display: grid; gap: 7px; color: var(--ink-soft); font-size: 0.8rem; font-weight: 800; }
.curriculum-field select {
  width: 100%;
  min-height: 48px;
  padding: 9px 36px 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  font-size: 0.95rem;
}
.curriculum-filter-help { margin: 11px 0 0; color: var(--ink-soft); font-size: 0.76rem; }
.curriculum-status { margin: 22px 0 10px; color: var(--brand); font-weight: 850; }
.curriculum-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.curriculum-result { display: flex; min-width: 0; flex-direction: column; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.curriculum-result h3 { margin: 8px 0 5px; font-size: 1.1rem; }
.curriculum-result > p:not(.curriculum-result-meta) { margin: 0; color: var(--ink-soft); font-size: 0.84rem; }
.curriculum-result-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.curriculum-result-meta span { padding: 3px 7px; border-radius: var(--radius-sm); color: var(--brand-deep); background: var(--brand-soft); font-size: 0.7rem; font-weight: 850; }
.curriculum-result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; }
.curriculum-result-actions a { flex: 1 1 135px; text-align: center; }

.subject-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 22px; margin: 22px 0 38px; padding: 15px 22px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); counter-reset: subject-index; }
.subject-index a { display: flex; min-height: 44px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.8rem; font-weight: 700; text-decoration: none; }
.subject-index a::before { counter-increment: subject-index; content: counter(subject-index, decimal-leading-zero); flex: 0 0 1.4rem; color: var(--accent); font-family: var(--font-math); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.subject-index a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 4px; }
.subject-index a:nth-last-child(-n + 4) { border-bottom: 0; }
.course-category-list { counter-reset: subject-category; }
.course-category > header::before { counter-increment: subject-category; content: counter(subject-category, decimal-leading-zero); position: absolute; top: 0; left: 0; color: var(--accent); font-family: var(--font-heading); font-size: 1.6rem; line-height: 1.5; }
.course-category h2 { scroll-margin-top: calc(var(--header-height) + 30px); }
.curriculum-finder-guide .collection-notice { grid-column: 1 / -1; padding: 10px 14px; border-left: 2px solid var(--line-strong); background: var(--surface-soft); }
.curriculum-finder-guide .secondary-button { grid-column: 2; grid-row: 2; align-self: center; font-size: 0.76rem; }

.course-category-list,
.problem-category-list { display: grid; gap: 26px; margin-top: 22px; }
.course-category,
.problem-category { padding-top: 4px; }
.course-category > header { margin-bottom: 16px; position: relative; padding: 0 0 14px 46px; border-bottom: 1px solid var(--line); }
.course-category h2,
.problem-category h2 { margin: 0; font-size: 1.35rem; }
.course-category > header > p:last-child { max-width: 52ch; margin: 8px 0 0; color: var(--ink-soft); font-size: 0.82rem; }
.course-menu-grid,
.problem-article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.course-menu-card,
.problem-article-card { display: flex; min-width: 0; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.course-menu-card h3,
.problem-article-card h3 { margin: 3px 0 6px; font-size: 1.15rem; }
.course-menu-card > p:not(.eyebrow),
.problem-article-card > p:not(.problem-article-card-meta) { margin: 0; color: var(--ink-soft); font-size: 0.83rem; }
.course-pathway-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 3px 0 8px; }
.course-pathway-badges span { padding: 2px 7px; border: 1px solid var(--subject-accent); border-radius: var(--radius-md); color: var(--subject-ink); background: var(--subject-soft); font-size: 0.68rem; font-weight: 850; }
.course-menu-card > .course-pathway-note,
.course-page-header > .course-pathway-note { margin: 0 0 10px; color: var(--ink-soft); font-size: 0.78rem; }
.course-menu-card .secondary-button,
.problem-article-card .primary-button { margin-top: auto; padding-top: 9px; margin-block-start: 18px; }
.problem-article-card .primary-button { justify-content: space-between; border-color: var(--line-strong); color: var(--brand); background: var(--paper); }
.problem-article-card .primary-button::after { content: "→"; }
.problem-article-card .primary-button:hover { border-color: var(--brand); background: var(--brand-soft); }
.problem-article-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.problem-article-card-meta span { padding: 2px 7px; border-radius: var(--radius-sm); color: var(--brand-deep); background: var(--brand-soft); font-size: 0.7rem; font-weight: 850; }

.library-screen { padding-bottom: 36px; }
.collection-notice { margin: 20px 0 0; padding: 12px 15px; border-left: 4px solid var(--blue); color: var(--ink-soft); background: var(--blue-soft); font-size: 0.84rem; }
.collection-toolbar { display: flex; justify-content: flex-end; margin: 18px 0 12px; }
.collection-list { display: grid; gap: 10px; }
.collection-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 17px 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.collection-item h2 { margin: 3px 0; font-size: 1.12rem; }
.collection-item p { margin: 0; color: var(--ink-soft); font-size: 0.8rem; }
.collection-item-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.collection-item-meta span { padding: 2px 7px; border-radius: var(--radius-sm); color: var(--brand-deep); background: var(--brand-soft); font-size: 0.7rem; font-weight: 850; }
.collection-item-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
.collection-empty { margin: 0; padding: 32px 18px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); color: var(--ink-soft); background: var(--surface-soft); text-align: center; }
.unit-header .bookmark-button { grid-column: 1 / -1; align-self: start; justify-self: end; }

@media (max-width: 980px) {
  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-menu-grid,
  .problem-article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unit-header { grid-template-columns: 1fr; }
  .unit-meta { grid-template-columns: repeat(3, 1fr); }
  .unit-brief { grid-template-columns: 1fr; }
  .stage-list--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .understanding-panel { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 720px) {
  .curriculum-finder { padding: 20px; }
  .curriculum-finder-heading,
  .curriculum-filter-grid,
  .curriculum-results { grid-template-columns: 1fr; }
  .course-menu-grid,
  .problem-article-grid { grid-template-columns: 1fr; }
  .collection-item { grid-template-columns: 1fr; align-items: start; }
  .collection-item-actions { justify-content: start; }
  .unit-header .bookmark-button { justify-self: end; }
  .overview-grid { grid-template-columns: 1fr; }
  .dashboard-hero { grid-template-columns: 1fr; min-height: auto; gap: 12px; padding-top: 18px; }
  .dashboard-copy h1 { font-size: 2rem; }
  .balance-visual { max-width: 420px; margin: 0 auto; }
  .overview-grid { grid-template-columns: 1fr; }
  .page-header h1,
  .unit-header h1,
  .lesson-header h1 { font-size: 1.8rem; }
  .unit-row { grid-template-columns: 48px 1fr; }
  .unit-row > .secondary-button { grid-column: 1 / -1; }
  .unit-row > .unavailable-label { grid-column: 1 / -1; text-align: right; }
  .unit-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .unit-meta div { min-width: 0; padding: 10px 5px; border-right: 1px solid var(--line); border-bottom: 0; }
  .unit-meta div:last-child { border-right: 0; }
  .goal-panel { grid-template-columns: 1fr; }
  .stage-list li { grid-template-columns: 42px 1fr; }
  .stage-list li > a { grid-column: 1 / -1; text-align: center; }
  .understanding-scale { grid-template-columns: repeat(5, minmax(50px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
  .lesson-section { grid-template-columns: 1fr; gap: 5px; padding: 29px 0; }
  .term-list,
  .formula-parts,
  .property-grid,
  .solve-recipe { grid-template-columns: 1fr; }
  .verification-line { grid-template-columns: 1fr 1fr; }
  .verification-line b { grid-column: 1 / -1; text-align: center; }
  .quiz-options { grid-template-columns: 1fr; }
  .quiz-mission-options { grid-template-columns: 1fr; }
  .open-assessment-field { padding: 14px; }
  .open-assessment-actions .primary-button { width: 100%; }
  .spaced-review-list { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .unit-brief { padding: 17px; }
  .unit-brief-actions { align-items: stretch; flex-direction: column; }
  .unit-brief-actions a { justify-content: center; text-align: center; }
  .stage-list--compact { grid-template-columns: 1fr; }
  .record-summary { grid-template-columns: 1fr; }
  .record-summary div { border-right: 0; border-bottom: 1px solid var(--line); }
  .record-summary div:last-child { border-bottom: 0; }
  .equation-anatomy { grid-template-columns: 1fr; }
  .equation-anatomy > span { text-align: center; }
  .worked-example-heading { grid-template-columns: 64px 1fr; }
  .equation-steps li { grid-template-columns: 1fr; gap: 1px; }
  .transition-example { flex-direction: column; }
  .mistake-list article { grid-template-columns: 55px 1fr; }
  .lesson-actions { flex-direction: column-reverse; }
  .quiz-submit-row { align-items: stretch; flex-direction: column; }
}

@media print {
  .lesson-section { break-inside: avoid; }
  .worked-example,
  .callout,
  .inline-check { break-inside: avoid; box-shadow: none; }
  .lesson-header h1 { font-size: 22pt; }
}

/* ノート風教材、教科色、図解、役立ち方、応用問題を定義する。 */
[data-subject="math"] { --subject-accent: #2768a2; --subject-soft: #e2effa; --subject-ink: #174c78; }
[data-subject="science"] { --subject-accent: #28784e; --subject-soft: #e2f3e8; --subject-ink: #165d39; }
[data-subject="japanese"] { --subject-accent: #a44a63; --subject-soft: #fae7ed; --subject-ink: #7f3048; }
[data-subject="english"] { --subject-accent: #9a6421; --subject-soft: #fff0d5; --subject-ink: #704512; }
[data-subject="social"] { --subject-accent: #6a559a; --subject-soft: #eee9fa; --subject-ink: #4f3c7b; }
[data-subject="life"] { --subject-accent: #a05a2c; --subject-soft: #fff0dc; --subject-ink: #713a17; }

/* 見開きの余白と朱色のしおりを、ホームの識別要素にする。 */
.notebook-hero {
  position: relative;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.9fr);
  gap: clamp(28px, 5vw, 64px);
  min-height: 400px;
  padding: 20px 0 44px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
}
.notebook-hero .dashboard-copy { align-self: center; }
.notebook-hero .dashboard-copy h1 { max-width: none; margin-top: 16px; font-family: var(--font-heading); font-size: clamp(2.1rem, 3.25vw, 3rem); font-weight: 700; line-height: 1.6; letter-spacing: -0.05em; }
.notebook-hero .dashboard-copy h1 > span { display: block; color: var(--accent-deep); }
.notebook-hero .dashboard-copy > p:not(.eyebrow, .subject-label) { max-width: 34em; font-size: 0.92rem; line-height: 1.95; }
.notebook-hero .subject-label { margin: 0; color: var(--ink-soft); font-size: 0.8rem; font-weight: 500; }
.notebook-hero .eyebrow { margin-bottom: 12px; }
.hero-actions .primary-button { gap: 18px; }
.hero-study-map {
  position: relative;
  align-self: stretch;
  margin: 0;
  padding: 30px 28px 24px 36px;
  border: 1px solid var(--line);
  border-left: 4px double var(--line-strong);
  background: var(--paper);
}
.hero-study-map::before { content: ""; position: absolute; top: -1px; right: 25px; width: 13px; height: 37px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 81%, 0 100%); }
.hero-study-map h2 { margin: 8px 0 20px; color: var(--ink); font-size: 1.15rem; }
.hero-study-map > div { display: grid; gap: 0; }
.hero-study-map > div > span { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 16px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.hero-study-map svg { grid-row: span 2; width: 44px; height: 44px; stroke: var(--brand); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.hero-study-map .diagram-accent { stroke: var(--accent); }
.hero-study-map strong { font-size: 0.94rem; }
.hero-study-map small { color: var(--ink-soft); font-size: 0.76rem; }
.hero-study-map figcaption { margin-top: 10px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.72rem; line-height: 1.8; }
.sketch-label { margin: 0; padding-right: 12px; color: var(--accent); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; }

.featured-section { margin-top: 52px; }
.featured-section > .section-heading { align-items: end; }
.featured-section > .section-heading > p { max-width: 32ch; margin: 0; color: var(--ink-soft); font-size: 0.82rem; text-align: right; }
.featured-unit { position: relative; overflow: hidden; border-top: 3px solid var(--subject-accent); }
.featured-unit h2 { color: var(--subject-ink); }

.course-screen { max-width: 1040px; margin: 0 auto; }
.course-page-header { position: relative; padding: clamp(24px, 5vw, 42px); overflow: hidden; border: 1px solid var(--line); border-top: 3px solid var(--subject-accent); border-radius: var(--radius-md); background: var(--paper); box-shadow: none; }
.course-page-header > * { position: relative; z-index: 1; }
.course-page-header h1 { color: var(--subject-ink); }
.course-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); max-width: 48rem; margin: 1.4rem 0 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,255,255,0.86); }
.course-summary div { padding: 0.75rem 1rem; border-right: 1px dashed var(--line-strong); }
.course-summary div:last-child { border-right: 0; }
.course-summary dt { color: var(--ink-soft); font-size: 0.7rem; font-weight: 800; }
.course-summary dd { margin: 0.1rem 0 0; color: var(--subject-ink); font-weight: 900; }
.unit-row[data-subject],
.course-menu-card[data-subject],
.problem-article-card[data-subject] { border-top: 3px solid var(--subject-accent); }
.unit-row[data-subject] .unit-number { color: var(--subject-ink); background: var(--subject-soft); }
.course-menu-card[data-subject] h3,
.problem-article-card[data-subject] h3 { color: var(--subject-ink); }

.notebook-page .unit-header,
.notebook-page .lesson-header {
  position: relative;
  overflow: hidden;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--subject-accent);
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: none;
}
.notebook-page .unit-header h1,
.notebook-page .lesson-header h1 { color: var(--ink); overflow-wrap: anywhere; word-break: auto-phrase; text-decoration: none; text-underline-offset: 0.18em; text-decoration-skip-ink: auto; }
.notebook-page .phase-chip { border: 1px solid currentColor; border-radius: var(--radius-sm); }

.usefulness-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(250px, 0.9fr);
  gap: clamp(18px, 4vw, 38px);
  margin: 30px 0;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  border-top: 3px solid var(--subject-accent);
}
.usefulness-panel h2 { margin: 0; color: var(--subject-ink); font-size: clamp(1.45rem, 3vw, 2rem); }
.usefulness-panel > div > p:not(.eyebrow) { font-size: 1.02rem; line-height: 1.9; }
.usefulness-examples { display: grid; gap: 0.7rem; align-content: center; margin: 0; padding: 0; list-style: none; }
.usefulness-examples li { display: grid; grid-template-columns: 2.7rem 1fr; gap: 0.7rem; align-items: center; padding: 0.75rem; border: 2px dashed color-mix(in srgb, var(--subject-accent) 42%, #fff); border-radius: var(--radius-md); background: rgba(255,255,255,0.82); }
.usefulness-examples li > span { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border-radius: 50%; color: #fff; background: var(--subject-accent); font-family: var(--font-math); font-size: 0.72rem; font-weight: 900; }
.usefulness-examples p { margin: 0.12rem 0 0; color: var(--ink-soft); font-size: 0.78rem; line-height: 1.55; }
.reading-guide { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.reading-guide li { display: inline-flex; gap: 0.35rem; align-items: center; padding: 0.32rem 0.65rem; border-radius: var(--radius-md); color: var(--subject-ink); background: rgba(255,255,255,0.78); font-size: 0.74rem; }

.concept-diagram { margin: 30px 0; padding: clamp(20px, 4vw, 34px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); box-shadow: none; border-top: 3px solid var(--subject-accent); }
.concept-diagram-heading { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.concept-diagram-heading h2 { flex: 1 1 18rem; margin: 0; color: var(--subject-ink); font-size: clamp(1.25rem, 3vw, 1.7rem); }
.concept-diagram-canvas { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(0.45rem, 2vw, 1rem); align-items: stretch; margin-top: 1.25rem; }
.concept-node { position: relative; display: grid; min-width: 0; min-height: 10rem; place-items: center; align-content: center; gap: 0.28rem; padding: 1rem; border: 1px solid var(--subject-accent); border-radius: var(--radius-md); background: var(--subject-soft); text-align: center; }
.concept-node:nth-of-type(3) { transform: none; }
.concept-node:nth-of-type(5) { transform: none; }
.concept-node-symbol { display: grid; min-width: 3.2rem; min-height: 3.2rem; place-items: center; padding: 0.35rem; border-radius: 50%; color: #fff; background: var(--subject-accent); font-family: var(--font-math); font-size: clamp(1rem, 3vw, 1.4rem); font-weight: 900; }
.concept-node strong { color: var(--subject-ink); }
.concept-node small { color: var(--ink-soft); line-height: 1.45; }
.concept-arrow { align-self: center; color: var(--subject-accent); font-size: 1.7rem; font-weight: 900; }
.concept-diagram--compare .concept-arrow { font-size: 0; }
.concept-diagram--compare .concept-arrow::before { content: "↔"; font-size: 1.7rem; }
.concept-diagram--balance .concept-arrow { font-size: 0; }
.concept-diagram--balance .concept-arrow::before { content: "＝"; font-size: 1.4rem; }
.concept-diagram--branch .concept-arrow { font-size: 0; }
.concept-diagram--branch .concept-arrow::before { content: "分ける"; font-size: 0.68rem; writing-mode: vertical-rl; }
.concept-diagram--cycle .concept-arrow:last-of-type { transform: rotate(28deg); }
.concept-diagram figcaption { display: flex; gap: 0.7rem; align-items: center; margin-top: 1.2rem; padding-top: 0.85rem; border-top: 2px dashed var(--line-strong); color: var(--ink-soft); font-size: 0.8rem; }
.concept-diagram figcaption > span:first-child { display: grid; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; background: var(--gold-soft); font-size: 1.15rem; }
.concept-diagram figcaption > span:last-child { display: grid; }
.concept-diagram figcaption strong { color: var(--subject-ink); }
.concept-diagram--stage { border-style: solid; background: var(--surface-soft); box-shadow: none; }
.concept-diagram--stage .concept-node { min-height: 8.5rem; background: rgba(255,255,255,0.88); }

.point-deck { margin: 30px 0; padding: clamp(20px, 4vw, 32px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); box-shadow: none; border-top: 3px solid var(--subject-accent); }
.point-deck > h2 { margin: 0; color: var(--subject-ink); font-size: clamp(1.35rem, 3vw, 1.75rem); }
.point-deck-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.9rem; margin: 1.15rem 0 0; padding: 0; list-style: none; counter-reset: none; }
.point-deck-grid li { min-width: 0; padding: 1rem; border: 1px solid color-mix(in srgb, var(--subject-accent) 38%, #fff); border-radius: var(--radius-md); background: rgba(255,255,255,0.9); }
.point-deck-number { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: 50%; color: #fff; background: var(--subject-accent); font-family: var(--font-math); font-weight: 900; }
.point-deck-grid strong { color: var(--subject-ink); }
.point-deck-grid p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.7; }

.notebook-page .goal-panel { border: 1px solid var(--line); border-left: 3px solid var(--subject-accent); border-radius: var(--radius-sm); background: var(--subject-soft); }
.notebook-page .goal-icon { color: #fff; background: var(--subject-accent); }
.notebook-page .lesson-section { position: relative; padding-inline: 0; border-bottom: 1px solid var(--line); }
.notebook-page .lesson-section-body { padding: 0; }
.notebook-page .section-number { position: relative; z-index: 1; align-self: start; width: auto; padding: 3px 0; border: 0; border-radius: 0; color: var(--accent); background: transparent; text-align: center; border-top: 2px solid var(--accent); }
.notebook-page .lesson-section h2 { color: var(--ink); text-decoration: none; text-underline-offset: 0.2em; text-decoration-skip-ink: auto; line-height: 1.6; }
.study-marker { background: linear-gradient(transparent 55%, var(--marker-yellow) 55% 90%, transparent 90%); }
.notebook-page .content-formula { border: 1px solid var(--subject-accent); border-radius: var(--radius-md); color: var(--subject-ink); background: #fff; box-shadow: none; transform: none; border-left-width: 3px; }
.notebook-page .callout { border-width: 0 0 0 3px; border-style: solid; border-radius: var(--radius-sm); }
.notebook-page .worked-example { border: 1px solid color-mix(in srgb, var(--subject-accent) 45%, #fff); border-radius: var(--radius-md); background: var(--paper); box-shadow: none; }
.notebook-page .worked-example-heading { background: var(--subject-soft); }
.notebook-page .worked-example-heading > span { color: #fff; background: var(--subject-accent); }
.notebook-page .inline-check { border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--paper); border-top: 3px solid var(--subject-accent); }

.example-gallery { margin: 34px 0; padding: clamp(20px, 4vw, 32px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); border-top: 3px solid var(--subject-accent); }
.example-gallery > h2 { margin: 0; color: var(--subject-ink); }
.example-gallery-lead { max-width: 48rem; color: var(--ink-soft); }
.example-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.mini-example { height: 100%; padding: 1.1rem; border: 1px solid color-mix(in srgb, var(--subject-accent) 42%, #fff); border-radius: var(--radius-md); background: rgba(255,255,255,0.94); box-shadow: none; }
.mini-example > div { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }
.mini-example > div span { padding: 0.25rem 0.6rem; border-radius: var(--radius-md); color: #fff; background: var(--subject-accent); font-size: 0.72rem; font-weight: 900; }
.mini-example > div strong { color: var(--subject-ink); font-size: 0.8rem; }
.mini-example h3 { margin: 0.85rem 0; font-size: 1rem; line-height: 1.65; }
.mini-example details { border-top: 2px dashed var(--line-strong); }
.mini-example summary { color: var(--subject-ink); }
.mini-example p { font-size: 0.86rem; line-height: 1.7; }

/* 具体題材、注釈付き教材図、本文内の重要語、確認テストの出題指示。 */
.textbook-feature { margin: 34px 0; padding: clamp(22px, 4vw, 36px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); box-shadow: none; border-top: 3px solid var(--subject-accent); }
.textbook-feature > h2 { max-width: 24ch; margin: 0; color: var(--subject-ink); font-size: clamp(1.5rem, 4vw, 2.15rem); line-height: 1.45; }
.textbook-feature-lead { max-width: 52rem; color: var(--ink-soft); line-height: 1.85; }
.textbook-case-question { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.8rem; align-items: start; margin: 1.4rem 0; padding: 1rem 1.15rem; border: 2px dashed var(--subject-accent); border-radius: var(--radius-md); background: rgba(255,255,255,0.9); }
.textbook-case-question strong { padding: 0.28rem 0.6rem; border-radius: var(--radius-md); color: #fff; background: var(--subject-accent); font-size: 0.74rem; white-space: nowrap; }
.textbook-case-question p { margin: 0; color: var(--subject-ink); font-weight: 850; line-height: 1.75; }

.annotated-textbook-figure { margin: 1.5rem 0; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); border-top: 3px solid var(--subject-accent); }
.annotated-textbook-heading { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.annotated-textbook-heading h3 { flex: 1 1 18rem; margin: 0; color: var(--subject-ink); font-size: clamp(1.2rem, 3vw, 1.55rem); }
.annotated-textbook-canvas { display: grid; grid-template-columns: minmax(14rem, 0.8fr) minmax(18rem, 1.2fr); gap: clamp(1rem, 4vw, 2.2rem); align-items: center; margin-top: 1.35rem; }
.annotated-textbook-center { position: relative; display: grid; place-items: center; min-width: 0; }
.annotated-textbook-center > strong { max-width: 21rem; margin-top: -0.5rem; color: var(--subject-ink); font-size: 0.9rem; line-height: 1.55; text-align: center; }
.textbook-sketch { display: block; width: min(100%, 22rem); height: auto; filter: none; }
.textbook-sketch-pages { fill: color-mix(in srgb, var(--subject-soft) 52%, #fff); stroke: var(--subject-accent); stroke-linejoin: round; stroke-width: 7; }
.textbook-sketch-spine { fill: none; stroke: color-mix(in srgb, var(--subject-accent) 65%, #fff); stroke-width: 4; }
.textbook-sketch-lines { fill: none; stroke: color-mix(in srgb, var(--subject-accent) 34%, #fff); stroke-linecap: round; stroke-width: 8; }
.textbook-sketch-focus { fill: var(--subject-accent); stroke: #fff; stroke-width: 8; }
.textbook-sketch-symbol { fill: #fff; font-family: var(--font-math); font-size: 24px; font-weight: 950; }
.annotated-textbook-callouts { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.annotated-textbook-callouts li { position: relative; display: grid; grid-template-columns: 2.35rem minmax(0, 1fr); gap: 0.7rem; min-width: 0; padding: 0.85rem 1rem; border: 1px solid color-mix(in srgb, var(--subject-accent) 36%, #fff); border-radius: var(--radius-md); background: var(--subject-soft); }
.annotated-textbook-callouts li::before { content: ""; position: absolute; top: 50%; left: clamp(-2.3rem, -4vw, -1.15rem); width: clamp(1.15rem, 4vw, 2.3rem); border-top: 3px dashed var(--subject-accent); }
.annotation-number { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: 50%; color: #fff; background: var(--subject-accent); font-family: var(--font-math); font-weight: 900; }
.annotated-textbook-callouts strong { color: var(--subject-ink); }
.annotated-textbook-callouts p { margin: 0.25rem 0 0; color: var(--ink-soft); font-size: 0.82rem; line-height: 1.65; }
.annotated-textbook-figure figcaption { padding-top: 0.9rem; border-top: 2px dashed var(--line-strong); color: var(--ink-soft); font-size: 0.82rem; line-height: 1.7; }

.learning-media { container: learning-media / inline-size; margin: 34px 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); box-shadow: none; border-top: 3px solid var(--subject-accent); }
.learning-media img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; background: #f8fbfa; }
.learning-media .learning-media-compact { display: none; max-width: 24rem; margin-inline: auto; }
@container learning-media (max-width: 36rem) {
  .learning-media:has(.learning-media-compact) .learning-media-original-image { display: none; }
  .learning-media .learning-media-compact { display: block; }
}
@media print {
  .learning-media { container-type: normal; overflow: visible; break-inside: avoid; box-shadow: none; }
  .learning-media img { width: auto; max-height: 180mm; margin-inline: auto; break-inside: avoid; }
  .learning-media:has(.learning-media-compact) .learning-media-original-image { display: block; }
  .learning-media .learning-media-compact { display: none; }
}
.learning-media figcaption { display: grid; min-width: 0; gap: 0.3rem; margin: 0; padding: 1rem 1.2rem; border-top: 2px dashed var(--line-strong); color: var(--ink-soft); font-size: 0.86rem; line-height: 1.7; overflow-wrap: anywhere; }
.learning-media-original { width: fit-content; padding: 0.4rem 0; font-weight: 750; }
.learning-media figcaption small { color: var(--subject-ink); font-size: 0.74rem; font-weight: 800; }

.textbook-annotation-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin: 1.2rem 0 0; }
.textbook-annotation-list > div { min-width: 0; padding: 0.9rem 1rem; border-left: 7px solid var(--subject-accent); border-radius: var(--radius-md); background: rgba(255,255,255,0.88); }
.textbook-annotation-list dt { color: var(--subject-ink); font-size: 0.83rem; font-weight: 900; }
.textbook-annotation-list dd { margin: 0.35rem 0 0; color: var(--ink-soft); font-size: 0.82rem; line-height: 1.7; }
.important-term { padding: 0 0.08em; color: var(--subject-ink); background: linear-gradient(transparent 58%, color-mix(in srgb, var(--subject-accent) 24%, #fff) 58% 94%, transparent 94%); font-weight: 950; text-decoration: underline 2px var(--subject-accent); text-underline-offset: 0.2em; }

.assessment-directions { margin: 1.5rem 0 2rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); border-top: 3px solid var(--subject-accent); }
.assessment-directions strong { display: inline-block; margin-bottom: 0.35rem; color: var(--subject-ink); }
.assessment-directions p { margin: 0; color: var(--ink-soft); line-height: 1.75; }
.quiz-question-instruction { margin: 0 0 0.55rem; color: var(--ink-soft); font-size: 0.82rem; font-weight: 800; }

.learning-activity {
  margin: 1.35rem 0;
  padding: clamp(1rem, 2.5vw, 1.4rem);
  border: 2px solid color-mix(in srgb, var(--subject-accent) 34%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--subject-soft) 58%, #fff);
}
.learning-activity h3 { margin: 0.2rem 0 0.75rem; color: var(--subject-ink); }
.learning-activity-prompt { margin: 0; font-weight: 720; line-height: 1.8; }
.learning-activity-input-link { display: inline-block; margin-top: 0.65rem; font-weight: 760; }
.learning-activity-steps { display: grid; gap: 0.65rem; margin: 1rem 0; padding-left: 1.5rem; }
.learning-activity-steps li { min-width: 0; padding-left: 0.25rem; line-height: 1.7; }
.learning-activity-steps code {
  display: inline-block;
  max-width: 100%;
  margin-right: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: 5px;
  overflow-wrap: anywhere;
  white-space: normal;
  background: #fff;
  font-family: inherit;
  font-weight: 850;
}
.learning-activity details { margin-top: 1rem; }
.learning-activity details summary { cursor: pointer; font-weight: 800; }
.learning-activity-outcome,
.learning-activity blockquote { margin: 0.8rem 0 0; padding: 0.85rem 1rem; border-left: 4px solid var(--subject-accent); background: #fff; }
.learning-activity blockquote p { margin: 0; line-height: 1.8; }
.learning-activity--source-analysis { border-style: dashed; }
.learning-activity--creation-brief { background: color-mix(in srgb, #fff4cf 68%, #fff); }
.learning-activity--decision-case { background: color-mix(in srgb, #eef7f2 74%, #fff); }
.assessment-goal-ref { margin: 0.2rem 0 0.7rem; color: var(--subject-ink); font-size: 0.86rem; font-weight: 760; line-height: 1.65; }

.learning-input {
  margin: 34px 0;
  padding: clamp(1.1rem, 3vw, 1.65rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  border-top: 3px solid var(--subject-accent);
}
.learning-input h2 { margin: 0.2rem 0 0.55rem; color: var(--subject-ink); font-size: clamp(1.2rem, 3vw, 1.55rem); }
.learning-input-instructions { max-width: 72ch; margin: 0; line-height: 1.8; }
.learning-input-controls { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.15rem; }
.learning-input-controls .secondary-button { min-height: 44px; }
.learning-input-transcript { flex-basis: 100%; padding: 0.7rem 0.85rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: #fff; }
.learning-input-transcript summary { cursor: pointer; color: var(--subject-ink); font-weight: 800; }
.learning-input-transcript p { margin: 0.7rem 0 0; line-height: 1.8; }
.learning-input-status,
.learning-input-notice { margin: 0.9rem 0 0; color: var(--ink-soft); font-size: 0.86rem; line-height: 1.7; }
.learning-input-notice { padding: 0.75rem 0.9rem; border-left: 5px solid var(--subject-accent); background: #fff; }
.learning-input > ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; margin: 1rem 0 0; padding-left: 1.4rem; line-height: 1.7; overflow-wrap: anywhere; }
.learning-input-documents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; margin-top: 1rem; }
.learning-input-documents article { min-width: 0; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.learning-input-documents h3 { margin: 0; color: var(--subject-ink); font-size: 0.95rem; }
.learning-input-documents article p { margin: 0.45rem 0 0; line-height: 1.75; overflow-wrap: anywhere; }
.learning-input-documents--reading { grid-template-columns: minmax(0, 1fr); }
.learning-input-documents--reading article { padding: clamp(16px, 3vw, 28px); }
.learning-input-documents .learning-document--passage p { max-width: 38em; line-height: 1.95; white-space: pre-line; }
.learning-input-documents .learning-document--poem p { padding-block: 0.7rem; line-height: 2.15; white-space: pre-wrap; }
.learning-document ul,
.learning-document ol { margin: 0.75rem 0 0; padding: 0; list-style: none; }
.learning-document li { padding: 0.6rem 0; line-height: 1.8; overflow-wrap: anywhere; white-space: pre-wrap; }
.learning-document--entries li + li { border-top: 1px solid var(--line); }
.learning-document--dialogue li { margin-top: 0.5rem; padding: 0.7rem 0.9rem; border-left: 3px solid var(--subject-accent); background: var(--subject-soft); border-radius: 0 8px 8px 0; }
.learning-document--record p { padding: 0.4rem 0 0.4rem 0.75rem; border-left: 3px solid var(--line-strong); white-space: pre-wrap; }
.learning-input--tone-comparison { background: color-mix(in srgb, #f1edff 54%, #fff); }
.learning-input--document-set { border-style: dashed; }

.vocabulary-panel,
.solution-flow,
.worked-examples-panel,
.mistake-panel { margin: 34px 0; padding: clamp(22px, 4vw, 34px); border-radius: var(--radius-md); background: var(--paper); }
.vocabulary-panel { border: 1px solid var(--line); box-shadow: none; border-top: 3px solid var(--subject-accent); border-radius: var(--radius-md); background: var(--paper); }
.vocabulary-panel > h2,
.solution-flow > h2,
.worked-examples-panel > h2,
.mistake-panel > h2 { margin: 0; color: var(--subject-ink); font-size: clamp(1.35rem, 3vw, 1.8rem); }
.vocabulary-lead,
.solution-flow-lead,
.worked-examples-lead { max-width: 52rem; color: var(--ink-soft); line-height: 1.75; }
.vocabulary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.3rem 0 0; }
.vocabulary-grid > div { min-width: 0; padding: 1rem; border: 1px solid color-mix(in srgb, var(--subject-accent) 34%, #fff); border-radius: var(--radius-md); background: var(--subject-soft); }
.vocabulary-grid dt { color: var(--subject-ink); font-size: 1rem; font-weight: 900; }
.vocabulary-grid dd { margin: 0.45rem 0 0; color: var(--ink-soft); font-size: 0.86rem; line-height: 1.75; }

.solution-flow { border: 1px solid var(--line); background: var(--paper); box-shadow: none; border-top: 3px solid var(--subject-accent); border-radius: var(--radius-md); }
.solution-flow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.35rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.solution-flow-steps li { position: relative; min-width: 0; padding: 1.1rem 1rem; border: 1px solid var(--subject-accent); border-radius: var(--radius-md); background: #fff; }
.solution-flow-steps li:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; top: 50%; right: -1.25rem; width: 1.2rem; color: var(--subject-accent); font-size: 1.45rem; font-weight: 950; text-align: center; transform: translateY(-50%); }
.solution-step-number { display: grid; width: 2.5rem; height: 2.5rem; margin-bottom: 0.7rem; place-items: center; border-radius: 50%; color: #fff; background: var(--subject-accent); font-family: var(--font-math); font-size: 1.1rem; font-weight: 900; }
.solution-flow-steps strong { display: block; color: var(--subject-ink); }
.solution-flow-steps p { margin: 0.45rem 0 0; color: var(--ink-soft); font-size: 0.82rem; line-height: 1.65; }

.worked-examples-panel { border: 1px solid var(--line); background: var(--paper); border-top: 3px solid var(--subject-accent); border-radius: var(--radius-md); }
.worked-examples-list { display: grid; gap: 1.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.worked-example-card { overflow: hidden; border: 1px solid var(--subject-accent); border-radius: var(--radius-md); background: #fff; box-shadow: none; }
.worked-example-card > header { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 0.65rem; align-items: center; padding: 1rem 1.15rem; background: var(--subject-soft); }
.worked-example-card > header > span { padding: 0.28rem 0.65rem; border-radius: var(--radius-md); color: #fff; background: var(--subject-accent); font-size: 0.74rem; font-weight: 900; }
.worked-example-card > header > strong { color: var(--subject-ink); font-size: 0.8rem; }
.worked-example-card h3 { margin: 0; font-size: 1.08rem; line-height: 1.6; }
.worked-example-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.worked-example-steps li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.65rem; min-width: 0; padding: 1rem; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.worked-example-steps li > span { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: 50%; color: var(--subject-ink); background: var(--subject-soft); font-family: var(--font-math); font-weight: 900; }
.worked-example-steps strong { color: var(--subject-ink); }
.worked-example-steps p { margin: 0.3rem 0 0; color: var(--ink-soft); font-size: 0.84rem; line-height: 1.65; }
.worked-example-card-answer,
.worked-example-card-mistake { margin: 0; padding: 0.85rem 1.15rem; font-weight: 800; }
.worked-example-card-answer { border-top: 2px solid #acd0ba; color: var(--correct); background: var(--correct-soft); }
.worked-example-card-mistake { border-top: 1px solid #e9b8ad; color: #6f2e26; background: var(--danger-soft); }

.mistake-panel { border: 1px solid var(--line); border-top: 3px solid var(--danger); background: var(--danger-soft); }
.mistake-panel > h2 { color: #743425; }
.mistake-panel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.mistake-panel article { min-width: 0; padding: 1rem; border: 2px solid #d88a78; border-radius: var(--radius-md); background: rgba(255,255,255,0.94); }
.mistake-panel h3 { margin: 0; color: #743425; font-size: 1rem; }
.mistake-panel p { margin: 0.75rem 0 0; color: var(--ink-soft); font-size: 0.86rem; line-height: 1.72; }
.mistake-panel p strong { display: block; margin-bottom: 0.2rem; color: #743425; }
.mistake-value { padding: 0.65rem; border-left: 5px solid #c95c45; background: var(--danger-soft); }

.notebook-page[data-reading-level="hiragana-first"] { font-size: 1.06rem; }
.notebook-page[data-reading-level="hiragana-first"] .lesson-section-body > p,
.notebook-page[data-reading-level="hiragana-first"] .worked-example-card p,
.notebook-page[data-reading-level="hiragana-first"] .solution-flow p,
.notebook-page[data-reading-level="hiragana-first"] .vocabulary-panel dd,
.notebook-page[data-reading-level="hiragana-first"] .mistake-panel p { line-height: 1.95; word-spacing: 0.1em; }
.notebook-page[data-reading-level="hiragana-first"] .lesson-header h1,
.notebook-page[data-reading-level="hiragana-first"] .unit-header h1 { max-width: 18ch; }

.application-challenge { position: relative; margin: 34px 0; padding: clamp(22px, 4vw, 36px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--gold-soft); box-shadow: none; border-top: 3px solid var(--gold); }
.application-examples { margin: 34px 0; padding: clamp(20px, 4vw, 30px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); border-top: 3px solid var(--subject-accent); }
.application-examples h2 { margin: 0; color: var(--subject-ink); }
.application-examples dl { display: grid; gap: 0.8rem; margin: 1rem 0 0; }
.application-examples dl > div { padding: 0.9rem 1rem; border-left: 5px solid var(--subject-accent); background: var(--subject-soft); }
.application-examples dt { font-weight: 900; }
.application-examples dd { margin: 0.25rem 0 0; color: var(--ink-soft); line-height: 1.7; }
.application-challenge header { display: flex; gap: 1rem; align-items: center; }
.challenge-sticker { display: grid; flex: 0 0 4.7rem; width: 4.7rem; height: 4.7rem; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: #d2672d; box-shadow: none; font-family: var(--font-math); font-size: 0.63rem; font-weight: 900; transform: none; }
.application-challenge h2 { margin: 0; color: #7a3c15; }
.challenge-prompt { margin: 1.2rem 0; padding: 1rem 1.1rem; border-left: 6px solid #d2672d; background: #fff; font-size: 1.04rem; font-weight: 750; }
.application-challenge details { border-top: 2px dashed #d4a069; }
.application-challenge summary { color: #7a3c15; }
.application-challenge ol { margin: 0; padding: 0 0 1rem 1.4rem; }
.challenge-answer-value { color: #7a3c15; font-weight: 900; }
.spaced-review,
.explanation-task,
.data-inquiry { margin: 34px 0; padding: clamp(20px, 4vw, 32px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.spaced-review h2,
.explanation-task h2,
.data-inquiry h2 { margin-top: 0; }
.spaced-review-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.spaced-review-list > li { min-width: 0; padding: 16px; border: 2px solid color-mix(in srgb, var(--subject-accent) 28%, #fff); border-radius: var(--radius-sm); background: var(--subject-soft); }
.spaced-review-list header { display: grid; gap: 2px; }
.spaced-review-list header span,
.spaced-review-connection,
.spaced-review-status { color: var(--ink-soft); font-size: 0.82rem; }
.spaced-review-prompt { font-weight: 750; }
.spaced-review-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.spaced-review-list > li.is-complete { border-color: var(--correct); background: var(--correct-soft); }
.explanation-task-prompt { padding: 14px; border-left: 5px solid var(--subject-accent); background: var(--subject-soft); font-weight: 750; }
.explanation-task-field { display: grid; gap: 7px; margin-top: 18px; font-weight: 750; }
.explanation-task-field textarea { width: 100%; padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: #fff; font: inherit; resize: vertical; }
.explanation-task-note { color: var(--ink-soft); font-size: 0.82rem; }
.explanation-checklist { display: grid; gap: 8px; margin: 18px 0; padding: 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.explanation-checklist legend { padding: 0 6px; font-weight: 850; }
.explanation-checklist label { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start; }
.explanation-checklist input { margin-top: 0.2em; }
.explanation-sample { font-weight: 750; }
.data-inquiry-source { color: var(--ink-soft); font-size: 0.86rem; }
.data-inquiry table { width: 100%; border-collapse: collapse; background: #fff; }
.data-inquiry caption { padding: 8px; color: var(--ink-soft); text-align: left; }
.data-inquiry th,
.data-inquiry td { padding: 10px; border: 1px solid var(--line); text-align: right; }
.data-inquiry th:first-child { text-align: left; }
.data-inquiry thead th { background: var(--surface-soft); }
.data-inquiry-questions { display: grid; gap: 8px; margin: 20px 0; }

.notebook-page .content-summary { border: 2px solid var(--subject-accent); border-radius: var(--radius-md); background: var(--subject-soft); }
.notebook-page .note-panel { position: relative; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--paper); box-shadow: none; }
.notebook-page .note-field textarea { background: var(--paper); }
.notebook-page .quiz-question { border: 2px solid color-mix(in srgb, var(--subject-accent) 42%, #fff); box-shadow: none; }
.notebook-page .quiz-question-heading { border-bottom-color: color-mix(in srgb, var(--subject-accent) 25%, #fff); background: var(--subject-soft); }
.notebook-page .quiz-question-heading span { color: var(--subject-ink); }

@media (max-width: 920px) {
  .notebook-hero { grid-template-columns: 1fr; }
  .notebook-hero .dashboard-copy h1 { max-width: none; }
  .hero-study-map { transform: none; }
  .solution-flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solution-flow-steps li:nth-child(2)::after { content: "↓"; top: auto; right: 50%; bottom: -1.45rem; transform: translateX(50%); }
  .mistake-panel-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .notebook-hero { padding: 6px 0 28px; gap: 28px; }
  .hero-study-map > div { grid-template-columns: 1fr; }
  .featured-section > .section-heading { align-items: start; }
  .featured-section > .section-heading > p { text-align: left; }
  .course-summary,
  .usefulness-panel { grid-template-columns: 1fr; }
  .annotated-textbook-canvas { grid-template-columns: 1fr; }
  .annotated-textbook-callouts li::before { display: none; }
  .course-summary div { border-right: 0; border-bottom: 1px dashed var(--line-strong); }
  .course-summary div:last-child { border-bottom: 0; }
  .concept-diagram-canvas { grid-template-columns: 1fr; }
  .concept-arrow { transform: rotate(90deg); justify-self: center; }
  .concept-diagram--compare .concept-arrow::before { content: "↕"; }
  .concept-diagram--branch .concept-arrow::before { writing-mode: horizontal-tb; }
  .concept-node:nth-of-type(3),
  .concept-node:nth-of-type(5) { transform: none; }
  .point-deck-grid { grid-template-columns: 1fr; }
  .example-gallery-grid { grid-template-columns: 1fr; }
  .vocabulary-grid,
  .solution-flow-steps,
  .mistake-panel-grid,
  .textbook-annotation-list { grid-template-columns: 1fr; }
  .solution-flow-steps li:not(:last-child)::after,
  .solution-flow-steps li:nth-child(2)::after { content: "↓"; top: auto; right: 50%; bottom: -1.45rem; transform: translateX(50%); }
  .worked-example-card > header { grid-template-columns: auto minmax(0, 1fr); }
  .worked-example-card > header > div { grid-column: 1 / -1; }
  .worked-example-steps { grid-template-columns: 1fr; }
  .spaced-review-list { grid-template-columns: 1fr; }
  .learning-input-documents { grid-template-columns: 1fr; }
  .notebook-page .lesson-section { padding-inline: 0; }
  .notebook-page .lesson-section::after { inset-inline: -4px; }
  .application-challenge header { align-items: start; }
}

@media (max-width: 480px) {
  .notebook-page .lesson-section-body { padding-inline: 0; }
  .notebook-hero .dashboard-copy h1 { font-size: 2.1rem; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-study-map { padding: 20px 16px; }
  .usefulness-panel,
  .textbook-feature,
  .concept-diagram,
  .point-deck,
  .example-gallery,
  .application-challenge,
  .spaced-review,
  .explanation-task,
  .data-inquiry { padding: 20px 16px; border-radius: var(--radius-md); }
  .reading-guide { align-items: stretch; flex-direction: column; }
  .learning-input { padding: 20px 16px; border-radius: var(--radius-md); }
  .learning-input-controls { align-items: stretch; flex-direction: column; }
  .learning-input-controls .secondary-button { width: 100%; }
  .reading-guide li { justify-content: center; }
  .application-challenge header { display: grid; grid-template-columns: 1fr; }
  .challenge-sticker { width: auto; height: auto; justify-self: start; padding: 0.35rem 0.7rem; border-radius: var(--radius-md); transform: none; }
}

.print-note-value { display: none; }

@media print {
  .skip-link,
  body[data-screen="learning"] .site-footer { display: none; }
  .notebook-page .lesson-section { display: block; padding: 12pt 0; break-inside: auto; }
  .notebook-page .lesson-section::after { content: none; }
  .notebook-page .lesson-section-body { display: contents; }
  .notebook-page .section-number { margin: 0 0 0.4rem; break-inside: avoid; break-after: avoid; }
  .lesson-section-body > h2,
  .lesson-visual figcaption,
  .lesson-visual-focus { break-inside: avoid; break-after: avoid; }
  .lesson-section-body > p { orphans: 3; widows: 3; }
  .lesson-diagram-viewport { break-inside: avoid; }
  .learning-input { box-shadow: none; border: 1px solid #777; }
  .learning-input-documents { grid-template-columns: minmax(0, 1fr); }
  .learning-document--poem,
  .learning-document li { break-inside: avoid; }
  .quiz-mission,
  .assessment-success-criteria:not([open]),
  .assessment-check-details:not([open]),
  textarea[data-print-ready] { display: none !important; }
  .print-note-value { display: block; min-height: 8rem; padding: 12px 14px; border: 1px solid #777; white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 400; line-height: 1.7; }
  .open-assessment-form textarea { border: 1px solid #777; }
  .notebook-hero,
  .notebook-page .unit-header,
  .notebook-page .lesson-header,
  .notebook-page .lesson-section::after,
  .concept-diagram,
  .textbook-feature,
  .annotated-textbook-figure,
  .point-deck,
  .example-gallery,
  .vocabulary-panel,
  .solution-flow,
  .worked-examples-panel,
  .mistake-panel,
  .application-challenge,
  .usefulness-panel { box-shadow: none; }
  .reading-guide,
  .note-panel:not(:has(textarea:not(:placeholder-shown))) { display: none !important; }
  /* 印刷開始時に値を展開できるよう、記入済みのメモは表示しておく。 */
  .notebook-page .note-panel { display: block; padding: 12pt; border: 1px solid #777; border-radius: 0; background: white; box-shadow: none; break-inside: auto; }
  .notebook-page .note-panel::before,
  .note-panel-heading .eyebrow,
  .note-panel .note-status,
  .learning-input-status { display: none; }
  .note-panel-heading { break-after: avoid; }
  .note-panel .note-field { display: block; }
  .note-panel .print-note-value { min-height: 0; }
  .understanding-panel { grid-template-columns: minmax(0, 1fr); gap: 12pt; break-inside: avoid; }
  .understanding-scale { grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
  .concept-diagram,
  .point-deck,
  .example-gallery,
  .vocabulary-panel,
  .solution-flow,
  .unit-brief,
  .worked-example-card,
  .mistake-panel,
  .application-challenge,
  .usefulness-panel { break-inside: avoid; }
  .concept-node { min-height: auto; }
}

/* 狭い単元トップでも、見出しを読んですぐ学習を選べる余白にする。 */
@media screen and (max-width: 480px) {
  .notebook-page .unit-header { gap: 12px; padding-top: 12px; padding-bottom: 16px; }
  .notebook-page .unit-header h1 { font-size: 1.5rem; line-height: 1.5; }
  .unit-brief { margin-top: 12px; padding: 14px; }
  .unit-brief-summary > .eyebrow { display: none; }
  .unit-brief-summary h2 { line-height: 1.4; }
  .unit-brief-actions { margin-top: 0.75rem; }
}

/* 学校・成人のロードマップ、絞り込み、講座の一括開閉、現在位置を定義する。 */
.roadmap-screen { max-width: 1120px; margin: 0 auto; }
.roadmap-page-header > p:not(.eyebrow) { max-width: 720px; margin: 12px 0 0; color: var(--ink-soft); }
.roadmap-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 620px;
  margin: 24px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  overflow: hidden;
}
.roadmap-summary div { padding: 12px 18px; border-right: 1px solid var(--line); }
.roadmap-summary div:last-child { border-right: 0; }
.roadmap-summary dt { color: var(--ink-soft); font-size: 0.72rem; }
.roadmap-summary dd { margin: 1px 0 0; color: var(--brand-deep); font-size: 1.1rem; font-weight: 900; }

.roadmap-current {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 30px;
  margin: 28px 0;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  border-left: 3px solid var(--accent);
}
.roadmap-current > .eyebrow,
.roadmap-current > h2,
.roadmap-current > p,
.roadmap-current-positions { grid-column: 1; }
.roadmap-current h2 { margin: 0; color: var(--brand-deep); font-size: clamp(1.3rem, 3vw, 1.75rem); }
.roadmap-current > p:not(.eyebrow) { margin: 3px 0 0; color: var(--ink-soft); }
.roadmap-current > .primary-button { grid-column: 2; grid-row: 1 / span 4; align-self: center; text-align: center; }
.roadmap-current-positions { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.roadmap-current-positions li { padding: 3px 9px; border: 1px solid #91b8a4; border-radius: var(--radius-md); color: var(--brand-deep); background: rgba(255,255,255,0.72); font-size: 0.75rem; font-weight: 800; }
.roadmap-current.is-empty { border-style: dashed; border-color: var(--line-strong); background: var(--surface-soft); box-shadow: none; }
.roadmap-current.is-empty::before { display: none; }

.roadmap-grade-navigation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 34px 0; }
.roadmap-stage-block { min-width: 0; padding: 16px; border: 1px solid var(--line); border-top: 5px solid var(--brand); border-radius: var(--radius-md); background: var(--paper); }
.roadmap-stage-block:nth-child(2) { border-top-color: var(--blue); }
.roadmap-stage-block:nth-child(3) { border-top-color: var(--coral); }
.roadmap-stage-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.roadmap-stage-heading span { color: var(--ink-soft); font-family: var(--font-math); font-size: 0.68rem; font-weight: 850; }
.roadmap-stage-heading strong { color: var(--brand-deep); }
.roadmap-stage-block ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.roadmap-stage-block li { min-width: 0; }
.roadmap-stage-block a { position: relative; display: grid; min-height: 62px; place-content: center; padding: 7px 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-soft); background: var(--surface-soft); text-align: center; text-decoration: none; }
.roadmap-stage-block a:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-soft); }
.roadmap-stage-block a strong { font-size: 0.82rem; }
.roadmap-stage-block a small { font-size: 0.66rem; }
.roadmap-stage-block a.is-current { border: 2px solid var(--focus); color: var(--brand-deep); background: var(--gold-soft); }
.roadmap-stage-block a > span { position: absolute; top: -8px; right: -3px; padding: 0 5px; border-radius: var(--radius-md); color: #fff; background: var(--coral); font-size: 0.58rem; font-weight: 850; }

.roadmap-browser { margin-top: 36px; }
.roadmap-browser-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr); gap: 24px; align-items: end; }
.roadmap-browser-heading h2 { margin: 0; font-size: 1.65rem; }
.roadmap-browser-heading > p { margin: 0; color: var(--ink-soft); font-size: 0.8rem; }
.roadmap-filter { display: grid; grid-template-columns: minmax(260px, 1.45fr) minmax(210px, 0.8fr) auto; gap: 12px; align-items: end; margin-top: 20px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.roadmap-filter label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 0.77rem; font-weight: 800; }
.roadmap-filter input,
.roadmap-filter select { width: 100%; min-height: 46px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: #fff; font: inherit; font-size: 0.9rem; }
.roadmap-filter select { padding-right: 34px; }
.roadmap-filter button { min-height: 46px; }
.roadmap-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 14px 0 20px; }
.roadmap-actions > p { margin: 0; color: var(--brand-deep); font-size: 0.82rem; font-weight: 800; }
.roadmap-actions > div { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
.roadmap-empty { padding: 28px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); color: var(--ink-soft); background: var(--surface-soft); text-align: center; }

.roadmap-grade-list { display: grid; gap: 42px; }
.roadmap-grade { scroll-margin-top: 80px; }
.roadmap-grade > header { position: sticky; z-index: 2; top: var(--header-height); display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 2px solid var(--brand); background: color-mix(in srgb, var(--canvas) 94%, transparent); backdrop-filter: blur(6px); }
.roadmap-grade > header h2 { margin: 0; font-size: 1.55rem; }
.roadmap-grade > header > p { margin: 0; color: var(--ink-soft); font-size: 0.78rem; font-weight: 800; }
.roadmap-course-list { display: grid; gap: 10px; margin-top: 14px; }
.roadmap-course { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); overflow: clip; }
.roadmap-course.contains-current { border: 2px solid var(--focus); box-shadow: none; }
.roadmap-course > summary { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 18px; align-items: center; gap: 13px; min-height: 72px; padding: 10px 16px; cursor: pointer; list-style: none; }
.roadmap-course > summary::-webkit-details-marker { display: none; }
.roadmap-course > summary::after { content: "⌄"; color: var(--brand); font-size: 1rem; font-weight: 900; transition: transform 160ms ease; }
.roadmap-course[open] > summary::after { transform: rotate(180deg); }
.roadmap-course > summary:hover { background: var(--surface-soft); }
.roadmap-course[open] > summary { border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.roadmap-course-subject { display: grid; width: 48px; height: 48px; place-items: center; padding: 3px; border-radius: var(--radius-sm); color: #fff; background: var(--brand); font-size: 0.67rem; font-weight: 900; line-height: 1.25; text-align: center; }
.roadmap-course-subject[data-category="mathematics"] { background: #2768a2; }
.roadmap-course-subject[data-category="japanese"] { background: #a44a63; }
.roadmap-course-subject[data-category="english"] { background: #8a5a20; }
.roadmap-course-subject[data-category="science"] { background: #28784e; }
.roadmap-course-subject[data-category="social-studies"] { background: #6a559a; }
.roadmap-course-subject[data-category="life-environment"] { background: #a05a2c; }
.roadmap-course-subject[data-category="information"] { background: #23658a; }
.roadmap-course-subject[data-category="arts"] { background: #8c4f88; }
.roadmap-course-subject[data-category="home-economics"] { background: #a9473a; }
.roadmap-course-subject[data-category="health-physical-education"] { background: #2e7778; }
.roadmap-course-subject[data-category="inquiry-career"] { background: #596a65; }
.roadmap-course-subject[data-category="adult-learning"] { background: #6b4f32; }
.roadmap-course-heading { min-width: 0; }
.roadmap-course-heading strong,
.roadmap-course-heading small { display: block; }
.roadmap-course-heading strong { color: var(--brand-deep); font-size: 1rem; }
.roadmap-course-heading small { margin-top: 2px; color: var(--ink-soft); font-size: 0.75rem; font-weight: 500; }
.roadmap-course-badges { display: flex; flex-wrap: wrap; justify-content: end; gap: 5px; }
.roadmap-course-badges > * { padding: 2px 7px; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink-soft); background: #fff; font-size: 0.66rem; font-weight: 800; }
.roadmap-course-badges > b { border-color: var(--focus); color: #6b460f; background: var(--gold-soft); }
.roadmap-course-body { padding: 4px 20px 18px 84px; }
.roadmap-pathway-note { margin: 10px 0; color: var(--ink-soft); font-size: 0.77rem; }
.roadmap-unit-list { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.roadmap-unit-list::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 20px; width: 2px; background: var(--line); }
.roadmap-unit { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; padding: 12px 10px 12px 0; border-bottom: 1px dashed var(--line); scroll-margin-top: 132px; }
.roadmap-unit:last-child { border-bottom: 0; }
.roadmap-unit-number { z-index: 1; display: grid; width: 40px; height: 40px; place-items: center; border: 2px solid var(--line-strong); border-radius: 50%; color: var(--ink-soft); background: var(--paper); font-family: var(--font-math); font-size: 0.78rem; font-weight: 900; }
.roadmap-unit-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; padding-top: 1px; }
.roadmap-unit-copy > p { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 2px; }
.roadmap-unit-copy > p span { color: var(--ink-soft); font-size: 0.65rem; }
.roadmap-unit-copy > a { grid-column: 1; grid-row: 2; justify-self: start; color: var(--brand-deep); font-size: 0.96rem; font-weight: 850; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.roadmap-unit-copy > small { grid-column: 1 / -1; margin-top: 2px; color: var(--ink-soft); font-size: 0.74rem; }
.roadmap-unit.is-current { margin-block: 5px; padding: 12px 10px 12px 8px; border: 2px solid var(--focus); border-radius: var(--radius-md); background: var(--gold-soft); }
.roadmap-unit.is-current .roadmap-unit-number { border-color: var(--focus); color: #fff; background: var(--coral); }
.roadmap-current-chip { grid-column: 2; grid-row: 2; align-self: center; margin-left: 8px; padding: 1px 7px; border-radius: var(--radius-md); color: #fff; background: var(--coral); font-size: 0.65rem; }
.roadmap-course-link { display: inline-flex; margin-top: 12px; color: var(--brand); font-size: 0.77rem; font-weight: 850; text-underline-offset: 4px; }

@media (max-width: 820px) {
  .roadmap-grade-navigation { grid-template-columns: 1fr; }
  .roadmap-stage-block ol { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .roadmap-filter { grid-template-columns: 1fr 1fr; }
  .roadmap-filter button { justify-self: start; }
}

@media (max-width: 720px) {
  .curriculum-finder-guide { justify-items: stretch; }
  .roadmap-current { grid-template-columns: 1fr; padding: 24px 20px; }
  .roadmap-current > .primary-button { grid-column: 1; grid-row: auto; justify-self: stretch; margin-top: 10px; }
  .roadmap-browser-heading,
  .roadmap-filter { grid-template-columns: 1fr; }
  .roadmap-actions { align-items: stretch; flex-direction: column; }
  .roadmap-actions > div { justify-content: start; }
  .roadmap-grade > header { top: 58px; }
  .roadmap-course > summary { grid-template-columns: 46px minmax(0, 1fr) 18px; gap: 9px; padding-inline: 10px; }
  .roadmap-course > summary::after { grid-column: 3; grid-row: 1; }
  .roadmap-course-badges { grid-column: 2 / 4; justify-content: start; }
  .roadmap-course-subject { width: 44px; height: 44px; }
  .roadmap-course-body { padding: 4px 12px 16px; }
}

@media (max-width: 480px) {
  .roadmap-summary div { padding-inline: 10px; }
  .roadmap-summary dd { font-size: 0.9rem; }
  .roadmap-stage-block ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .roadmap-actions > div { display: grid; grid-template-columns: 1fr; }
  .roadmap-actions button { width: 100%; }
  .roadmap-grade > header { align-items: start; flex-direction: column; gap: 2px; }
  .roadmap-unit-copy > small { font-size: 0.7rem; }
}

@media print {
  .roadmap-current,
  .roadmap-grade-navigation,
  .roadmap-filter,
  .roadmap-actions,
  .roadmap-empty,
  .roadmap-course-link { display: none !important; }
  .roadmap-grade > header { position: static; background: transparent; }
  .roadmap-course { break-inside: avoid; }
  .roadmap-course:not([open]) > .roadmap-course-body { display: block !important; }
  .roadmap-course > summary::after { display: none; }
}

/* 索引、余白、行長は小画面と拡大表示でも保つ。 */
@media (max-width: 920px) {
  .hero-study-map { align-self: auto; }
  .hero-study-map > div { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .hero-study-map > div > span { grid-template-columns: 1fr; gap: 4px; align-content: start; }
  .hero-study-map svg { grid-row: auto; margin-bottom: 5px; }
}
@media (max-width: 720px) {
  .subject-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding: 10px 16px; }
  .subject-index a:nth-last-child(-n + 4) { border-bottom: 1px solid var(--line); }
  .subject-index a:nth-last-child(-n + 2) { border-bottom: 0; }
  .curriculum-finder { padding: 0; }
  .curriculum-finder-guide { grid-template-columns: minmax(0, 1fr); }
  .curriculum-finder-guide .secondary-button { grid-column: 1; grid-row: auto; }
  .notebook-hero .dashboard-copy h1 { font-size: clamp(1.75rem, 4.5vw, 2.4rem); letter-spacing: -0.04em; }
  .hero-study-map { padding: 25px 20px 20px; }
  .hero-study-map > div { grid-template-columns: 1fr; gap: 0; }
  .hero-study-map > div > span { grid-template-columns: 38px minmax(0, 1fr); gap: 0 14px; padding: 10px 0; }
  .hero-study-map svg { grid-row: span 2; width: 38px; height: 38px; margin: 0; }
  .notebook-page .unit-header, .notebook-page .lesson-header { padding: 20px 18px; }
  .notebook-page .section-number { justify-self: start; min-width: 32px; }
  .featured-section .section-heading { align-items: start; flex-direction: column; gap: 10px; }
}
@media print {
  .subject-index { display: none; }
  .notebook-page .unit-header, .notebook-page .lesson-header { padding: 12pt 0; border: 0; border-bottom: 1pt solid #000; background: #fff; }
  .notebook-page .lesson-section h2, .notebook-page .lesson-header h1 { color: #000; }
  .hero-study-map::before { display: none; }
}