/* Global notebook typography and compact device-local preference controls. */
.board-app #method-style-controls { min-inline-size: 0; max-inline-size: 100%; }
.board-app .method-appearance {
    display: flex; flex-wrap: wrap; align-items: end;
    gap: var(--tfa-space-1) var(--tfa-space-2);
    margin: 0; padding: var(--tfa-space-1) 0; border: 0; min-inline-size: 0;
}
.board-app .method-appearance legend {
    padding: 0; font-weight: var(--tfa-type-label-weight);
    font-size: var(--tfa-type-body-size); line-height: var(--tfa-type-body-line);
}
.board-app .method-appearance > label { min-inline-size: 0; max-inline-size: 100%; flex: 1 1 calc(var(--tfa-space-10) * 2); }
.board-app .method-appearance select { inline-size: 100%; min-inline-size: 0; }
.board-app .notebook-colours { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--tfa-space-10) * 2)), 1fr)); gap: var(--tfa-space-2); inline-size: 100%; }
.board-app .notebook-colour { display: grid; align-content: start; gap: var(--tfa-space-0-5); min-inline-size: 0; }
.board-app .notebook-colour > label { font-size: var(--tfa-type-body-sm-size); }
.board-app .notebook-colour-inputs { display: flex; align-items: stretch; gap: var(--tfa-space-1); min-inline-size: 0; }
.board-app .notebook-colour input[type="color"] { flex: 0 0 var(--tfa-space-6); inline-size: var(--tfa-space-6); padding: var(--tfa-space-0-5); cursor: pointer; }
.board-app .notebook-colour input[type="text"] { min-inline-size: 0; inline-size: 100%; flex: 1 1 0; padding: var(--tfa-space-0-5) var(--tfa-space-1); font-variant-numeric: tabular-nums; }
.board-app .notebook-colour input[aria-invalid="true"] { border: var(--tfa-stroke-outline) solid var(--tfa-alert); }
.board-app .colour-feedback { font-size: var(--tfa-type-caption-size); line-height: var(--tfa-type-caption-line); }
.board-app .colour-feedback[data-readable="false"] { font-weight: var(--tfa-type-label-weight); }
.board-app .notebook-colour-actions { display: flex; flex-wrap: wrap; gap: var(--tfa-space-1); }
.board-app :where(.method-appearance-status, .colour-recommendation) { flex-basis: 100%; font-size: var(--tfa-type-body-sm-size); line-height: var(--tfa-type-body-sm-line); }
.board-app .colour-recommendation { overflow-wrap: anywhere; }

@media screen {
    .board-app[data-board-writing="standard"] .teaching-board { --board-writing-face: var(--tfa-family-text); --notebook-text-face: var(--tfa-family-text); }
    .board-app[data-board-writing="handwritten"] .teaching-board { --board-writing-face: var(--tfa-family-notebook, var(--tfa-family-text)); --notebook-text-face: var(--tfa-family-notebook, var(--tfa-family-text)); }
    /* Both canonical stacks retain TFA Maths and TFA Scripts first. SVG and HTML
       get the same face so a handwriting choice never stops at one column. */
    .board-app[data-board-writing] .teaching-board,
    .board-app[data-board-writing] .teaching-board :where(h1,h2,h3,h4,p,span,strong,em,li,dt,dd,label,button,input,textarea,select,summary,legend,a,small,output,text,tspan,.math-grid,.equation,.working-reason,.annotation,.quick-note,.strategy-plan,.method-guide,.drawing-tools) {
        font-family: var(--notebook-text-face);
    }
}
@media print {
    .board-app #method-style-controls { display: none !important; }
    .board-app .teaching-board { --board-writing-face: var(--tfa-family-text); }
    .board-app[data-board-writing] .teaching-board,
    .board-app[data-board-writing] .teaching-board :where(h1,h2,h3,h4,p,span,strong,em,li,dt,dd,label,button,input,textarea,select,summary,legend,a,small,output,text,tspan,.math-grid,.equation,.working-reason,.annotation,.quick-note,.strategy-plan,.method-guide,.drawing-tools) {
        font-family: var(--tfa-family-text);
    }
}