/* bl-teach.css - the teacher platform (includes/teachers.php). Theme tokens only, so light and dark both follow
   brainlag.css. One surface per section; inside it, rules and spacing, never a card in a card. */
main.wrap.bt{max-width:1040px;padding-top:28px;padding-bottom:48px}
/* the app views (dashboard, class, admin, student) fill in after the page loads: a screen tall from the first paint,
   so the site footer is never in view while "Loading", the tabs and then the tab's content arrive (it rose into view
   and dropped out twice, CLS 1.07 at 390 and 1.11 at 1440) */
main.wrap.bt.bt-app{min-height:100vh}
.bt h1{margin:0 0 8px;font-weight:600}
.bt h2{font-family:var(--f-body);font-weight:600;font-size:22px;letter-spacing:0;margin:0 0 8px}
.bt h3{font-family:var(--f-body);font-weight:600;font-size:17px;margin:26px 0 10px;padding-top:20px;border-top:1px solid var(--rule)}
.bt p{max-width:68ch;line-height:1.55;color:var(--ink-2);margin:0 0 12px}
.bt a:not(.b){color:var(--study-ink)}   /* a link, not a button: the teal Set up button keeps its white text (it was teal on teal) */
.bt [hidden]{display:none !important}

/* ---------- public page ---------- */
.bt-land h2{margin:40px 0 10px}
.bt-lead{font-size:19px;color:var(--ink) !important}
.bt-cta{margin:20px 0 0 !important}
.bt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 40px;margin:0}
.bt-grid dt,.bt-faq dt{font-weight:700;color:var(--ink);margin:16px 0 4px}
.bt-grid dd,.bt-faq dd{margin:0;color:var(--ink-2);line-height:1.55;max-width:60ch}
.bt-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 40px;margin:0}
.bt-links{display:flex;flex-wrap:wrap;gap:4px 24px;margin:18px 0 0 !important}
.bt-links a,.bt-a{font-weight:700;display:inline-flex;align-items:center;min-height:44px}
.bt-steps{margin:0;padding-inline-start:22px;max-width:70ch}
.bt-steps li,.bt-list li{margin:0 0 10px;line-height:1.55;color:var(--ink-2)}
.bt-list{margin:0;padding-inline-start:20px;max-width:70ch}
.bt-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.bt-soon{font-weight:700;color:var(--ink) !important}
@media (max-width:760px){.bt-grid,.bt-faq,.bt-two{grid-template-columns:1fr}}

/* ---------- app pages ---------- */
.bt-state{color:var(--ink-3)}
.bt-head{margin:0 0 20px}
.bt-sub{color:var(--ink-3) !important;margin:0 !important}
.bt-back{margin:0 0 8px !important}
.bt-back a{font-weight:700;display:inline-flex;align-items:center;min-height:44px}
.bt-back a::before{content:'';width:8px;height:8px;border-inline-start:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-inline-end:10px}
.bt-code{font-family:var(--f-mono);letter-spacing:.06em;color:var(--ink)}
.bt-sec{background:var(--surface);border-radius:var(--r3);box-shadow:var(--shadow);padding:26px 28px;margin:0 0 20px;scroll-margin-top:84px}
.bt-sec:focus{outline:none}
@media (max-width:600px){.bt-sec{padding:20px 16px}}
.bt-big{font:600 20px/1.3 var(--f-body);color:var(--ink) !important}
.bt-note{font-size:14.5px;color:var(--ink-3) !important}
.bt-empty{color:var(--ink-3) !important;margin:6px 0 0 !important}
.bt-foot{margin-top:8px !important}
.bt-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bt-hrow{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;margin:0 0 12px}
.bt-hrow h2{margin:0}

