/* Personalise the teaching surface, not the website or the lesson's meaning.
   Load after board.css and appearance.css. Defaults use the brand palette; validated user choices customise the teaching surface. */
.board-app .teaching-board {
    --board-surface: var(--board-custom-background, var(--tfa-white));
    --board-panel: var(--board-surface);
    --board-foreground: var(--board-custom-main, var(--tfa-ink));
    --board-muted: var(--board-custom-main, var(--tfa-muted));
    --board-line: color-mix(in srgb, var(--board-foreground) 22%, var(--board-surface));
    --board-rule: color-mix(in srgb, var(--board-foreground) 16%, var(--board-surface));
    --board-note-ink: var(--board-custom-annotation, var(--tfa-diagram-teal));
    --board-note-surface: var(--board-surface);
    --board-note-color: var(--board-note-ink);
    --board-note-fill: var(--board-note-surface);
    --board-operation: var(--board-adaptive-red, var(--tfa-diagram-red));
    --board-outline: var(--board-foreground);
    --board-method-ink: var(--board-custom-method, var(--tfa-muted));
    --board-diagram-accent: var(--board-custom-diagram, var(--board-foreground));
    --board-paper-lines: none;
    color: var(--board-foreground);
    background: var(--board-surface);
    border-color: var(--board-line);
    border-block-start-color: var(--board-outline);
}
.board-app #environment-controls { min-inline-size: 0; max-inline-size: 100%; }
.board-app .board-environment {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--tfa-space-1) var(--tfa-space-2);
    padding: var(--tfa-space-1) 0;
    margin: 0 0 var(--tfa-space-2);
    border: 0;
    min-inline-size: 0;
}
.board-app .board-environment legend {
    padding: 0;
    font-size: var(--tfa-type-body-size);
    line-height: var(--tfa-type-body-line);
    font-weight: var(--tfa-type-label-weight);
}
.board-app .board-environment label {
    flex: 1 1 calc(var(--tfa-space-10) * 2);
    min-inline-size: 0;
    max-inline-size: 100%;
}
.board-app .board-environment select { inline-size: 100%; min-inline-size: 0; }
.board-app .environment-status {
    flex-basis: 100%;
    color: var(--board-muted);
    font-size: var(--tfa-type-body-sm-size);
    line-height: var(--tfa-type-body-sm-line);
}
.board-app .teaching-board :where(select, input, textarea) {
    /* Controls keep their familiar high-contrast light surface in every environment. */
    color: var(--tfa-ink);
    background-color: var(--tfa-white);
}
.board-app .teaching-board .worked-stream {
    background-image: var(--board-paper-lines);
    background-size: var(--tfa-space-4) var(--tfa-space-4);
}
.board-app .teaching-board :where(.problem-header, .working-row, .tutor-cue, .working-zone-headings, .notebook-settings, .diagram-step-controls) {
    border-color: var(--board-line);
}
.board-app .teaching-board .working-row.is-current { border-inline-start-color: var(--board-outline); }
.board-app .teaching-board .diagram-dock,
.board-app .teaching-board #diagram-dialog {
    background: var(--board-panel);
    color: var(--board-foreground);
    border-color: var(--board-line);
}
.board-app .teaching-board :where(.working-number, .annotation, .working-pan-hint, .working-zone-headings, #diagram-step, .method-appearance-status, .status-line) {
    color: var(--board-muted);
}
.board-app .teaching-board #diagram-step { color: var(--board-muted); }
.board-app .teaching-board :where(.result, .solution-checks, .help-panel) { border-color: var(--board-outline); }
.board-app .teaching-board .quick-note { color: var(--board-note-ink); }
.board-app .teaching-board .callout-arrows { stroke: var(--board-note-ink); }
.board-app .teaching-board .callout-enclosure { fill: var(--board-note-surface); stroke: var(--board-note-ink); }
.board-app .teaching-board .callout-enclosure[data-shape="brace"] { fill: none; }
.board-app .teaching-board .operation { color: var(--board-operation); }
.board-app .teaching-board [data-strike-at].struck::after { border-color: var(--board-operation); }

