/* Continuous lesson board. Load after the generated brand palette, fonts and tokens.
   Working and its explanation belong to the same row and the same page scroll. */
.board-app {
    --board-writing-face: var(--tfa-family-notebook, var(--tfa-family-text));
    --board-writing-size: var(--tfa-type-h3-size);
    --board-target: max(var(--tfa-space-5), var(--tfa-reg-target));
    margin: 0;
    color: var(--tfa-ink);
    background: var(--tfa-white);
    font-family: var(--tfa-family-text);
    font-size: max(var(--tfa-type-body-size), var(--tfa-reg-body-size));
    line-height: var(--tfa-type-body-line);
    font-feature-settings: var(--tfa-reg-text-features);
    overflow-wrap: break-word;
}

body:has(.board-app) { margin: 0; }
.board-app .skip-link { position: absolute; inset-block-start: var(--tfa-space-1); inset-inline-start: var(--tfa-space-2); padding: var(--tfa-space-1) var(--tfa-space-2); background: var(--tfa-white); transform: translateY(-200%); z-index: 10; }
.board-app .skip-link:focus { transform: translateY(0); }
.board-app *, .board-app *::before, .board-app *::after { box-sizing: border-box; }
.board-app [hidden] { display: none !important; }
.board-app :where(h1, h2, h3, h4, p, figure, ol, ul, dl) { margin-block: 0; }
.board-app :where(h1, h2, h3, h4) {
    font-family: var(--tfa-family-display);
    font-variation-settings: var(--tfa-reg-display-variation);
    font-weight: var(--tfa-reg-display-wght);
    text-wrap: balance;
}
.board-app h2 { font-size: var(--tfa-type-h3-size); line-height: var(--tfa-type-h3-line); }
.board-app h3 { font-size: var(--tfa-type-h4-size); line-height: var(--tfa-type-h4-line); }
.board-app a { color: var(--tfa-action); text-underline-offset: var(--tfa-space-0-5); }
.board-app a:hover { color: var(--tfa-action-hover); }
.board-app :where(button, select, input, textarea) { font: inherit; color: inherit; }
.board-app :where(button, select, input) { min-block-size: var(--board-target); }
.board-app button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tfa-space-1);
    padding: var(--tfa-space-1) var(--tfa-space-2);
    border: var(--tfa-stroke-rule) solid var(--tfa-line);
    border-radius: var(--tfa-reg-radius);
    background: var(--tfa-white);
    color: var(--tfa-action);
    font-weight: var(--tfa-type-label-weight);
    line-height: var(--tfa-type-body-sm-line);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--tfa-duration-fast) var(--tfa-ease-standard),
        border-color var(--tfa-duration-fast) var(--tfa-ease-standard);
}
.board-app button:hover { background: var(--tfa-tint); border-color: var(--tfa-action); }
.board-app button:disabled { color: var(--tfa-muted); background: var(--tfa-surface); cursor: default; }
.board-app button.primary, .board-app button[data-action="play"] {
    color: var(--tfa-white);
    background: var(--tfa-action);
    border-color: var(--tfa-action);
}
.board-app button.primary:hover, .board-app button[data-action="play"]:hover { background: var(--tfa-action-hover); }
.board-app :where(a, button, select, textarea, input, summary, [tabindex]):focus-visible {
    outline: var(--tfa-stroke-focus) solid var(--tfa-action);
    outline-offset: var(--tfa-stroke-focus-offset);
    scroll-margin-block: var(--tfa-space-3);
}
.board-app :where(select, input, textarea) {
    border: var(--tfa-stroke-rule) solid var(--tfa-pencil);
    border-radius: var(--tfa-radius-sm);
    padding: var(--tfa-space-1) var(--tfa-space-2);
    max-inline-size: 100%;
    background: var(--tfa-white);
}
.board-app label { display: grid; gap: var(--tfa-space-0-5); }
.board-app label > span { font-weight: var(--tfa-type-label-weight); }

