/* Scope every control rule to Topic 4; inherit the notes' light/dark colours. */
[data-course-lab^="t4-"] { color: var(--ink); font: 16px/1.5 var(--sans); max-width: 100%; min-width: 0; }
[data-course-lab^="t4-"] fieldset { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
[data-course-lab^="t4-"] legend { font-weight: 700; padding: 0 0 10px; }
[data-course-lab^="t4-"] :is(button,select) { color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 0; font: inherit; padding: 7px 10px; min-height: 44px; }
[data-course-lab^="t4-"] button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
[data-course-lab^="t4-"] :is(button,select,input):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[data-course-lab^="t4-"] input[type="range"] { width: 100%; accent-color: var(--ink); min-height: 40px; margin: 0; }
.t4-button-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.t4-slider { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 12px; margin: 8px 0; }
.t4-slider input { grid-column: 1/-1; }
.t4-model, .t4-key { font: 15px/1.55 var(--sans); color: var(--muted); margin: 7px 0 12px; }
.t4-result { font: 18px/1.55 Georgia,serif; }
.t4-result p { margin: 9px 0; }
.t4-result .frequency-table { font: 15px/1.5 var(--sans); max-width: 100%; }
.t4-result .frequency-table :is(th,td) { padding: 7px 9px; }
.t4-result .frequency-table td .katex { font-size: 1em; }
.t4-panels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.t4-panel-title { font: 700 16px/1.4 var(--sans); margin: 10px 0 5px; }
.t4-geometry { max-width: 540px; margin: 10px 0; }
.t4-tick { font-size: 15px; }
.t4-tick-end { justify-content: flex-end !important; }
.t4-geometry .diagram-words { font-size: 15px; }
.t4-geometry .t4-axis-title { font: 600 14px var(--sans); fill: var(--muted); }
.t4-geometry .t4-grid { stroke: currentColor; stroke-width: 1; opacity: .12; fill: none; }
.t4-chart-key { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 15px/1.4 var(--sans); color: var(--muted); margin: 6px 0 2px; }
.t4-chart-key > span { display: inline-flex; align-items: center; gap: 7px; }
.t4-key-line { display: inline-block; width: 26px; border-top: 2.5px solid var(--ink); }
.t4-key-line.dashed { border-top: 2px dashed var(--ink); }
.t4-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media screen and (max-width: 800px) { .t4-panels { grid-template-columns: 1fr; gap: 7px; } }
@media screen and (max-width: 650px) { .t4-tick { font-size: 19px; } .t4-geometry .diagram-words { font-size: 19px; } .t4-geometry .t4-axis-title { font-size: 18px; } }
@media screen and (max-width: 400px) { .t4-result { font-size: 17px; } .t4-result .katex-display { font-size: .85em; } .t4-result .frequency-table { font-size: 14px; } .t4-result .frequency-table :is(th,td) { padding: 6px 4px; } }
@media print { .t4-geometry { max-width: 290pt; margin: 7pt 0; } .t4-geometry .diagram-words { font-size: 18px; } .t4-geometry .diagram-label { font-size: 17px; } .t4-chart-key { font-size: 9pt; } }