/* tabs: a plain row of links; scrolls sideways inside itself on a phone, never the page */
.bt-tabs{display:flex;gap:4px;overflow-x:auto;margin:0 0 18px;padding:0 0 2px;border-bottom:1px solid var(--rule);scrollbar-width:thin}
.bt-tabs a{flex:none;display:flex;align-items:center;min-height:44px;padding:0 14px;color:var(--ink-2);font-weight:600;text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px}
.bt-tabs a:hover{color:var(--ink)}
.bt-tabs a[aria-current="true"]{background:var(--study-tint);color:var(--study-ink);border-radius:10px}   /* a fill, not a one-sided edge (owner, 12 Oct) */

/* forms */
.bt-form{display:grid;gap:14px;max-width:640px}
.bt-form label > span{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin:0 0 6px}
.bt-form .input,.bt-form .select{width:100%;min-height:48px;box-sizing:border-box;font-size:16px}
.bt-form .b{justify-self:start}
.bt-inline{grid-template-columns:minmax(0,1fr) auto;align-items:end;margin-top:18px}
.bt-row2{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px}
@media (max-width:600px){.bt-inline,.bt-row2{grid-template-columns:1fr}}
.bt-check{display:flex;gap:10px;align-items:flex-start;line-height:1.45;cursor:pointer;color:var(--ink-2)}
.bt-check input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--study)}
.bt-check span{font-weight:400 !important;font-size:15.5px !important;color:var(--ink-2) !important;margin:0 !important}
.bt-codein{font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.bt-msg{min-height:1.4em;margin:0 !important;font-weight:600}
.bt-msg.err{color:var(--warn-ink)}
.bt-msg.ok{color:var(--ok)}
.bt-msg:empty{min-height:0}

/* rows */
.bt-rows{list-style:none;margin:0;padding:0}
.bt-rows > li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule)}
.bt-rows > li:last-child{border-bottom:0}
.bt-rows .t{font-weight:700;color:var(--ink)}
.bt-rows a.t{text-decoration:none}
.bt-rows a.t:hover{text-decoration:underline;text-underline-offset:3px}
.bt-rows .d{display:block;font-size:14px;color:var(--ink-3);margin-top:3px;line-height:1.45}
.bt-rows .d b{color:var(--ink-2);font-weight:600}
.bt-rows .acts{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:flex-end;align-items:center}
.bt-rows .full{grid-column:1 / -1}
.bt-tag{display:inline-block;font-size:12.5px;font-weight:700;color:var(--ink-3);margin-inline-start:8px}
.bt-tag.plus{color:var(--study-ink)}
.bt-od{display:inline-flex;align-items:center;gap:4px;color:var(--gold-ink) !important;font-weight:700}   /* overdue: the gold warning, never red */
.bt-clock{flex:none}
.bt-ask{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:12px 0 0}
.bt-ask p{margin:0;font-weight:600;color:var(--ink)}
.bt-acts{display:flex;flex-wrap:wrap;gap:12px 16px;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--rule)}
.bt-acts > div{display:grid;gap:8px}
.bt-danger{color:var(--ink-2) !important}   /* removing things is neutral: no red (owner, 12 Oct) */

/* results */
.bt-seg{max-width:420px;margin:0 0 14px}
.bt-res details{border-bottom:1px solid var(--rule)}
.bt-res details:last-child{border-bottom:0}
.bt-res summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:14px 0;cursor:pointer;list-style:none}
.bt-res summary::-webkit-details-marker{display:none}
.bt-res summary .t{font-weight:700;color:var(--ink)}
.bt-res summary .d{display:block;font-size:14px;color:var(--ink-3);margin-top:2px}
.bt-res summary::after{content:'';width:8px;height:8px;border-inline-end:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);grid-column:2;grid-row:1;justify-self:end;margin-inline-end:4px}
.bt-res details[open] summary::after{transform:rotate(-135deg)}
.bt-res .sm{display:flex;align-items:center;gap:10px;grid-column:2;grid-row:1;margin-inline-end:26px}
.bt-lines{list-style:none;margin:0 0 12px;padding:0}
.bt-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;align-items:center;padding:10px 14px;margin:0 0 6px;background:var(--sunk);border-radius:12px}
.bt-lines .n{color:var(--ink);font-weight:600}
.bt-lines .s{font-size:14px;color:var(--ink-3);text-align:end}
@media (max-width:600px){.bt-lines li{grid-template-columns:1fr}.bt-lines .s{text-align:start}}