.board-app .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--tfa-space-2);
    min-block-size: var(--tfa-space-8);
    padding: var(--tfa-space-1) var(--tfa-space-3);
    border-block-end: var(--tfa-stroke-rule) solid var(--tfa-line);
}
.board-app .brand-link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--board-target);
    gap: var(--tfa-space-1);
    color: var(--tfa-ink);
    text-decoration: none;
}
.board-app .brand-link img { display: block; inline-size: calc(var(--tfa-space-12) * 2); max-inline-size: 100%; block-size: auto; }
.board-app .site-header :where(p, small) { color: var(--tfa-muted); }
.board-app .lesson-layout {
    display: grid;
    grid-template-columns: calc(var(--tfa-space-10) * 3) minmax(0, 1fr);
    gap: var(--tfa-space-5);
    max-inline-size: calc(var(--tfa-space-16) * 12);
    margin-inline: auto;
    padding: var(--tfa-space-3) var(--tfa-space-4);
    align-items: start;
}
.board-app .lesson-nav {
    position: sticky;
    inset-block-start: var(--tfa-space-3);
    padding-inline-end: var(--tfa-space-3);
    border-inline-end: var(--tfa-stroke-rule) solid var(--tfa-line);
    min-inline-size: 0;
    max-block-size: calc(100dvh - var(--tfa-space-3) * 2);
    overflow-y: auto;
    overscroll-behavior-block: contain;
    padding-block-end: var(--tfa-space-1);
}
.board-app .lesson-nav :where(h2, h3) { font-size: var(--tfa-type-body-lg-size); line-height: var(--tfa-type-body-lg-line); }
.board-app .lesson-nav :where(p, small) { display: block; margin-block: var(--tfa-space-1) var(--tfa-space-2); color: var(--tfa-muted); }
.board-app .lesson-nav :where(ol, ul) { list-style: none; padding: 0; }
.board-app .lesson-nav li + li { margin-block-start: var(--tfa-space-1); }
.board-app .lesson-nav a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--tfa-space-0-5);
    min-block-size: var(--board-target);
    padding: var(--tfa-space-1) var(--tfa-space-2);
    border-inline-start: var(--tfa-stroke-outline) solid transparent;
    border-radius: 0 var(--tfa-radius-sm) var(--tfa-radius-sm) 0;
    text-decoration: none;
}
.board-app .lesson-nav a[aria-current="page"] {
    background: var(--tfa-tint);
    border-inline-start-color: var(--tfa-action);
    font-weight: var(--tfa-type-label-weight);
}
.board-app .lesson-nav a small { margin: 0; color: var(--tfa-muted); }
.board-app .lesson-nav nav { display: grid; gap: var(--tfa-space-1); }
.board-app .lesson-nav a > span { color: var(--tfa-muted); font-size: var(--tfa-type-body-sm-size); line-height: var(--tfa-type-body-sm-line); }
.board-app .lesson-main { min-inline-size: 0; }
.board-app .lesson-heading { padding-block-end: var(--tfa-space-2); }
.board-app .subject-line { color: var(--tfa-muted); margin-block-end: var(--tfa-space-1); }
.board-app .lesson-heading h1 {
    max-inline-size: 100%;
    font-size: var(--tfa-type-h3-size);
    line-height: var(--tfa-type-h3-line);
    letter-spacing: var(--tfa-type-h1-tracking);
    margin-block-end: var(--tfa-space-1);
}
.board-app .summary { max-inline-size: 68ch; color: var(--tfa-muted); }
.board-app .level-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--tfa-space-1);
    margin-block-start: var(--tfa-space-2);
    padding: var(--tfa-space-0-5) var(--tfa-space-1);
    border: var(--tfa-stroke-rule) solid var(--tfa-line);
    border-radius: var(--tfa-radius-xs);
    font-weight: var(--tfa-type-label-weight);
}
.board-app #level-links { display: flex; flex-wrap: wrap; gap: var(--tfa-space-1); }
.board-app .level-badge[aria-current="page"] { background: var(--tfa-tint); border-color: var(--tfa-action); }
.board-app .lesson-options { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--tfa-space-2); margin-block-end: var(--tfa-space-1); }
.board-app .lesson-options .print-controls { margin: 0; }
.board-app .lesson-heading details, .board-app details.lesson-options { margin-block: var(--tfa-space-1); }
.board-app .lesson-heading details > p, .board-app details.lesson-options > div { padding-block: var(--tfa-space-1); }
.board-app .lesson-picker { display: none; }
.board-app .mobile-lesson-picker { display: none; }
.board-app .print-display { margin-block: 0 var(--tfa-space-1); }
.board-app .print-display > summary { padding-block: var(--tfa-space-0-5); }
.board-app .lesson-disclosures { display: flex; flex-wrap: wrap; align-items: start; gap: var(--tfa-space-1) var(--tfa-space-3); margin-block: var(--tfa-space-1); }
.board-app .lesson-disclosures > details { margin: 0; }
.board-app .lesson-disclosures > details[open] { flex-basis: 100%; }
.board-app .lesson-disclosures > details > summary { min-block-size: var(--board-target); padding-block: var(--tfa-space-1); }
.board-app .print-notes { display: none; }
.board-app .phase-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tfa-space-1);
    border-block-end: var(--tfa-stroke-rule) solid var(--tfa-line);
    padding-block-end: var(--tfa-space-1);
    margin-block-end: var(--tfa-space-2);
}
.board-app .phase-nav button { border-color: transparent; border-radius: var(--tfa-radius-sm); }
.board-app .phase-nav button[aria-current="step"] {
    background: var(--tfa-tint);
    border-color: var(--tfa-action);
    color: var(--tfa-action);
    box-shadow: inset 0 calc(-1 * var(--tfa-stroke-outline)) 0 var(--tfa-action);
}
.board-app .phase-panel { min-inline-size: 0; }
.board-app .phase-panel > :where(h2, h3) { margin-block-end: var(--tfa-space-2); }
.board-app .phase-panel > p + :where(p, ul, ol, div, section) { margin-block-start: var(--tfa-space-2); }
.board-app .ready-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tfa-space-4); }
.board-app .ready-grid > * { min-inline-size: 0; }
.board-app .ready-grid :where(h2, h3) { margin-block-end: var(--tfa-space-2); }
.board-app .term-list { padding: 0; list-style: none; }
.board-app .term-list > * { padding-block: var(--tfa-space-2); border-block-end: var(--tfa-stroke-rule) solid var(--tfa-line); }
.board-app .term-list :where(dt, strong) { font-weight: var(--tfa-type-label-weight); }
.board-app .term-list dd { margin: var(--tfa-space-0-5) 0 0; color: var(--tfa-muted); }
.board-app .readiness-item { padding-block: var(--tfa-space-2); border-block-end: var(--tfa-stroke-rule) solid var(--tfa-line); }
.board-app .readiness-item > * + * { margin-block-start: var(--tfa-space-1); }
.board-app summary { min-block-size: var(--board-target); cursor: pointer; color: var(--tfa-action); padding-block: var(--tfa-space-1); }

