@import url('../../shared/css/classlings.css?v=20261009-controls-2');

/* Break Tracker's Classlings board. Universal for all classes; no legacy skin. */
:root { color-scheme: light; }
* { box-sizing: border-box; }
[hidden], .hidden { display: none !important; }
body.break-board-app {
    height: 100dvh;
    overflow: hidden;
    --board-gutter: 32px;
    --board-dock: 110px;
    --board-ink: var(--cla-ink);
    --board-line: var(--ctl-wash-2);
    --board-wash: var(--cla-wash);
    /* Reading text: Atkinson Hyperlegible (the teacher, 9 October). Headings, buttons and labels stay Fredoka. */
    --read: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
    --dock-h: var(--ctl-square);
    --board-orange: var(--cla-tangerine);
    --board-orange-deep: var(--cla-tangerine-deep);
    --cla-cloud-position: left 60% top 14px;
    --cla-puff-position: left 74% top 46px;
    margin: 0;
    color: var(--cla-ink);
    background: var(--cla-page);
    font: 400 16px/1.35 var(--cla-display);
}
button, input, textarea, select { font: inherit; color: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
a { color: inherit; }
button { touch-action: manipulation; }
button:disabled { cursor: default; }
/* Focus: a 4 px ink ring, 4 px away (classlings-controls.css); the shared sheet's 3 px gap is beaten here. */
body.break-board-app :focus-visible { outline: var(--ctl-focus); outline-offset: var(--ctl-focus-gap); }

#app { height: 100dvh; display: flex; flex-direction: column; }
.board-strip { flex: none; display: flex; align-items: center; gap: 24px; height: 84px; margin: 0 var(--board-gutter); }
#breakBoardTitle { flex: none; margin: 0; line-height: 1; }
.title-art { width: calc(var(--w) * 3px); height: calc(var(--h) * 3px); display: block; }
.board-date { display: grid; flex: none; gap: 2px; white-space: nowrap; }
.board-date strong { font-size: 27px; font-weight: 600; line-height: 1.1; }
#timePeriodBadge { color: var(--cla-ink-2); font: 400 18px/1.2 var(--read); }
.board-brand { margin-left: auto; flex: none; }
#breakBoardLogo { width: 154px; height: 60px; image-rendering: pixelated; display: block; }
.board-sync { min-width: 0; margin-left: auto; }
.board-sync:empty { display: none; }
.board-sync .cla-notice { max-width: 100%; font-size: 16px; gap: 6px; padding-left: 8px; }
/* Beats classlings.css's `.cla-notice span` (ellipsis): the words wrap inside the pill and are never cut. */
body.break-board-app .board-sync .cla-notice > span { white-space: normal; overflow: visible; text-overflow: clip; }
.board-strip:has(.cla-notice) { gap: 16px; }
.board-sync .cla-notice-retry { font-size: 16px; padding: 0 9px; }
#mainContent { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 var(--board-gutter) var(--board-dock); }
.screen { min-height: 0; margin: 0; padding: 0; }
#studentGridScreen { flex: 1; display: flex; flex-direction: column; }
#classSelectionScreen { overflow: auto; }
#recordScreen { flex: 1; display: flex; }
#pupilsViewPanel { min-height: 0; overflow: auto; scroll-padding: 4px; }
.student-card { scroll-margin: 4px; }
.shared-toilet-strip { flex: none; display: flex; align-items: center; gap: 20px; height: 60px; padding: 8px 20px; background: var(--cla-wash); border: 2px solid transparent; border-radius: 28px; margin: 0 0 12px; overflow: hidden; }
.shared-toilet-strip h2 { flex: none; margin: 0; font-size: 23px; line-height: 1; }
.shared-toilet-status-list { display: flex; align-items: center; flex-wrap: nowrap; gap: 24px; min-width: 0; overflow-x: auto; scrollbar-width: thin; padding: 0; margin: 0; }
/* app.js (fitSharedToiletStrip) steps --toilet-size down until every place fits on the one line, then wraps the strip. */
.shared-toilet-status-item { display: inline-flex; flex: none; align-items: center; gap: 7px; font-size: var(--toilet-size, clamp(20px,2.05vw,28px)); font-weight: 400; white-space: nowrap; line-height: 1.1; }
.shared-toilet-status-item strong { font-weight: 600; font-size: inherit; }
.shared-toilet-status-item span { color: inherit; font-size: inherit; }
.shared-toilet-strip:is(:has(.is-unknown), .is-wrapped) { height: auto; }
.shared-toilet-strip:is(:has(.is-unknown), .is-wrapped) .shared-toilet-status-list { flex-wrap: wrap; gap: 8px 16px; overflow: visible; }
.shared-toilet-strip:is(:has(.is-unknown), .is-wrapped) .shared-toilet-status-item { font-size: clamp(18px,1.8vw,24px); }
.toilet-sign { width: 36px; height: 36px; display: inline-grid; place-items: center; flex: none; background: var(--cla-free); border: 3px solid var(--cla-free-deep); border-radius: 50%; }
.is-unknown .toilet-sign { background: var(--cla-wash); border-color: var(--cla-ink-2); }
.is-in-use .toilet-sign { background: var(--cla-tangerine); border-color: var(--cla-tangerine-deep); }
.shared-toilet-strip[data-stale="true"] { border-style: dashed; border-color: var(--cla-ink-2); }
.break-icon { --sign-scale: 2; width: calc(var(--sign-art-width, 12) * var(--sign-scale) * 1px); height: calc(var(--sign-art-height, 12) * var(--sign-scale) * 1px); flex: none; }
.student-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 12px; }
.student-grid[data-dense="true"] { grid-template-columns: repeat(8,minmax(0,1fr)); gap: 10px 12px; }
.student-grid[data-dense="true"] .student-card { height: 110px; }
.student-grid[data-dense="true"] .student-classling { width: 36px; height: 40px; }
.student-grid[data-dense="true"] .student-name { font-size: 16px; }
.student-card { display: grid; grid-template-rows: minmax(0,1fr) 44px; gap: 6px; min-width: 0; height: 110px; padding: 5px 6px 6px; border: 2px solid transparent; border-radius: 20px; background: var(--cla-wash); }
.student-card-heading { display: flex; align-items: center; min-width: 0; gap: 5px; }
.student-classling { width: 40px; height: 48px; flex: none; image-rendering: pixelated; }
.student-card-copy { display: grid; grid-template-columns: minmax(0,1fr); min-width: 0; gap: 2px; }
.student-name { min-width: 0; font: 600 17px/1.08 var(--cla-display); overflow-wrap: normal; margin: 0; }
.student-where { display: inline-flex; align-items: center; justify-self: start; gap: 3px; max-width: 100%; min-height: 25px; padding: 0 4px; border: 2px solid var(--cla-tangerine-deep); background: var(--cla-tangerine-tint); border-radius: 7px; font: 600 14px/1 var(--cla-display); }
.student-where > span:not(.board-sr-only) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-where > span[aria-hidden] { display: inline-flex; align-items: center; gap: 2px; }
.student-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.student-actions:has(> :only-child) { grid-template-columns: minmax(0,1fr); }
.student-action { display: inline-flex; justify-content: center; align-items: center; gap: 3px; padding: 0 2px; min-height: 44px; height: 44px; min-width: 0; background: #fff; color: var(--cla-ink); border: 2px solid var(--cla-ink); border-radius: 13px; font: 600 15px/1 var(--cla-display); }
.student-action:active, .student-card.is-pressed .student-action, .student-card[data-pressed="true"] .student-action { transform: translateY(1px); background: var(--cla-tangerine-tint); }
.student-action.is-on { background: var(--cla-tangerine); border-color: var(--cla-tangerine-deep); }
.student-action-return { grid-column: 1/-1; font-size: 19px; }
.student-card[aria-busy="true"], .student-card.is-pending { border-color: var(--cla-ink-2); border-style: dashed; }
.student-card-out .student-name { font-size: 16px; }
.board-dock { pointer-events: none; position: fixed; inset: auto var(--board-gutter) 22px; z-index: 40; display: flex; align-items: center; justify-content: space-between; height: var(--dock-h); gap: 16px; }
.board-dock > *, .board-dock button, .board-dock a, .board-dock summary { pointer-events: auto; }
.board-dock .cla-square { margin: 0; }
.header-more-menu > summary { list-style: none; }
.header-more-menu > summary::-webkit-details-marker { display: none; }
/* While Menu is open it is an ink square with the cross and "Close", as Home's is. */
.header-more-menu > summary .when-open, .header-more-menu[open] > summary .when-shut { display: none; }
.header-more-menu[open] > summary .when-open { display: inline-flex; }
.header-more-menu[open] > summary { background: var(--ctl-ink); color: var(--ctl-page); }
[data-bar-icon] { display: inline-flex; flex: none; align-items: center; }
[data-bar-icon] > svg { width: 24px; height: 24px; display: block; flex: none; }
.cla-square [data-bar-icon] > svg { width: 32px; height: auto; }
/* The bar's wide button is the squares' shape: 78 px (64 on a phone), corners 28 (20), edge 3, a solid ink lift of 6. */
.board-record-link, .board-record-filters { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: var(--dock-h); border: var(--ctl-edge) solid var(--ctl-ink); border-radius: var(--ctl-square-r); background: var(--ctl-page); box-shadow: 0 var(--ctl-lift) 0 var(--ctl-ink); color: var(--ctl-ink); font: var(--ctl-font); }
.board-record-link { --ring-lift: var(--ctl-lift); position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 10px 24px; cursor: pointer; transition: transform var(--ctl-settle) var(--ctl-spring), box-shadow var(--ctl-settle) var(--ctl-spring); }
.board-record-link:active { transform: translate(-50%, var(--ctl-lift)); box-shadow: 0 0 0 var(--ctl-ink); transition-duration: var(--ctl-press); transition-timing-function: ease-out; }
body:has(#confirmationToast:not([hidden])) #openBreakRecordBtn { visibility: hidden; }
.board-record-link > [data-bar-icon="next"] > svg { width: 16px; height: 16px; }
.board-record-link > [data-bar-icon="clock"] > svg { width: 24px; height: 24px; }
.record-link-word { color: var(--cla-ink-2); }
.board-record-link strong { padding: 5px 10px; border: 2px solid var(--cla-tangerine-deep); border-radius: 12px; background: var(--cla-tangerine-tint); }
.header-actions { display: flex; margin-left: auto; }
.header-more-menu { position: relative; }
.header-more-popover { position: absolute; bottom: calc(var(--dock-h) + 18px); right: 0; width: 280px; max-height: calc(100dvh - 130px); overflow-y: auto; }
.header-menu-item, .header-more-popover .auth-btn { width: 100%; margin: 0; }
.header-class-switch strong { display: block; color: var(--cla-ink-2); font-size: 15px; font-weight: 400; margin-top: 3px; }
.auth-btn > svg, .auth-dropdown svg { width: 24px; height: 24px; flex: none; }
.auth-dropdown { position: fixed; z-index: 1000; width: 280px; max-width: calc(100vw - 24px); padding: 16px; gap: 0; }
.auth-user-info { overflow-wrap: anywhere; margin-bottom: 12px; }
.auth-email { color: var(--cla-ink-2); font-family: var(--read); font-size: 14px; }
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: #1e1b3a44; }
.modal-content { position: relative; width: min(620px,100%); max-height: calc(100dvh - 40px); overflow: auto; padding: 24px; }
.modal h3 { margin: 0 0 14px; font: 600 28px/1.15 var(--cla-display); }
.modal p { color: var(--cla-ink-2); }
.modal-actions { margin-top: 20px; }
.cla-btn [data-bar-icon] > svg { width: 24px; height: auto; }
.board-picker-overlay { pointer-events: none; }
.board-picker-overlay .modal-backdrop { background: transparent; }
.board-picker-overlay .modal-content { pointer-events: auto; }
.toilet-location-modal { position: fixed; width: 292px; max-width: calc(100vw - 24px); padding: 12px; margin: 0; overflow: visible; }
.toilet-location-modal::before { content: ''; position: absolute; width: 15px; height: 15px; background: #fff; border-left: 3px solid var(--cla-ink); border-top: 3px solid var(--cla-ink); left: var(--picker-pointer-left,50%); top: -10px; transform: translateX(-50%) rotate(45deg); }
.toilet-location-modal[data-placement="above"]::before { top: auto; bottom: -10px; transform: translateX(-50%) rotate(225deg); }
.toilet-location-modal h3 { margin: 0 0 12px; font-size: 20px; white-space: nowrap; }
.toilet-location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.toilet-location-option { flex-direction: column; gap: 3px; width: 100%; padding: 6px 8px; white-space: normal; text-align: center; overflow-wrap: anywhere; }
.toilet-location-name { font: inherit; line-height: 1.1; }
.toilet-location-option-main { display: contents; }
.toilet-location-status { font-size: 13px; }
.toilet-location-option.is-available .toilet-location-status, .toilet-location-detail { display: none; }
.toilet-location-option:disabled { background: var(--cla-wash); }
#cancelToiletLocationBtn { width: 100%; margin-top: 12px; }
.toilet-location-hint { margin: 10px 0 0; font-size: 14px; }
.toilet-location-hint:empty { display: none; }
.break-record-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; width: 100%; border: var(--ctl-edge) solid var(--ctl-wash-2); border-radius: var(--ctl-panel-r); padding: 6px 24px; background: #fff; }
.break-record-heading { flex: none; display: flex; align-items: center; gap: 18px; margin-bottom: 6px; flex-wrap: wrap; }
.break-record-heading h2 { margin: 0; font-size: 28px; white-space: nowrap; }
.break-record-title { display: flex; align-items: baseline; gap: 16px; }
#breakRecordSummary { color: var(--cla-ink-2); font-size: 18px; }
.record-class-field { margin-left: auto; }
.record-class-field select { max-width: 220px; }
.record-actions { display: flex; gap: 12px; }
.break-record-content { min-width: 0; min-height: 0; overflow: auto; scrollbar-width: auto; scrollbar-gutter: stable; }
.record-day-group h3 { font-size: 22px; margin: 12px 8px 8px; }
.break-record-table { width: 100%; overflow-wrap: anywhere; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 20px; }
.record-col-out { width: 10%; }
.record-col-back { width: 18%; }
.record-col-pupil { width: 35%; }
.record-col-remove { width: 148px; }
.break-record-table th { position: sticky; top: 0; background: #fff; color: var(--cla-ink-2); text-align: left; font-size: 16px; line-height: 22px; padding: 0 10px; z-index: 1; }
.break-record-table td { padding: 0 10px; height: 52px; font-variant-numeric: tabular-nums; }
.break-record-table tbody tr:nth-child(odd) { background: var(--cla-wash); }
.break-record-table td:first-child { border-radius: 15px 0 0 15px; width: 10%; }
.break-record-table td:last-child { border-radius: 0 15px 15px 0; }
.record-pupil, .record-where { display: flex; gap: 10px; align-items: center; }
.record-pupil { font-weight: 600; }
.record-pupil canvas { width: 32px; height: 34px; flex: none; image-rendering: pixelated; }
.record-place { display: none; }
.record-still-out { display: inline-block; padding: 2px 8px; border: 2px solid var(--cla-tangerine-deep); border-radius: 8px; background: var(--cla-tangerine-tint); font-size: 15px; font-weight: 600; white-space: nowrap; }
.record-remove { min-width: 0; }
.record-remove [data-bar-icon], .record-remove > svg { flex: none; }
.record-remove > svg { width: 24px; height: 24px; }
.record-more-below { flex: none; margin: 0; min-height: 24px; text-align: center; color: var(--cla-ink-2); font: 600 15px/24px var(--cla-display); }
.record-empty { margin: 28px 10px; color: var(--cla-ink-2); font-size: 22px; }
/* Today, This week and Pick a day are tabs: 48 px in a pale track inside the bar. Each tool colours its chosen tab: orange here. */
.board-record-filters { position: absolute; left: 50%; transform: translateX(-50%); padding: calc((var(--dock-h) - 2 * var(--ctl-edge) - var(--ctl-tab-h) - 8px) / 2); gap: 0; }
.record-tabs { display: flex; gap: 4px; padding: 4px; background: var(--ctl-wash); border-radius: calc(var(--ctl-r) + 4px); }
.record-tabs button, .record-day-label { min-height: var(--ctl-tab-h); background: transparent; color: var(--ctl-ink); border: var(--ctl-edge) solid transparent; border-radius: var(--ctl-r); padding: 0 16px; font: inherit; white-space: nowrap; }
.record-tabs button[aria-pressed="true"], .record-day-label.is-active { background: var(--cla-tangerine); border-color: var(--cla-tangerine-deep); }
.record-day-label { display: flex; align-items: center; gap: 8px; }
/* Pick a day's calendar, as the Cup's points history's: above the bar (app.js placeRecordDayPicker sets where, and how tall it can be). */
.record-day-pop { position: fixed; z-index: 2; width: min(440px, calc(100vw - 24px)); overflow-y: auto; padding: 12px 16px 16px; color: var(--cla-ink); background: var(--cla-page); border: var(--ctl-edge) solid var(--cla-ink); border-radius: var(--ctl-panel-r); box-shadow: var(--ctl-float); }
.record-day-top { display: grid; grid-template-columns: var(--ctl-small-h) minmax(0, 1fr) var(--ctl-small-h); align-items: center; gap: 8px; margin-bottom: 12px; }
.record-day-top p { margin: 0; font: 700 20px/1.2 var(--cla-display); text-align: center; }
.record-day-nav svg { width: 24px; height: 24px; }
.record-day-nav.is-back svg { transform: scaleX(-1); }
.record-day-nav:disabled { opacity: 0.45; cursor: default; }
.record-day-nav:disabled:active { transform: none; box-shadow: 0 var(--ctl-small-lift) 0 var(--ctl-ink); }
.record-day-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.record-day-grid > span { font: 600 16px/1.2 var(--cla-display); color: var(--cla-ink-2); text-align: center; }
.record-day-grid button { appearance: none; display: grid; place-items: center; min-height: 52px; margin: 0; padding: 4px 0; font: 700 20px/1 var(--cla-display); color: var(--cla-ink); background: var(--cla-wash); border: 2px solid transparent; border-radius: var(--ctl-small-r); }
.record-day-grid button small { font: 500 14px/1.2 var(--cla-display); color: var(--cla-ink-2); }
.record-day-grid button small.is-today { font-weight: 600; color: var(--cla-ink); }
.record-day-grid button.is-on { background: var(--cla-grape-tint); border-color: var(--cla-grape-deep); box-shadow: inset 0 0 0 2px var(--cla-grape-deep); }
.record-day-grid button:disabled { color: var(--cla-ink-2); background: var(--cla-page); border: 2px dashed var(--cla-wash-2); }
@media (hover: hover) { .record-day-grid button:hover:not(:disabled) { border-color: var(--cla-grape); } }
/* A short page (a school laptop's 540 to 700 px): the squares stay 44 px and the gaps close up, so a whole month fits with no scrolling. */
@media (max-height: 700px) {
    .record-day-pop { padding: 8px 12px 12px; }
    .record-day-top { margin-bottom: 8px; }
    .record-day-grid { gap: 6px; }
    .record-day-grid button { min-height: 44px; padding: 2px 0; }
}
.board-sr-only { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.toast { position: fixed; z-index: 90; left: 50%; transform: translateX(-50%); bottom: 35px; display: flex; align-items: center; gap: 16px; min-height: 52px; max-width: calc(100vw - 32px); padding: 4px 5px 4px 20px; }
#toastMessage { white-space: nowrap; }
body[data-break-tracker-screen="record"] .board-home { display: none; }
.board-sky .student-card, .board-sky .shared-toilet-strip { background: var(--cla-card); border-color: #c7c4cb; }
.selection-container { max-width: 1040px; margin: 32px auto; }
.selection-heading h2 { font-size: 30px; font-weight: 600; }
.class-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 18px; }
.class-item { --ring-lift: var(--ctl-lift); min-height: 110px; margin: 0 0 var(--ctl-lift); padding: 24px; border: var(--ctl-edge) solid var(--ctl-ink); border-radius: var(--ctl-big-r); background: var(--ctl-page); box-shadow: 0 var(--ctl-lift) 0 var(--ctl-ink); cursor: pointer; text-align: center; transition: transform var(--ctl-settle) var(--ctl-spring), box-shadow var(--ctl-settle) var(--ctl-spring); }
.class-item:active { transform: translateY(var(--ctl-lift)); box-shadow: 0 0 0 var(--ctl-ink); transition-duration: var(--ctl-press); transition-timing-function: ease-out; }
.class-item-name { margin: 0; font-size: 25px; font-weight: 600; }
.no-log-message, .no-classes-message { padding: 30px; background: var(--cla-wash); border-radius: 24px; font-size: 22px; grid-column: 1/-1; }
.settings-modal { display: flex; flex-direction: column; overflow: hidden; width: min(760px,100%); padding: 0; }
.settings-modal-header, .settings-modal-body, .settings-modal-footer { padding: 20px 24px; }
.settings-modal-header { padding-bottom: 0; flex: none; }
.settings-modal-body { display: grid; gap: 18px; min-height: 0; overflow: auto; }
.settings-card { padding: 18px; background: var(--cla-wash); border-radius: 20px; }
.settings-card h4 { font-size: 20px; margin: 0 0 12px; }
.settings-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-card-heading h4 { margin-bottom: 8px; }
.settings-toggle-grid, .export-print-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkbox-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; cursor: pointer; }
/* On and Off: the shared .cla-onoff (the teacher, 11 October, in place of the old site's switch). */
.checkbox-row .cla-onoff { margin-left: auto; }
.toggle-copy { flex: 1 1 140px; min-width: 0; }
.settings-toggle-card { padding: 6px 8px 6px 16px; background: #fff; border-radius: var(--ctl-r); }
.settings-toggle-card small { display: block; margin-top: 3px; color: var(--cla-ink-2); font: 400 14px/1.35 var(--read); }
.form-group, .settings-location-field { display: grid; gap: 6px; margin: 14px 0; }
.form-group > label { font-weight: 600; }
.field-help, .shared-toilets-hint { font: 400 14px/1.35 var(--read); color: var(--cla-ink-2); }
/* Text boxes and drop-downs are the standard's: 48 px, corners 14, a 3 px pale edge that turns ink when you are in it. */
input:not([type="checkbox"]):not([type="date"]), select, textarea { width: 100%; min-width: 0; min-height: var(--ctl-field-h); padding: 8px 12px; font: 400 18px/1.4 var(--read); color: var(--ctl-ink); background: var(--ctl-page); border: var(--ctl-edge) solid var(--ctl-wash-2); border-radius: var(--ctl-field-r); }
input:not([type="checkbox"]):not([type="date"]):focus, select:focus, textarea:focus { border-color: var(--ctl-ink); outline: none; }
textarea { resize: vertical; }
.settings-shared-heading { margin-top: 16px; }
.shared-toilets-controls { padding-top: 12px; }
.shared-toilets-panel { padding: 12px; background: #fff; border-radius: var(--ctl-r); margin-top: 10px; }
.shared-toilets-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.shared-toilets-list, .shared-toilets-pending { display: grid; gap: 8px; }
.settings-modal-footer { flex: none; margin: 0; border-top: var(--ctl-edge) solid var(--ctl-wash-2); }
.export-fields-header { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.export-fields-actions { display: flex; gap: 8px; }
.export-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.export-fields-grid .checkbox-row { flex-wrap: nowrap; }
.export-fields-grid .toggle-copy { flex: 1 1 0; line-height: 1.15; }
.print-preview { position: fixed; inset: 0; z-index: 200; overflow: auto; background: #fff; padding: 24px; }
.print-preview-header { display: flex; justify-content: space-between; gap: 12px; max-width: 1000px; margin: 0 auto 24px; }
.print-preview-content { max-width: 1000px; margin: auto; font-family: var(--read); }
.print-report-header { padding-bottom: 16px; margin-bottom: 20px; border-bottom: 3px solid var(--cla-ink); }
.print-report-header h1 { margin: 0 0 8px; font: 600 32px/1.2 var(--cla-display); }
.print-report-header p { margin: 5px 0; }
.print-summary { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin-bottom: 26px; }
.print-summary .summary-card { padding: 12px; border: 2px solid var(--ctl-wash-2); border-radius: 14px; }
.print-summary .value { font: 600 27px/1.2 var(--cla-display); }
.print-summary .label { margin-top: 3px; color: var(--cla-ink-2); font-size: 12px; }
.print-section { margin: 24px 0; }
.print-section h3 { margin: 0 0 12px; font: 600 22px/1.2 var(--cla-display); }
.print-preview table { border-collapse: collapse; width: 100%; }
.print-preview th, .print-preview td { padding: 8px; text-align: left; border-bottom: 1px solid var(--ctl-wash-2); }
.auth-modal .modal-content { max-width: 460px; }
.close-modal { float: right; }
.close-modal svg { width: 24px; height: auto; }
.auth-links { display: grid; gap: 6px; margin-top: 14px; }
.auth-link { min-height: 44px; background: none; border: 0; text-decoration: underline; color: var(--cla-ink); }
.auth-error, .auth-success, .auth-local-notice { padding: 12px; margin: 12px 0; border: 2px solid var(--cla-ink-2); border-radius: 12px; background: var(--cla-wash); }
.auth-error { background: var(--cla-tangerine-tint); border-color: var(--cla-tangerine-deep); }
.auth-info, .auth-school-link, .auth-local-config, .auth-captcha-hint { color: var(--cla-ink-2); font: 400 14px/1.4 var(--read); }
.auth-user-email { overflow-wrap: anywhere; font-weight: 600; }
.auth-local-key-row { display: flex; gap: 8px; margin-bottom: 10px; }

@media (hover: hover) {
    .student-action:hover { background: var(--cla-tangerine-tint); }
    .record-tabs button:not([aria-pressed="true"]):hover, .record-day-label:not(.is-active):hover { background: var(--ctl-wash-2); }
}
@media (max-height: 740px) and (min-width: 1180px) {
    .board-strip { height: 60px; }
}
@media (max-height: 717px) and (min-width: 1180px) {
    .shared-toilet-strip { height: 44px; margin-bottom: 8px; padding-top: 4px; padding-bottom: 4px; }
    .student-grid, .student-grid[data-dense="true"] { row-gap: 6px; }
    .student-card, .student-grid[data-dense="true"] .student-card { height: 97px; padding: 0 3px 2px; gap: 0; border-radius: 17px; }
    .student-classling, .student-grid[data-dense="true"] .student-classling { width: 34px; height: 34px; }
    .student-name, .student-grid[data-dense="true"] .student-name { font-size: 14px; line-height: 1; }
    .student-card-out .student-name { font-size: 14px; }
    .student-where { min-height: 19px; padding: 0 3px; font-size: 14px; }
    .student-where .break-icon { --sign-scale: 1; }
    .toilet-sign { width: 32px; height: 32px; }
}
/* A school laptop's browser leaves about 540-600 px of page, and a class of 30 must fit with no scrolling.
   The bar is the standard 78 px (the teacher, 9 October), so it sits 8 px from the edge and the cards stop 4 px
   above it, and the cards share the rest: four rows with three 4 px gaps. The page has 110 px above the cards
   and 90 below, so the cards are (100dvh - 200 - 12) / 4 = 25dvh - 53 px: 82 at 540, and the 97 px
   of the step above from about 600. The card's border is 1 px and its bottom padding 1 px here, which gives the
   heading 35 px for a 14 px name, a 2 px gap and the 19 px out tag (a name that needs a second line beside the
   tag shortens, see boardView.js). */
@media (max-height: 629px) and (min-width: 1180px) {
    body.break-board-app { --board-dock: 90px; --short-card: clamp(80px, calc(25dvh - 53px), 97px); }
    .shared-toilet-strip { margin-bottom: 6px; }
    .student-grid, .student-grid[data-dense="true"] { row-gap: 4px; }
    .student-card, .student-grid[data-dense="true"] .student-card { height: var(--short-card); border-width: 1px; padding-bottom: 1px; }
    /* The out tag no longer sets the name's width: the name has the whole card beside the Classling. */
    .student-card-copy { flex: 1 1 0; }
    .board-dock { bottom: 8px; gap: 12px; }
    .header-more-popover { max-height: calc(100dvh - 112px); }
    .toast { bottom: 21px; }
}
@media (min-width: 1180px) {
    /* Leave text room when a classic scrollbar narrows the eight-column grid. */
    .student-grid[data-dense="true"] { column-gap: 6px; }
    .student-grid[data-dense="true"] .student-card { padding-inline: 1px; }
    .student-grid[data-dense="true"] .student-actions { gap: 4px; }
    .student-grid[data-dense="true"] .student-card-heading { gap: 2px; }
    .student-grid[data-dense="true"] .student-classling { width: 32px; }
    .student-grid[data-dense="true"] .student-action { padding-inline: 0; gap: 2px; }
}
/* A classroom board (1600 x 900 and up) has room to spare. A class of up to 32 is four rows, so the cards
   grow to fill the height: 25dvh less 78 px (4 rows, 3 gaps of 12 and 266 of chrome, with 6 spare), which is
   147 px at 900 and 192 at 1080, and no more than 200. Names, tags, buttons and the Classling grow with it.
   A bigger class (five rows or more) keeps the cards above. */
@media (min-width: 1600px) and (min-height: 900px) {
    body.break-board-app { --big-card: clamp(110px, calc(25dvh - 78px), 200px); --big-button: clamp(52px, 2.9vw, 64px); --big-sprite: 3; }
    .student-grid[data-four-rows="true"] { gap: 12px 10px; }
    .student-grid[data-four-rows="true"] .student-card { height: var(--big-card); grid-template-rows: minmax(0,1fr) var(--big-button); gap: 8px; padding: 6px; border-radius: 26px; }
    .student-grid[data-four-rows="true"] .student-card-heading { gap: 6px; }
    .student-grid[data-four-rows="true"] .student-card-copy { flex: 1 1 0; gap: 4px; }
    .student-grid[data-four-rows="true"] .student-classling { width: calc(var(--big-sprite) * 16px); height: calc(var(--big-sprite) * 16px + 4px); }
    .student-grid[data-four-rows="true"] .student-name { font-size: clamp(18px, 1.05vw, 24px); }
    .student-grid[data-four-rows="true"] .student-where { min-height: 25px; padding: 0 4px; gap: 3px; border-radius: 8px; font-size: clamp(14px, .8vw, 18px); }
    .student-grid[data-four-rows="true"] .student-actions { gap: 8px; }
    .student-grid[data-four-rows="true"] .student-action { min-height: var(--big-button); height: var(--big-button); gap: 6px; padding-inline: 4px; border-radius: 17px; font-size: clamp(17px, 1vw, 22px); }
    .student-grid[data-four-rows="true"] .student-action-return { font-size: clamp(20px, 1.15vw, 26px); }
}
@media (min-width: 1800px) and (min-height: 1000px) {
    body.break-board-app { --big-sprite: 4; }
}
@media (max-width: 1179px) {
    .student-grid, .student-grid[data-dense="true"] { grid-template-columns: repeat(6,minmax(0,1fr)); }
}
@media (max-width: 1315px) {
    body.break-board-app { --board-gutter: 24px; }
    .title-art { width: calc(var(--w) * 2px); height: calc(var(--h) * 2px); }
    .board-date strong { font-size: 22px; }
    .shared-toilet-strip { gap: 14px; }
    .shared-toilet-status-list { gap: 18px; }
    .shared-toilet-status-item { font-size: 22px; }
}
@media (min-width: 1180px) and (max-width: 1279px) {
    /* Keep room for wider fallback-font metrics and a classic scrollbar. */
    body.break-board-app:has(.student-grid[data-dense="true"]) { --board-gutter: 8px; }
    .student-grid[data-dense="true"] { column-gap: 4px; }
    .student-grid[data-dense="true"] .student-card { padding-inline: 0; }
    .student-grid[data-dense="true"] .student-actions { gap: 2px; }
}
@media (max-width: 1110px) {
    .student-grid, .student-grid[data-dense="true"] { grid-template-columns: repeat(5,minmax(0,1fr)); }
    .board-date #timePeriodBadge { font-size: 15px; }
    .board-sync { font-size: 13px; }
    /* A tablet's strip has no spare room: while a notice shows, it gets its own row, as below 920px. */
    .board-strip:has(.cla-notice) { flex-wrap: wrap; height: auto; min-height: 84px; gap: 6px 14px; padding: 8px 0; }
    .board-strip:has(.cla-notice) .board-sync { flex-basis: 100%; order: 3; margin: 0; }
    .board-strip { gap: 14px; }
    .shared-toilet-status-item { font-size: 20px; }
    .shared-toilet-strip h2 { font-size: 20px; }
    .break-record-table { font-size: 17px; }
}
@media (max-width: 1023px) {
    /* Below 1024 px Remove is the pixel bin alone (its name is in the button's label): a 48 px square. */
    .record-remove { width: 48px; padding: 0; }
    .record-remove-word { display: none; }
    .record-col-remove { width: 68px; }
    .shared-toilet-strip { height: auto; align-items: flex-start; flex-direction: column; gap: 8px; padding: 10px 14px; }
    .shared-toilet-status-list { width: 100%; flex-wrap: wrap; gap: 8px 20px; overflow: visible; }
    .shared-toilet-status-item { max-width: 100%; white-space: normal; font-size: 20px; }
    .shared-toilet-status-item > span:last-child { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 920px) {
    .student-grid, .student-grid[data-dense="true"] { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .board-date strong { font-size: 19px; }
    .board-strip { flex-wrap: wrap; height: auto; min-height: 90px; gap: 6px 16px; padding: 8px 0; }
    .board-sync { flex-basis: 100%; max-width: none; order: 3; margin: 0; }
    .record-link-word { display: none; }
    .shared-toilet-strip { padding: 8px 14px; }
    .shared-toilet-status-list { gap: 14px; }
}
@media (max-width: 599px) {
    body.break-board-app { --dock-h: var(--ctl-square-phone); }
    .board-record-link, .board-record-filters { border-radius: var(--ctl-r); }
    .cla-square [data-bar-icon] > svg { width: 24px; }
    .header-more-popover { max-height: calc(100dvh - 120px); }
}
@media (max-width: 760px) {
    body.break-board-app { --board-gutter: 14px; }
    .student-grid, .student-grid[data-dense="true"] { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .board-date { order: 2; flex-basis: 100%; display: flex; align-items: baseline; gap: 10px; }
    .board-strip { min-height: 110px; }
    .break-record-heading { gap: 10px; }
    .break-record-title { flex-wrap: wrap; gap: 2px 12px; }
    .record-class-field { margin-left: 0; }
    .break-record-panel { padding: 14px 10px; }
    .break-record-table { font-size: 15px; }
    .break-record-table th, .break-record-table td { padding-left: 5px; padding-right: 5px; }
    .record-pupil { gap: 4px; }
    .record-pupil > span { min-width: 0; overflow-wrap: normal; }
    .record-where { display: block; overflow-wrap: normal; }
    .record-pupil canvas { display: none; }
    .record-where .break-icon { display: none; }
}
@media (max-width: 590px) {
    body.break-board-app { --board-gutter: 12px; --board-dock: 94px; --cla-cloud-position: left -200px top 14px; }
    .board-strip { min-height: 128px; }
    #breakBoardTitle { order: 1; }
    .board-brand { order: 0; flex-basis: 100%; margin-left: 0; }
    #breakBoardLogo { width: 154px; height: 60px; }
    .board-date { flex-basis: auto; margin-left: auto; flex-direction: column; gap: 2px; }
    .board-date strong { font-size: 15px; }
    #timePeriodBadge { font-size: 12px; }
    .student-grid, .student-grid[data-dense="true"] { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .student-card { height: 110px; padding: 5px; }
    .student-name { font-size: 15px; }
    .student-classling, .student-grid[data-dense="true"] .student-classling { width: 32px; height: 40px; }
    .student-actions { gap: 4px; }
    .student-action { font-size: 14px; gap: 2px; }
    .shared-toilet-strip { gap: 10px; padding: 6px 10px; border-radius: 20px; }
    .shared-toilet-strip h2 { font-size: 16px; }
    .toilet-sign { width: 30px; height: 30px; }
    .shared-toilet-status-item { font-size: 18px; }
    .board-dock { bottom: 15px; gap: 8px; }
    .board-record-link { gap: 5px; padding: 7px; font-size: 16px; }
    .board-record-link > [data-bar-icon] { display: none; }
    .board-record-link strong { padding: 4px 5px; }
    .record-tabs { gap: 2px; }
    .record-tabs button, .record-day-label { font-size: 14px; padding: 0 8px; }
    .record-day-label { gap: 4px; }
    .record-day-label [data-bar-icon] > svg { width: 12px; height: 12px; }
    body[data-break-tracker-screen="record"] .header-actions { display: none; }
    body[data-break-tracker-screen="record"] .board-record-filters { position: static; transform: none; margin-left: auto; }
    .break-record-heading h2 { font-size: 23px; }
    #breakRecordSummary { font-size: 16px; }
    .record-actions { flex-basis: 100%; }
    .record-actions button { flex: 1; }
    .record-class-field { flex: 0 0 100%; min-width: 0; }
    .record-class-field select { width: 100%; max-width: none; }
    .record-pupil { overflow-wrap: normal; }
    .record-col-out { width: 44px; }
    .record-col-back { width: 54px; }
    .record-col-pupil { width: auto; }
    .record-col-where { width: 76px; }
    .record-col-remove { width: 62px; }
    .break-record-table { font-size: 13px; }
    .break-record-table th { font-size: 13px; }
    .record-still-out { font-size: 12px; padding: 2px 3px; white-space: normal; }
    .break-record-table th, .break-record-table td { padding-inline: 4px; }
    .toast { bottom: 21px; gap: 8px; padding-left: 12px; font-size: 14px; }
    #toastMessage { white-space: normal; }
    .modal { padding: 12px; }
    .modal-content { padding: 18px; max-height: calc(100dvh - 24px); }
    .settings-modal { padding: 0; }
    .settings-modal-header, .settings-modal-body, .settings-modal-footer { padding: 16px; }
    .settings-card { padding: 12px; }
    .settings-card-heading { align-items: flex-start; flex-direction: column; }
    .settings-toggle-grid, .export-print-fields, .export-fields-grid { grid-template-columns: 1fr; }
    .modal-actions { flex-wrap: wrap; }
    .modal-actions button { flex: 1; }
    .print-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .export-fields-header { align-items: flex-start; flex-direction: column; }
}
/* A phone's record keeps the pupil's full name whole. The place moves under the name in the same cell, so
   the Where column goes and the Pupil column gains about 76 px: "Featherstonehaugh" (about 125 px) fits from
   360 px wide. Names then break only at spaces and after hyphens. */
@media (max-width: 430px) {
    .record-col-where, .break-record-table th.record-cell-where, .break-record-table td.record-cell-where { display: none; }
    .record-pupil { flex-direction: column; align-items: flex-start; gap: 0; }
    .record-place { display: block; color: var(--cla-ink-2); font-size: 12px; font-weight: 400; line-height: 1.25; }
}
/* Below 360 px even a short column can be narrower than one long word: that word may break inside. */
@media (max-width: 359px) {
    .record-pupil, .record-pupil > span { overflow-wrap: break-word; }
}
/* A narrow window is a short one too (a half-width laptop window, a small tablet), so the page gives up room
   as the laptop's does, and the class still fits (below). Below 800 px tall the bar is 60 px tall and closer
   to the edge. Below 900 px (740 from 921 px wide) the strip is one 60 px row when it has no notice, and the
   shared toilets are one row, or two when the window is narrow. */
@media (min-width: 591px) and (max-width: 1179px) and (max-height: 800px) {
    /* The standard 78 px bar costs 14 px here, and the narrow layout below gets them back from the bar's 6 px
       edge distance and 2 px gap, and 4 px gaps between its cards (boardView.js narrowBoardLayout). */
    body.break-board-app { --board-dock: 86px; }
    .board-dock { bottom: 6px; gap: 12px; }
    .header-more-popover { max-height: calc(100dvh - 110px); }
    .toast { bottom: 19px; }
}
@media (min-width: 681px) and (max-width: 1179px) and (max-height: 900px) {
    .board-strip:not(:has(.cla-notice)) { flex-wrap: nowrap; height: 60px; min-height: 0; padding: 0; }
    .board-strip:not(:has(.cla-notice)) .board-date { order: 0; flex-basis: auto; display: grid; }
}
@media (min-width: 591px) and (max-width: 1110px) and (max-height: 900px) {
    /* With a notice, the strip is two rows (the notice has its own), with no padding or extra gap. */
    .board-strip:has(.cla-notice) { min-height: 0; padding: 0; gap: 2px 14px; }
}
@media (min-width: 591px) and (max-width: 1023px) and (max-height: 900px) {
    .shared-toilet-strip { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 4px 10px; margin-bottom: 6px; }
    .shared-toilet-strip h2 { font-size: 15px; }
    .shared-toilet-status-list { flex: 1 1 0; width: auto; gap: 2px 12px; }
    .shared-toilet-status-item { gap: 5px; font-size: clamp(14px, calc(14px + (100vw - 800px) * .03), 17px); }
    .shared-toilet-strip:has(.is-unknown) .shared-toilet-status-list { gap: 2px 12px; }
    .shared-toilet-strip:has(.is-unknown) .shared-toilet-status-item { font-size: clamp(14px, calc(14px + (100vw - 800px) * .03), 17px); }
    .toilet-sign { width: 30px; height: 30px; }
}
@media (min-width: 921px) and (max-width: 1179px) and (max-height: 740px) {
    .board-strip { height: 60px; }
}
@media (min-width: 1024px) and (max-width: 1179px) and (max-height: 740px) {
    .shared-toilet-strip { height: 44px; margin-bottom: 8px; padding-top: 4px; padding-bottom: 4px; }
    .toilet-sign { width: 32px; height: 32px; }
}
/* A whole class on a narrow window (561-1179 px wide): boardView.js picks the columns and the card height
   (fitBoardGrid) when the ordinary cards would scroll, and sets data-fit to how much each card can say:
   "roomy" (144 px wide and up) has the laptop's labels, "labels" (102 px and up) has 12-13 px words, and
   "icons" has the door and the drop alone (the words stay in the buttons' names). A name is the full name,
   or the first name and initials, wrapping only at a space. Its font steps from 14 to 13 px, and for the
   short form to 12 px, and a card whose first name still doesn't fit drops its Classling (as does an out
   card under 124 px wide, so the name and its tag, 13 px and 17 px tall, have the whole card). Buttons are
   44 px where the card is tall enough, else 40. */
@media (min-width: 561px) and (max-width: 1179px) {
    .student-grid[data-fit] { grid-template-columns: repeat(var(--fit-cols), minmax(0,1fr)); grid-auto-rows: var(--fit-card); gap: 4px; align-content: start; }
    .student-grid[data-fit] .student-card { height: var(--fit-card); grid-template-rows: minmax(0,1fr) var(--fit-button); gap: 0; padding: 0 1px 1px; border-width: 1px; border-radius: 14px; }
    .student-grid[data-fit] .student-card-heading { gap: 1px; }
    .student-grid[data-fit] .student-card-copy { flex: 1 1 0; gap: 2px; }
    .student-grid[data-fit] .student-classling { width: 32px; height: 34px; }
    .student-grid[data-fit] .student-name, .student-grid[data-fit] .student-card-out .student-name { font-size: 14px; line-height: 1; }
    .name-whole { white-space: nowrap; }
    .student-grid[data-fit] .student-where { min-height: 17px; padding: 0 2px; gap: 2px; border-radius: 7px; font-size: 13px; }
    .student-grid[data-fit] .student-where .break-icon { --sign-scale: 1; }
    .student-grid[data-fit] .student-actions { gap: 3px; }
    .student-grid[data-fit] .student-action { min-height: var(--fit-button); height: var(--fit-button); padding: 0; gap: 2px; border-radius: 12px; font-size: var(--fit-label, 13px); }
    .student-grid[data-fit] .student-action .break-icon { --sign-scale: 1; }
    .student-grid[data-fit] .student-action-return { font-size: 15px; }
    .student-grid[data-fit="roomy"] .student-action { gap: 3px; font-size: 15px; }
    .student-grid[data-fit="roomy"] .student-action .break-icon, .student-grid[data-fit="icons"] .student-action .break-icon { --sign-scale: 2; }
    .student-grid[data-fit-tag="tight"] .student-card-out .student-classling, .student-grid[data-fit] .student-card.long-name .student-classling { display: none; }
    .student-grid[data-fit] .student-card.tag-hidden .student-where { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0,0,0,0); }
    .student-grid[data-fit="icons"] .student-action:not(.student-action-return) .student-action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
}
@media (max-width: 360px) {
    body.break-board-app { --board-gutter: 8px; }
    .student-card { padding-inline: 2px; }
    .student-actions { gap: 2px; }
    .student-action { padding-inline: 0; }
    .student-name { font-size: 14px; }
    .board-record-link { font-size: 12px; }
    .board-record-link strong { font-size: 14px; }
    .board-record-filters button, .record-day-label { font-size: 12px; padding: 8px 4px; }
    .record-day-label [data-bar-icon] { display: none; }
}
/* Everything with a lift sinks onto it and springs back, as the standard's .cla-btn does; with reduced motion it just moves. */
@media (prefers-reduced-motion: reduce) {
    .board-record-link, .class-item { transition: none; }
}
@page { size: A4; margin: 12mm; }
@media print {
    body.break-board-app { height: auto; overflow: visible; background: #fff; }
    body > #app, body > .modal, .board-dock, .toast, .print-preview-header { display: none !important; }
    .print-preview { position: static; padding: 0; overflow: visible; }
    .print-preview-content { max-width: none; font-size: 10pt; }
    .print-report-header { margin-bottom: 16px; padding-bottom: 12px; }
    .print-report-header h1 { font-size: 22pt; }
    .print-summary { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; margin-bottom: 16px; }
    .print-summary .summary-card { padding: 7px; border: 1px solid var(--cla-ink-2); border-radius: 7px; break-inside: avoid; }
    .print-summary .value { font-size: 16pt; }
    .print-summary .label { font-size: 8pt; }
    .print-section h3 { font-size: 15pt; break-after: avoid; }
    .print-preview th, .print-preview td { padding: 6px 4px; font-size: 8.5pt; }
    .print-preview thead { display: table-header-group; }
    .print-preview tr { break-inside: avoid; }
}