/* RAG as three levels (owner, 12 Oct: no red): Secure teal with a tick, Developing gold with a half circle, Needs work
   deep plum with an up arrow. An icon and a named legend, so it never depends on colour alone. */
.rag{display:inline-flex !important;align-items:center;justify-content:center;box-sizing:border-box;width:26px;height:26px;min-width:26px;padding:0;
  border-radius:6px;font:700 12.5px/1 var(--f-body);font-variant-numeric:tabular-nums;text-align:center;color:#fff;flex:none;vertical-align:middle}
/* contrast (WCAG, checked): light: white on teal #0a7f8a 4.8, #2b1d00 on gold #e9a21a 7.5, white on plum #7a2e5f 8.8
   (plum on the page 8.3); dark: #04161c on #2cc6d1 8.9, on #ffc23d 11.5, #1a0612 on plum #d08bb8 7.5 (on the page 7.0) */
.rag svg{width:16px;height:16px;display:block}
.rag.g{background:#0a7f8a;color:#fff}
.rag.a{background:#e9a21a;color:#2b1d00}
.rag.r{background:#7a2e5f;color:#fff}
:root[data-theme="dark"] .rag.g{background:#2cc6d1;color:#04161c}
:root[data-theme="dark"] .rag.a{background:#ffc23d;color:#04161c}
:root[data-theme="dark"] .rag.r{background:#d08bb8;color:#1a0612}
.rag.n{background:var(--sunk);color:var(--ink-3)}
.bt-key{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 14px;font-size:14px;color:var(--ink-3)}
.bt-key > span{display:inline-flex;align-items:center;gap:8px}
.bt-scroll{overflow-x:auto;margin:0 -4px;padding:0 4px 4px}
.bt-grid-t{border-collapse:collapse;font-size:14.5px;min-width:100%}
.bt-grid-t th,.bt-grid-t td{padding:8px 10px;border-bottom:1px solid var(--rule);text-align:center;vertical-align:middle}
.bt-grid-t th{font-size:13px;color:var(--ink-3);font-weight:700;white-space:nowrap}
.bt-grid-t th:first-child,.bt-grid-t td:first-child{text-align:start;position:sticky;inset-inline-start:0;background:var(--surface);min-width:180px;max-width:280px;white-space:normal;color:var(--ink);font-weight:600}
.bt-grid-t .cnt{font-size:13px;color:var(--ink-3);white-space:nowrap}

/* join sheet preview */
.bt-sheet{max-width:420px;margin:18px 0 0;border-radius:var(--r1);overflow:hidden;box-shadow:var(--shadow);background:#fff}
.bt-sheet svg{display:block;width:100%;height:auto}
.bt-printonly{display:none}
@media print{
  body.bt-printing > *:not(.bt-printhost){display:none !important}
  body.bt-printing .bt-printhost{display:block !important}
  body.bt-printing .bt-printhost svg{width:210mm;height:297mm}
  @page{size:A4;margin:0}
}

/* ---------- live quiz (bl-quiz.js) ----------
   Ours, not a game show: one calm surface, letters for answers (no coloured shapes), the brand teal for what is
   picked and right, Noodle and a friend reacting at their fixed size, a slow bar in place of a countdown. */
.qz-h{font-size:30px}
.qz-radios{border:0;margin:0;padding:0;display:grid;gap:10px}
.qz-radios legend{font-size:13.5px;font-weight:700;color:var(--ink);margin:0 0 8px;padding:0}
.qz-stage{background:var(--surface);border-radius:var(--r3);box-shadow:var(--shadow);padding:24px 28px 28px;margin:0 0 20px}
@media (max-width:600px){.qz-stage{padding:18px 16px 22px}}
.qz-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid var(--rule)}
.qz-topr{display:flex;align-items:center;gap:16px}
.qz-src{margin:0 !important;font-weight:700;color:var(--ink-3) !important}
.qz-mute{font-size:14px}
.qz-lobby{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:center}
@media (max-width:700px){.qz-lobby{grid-template-columns:1fr}}
.qz-code{font:700 clamp(44px,9vw,84px)/1 var(--f-mono);letter-spacing:.08em;color:var(--ink) !important;margin:6px 0 10px !important}
.qz-join{font-size:18px;color:var(--ink) !important}
.qz-count{font-weight:700;color:var(--ink-2) !important;margin:14px 0 !important}
.qz-qr{background:#fff;border-radius:var(--r2);padding:10px;box-shadow:var(--shadow);max-width:260px}
.qz-qr svg{display:block;width:100%;height:auto}
.qz-cast{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:18px 0 0}
.qz-noodle{width:120px;height:120px;flex:none}
.qz-friend{width:110px;height:auto;flex:none}
.qz-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:start}
@media (max-width:860px){.qz-grid{grid-template-columns:1fr}.qz-grid .qz-cast{order:-1;justify-content:flex-start;margin:0}}
.qz-of{font-size:14px;font-weight:700;color:var(--ink-3) !important;margin:0 0 6px !important}
.qz-title{font-weight:700;color:var(--ink-2) !important;margin:0 0 6px !important}
.qz-stem p,.qz-prompt p{color:var(--ink) !important;max-width:70ch}
.qz-prompt{font-size:21px;font-weight:600;line-height:1.4}
.qz-prompt p{margin:0 0 10px}
.qz-choices{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:600px){.qz-choices{grid-template-columns:1fr}}
.qz-choices li{display:flex;align-items:center;gap:12px}
.qz-static li{padding:14px 16px;border:2px solid var(--rule-2);border-radius:var(--r2);font-size:19px;color:var(--ink)}
.qz-choice{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 16px;border:2px solid var(--rule-2);border-radius:var(--r2);background:var(--surface);color:var(--ink);font:600 18px/1.3 var(--f-body);text-align:start;cursor:pointer}
.qz-choice:hover{border-color:var(--blue)}
.qz-choice.on{border-color:var(--study);background:var(--study-tint)}
.qz-choice:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.qz-choice:disabled{opacity:.6;cursor:default}
.qz-let{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:var(--sunk);color:var(--ink);font:700 15px/1 var(--f-body)}
.qz-choice.on .qz-let{background:var(--study);color:#fff}
:root[data-theme="dark"] .qz-choice.on .qz-let{color:#04161c}
.qz-ct{min-width:0}
.qz-time{height:8px;border-radius:8px;background:var(--sunk);overflow:hidden;margin:16px 0 0}
.qz-time span{display:block;height:100%;background:var(--study);transform-origin:left center;opacity:.7}
@media (prefers-reduced-motion:reduce){.qz-time span{transition:none !important}}
.qz-note{min-height:1.4em;font-weight:600;color:var(--ink-2) !important;margin:14px 0 0 !important}
.qz-sub{font-size:16px !important;border-top:0 !important;padding-top:0 !important;margin:20px 0 8px !important}
.qz-dist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.qz-dist li{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(80px,30%) 2.5em;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r1)}
.qz-dist li.ok{background:var(--study-tint)}
.qz-dist li.ok .qz-let{background:var(--study);color:#fff}
:root[data-theme="dark"] .qz-dist li.ok .qz-let{color:#04161c}
.qz-dist li.mine:not(.ok){outline:2px dashed var(--rule-2)}
.qz-tick{color:var(--study-ink);display:inline-flex}
.qz-dist li:not(.ok) .qz-ct + .qz-bar{grid-column:4}
.qz-bar{height:10px;border-radius:10px;background:var(--sunk);overflow:hidden;grid-column:4}
.qz-bar span{display:block;height:100%;background:var(--ink-3);border-radius:10px}
.qz-dist li.ok .qz-bar span{background:var(--study)}
.qz-n{text-align:end;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink-2)}
@media (max-width:600px){.qz-dist li{grid-template-columns:auto minmax(0,1fr) auto 2.5em}.qz-bar{grid-column:2 / 4;grid-row:2}.qz-dist li:not(.ok) .qz-ct + .qz-bar{grid-column:2 / 4}.qz-n{grid-column:4;grid-row:1}}
.qz-sol{margin:18px 0 0;padding:14px 18px;background:var(--study-tint);border-radius:var(--r1)}
.qz-sol h3{margin:0 0 6px !important;padding:0 !important;border:0 !important;font-size:15px !important}
.qz-sol p{margin:0 0 4px !important;line-height:1.5;color:var(--ink) !important}
.qz-say{font-weight:600;color:var(--ink) !important;margin:12px 0 0 !important}
.qz-wait,.qz-res{display:grid;justify-items:center;text-align:center;gap:6px;padding:10px 0}
.qz-big{font:600 22px/1.35 var(--f-body);color:var(--ink) !important;margin:8px 0 !important}
.qz-end h2{margin:0 0 6px}
.qz-board{margin:20px 0 0}
.qz-board h3{font-size:16px !important;border-top:0 !important;padding-top:0 !important;margin:0 0 8px !important}
.qz-names{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-weight:700;font-size:19px;color:var(--ink)}
.qz-teams li{grid-template-columns:minmax(0,1fr) minmax(80px,40%) 3em}
.qz-teams .qz-bar{grid-column:2}
@media (max-width:600px){.qz-teams li{grid-template-columns:minmax(0,1fr) 3em}.qz-teams .qz-bar{grid-column:1 / 3;grid-row:2}.qz-teams .qz-n{grid-column:2;grid-row:1}}
.bt-price{font:600 26px/1.2 var(--f-display);color:var(--ink);margin:4px 0 12px}

/* ---------- the public page, lighter (owner, 9 Oct: "Too much text? Readability") ----------
   Body text 17 px (18 on a phone) at 1.5, lines of about 60 characters; the 3 steps and the free list are rows with a
   number or a drawn icon, a short bold title and one line. */
.bt-land p,.bt-land li,.bt-land dd{font-size:17px;line-height:1.5}
.bt-land p,.bt-land dd,.bt-land .bt-list{max-width:60ch}
.bt-lead{font-size:20px !important;line-height:1.4 !important}
.bt-do,.bt-free{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px 28px;max-width:960px}
.bt-free{max-width:720px}   /* four items: two by two on a wide screen */
.bt-do li,.bt-free li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;margin:0;color:var(--ink-2)}
.bt-do li b,.bt-free li b{display:block;color:var(--ink);font-weight:700;margin:2px 0 2px}
.bt-do .n,.bt-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--study-tint);color:var(--study-ink);font:700 19px var(--f-display)}
.bt-ic svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bt-land h3.bt-uk{border-top:0;padding-top:0;margin:24px 0 10px;font-size:15px;color:var(--ink-3);text-transform:none}
@media (max-width:600px){.bt-land p,.bt-land li,.bt-land dd{font-size:18px}.bt-lead{font-size:21px !important}}

/* the steps as a picture (owner, 12 Oct): numbered circles joined by a line, the name under each */
.bt-steps{list-style:none;margin:14px 0 10px;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.bt-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font:650 15px/1.25 var(--f-display);color:var(--ink)}
.bt-steps li+li::before{content:"";position:absolute;top:23px;right:calc(50% + 30px);width:calc(100% - 52px);height:2px;background:var(--rule-2)}
.bt-steps .n{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--study-tint);color:var(--study-ink);font:700 20px/1 var(--f-display)}
@media (prefers-reduced-motion:no-preference){html:not([data-motion="off"]) .bt-steps .n{animation:btStep .4s cubic-bezier(.22,1,.36,1) both}html:not([data-motion="off"]) .bt-steps li:nth-child(2) .n{animation-delay:.08s}html:not([data-motion="off"]) .bt-steps li:nth-child(3) .n{animation-delay:.16s}html:not([data-motion="off"]) .bt-steps li:nth-child(4) .n{animation-delay:.24s}@keyframes btStep{from{transform:scale(.6);opacity:0}}}
.bt-fold>.bl-fold-b{padding-top:6px}
.bt-rag-h{white-space:nowrap}
.bt-rag-h .rag{width:20px;height:20px;min-width:20px;margin-inline-end:3px}
.bt-rag-h .rag svg{width:13px;height:13px}

/* ---------- the pupil's classes (owner, 12 Oct: digestible, graphics over words, no red) ---------- */
.bt-class{padding:16px}
@media (min-width:601px){.bt-class{padding:24px}}
.bt-chead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 4px}
.bt-chl{min-width:0}
.bt-chl h2{margin:0 0 2px}
.bt-chl .bt-sub{margin:0 0 8px}
/* the plan pill: one line; if it still cannot fit it wraps as a rounded block, never a stretched pill (owner, 12 Oct) */
.bt-seat{display:inline-flex;align-items:center;gap:8px;max-width:100%;box-sizing:border-box;min-height:28px;padding:4px 12px;border-radius:999px;background:var(--study-tint,#dcf3f2);color:var(--ink);font:650 13.5px/1.25 var(--f-body)}
.bt-seat.is-wrap{border-radius:12px}
.bt-class > .bt-seat{margin:0 0 4px}
.bt-seat svg{flex:none;width:15px;height:15px;color:var(--study,#0d9aa7)}
.bt-gh{display:flex;align-items:center;gap:8px;margin:16px 0 8px;font-size:15px;color:var(--ink-2)}
.bt-gh .bt-n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 8px;box-sizing:border-box;border-radius:999px;background:var(--sunk);color:var(--ink-2);font-size:12.5px}
/* Done: folded; the label, the count and the chevron are one 44px row */
.bt-donebox > summary{display:flex;width:100%;min-height:44px;margin:12px 0 0;cursor:pointer;list-style:none;border-radius:12px}
.bt-donebox > summary::-webkit-details-marker{display:none}
.bt-donebox > summary:focus-visible{outline:3px solid var(--study,#0d9aa7);outline-offset:2px}
.bt-chev{width:8px;height:8px;margin-inline-start:6px;border:solid var(--ink-3);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.bt-donebox[open] .bt-chev{transform:rotate(225deg) translateY(-2px)}
.bt-donebox > .bt-cards{margin-top:4px}
/* every piece of work: one plain row, the same for every type (owner, 12 Oct: no boxes, "looks a bit ai generated"):
   the type's bare icon on the title's first line, the title in full, the date as text, the 44px slot on the right;
   rows split by a quiet line */
.bt-cards{display:block;margin:0;padding:0;list-style:none}
.bt-item{display:flex;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--rule) 70%,transparent)}
.bt-item:last-child{border-bottom:0}
.bt-card{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0;min-height:44px;border-radius:10px;color:var(--ink);text-decoration:none}
.bt-card:hover .bt-ct{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.bt-card:focus-visible{outline:3px solid var(--study,#0d9aa7);outline-offset:4px}
.bt-kic{display:block;flex:none;width:24px;height:24px;margin-top:-1px;color:var(--study,#0d9aa7);line-height:0}
.bt-kic svg{width:24px;height:24px}
.bt-kic .tn{fill:currentColor;fill-opacity:.16}
.bt-cb{display:grid;gap:4px;flex:1;min-width:0}
.bt-ct{font:700 16px/1.375 var(--f-body);color:var(--ink);overflow-wrap:break-word;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.bt-cm{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:14px;line-height:1.35;color:var(--ink-3);margin:0}
.bt-due{display:inline-flex;align-items:center;gap:5px}
.bt-due svg{flex:none;width:15px;height:15px;stroke-width:2.2}
.bt-due.is-od{color:var(--gold-ink);font-weight:650}
.bt-due.is-done{color:var(--study-ink,#08707a);font-weight:650}
.bt-note2{font-size:14px;line-height:1.4;color:var(--ink-2)}
/* the rest, a quiet text button */
.bt-showall{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:4px 0 0;padding:0 2px;border:0;background:none;color:var(--study-ink,#08707a);font:700 15px var(--f-body);cursor:pointer}
.bt-showall:hover{text-decoration:underline;text-underline-offset:3px}
.bt-showall:focus-visible{outline:3px solid var(--study,#0d9aa7);outline-offset:2px;border-radius:8px}
.bt-showall .bt-chev{border-color:currentColor}
.bt-showall.is-open .bt-chev{transform:rotate(225deg) translateY(-2px)}
.bt-slot,.bt-done{display:grid;place-items:center;flex:none;width:44px;height:44px}
.bt-go{width:20px;height:20px;color:var(--ink-3)}
[dir="rtl"] .bt-go{transform:scaleX(-1)}
.bt-tickc{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--study,#0d9aa7);color:#fff}
.bt-tickc svg{width:16px;height:16px;stroke-width:2.8}
.bt-ring{width:28px;height:28px}
.bt-ring circle{fill:none;stroke-width:3.2}
.bt-ring .tr{stroke:var(--rule-2)}
.bt-ring .fl{stroke:var(--study,#0d9aa7);stroke-linecap:round}
/* the pupil's own check: an outline circle that fills with a tick when done */
.bt-done{padding:0;border:0;border-radius:50%;background:none;color:var(--ink-3);cursor:pointer}
.bt-done svg{width:28px;height:28px;overflow:visible}
.bt-done circle{fill:none;stroke:currentColor;stroke-width:2;transition:fill .2s,stroke .2s}
.bt-done path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s}
.bt-done:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--study,#0d9aa7)}
.bt-done:focus-visible{outline:3px solid var(--study,#0d9aa7);outline-offset:0}
.bt-done.is-on circle{fill:var(--study,#0d9aa7);stroke:var(--study,#0d9aa7)}
.bt-done.is-on path{opacity:1}
:root[data-theme="dark"] .bt-done.is-on path,:root[data-theme="dark"] .bt-tickc{color:#04161c;stroke:#04161c}
:root[data-theme="dark"] .bt-tickc svg path{stroke:#04161c}
/* the teacher's lists: the same bare type icon on the title's first line */
.bt-rows > li.bt-hasic{grid-template-columns:24px minmax(0,1fr) auto;column-gap:12px;align-items:start}
.bt-rows > li.bt-hasic > .bt-kic{margin-top:0}
.bt-rows > li.bt-hasic > .acts{align-self:center}
.bt-rows > li.bt-hasic > .bt-ask{grid-column:1 / -1}
@media (max-width:600px){.bt-rows > li.bt-hasic{grid-template-columns:24px minmax(0,1fr)}.bt-rows > li.bt-hasic > .acts{grid-column:2;justify-content:flex-start}}
.bt-ti{display:flex;align-items:flex-start;gap:12px;min-width:0}
.bt-ti > div{min-width:0}
/* the ⋯ menu: how the teacher sees you, the email switch, leaving */
.bt-menu-w{position:relative;flex:none}
.bt-more{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--ink-2);cursor:pointer}
.bt-more svg{width:22px;height:22px}
.bt-more:hover{background:var(--sunk)}
.bt-more:focus-visible,.bt-mi:focus-visible,.bt-switch:focus-visible{outline:3px solid var(--study,#0d9aa7);outline-offset:2px}
.bt-menu{position:absolute;z-index:30;top:48px;inset-inline-end:0;display:grid;gap:4px;width:min(300px,86vw);padding:10px;border-radius:16px;background:var(--surface);box-shadow:0 16px 40px rgba(21,54,90,.2)}
.bt-menu[hidden]{display:none}
.bt-mi-info,.bt-mi-sent{margin:4px 6px 6px;font-size:14px;color:var(--ink-3)}
.bt-mi-sent{color:var(--ink-2);font-weight:650}
.bt-mi{min-height:44px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--ink);text-align:start;font:600 15px var(--f-body);cursor:pointer}
.bt-mi:hover{background:var(--sunk)}
.bt-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--ink);text-align:start;font:600 15px var(--f-body);cursor:pointer}
.bt-switch:hover{background:var(--sunk)}
.bt-sw{position:relative;flex:none;width:42px;height:24px;border-radius:999px;background:var(--rule-2);transition:background .2s}
.bt-sw span{position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
.bt-switch[aria-checked="true"] .bt-sw{background:var(--study,#0d9aa7)}
.bt-switch[aria-checked="true"] .bt-sw span{transform:translateX(18px)}
[dir="rtl"] .bt-switch[aria-checked="true"] .bt-sw span{transform:translateX(-18px)}
/* classes left in the last 30 days */
.bt-leftrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.bt-leftrow .b{min-height:44px}
/* the teacher: a request to leave */
.bt-req{display:inline-flex;align-items:center;min-height:24px;margin:0 8px;padding:0 10px;border-radius:999px;background:var(--gold-tint);color:var(--gold-ink);font:700 12.5px/1 var(--f-body)}
.bt-tab-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-inline-start:6px;padding:0 6px;border-radius:999px;background:var(--gold);color:#2b1d00;font:700 12px/1 var(--f-body)}
.bt-tab-n[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.bt-sw,.bt-sw span,.bt-chev,.bt-done circle,.bt-done path{transition:none}}
.bt-find{width:100%;min-height:44px;margin:0 0 10px}
/* the teacher's work list (owner, 12 Oct: never 24 equal rows): one primary Set work beside the heading, plain rows in
   Due soon / Set / Past (folded), each row's Change date and Remove behind its ⋯ */
.bt-ahead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 4px}
.bt-ahead h2{margin:0}
.bt-setw{flex:none;min-height:44px}
.bt-setbox[hidden]{display:none}
.bt-setbox{margin-top:16px;padding-top:16px;border-top:1px solid var(--rule)}
.bt-setbox > h3{margin-top:0}
.bt-alist .bt-gh:first-child{margin-top:8px}
.bt-titem{flex-wrap:wrap}
.bt-titem > .bt-more{flex:none}
.bt-wacts{flex-basis:100%;display:grid;gap:4px;padding:4px 0 0 36px}
.bt-wbtns{display:flex;flex-wrap:wrap;gap:4px 16px}
.bt-wbtns .b{min-height:44px}
.bt-wacts .bt-ask{padding-top:4px}
.bt-cm .bt-tag{margin:0}
.bt-alist .bt-gh,.bt-alist h3.bt-gh{border-top:0;padding-top:0}
/* the class header: the seats on their own quiet line; the tabs scroll with a fade on a clipped edge */
#btSeatsSub{display:block;margin-top:2px;color:var(--ink-3);font-size:14.5px}
#btSeatsSub:empty{display:none}
.bt-tabs{scrollbar-width:none;scroll-behavior:smooth}
.bt-tabs::-webkit-scrollbar{display:none}
.bt-tabs.clip-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
.bt-tabs.clip-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent)}
.bt-tabs.clip-l.clip-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.bt-ahead{justify-content:flex-end}
@media (prefers-reduced-motion:reduce){.bt-tabs{scroll-behavior:auto}}