.board-app .notebook-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--tfa-space-2);
    margin-block: var(--tfa-space-1);
}
.board-app .question-picker { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--tfa-space-1); flex: 1 1 calc(var(--tfa-space-10) * 4); min-inline-size: 0; }
.board-app .question-picker select { inline-size: 100%; }
.board-app .playback-controls, .board-app .print-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tfa-space-1);
    align-items: center;
}
.board-app .teaching-board {
    border: var(--tfa-stroke-rule) solid var(--tfa-line);
    border-block-start: var(--tfa-stroke-outline) solid var(--tfa-ink);
    background: var(--tfa-white);
    padding: var(--tfa-space-3);
    min-inline-size: 0;
}
.board-app .problem-header {
    padding-block-end: var(--tfa-space-3);
    border-block-end: var(--tfa-stroke-rule) solid var(--tfa-line);
}
.board-app .problem-header :where(h2, h3) { margin-block-end: var(--tfa-space-1); }
.board-app .problem-header p { max-inline-size: 72ch; }
.board-app .problem-header .equation { margin-block-start: var(--tfa-space-2); }
.board-app .diagram-region {
    display: grid;
    gap: var(--tfa-space-1);
    margin-block: var(--tfa-space-3);
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}
.board-app .diagram-region svg {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: auto;
    margin-inline: auto;
    font-family: var(--tfa-family-text);
    font-size: var(--tfa-type-h4-size);
}
.board-app .diagram-region svg [data-reveal] { transition: opacity var(--tfa-duration-slow) var(--tfa-ease-standard); }
.board-app .diagram-region svg [data-move-at] { transform-box: view-box; transform-origin: 0 0; transition: transform var(--tfa-duration-slow) var(--tfa-ease-standard); }
.board-app .diagram-region svg[viewBox="0 0 660 180"] { max-inline-size: calc(var(--tfa-space-10) * 8 + var(--tfa-space-2)); }
.board-app .diagram-region :where(figcaption, .diagram-caption, .pan-hint) {
    color: var(--tfa-pencil);
    font-size: var(--tfa-type-body-sm-size);
    line-height: var(--tfa-type-body-sm-line);
}
.board-app .tutor-cue {
    padding: var(--tfa-space-2) 0;
    border-block: var(--tfa-stroke-rule) solid var(--tfa-line);
    font-weight: var(--tfa-type-label-weight);
    margin-block-end: var(--tfa-space-1);
}
.board-app .working-list { list-style: none; padding: 0; min-inline-size: 0; }
.board-app .working-row {
    display: grid;
    grid-template-columns: var(--tfa-space-3) minmax(0, 1.7fr) minmax(0, 1fr);
    column-gap: var(--tfa-space-2);
    row-gap: var(--tfa-space-1);
    align-items: start;
    padding-block: var(--tfa-space-1);
    border-block-end: var(--tfa-stroke-rule) solid var(--tfa-line);
    min-inline-size: 0;
    scroll-margin-block: var(--tfa-space-4);
}
.board-app .working-row:last-child { border-block-end: 0; }
.board-app .working-row.is-current {
    border-inline-start: var(--tfa-stroke-outline) solid var(--tfa-ink);
    padding-inline-start: var(--tfa-space-1);
    margin-inline-start: calc(-1 * var(--tfa-space-1) - var(--tfa-stroke-outline));
}
.board-app .working-number {
    padding-block-start: var(--tfa-space-0-5);
    font-size: var(--tfa-type-caption-size);
    line-height: var(--tfa-type-caption-line);
    color: var(--tfa-pencil);
    font-variant-numeric: tabular-nums;
}
.board-app .working-content {
    min-inline-size: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    padding-block: var(--tfa-space-1);
}
.board-app .working-pan-hint {
    margin: var(--tfa-space-0-5) 0;
    max-inline-size: 100%;
    font-family: var(--tfa-family-text);
    font-size: var(--tfa-type-body-sm-size);
    line-height: var(--tfa-type-body-sm-line);
    color: var(--tfa-muted);
    white-space: normal;
    overflow-wrap: anywhere;
}
.board-app .working-row > .working-pan-hint { grid-column: 2; }
.board-app .working-reason {
    font-family: var(--tfa-family-text);
    font-size: max(var(--tfa-type-body-sm-size), var(--tfa-reg-body-size));
    line-height: var(--tfa-type-body-sm-line);
    color: var(--tfa-muted);
    padding-block: var(--tfa-space-0-5);
    min-inline-size: 0;
}
.board-app .working-reason strong { color: var(--board-method-ink,var(--tfa-ink)); font-weight: var(--tfa-type-label-weight); }
.board-app .working-reason :where(p, strong) { margin: 0; }
.board-app .working-reason > p { margin-block-start: var(--tfa-space-0-5); }
.board-app .working-tools { display: flex; flex-wrap: wrap; gap: var(--tfa-space-1); margin-block-start: var(--tfa-space-2); }
.board-app .solution-checks { margin-block-start: var(--tfa-space-2); padding-block-start: var(--tfa-space-2); border-block-start: var(--tfa-stroke-outline) solid var(--tfa-ink); }
.board-app .solution-checks ul { padding-inline-start: var(--tfa-space-3); }
.board-app .math-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr 1fr 2fr 1fr 2fr;
    align-items: center;
    inline-size: 100%;
    min-inline-size: calc(var(--tfa-space-7) * 7);
    min-block-size: var(--tfa-space-6);
    text-align: center;
    font-family: var(--board-writing-face);
    font-size: var(--board-writing-size);
    line-height: var(--tfa-type-h3-line);
    font-variant-numeric: tabular-nums;
}
.board-app .math-grid > * { min-inline-size: 0; justify-self: center; }
.board-app .term { display: inline-block; position: relative; white-space: nowrap; }
.board-app .operation { color: var(--tfa-diagram-red); font-weight: var(--tfa-type-label-weight); }
.board-app .equation {
    font-family: var(--board-writing-face);
    font-size: var(--board-writing-size);
    line-height: var(--tfa-type-h3-line);
    overflow-wrap: normal;
}
.board-app .fraction { display: inline-grid; grid-template-rows: auto auto; text-align: center; vertical-align: middle; line-height: 1.2; }
.board-app .fraction > :first-child { border-block-end: var(--tfa-stroke-outline) solid currentColor; padding: 0 var(--tfa-space-0-5) var(--tfa-space-0-5); }
.board-app .fraction > :last-child { padding-block-start: var(--tfa-space-0-5); }
.board-app .annotation {
    font-family: var(--tfa-family-text);
    font-size: var(--tfa-type-body-sm-size);
    line-height: var(--tfa-type-body-sm-line);
    color: var(--tfa-muted);
}
.board-app .result {
    display: inline-block;
    border: var(--tfa-stroke-outline) solid var(--tfa-ink);
    border-radius: var(--tfa-radius-xs);
    padding: var(--tfa-space-1) var(--tfa-space-2);
    font-weight: var(--tfa-type-label-weight);
}
.board-app .evidence {
    border-block-end: var(--tfa-stroke-outline) solid var(--tfa-diagram-purple);
    color: var(--tfa-ink);
    background: var(--tfa-diagram-purple-tint);
    padding-inline: var(--tfa-space-0-5);
    box-decoration-break: clone;
}
.board-app [data-strike-at].struck { position: relative; }
.board-app [data-strike-at].struck::after {
    content: "";
    position: absolute;
    inset-inline: calc(-1 * var(--tfa-space-0-5));
    inset-block-start: 50%;
    border-block-start: var(--tfa-stroke-outline) solid var(--tfa-diagram-red);
    transform: rotate(-24deg);
    transform-origin: center;
    pointer-events: none;
}
.board-app .help-panel { border-block-start: var(--tfa-stroke-outline) solid var(--tfa-ink); padding-block: var(--tfa-space-3); margin-block-start: var(--tfa-space-3); }
.board-app .help-panel > * + * { margin-block-start: var(--tfa-space-2); }
.board-app .practice-working { margin-block: var(--tfa-space-3); }
.board-app .practice-working textarea { inline-size: 100%; min-block-size: calc(var(--tfa-space-10) * 2); resize: vertical; line-height: var(--tfa-type-body-lg-line); }
.board-app .question-list { display: grid; gap: var(--tfa-space-1); list-style: none; padding: 0; }
.board-app .question-list li { border-block-end: var(--tfa-stroke-rule) solid var(--tfa-line); padding-block: var(--tfa-space-2); }
.board-app .question-list button { text-align: start; justify-content: start; inline-size: 100%; }
.board-app .question-list button[aria-current="true"] { background: var(--tfa-tint); border-color: var(--tfa-action); }
.board-app .print-controls { margin-block: var(--tfa-space-3); }
.board-app .status-line { color: var(--tfa-muted); padding-block: var(--tfa-space-1); min-block-size: var(--tfa-space-5); }
.board-app .status-line[data-error="true"] { color: var(--tfa-alert); }
.board-app :where(.site-header, .mobile-lesson-picker, .lesson-disclosures, .phase-nav, .notebook-toolbar, .playback-controls, .notebook-settings, .working-tools, .print-controls, .status-line, .curriculum-details) {
    --board-target: calc(var(--tfa-space-5) + var(--tfa-space-0-5));
    font-size: var(--tfa-type-body-size);
    line-height: var(--tfa-type-body-sm-line);
}
.board-app .notebook-settings { border-block: var(--tfa-stroke-rule) solid var(--tfa-line); margin-block: var(--tfa-space-1); padding-block: 0; }
.board-app .notebook-settings > div { display: flex; flex-wrap: wrap; gap: var(--tfa-space-2); padding-block: var(--tfa-space-2); }
.board-app .recap-map { list-style: none; padding: 0; counter-reset: recap; }
.board-app .recap-map > * { counter-increment: recap; padding-block: var(--tfa-space-2); border-block-end: var(--tfa-stroke-rule) solid var(--tfa-line); }
.board-app .recap-map > * > :first-child { font-weight: var(--tfa-type-label-weight); }
.board-app .print-only { display: none; }

