@font-face{font-family:Bebas;src:url('assets/BebasNeue-Regular.ttf')}[hidden]{display:none!important}html{scroll-behavior:smooth}body{background:#fff;color:#111}#shell-header{display:flex;align-items:center;border-bottom:1px solid #111;padding:18px 34px;gap:26px}.brand img{width:180px;display:block}#main-nav{display:flex;gap:5px;flex:1;justify-content:center}#shell-header button{font-size:21px;padding:10px 14px;border:0}#main-nav button[aria-current=page]{background:#111;color:white}#save-banner{font-size:12px;line-height:1.5;min-height:32px;padding:10px 34px;background:#f3f3f3;display:flex;justify-content:space-between;align-items:center;gap:12px}#save-banner button{font-size:16px;padding:2px 12px}#workspace{max-width:1440px;margin:auto;padding:38px 44px}.heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}h1,h2,h3,.big,.pill,.time,.metric,.level-tab{font-family:Bebas,'Arial Narrow',Arial,sans-serif;font-weight:400;text-transform:uppercase}h1{font-size:60px;line-height:1;margin:0 0 9px}h2{font-size:34px;margin:0}h3{font-size:25px;margin:0 0 8px}.eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;margin:0 0 12px}.muted{color:#666;font-size:13px;line-height:1.6}p{line-height:1.5}.tabs,.actions{display:flex;gap:8px;flex-wrap:wrap}.tabs{margin:22px 0}.tabs button{font-size:21px;padding:7px 18px}.tabs .selected{background:#111;color:white}.schedule-row{display:grid;grid-template-columns:110px 1fr;gap:20px;border-top:1px solid #bbb;padding:22px 0}.time{font-size:28px}.people{display:flex;flex-wrap:wrap;gap:10px}.person{min-width:180px;flex:1;max-width:300px;text-align:left;padding:15px 18px;border:1px solid #ccc}.person .muted{display:block;text-transform:none;font-family:Arial;font-size:12px}.person:hover .muted{color:#ddd}.person strong{font-weight:400}.no-profile{background:#f5f5f5;border:1px dashed #aaa;padding:15px 18px;flex:1;min-width:180px;max-width:300px}.no-profile .big{font-size:24px}.search{width:min(420px,100%);padding:12px 14px;border:1px solid #aaa;background:white;font:15px Arial}.student-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.student-card{padding:22px;border:1px solid #bbb;text-align:left}.student-card h3{margin:5px 0 14px}.student-card:hover .muted{color:#ddd}.progress{height:5px;background:#ddd;margin:10px 0}.progress span{display:block;height:100%;background:#111}.student-card:hover .progress span{background:white}.profile-top{display:grid;grid-template-columns:1fr auto;gap:20px;border-bottom:1px solid;padding-bottom:28px}.metric{font-size:66px;line-height:1}.metric small{font:12px Arial;display:block;text-transform:none}.level-tabs{display:flex;gap:4px;overflow:auto;padding:20px 0;margin:0 0 12px}.level-tab{white-space:nowrap;font-size:23px;padding:8px 14px;border:1px solid #bbb}.level-tab.selected{background:black;color:white}.level-tab small{display:block;font:10px Arial;text-transform:none;margin-top:3px}.curriculum{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}.tile{border:1px solid #bbb;display:flex;flex-direction:column}.art{background:#eee;height:136px;display:flex;justify-content:center;align-items:center;overflow:hidden}.art img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}.art .big{font-size:40px;color:#777}.tile-body{padding:17px;flex:1;display:flex;flex-direction:column;gap:12px}.tile h3{font-size:25px;line-height:1.15;min-height:57px}.tile .actions{margin-top:auto}.tile button{font-size:18px;padding:8px 10px}.tile .value-button{font-size:23px;width:100%;text-align:left;padding:10px 12px}.tile.complete{border:2px solid #111}.note{font-size:12px;white-space:pre-wrap;word-break:break-word;margin:0}.pending{font-size:10px;letter-spacing:1px;text-transform:uppercase}.group-label{grid-column:1/-1;font-size:27px;font-family:Bebas;border-bottom:1px solid #ccc;padding:16px 0 8px}.library-row{display:grid;grid-template-columns:1fr auto;gap:15px;padding:18px 0;border-top:1px solid #ccc;align-items:center}.library-row h3{margin:0 0 4px}.library-row button{font-size:18px;padding:9px 13px}.empty{padding:40px;border:1px dashed #aaa;text-align:center}.settings-block{max-width:850px;border-top:1px solid #aaa;padding:26px 0}.settings-block input{width:100%}.path{overflow-wrap:anywhere;font-size:13px}.settings-block .actions{margin-top:16px}dialog{border:1px solid #111;padding:28px;width:min(540px,92vw);max-height:90vh}dialog::backdrop{background:#0008}.dialog-heading{display:flex;justify-content:space-between;gap:12px;margin-bottom:22px}.dialog-heading button{border:0;font-size:28px;padding:0 8px}label{display:block;font-size:13px;margin:16px 0}label input,label select,label textarea{width:100%;padding:12px;border:1px solid #aaa;background:white;color:#111;font:15px Arial;margin-top:8px}label textarea{min-height:105px;resize:vertical}#editor-error{font-size:13px}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#111;color:white;padding:14px 22px;max-width:90vw;z-index:20;font-size:13px}#page-player #menu{min-height:auto;padding:0}#page-player .logo{width:min(350px,70vw)}#youtube{flex:1;width:100%;border:0;min-height:0}#external{flex:1;display:grid;place-content:center;text-align:center;padding:32px}#external a{color:white;font-size:24px}#viewer{z-index:10}#video{max-height:calc(100vh - 74px)}button,input,select,textarea,a{touch-action:manipulation}:focus-visible{outline:2px solid #111;outline-offset:3px}@media(max-width:900px){#shell-header{padding:16px;flex-wrap:wrap;gap:12px}.brand img{width:140px}#main-nav{order:3;width:100%;justify-content:flex-start;overflow:auto}#shell-header button{font-size:18px;white-space:nowrap}#workspace{padding:26px 20px}h1{font-size:46px}.heading{align-items:start;flex-direction:column}.schedule-row{grid-template-columns:80px 1fr;gap:10px}.metric{font-size:52px}.library-row{grid-template-columns:1fr}.people .person,.no-profile{max-width:none}#save-banner{padding:10px 16px}.curriculum{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media(max-width:900px){#main-nav{flex:0 0 100%;min-width:0}#settings-button{margin-left:auto}}
.brand{animation:balatro-float 8s ease-in-out infinite;transform-origin:center;will-change:transform}.brand img{filter:none}@keyframes balatro-float{0%,100%{transform:translate(0,0) rotate(-1.5deg)}25%{transform:translate(5px,-6px) rotate(.8deg)}50%{transform:translate(-3px,3px) rotate(1.5deg)}75%{transform:translate(-5px,-4px) rotate(-.7deg)}}.tile.complete{border:2px solid #219653;background:#effaf2}.tile.complete .art{background:#dff2e4}.tile.complete .art .big{color:#247f46}.tile.complete .value-button{border-color:#219653;color:#16753d}.tile.complete .value-button:hover{background:#16753d;color:white}.completion-check{display:flex;align-items:center;gap:10px;margin:0;font:16px Bebas;text-transform:uppercase}.completion-check input{width:23px;height:23px;margin:0;accent-color:#219653;cursor:pointer}.friday-switch{display:flex;align-items:center;gap:10px;white-space:nowrap}.friday-switch input{width:20px;height:20px;accent-color:black}.local-info{font-size:12px;background:#f4f4f4;padding:12px 16px;line-height:1.6}.timetable-scroll{overflow:auto}.week-grid{width:100%;border-collapse:collapse;table-layout:fixed;min-width:840px}.week-grid th,.week-grid td{border:1px solid #bbb;padding:10px;vertical-align:top}.week-grid thead th{font:27px Bebas;background:#111;color:white;padding:14px}.week-grid th:first-child{width:95px;font:23px Bebas}.week-grid th small{display:block;font:11px Arial;color:#777;margin-top:5px}.week-grid tbody th{background:#f7f7f7}.week-grid .individual-start td,.week-grid .individual-start th{border-top:3px solid #111}.slot-capacity{font-size:10px;color:#888;text-align:right;margin-bottom:5px}.booking{border:1px solid #ccc;margin-bottom:6px;padding:8px;background:white}.booking-name{border:0;text-align:left;padding:0!important;font-size:19px!important;width:100%;line-height:1.2}.booking-edit{font-size:14px!important;padding:3px 6px!important;margin-top:6px;color:#555}.booking small{display:block;font-size:10px;color:#777}.add-slot{border:1px dashed #aaa;padding:8px 4px;font-size:16px;width:100%}.slot-full{font-size:10px;text-align:center}.full-input{width:100%;padding:12px;border:1px solid #aaa;background:white;font:15px Arial}#group-context{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}#group-context p{margin:0}#group-context button{font-size:18px}@media(prefers-reduced-motion:reduce){.brand{animation:none}}@media(max-width:1100px){#shell-header{flex-wrap:wrap}#main-nav{order:3;flex:0 0 100%;justify-content:flex-start;overflow:auto}#settings-button{margin-left:auto}}
.year-badge{display:block;font-size:11px;color:#555;margin-top:5px}.profile-top{grid-template-columns:1fr auto}.profile-details{grid-column:1;grid-row:2;max-width:600px}.profile-top .metric{grid-column:2;grid-row:1/3}.profile-details button{font-size:18px;padding:8px 13px}.profile-details p{margin-top:10px}

#tutorials{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(460px,96vw)}#tutorials button{font-size:22px;padding:10px 6px}.earnings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin:30px 0}.earning-card{border:1px solid #aaa;padding:24px}.earning-card .metric{font-size:54px;margin:12px 0}.earnings-table{width:100%;border-collapse:collapse;margin:25px 0}.earnings-table th,.earnings-table td{text-align:left;padding:16px;border-bottom:1px solid #ccc}.earnings-table th{font:23px Bebas}.earnings-table td{font-size:15px}

/* Five group pupils stay on one row, with compact, wrapping names. */
.people.group-row{display:grid;grid-template-columns:repeat(var(--group-size),minmax(0,1fr));gap:8px;width:100%;min-width:0}
.people.group-row .group-person{min-width:0;max-width:none;width:100%;padding:11px 10px;font-size:21px;line-height:1.15;overflow-wrap:anywhere}
.people.group-row .group-person .muted{margin-top:6px;font-size:11px;line-height:1.3}
.schedule-row:has(.group-row){padding:13px 0;gap:14px;grid-template-columns:85px minmax(0,1fr)}
.group-slot .booking{padding:6px;margin-bottom:4px;display:grid;grid-template-columns:1fr auto;gap:3px 6px;align-items:center}
.group-slot .booking-name{font-size:17px!important;min-width:0;overflow-wrap:anywhere}
.group-slot .booking-edit{font-size:13px!important;margin:0;padding:3px!important;grid-column:2;grid-row:1/3}
.group-slot .year-badge{font-size:10px;margin:0;padding:2px 5px;justify-self:start}
.group-slot .add-slot{padding:5px;font-size:15px}
[data-grade]{--grade-colour:#aaa;--grade-ink:#111}
.level-tab[data-grade]{border-color:var(--grade-colour);background:var(--grade-colour);color:var(--grade-ink)}
.level-tab[data-grade].selected{outline:2px solid #111;outline-offset:-3px;font-weight:bold}
.student-card[data-grade],.person[data-grade],.booking[data-grade]{border-left:5px solid var(--grade-colour)}
.student-card[data-grade] .progress span{background:var(--grade-colour)}
.tile[data-grade]:not(.complete){border-top:5px solid var(--grade-colour)}
.tile[data-grade]:not(.complete) .art{background:var(--grade-colour);color:var(--grade-ink)}
.tile[data-grade]:not(.complete) .art .big{color:var(--grade-ink)}
.library-row[data-grade]{border-left:5px solid var(--grade-colour);padding-left:15px}
.profile-top[data-grade]{border-bottom:5px solid var(--grade-colour)}
#levels button[data-grade]{border-left:5px solid var(--grade-colour);margin:2px 0}
#levels button[data-grade]:hover,#levels button[data-grade]:focus-visible{background:var(--grade-colour);color:var(--grade-ink)}
@media(max-width:650px){.schedule-row:has(.group-row){grid-template-columns:1fr;gap:8px}.people.group-row{gap:5px}.people.group-row .group-person{padding:9px 5px;font-size:17px}.people.group-row .group-person .muted{font-size:10px}}

/* Match the source schedule: five group places across each weekday cell. */
.week-grid{min-width:1260px}
.slot-bookings{display:block}
.group-slot .slot-bookings{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;align-items:stretch}
.group-slot .booking{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:0;padding:6px 3px;min-width:0;border-left-width:3px}
.group-slot .booking-name{font-size:15px!important;line-height:1.15;overflow-wrap:anywhere;flex:1}
.group-slot .booking-edit{font:15px Arial!important;border:0!important;padding:2px!important;align-self:flex-end;line-height:1;min-height:20px}
.group-slot .year-badge{font-size:9px;padding:2px 1px;margin:0;white-space:normal}
.group-slot .add-slot{margin-top:6px;padding:4px;font-size:14px}
.group-slot .slot-full{margin-top:4px;font-size:9px}
.week-grid td{padding:7px}

.save-status{display:flex;flex-direction:column;gap:3px}.save-status strong{font-size:13px;color:#16753d}.save-status small{color:#666}.booking[draggable=true]{cursor:grab}.booking.dragging{opacity:.4}.week-grid td.drop-target{outline:3px dashed #111;outline-offset:-4px;background:#e9f2fa}.video-ready{font-size:12px;color:#16753d}#save-banner .actions{flex-shrink:0}@media(max-width:650px){#save-banner{align-items:flex-start;flex-direction:column}}
.timetable-tools{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:14px 0 20px;flex-wrap:wrap}.timetable-tools .tabs{margin:0}.lesson-clock{font-size:13px;line-height:1.6;max-width:500px;padding:7px 10px;border-left:3px solid #111}.timetable-search-label{margin:0;display:flex;flex-direction:column;gap:4px;font-size:11px}.timetable-search-label input{margin:0;padding:9px 11px;font-size:13px;width:280px}.week-grid .today-column{background:#f4f7fa}.week-grid thead .today-heading{background:#344350}.week-grid .current-slot{box-shadow:inset 0 0 0 3px #111;background:#fff5d9}.booking.search-match{outline:3px solid #111;outline-offset:1px}.booking.search-dim{opacity:.3}.week-grid td.drop-available{background:#eef9f0}.week-grid td.drop-unavailable{background:#f8ecec}.week-grid td.drop-target{box-shadow:inset 0 0 0 3px #111}.booking{transition:opacity .16s,box-shadow .16s,background-color .16s}.grade-badge{display:inline-block;font:11px Arial;text-transform:none;background:var(--grade-colour);color:var(--grade-ink);padding:3px 6px;border-radius:3px;width:fit-content;max-width:100%}.booking .grade-badge{font-size:9px;padding:2px 4px}.compact-timetable .week-grid{min-width:0;width:100%;font-size:11px}.compact-timetable .week-grid th:first-child{width:65px;font-size:17px}.compact-timetable .week-grid th,.compact-timetable .week-grid td{padding:4px}.compact-timetable .week-grid thead th{font-size:21px;padding:8px 4px}.compact-timetable .week-grid th small{font-size:9px}.compact-timetable .booking{padding:4px 3px;margin-bottom:3px}.compact-timetable .booking-name{font-size:16px!important}.compact-timetable .group-slot .booking-name{font-size:13px!important}.compact-timetable .group-slot .slot-bookings{gap:2px}.compact-timetable .group-slot .booking{padding:4px 2px;gap:2px}.compact-timetable .year-badge{display:none}.compact-timetable .booking-edit{font-size:12px!important;padding:2px!important;margin-top:2px}.compact-timetable .add-slot{padding:3px 2px;font-size:12px}.compact-timetable .slot-capacity{font-size:9px;margin:0 0 2px}.compact-timetable .slot-full{display:none}.compact-timetable .booking .grade-badge{font-size:8px;padding:2px}.next-exercise{display:flex;align-items:center;justify-content:space-between;gap:20px;border-left:5px solid var(--grade-colour,#aaa);padding:20px;background:#f7f7f7;margin:22px 0}.next-exercise .eyebrow{margin-bottom:6px}.next-exercise h3{margin:0}.next-exercise button{font-size:19px;padding:8px 12px}.completed-block{border-top:1px solid #aaa;margin:26px 0;padding-top:16px}.completed-block summary{font:25px Bebas;cursor:pointer;padding:10px 0}.completed-block[open] summary{margin-bottom:16px}#focus-mode{position:fixed;right:18px;bottom:18px;z-index:8;font-size:17px;background:#fff;padding:9px 15px;box-shadow:0 2px 10px #0001}.focus-mode #shell-header,.focus-mode #save-banner{display:none}.focus-mode #workspace{max-width:1200px;padding-top:24px}.focus-mode .profile-details{display:none}#media-tools{grid-column:1/-1;display:flex;align-items:center;gap:15px;flex-wrap:wrap;font:12px Arial}#media-tools label{margin:0;color:#fff;display:flex;align-items:center;gap:7px}#media-tools .seek-label{flex:1;min-width:150px;font-size:0}#video-seek{width:100%;accent-color:white;padding:0;margin:0;background:transparent;cursor:pointer}#video-time{font-variant-numeric:tabular-nums;font-size:12px;min-width:95px}#media-tools select{width:auto;font-size:13px;padding:5px;margin:0;border-color:#777}#media-tools input[type=checkbox]{width:18px;height:18px;padding:0;margin:0;accent-color:white}#controls #toggle{font-size:27px;min-width:105px;padding:10px 18px}#video{max-height:calc(100vh - 150px)}button{transition:background-color .12s,color .12s,border-color .12s}details summary:focus-visible{outline:2px solid #111;outline-offset:3px}@media(max-width:800px){.compact-timetable .week-grid th:first-child{width:45px;font-size:14px}.compact-timetable .group-slot .booking-name{font-size:11px!important}.compact-timetable .booking-name{font-size:13px!important}.compact-timetable .week-grid td{padding:2px}.compact-timetable .group-slot .booking{padding:3px 1px;border-left-width:1px}.compact-timetable .booking-edit{font-size:10px!important}.compact-timetable .booking .grade-badge{font-size:8px}.next-exercise{align-items:flex-start;flex-direction:column}.timetable-search-label input{width:100%}.compact-timetable .week-grid thead th{font-size:17px}#media-tools{gap:10px}#controls #toggle{font-size:23px;min-width:85px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

#shortcuts-button{position:fixed;left:18px;bottom:18px;z-index:8;background:white;font-size:16px;padding:8px 12px;border:1px solid #aaa}#shortcut-help{width:min(640px,92vw)}.shortcut-row{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:16px;padding:9px 0;border-bottom:1px solid #eee;font-size:14px;line-height:1.4}.shortcut-row kbd{font:14px monospace;background:#f4f4f4;border:1px solid #bbb;border-bottom:2px solid #aaa;padding:5px 8px;justify-self:start;white-space:nowrap}.shortcut-switch{display:flex;align-items:center;gap:10px;margin-top:22px}.shortcut-switch input{width:20px;height:20px;margin:0;accent-color:black}.focus-mode #shortcuts-button{display:none}
/* Slim save strip anchored beneath the teaching workspace. */
body{padding-bottom:44px}
#save-banner{position:fixed;inset:auto 0 0;z-index:7;min-height:36px;padding:5px 18px;border-top:1px solid #ddd;gap:12px;flex-direction:row;align-items:center;background:#f3f3f3}
#save-banner .save-status{flex:1;min-width:0;flex-direction:row;align-items:center;gap:12px;white-space:nowrap;overflow:hidden}
#save-banner .save-status strong{font-size:11px;flex-shrink:0}
#save-banner .save-status span{font-size:11px;overflow:hidden;text-overflow:ellipsis}
#save-banner .save-status small{display:none}
#save-banner .actions{gap:6px;flex-wrap:nowrap}
#save-banner button{font-size:14px;padding:3px 9px;white-space:nowrap}
#shortcuts-button,#focus-mode{bottom:54px}
#toast{bottom:54px}
.focus-mode{padding-bottom:0}
.focus-mode #focus-mode,.focus-mode #toast{bottom:18px}
@media(max-width:650px){#save-banner{padding:5px 10px;gap:7px}#save-banner .save-status{gap:6px}#save-banner .save-status span{display:none}#save-banner button{font-size:13px;padding:3px 6px}}

.timetable-overview #workspace{padding:14px 22px 4px;max-width:none}.overview-heading{display:flex;align-items:center;gap:18px;margin-bottom:12px}.overview-heading h1{font-size:36px;margin:0}.overview-heading button{font-size:18px;padding:7px 14px;margin-left:auto}.overview-heading .muted{font-size:12px}.overview-table-wrap{width:100%;overflow:hidden}.overview-grid{width:100%;height:100%;border-collapse:collapse;table-layout:fixed}.overview-grid thead{height:28px}.overview-grid th,.overview-grid td{border:1px solid #ccc;padding:3px;overflow:hidden}.overview-grid thead th{background:#111;color:white;font:21px Bebas}.overview-grid th:first-child{width:64px}.overview-grid tbody th{font:17px Bebas;background:#f5f5f5;white-space:nowrap}.overview-grid .overview-group{height:12%}.overview-grid .overview-individual{height:6%}.overview-grid .individual-start>*{border-top:2px solid #111}.overview-people{display:flex;align-items:stretch;height:100%;min-height:0}.overview-group-people{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}.overview-student{font:clamp(10px,1.1vw,17px) Bebas;text-align:left;border:1px solid #ddd;border-left:3px solid var(--grade-colour,#ccc);padding:3px 4px;min-width:0;max-width:100%;width:100%;overflow-wrap:anywhere;line-height:1.05;background:white;overflow:hidden}.overview-student:hover,.overview-student:focus-visible{background:#111;color:white}.overview-grid .overview-today{background:#eef3f7}.overview-grid thead .overview-today-heading{background:#344350}.overview-grid .overview-now{box-shadow:inset 0 0 0 2px #111;background:#fff5d9}.timetable-overview #shortcuts-button{bottom:45px;left:auto;right:18px;font-size:12px;padding:3px 6px;opacity:.8}@media(max-width:700px){.timetable-overview #workspace{padding:10px 8px 4px}.overview-heading{gap:8px;margin-bottom:8px}.overview-heading h1{font-size:28px}.overview-heading button{font-size:15px;padding:5px 8px}.overview-grid th:first-child{width:42px}.overview-grid tbody th{font-size:13px}.overview-grid thead th{font-size:17px}.overview-grid th,.overview-grid td{padding:2px}.overview-group-people{gap:1px}.overview-student{padding:2px 1px;border-left-width:1px;font-size:10px}.overview-heading .muted{display:none}}
.overview-grid{display:grid;grid-template-rows:28px repeat(4,minmax(0,1.5fr)) repeat(8,minmax(0,1fr));height:100%}.overview-grid thead,.overview-grid tbody{display:contents}.overview-grid tr{display:grid;grid-template-columns:64px repeat(var(--overview-days,4),minmax(0,1fr));height:auto!important;min-height:0}.overview-grid th,.overview-grid td{min-width:0;min-height:0}.overview-grid th:first-child{width:auto}.overview-student{min-height:0}@media(max-width:700px){.overview-grid tr{grid-template-columns:42px repeat(var(--overview-days,4),minmax(0,1fr))}}

.overview-student.year-coloured,.booking.year-coloured{background:var(--year-colour)}.overview-student.year-coloured:hover,.overview-student.year-coloured:focus-visible{background:#111;color:#fff}.booking.year-coloured .booking-name{background:transparent}.year-legend{display:flex;gap:5px;align-items:center;flex-wrap:wrap}.year-legend span{font:11px Arial;padding:4px 7px;border:1px solid #ddd;border-radius:3px;white-space:nowrap}#page-edit-timetable>.year-legend{margin:0 0 15px}.overview-heading .year-legend{margin-left:auto}.overview-heading .year-legend+button{margin-left:0}@media(max-width:750px){.overview-heading .year-legend{display:none}.overview-heading .year-legend+button{margin-left:auto}}

/* Keep the group lesson menu comfortably within a laptop screen. */
body.player-page #workspace{padding-top:8px;padding-bottom:44px}
#page-player #menu{gap:8px}
#page-player .logo{width:min(240px,40vw);margin:0}
#page-player #levels button{min-height:42px;font-size:29px;padding:3px 8px}
#page-player #menu-actions button{padding:7px 14px}
#page-player #status{font-size:12px;line-height:1.35}
#page-player #group-context{margin-bottom:6px}
#page-player #group-context p{margin:4px 0}
@media(max-height:700px) and (min-width:751px){
 #page-player .logo{width:180px}
 #page-player #levels button{min-height:36px;font-size:27px}
 #page-player #menu{gap:5px}
}

.section-completion{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}.section-completion button{font-size:21px;padding:8px 15px}.section-completion button:disabled{color:#167d3e;border-color:#9bc9aa;opacity:1}

.archive-link{display:inline-block;color:#111;text-decoration:none;border:1px solid #aaa;padding:8px 12px;font:19px Bebas;white-space:nowrap}.archive-link:hover{background:#111;color:#fff}.archive-filters{display:flex;gap:12px;flex-wrap:wrap}.archive-filters select{padding:10px;background:#fff;font:14px Arial;border:1px solid #aaa}.archive-table-wrap{overflow:auto}.archive-table{width:100%;border-collapse:collapse;font-size:13px}.archive-table th,.archive-table td{padding:12px;border:1px solid #ddd;text-align:left}.archive-table thead{background:#111;color:#fff}.archive-table th{text-transform:uppercase}.archive-table .archive-section{background:#eee;font:22px Bebas}.archive-table tr:nth-child(even){background:#fafafa}

.archive-song-table thead button{border:0;padding:0;font-size:21px;color:white;text-align:left;width:100%}.archive-song-table thead button:hover{background:#333}.archive-song-table td{vertical-align:middle;padding:10px 12px}.archive-song-name{font:22px Bebas;min-width:190px}.archive-song-table .archive-link{font-size:17px;padding:6px 9px}.archive-song-table td:nth-child(2){min-width:190px}.archive-song-table td:nth-child(3){min-width:130px}.archive-song-table td:nth-child(4){min-width:140px}

.archive-song-table td:nth-child(3),.archive-song-table td:nth-child(4){font-family:Bebas,'Arial Narrow',Arial,sans-serif;font-size:22px}.archive-song-table .archive-difficulty{color:#111}

#page-player #levels{width:min(600px,96vw)}.level-choice{display:grid;grid-template-columns:minmax(0,1fr) 90px;align-items:center;gap:10px}#page-player #levels .level-shuffle{display:block;min-height:34px;font-size:18px;padding:5px 8px;border:1px solid #aaa}.song-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.song-picker-heading h2{font-size:36px}.song-picker-heading button{font-size:20px;padding:7px 12px}#song-picker-grid{display:grid;grid-template-columns:repeat(var(--song-columns,4),minmax(0,1fr));grid-template-rows:repeat(var(--song-rows,8),minmax(0,1fr));gap:6px}#song-picker-grid .song-choice{font-size:clamp(14px,1.5vw,23px);line-height:1.1;min-width:0;min-height:0;padding:5px 7px;overflow:hidden;overflow-wrap:anywhere;border-color:#ccc}#song-picker-status{margin:8px 0}body.song-picker-open #group-context{display:none}body.song-picker-open #workspace{padding-top:12px;padding-bottom:42px}

body.song-picker-open #workspace{display:none}#song-picker{max-width:1440px;margin:auto;padding:12px 22px 42px}

#song-picker-grid .song-choice{padding:3px 5px}

#preview-label{text-align:center;font:12px Arial;padding:8px;background:#f3f3f3}#workspace{padding:10px 22px 40px}body.song-picker-open #workspace{display:none}#menu{gap:8px}#page-player .logo{width:min(280px,40vw)}#song-picker-grid .song-choice{padding:3px 5px}body{padding-bottom:0}#media-tools{display:flex;align-items:center;gap:15px}#media-tools label{margin:0}#media-tools select{margin:0;padding:4px;width:auto}#video-loop{width:auto;margin:0}#video-seek{width:220px;padding:0;margin:0}
.online-nav{display:flex;gap:20px;align-items:center;justify-content:center;padding:12px;border-bottom:1px solid #ddd}.online-nav a{font:21px Bebas;color:#111;text-decoration:none}.online-nav button{font-size:18px;padding:5px 10px}

.online-archive{max-width:1400px;margin:auto;padding:24px 22px 50px}.online-archive h1{font:44px Bebas;margin:0}.online-archive .heading{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}.online-archive .tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.online-archive .tabs .selected,.online-nav [aria-current=page]{background:#111;color:#fff}.online-nav [aria-current=page]{padding:4px 9px}.online-archive .actions{display:flex;flex-wrap:wrap;gap:6px}.online-archive .search{flex:1;min-width:200px;width:auto}.online-nav{flex-wrap:wrap}

.online-archive button{font-family:Bebas,Arial,sans-serif;cursor:pointer}.online-archive [data-archive-sort]{background:transparent;color:#fff;border:0;font-size:22px;padding:0;width:100%;text-align:left}.online-archive [data-archive-sort]:hover{color:#ddd}.online-archive .tabs button{background:#fff;color:#111;border:1px solid #111}.online-archive .tabs button.selected{background:#111;color:#fff}

.online-nav a[href="/"],.online-nav a[href="/archive"]{font-size:30px;padding:8px 18px;border:1px solid #111;line-height:1.1}.online-nav a[href="/"]:hover,.online-nav a[href="/archive"]:hover{background:#111;color:#fff}@media(max-width:600px){.online-nav{gap:8px;padding:8px}.online-nav a[href="/"],.online-nav a[href="/archive"]{font-size:25px;padding:7px 12px}}

#levels [data-grade="Beginner"]{--grade-colour:#a2c4c9}#levels [data-grade="Grade 1"]{--grade-colour:#93c47d}#levels [data-grade="Grade 2"]{--grade-colour:#6aa84f}#levels button[data-grade]{background:var(--grade-colour);color:#111;border-left:5px solid var(--grade-colour)}#levels button[data-grade]:hover,#levels button[data-grade]:focus-visible{background:#111;color:#fff}

.online-nav{display:grid;grid-template-columns:1fr auto auto 1fr;gap:12px;padding:12px 20px}.online-nav a[href="/access"]{grid-column:1;grid-row:1;justify-self:start}.online-nav a[href="/"]{grid-column:2;grid-row:1}.online-nav a[href="/archive"]{grid-column:3;grid-row:1}.online-nav #logout{grid-column:4;grid-row:1;justify-self:end}@media(max-width:650px){.online-nav{grid-template-columns:1fr 1fr;gap:8px;padding:10px}.online-nav a[href="/access"]{grid-column:1;grid-row:1}.online-nav #logout{grid-column:2;grid-row:1}.online-nav a[href="/"]{grid-column:1;grid-row:2;justify-self:end}.online-nav a[href="/archive"]{grid-column:2;grid-row:2;justify-self:start}}

.difficulty-guide{table-layout:fixed}.difficulty-guide th:nth-child(1){width:16%}.difficulty-guide th:nth-child(2){width:17%}.difficulty-guide td{font:20px/1.2 Bebas,'Arial Narrow',Arial,sans-serif;padding:6px 12px;background:var(--difficulty-colour)}.difficulty-guide td:first-child{font-size:23px}.difficulty-guide td:nth-child(2){font-size:23px}.difficulty-guide th{font-family:Bebas,Arial,sans-serif;font-weight:400}@media(max-width:650px){.difficulty-guide{min-width:600px}.difficulty-guide td{font-size:18px;padding:7px 9px}}

.patreon-signin{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;box-sizing:border-box;background:#111;color:#fff;text-decoration:none;padding:20px 24px;border:2px solid #111;font:30px/1.15 Bebas,'Arial Narrow',Arial,sans-serif;transition:background .15s,transform .15s}
.patreon-signin strong{font-weight:400;font-size:38px}
.patreon-signin:hover{background:#333;transform:translateY(-2px)}
.patreon-signin:focus-visible{outline:3px solid #f96854;outline-offset:4px}
.patreon-signin-note{font-size:14px;color:#666;margin:10px 0 0}
.login-divider{display:flex;align-items:center;gap:14px;margin:30px 0 24px;font:20px Bebas,Arial,sans-serif;color:#777}
.login-divider:before,.login-divider:after{content:'';flex:1;height:1px;background:#ddd}
@media(prefers-reduced-motion:reduce){.patreon-signin{transition:none}.patreon-signin:hover{transform:none}}
