/* Teacher Home: the selected mix design, scoped so other tools keep their own dress. */
@font-face { font-family:'Atkinson Hyperlegible'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/atkinson-hyperlegible/atkinson-hyperlegible-400-latin.woff2') format('woff2'); }
@font-face { font-family:'Atkinson Hyperlegible'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/atkinson-hyperlegible/atkinson-hyperlegible-700-latin.woff2') format('woff2'); }
body.cla-home {
 --page:#ffffff; --ink:#1e1b3a; --ink-2:#4a4766; --wash:#f3f2f9; --wash-2:#e4e1f1;
 --sky:#3aa0ff; --sky-deep:#1b6fcf; --sky-tint:#e1efff;
 --grape:#a07cff; --grape-deep:#6a45dc; --grape-tint:#eee8ff;
 --lime:#7ed957; --lime-deep:#3e9a2a; --lime-tint:#e5f8da;
 --bubblegum:#ff5fa2; --bubblegum-deep:#cf3177; --bubblegum-tint:#ffe5f0;
 --tangerine:#ff8a3d; --tangerine-deep:#cf5a12; --tangerine-tint:#ffeddf;
 --vermilion:#f0532f; --vermilion-deep:#b8341a; --vermilion-tint:#ffe3dc;
 --gold:#f7c230; --gold-deep:#c98a12; --gold-light:#ffe08a; --gold-tint:#fff3c4;
 --world:#7cc6f2; --grass:#5fbf5a; --grass-dark:#3f9a44; --soil:#7a4a26; --logo-ink:#2d3436;
 --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --gutter:32px;
 --r-s:14px; --r-m:20px; --r-l:28px; --r-xl:44px; --edge:3px; --lift:6px;
 --press:70ms; --settle:460ms; --spring:cubic-bezier(0.28,1.9,0.5,1); --scrim:rgba(30,27,58,.45); --float:0 8px 0 rgba(30,27,58,.13);
 --display:'Fredoka','Atkinson Hyperlegible',system-ui,sans-serif; --body:'Atkinson Hyperlegible',system-ui,sans-serif;
 --title-scale:3; --ground:168px; --soil-h:16px;
 /* The band along the bottom: its height, how far up it the class's Classlings walk, and their size in screen pixels
    to an art pixel (homeWalkers.js reads --walk-scale). The band keeps 28 art pixels above the floor for them at any
    size (WALK.sky, 26, and a little to spare): 16 + 28 x the size. */
 --band-h:128px; --walk-floor:16px; --walk-scale:4;
    --art-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 9' width='32' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffffff' d='M11 0h5v1h-5zM9 1h9v1h-9zM5 2h14v1h-14zM20 2h5v1h-5zM3 3h25v1h-25zM2 4h28v1h-28zM1 5h30v1h-30zM0 6h32v1h-32z'/%3E%3Cpath fill='%23d4ecfb' d='M0 7h32v1h-32zM1 8h30v1h-30z'/%3E%3C/svg%3E");
    --art-puff: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 5' width='20' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffffff' d='M6 0h4v1h-4zM4 1h8v1h-8zM13 1h3v1h-3zM2 2h16v1h-16zM0 3h20v1h-20z'/%3E%3Cpath fill='%23d4ecfb' d='M1 4h18v1h-18z'/%3E%3C/svg%3E");
    --art-tufts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 3' width='16' height='3' shape-rendering='crispEdges'%3E%3Cpath fill='%235fbf5a' d='M2 0h1v1h-1zM12 0h1v1h-1zM1 1h3v1h-3zM6 1h1v1h-1zM11 1h3v1h-3zM15 1h1v1h-1zM0 2h16v1h-16z'/%3E%3C/svg%3E");
    --art-edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 2' width='16' height='2' shape-rendering='crispEdges'%3E%3Cpath fill='%233f9a44' d='M0 0h2v1h-2zM5 0h4v1h-4zM11 0h3v1h-3zM0 1h16v1h-16z'/%3E%3C/svg%3E");
 margin:0; min-height:100dvh; position:relative; isolation:isolate; display:flex; flex-direction:column;
 background:var(--page); color:var(--ink); font:400 18px/1.4 var(--body); letter-spacing:0.01em; -webkit-font-smoothing:antialiased;
}
body.cla-home :where(*) { box-sizing:border-box; }
body.cla-home :where(h1,h2,p) { margin:0; }
body.cla-home :where(button,input,textarea,select) { font:inherit; color:inherit; }
body.cla-home :where(button,a) { -webkit-tap-highlight-color:transparent; }
body.cla-home :where(button) { cursor:pointer; }
body.cla-home :where(a) { color:inherit; text-decoration:none; }
body.cla-home :is([hidden],.hidden) { display:none !important; }
body.cla-home :focus-visible { outline:4px solid var(--ink); outline-offset:4px; }
body.cla-home canvas, body.cla-home svg { image-rendering:pixelated; }
body.cla-home [data-home-icon], body.cla-home [data-bar-icon] { display:inline-flex; flex:none; align-items:center; justify-content:center; }
body.cla-home :is([data-home-icon],[data-bar-icon]) svg { width:24px; height:24px; display:block; }
body.cla-home .home-world { position:absolute; inset:0; z-index:-1; pointer-events:none; display:none; }
body.cla-home[data-world="sky"] { background:var(--world); }
body.cla-home[data-world="sky"] .home-world { display:block; background:var(--art-cloud) left 54.76vw top 26px/128px 36px no-repeat,var(--art-puff) left 69.4vw top 70px/80px 20px no-repeat,var(--art-puff) left 41vw bottom 226px/80px 20px no-repeat; }
body.cla-home .home-ground { position:absolute; bottom:0; width:100%; height:var(--ground); background:var(--grass); border-bottom:var(--soil-h) solid var(--soil); }
body.cla-home .home-ground::before { content:''; position:absolute; width:100%; height:12px; bottom:calc(100% - 0px); background:var(--art-tufts) left bottom/64px 12px repeat-x; }
body.cla-home .home-ground::after { content:''; position:absolute; width:100%; height:8px; bottom:0; background:var(--art-edge) left bottom/64px 8px repeat-x; }
body.cla-home .home-strip { display:flex; align-items:center; gap:var(--s-5); padding:8px var(--gutter) 0; min-height:80px; flex:none; }
body.cla-home #homeTitle { --title-scale:3; flex:none; min-width:0; min-height:48px; line-height:0; white-space:nowrap; margin-bottom:calc(var(--title-scale) * -4px); }
body.cla-home .title-art { display:block; width:calc(var(--title-scale) * var(--w) * 1px); height:calc(var(--title-scale) * var(--h) * 1px); }
/* A long name in two lines (titleFit): the two edges overlap by two art pixels, so the lines stand close. */
body.cla-home .title-lines { display:grid; justify-items:start; max-width:100%; }
body.cla-home .title-lines .title-art + .title-art { margin-top:calc(var(--title-scale) * -2px); }
/* A name that is too long for the lettering even in two lines is plain words, which wrap. */
body.cla-home #homeTitle.is-text { flex:0 1 auto; margin:0; font:600 40px/1.2 var(--display); white-space:normal; overflow-wrap:anywhere; }
body.cla-home .home-about { display:grid; gap:4px; padding-top:8px; flex:none; font:600 28px/1.2 var(--display); }
body.cla-home #homePupils { font:400 20px/1.3 var(--body); color:var(--ink-2); }
body.cla-home[data-world="sky"] #homePupils { color:var(--ink); }
body.cla-home .home-logo { width:154px; height:60px; flex:none; margin-left:auto; margin-right:-2px; align-self:center; position:relative; top:-4px; }
body.cla-home .home-notice { display:flex; align-items:center; gap:8px; min-height:44px; padding:4px 8px; background:var(--tangerine-tint); border:2px solid var(--tangerine-deep); border-radius:8px; font:600 20px/1.2 var(--display); }
body.cla-home .home-notice.is-offline { background:var(--wash); border-color:var(--ink-2); }
body.cla-home .home-main { display:flex; flex-direction:column; flex:1; }
body.cla-home .home-apps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; padding:max(108px,calc(108px + (100dvh - 768px)/2)) var(--gutter) 0; margin-bottom:32px; }
body.cla-home .home-slot { position:relative; display:grid; min-width:0; }
body.cla-home .app-cup { --app:var(--grape); --app-deep:var(--grape-deep); }
body.cla-home .app-maths { --app:var(--lime); --app-deep:var(--lime-deep); }
body.cla-home .app-reading { --app:var(--bubblegum-tint); --app-deep:var(--bubblegum-deep); }
body.cla-home .app-break { --app:var(--tangerine); --app-deep:var(--tangerine-deep); }
/* The Classling over each tile, with room above it to hop when its tile is chosen (homePictures.js react); clicks pass
   through its empty sky, and homePictures.js finds clicks on the Classling itself. */
body.cla-home .home-peek { position:absolute; top:-94px; left:24px; width:80px; height:104px; pointer-events:none; }
body.cla-home .home-tile { position:relative; display:grid; grid-template-rows:auto 1fr; gap:8px; min-height:192px; padding:24px; border:3px solid var(--app-deep); border-radius:44px; background:var(--app); box-shadow:0 8px 0 var(--app-deep); --ring-lift:8px; margin-bottom:8px; transition:transform var(--settle) var(--spring),box-shadow var(--settle) var(--spring); }
body.cla-home a.home-tile:active { transform:translateY(8px); box-shadow:0 0 0 var(--app-deep); transition-duration:var(--press); }
body.cla-home .home-tile { --title:36px; }
body.cla-home .home-tile h2 { grid-area:1/1; font:700 var(--title)/1.05 var(--display); padding-right:56px; }
/* The picture shares the title's row and is centred on its first line, so it sits at the same height in every tile and in every layout. */
body.cla-home .home-tile-icon { grid-area:1/1; justify-self:end; align-self:start; width:36px; height:calc(var(--title) * 1.05); }
/* The tiles' pictures are SVG in index.html (scripts/home-inline-icons.mjs), three screen pixels to an art pixel. */
/* The medal's drawing has an empty column at each side, so it moves one art pixel right to line up with the others. */
body.cla-home .home-tile-icon { display:grid; place-items:center; }
body.cla-home .home-tile-icon > svg { width:36px; height:auto; display:block; }
body.cla-home .home-tile-icon[data-home-icon="maths"] > svg { transform:translateX(3px); }
body.cla-home .home-glance { display:grid; align-self:end; gap:4px; padding:12px 16px; background:var(--page); border-radius:20px; font:600 24px/1.15 var(--display); text-wrap:balance; }
body.cla-home .soon .home-tile { border-style:dashed; box-shadow:none; }
/* The band is the same height whatever the class (the teacher, 11 October: the rows of the class "create poor looking
   layouts"): Pupil login and Menu stand on its floor, and now and then one of the class walks along it, in at one edge
   and out at the other, behind the buttons (homePictures.js). The walkers never catch a click.
   It has no colour of its own, only a strip of pixel grass for its floor (the teacher, 12 October, of the tall pale-blue
   band: "does the extended tall blue background need to be there now"; they chose the grass): the grass's top is the
   walkers' floor, with tufts poking up behind their feet. Sky and grass has its own grass along the bottom instead. */
body.cla-home .home-photo-band { position:relative; margin-top:auto; height:var(--band-h); flex:none; }
body.cla-home .home-photo-band::before { content:''; position:absolute; left:0; right:0; bottom:0; height:calc(var(--walk-floor) + 8px); background:var(--art-tufts) left top/64px 12px repeat-x,var(--art-edge) left bottom/64px 8px repeat-x,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath fill='%235fbf5a' d='M0 0h1v1h-1z'/%3E%3C/svg%3E") left bottom/100% calc(100% - 8px) no-repeat; }
body.cla-home[data-world="sky"] .home-photo-band::before { content:none; }
body.cla-home .home-walkers { position:absolute; inset:0; overflow:hidden; overflow:clip; border-radius:inherit; pointer-events:none; }
body.cla-home .home-walkers canvas { position:absolute; left:0; top:0; height:100%; will-change:transform; }
body.cla-home .home-dock { position:absolute; right:var(--gutter); bottom:calc(var(--walk-floor) + 6px); display:flex; align-items:flex-end; gap:16px; z-index:5; pointer-events:none; }
body.cla-home .home-dock > * { pointer-events:auto; }
body.cla-home :is(.home-login,.home-square,.home-gold) { --ring-lift:6px; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:84px; padding:0 32px; border:3px solid var(--sky-deep); border-radius:28px; background:var(--sky); box-shadow:0 6px 0 var(--sky-deep); color:var(--ink); font:600 24px/1.2 var(--display); transition:transform var(--settle) var(--spring),box-shadow var(--settle) var(--spring); }
body.cla-home :is(.home-login,.home-square,.home-gold):active { transform:translateY(6px); box-shadow:none; transition-duration:var(--press); }
body.cla-home .home-square { width:84px; height:84px; padding:8px; flex-direction:column; gap:4px; background:var(--page); border-color:var(--ink); box-shadow:0 6px 0 var(--ink); font-size:18px; }
body.cla-home .home-square[aria-expanded="true"] { background:var(--ink); color:var(--page); }
/* All three bar pictures are eight art pixels wide; their own viewBox sets the height. */
body.cla-home :is(.home-login,.home-square) [data-mono] svg { width:32px; height:auto; }
body.cla-home .home-gold { background:var(--gold); border-color:var(--gold-deep); box-shadow:0 6px 0 var(--gold-deep); }
body.cla-home #homeBandAction { position:absolute; left:var(--gutter); bottom:calc(var(--walk-floor) + 6px); }
body.cla-home .home-pop { position:relative; }
body.cla-home .home-menu { position:absolute; bottom:100px; right:0; width:360px; max-height:calc(100dvh - 192px); overflow:auto; padding:8px; border:var(--ctl-edge) solid var(--ctl-ink); border-radius:var(--ctl-panel-r); background:var(--ctl-page); box-shadow:var(--ctl-float); }
body.cla-home .home-menu-item { width:100%; display:flex; align-items:center; gap:12px; padding:8px 16px; min-height:var(--ctl-row-h); border:0; border-radius:var(--ctl-r); background:transparent; text-align:left; font:var(--ctl-font); }
body.cla-home .home-menu-item:is(:hover,:focus-visible) { background:var(--wash); }
body.cla-home .home-menu .note { min-width:0; margin-left:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); font:400 16px/1.2 var(--body); }
body.cla-home .home-menu hr { border:0; border-top:3px solid var(--wash-2); margin:4px 12px; }
body.cla-home .home-switcher { width:440px; }
body.cla-home .home-class-row { display:flex; align-items:center; gap:8px; padding:8px; border:3px solid transparent; border-radius:20px; margin-bottom:8px; }
body.cla-home .home-class-row.is-selected { border-color:var(--sky-deep); background:var(--sky-tint); }
body.cla-home .home-class-choice { display:flex; align-items:center; gap:8px; min-width:0; flex:1; min-height:56px; background:none; border:0; text-align:left; padding:0; }
body.cla-home .class-item-info { min-width:0; display:grid; gap:4px; }
body.cla-home .class-item-name { font:600 20px/1.2 var(--display); overflow-wrap:anywhere; }
body.cla-home .class-item-count { font:400 16px/1.3 var(--body); color:var(--ink-2); }
body.cla-home .class-item-actions { display:flex; gap:8px; }
/* Edit and Delete beside a class: the standard's small square (48 px, corners 14, 3 px ink edge, 4 px base), as plus and minus are. */
body.cla-home .class-action-btn { --ring-lift:var(--ctl-small-lift,4px); display:grid; place-items:center; width:var(--ctl-small-h,48px); height:var(--ctl-small-h,48px); margin:0 0 var(--ctl-small-lift,4px); padding:8px; border:3px solid var(--ink); border-radius:var(--ctl-small-r,14px); background:var(--page); box-shadow:0 var(--ctl-small-lift,4px) 0 var(--ink); transition:transform var(--settle) var(--spring),box-shadow var(--settle) var(--spring); }
body.cla-home .class-action-btn:active { transform:translateY(var(--ctl-small-lift,4px)); box-shadow:0 0 0 var(--ink); transition-duration:var(--press); }
body.cla-home .modal { display:none; position:fixed; inset:0; z-index:20; background:var(--scrim); align-items:center; justify-content:center; padding:24px; }
body.cla-home .modal.show { display:flex; }
body.cla-home .modal-content { position:relative; background:var(--page); width:100%; max-width:520px; max-height:calc(100dvh - 48px); overflow:auto; padding:24px; border:3px solid var(--ink); border-radius:28px; box-shadow:0 6px 0 var(--ink); }
body.cla-home #classModal .modal-content, body.cla-home #importReviewModal .modal-content { max-width:660px; max-height:calc(100dvh - 48px); }
body.cla-home .modal-content h2 { padding-right:48px; margin:0 0 16px; font:600 28px/1.2 var(--display); }
body.cla-home .modal-content p { color:var(--ink-2); margin-bottom:16px; }
body.cla-home .modal-close { position:absolute; right:12px; top:12px; width:var(--ctl-x); height:var(--ctl-x); padding:0; display:grid; place-items:center; border:var(--ctl-edge) solid var(--ctl-ink); border-radius:var(--ctl-x-r); background:var(--ctl-page); }
/* The ordinary button (shared/css/classlings-controls.css: 56 px, corners 20, 3 px edge, 6 px lift). White with an ink edge
   and lift; gold, for the main action, with a dark-gold edge and lift; red for what wipes something. The small button
   (48 px, corners 14, 4 px lift, 18 px words) is the register's Add pupil and Mark as leaving, and Try again. */
body.cla-home :is(.btn-primary,.btn-secondary,.btn-danger,.btn-small) { --deep:var(--ctl-ink); --l:var(--ctl-lift); --ring-lift:var(--l); display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--ctl-h); padding:var(--ctl-pad); border:var(--ctl-edge) solid var(--deep); border-radius:var(--ctl-r); background:var(--ctl-page); box-shadow:0 var(--l) 0 var(--deep); font:var(--ctl-font); letter-spacing:0.01em; white-space:nowrap; transition:transform var(--ctl-settle) var(--ctl-spring),box-shadow var(--ctl-settle) var(--ctl-spring); }
body.cla-home .btn-primary { --deep:var(--ctl-gold-deep); background:var(--ctl-gold); }
body.cla-home .btn-danger { --deep:var(--ctl-danger-deep); background:var(--ctl-danger); }
body.cla-home .btn-small { --l:var(--ctl-small-lift); min-height:var(--ctl-small-h); padding:0 16px; border-radius:var(--ctl-small-r); font:var(--ctl-small-font); }
body.cla-home :is(.btn-primary,.btn-secondary,.btn-danger,.btn-small):active { transform:translateY(var(--l)); box-shadow:none; transition-duration:var(--ctl-press); }
/* An "are you sure?" box: "Not now" on the left, the action on the right. */
body.cla-home :is(#signOutModal,#deleteClassModal) .form-actions { justify-content:flex-end; }
body.cla-home :is(.form-actions,.welcome-actions,.class-import-actions) { display:flex; flex-wrap:wrap; gap:16px; margin:24px 0 8px; }
body.cla-home .account-actions { display:grid; gap:16px; padding-bottom:8px; }
body.cla-home :is(.form-group,.class-import-row) { margin:16px 0; }
body.cla-home label { display:block; margin-bottom:8px; }
body.cla-home :is(input,textarea,select) { width:100%; min-width:0; min-height:var(--ctl-field-h); padding:8px 12px; border:var(--ctl-edge) solid var(--ctl-wash-2); border-radius:var(--ctl-field-r); background:var(--ctl-page); font:400 18px/1.4 var(--body); }
body.cla-home :is(input,textarea,select):focus { border-color:var(--ink); }
body.cla-home textarea { resize:vertical; }
/* Report a problem has its buttons in view on a short page (walk-through of 14 October: the box was 691 px tall, Cancel and Send
   below the edge of a 580 px page). On a short wide page (a school laptop's 540 to 700 px) the three short fields stand in one
   column beside the text box, so the whole box fits. On anything shorter, or a phone turned sideways, Cancel and Send stay at
   the foot of the box and the fields scroll behind them. */
body.cla-home #feedbackModal .form-actions { position:sticky; bottom:-24px; z-index:1; margin:16px -24px -24px; padding:12px 24px 24px; background:var(--page); }
/* Sign in stays in view the same way (23 October: on a school laptop's 540 px page, with "Please complete the Turnstile check"
   showing, it was below the edge of the box, and nothing showed the box scrolled). With room to spare it sits where it always
   did: the bar's 12 px above it is taken back from the gap, and the links below lose the 16 px the bar now gives them. */
body.cla-home .auth-submit-bar { position:sticky; bottom:-24px; z-index:1; margin:-12px -24px 0; padding:12px 24px 16px; background:var(--page); }
body.cla-home #authModal .auth-links { margin-top:0; }
/* On a short wide page the sign-in box is a little tighter and its three links stand side by side, so with the Turnstile
   check (and its message) the whole box usually fits; when it doesn't, Sign in stays at the foot (above). */
@media (min-width:600px) and (max-height:700px) {
 body.cla-home #authModal .modal-content h2 { margin-bottom:8px; }
 body.cla-home #authModal :is(.form-group,.auth-message) { margin:12px 0; }
 body.cla-home #authModal .auth-message { padding:8px 12px; }
 body.cla-home #authModal label { margin-bottom:4px; }
 body.cla-home #authModal .auth-captcha-hint { margin:4px 0 12px; }
 body.cla-home #authModal .auth-links { display:flex; flex-wrap:wrap; gap:0 16px; }
}
@media (min-width:760px) and (max-height:700px) {
 body.cla-home #feedbackModal .modal-content { max-width:720px; }
 body.cla-home #feedbackForm { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); column-gap:24px; align-items:start; }
 body.cla-home #feedbackForm .form-group { margin:0 0 8px; }
 body.cla-home #feedbackForm .form-group:has(#feedbackType) { grid-column:1; grid-row:1; }
 body.cla-home #feedbackForm .form-group:has(#feedbackArea) { grid-column:1; grid-row:2; }
 body.cla-home #feedbackForm .form-group:has(#feedbackContactEmail) { grid-column:1; grid-row:3; }
 body.cla-home #feedbackForm .form-group:has(#feedbackMessage) { grid-column:2; grid-row:1 / span 3; align-self:stretch; display:flex; flex-direction:column; margin-bottom:8px; }
 body.cla-home #feedbackMessage { flex:1 1 auto; min-height:96px; resize:none; }
 body.cla-home #feedbackForm .form-actions { grid-column:1 / -1; grid-row:4; margin-top:8px; }
}
body.cla-home .read-only { background:var(--wash); }
body.cla-home .auth-links { display:grid; gap:8px; margin-top:16px; }
body.cla-home .link-btn { min-height:44px; padding:8px; border:0; background:transparent; text-align:left; font:600 18px/1.3 var(--display); text-decoration:underline; text-underline-offset:4px; }
body.cla-home .auth-message { margin:16px 0; padding:12px; border:2px solid var(--tangerine-deep); border-radius:14px; background:var(--tangerine-tint); }
body.cla-home .auth-message.success { border-color:var(--sky-deep); background:var(--sky-tint); }
body.cla-home :is(.auth-captcha-hint,.class-import-hint) { color:var(--ink-2); font-size:16px; margin-top:16px; }
/* The privacy notice and terms, in a quiet line: the agree line above Create an account, Report a problem's line by Send, and
   the Account box's line under its buttons. */
body.cla-home .modal-content :is(.auth-agree,.feedback-privacy,.account-privacy) { color:var(--ink-2); font:400 16px/1.35 var(--body); }
body.cla-home .modal-content .auth-agree { margin:16px 0; }
body.cla-home .modal-content .account-privacy { margin:16px 0 0; }
body.cla-home :is(.auth-agree,.feedback-privacy,.account-privacy) a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
body.cla-home #feedbackModal .form-actions { align-items:center; }
body.cla-home #feedbackModal .modal-content .feedback-privacy { flex:1 1 220px; margin:0; }
body.cla-home .netlify-honeypot { display:none; }
body.cla-home .pupil-roster-editor { --roster-ink:var(--ink); --roster-line:var(--wash-2); }
body.cla-home :is(.roster-hint,.roster-number) { color:var(--ink-2); }
body.cla-home :is(.roster-summary,.roster-notice) { background:var(--wash); border-color:var(--wash-2); font-size:16px; }
body.cla-home .pupil-roster-editor .roster-name { border:3px solid var(--wash-2); border-radius:14px; min-height:48px; color:var(--ink); font:400 18px/1.3 var(--body); }
body.cla-home .pupil-roster-editor .roster-button { --deep:var(--ctl-ink); --l:var(--ctl-small-lift); --ring-lift:var(--l); min-width:44px; min-height:var(--ctl-small-h); padding:0 16px; border:var(--ctl-edge) solid var(--deep); border-radius:var(--ctl-small-r); background:var(--ctl-page); box-shadow:0 var(--l) 0 var(--deep); color:var(--ctl-ink); font:var(--ctl-small-font); white-space:nowrap; transition:transform var(--ctl-settle) var(--ctl-spring),box-shadow var(--ctl-settle) var(--ctl-spring); }
body.cla-home .pupil-roster-editor .roster-button:active:not(:disabled) { transform:translateY(var(--l)); box-shadow:none; transition-duration:var(--ctl-press); }
body.cla-home .roster-import { border:3px solid var(--wash-2); border-radius:14px; }
body.cla-home :is(.roster-import,.roster-former) summary { min-height:44px; }
body.cla-home .home-toast { position:fixed; bottom:164px; left:50%; transform:translateX(-50%); z-index:30; max-width:calc(100% - 32px); padding:12px 24px; border-radius:28px; background:var(--ink); color:var(--page); font:600 20px/1.3 var(--display); }
/* Short of room, the tiles go "snug" (only as tall as their titles). The tiles have no line under the title (the owner, 9 November:
   it "gets lost in what its doing"), so "tight" changes nothing now, but the steps are kept so a window still goes one way.
   homePictures.js tries each in turn at every width, so dragging a window changes things in one direction only (the
   teacher, 8 October). On the school laptop (1366 wide, about 540-600 tall) it's snug. */
/* A tall screen (a board) has room to spare (the teacher, 11 October): the tiles stand in the middle of the space
   between the title and the band, rather than high with a gap under them, and the Classlings walking along the band
   are a size or two bigger, so they read from the back of the room. The school laptop's page (about 540-600 tall)
   is just as it was. A snug fit goes back to the usual band and walkers. */
@media (min-width:1000px) and (min-height:700px) {
 body.cla-home .home-apps { padding-top:108px; padding-bottom:32px; margin-top:auto; margin-bottom:auto; }
 body.cla-home .home-photo-band { margin-top:0; }
 body.cla-home.home-snug .home-apps { margin-top:0; padding-bottom:0; }
 body.cla-home.home-snug .home-photo-band { margin-top:auto; }
}
@media (min-width:1200px) and (min-height:720px) {
 body.cla-home:not(.home-snug) { --band-h:156px; --walk-scale:5; }
}
@media (min-width:1500px) and (min-height:900px) {
 body.cla-home:not(.home-snug) { --band-h:184px; --walk-scale:6; }
}
@media (min-width:1000px) {
 body.cla-home.home-snug .home-apps { padding-top:72px; margin-bottom:16px; }
 body.cla-home.home-snug .home-tile { min-height:0; padding:16px 20px; }
}
@media (min-width:1000px) and (max-width:1240px) {
 body.cla-home .home-tile { padding:20px; }
 body.cla-home .home-tile { --title:28px; }
 body.cla-home .home-tile h2 { padding-right:40px; }
 body.cla-home .home-glance { font-size:20px; padding:12px; }
 body.cla-home .home-about { font-size:24px; }
}
body.cla-home.home-strip-wrap .home-strip { flex-wrap:wrap; gap:12px 24px; }
body.cla-home.home-strip-wrap .home-about { order:3; width:100%; }
body.cla-home.home-strip-wrap .home-notice { order:4; }
@media (max-width:599px) {
 body.cla-home .home-strip { flex-wrap:wrap; gap:12px 24px; }
 body.cla-home .home-about { order:3; width:100%; }
 body.cla-home .home-notice { order:4; }
}
@media (max-width:999px) {
 body.cla-home .home-apps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:96px 24px; padding-top:96px; }
 body.cla-home .home-tile { min-height:180px; }
 body.cla-home .home-dock { position:fixed; bottom:16px; left:16px; right:16px; justify-content:flex-end; }
}
@media (max-width:599px) {
 /* Pupil login and Menu stay at the bottom of the screen, standing on the grass as at every other size, and fill the width, so the
    class walks along the tops of them. */
 body.cla-home { --gutter:16px; --band-h:168px; --walk-floor:86px; --walk-scale:3; }
 body.cla-home .home-photo-band::before { position:fixed; z-index:4; bottom:0; height:24px; }
 /* The walkers are pinned to the bottom of the screen too, like the grass and the buttons, so their feet are always on the
    buttons' tops however far the page is scrolled and however tall the window is. */
 body.cla-home .home-walkers { position:fixed; inset:auto 0 0; height:var(--band-h); border-radius:0; z-index:4; }
 body.cla-home .home-strip { gap:8px 16px; min-height:0; padding-top:8px; }
 body.cla-home #homeTitle { min-height:40px; }
 body.cla-home #homeTitle.is-text { font-size:32px; max-width:100%; }
 body.cla-home .home-about { padding-top:8px; font-size:20px; gap:4px; }
 body.cla-home #homePupils { font-size:16px; }
 body.cla-home .home-apps { gap:64px 16px; padding-top:64px; margin-bottom:24px; }
 body.cla-home .home-tile { min-height:152px; border-radius:36px; padding:16px; gap:8px; grid-template-rows:auto 1fr; }
 body.cla-home .home-tile { --title:24px; }
 body.cla-home .home-tile h2 { padding:0; }
 body.cla-home .home-tile-icon { display:none; }
 body.cla-home .home-glance { font-size:18px; padding:8px 12px; border-radius:14px; }
 body.cla-home .home-peek { width:56px; height:74px; top:-66px; left:16px; }
 body.cla-home .home-dock { position:fixed; bottom:22px; left:16px; right:16px; gap:16px; }
 body.cla-home .home-login { min-width:0; flex:1; height:64px; min-height:64px; padding:0 16px; font-size:20px; }
 body.cla-home .home-square { width:64px; height:64px; min-height:64px; border-radius:20px; font-size:14px; }
 body.cla-home :is(.home-login,.home-square) [data-mono] svg { width:24px; height:auto; }
 body.cla-home .home-menu { width:calc(100vw - 32px); bottom:80px; max-height:calc(100dvh - 128px); }
 body.cla-home .home-menu-item { padding:8px; }
 body.cla-home .modal { padding:16px; align-items:flex-end; padding-bottom:104px; }
 body.cla-home .modal-content, body.cla-home #classModal .modal-content, body.cla-home #importReviewModal .modal-content { padding:20px; max-height:calc(100dvh - 128px); }
 body.cla-home .modal-content h2 { font-size:26px; }
 body.cla-home #feedbackModal .form-actions { bottom:-20px; margin:16px -20px -20px; padding:12px 20px 20px; }
 body.cla-home .auth-submit-bar { bottom:-20px; margin:-12px -20px 0; padding:12px 20px 16px; }
 body.cla-home #homeBandAction { bottom:calc(var(--walk-floor) + 18px); min-height:64px; }
 body.cla-home .home-toast { bottom:108px; }
 /* The two answers in an "are you sure?" box stay on one row on a phone. */
 body.cla-home :is(#signOutModal,#deleteClassModal) .form-actions { gap:12px; }
 body.cla-home :is(#signOutModal,#deleteClassModal) .form-actions :is(.btn-secondary,.btn-primary,.btn-danger) { padding:0 16px; }
 body.cla-home[data-world="sky"] .home-world { background:none; }
 body.cla-home .home-class-row { padding:4px; }
 body.cla-home .class-item-actions { gap:8px; }
 body.cla-home .home-notice { font-size:18px; }
}
@media (prefers-reduced-motion:reduce) { body.cla-home *, body.cla-home *::before, body.cla-home *::after { transition:none !important; animation:none !important; } }

body.cla-home .home-class-tick { display:flex; width:24px; flex:none; }
body.cla-home :is(.home-class-tick,.class-action-btn) svg { width:24px; height:24px; }

body.cla-home .home-login { white-space:nowrap; }
@media (min-width:600px) { body.cla-home .home-login { min-width:226px; } }
@media (max-width:599px) {
 body.cla-home.home-title-stacked #homeTitle { order:2; width:100%; }
 body.cla-home.home-title-stacked .home-logo { order:1; }
}

body.cla-home .pupil-roster-editor .roster-plus { display:inline-flex; flex:none; margin-right:8px; }
body.cla-home .pupil-roster-editor .roster-plus svg { width:24px; height:24px; display:block; }
/* On a phone the register's Mark as leaving goes under the name, so its words stay on one line. */
@media (max-width:599px) {
 body.cla-home .pupil-roster-editor .roster-row { grid-template-columns:20px minmax(0,1fr); row-gap:8px; }
 body.cla-home .pupil-roster-editor .roster-row .roster-button { grid-column:2; justify-self:end; }
}


/* Tablets and narrow windows: the buttons stand on the band's floor at its right, as on the board, with the walkers
   passing behind them. */
@media (min-width:600px) and (max-width:999px) {
 body.cla-home { --apps-pad:clamp(64px,calc(100dvh - 920px),80px); }
 body.cla-home .home-dock { position:absolute; bottom:calc(var(--walk-floor) + 6px); left:auto; right:16px; }
 body.cla-home.home-scrolls .home-dock { position:fixed; }
 /* The grass stays under them while the page scrolls. */
 body.cla-home.home-scrolls .home-photo-band::before { position:fixed; z-index:4; }
 body.cla-home #homeBandAction { bottom:calc(var(--walk-floor) + 6px); max-width:calc(100% - 406px); padding:0 20px; }
}
@media (min-width:600px) and (max-width:999px) {
 body.cla-home .home-apps { padding-top:var(--apps-pad); gap:var(--apps-pad) 24px; margin-bottom:24px; }
 body.cla-home .home-tile { min-height:clamp(140px,calc((100dvh - var(--home-strip-height,152px) - var(--band-h) - 2 * var(--apps-pad) - 40px)/2),180px); padding:20px; }
 body.cla-home .home-tile { --title:30px; }
 body.cla-home .home-tile h2 { padding-right:44px; }
 body.cla-home .home-glance { font-size:20px; padding:10px 12px; }
}
/* Snug on a narrow window: shorter tiles, as on a phone. */
@media (min-width:600px) and (max-width:999px) {
 body.cla-home.home-snug .home-apps { padding-top:56px; gap:56px 24px; margin-bottom:16px; }
 body.cla-home.home-snug .home-tile { min-height:0; padding:16px 20px; }
}
/* Compact, the last step on a short narrow window (half a laptop screen, say) before the page scrolls: the phone's
   smaller Classlings over the tiles and along the band (size 3), shorter tiles, the phone's buttons and a shorter band. */
@media (min-width:600px) and (max-width:999px) {
 body.cla-home.home-compact { --band-h:104px; --walk-scale:3; }
 body.cla-home.home-compact .home-apps { padding-top:48px; gap:48px 16px; margin-bottom:12px; }
 body.cla-home.home-compact .home-peek { width:56px; height:74px; top:-66px; left:16px; }
 body.cla-home.home-compact .home-tile { padding:12px 16px; gap:6px; border-radius:36px; }
 body.cla-home.home-compact .home-tile { --title:26px; }
 body.cla-home.home-compact .home-glance { font-size:20px; padding:8px 12px; border-radius:14px; }
 body.cla-home.home-compact .home-login { min-width:0; height:64px; min-height:64px; padding:0 16px; font-size:20px; }
 body.cla-home.home-compact .home-square { width:64px; height:64px; min-height:64px; border-radius:20px; font-size:14px; }
 body.cla-home.home-compact :is(.home-login,.home-square) [data-mono] svg { width:24px; height:auto; }
 body.cla-home.home-compact .home-about { font-size:20px; }
 body.cla-home.home-compact #homePupils { font-size:16px; }
}
@media (min-width:600px) and (max-width:699px) {
 body.cla-home .home-tile { padding:16px; }
 body.cla-home .home-tile h2 { padding-right:40px; }
}

/* The Classlings come in once they're drawn, not half-loaded (the teacher, 8 October; homePictures.js comeIn).
   The four over the tiles keep their part of the Wave hello (the teacher's pick, 10 October; homeComeIn.js):
   homePictures.js moves each one's canvas by whole pixels, so they have no animation of their own here. The walkers
   are moved the same way, a whole art pixel at a time (homeWalkers.js). The logo is a still picture: it is just there
   once it is drawn, with no fade (the teacher's rule, walk-through of 14 October: only the Classlings animate in). */
body.cla-home .home-peek:not(.is-in), body.cla-home .home-logo:not(.is-in) { opacity:0; }
/* The full entrance plays the first time Home opens each day; later that day, or with less motion asked for, the
   four just fade in quickly (the teacher, 10 October). */
body.cla-home .home-peek.is-in.come-quick { animation:home-fade-in .2s ease-out both; }
@keyframes home-fade-in { from { opacity:0; } to { opacity:1; } }

/* Finish setting up (home/homeFinish.js, the teacher's drawing of 15 October 2026, screen 8): a card in the band along the
   bottom, where first-visit boxes used to go. What is done is a ticked chip beside its title, what is left a row of small
   cards, the school's on gold while it waits for a yes. While it shows the band holds it (taller than the band is
   otherwise), the tiles fit as they do for any page that is short of room, and nobody walks across the grass behind it. */
body.cla-home .home-photo-band:has(.home-finish:not([hidden])) { height:auto; }
body.cla-home .home-photo-band:has(.home-finish:not([hidden])) #homeBandAction { display:none; }
@media (min-width:1000px) {
 body.cla-home.home-snug:has(.home-finish:not([hidden])) .home-apps { padding-top:66px; margin-bottom:8px; }
 body.cla-home.home-snug:has(.home-finish:not([hidden])) .home-tile { padding-block:12px; gap:6px; }
}
body.cla-home .home-finish { position:relative; z-index:3; width:min(960px,calc(100% - var(--gutter) * 2 - 360px)); margin:8px var(--gutter) calc(var(--walk-floor) + 14px); padding:12px 16px 16px; display:grid; gap:10px; background:var(--page); border:var(--edge) solid var(--ink); border-radius:var(--r-l); box-shadow:0 6px 0 var(--ink); }
body.cla-home .finish-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
body.cla-home .finish-top h2 { margin:0 6px 0 0; font:600 24px/1.1 var(--display); }
body.cla-home .finish-got { display:inline-flex; align-items:center; gap:6px; min-height:32px; max-width:100%; padding:2px 12px 2px 6px; font:600 16px/1.2 var(--display); background:var(--lime-tint); border:2px solid var(--lime-deep); border-radius:999px; overflow-wrap:anywhere; }
body.cla-home .finish-got .finish-tk { flex:none; }
body.cla-home .finish-tk { width:22px; height:22px; display:grid; place-items:center; padding:3px; background:var(--lime); border-radius:50%; }
body.cla-home .finish-tk svg { width:100%; height:100%; display:block; }
body.cla-home .finish-break { display:none; }
body.cla-home .finish-x { margin-left:auto; width:44px; height:44px; display:grid; place-items:center; padding:10px; color:var(--ink); background:var(--page); border:var(--edge) solid var(--ink); border-radius:var(--r-s); }
body.cla-home .finish-x svg { width:100%; height:100%; display:block; }
body.cla-home .finish-list { display:grid; grid-template-columns:var(--cols,repeat(3,minmax(0,1fr))); gap:10px; margin:0; padding:0; list-style:none; }
body.cla-home .finish-list li { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; min-width:0; min-height:66px; padding:8px 10px 8px 12px; border:2px solid var(--wash-2); border-radius:18px; background:var(--page); }
body.cla-home .finish-box { width:34px; height:34px; display:grid; place-items:center; padding:5px; border:2px solid var(--ink); border-radius:10px; background:var(--page); }
body.cla-home .finish-box svg { width:100%; height:100%; display:block; }
body.cla-home .finish-txt { display:grid; gap:2px; min-width:0; }
body.cla-home .finish-txt b { font:600 19px/1.15 var(--display); }
body.cla-home .finish-txt small { font:400 15px/1.3 var(--body); color:var(--ink-2); }
body.cla-home .finish-list li.finish-wait { grid-template-columns:34px minmax(0,1fr); background:var(--gold-tint); border-color:var(--gold-deep); }
body.cla-home .finish-wait .finish-box { border-color:var(--gold-deep); }
body.cla-home .finish-wait small { color:var(--ink); }
body.cla-home .finish-list .cla-btn.is-small { min-height:40px; padding:0 12px; font-size:16px; --l:4px; border-radius:12px; margin-bottom:4px; }
/* Four things to do (the codes, the tables, the badges, the school) or five (and the Cup): two columns, or three, on a tablet and
   on a window under 1200 wide; on a laptop's page (1200 wide and up, under 900 high) one row of them, each its picture and
   title over its button, so the card is no taller than it was with three. The little notes
   under the titles give their room there (they stay for a screen reader). */
@media (min-width:600px) and (max-width:999px) {
 body.cla-home .finish-list[data-count="5"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1000px) and (max-width:1199px) and (max-height:899px) {
 body.cla-home .finish-list[data-count="5"] .finish-opt { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
@media (min-width:1200px) and (max-height:899px) {
 body.cla-home .finish-list[data-count="4"] { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
 body.cla-home .finish-list[data-count="5"] { grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
 body.cla-home .finish-list:is([data-count="4"],[data-count="5"]) li:not(.finish-wait) { grid-template-columns:28px minmax(0,1fr); grid-template-rows:auto auto; gap:4px 8px; min-height:0; padding:6px 8px; }
 body.cla-home .finish-list:is([data-count="4"],[data-count="5"]) li:not(.finish-wait) .finish-box { grid-column:1; grid-row:1; width:28px; height:28px; padding:4px; }
 body.cla-home .finish-list:is([data-count="4"],[data-count="5"]) li:not(.finish-wait) .finish-txt { grid-column:2; grid-row:1; }
 body.cla-home .finish-list:is([data-count="4"],[data-count="5"]) li:not(.finish-wait) .cla-btn { grid-column:1 / -1; grid-row:2; justify-self:start; min-height:32px; margin-bottom:3px; padding:0 10px; font-size:15px; }
 body.cla-home .finish-list:is([data-count="4"],[data-count="5"]) .finish-opt { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
 body.cla-home .finish-list:is([data-count="4"],[data-count="5"]) .finish-wait small { font-size:14px; }
}
@media (max-height:560px) and (min-width:600px) {
 body.cla-home .home-finish { padding-block:10px 12px; gap:8px; }
 body.cla-home .home-finish { margin-bottom:calc(var(--walk-floor) + 8px); }
 body.cla-home .finish-list { gap:8px; }
 body.cla-home .finish-list li { min-height:50px; padding-block:4px; }
 body.cla-home .finish-list .cla-btn.is-small { min-height:36px; }
}
/* The Menu's rows are a little shorter while "Finish setting up" is in it, so the Menu still fits a laptop's page without scrolling. */
@media (max-height:640px) {
 body.cla-home:has(#finishMenuItem:not([hidden])) .home-menu-item { min-height:48px; }
}
@media (min-width:1500px) and (min-height:900px) {
 body.cla-home .home-finish { width:min(1300px,calc(100% - var(--gutter) * 2 - 460px)); padding:18px 22px 22px; gap:14px; margin-bottom:calc(var(--walk-floor) + 24px); }
 body.cla-home .finish-top h2 { font-size:32px; }
 body.cla-home .finish-got { font-size:21px; min-height:42px; padding:3px 16px 3px 8px; }
 body.cla-home .finish-tk { width:30px; height:30px; padding:5px; }
 body.cla-home .finish-x { width:56px; height:56px; padding:13px; }
 body.cla-home .finish-list { gap:14px; }
 body.cla-home .finish-list li { grid-template-columns:46px minmax(0,1fr) auto; min-height:92px; padding:12px 14px 12px 16px; gap:14px; border-radius:22px; }
 body.cla-home .finish-list li.finish-wait { grid-template-columns:46px minmax(0,1fr); }
 body.cla-home .finish-box { width:46px; height:46px; padding:7px; }
 body.cla-home .finish-txt b { font-size:26px; }
 body.cla-home .finish-txt small { font-size:20px; }
 body.cla-home .finish-list .cla-btn.is-small { min-height:52px; font-size:21px; padding:0 16px; }
}
/* A row's button never sits on its words, whatever the window. Where the card (a container, so this follows its own width, not the
   window's) leaves a row too little room for its words and its button side by side, each row has its picture and title over its
   button, the same in every row of the card. Three things share the card's width unevenly and five stand three across, so they need
   more of it than two or four, which stand two across. A tablet's five stand two across too. The notes give their room (they stay
   for a screen reader). */
body.cla-home .home-finish { container:finish / inline-size; }
@media (min-width:600px) {
 @container finish (max-width:589px) {
  body.cla-home .finish-list:is([data-count="2"],[data-count="4"],[data-count="5"]) li:not(.finish-wait) { grid-template-columns:28px minmax(0,1fr); grid-template-rows:auto auto; gap:4px 8px; min-height:0; padding:6px 8px; }
  body.cla-home .finish-list:is([data-count="2"],[data-count="4"],[data-count="5"]) li:not(.finish-wait) .finish-box { grid-column:1; grid-row:1; width:28px; height:28px; padding:4px; }
  body.cla-home .finish-list:is([data-count="2"],[data-count="4"],[data-count="5"]) li:not(.finish-wait) .finish-txt { grid-column:2; grid-row:1; }
  body.cla-home .finish-list:is([data-count="2"],[data-count="4"],[data-count="5"]) li:not(.finish-wait) .cla-btn { grid-column:1 / -1; grid-row:2; justify-self:start; min-height:32px; margin-bottom:3px; padding:0 10px; font-size:15px; }
  body.cla-home .finish-list:is([data-count="2"],[data-count="4"],[data-count="5"]) .finish-opt { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
 }
 @container finish (max-width:879px) {
  body.cla-home .finish-list[data-count="3"] li:not(.finish-wait) { grid-template-columns:28px minmax(0,1fr); grid-template-rows:auto auto; gap:4px 8px; min-height:0; padding:6px 8px; }
  body.cla-home .finish-list[data-count="3"] li:not(.finish-wait) .finish-box { grid-column:1; grid-row:1; width:28px; height:28px; padding:4px; }
  body.cla-home .finish-list[data-count="3"] li:not(.finish-wait) .finish-txt { grid-column:2; grid-row:1; }
  body.cla-home .finish-list[data-count="3"] li:not(.finish-wait) .cla-btn { grid-column:1 / -1; grid-row:2; justify-self:start; min-height:32px; margin-bottom:3px; padding:0 10px; font-size:15px; }
  body.cla-home .finish-list[data-count="3"] .finish-opt { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
 }
}
@media (min-width:1000px) {
 @container finish (max-width:879px) {
  body.cla-home .finish-list[data-count="5"] li:not(.finish-wait) { grid-template-columns:28px minmax(0,1fr); grid-template-rows:auto auto; gap:4px 8px; min-height:0; padding:6px 8px; }
  body.cla-home .finish-list[data-count="5"] li:not(.finish-wait) .finish-box { grid-column:1; grid-row:1; width:28px; height:28px; padding:4px; }
  body.cla-home .finish-list[data-count="5"] li:not(.finish-wait) .finish-txt { grid-column:2; grid-row:1; }
  body.cla-home .finish-list[data-count="5"] li:not(.finish-wait) .cla-btn { grid-column:1 / -1; grid-row:2; justify-self:start; min-height:32px; margin-bottom:3px; padding:0 10px; font-size:15px; }
  body.cla-home .finish-list[data-count="5"] .finish-opt { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
 }
}
/* Five rows standing like this make two tall lines: a window this short still has them with nothing to scroll. */
@media (min-width:1000px) and (max-width:1199px) and (max-height:560px) {
 @container finish (max-width:879px) {
  body.cla-home .finish-list[data-count="5"] li:not(.finish-wait) { gap:2px 8px; padding-block:3px; }
  body.cla-home .finish-list[data-count="5"] li:not(.finish-wait) .finish-box { width:24px; height:24px; padding:3px; }
 }
}
@media (min-width:1500px) and (min-height:900px) {
 @container finish (max-width:1199px) {
  body.cla-home .finish-list:is([data-count="3"],[data-count="5"]) li:not(.finish-wait) { grid-template-columns:46px minmax(0,1fr); grid-template-rows:auto auto; gap:8px 14px; }
  body.cla-home .finish-list:is([data-count="3"],[data-count="5"]) li:not(.finish-wait) .cla-btn { grid-column:1 / -1; grid-row:2; justify-self:start; }
 }
}
@media (max-width:999px) {
 /* Pupil login and Menu stand at the bottom right here, so the card is above them. */
 body.cla-home .home-finish { width:auto; margin:8px var(--gutter) calc(var(--walk-floor) + 108px); }
}
@media (max-width:599px) {
 /* On a phone the tiles are shorter while the card shows, so the page and its dock still fit the screen. */
 body.cla-home:has(.home-finish:not([hidden])) .home-apps { gap:44px 16px; padding-top:46px; margin-bottom:0; }
 body.cla-home:has(.home-finish:not([hidden])) .home-tile { min-height:80px; padding:10px 16px; gap:6px; }
 body.cla-home .home-finish { margin:8px var(--gutter) 90px; padding:8px 12px 10px; gap:8px; }
 body.cla-home .finish-top { gap:6px 8px; }
 body.cla-home .finish-top h2 { font-size:20px; flex:1 1 60%; }
 body.cla-home .finish-x { order:2; width:40px; height:40px; padding:9px; margin-left:0; }
 body.cla-home .finish-break { display:block; order:3; flex-basis:100%; height:0; }
 body.cla-home .finish-got { order:4; font-size:14px; min-height:28px; padding:1px 10px 1px 4px; }
 body.cla-home .finish-tk { width:20px; height:20px; }
 body.cla-home .finish-list { grid-template-columns:minmax(0,1fr); gap:5px; }
 body.cla-home .finish-list li { grid-template-columns:30px minmax(0,1fr) auto; min-height:0; padding:4px 8px 4px 10px; border-radius:14px; }
 body.cla-home .finish-list .cla-btn.is-small { min-height:36px; --l:3px; margin-bottom:3px; font-size:15px; }
 body.cla-home .finish-list li.finish-wait { grid-template-columns:30px minmax(0,1fr); }
 body.cla-home .finish-box { width:30px; height:30px; padding:4px; }
 body.cla-home .finish-txt b { font-size:17px; }
 body.cla-home .finish-txt small { font-size:14px; }
 body.cla-home .finish-opt { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
 body.cla-home .finish-long { display:none; }
 /* Five rows (the Cup, the codes, the tables, the badges, the school) stand a little closer, so the page still fits. */
 body.cla-home:has(.finish-list[data-count="5"]) .home-apps { gap:40px 16px; }
 body.cla-home:has(.finish-list[data-count="5"]) .home-finish { margin-top:6px; padding-block:6px 8px; gap:6px; }
 body.cla-home .finish-list[data-count="5"] { gap:4px; }
 body.cla-home .finish-list[data-count="5"] li { padding-block:1px; }
 body.cla-home .finish-list[data-count="5"] .cla-btn.is-small { min-height:34px; margin-bottom:2px; }
}