/* Age changes the presentation, never the attained rung. */
.board-app[data-register="play"] :where(.problem-header, .ready-grid, .working-reason) { font-size: var(--tfa-reg-body-size); line-height: var(--tfa-reg-body-line); }
.board-app[data-register="play"] { --board-writing-size: var(--tfa-type-h2-size); }
.board-app[data-register="build"] :where(.problem-header, .ready-grid, .working-reason) { font-size: var(--tfa-reg-body-size); line-height: var(--tfa-reg-body-line); }
.board-app[data-register="build"] { --board-writing-size: var(--tfa-type-h3-size); }
.board-app[data-writing="text"] { --board-writing-face: var(--tfa-family-text); }
.board-app.standard-writing { --board-writing-face: var(--tfa-family-text); }
.board-app .reduced-motion *, .board-app.reduced-motion * { animation: none !important; transition-duration: var(--tfa-duration-instant) !important; }

@media (max-width: 72rem) {
    .board-app .lesson-layout { grid-template-columns: calc(var(--tfa-space-12) * 2) minmax(0, 1fr); gap: var(--tfa-space-3); padding-inline: var(--tfa-space-3); }
    .board-app .lesson-nav { padding-inline-end: var(--tfa-space-2); }
    .board-app .teaching-board { padding: var(--tfa-space-2); }
    .board-app .working-row { grid-template-columns: var(--tfa-space-3) minmax(0, 1.2fr) minmax(0, 1fr); column-gap: var(--tfa-space-1); }
    .board-app .math-grid { min-inline-size: calc(var(--tfa-space-6) * 7); }
}

@media (max-width: 64rem) {
    .board-app .site-header { padding-inline: var(--tfa-space-2); }
    .board-app .lesson-layout { display: block; padding: var(--tfa-space-3) var(--tfa-space-2); }
    .board-app .lesson-nav { position: static; padding: 0 0 var(--tfa-space-3); border-inline-end: 0; }
    .board-app:has(.mobile-lesson-picker) .lesson-nav { display: none; }
    .board-app .mobile-lesson-picker { display: grid; grid-template-columns: minmax(0, 1fr); min-inline-size: 0; max-inline-size: calc(100% - var(--tfa-space-4)); margin: var(--tfa-space-1) var(--tfa-space-2) var(--tfa-space-2); }
    .board-app .mobile-lesson-picker select { inline-size: 100%; min-inline-size: 0; }
    .board-app .lesson-nav :where(ol, ul, nav) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tfa-space-1); }
    .board-app .lesson-nav li + li { margin: 0; }
    .board-app .lesson-nav a { border: var(--tfa-stroke-rule) solid var(--tfa-line); border-radius: var(--tfa-radius-sm); padding-inline: var(--tfa-space-1); }
    .board-app .lesson-nav a[aria-current="page"] { border-color: var(--tfa-action); }
    .board-app .lesson-nav a small { display: none; }
    .board-app .working-row { grid-template-columns: var(--tfa-space-3) minmax(0, 1fr); }
    .board-app .working-number { grid-column: 1; grid-row: 1 / span 2; }
    .board-app .working-content, .board-app .working-reason { grid-column: 2; }
    .board-app .working-reason { padding-block-start: 0; }
    .board-app .working-reason::before { content: ""; display: block; inline-size: var(--tfa-space-3); border-block-start: var(--tfa-stroke-rule) solid var(--tfa-line); margin-block-end: var(--tfa-space-1); }
    .board-app .math-grid { min-inline-size: calc(var(--tfa-space-6) * 7); }
}