@media screen {
    .board-app[data-board-environment="lined"] .teaching-board {
        --board-paper-lines: repeating-linear-gradient(to bottom,
            transparent 0,
            transparent calc(var(--tfa-space-4) - var(--tfa-stroke-rule)),
            var(--board-rule) calc(var(--tfa-space-4) - var(--tfa-stroke-rule)),
            var(--board-rule) var(--tfa-space-4));
    }
    .board-app[data-board-environment="grid"] .teaching-board {
        --board-paper-lines: linear-gradient(to right, var(--board-rule) var(--tfa-stroke-rule), transparent var(--tfa-stroke-rule)),
            linear-gradient(to bottom, var(--board-rule) var(--tfa-stroke-rule), transparent var(--tfa-stroke-rule));
    }
    .board-app[data-board-environment="whiteboard"] .teaching-board {
        border: var(--tfa-stroke-outline) solid var(--tfa-ink-300);
        border-radius: var(--tfa-radius-lg);
    }
    .board-app[data-board-environment="chalkboard"] .teaching-board {
        --board-surface: var(--board-custom-background, var(--tfa-ink));
        --board-panel: var(--board-surface);
        --board-foreground: var(--board-custom-main, var(--tfa-white));
        --board-muted: var(--board-custom-main, var(--tfa-ink-200));
        --board-line: color-mix(in srgb, var(--board-foreground) 22%, var(--board-surface));
        --board-rule: color-mix(in srgb, var(--board-foreground) 16%, var(--board-surface));
        --board-note-ink: var(--board-custom-annotation, var(--tfa-diagram-teal-mid));
        --board-note-surface: var(--board-surface);
        --board-operation: var(--board-adaptive-red, var(--tfa-diagram-red-mid));
        --board-outline: var(--board-foreground);
        --board-method-ink: var(--board-custom-method, var(--tfa-white));
        border: var(--tfa-stroke-outline) solid var(--tfa-ink-500);
        border-radius: var(--tfa-radius-md);
        color-scheme: dark;
    }
    .board-app[data-board-environment="chalkboard"] .teaching-board :where(select, input, textarea) { color-scheme: light; }
    .board-app[data-board-environment="chalkboard"] .teaching-board .evidence {
        color: var(--board-foreground);
        background: var(--tfa-ink-800);
        border-color: var(--tfa-diagram-purple-mid);
    }
    .board-app[data-board-environment="chalkboard"] .teaching-board .status-line[data-error="true"] { color: var(--tfa-diagram-red-mid); }
    .board-app[data-board-environment="chalkboard"] .teaching-board :where(summary, [tabindex]):focus-visible { outline-color: var(--tfa-sky); }


}

@media print {
    .board-app #environment-controls { display: none !important; }
    .board-app .teaching-board {
        color: var(--tfa-ink);
        background: var(--tfa-white);
        border: 0;
        border-radius: 0;
    }
    .board-app .teaching-board .worked-stream { background-image: none; }
    .board-app .teaching-board .callout-enclosure { fill: var(--tfa-white); }
    .board-app .teaching-board .callout-enclosure[data-shape="brace"] { fill: none; }
}

/* A chosen colour applies to its named role; colours encoding subject meaning stay
   authored. This avoids changing a red force or a blue curve into a different key. */