@media (max-width: 40rem) {
    .board-app .lesson-layout { padding-block-start: var(--tfa-space-2); }
    .board-app .site-header { gap: var(--tfa-space-1); }
    .board-app .site-header > a:not(.brand-link) { display: none; }
    .board-app .site-header .brand-link img { inline-size: calc(var(--tfa-space-10) * 2); }
    .board-app .site-header :where(p, small) { font-size: var(--tfa-type-body-sm-size); line-height: var(--tfa-type-body-sm-line); }
    .board-app .lesson-nav :where(ol, ul, nav) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .board-app .phase-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .board-app .phase-nav button { justify-content: start; text-align: start; }
    .board-app .ready-grid { grid-template-columns: minmax(0, 1fr); gap: var(--tfa-space-3); }
    .board-app .notebook-toolbar { align-items: stretch; }
    .board-app .question-picker { grid-template-columns: minmax(0, 1fr); }
    .board-app .playback-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; }
    .board-app .teaching-board { padding: var(--tfa-space-2) var(--tfa-space-1); }
    .board-app .problem-header { padding-inline: var(--tfa-space-1); }
    .board-app .working-row { grid-template-columns: var(--tfa-space-2) minmax(0, 1fr); gap: var(--tfa-space-1); }
    .board-app .working-row.is-current { margin-inline-start: 0; }
    .board-app .diagram-region svg { min-inline-size: calc(var(--tfa-space-10) * 9); max-inline-size: none; }
    .board-app .diagram-region svg[viewBox="0 0 660 180"] { min-inline-size: calc(var(--tfa-space-10) * 8 + var(--tfa-space-2) + var(--tfa-space-0-5)); max-inline-size: none; }
    .board-app .print-controls { align-items: stretch; }
    .board-app .print-controls > * { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .board-app *, .board-app *::before, .board-app *::after { animation: none !important; transition-duration: var(--tfa-duration-instant) !important; scroll-behavior: auto !important; }
}

@page { size: A4; }
@media print {
    .board-app { color: var(--tfa-ink); background: var(--tfa-white); font-size: var(--tfa-type-body-sm-size); line-height: var(--tfa-type-body-sm-line); --board-writing-face: var(--tfa-family-text); --board-writing-size: var(--tfa-type-h4-size); }
    .board-app .screen-only, .board-app .site-header, .board-app .lesson-nav, .board-app .phase-nav,
    .board-app .notebook-toolbar, .board-app .playback-controls, .board-app .print-controls, .board-app .lesson-options, .board-app .working-tools,
    .board-app .notebook-settings, .board-app .status-line, .board-app :where(button, select, textarea) { display: none !important; }
    .board-app .print-only { display: block; white-space: pre-wrap; }
    .board-app .print-notes { display: block; white-space: pre-wrap; font: inherit; overflow-wrap: anywhere; }
    .board-app .lesson-disclosures { display: none; }
    .board-app .lesson-layout { display: block; max-inline-size: none; padding: 0; margin: 0; }
    .board-app .lesson-heading { break-after: avoid; padding-block-end: var(--tfa-space-2); }
    .board-app .lesson-heading h1 { font-size: var(--tfa-type-h3-size); line-height: var(--tfa-type-h3-line); }
    .board-app .lesson-heading :where(.subject-line, .summary, .level-badge) { margin-block: var(--tfa-space-1); }
    .board-app .teaching-board { padding: 0; border: 0; overflow: visible; }
    .board-app .problem-header { break-after: avoid; }
    .board-app .working-row { display: grid; grid-template-columns: var(--tfa-space-2) minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--tfa-space-1); break-inside: avoid; padding-block: var(--tfa-space-1); }
    .board-app .working-row.is-current { border-inline-start: 0; padding-inline-start: 0; margin-inline-start: 0; }
    .board-app .working-number { grid-column: auto; grid-row: auto; }
    .board-app .working-content, .board-app .working-reason { grid-column: auto; overflow: visible; scrollbar-gutter: auto; }
    .board-app .working-reason { font-size: var(--tfa-type-body-sm-size); line-height: var(--tfa-type-body-sm-line); }
    .board-app .working-reason::before { display: none; }
    .board-app .math-grid { min-inline-size: 0; min-block-size: var(--tfa-space-4); font-size: var(--tfa-type-h4-size); line-height: var(--tfa-type-h4-line); }
    .board-app .math-grid > * { min-inline-size: 0; }
    .board-app .equation { overflow-wrap: anywhere; }
    .board-app .diagram-region { display: block; overflow: visible; scrollbar-gutter: auto; break-inside: avoid; }
    .board-app .diagram-region svg { inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; block-size: auto; }
    .board-app .diagram-region .pan-hint, .board-app .working-pan-hint { display: none; }
    .board-app .help-panel, .board-app .readiness-item, .board-app .recap-map > * { break-inside: avoid; }
    .board-app :where(h2, h3, h4) { break-after: avoid; }
    .board-app p { orphans: 3; widows: 3; }
    .board-app a { color: var(--tfa-ink); text-decoration: none; }
    .board-app details { display: block; }
}

/* Current-question browser print keeps long working on the full printable width. */
@media print {
 .board-app .working-row { grid-template-columns: var(--tfa-space-2) minmax(0, 1fr); }
 .board-app .working-content, .board-app .working-reason { grid-column: 2; }
}

/* Short handwritten cues belong to the exact expression they explain. */
.board-app .annotated-line { position: relative; box-sizing: border-box; max-inline-size: none; }
.board-app .annotated-prose { padding-inline: var(--tfa-space-2); }
.board-app .quick-note { position: absolute; display: block; inline-size: max-content; color: var(--tfa-diagram-teal); font-family: var(--board-writing-face); font-size: var(--tfa-type-body-lg-size); line-height: var(--tfa-type-body-sm-line); overflow-wrap: normal; white-space: normal; z-index: 1; }
.board-app .callout-arrows { position: absolute; inset: 0; overflow: visible; pointer-events: none; fill: none; stroke: var(--tfa-diagram-teal); stroke-width: var(--tfa-stroke-outline); stroke-linecap: round; stroke-linejoin: round; }
.board-app .working-zone-headings { display: grid; grid-template-columns: var(--tfa-space-3) minmax(0,1.7fr) minmax(0,1fr); column-gap: var(--tfa-space-2); padding-block: var(--tfa-space-1); border-block-end: var(--tfa-stroke-rule) solid var(--tfa-line); font-size: var(--tfa-type-body-sm-size); color: var(--tfa-muted); }
@media (min-width: 44rem) and (max-width: 64rem) {
 .board-app .working-row { grid-template-columns: var(--tfa-space-3) minmax(0,1.7fr) minmax(0,1fr); column-gap: var(--tfa-space-2); }
 .board-app .working-number { grid-column: 1; grid-row: 1; }
 .board-app .working-content { grid-column: 2; }
 .board-app .working-reason { grid-column: 3; }
 .board-app .working-reason::before { display: none; }
}
@media (min-width: 64rem) and (max-width: 72rem) {
 .board-app .working-row { grid-template-columns: var(--tfa-space-3) minmax(0,1.7fr) minmax(0,1fr); column-gap: var(--tfa-space-2); }
}
@media (max-width: 44rem) { .board-app .working-zone-headings { display: none; } }
@media print {
 .board-app .quick-note { font-family: var(--tfa-family-text); font-size: var(--tfa-type-body-sm-size); }
 .board-app .working-zone-headings { display: none; }
 .board-app .working-row { grid-template-columns: var(--tfa-space-2) minmax(0,1fr); }
 .board-app .working-content, .board-app .working-reason { grid-column: 2; }
}

/* Keep the drawing in sight while the cumulative working grows. */
html { scroll-padding-block-start: var(--board-scroll-offset, var(--tfa-space-2)); }
.board-app.notebook-open .lesson-layout { display: block; padding-inline: var(--tfa-space-3); }
.board-app.notebook-open .lesson-nav { display: none; }
.board-app.notebook-open .mobile-lesson-picker { display: grid; min-inline-size: 0; margin: var(--tfa-space-2) var(--tfa-space-3); max-inline-size: calc(var(--tfa-space-12) * 6); }
.board-app.notebook-open .mobile-lesson-picker select { min-inline-size: 0; inline-size: 100%; }
.board-app .board-workspace { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--tfa-space-2); align-items: start; }
.board-app .worked-stream { min-inline-size: 0; }
.board-app .diagram-dock { position: sticky; inset-block-start: 0; z-index: 3; min-inline-size: 0; background: var(--tfa-white); border: var(--tfa-stroke-rule) solid var(--tfa-line); border-radius: var(--tfa-radius-sm); padding: var(--tfa-space-1); }
.board-app .diagram-dock-heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tfa-space-1); }
.board-app .diagram-dock-heading > div { flex: 1 1 auto; }
.board-app .diagram-dock-heading strong { display: block; font-size: var(--tfa-type-body-sm-size); }
.board-app #diagram-step { display: block; color: var(--tfa-muted); font-size: var(--tfa-type-caption-size); line-height: var(--tfa-type-caption-line); }
.board-app .diagram-dock :where(button) { min-block-size: var(--tfa-space-6); padding: var(--tfa-space-0-5) var(--tfa-space-1); font-size: var(--tfa-type-body-sm-size); }
.board-app .diagram-dock .diagram-region { margin-block: var(--tfa-space-1); max-block-size: min(32dvh, calc(var(--tfa-space-10) * 3)); overflow: auto; overscroll-behavior: contain; }
.board-app .diagram-dock .diagram-region svg { inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; max-block-size: min(30dvh, calc(var(--tfa-space-10) * 3)); }
.board-app .diagram-dock .diagram-region[data-diagram="simple"] svg { min-inline-size: 0; }
.board-app .diagram-step-controls { display: flex; flex-wrap: wrap; gap: var(--tfa-space-1); padding-block-start: var(--tfa-space-0-5); border-block-start: var(--tfa-stroke-rule) solid var(--tfa-line); }
.board-app .diagram-step-controls button { flex: 1 1 auto; }
.board-app button.primary:disabled { color: var(--tfa-muted); background: var(--tfa-surface); border-color: var(--tfa-line); }
.board-app .working-row { scroll-margin-block-start: var(--board-scroll-offset, var(--tfa-space-2)); }
.board-app #diagram-dialog { max-inline-size: min(96vw, calc(var(--tfa-space-16) * 10)); inline-size: calc(100vw - var(--tfa-space-4)); max-block-size: calc(100dvh - var(--tfa-space-4)); padding: var(--tfa-space-3); border: var(--tfa-stroke-rule) solid var(--tfa-line); border-radius: var(--tfa-radius-md); color: var(--tfa-ink); background: var(--tfa-white); }
.board-app #diagram-dialog::backdrop { background: var(--tfa-ink); opacity: .65; }
.board-app .diagram-dialog-heading { display: flex; gap: var(--tfa-space-2); align-items: start; justify-content: space-between; }
.board-app .diagram-dialog-heading h2 { font-size: var(--tfa-type-h4-size); line-height: var(--tfa-type-h4-line); }
.board-app #diagram-dialog .diagram-region { margin-block-end: 0; max-block-size: calc(100dvh - var(--tfa-space-10) * 2); overflow: auto; overscroll-behavior: contain; }
.board-app #diagram-dialog .diagram-region svg { min-inline-size: calc(var(--tfa-space-10) * 9); max-inline-size: none; }
@media (min-width: 78rem) {
 .board-app .board-workspace.has-diagram { grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: var(--tfa-space-3); }
 .board-app .diagram-dock { inset-block-start: var(--tfa-space-2); }
 .board-app .diagram-dock .diagram-region { max-block-size: calc(100dvh - var(--tfa-space-10) * 3); }
 .board-app .diagram-dock .diagram-region svg { max-block-size: calc(100dvh - var(--tfa-space-10) * 3 - var(--tfa-space-2)); }
}
@media (max-width: 44rem) {
 .board-app.notebook-open .lesson-layout { padding-inline: var(--tfa-space-1); }
 .board-app .diagram-dock-heading strong { font-size: var(--tfa-type-caption-size); }
 .board-app .diagram-dock-heading > div { flex-basis: 100%; display: flex; justify-content: space-between; gap: var(--tfa-space-1); }
 .board-app .diagram-dock-heading button { flex: 1 1 auto; }
 .board-app .diagram-dock .diagram-region { max-block-size: min(24dvh, calc(var(--tfa-space-10) * 2)); }
 .board-app .diagram-dock .diagram-region svg { max-block-size: min(22dvh, calc(var(--tfa-space-10) * 2 - var(--tfa-space-2))); }
 .board-app #diagram-dialog { padding: var(--tfa-space-1); }
 .board-app .diagram-dialog-heading { flex-wrap: wrap; }
}
@media (max-height: 34rem) { .board-app .diagram-dock { position: static; } }
@media print {
 html { scroll-padding: 0; }
 .board-app.notebook-open .mobile-lesson-picker, .board-app .diagram-dock-heading, .board-app .diagram-step-controls, .board-app #diagram-dialog { display: none !important; }
 .board-app.notebook-open .lesson-layout { padding: 0; }
 .board-app .board-workspace, .board-app .board-workspace.has-diagram { display: block; }
 .board-app .diagram-dock { position: static; padding: 0; border: 0; }
 .board-app #diagram-home[hidden] { display: block !important; }
 .board-app .diagram-dock .diagram-region { max-block-size: none; overflow: visible; }
 .board-app .diagram-dock .diagram-region svg, .board-app .diagram-dock .diagram-region[data-diagram="simple"] svg { min-inline-size: 0; max-inline-size: 100%; max-block-size: none; }
 .board-app .working-row { scroll-margin: 0; }
}