@media screen {
 .board-app .teaching-board :where(.problem-header,.working-content,.math-grid,.equation,.solution-checks,.strategy-plan,.method-guide) { color: var(--board-foreground); }
 .board-app .teaching-board :where(.working-reason,.working-reason strong) { color: var(--board-method-ink); }
 .board-app .teaching-board .diagram-region {
   --tfa-ink: var(--board-diagram-accent);
   --tfa-muted: var(--board-diagram-accent);
   --tfa-pencil: var(--board-diagram-accent);
   --tfa-white: var(--board-surface);
   --tfa-surface: var(--board-surface);
   --tfa-tint: color-mix(in srgb, var(--board-diagram-accent) 12%, var(--board-surface));
   --tfa-line: color-mix(in srgb, var(--board-foreground) 30%, var(--board-surface));
   --tfa-diagram-red: var(--board-adaptive-red);
   --tfa-diagram-red-tint: color-mix(in srgb, var(--board-adaptive-red) 16%, var(--board-surface));
   --tfa-diagram-blue: var(--board-adaptive-blue);
   --tfa-diagram-blue-tint: color-mix(in srgb, var(--board-adaptive-blue) 16%, var(--board-surface));
   --tfa-diagram-teal: var(--board-adaptive-teal);
   --tfa-diagram-teal-tint: color-mix(in srgb, var(--board-adaptive-teal) 16%, var(--board-surface));
   --tfa-diagram-green: var(--board-adaptive-green);
   --tfa-diagram-green-tint: color-mix(in srgb, var(--board-adaptive-green) 16%, var(--board-surface));
   --tfa-diagram-purple: var(--board-adaptive-purple);
   --tfa-diagram-purple-tint: color-mix(in srgb, var(--board-adaptive-purple) 16%, var(--board-surface));
   --tfa-diagram-pink: var(--board-adaptive-pink);
   --tfa-diagram-pink-tint: color-mix(in srgb, var(--board-adaptive-pink) 16%, var(--board-surface));
   --tfa-diagram-brown: var(--board-adaptive-brown);
   --tfa-diagram-brown-tint: color-mix(in srgb, var(--board-adaptive-brown) 16%, var(--board-surface));
   --tfa-diagram-cyan: var(--board-adaptive-cyan);
   --tfa-diagram-cyan-tint: color-mix(in srgb, var(--board-adaptive-cyan) 16%, var(--board-surface));
   --tfa-diagram-plum: var(--board-adaptive-plum);
   --tfa-diagram-plum-tint: color-mix(in srgb, var(--board-adaptive-plum) 16%, var(--board-surface));
   --tfa-diagram-amber: var(--board-adaptive-amber);
   --tfa-diagram-amber-tint: color-mix(in srgb, var(--board-adaptive-amber) 16%, var(--board-surface));
   --tfa-diagram-orange: var(--board-adaptive-orange);
   --tfa-diagram-orange-tint: color-mix(in srgb, var(--board-adaptive-orange) 16%, var(--board-surface));
   --tfa-diagram-yellow: var(--board-adaptive-yellow);
   --tfa-diagram-yellow-tint: color-mix(in srgb, var(--board-adaptive-yellow) 16%, var(--board-surface));
   background: var(--board-surface);
 }
 .board-app .teaching-board :where(.evidence,.tutor-cue) { color: var(--board-foreground); background: var(--board-surface); }
 .board-app .teaching-board :where(.board-appearance,.notebook-settings) { color: var(--tfa-ink); background: var(--tfa-white); padding-inline: var(--tfa-space-1); }
 .board-app .teaching-board :where(.board-appearance,.notebook-settings) > summary { color: var(--tfa-action); }
 .board-app .teaching-board :where(.environment-status,.method-appearance-status,.colour-recommendation,.colour-feedback) { color: var(--tfa-muted); }
 .board-app .teaching-board :where(.board-appearance,.notebook-settings) :focus-visible { outline-color: var(--tfa-action); }
 .board-app:is([data-annotation-working="mixed"],[data-annotation-working="circle"],[data-annotation-working="highlight"]) .quick-note { padding: var(--tfa-space-0-5) var(--tfa-space-2); }
}
@media print {
 .board-app .teaching-board {
   --board-surface: var(--tfa-white); --board-panel: var(--tfa-white);
   --board-foreground: var(--tfa-ink); --board-muted: var(--tfa-muted);
   --board-note-ink: var(--tfa-diagram-teal); --board-note-surface: var(--tfa-white);
   --board-method-ink: var(--tfa-ink); --board-diagram-accent: var(--tfa-ink);
   --board-outline: var(--tfa-ink); --board-operation: var(--tfa-diagram-red);
 }
}