/* Notes are measured with their padding so enclosures never cover equations. */
.board-app .board-appearance { margin-block-end: var(--tfa-space-2); border-block: var(--tfa-stroke-rule) solid var(--tfa-line); }
.board-app .board-appearance > summary { min-block-size: var(--tfa-space-6); padding-block: var(--tfa-space-1); cursor: pointer; color: var(--tfa-action); }
.board-app[data-annotation-style="bubble"] .quick-note,
.board-app[data-annotation-style="cloud"] .quick-note,
.board-app[data-annotation-style="brace"] .quick-note { padding: var(--tfa-space-0-5) var(--tfa-space-2); }
.board-app .callout-enclosure { stroke: var(--board-note-color,var(--tfa-diagram-teal)); fill: var(--board-note-fill,var(--tfa-white)); }
.board-app .callout-enclosure[data-shape="brace"] { fill: none; }
.board-app .callout-leader { fill: none; stroke: var(--board-note-color,var(--tfa-diagram-teal)); }
@media print { .board-app .board-appearance { display:none !important; } }

/* A single reachable control strip follows the lesson, including full screen. */
.board-app { padding-block-end: calc(var(--lesson-flow-height, var(--tfa-space-12)) + var(--tfa-space-3)); }
.board-app .lesson-flow { position:fixed; z-index:20; inset-inline:0; inset-block-end:0; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:var(--tfa-space-1); padding:var(--tfa-space-1) var(--tfa-space-2) max(var(--tfa-space-1),env(safe-area-inset-bottom)); background:var(--tfa-white); color:var(--tfa-ink); border-block-start:var(--tfa-stroke-outline) solid var(--tfa-line); box-shadow:var(--tfa-shadow-float); }
.board-app .lesson-flow :where(button,select) { min-block-size:var(--tfa-space-6); font-size:var(--tfa-type-body-sm-size); padding:var(--tfa-space-0-5) var(--tfa-space-1); }
.board-app .lesson-flow .flow-phase { display:flex; gap:var(--tfa-space-1); align-items:center; font-size:var(--tfa-type-body-sm-size); }
.board-app .lesson-flow .flow-phase select { max-inline-size:calc(var(--tfa-space-10) * 3); }
.board-app .lesson-flow :where(.flow-teaching,.flow-support,.flow-questions) { display:flex; align-items:center; gap:var(--tfa-space-1); }
.board-app #flow-progress { white-space:nowrap; font-size:var(--tfa-type-caption-size); }
.board-app .playback-controls { margin-block-end:var(--tfa-space-2); }
.board-app .board-focus-view { position:fixed; inset:0; z-index:30; inline-size:100%; block-size:100dvh; overflow:auto; background:var(--tfa-white); padding:var(--tfa-space-2) var(--tfa-space-3) calc(var(--lesson-flow-height, var(--tfa-space-12)) + var(--tfa-space-3)); overscroll-behavior:contain; }
.board-app.board-immersive { overflow:hidden; }
.board-app .board-focus-view .lesson-heading { margin-block-start:var(--tfa-space-1); }
.board-app .board-focus-view .lesson-flow { z-index:35; }
html, .board-focus-view { scroll-padding-block-end:calc(var(--lesson-flow-height, var(--tfa-space-12)) + var(--tfa-space-2)); }
.board-app .sr-only { position:absolute; inline-size:1px; block-size:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:44rem) {
 .board-app .lesson-flow { justify-content:space-between; gap:var(--tfa-space-0-5); padding-inline:var(--tfa-space-1); }
 .board-app .lesson-flow .flow-teaching { order:-1; flex-basis:100%; justify-content:space-between; }
 .board-app .lesson-flow .flow-support { order:-1; flex:1 1 100%; }
 .board-app .lesson-flow .flow-support button { flex:1; }
 .board-app .lesson-flow :where(button,select) { min-block-size:var(--tfa-space-6); }
 .board-app .lesson-flow .flow-phase { font-size:0; gap:0; }
 .board-app .lesson-flow .flow-phase select { max-inline-size:calc(var(--tfa-space-10) * 2); }
 .board-app .lesson-flow .flow-questions { gap:0; }
 .board-app .lesson-flow .flow-questions button { padding-inline:var(--tfa-space-0-5); }
 .board-app .board-focus-view { padding-inline:var(--tfa-space-1); }
}

/* Show a portable approach before the detailed, cumulative demonstration. */
.board-app .method-guide { margin-block:var(--tfa-space-3); padding-block:var(--tfa-space-2); border-block:var(--tfa-stroke-rule) solid var(--tfa-line); }
.board-app .method-guide > * + * { margin-block-start:var(--tfa-space-2); }
.board-app .method-guide dl, .board-app .strategy-map { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--tfa-space-2); }
.board-app .method-guide dd, .board-app .strategy-map dd { margin:var(--tfa-space-0-5) 0 0; }
.board-app .method-guide dt, .board-app .strategy-map dt { font-weight:var(--tfa-type-label-weight); }
.board-app .method-route { display:flex; flex-wrap:wrap; list-style:none; padding:0; counter-reset:method; gap:var(--tfa-space-2); }
.board-app .method-route li { flex:1 1 calc(var(--tfa-space-10) * 3); counter-increment:method; border-inline-start:var(--tfa-stroke-outline) solid var(--tfa-line); padding-inline-start:var(--tfa-space-1); }
.board-app .method-route li::before { content:counter(method) ". "; font-weight:var(--tfa-type-label-weight); }
.board-app .strategy-plan { border-block-end:var(--tfa-stroke-rule) solid var(--board-line,var(--tfa-line)); padding:var(--tfa-space-2) 0; margin-block-end:var(--tfa-space-2); }
.board-app .strategy-plan > * + * { margin-block-start:var(--tfa-space-1); }
.board-app .strategy-map > div { border-inline-start:var(--tfa-stroke-outline) solid var(--board-note-ink,var(--tfa-diagram-teal)); padding-inline-start:var(--tfa-space-1); }
.board-app .strategy-map dd span { display:block; }
@media(max-width:44rem){ .board-app .method-guide dl, .board-app .strategy-map { grid-template-columns:minmax(0,1fr); } }

/* Mix note styles without changing wording, operations or diagram geometry. */
.board-app [data-edit-annotation] { cursor:pointer; }
.board-app .quick-note[data-note-shape="plain"] { padding:0; }
.board-app .quick-note:not([data-note-shape="plain"]) { padding:var(--tfa-space-0-5) var(--tfa-space-2); }
.board-app .method-label { position:relative; display:block; }
.board-app .method-label:not([data-note-shape="plain"]) { padding:var(--tfa-space-1) var(--tfa-space-2); }
.board-app .method-label-text { position:relative; z-index:1; }
.board-app .method-note-outline { position:absolute; inset:0; inline-size:100%; block-size:100%; overflow:visible; pointer-events:none; fill:var(--board-surface,var(--tfa-white)); stroke:currentColor; stroke-width:var(--tfa-stroke-rule); }
.board-app .method-note-outline path[data-shape="brace"] { fill:none; }
.board-app .diagram-note-outline { fill:none; stroke:var(--board-note-ink,var(--tfa-diagram-teal)); stroke-width:var(--tfa-stroke-rule); stroke-linecap:round; pointer-events:none; }
.board-app #annotation-editor { max-inline-size:min(90vw,calc(var(--tfa-space-10) * 6)); border:var(--tfa-stroke-rule) solid var(--tfa-line); border-radius:var(--tfa-radius-md); padding:var(--tfa-space-3); color:var(--tfa-ink); background:var(--tfa-white); }
.board-app #annotation-editor > * + * { margin-block-start:var(--tfa-space-2); }
.board-app #annotation-editor::backdrop { background:var(--tfa-ink); opacity:.5; }
.board-app .annotation-save-status { font-size:var(--tfa-type-body-sm-size); }
@media print {
 .board-app { padding:0; }
 .board-app .lesson-flow, .board-app #annotation-editor { display:none !important; }
 .board-app .board-focus-view { position:static; overflow:visible; block-size:auto; padding:0; }
 .board-app .strategy-map { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .board-app .method-label { padding:0 !important; }
 .board-app .method-note-outline,.board-app .diagram-note-outline { display:none; }
}
.board-app .callout-enclosure:is([data-shape="underline"],[data-shape="circle"]), .board-app .method-note-outline path:is([data-shape="underline"],[data-shape="circle"]) { fill:none; }
.board-app .callout-enclosure[data-shape="highlight"], .board-app .method-note-outline path[data-shape="highlight"], .board-app .diagram-note-outline[data-shape="highlight"] { fill:var(--board-note-ink,var(--tfa-diagram-teal)); fill-opacity:.15; stroke:none; }
@media screen {
 /* Playback lives in the persistent strip. Keep only the complete-working shortcut above. */
 .board-app .playback-controls > :not(#show-all), .board-app .diagram-step-controls, .board-app #next-question { display:none !important; }
 .board-app .playback-controls { display:block; }
}

/* Integral limits stay attached to the symbol in both writing styles. */
.board-app .bounded-integral { display:inline-grid; grid-template-columns:auto auto; grid-template-rows:1fr 1fr; vertical-align:middle; line-height:1; margin-inline-end:.15em; }
.board-app .bounded-integral .integral-sign { grid-column:1; grid-row:1 / 3; font-size:1.65em; line-height:1.05; }
.board-app .bounded-integral :is(.integral-upper,.integral-lower) { grid-column:2; font-size:.6em; line-height:1.1; text-align:start; }
.board-app .bounded-integral .integral-upper { grid-row:1; align-self:start; }
.board-app .bounded-integral .integral-lower { grid-row:2; align-self:end; }