:root{--bg:#f4f5f7;--card:#fff;--ink:#14161a;--muted:#6b7280;--line:#e3e5ea;--brand:#d50032;--brand-dark:#a80028;--blue:#d50032;--navy:#0a0a0c;--teal:#0f766e;--orange:#c76b14;--red:#d50032;--green:#15803d;--purple:#7c3aed}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--ink)}
button,select{font:inherit}
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.side{background:var(--navy);color:#cfd3da;padding:22px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden}
.brand{margin-bottom:26px}
.brand img{width:100%;max-width:150px;display:block}
.brand-chip{background:#fff;border-radius:9px;padding:10px 12px;margin-bottom:10px}
.brand span{display:block;color:#8a9099;font-size:10px;letter-spacing:.14em;text-transform:uppercase}

.nav{display:grid;gap:6px;align-content:start;overflow-y:auto;flex:1;min-height:0;padding-right:4px;margin-right:-4px}
.nav a{color:#a7adb6;text-decoration:none;padding:10px 12px;border-radius:8px;font-size:14px;cursor:pointer}
.nav a:hover{background:#1c1f25;color:#fff}
.nav a.active{background:var(--brand);color:#fff;font-weight:600}
/* margin:0 auto, not margin:auto. As a grid item, `auto` on all four sides
   centres the page VERTICALLY too, so any view shorter than the screen
   floated to the middle with a gap above it. Invisible on the desktop
   scorecard, which is always long; very visible on a phone. */
.main{padding:26px 32px 50px;max-width:1540px;width:100%;margin:0 auto}
.top{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:18px}
.top h1{margin:0;font-size:28px}
.top p{margin:6px 0 0;color:var(--muted)}
.controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.select{background:white;border:1px solid var(--line);border-radius:9px;padding:9px 34px 9px 11px;color:#263449}
.toggle{display:flex;background:white;border:1px solid var(--line);border-radius:9px;padding:3px}
.toggle button{border:0;background:transparent;padding:7px 13px;border-radius:7px;cursor:pointer}
.toggle button.on{background:var(--brand);color:#fff}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:17px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.card:has(>table){overflow-x:auto}
.kpi{cursor:pointer;transition:.15s}
.kpi:hover{border-color:#adc4e8;transform:translateY(-1px)}
.kpi .lab{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.kpi .val{font-size:29px;font-weight:760;margin:9px 0 3px}
.kpi .sub{font-size:12px;color:var(--muted)}
.section-title{display:flex;justify-content:space-between;align-items:center;margin:25px 0 11px}
.section-title h2{font-size:17px;margin:0}
.section-title span{font-size:12px;color:var(--muted)}
.grid2{display:grid;grid-template-columns:1.7fr 1fr;gap:13px}
.chart{height:285px}
.chart-heading{margin:14px 0 2px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.chart-heading:first-of-type{margin-top:4px}
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-top:7px;flex-wrap:wrap}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}
.mixgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.mixitem{padding:11px;border:1px solid var(--line);border-radius:9px;cursor:pointer}
.mixitem:hover{border-color:#9eb9df}
.mixitem b{font-size:19px;display:block}
.mixitem span{font-size:11px;color:var(--muted)}
.bar{height:6px;background:#e9edf2;border-radius:5px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--brand)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.05em;padding:10px 8px;border-bottom:1px solid var(--line)}
td{padding:12px 8px;border-bottom:1px solid #edf1f5;vertical-align:top}
tbody tr{cursor:pointer}
tbody tr:hover{background:#f8fafc}
.pill{font-size:11px;padding:4px 7px;border-radius:999px;background:#eef4ff;color:#1e4f91;white-space:nowrap}
.good{background:#eaf8ef;color:#176b36}
.bad{background:#fff0ef;color:#a32921}
.neutral{background:#f1f3f6;color:#5f6876}
.note{font-size:11px;color:var(--muted);margin-top:11px}
.empty{padding:30px;text-align:center;color:var(--muted)}
.trial-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.search{border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:220px}
.clickhint{font-size:11px;color:var(--blue)}
.chart-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.mini-kpi{padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:#fbfcfe}
.mini-kpi span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.mini-kpi b{display:block;font-size:22px;margin-top:5px}
.mini-kpi i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:2px}
.risk-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.risk-tab{border:1px solid var(--line);background:white;border-radius:999px;padding:7px 10px;cursor:pointer}
.risk-tab.on{background:var(--brand);color:white}
.support{background:#fff7e8;color:#8a4b08}
.freshness{font-size:11px;color:var(--muted);margin-top:4px}
.freshness.stale{color:var(--red)}
.freshness.save-ok{color:var(--green);font-weight:700;font-size:12px}
.freshness.save-error{color:var(--red);font-weight:700;font-size:12px}
.update-zones{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.update-zone{border:2px dashed var(--line);border-radius:10px;padding:22px;text-align:center;transition:.15s;background:#fbfcfe}
.update-zone.dragover{border-color:var(--blue);background:#eef4ff}
.update-zone.disabled{opacity:.5;pointer-events:none}
.update-zone-label{font-weight:700;font-size:14px}
.update-zone-sub{font-size:12px;color:var(--muted);margin-top:6px}
.linklike{background:none;border:0;color:var(--blue);cursor:pointer;font:inherit;padding:0;text-decoration:underline}
.update-refresh-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.update-refresh-row .update-zone-sub{margin:0}
.update-status{margin-top:12px;padding:10px 12px;border-radius:8px;background:#eef4ff;color:#1e4f91;font-size:13px}
.update-status.error{background:#fff0ef;color:#a32921}
.modal-overlay{position:fixed;inset:0;background:rgba(14,27,47,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal{background:var(--card);border-radius:12px;padding:22px;max-width:440px;width:100%;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.modal h3{margin:0 0 12px;font-size:17px}
.modal p{margin:0 0 10px;font-size:14px;line-height:1.5}
.modal .warning-box{background:#fff7e8;color:#8a4b08;border:1px solid #f0d9a8;border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:10px}
.bsport-notes-box{background:#eef4ff;border:1px solid #cfe0fb;border-radius:8px;padding:12px 14px}
.bsport-notes-box p{color:#1e4f91}
.bsport-notes-box p.empty-note{color:var(--muted);font-style:italic}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}
.btn-primary,.btn-secondary{border-radius:8px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--line)}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn-secondary{background:#fff;color:var(--ink)}
.client-panel{position:fixed;top:0;right:0;height:100vh;width:min(560px,92vw);background:var(--card);box-shadow:-10px 0 30px rgba(0,0,0,.18);transform:translateX(100%);transition:transform .22s ease;z-index:80;overflow-y:auto;padding:24px 26px;border-left:1px solid var(--line)}
.belt-row{display:flex;align-items:center;gap:12px;margin:14px 0 10px}
.belt-visual{width:96px;height:24px;border-radius:4px;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.15);flex:none;background:#e9edf2}
.belt-visual.belt-white{background:#f7f7f2}
.belt-visual.belt-blue{background:#1d4ed8}
.belt-visual.belt-purple{background:#6d28d9}
.belt-visual.belt-brown{background:#5c3a21}
.belt-visual.belt-black{background:#15181d}
.belt-visual .belt-tip{position:absolute;right:0;top:0;bottom:0;width:30px;background:#111}
/* A black belt's tip is red, not black — otherwise the tip is invisible. */
.belt-visual.belt-black .belt-tip{background:#b42318}
.belt-visual .belt-stripe{position:absolute;top:3px;bottom:3px;width:3px;background:#f7f7f2}
.belt-label{font-weight:700;font-size:14px}
.belt-label.belt-none{color:var(--muted);font-weight:500;font-style:italic}
/* min-width, not width — "BL"/"BR"/"BK" need more room than a stripe digit. */
.belt-stamp{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border-radius:4px;font-size:10px;font-weight:800;margin-right:6px;border:1px solid rgba(0,0,0,.15);vertical-align:middle;letter-spacing:.02em}
.belt-stamp.belt-white{background:#f7f7f2;color:#111}
.belt-stamp.belt-blue{background:#1d4ed8;color:#fff}
.belt-stamp.belt-purple{background:#6d28d9;color:#fff}
.belt-stamp.belt-brown{background:#5c3a21;color:#fff}
.belt-stamp.belt-black{background:#15181d;color:#fff}
/* Battery gauge for class health. The nub on the right is what makes it
   read as a battery rather than just another progress bar. */
.battery{position:relative;display:inline-block;width:62px;height:19px;border:2px solid #c3cad4;border-radius:4px;background:#f1f3f6;vertical-align:middle;margin-right:9px}
.battery i{display:block;height:100%;border-radius:2px}
.battery::after{content:'';position:absolute;right:-5px;top:5px;width:3px;height:7px;background:#c3cad4;border-radius:0 2px 2px 0}
/* Class rows aren't people — nothing opens on click, so don't imply it. */
#classHealthRows tr,#demoRows tr{cursor:default}
#classHealthRows td,#demoRows td{vertical-align:middle}
.group-row td{background:#f6f2f3 !important;color:#31415a;font-size:12px;padding:9px 8px;border-bottom:1px solid #d9e0ea}
.group-row td span{color:#5f6876}
.table-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.table-actions .btn-secondary{padding:7px 12px;font-size:12px}
.table-actions-note{font-size:12px;color:var(--muted)}
.status-box{background:#f7f9fc;border:1px solid var(--line);border-radius:10px;padding:13px 14px;margin-top:14px}
.status-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.status-date{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px}
.status-date input{border:1px solid var(--line);border-radius:7px;padding:6px 8px;font:inherit;font-size:12px}
.status-detail{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;margin-top:9px}
.status-expired{color:var(--red);font-weight:600}
.briefing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.briefing-col{min-width:0}
.briefing-head{display:flex;align-items:center;gap:7px;font-size:14px;margin-bottom:3px}
.briefing-hint{font-size:11px;color:var(--muted);margin-bottom:9px;line-height:1.35}
.briefing-item{padding:7px 9px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;cursor:pointer;background:#fbfcfe}
.briefing-item:hover{border-color:#9eb9df;background:#f4f8ff}
.briefing-item b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.briefing-item span{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.briefing-empty{font-size:12px;color:var(--muted);font-style:italic;padding:7px 0}
@media(max-width:1050px){.briefing-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.briefing-grid{grid-template-columns:1fr}}
.client-panel.open{transform:translateX(0)}
.client-panel-header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.client-facts-grid{grid-template-columns:repeat(2,1fr)}
.note-preview{font-size:12px;color:var(--muted);max-width:180px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1050px){.shell{grid-template-columns:minmax(0,1fr)}.side{display:none}.main{padding:20px}.kpis{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.update-zones{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.kpis{grid-template-columns:1fr}.chart-kpis{grid-template-columns:repeat(2,1fr)}.mixgrid{grid-template-columns:1fr}.top{align-items:flex-start;flex-direction:column}.controls{width:100%}.select{max-width:100%}.trial-head{align-items:flex-start;flex-direction:column}.search{width:100%}.update-zones{grid-template-columns:1fr}.client-panel{width:100vw}}
.mail-thread{max-height:300px;overflow-y:auto;border:1px solid var(--line);border-radius:9px;padding:10px;background:#fbfcfe}
.mail-msg{border-left:3px solid #c3cad4;padding:7px 10px;margin-bottom:9px;background:#fff;border-radius:0 7px 7px 0}
.mail-msg.in{border-left-color:var(--blue)}
.mail-msg.out{border-left-color:var(--teal);background:#f6fbfa}
.mail-meta{font-size:11px;color:var(--muted)}
.mail-subject{font-weight:700;font-size:13px;margin:2px 0 4px}
.mail-body{font-size:12.5px;line-height:1.45;white-space:normal;word-break:break-word}
.mail-hints{margin-top:6px}
.mail-empty{font-size:12px;color:var(--muted);font-style:italic;padding:8px 2px}
.mail-compose{margin-top:11px}
.mail-compose textarea{resize:vertical;margin-top:8px}
.summary-box{background:#f2f6fc;border:1px solid #d5e2f5;border-radius:10px;padding:13px 15px;margin-top:14px}
.summary-head{margin:0 0 9px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:#1e4f91}
.summary-head .sum-sub{text-transform:none;letter-spacing:0;font-weight:400}
.sum-row{display:flex;gap:11px;padding:5px 0;border-top:1px solid #e2ebf7;font-size:13px;line-height:1.45}
.sum-row:first-child{border-top:0}
.sum-key{flex:0 0 82px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding-top:2px}
.sum-val{flex:1;min-width:0}
.sum-sub{font-size:11.5px;color:var(--muted)}
/* Three-pane mail workspace: flags | message list | reading pane */
.mw-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.mw-head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mw-grid{display:grid;grid-template-columns:190px 340px 1fr;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);height:calc(100vh - 150px);min-height:460px}
.mw-side{background:#f7f9fc;border-right:1px solid var(--line);overflow-y:auto;padding:10px 8px}
.mw-flag{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px}
.mw-flag:hover{background:#e9eff8}
.mw-flag.on{background:var(--brand);color:#fff}
.mw-flag.on small{color:#c7d6ea}
.mw-flag small{color:var(--muted);font-size:11px}
.mw-list{border-right:1px solid var(--line);overflow-y:auto}
.mw-item{padding:10px 12px;border-bottom:1px solid #edf1f5;cursor:pointer}
.mw-item:hover{background:#f8fafc}
.mw-item.on{background:#eef4ff}
.mw-item .mw-from{font-weight:700;font-size:13px;display:flex;justify-content:space-between;gap:8px}
.mw-item .mw-when{font-weight:400;font-size:11px;color:var(--muted);white-space:nowrap}
.mw-item .mw-subj{font-size:12.5px;margin:2px 0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mw-item .mw-snip{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mw-item .mw-tags{margin-top:5px;display:flex;gap:4px;flex-wrap:wrap}
.mw-unread{border-left:3px solid var(--blue)}
.mw-read{overflow-y:auto;padding:18px 20px}
.mw-read h3{margin:0 0 4px;font-size:17px}
.mw-readmeta{font-size:12px;color:var(--muted);margin-bottom:12px}
.mw-readbody{font-size:13.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;border-top:1px solid var(--line);padding-top:12px}
.mw-empty{color:var(--muted);font-style:italic;padding:24px;text-align:center}
.mw-reply{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
@media(max-width:1200px){.mw-grid{grid-template-columns:160px 1fr;height:auto}.mw-read{grid-column:1/-1;border-top:1px solid var(--line)}}
.mw-secthead{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:10px 10px 4px;font-weight:700}
.cls-grid{display:grid;grid-template-columns:290px 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);height:calc(100vh - 150px);min-height:480px}
.cls-list{border-right:1px solid var(--line);overflow-y:auto;background:#f7f9fc}
.cls-sec{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:11px 12px 5px}
.cls-item{padding:9px 12px;cursor:pointer;border-bottom:1px solid #edf1f5}
.cls-item:hover{background:#e9eff8}
.cls-item.on{background:var(--brand);color:#fff}
.cls-item.on .cls-meta{color:#c7d6ea}
.cls-name{font-size:13px;font-weight:600}
.cls-meta{font-size:11px;color:var(--muted);margin-top:2px;display:flex;justify-content:space-between;gap:8px}
.cls-detail{overflow-y:auto;padding:18px 22px}
.cls-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:14px 0 6px}
.cls-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:8px}
.cls-dow div{text-align:center;font-size:11px;padding:7px 3px;border:1px solid var(--line);border-radius:8px;background:#fbfcfe}
.cls-dow b{display:block;font-size:15px;margin-top:3px}
@media(max-width:1050px){.cls-grid{grid-template-columns:1fr;height:auto}}
.kpi-caret{float:right;color:var(--blue);font-size:11px}
.kpi-open{border-color:#adc4e8;background:#fbfcff}
.kpi-detail{margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
.kpi-row{margin-bottom:7px;font-size:12px}
.kpi-row span{color:var(--muted)}
.kpi-row b{float:right;font-size:12px}
.kpi-row b i{font-style:normal;color:var(--muted);font-weight:400}
.kpi-row .bar{margin-top:4px;clear:both}
/* Per-flag colours — eight flags need eight looks, not three shared pills */
.flag-staff{background:#eceef2;color:#44506a}
.flag-cancel{background:#fdeaea;color:#a32921}
.flag-payment{background:#fff3e0;color:#8a4b08}
.flag-trial{background:#e7f7ee;color:#176b36}
.flag-member{background:#eaf0ff;color:#2447a8}
.flag-signup{background:#e6f6fb;color:#0b6478}
.flag-incident{background:#fbe9f3;color:#8e1857}
.flag-info{background:#f2efe4;color:#6b5f28}
/* Unread */
.mw-is-unread{background:#f5f9ff}
.mw-is-unread .mw-from{font-weight:800}
.mw-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue);margin-right:6px;vertical-align:middle}
.mw-item.on .mw-dot{background:#8fb4ee}
/* Needs attention strip */
.att-box{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:12px 14px;margin-bottom:12px}
.att-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:14px}
.att-strip{display:flex;gap:9px;overflow-x:auto;padding-bottom:3px}
.att-item{flex:0 0 250px;border:1px solid var(--line);border-radius:9px;padding:9px 11px;cursor:pointer;background:#fbfcfe}
.att-item:hover{border-color:#9eb9df;background:#f4f8ff}
.att-top{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.att-top span{font-size:11px;color:var(--muted);white-space:nowrap}
.att-sub{font-size:12px;margin:3px 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-why{display:flex;gap:4px;flex-wrap:wrap}
.att-why .pill{font-size:10px;padding:3px 6px}
.compose-modal{max-width:640px}
.compose-modal .status-detail{margin-top:9px}
.compose-modal textarea{resize:vertical}
.mw-keys{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin:-4px 0 10px}
.mw-keys kbd{font-family:inherit;font-size:10px;background:#eef2f7;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 5px;margin-right:3px}
.mw-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;border-bottom:1px solid var(--line);padding-bottom:10px}
.mw-tab{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 14px;cursor:pointer;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.mw-tab:hover{border-color:#9eb9df}
.mw-tab.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.mw-tab-n{font-size:11px;font-weight:500;color:var(--muted)}
.mw-tab.on .mw-tab-n{color:#a9c0e0}
.mw-tab-un{font-size:10px;font-weight:800;background:var(--blue);color:#fff;border-radius:999px;padding:2px 7px}
.flag-wait{background:#eef0fb;color:#3b3f8f}
.flag-grad{background:#fdf1e0;color:#8a5a08}
.flag-event{background:#f3eafc;color:#6b2fa8}
.flag-absent{background:#eef7f4;color:#0f6b57}
.att-item{position:relative}
.att-x{position:absolute;top:4px;right:5px;border:0;background:transparent;color:#b9c1cc;font-size:17px;line-height:1;cursor:pointer;padding:2px 5px;border-radius:6px}
.att-x:hover{background:#fdeaea;color:var(--red)}
.att-top{padding-right:16px}
.nav-group{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:#6b7280;font-weight:700;padding:14px 12px 5px;margin-top:2px}
.nav-group:first-child{margin-top:0;padding-top:0}
.nav-badge{float:right;background:var(--blue);color:#fff;font-size:10px;font-weight:800;border-radius:999px;padding:1px 7px;min-width:20px;text-align:center}
.nav a.active .nav-badge{background:#fff;color:#172b4d}
.act-bar{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 18px;padding-bottom:13px;border-bottom:2px solid var(--line)}
.act-pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 15px;cursor:pointer;font-size:13px;font-weight:600;color:#3b4a61}
.act-pill:hover{border-color:#9eb9df;background:#f4f8ff}
.act-pill.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.act-pill small{font-weight:500;opacity:.7;margin-left:6px}
.role-chip{background:var(--brand);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:6px 11px;border-radius:999px}
body.hide-money .money-col,body.hide-money .money-only{display:none}
[data-role-hidden]{display:none !important}
.rep-form{margin-bottom:13px}
.rep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.rep-form label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.rep-form label.rep-wide{margin-top:11px}
.rep-form input,.rep-form textarea,.rep-form select{width:100%;margin-top:5px;border:1px solid var(--line);border-radius:8px;padding:10px;font:inherit;font-size:14px;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:400}
.rep-form textarea{resize:vertical}
.rep-mood{font-size:11px;padding:4px 8px;border-radius:999px}
.mood-great{background:#e7f7ee;color:#176b36}.mood-good{background:#eef4ff;color:#1e4f91}
.mood-ok{background:#f1f3f6;color:#5f6876}.mood-poor{background:#fdeaea;color:#a32921}
/* On a phone the form is the whole point — one column, big targets. */
@media(max-width:760px){
  .rep-grid{grid-template-columns:1fr}
  .rep-form input,.rep-form textarea,.rep-form select{font-size:16px;padding:13px}
  .mw-head{flex-direction:column;align-items:flex-start}
  .mw-head-actions{width:100%}
  .mw-head-actions button{flex:1}
}

/* --- Sticky filter bar --------------------------------------------------
   The header block (title + controls + activity bar) stays put while the
   page scrolls, so section/period can be changed from anywhere. It is tall
   at rest, so once you scroll past the title it condenses to just the
   controls — a full-height header pinned to the top would eat a third of a
   laptop screen. The negative margins let it span the full width of .main's
   padding, otherwise content shows through at its edges as it scrolls under. */
.topbar{position:sticky;top:0;z-index:60;background:var(--bg);margin:-26px -32px 0;padding:26px 32px 0;transition:box-shadow .18s ease}
.topbar.stuck{box-shadow:0 6px 16px -8px rgba(16,24,40,.28)}
.topbar.stuck .top{margin-bottom:10px;align-items:center}
.topbar.stuck h1{font-size:19px}
.topbar.stuck #subtitle,.topbar.stuck #freshness{display:none}
.topbar.stuck .act-bar{margin-bottom:10px;padding-bottom:9px}
@media(max-width:1050px){
  .topbar{margin:-20px -20px 0;padding:20px 20px 0}
  /* On a phone the controls stack, so the whole pinned header came to 468px --
     58% of the screen, which is worse than no sticky bar at all. Once stuck,
     keep only the controls that change what you are looking at (section,
     week/month, period, by section/activity) and drop the title, the role
     preview picker and the activity chips: 468px -> 158px, about a fifth of
     the screen. Scrolling back to the top restores all of it. */
  .topbar.stuck .top > div:first-child,
  .topbar.stuck #roleLabel,
  .topbar.stuck #rolePicker,
  .topbar.stuck .act-bar{display:none}
  .topbar.stuck .top{margin-bottom:0}
}

/* --- Class calendar ----------------------------------------------------- */
.cal-summary{display:flex;gap:26px;flex-wrap:wrap;padding:2px 2px 15px;border-bottom:1px solid var(--line);margin-bottom:14px}
.cal-summary div{min-width:0}
.cal-summary span{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cal-summary b{display:block;font-size:20px;margin-top:2px}
.cal-summary i{display:block;font-size:11.5px;color:var(--muted);font-style:normal}
.cal-wrap{overflow-x:auto}
.cal{display:grid;grid-template-columns:repeat(7,minmax(122px,1fr));gap:6px;min-width:880px}
.cal-dow{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:0 3px 4px;font-weight:600}
.cal-day{border:1px solid var(--line);border-radius:9px;background:#fbfcfe;padding:6px;min-height:82px;display:flex;flex-direction:column;gap:4px}
.cal-day.cal-empty{background:transparent;border-style:dashed;opacity:.55}
.cal-day.cal-out{visibility:hidden}
.cal-day.cal-today{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.cal-dnum{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;color:var(--muted)}
.cal-dnum b{font-size:13px;color:var(--ink)}
.cal-dnum em{font-style:normal;font-weight:600;color:var(--ink)}
.cal-cls{border:0;text-align:left;width:100%;font:inherit;cursor:pointer;border-radius:6px;padding:4px 6px;background:#eef1f5;display:block}
.cal-cls:hover{filter:brightness(.95)}
.cal-cls b{display:block;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-cls span{display:block;font-size:10.5px;color:var(--muted)}
.cal-hi{background:#dcf3e4}
.cal-ok{background:#eef1f5}
.cal-lo{background:#fdeacd}
.cal-zero{background:#fadadd}
.cal-dot{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.cal-legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:11.5px;color:var(--muted);margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.cal-legend-note{flex-basis:100%;line-height:1.5}
/* Week view has room to breathe: fewer cells, so show more per class. */
.cal.cal-week{grid-template-columns:repeat(7,minmax(150px,1fr))}
.cal.cal-week .cal-day{min-height:180px}
.cal.cal-week .cal-cls span{font-size:11px}

/* --- Sign-in screen ------------------------------------------------------
   Standalone: login.html loads only this file and login.js, never app.js or
   data.js, so nothing about the dashboard is downloadable before sign-in. */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;background:var(--navy)}
.login-card{background:var(--card);border-radius:14px;padding:30px 30px 22px;width:100%;max-width:390px;box-shadow:0 18px 50px -12px rgba(0,0,0,.5)}
.login-brand{margin-bottom:20px}
.login-brand img{height:34px;width:auto}
.login-card h1{margin:0 0 4px;font-size:21px}
.login-sub{margin:0 0 20px;color:var(--muted);font-size:13.5px}
.login-card label{display:block;font-size:12.5px;font-weight:600;margin-bottom:13px;color:var(--muted)}
.login-card input{display:block;width:100%;box-sizing:border-box;margin-top:5px;padding:10px 12px;font:inherit;font-weight:400;color:var(--ink);border:1px solid var(--line);border-radius:8px;background:#fbfcfe}
.login-card input:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.login-hint{margin:-6px 0 15px;font-size:11.5px;color:var(--muted)}
.login-go{width:100%;padding:11px;font-size:14.5px;border-radius:8px}
.login-error{margin:12px 0 0;font-size:13px;color:var(--brand);min-height:18px}
.login-error:empty{margin:0;min-height:0}
.login-foot{margin:22px 0 0;text-align:center;font-size:11.5px;color:var(--muted)}

/* --- My work + Team ------------------------------------------------------ */
.who-chip{font-size:12px;color:var(--muted);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.home-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.home-head b{font-size:15px}
.task{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line)}
.task:first-child{border-top:0}
.task input[type=checkbox]{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--brand)}
.task-body{flex:1;min-width:0}
.task-body b{display:block;font-size:13.5px;font-weight:600}
.task.done .task-body b{text-decoration:line-through;color:var(--muted)}
.task-body span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.task-tag{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:4px;background:#eef1f5;color:var(--muted);flex:none}
.task-tag.high{background:#fadadd;color:var(--brand)}
.task-tag.late{background:#fdeacd;color:var(--orange)}
.home-sections{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.home-sec{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:14px 16px}
.home-sec b{display:block;font-size:14px;margin-bottom:8px}
.home-sec div{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0;color:var(--muted)}
.home-sec div em{font-style:normal;font-weight:600;color:var(--ink)}
@media(max-width:900px){.home-grid{grid-template-columns:1fr}}

/* --- "Viewing as" banner -------------------------------------------------
   Loud on purpose. A CEO who forgets they are previewing an instructor will
   report numbers as missing when they are simply not that person's to see. */
.preview-bar{position:sticky;top:0;z-index:70;display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;background:var(--orange);color:#fff;padding:9px 16px;font-size:13px;
  margin:-26px -32px 0;border-bottom:1px solid rgba(0,0,0,.15)}
.preview-bar b{font-weight:700}
.preview-bar button{background:#fff;color:var(--orange);border:0;border-radius:7px;padding:6px 13px;
  font:inherit;font-weight:600;cursor:pointer}
.preview-bar button:hover{background:#fff5e8}
body.previewing .topbar{top:39px}
@media(max-width:1050px){.preview-bar{margin:-20px -20px 0}}

/* --- Team page -----------------------------------------------------------
   Rebuilt: the old version put a row of inputs, nine permission tickboxes
   and eight section tickboxes on screen at once for every person, so eight
   staff meant well over a hundred controls competing for attention. Now the
   list is a summary and the controls only appear for the one person you have
   opened. */
.newstaff{margin-bottom:8px}
.newstaff h3{margin:0 0 14px;font-size:16px}
.newstaff-grid{display:grid;grid-template-columns:1.2fr 1.6fr 1.2fr .9fr;gap:12px}
.newstaff-grid label,.newstaff-secs .newstaff-lbl{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
.newstaff-grid input,.newstaff-grid select{width:100%;box-sizing:border-box;margin-top:5px;padding:9px 11px;
  font:inherit;font-size:13.5px;color:var(--ink);border:1px solid var(--line);border-radius:8px;background:#fbfcfe}
.newstaff-grid input:focus,.newstaff-grid select:focus{outline:2px solid var(--brand);outline-offset:-1px}
.newstaff-secs{margin-top:15px}
.chipset{display:flex;gap:7px;flex-wrap:wrap}
.chipset label{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;color:var(--ink);
  background:#f3f5f8;border:1px solid var(--line);padding:5px 11px;border-radius:20px;cursor:pointer}
.chipset label:has(input:checked){background:var(--brand);border-color:var(--brand);color:#fff}
.chipset input{accent-color:#fff;margin:0}
.newstaff-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.newstaff-foot .grow{flex:1}
.inline-check{display:inline-flex;gap:7px;align-items:center;font-size:12.5px;color:var(--muted)}
.inline-check input{accent-color:var(--brand)}
.newstaff-note{margin:10px 0 0;font-size:11.5px;color:var(--muted)}

.stafflist{display:flex;flex-direction:column;gap:9px}
.person{background:var(--card);border:1px solid var(--line);border-radius:11px;overflow:hidden}
.person-head{display:flex;align-items:center;gap:14px;padding:13px 16px;cursor:pointer}
.person-head:hover{background:#fbfcfe}
.person-name{font-weight:600;font-size:14.5px;min-width:170px}
.person-name small{display:block;font-weight:400;font-size:11.5px;color:var(--muted)}
.person-role{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:20px;
  background:#eef1f5;color:var(--muted);font-weight:600;flex:none}
.person-role.ceo{background:var(--brand);color:#fff}
.person-role.manager{background:#e4e9f2;color:#334}
.person-sees{flex:1;font-size:12px;color:var(--muted);min-width:0}
.person-acct{font-size:11.5px;flex:none}
.person-open{font-size:18px;color:var(--muted);flex:none;transition:transform .15s}
.person.open .person-open{transform:rotate(90deg)}
.person-body{display:none;padding:4px 16px 16px;border-top:1px solid var(--line);background:#fbfcfe}
.person.open .person-body{display:block}
.person-body h4{margin:15px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.person-fields{display:grid;grid-template-columns:1.2fr 1.6fr .9fr auto;gap:11px;align-items:end;margin-top:13px}
.person-fields label{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.person-fields input,.person-fields select{width:100%;box-sizing:border-box;margin-top:5px;padding:8px 10px;
  font:inherit;font-size:13px;border:1px solid var(--line);border-radius:7px;background:#fff}
.person-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.person-actions .grow{flex:1}
.danger{background:#fff;color:var(--brand);border:1px solid var(--brand);border-radius:8px;padding:7px 14px;font:inherit;font-size:13px;cursor:pointer}
.danger:hover{background:#fff0f3}
@media(max-width:900px){
  .newstaff-grid,.person-fields{grid-template-columns:1fr}
  .person-head{flex-wrap:wrap}
  .person-sees{flex-basis:100%}
}
.preview-actions{display:flex;gap:8px;flex-wrap:wrap}

/* --- Projects ------------------------------------------------------------
   Progress is counted from the tasks underneath, never stored, so the bar
   cannot disagree with the list below it. */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:22px}
.proj{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:15px 17px}
.proj-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.proj-top b{font-size:14.5px}
.proj-pct{font-size:12px;color:var(--muted);flex:none}
.proj-detail{font-size:12px;color:var(--muted);margin:5px 0 0}
.proj-bar{height:7px;background:#e9edf2;border-radius:5px;overflow:hidden;margin:11px 0 8px}
.proj-bar i{display:block;height:100%;background:var(--teal);border-radius:5px}
.proj-bar i.done{background:var(--green)}
.proj-meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);gap:10px;flex-wrap:wrap}
.proj-tasks{margin-top:11px;border-top:1px solid var(--line);padding-top:8px}
.proj-tasks .task{padding:6px 0}
.proj-tasks .task-body b{font-size:12.5px}
.proj-none{font-size:12px;color:var(--muted);padding:6px 0}

/* --- Filing a class report in place -------------------------------------- */
.rep-row{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--card);overflow:hidden}
.rep-row.open{border-color:var(--brand)}
.rep-row-head{display:flex;align-items:center;gap:14px;padding:11px 14px;cursor:pointer}
.rep-row-head:hover{background:#fbfcfe}
.rep-when{font-size:12.5px;color:var(--muted);min-width:78px;flex:none}
.rep-when small{display:block;font-size:11px}
.rep-what{flex:1;min-width:0}
.rep-what b{display:block;font-size:14px}
.rep-what small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.rep-go{font-size:12.5px;font-weight:600;color:var(--brand);flex:none}
.rep-row-form{padding:4px 14px 15px;border-top:1px solid var(--line);background:#fbfcfe}
.rep-inline{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin:13px 0 4px}
.rep-inline label,.rep-row-form .rep-wide{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:10px}
.rep-inline input,.rep-inline select,.rep-row-form .rep-wide input,.rep-row-form .rep-wide textarea{
  width:100%;box-sizing:border-box;margin-top:5px;padding:8px 10px;font:inherit;font-size:13px;font-weight:400;
  color:var(--ink);border:1px solid var(--line);border-radius:7px;background:#fff}
@media(max-width:760px){.rep-inline{grid-template-columns:1fr}.rep-row-head{flex-wrap:wrap}}

/* --- Asking inside the page ----------------------------------------------
   Replaces confirm()/prompt(). A browser that suppresses repeat dialogs makes
   a native one silently return "no", so the button does nothing at all with
   no error and no clue. This cannot be blocked. */
.inline-ask{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:14px;padding:13px 15px;
  border:1px solid var(--line);border-radius:9px;background:#fff}
.inline-ask.danger-ask{border-color:var(--brand);background:#fff7f8}
.inline-ask b{font-size:13.5px}
.inline-ask label{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--muted);margin:0}
.inline-ask input{padding:8px 11px;font:inherit;font-size:13px;font-weight:400;color:var(--ink);
  border:1px solid var(--line);border-radius:7px;background:#fbfcfe;min-width:220px}
.inline-ask-note{font-size:11.5px;color:var(--muted)}
.inline-ask .btn-primary,.inline-ask .btn-secondary,.inline-ask .danger{margin-left:auto}
.inline-ask .btn-secondary+.danger,.inline-ask .danger+.btn-secondary{margin-left:0}
.viewas-error{font-size:12px;color:var(--brand);font-weight:600}
.viewas-error:empty{display:none}

/* --- Phone: the bottom bar -----------------------------------------------
   The sidebar is hidden below 1050px, which left a phone with no navigation
   at all — you could see a page but not leave it. This is the navigation on
   a phone, and it is hidden again on anything wider. */
.tabbar{display:none}
@media(max-width:1050px){
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--navy);
    border-top:1px solid rgba(255,255,255,.12);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;
    color:#9aa3ad;font-size:10.5px;font-weight:600;text-decoration:none;cursor:pointer;position:relative;
    text-align:center;line-height:1.15}
  .tabbar a b{font-size:19px;font-weight:400;line-height:1}
  .tabbar a.on{color:#fff}
  .tabbar a.on b{color:var(--brand)}
  .tabbar .tb-badge{position:absolute;top:1px;right:calc(50% - 20px);background:var(--brand);color:#fff;
    font-size:9.5px;font-weight:700;min-width:15px;height:15px;border-radius:8px;display:flex;
    align-items:center;justify-content:center;padding:0 4px}
  /* Room for the bar, plus the iPhone home indicator. */
  .main{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  /* Touch targets: 44px is the smallest that is reliably hittable. */
  .rep-row-head,.person-head,.task,.conv{min-height:44px}
  .task input[type=checkbox],.rout input[type=checkbox]{width:24px;height:24px}
}

/* --- Messages ------------------------------------------------------------ */
.chat-grid{display:grid;grid-template-columns:260px 1fr;gap:0;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;background:var(--card);height:calc(100vh - 190px);min-height:420px}
.chat-list{border-right:1px solid var(--line);overflow-y:auto;background:#f7f9fc}
.conv{display:block;width:100%;text-align:left;border:0;background:none;font:inherit;cursor:pointer;
  padding:11px 13px;border-bottom:1px solid var(--line)}
.conv:hover{background:#eef1f5}
.conv.on{background:var(--card);box-shadow:inset 3px 0 0 var(--brand)}
.conv-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.conv-top b{font-size:13.5px}
.conv-top span{font-size:10.5px;color:var(--muted);flex:none}
.conv-last{font-size:11.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-unread{background:var(--brand);color:#fff;font-size:10px;font-weight:700;border-radius:9px;
  padding:1px 6px;margin-left:6px}
.chat-pane{display:flex;flex-direction:column;min-width:0}
.chat-head{padding:11px 15px;border-bottom:1px solid var(--line);font-weight:600;font-size:14px;
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.chat-back{display:none;background:none;border:0;font:inherit;color:var(--brand);font-weight:600;cursor:pointer}
.chat-msgs{flex:1;overflow-y:auto;padding:14px 15px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:74%;padding:8px 12px;border-radius:13px;font-size:13.5px;line-height:1.45;word-wrap:break-word}
.msg.them{background:#eef1f5;align-self:flex-start;border-bottom-left-radius:4px}
.msg.me{background:var(--brand);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg time{display:block;font-size:10px;opacity:.7;margin-top:3px}
.chat-send{display:flex;gap:9px;padding:11px;border-top:1px solid var(--line);background:#fbfcfe}
.chat-send textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  font:inherit;font-size:14px;min-height:42px;max-height:110px}
.chat-empty{margin:auto;color:var(--muted);font-size:13px;padding:30px;text-align:center}
@media(max-width:1050px){
  .chat-grid{grid-template-columns:1fr;height:calc(100vh - 210px)}
  .chat-list.hide-mobile{display:none}
  .chat-pane.hide-mobile{display:none}
  .chat-back{display:block}
  .msg{max-width:86%}
}

/* --- Repeating checklists ------------------------------------------------ */
.rout{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.rout:first-child{border-top:0}
.rout input[type=checkbox]{margin-top:2px;width:19px;height:19px;flex:none;accent-color:var(--brand)}
.rout-body{flex:1;min-width:0}
.rout-body b{display:block;font-size:13.5px;font-weight:600}
.rout.done .rout-body b{text-decoration:line-through;color:var(--muted)}
.rout-body span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.rout-tag{font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:4px;
  background:#eef1f5;color:var(--muted);flex:none;font-weight:600}
.rout-tag.monthly{background:#e8e2f7;color:var(--purple)}
.rout-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.rout-who{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.rout-who span{font-size:11px;padding:2px 8px;border-radius:20px;background:#f3f5f8;color:var(--muted)}
.rout-who span.yes{background:#dcf3e4;color:var(--green);font-weight:600}

/* --- Phone: only the scorecard needs the scorecard controls --------------- */
@media(max-width:1050px){
  body:not(.on-scorecard) .topbar .controls,
  body:not(.on-scorecard) .act-bar,
  body:not(.on-scorecard) .topbar .top p,
  body:not(.on-scorecard) #homeClose,
  body:not(.on-scorecard) #todoClose,
  body:not(.on-scorecard) #chatClose,
  body:not(.on-scorecard) #staffClose,
  body:not(.on-scorecard) #repClose{display:none}
  /* The page title is the view's own heading on those pages, so the big
     scorecard h1 above it is saying the same thing twice. */
  body:not(.on-scorecard) .topbar .top h1{display:none}
  body:not(.on-scorecard) .topbar{margin-bottom:0;padding-bottom:0}
  .mw-head{flex-wrap:wrap;gap:8px}
}

/* --- Class reports: grouped by day, filed ones stay visible ---------------- */
.rep-group{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:700;margin:14px 0 7px}
.rep-group:first-child{margin-top:2px}
.rep-row.filed{background:#fbfcfe;border-color:var(--line)}
.rep-row.filed .rep-what b{color:var(--muted)}
.rep-row.filed .rep-go{color:var(--muted)}
.rep-filed-note{margin:12px 0 0;font-size:11.5px;color:var(--muted);background:#eef1f5;
  padding:9px 11px;border-radius:8px;line-height:1.5}
/* Numbers are desktop work. The phone app is the day's jobs only. */
@media(max-width:1050px){.desktop-only{display:none}}
.person-role.assistant{background:#e2eef2;color:#2b6472}
.row-status{font-size:12.5px;font-weight:600;margin-right:4px}
.row-status.good{color:var(--green)}
.row-status.bad{color:var(--brand)}

/* --- Picking classes ------------------------------------------------------
   A section is only a shortcut for ticking its classes; what is stored is the
   list of classes. */
.clspick{display:flex;flex-direction:column;gap:11px}
.clspick-sec{border-left:2px solid var(--line);padding-left:11px}
.clspick-all{display:inline-flex;gap:6px;align-items:center;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px;cursor:pointer}
.clspick-all.on{color:var(--brand)}
.clspick-all.part{color:var(--orange)}
.clspick-all input{accent-color:var(--brand)}
.rep-go.filled{color:var(--green)}

/* --- Questions that answer themselves ------------------------------------
   Closed, showing the answer already given. Opened only if there is
   something to say, so filing a report is three taps when nothing happened. */
.ask{display:block;margin-top:13px}
.ask-q{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
.rep-form .ask-q{font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.ask-no{display:block;width:100%;text-align:left;background:#f3f5f8;border:1px dashed var(--line);
  border-radius:8px;padding:11px 13px;font:inherit;font-size:13.5px;color:var(--muted);cursor:pointer}
.ask-no:hover{background:#eef1f5;border-color:var(--muted)}
.ask textarea{width:100%;box-sizing:border-box;border:1px solid var(--brand);border-radius:8px;
  padding:10px 12px;font:inherit;font-size:14px;resize:vertical}

/* --- Group conversations -------------------------------------------------- */
.conv-group b::before{content:'◍ ';color:var(--brand);font-weight:400}
.conv-members{display:block;font-size:10.5px;color:var(--muted);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-who{display:block;font-size:10.5px;font-weight:700;opacity:.75;margin-bottom:2px}
.chat-head span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- The traffic light on a class report ---------------------------------
   Grey: not yet happened. Green: today, due now. Red: earlier in the week
   and still not written. Filed goes quiet — once done, when it happened
   stops mattering. */
.rep-row.st-today{border-color:var(--green);background:#f6fdf8}
.rep-row.st-today .rep-go{color:var(--green)}
.rep-row.st-overdue{border-color:var(--brand);background:#fffafb}
.rep-row.st-overdue .rep-go{color:var(--brand)}
.rep-row.st-filed{background:#fbfcfe}
.rep-row.st-filed .rep-what b,.rep-row.st-filed .rep-go{color:var(--muted)}
.rep-row.st-future{background:#f6f7f9;border-style:dashed;opacity:.7}
.rep-row.st-future .rep-row-head{cursor:default}
.rep-row.st-future .rep-row-head:hover{background:transparent}
.rep-row.st-future .rep-go{color:var(--muted);font-weight:400}
body.not-ceo .ceo-only{display:none}

/* --- "Add to Home Screen" prompt ----------------------------------------
   Shown once, on a phone, to somebody who has not installed it. Sits at the
   bottom above the tab bar so it does not cover what they came to look at. */
.install-bar{position:fixed;left:8px;right:8px;bottom:calc(78px + env(safe-area-inset-bottom));
  z-index:95;background:var(--navy);color:#fff;border-radius:12px;padding:13px 15px;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.install-bar b{color:#fff}
.install-actions{display:flex;gap:10px;align-items:center}
.install-actions .btn-primary{flex:1;padding:9px}
.install-actions .linklike{color:#9aa3ad}
@media(min-width:1051px){.install-bar{display:none !important}}

/* --- Class planning ----------------------------------------------------
   A month of classes, grouped by day. The colour on the left edge is the
   whole status at a glance: green done, red not done and the month has
   started, grey still to come. */
.plan-sum { display:flex; flex-direction:column; gap:10px; }
.plan-bar { height:8px; border-radius:99px; background:var(--line); overflow:hidden; }
.plan-bar i { display:block; height:100%; background:#28a745; transition:width .3s; }
.plan-sum-nums { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; }
.plan-pill { padding:2px 9px; border-radius:99px; font-size:12px; font-weight:600; }
.plan-red { background:#8b1e2b; color:#fff; }
.plan-green { background:#1e6b32; color:#fff; }
.plan-grey { background:var(--line); color:var(--muted); }

.plan-day { margin-bottom:18px; }
.plan-day h4 { margin:0 0 8px; font-size:14px; color:var(--muted); font-weight:600; }

.plan-row {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr) auto;
  gap:8px; align-items:center;
  padding:8px 10px; margin-bottom:6px;
  border-radius:8px; border-left:4px solid var(--line);
  background:var(--card);
}
.plan-ok { border-left-color:#28a745; }
.plan-bad { border-left-color:#d92d3f; }
.plan-wait { border-left-color:var(--line); }

.plan-when { display:flex; align-items:baseline; gap:8px; min-width:0; }
.plan-when b { font-variant-numeric:tabular-nums; }
.plan-when span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plan-proj {
  font-style:normal; font-size:11px; padding:1px 6px; border-radius:99px;
  background:var(--line); color:var(--muted); flex:none;
}
.plan-tech { min-width:0; }
.plan-err { grid-column:1/-1; color:#8b1e2b; font-size:13px; }

/* On a narrow screen the five columns stack rather than squeeze. Planning is
   desktop work, but a manager checking on a tablet should still be able to
   read it. */
@media (max-width:900px) {
  .plan-row { grid-template-columns:1fr 1fr; }
  .plan-when { grid-column:1/-1; }
  .plan-tech { grid-column:1/-1; }
}

/* The planning month grid. Monday-first, because a gym timetable reads that
   way and a Sunday-first month splits the weekend across both edges. */
.cal-grid {
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px; margin-bottom:14px;
}
.cal-head {
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); text-align:center; padding-bottom:2px;
}
.cal-cell {
  min-height:96px; border-radius:8px; padding:5px 6px;
  background:var(--card); border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:stretch;
  cursor:pointer; transition:border-color .12s;
}
.cal-cell:hover { border-color:var(--muted); }
.cal-cell b { font-size:13px; font-variant-numeric:tabular-nums; }
.cal-empty { background:none; border:none; cursor:default; }
.cal-empty:hover { transform:none; }
.cal-count { font-size:11px; font-weight:600; opacity:.85; font-variant-numeric:tabular-nums; }

/* A day is coloured by its WORST class: one unplanned class in an otherwise
   finished day still needs doing, and averaging would hide it. */
.cal-ok   { background:#e8f6ec; border-color:#28a745; }
.cal-bad  { background:#fdeaec; border-color:#d92d3f; }
.cal-wait { background:var(--card); border-color:var(--line); }
.cal-none { opacity:.45; cursor:default; }
.cal-none:hover { transform:none; border-color:var(--line); }
.cal-on { outline:2px solid #fff; outline-offset:1px; }
.cal-cell:focus-visible { outline:2px solid #fff; outline-offset:1px; }

@media (max-width:700px) {
  .cal-cell { min-height:74px; padding:4px 4px; }
  .cal-cell b { font-size:12px; }
  .cal-count { font-size:10px; }
}

/* Roles are a set, not a choice. Checkboxes rather than a dropdown, because
   one person is often an instructor, an assistant and a manager at once. */
.role-pick { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-bottom:9px; }
.role-pick-label { font-size:12px; color:var(--muted); font-weight:600; }
.person-roles { display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
.person-roles .person-role { font-size:11px; }


/* A quiet scrollbar for the sidebar. The default light one is jarring on the
   navy, and on Windows it is wide enough to crowd the labels. */
.nav::-webkit-scrollbar { width:8px; }
.nav::-webkit-scrollbar-track { background:transparent; }
.nav::-webkit-scrollbar-thumb { background:#2b313a; border-radius:99px; }
.nav::-webkit-scrollbar-thumb:hover { background:#3a424e; }
.nav { scrollbar-width:thin; scrollbar-color:#2b313a transparent; }

/* The brand must not be squeezed by the scrolling list next to it. */
.side > .brand { flex:none; }

/* Assistants are a list — a busy kids' class often has two or three. Chips
   that can be removed, plus a picker that adds one more. */
.plan-assists { display:flex; flex-wrap:wrap; gap:4px; align-items:center; min-width:0; }
.plan-assists .chip {
  display:inline-flex; align-items:center; gap:3px;
  background:var(--line); border-radius:99px;
  padding:2px 4px 2px 9px; font-size:12px; white-space:nowrap;
}
.chip-x {
  background:none; border:none; color:var(--muted);
  cursor:pointer; font-size:15px; line-height:1; padding:0 3px;
}
.chip-x:hover { color:var(--red); }
.plan-add-assist { min-width:104px; flex:1; }
/* Nobody has answered yet — the picker should look like it wants a decision. */
.plan-assists[data-answered="0"] .plan-add-assist { border-color:var(--orange); }

/* Why a send failed, under the box it was typed in. */
.chat-error {
  margin:0 12px 6px; padding:7px 10px; border-radius:7px;
  background:#fdeaec; border:1px solid #f3b6bd; color:#8b1e2b; font-size:13px;
}

/* Why the page you opened is empty, and what to change to fill it. */
.sc-notice { padding:16px 18px; font-size:14px; color:var(--muted); line-height:1.5; }
.sc-notice b { color:var(--ink); }

/* --- Messenger behaviour ------------------------------------------------
   A conversation with something waiting should be obvious at a glance,
   without reading a word of it. */
.conv-bottom { display:flex; align-items:center; gap:8px; }
.conv-bottom .conv-last { flex:1; min-width:0; }

.conv-new .conv-top b { font-weight:800; }
.conv-new .conv-last { color:var(--ink); font-weight:600; }
.conv-new .conv-when { color:var(--brand); font-weight:700; }
.conv-unread {
  flex:none; min-width:18px; height:18px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand); color:#fff; font-size:10.5px; font-weight:800;
  border-radius:9px;
}

/* The date a run of messages belongs to, once, instead of on every bubble. */
.msg-day { text-align:center; margin:12px 0 8px; }
.msg-day span {
  display:inline-block; padding:2px 10px; border-radius:99px;
  background:var(--line); color:var(--muted);
  font-size:11px; font-weight:600;
}

/* Sent / read, on your own messages. */
.msg time .tick { font-style:normal; margin-left:5px; letter-spacing:-1px; }
.msg time .tick.seen { color:#4aa3ff; }

/* Notification setup, in the Messages pane. */
.push-row {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 14px; margin:0 0 10px;
  border:1px solid var(--line); border-radius:9px;
  background:var(--card);
  font-size:12.5px; color:var(--muted);
}
/* On a phone this is the whole point of the feature, so it gets the width
   and does not compete with the conversation list for attention. */
@media (max-width:1050px) {
  .push-row { margin:0 0 12px; }
  .push-row .push-text { flex:1 1 100%; }
}
.push-row .push-text { flex:1; min-width:0; }
.push-row:empty { display:none; }

/* My calendar */
/* A month square shows what is on it, not a code to decipher. Taller cells,
   real entries, and "+N more" when a day is busy. */
.cal-today { outline:2px solid var(--brand); outline-offset:-2px; }
.cal-num { font-size:12px; color:var(--muted); margin-bottom:3px; }
.cal-today .cal-num { color:var(--brand); font-weight:800; }

.cal-chip {
  display:block; font-size:10.5px; line-height:1.35;
  padding:2px 5px; margin-bottom:2px; border-radius:4px;
  background:var(--bg); border-left:3px solid var(--line);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cal-chip b { font-variant-numeric:tabular-nums; font-weight:700; }
.chip-mine { border-left-color:var(--green); background:#eef8f1; }
.chip-gap  { border-left-color:var(--red); }
.chip-task { border-left-color:var(--orange); background:#fdf4e8; }
.cal-more { font-size:10px; color:var(--muted); padding-left:5px; }
.cal-sep { width:1px; height:20px; background:var(--line); margin:0 2px; }

.cal-daylist { margin-bottom:16px; }
.cal-daylist h4 { margin:0 0 6px; font-size:13px; color:var(--muted); }
.cal-daylist.is-today h4 { color:var(--ink); }
.today-chip { background:var(--brand); color:#fff; border-radius:99px; padding:1px 7px; font-size:10px; }

.cal-entry {
  display:flex; align-items:center; gap:10px; padding:8px 10px; margin-bottom:5px;
  border-radius:8px; background:var(--card);
  border-left:3px solid var(--line); font-size:13px;
}
.cal-entry.is-mine { border-left-color:#28a745; }
.cal-entry.no-plan { border-left-color:#d92d3f; }
.cal-entry-task { border-left-color:#e0a63c; }
.cal-entry b { font-variant-numeric:tabular-nums; flex:none; min-width:42px; }
.cal-entry-main { flex:1; min-width:0; }
.cal-entry-main i { display:block; font-style:normal; font-size:11.5px; color:var(--muted); }
.cal-tag { flex:none; font-size:10px; font-weight:700; padding:1px 7px; border-radius:99px;
           background:#1e6b32; color:#fff; }
.cal-tag-gap { background:#8b1e2b; }

/* Team workload */
.wl-row { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) auto;
          gap:12px; align-items:center; padding:9px 12px; margin-bottom:6px;
          border-radius:8px; background:var(--card); }
.wl-name b { font-size:13.5px; }
.wl-name span { display:block; font-size:11px; color:var(--muted); }
.wl-warn { font-style:normal; font-size:10px; font-weight:700; color:var(--red); margin-left:6px; }
.wl-stranger { border:1px solid #8b1e2b; }
.wl-bar { height:9px; border-radius:99px; background:var(--line); overflow:hidden; }
.wl-bar i { display:block; height:100%; background:var(--brand); }
.wl-nums { text-align:right; }
.wl-nums b { font-size:14px; font-variant-numeric:tabular-nums; }
.wl-nums span { display:block; font-size:11px; color:var(--muted); }

@media (max-width:700px) {
  .wl-row { grid-template-columns:1fr auto; }
  .wl-bar { grid-column:1/-1; }
}

/* The month/week switch and month arrows wrapped awkwardly on a phone --
   the "next" arrow landed on a row of its own. Keep them on one line. */
@media (max-width:1050px) {
  #calWorkspace .mw-head-actions { display:flex; flex-wrap:nowrap; gap:6px; align-items:center; }
  #calWorkspace .mw-head-actions .btn-secondary { padding:6px 10px; }
  #myCalLabel { flex:1; text-align:center; font-size:12px; }
}

/* --- A class, opened ----------------------------------------------------
   A sheet rather than a page: you are looking at one class inside the
   calendar, and coming back to the calendar should not be a navigation. */
.sheet {
  position:fixed; inset:0; z-index:60;
  background:rgba(0,0,0,.55);
  display:flex; align-items:flex-end; justify-content:center;
  padding:0;
}
@media (min-width:700px) { .sheet { align-items:center; padding:24px; } }

.sheet-card {
  background:var(--card); border:1px solid var(--line);
  border-radius:14px 14px 0 0; width:100%; max-width:620px;
  max-height:88vh; overflow-y:auto; padding:16px 18px 22px;
}
@media (min-width:700px) { .sheet-card { border-radius:14px; } }

.sheet-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
              margin-bottom:14px; }
.sheet-head h3 { margin:0 0 2px; font-size:17px; }

.cs-block { padding:12px 0; border-top:1px solid var(--line); }
.cs-block:first-child { border-top:0; padding-top:0; }
.cs-block h5 { margin:0 0 8px; font-size:11px; text-transform:uppercase;
               letter-spacing:.07em; color:var(--muted); font-weight:700; }
.cs-block p { margin:0 0 6px; font-size:13.5px; line-height:1.5; }
.cs-none { color:var(--muted); font-style:italic; }
.cs-count { background:var(--line); border-radius:99px; padding:1px 7px;
            font-size:10px; margin-left:4px; }

.cs-people { display:flex; gap:22px; flex-wrap:wrap; }
.cs-role { font-size:14px; }
.cs-role i { display:block; font-style:normal; font-size:11px;
             color:var(--muted); margin-bottom:2px; }

.cs-nums { display:flex; gap:26px; }
.cs-nums span { font-size:11.5px; color:var(--muted); }
.cs-nums b { display:block; font-size:20px; color:var(--ink);
             font-variant-numeric:tabular-nums; }

.cs-register { display:flex; flex-wrap:wrap; gap:5px; }
.cs-att { font-size:12px; padding:3px 9px; border-radius:99px;
          background:var(--line); white-space:nowrap;
          border:0; font-family:inherit; cursor:pointer; color:inherit; }
.cs-att:hover { box-shadow:0 0 0 2px var(--ink); }
.cs-att.came { background:#e8f6ec; color:#14532d; }
.cs-att.missed { opacity:.55; }
.cs-att i { font-style:normal; font-size:10px; margin-left:5px; color:#e0a63c; }

.cs-grades { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:8px; }
.cs-grades span { font-size:11.5px; color:var(--muted); }
.cs-grades b { display:block; font-size:14px; color:var(--ink); text-transform:capitalize; }
.cs-issue { color:#8b1e2b; }
.cs-filed { font-size:11px; color:var(--muted); margin-top:8px; }

.cal-entry-open { cursor:pointer; }
.cal-entry-open:hover { background:var(--line); }

/* Trials stand out from members — a class with four people trying it is a
   different class from one with none. */
.cs-trial b { color:var(--orange); }
.cs-att i.is-trial { color:var(--orange); }
.cs-report-btn { margin-top:10px; }
.freshness.warn { color:#8b1e2b; }

/* Trials stand out from members. */
.cs-trial b { color:var(--orange); }
.cs-att i.is-trial { color:var(--orange); }
.cs-report-btn { margin-top:10px; }
.freshness.warn { color:#8b1e2b; }

/* --- Tags ---------------------------------------------------------------
   Your own labels on members. A tag with people on it is a list. */
.tag-bar { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0 4px; }
.tag {
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid transparent; border-radius:99px;
  padding:3px 10px; font-size:11.5px; font-weight:600;
  cursor:pointer; background:var(--bg); color:var(--ink);
}
.tag i { font-style:normal; font-size:10px; opacity:.75; }
.tag-mini { padding:1px 7px; font-size:10px; margin-left:6px; cursor:default; font-weight:700; }

.tag-red    { background:#fdeaec; border-color:#f3b6bd; color:#8b1e2b; }
.tag-orange { background:#fdf4e8; border-color:#f0d5a8; color:#8a5a12; }
.tag-green  { background:#e8f6ec; border-color:#a8dcb8; color:#14532d; }
.tag-teal   { background:#e6f4f3; border-color:#a3d5d1; color:#0f766e; }
.tag-blue   { background:#e8eefb; border-color:#b3c6ef; color:#1e40af; }
.tag-purple { background:#f1eafd; border-color:#cdb6f3; color:#5b21b6; }
.tag-grey   { background:var(--bg); border-color:var(--line); color:var(--muted); }

.tag.on { box-shadow:0 0 0 2px var(--ink); }
.tag.off { opacity:.45; }
.tag.off:hover { opacity:.8; }

.client-tags { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }

.tag-form { display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap; }
.tag-form input { padding:4px 8px; font-size:12px; }
.tag-err { color:#8b1e2b; font-size:11.5px; }

/* Media attached to a class — drilling footage, a technique breakdown. */
.cs-media { display:grid; gap:12px; margin-bottom:10px; }
.cs-embed { margin:0; }
.cs-embed iframe {
  width:100%; aspect-ratio:16/9; border:0; border-radius:9px;
  background:#000; display:block;
}
.cs-embed figcaption {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:12px; color:var(--muted); padding-top:5px;
}
.cs-link { display:flex; justify-content:space-between; align-items:center; gap:10px;
           padding:8px 10px; border-radius:8px; background:var(--bg); font-size:13px; }
.cs-link a { color:var(--brand); word-break:break-all; }

.cs-media-add { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.cs-media-add input { padding:6px 9px; font-size:12.5px; flex:1; min-width:150px; }
.cs-media-add input#csMediaTitle { flex:0 1 130px; }
.cs-media-err { color:#8b1e2b; font-size:11.5px; flex-basis:100%; }

/* Staff cost */
.pay-warn { padding:12px 14px; font-size:13px; background:#fdf4e8;
            border:1px solid #f0d5a8; color:#8a5a12; margin-bottom:12px; }
.pay-table { width:100%; }
.pay-table th { text-align:left; font-size:11px; text-transform:uppercase;
                letter-spacing:.06em; color:var(--muted); }
.pay-table td { font-size:13px; }
.pay-gap { font-size:11px; color:var(--orange); }
.pay-norate td { opacity:.7; }

/* Confirming your own hours */
.cs-confirm.is-done { border-left:3px solid var(--green); padding-left:10px; }
.cs-confirm-note { font-size:12px; color:var(--muted); margin-left:8px; }
.pay-rates span { display:block; font-size:11.5px; white-space:nowrap; }
.pay-split { font-size:11px; color:var(--muted); }
.pay-note { padding:12px 14px; font-size:13px; background:var(--bg);
            border:1px solid var(--line); color:var(--muted); margin-bottom:12px; }
.pay-rates b { font-weight:700; }

/* --- Week view ----------------------------------------------------------
   Seven day tabs, then the chosen day in full. Modelled on Bsport's own week
   view, which is the layout people already read. */
.wk-days {
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px;
  margin-bottom:14px;
}
.wk-day {
  border:1px solid var(--line); background:var(--card); border-radius:9px;
  padding:7px 2px 5px; cursor:pointer; font:inherit; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:1px;
  transition:border-color .12s;
}
.wk-day i { font-style:normal; font-size:10px; color:var(--muted); text-transform:uppercase; }
.wk-day b { font-size:16px; font-variant-numeric:tabular-nums; }
.wk-day span { font-size:9px; color:var(--muted); line-height:1; height:9px; letter-spacing:1px; }
.wk-day:hover { border-color:var(--muted); }
.wk-day.on { border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }
.wk-day.is-today b { color:var(--brand); }

.wk-head { margin:0 0 8px; font-size:14px; }

.wk-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; margin-bottom:5px;
  border-radius:9px; background:var(--card);
  border-left:3px solid var(--line);
  cursor:pointer; text-align:left; width:100%;
}
.wk-row:hover { border-left-color:var(--muted); }
.wk-row.is-mine { border-left-color:var(--green); }
.wk-row.is-off { background:#fdeaec; border-left-color:var(--red); opacity:.75; }
.wk-row.is-off .wk-what b { text-decoration:line-through; }

.wk-when { flex:none; min-width:60px; }
.wk-when b { display:block; font-size:14px; font-variant-numeric:tabular-nums; }
.wk-when span { font-size:10.5px; color:var(--muted); }

.wk-what { flex:1; min-width:0; }
.wk-what b { display:block; font-size:13.5px; }
.wk-what span { display:block; font-size:11.5px; color:var(--muted);
                overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.wk-nums { flex:none; text-align:right; min-width:66px; }
.wk-nums b { font-size:16px; font-variant-numeric:tabular-nums; }
.wk-nums b i { font-style:normal; font-size:12px; color:var(--muted); }
.wk-nums span { display:block; font-size:10px; color:var(--muted); }

@media (max-width:700px) {
  .wk-row { gap:8px; padding:9px 10px; }
  .wk-when { min-width:50px; }
  .wk-nums { min-width:54px; }
  .cal-tag { display:none; }
}

/* --- The calendar on a phone -------------------------------------------
   375px is the working width. The month grid has to shed everything that is
   not a number, and the week rows have to stop competing for one line. */
.cal-nav { display:inline-flex; align-items:center; gap:6px; }
.cal-nav #myCalLabel { min-width:110px; text-align:center; }

@media (max-width:600px) {
  /* Header controls stack instead of squeezing into one row:
     the activity filter on its own line, then the four mode buttons,
     then the month and its arrows as one group. */
  #calWorkspace .mw-head { flex-direction:column; align-items:stretch; gap:8px; }
  #calWorkspace .mw-head-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  #myCalActivity { flex:1 1 100%; min-width:0; }
  #calWorkspace .mw-head-actions .btn-secondary { flex:1 1 0; padding:7px 4px; }
  .cal-nav { flex:1 1 100%; justify-content:space-between; }
  .cal-nav .btn-secondary { flex:0 0 auto; min-width:44px; }

  /* A month square on a phone can hold a number and a couple of dots, not
     three class names — the chips were unreadable at this width. */
  .cal-grid { gap:3px; }
  .cal-cell { min-height:52px; padding:3px 2px; align-items:center; }
  .cal-num { font-size:12px; margin-bottom:2px; }
  .cal-chip { display:none; }
  .cal-more { display:none; }
  .cal-cell::after {
    content:''; display:block; height:5px; border-radius:99px; width:60%;
    background:var(--line);
  }
  .cal-ok::after   { background:var(--green); }
  .cal-bad::after  { background:var(--red); }
  .cal-none::after { background:none; }

  /* Week: the numbers move under the class rather than fighting it for
     width, so long Norwegian class names stay readable. */
  .wk-days { gap:3px; }
  .wk-day { padding:6px 0 4px; }
  .wk-day b { font-size:15px; }
  .wk-row { flex-wrap:wrap; gap:6px 10px; padding:9px 11px; }
  .wk-when { min-width:46px; }
  .wk-what { flex:1 1 auto; }
  .wk-what span { white-space:normal; }
  .wk-nums { min-width:0; margin-left:auto; text-align:right; }
  .wk-nums b { font-size:15px; }
}

/* --- Class economics -----------------------------------------------------
   Income attributed to a class against what it cost to teach. Shares the
   payroll table's type so the two money pages read as one family. */
.fin-caret { color:var(--muted); font-size:11px; }
.fin-neg { color:var(--red); }
.fin-pos { color:var(--green); }
/* A class that loses money is the reason anybody opens this page, so it is
   tinted rather than left to be found by reading a column of numbers. */
.fin-loss > td { background:#fff6f6; }
.fin-detail > td { padding:0 8px 12px; background:var(--bg); }
.fin-detail:hover { background:var(--bg); }
.fin-sub { width:100%; background:var(--card); border-radius:9px; }
.fin-sub th { font-size:10px; padding:8px; }
.fin-sub td { font-size:12px; padding:8px; }
.fin-sub tbody tr { cursor:default; }
.fin-method { margin-top:13px; color:var(--muted); font-size:12.5px; line-height:1.55; }
.fin-method h3 { color:var(--ink); }
.fin-method p { margin:0 0 9px; max-width:78ch; }
.fin-recon { border-top:1px solid var(--line); padding-top:9px; margin-bottom:0 !important; }

/* Five figures, not four: income, cost, margin, salaries and what is left.
   On the default four-column grid the last one dropped to a row of its own. */
#finSummary { grid-template-columns:repeat(5,1fr); }
@media (max-width:1100px) { #finSummary { grid-template-columns:repeat(2,1fr); } }
/* Repeated per row under the class name, for the phone where the columns
   they came from are hidden. */
.fin-mob { display:none; }
@media (max-width:700px) {
  #finSummary { grid-template-columns:1fr; }
  /* Money is what somebody opened this page for, so on a phone the four
     money columns stay and everything derived from them goes. Squeezing all
     seven pushed income, cost and margin off the side of the screen. */
  .fin-opt { display:none; }
  .fin-mob { display:block; margin-top:3px; }
  .fin-table td, .fin-table th { padding:10px 5px; }
}

/* --- Cleaning rota and the financial summary ---------------------------- */
.cl-sunday > td:first-child { border-left:3px solid var(--brand); }
/* A day already past with nobody on it: still a real cost, so it is marked
   rather than left looking like a free day. */
.cl-missing > td { background:#fffaf2; }
.cl-table select { padding:5px 8px; font-size:12.5px; max-width:230px; }
.fs-total > td { border-top:2px solid var(--line); background:var(--bg); }

/* --- Your hours, and the requests waiting on a manager ------------------ */
.hrow { display:flex; align-items:center; gap:11px; padding:11px 0;
        border-bottom:1px solid #edf1f5; }
.hrow:last-child { border-bottom:0; }
.hrow-body { flex:1; min-width:0; }
.hrow-body b { display:block; font-size:13.5px; }
.hrow-body span { display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.hrow-btn { padding:7px 13px; font-size:12.5px; white-space:nowrap; }
/* Past and unconfirmed is the one that needs a person to act. */
.hrow.is-due { border-left:3px solid var(--orange); padding-left:9px; }
.hrow.is-done { opacity:.62; }
.ask-form { background:var(--bg); border:1px solid var(--line); border-radius:10px;
            padding:14px; margin-bottom:13px; }
.ask-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.ask-grid label { display:block; font-size:11px; color:var(--muted);
                  text-transform:uppercase; letter-spacing:.05em; }
.ask-grid .sel { width:100%; margin-top:4px; text-transform:none;
                 letter-spacing:0; font-size:13px; color:var(--ink); }
@media (max-width:700px) { .ask-grid { grid-template-columns:1fr 1fr; } }

/* --- When the data was fetched ----------------------------------------- */
.ds-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ds-grid .lab { font-size:11px; color:var(--muted); text-transform:uppercase;
                letter-spacing:.06em; }
.ds-grid .val { font-weight:760; margin:7px 0 3px; }
.ds-grid .sub { font-size:12px; color:var(--muted); }
@media (max-width:700px) { .ds-grid { grid-template-columns:1fr; gap:14px; } }
.ds-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
              margin:0 0 16px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.ds-actions .pay-split { flex:1; min-width:220px; }
/* The logo is a refresh button. It has to still look like a logo, so the
   affordance is the cursor and a line of text under it rather than a border. */
.brand { cursor:pointer; }
.brand:hover .brand-chip { box-shadow:0 0 0 2px var(--brand); }
.brand.is-busy span { color:var(--brand); }
.brand.is-busy .brand-chip { animation:brandpulse 1.4s ease-in-out infinite; }
@keyframes brandpulse { 0%,100% { opacity:1 } 50% { opacity:.55 } }
.fx-add { display:grid; grid-template-columns:2fr 1fr 1.4fr 1.4fr 1.6fr auto; gap:8px;
          margin-top:13px; padding-top:13px; border-top:1px solid var(--line); }
.fx-add .sel { width:100%; }
@media (max-width:900px) { .fx-add { grid-template-columns:1fr 1fr; } }

/* --- Memberships on a member's profile ---------------------------------- */
.mem-row { display:flex; align-items:center; gap:11px; padding:10px 0;
           border-bottom:1px solid #edf1f5; }
.mem-row:last-of-type { border-bottom:0; }
.mem-body { flex:1; min-width:0; }
.mem-body b { display:block; font-size:13px; }
.mem-body span { display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }
.mem-money { text-align:right; white-space:nowrap; }
.mem-money b { display:block; font-size:13px; }
.mem-money span { font-size:11px; color:var(--muted); }
/* The one that is being billed right now. */
.mem-row.is-live { border-left:3px solid var(--green); padding-left:9px; }
.mem-row:not(.is-live) { opacity:.66; }

/* --- The three stages of a Bsport run ----------------------------------- */
.rs-box { margin:14px 0 0; padding:13px 15px; border:1px solid var(--line);
          border-radius:10px; background:var(--bg); }
.rs-box.rs-failed { border-color:#f0d5a8; background:#fdf4e8; }
.rs-box.rs-running { border-color:#bcd6f0; background:#f3f8fd; }
.rs-live { color:var(--blue,#2b6cb0); font-weight:600; }
.rs-live::before { content:'\25CF'; margin-right:5px; font-size:9px;
                   animation:rs-pulse 1.4s ease-in-out infinite; display:inline-block; }
@keyframes rs-pulse { 0%,100% { opacity:1; } 50% { opacity:.25; } }
@media (prefers-reduced-motion:reduce) { .rs-live::before { animation:none; } }
.rs-err { margin-top:8px; padding-top:8px; border-top:1px solid var(--line);
          font-size:11.5px; color:var(--red); }
.rs-head { display:flex; justify-content:space-between; align-items:baseline;
           gap:12px; margin-bottom:9px; flex-wrap:wrap; }
.rs-head b { font-size:13px; }
.rs-head span { font-size:12px; color:var(--muted); }
.rs-row { display:flex; align-items:center; gap:10px; padding:6px 0; }
.rs-body { flex:1; min-width:0; }
.rs-body b { display:block; font-size:12.5px; font-weight:600; }
.rs-body span { display:block; font-size:11px; color:var(--muted); margin-top:1px; }
.rs-when { font-size:11.5px; color:var(--muted); white-space:nowrap; }
.rs-dot { font-size:11px; line-height:1; }
.rs-ok { color:var(--green); }
.rs-bad { color:var(--red); }
.rs-none { color:#c3cad4; }
.rs-files { margin-top:8px; padding-top:8px; border-top:1px solid var(--line);
            display:flex; gap:14px; flex-wrap:wrap; }
.rs-files span { font-size:11px; color:var(--muted); }

/* --- "New figures are ready" --------------------------------------------- */
/* Fixed to the bottom, clear of the iPad's home indicator, and a button
   rather than a div so a tap works the same as a click. */
.new-data-bar { position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(18px + env(safe-area-inset-bottom)); z-index:60;
  background:var(--brand); color:#fff; border:0; border-radius:999px;
  padding:11px 22px; box-shadow:0 6px 20px rgba(16,24,40,.22);
  font:inherit; text-align:left; cursor:pointer; animation:ndbIn .25s ease-out; }
.new-data-bar b { display:block; font-size:13px; }
.new-data-bar span { display:block; font-size:11.5px; opacity:.85; }
@keyframes ndbIn { from { opacity:0; transform:translate(-50%,10px) } }
.role-toggle button { font-size:12.5px; padding:6px 11px; }
.role-toggle button:disabled { opacity:.35; cursor:not-allowed; }
.cm-bar { height:6px; background:var(--line); border-radius:999px; overflow:hidden;
          min-width:90px; margin-bottom:3px; }
.cm-bar i { display:block; height:100%; background:var(--brand); }

/* The local server running code older than the files on disk. A different
   problem from a stale browser, and a different fix, so it says so. */
.stale-server-bar { position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:#8a2b12; color:#fff; padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  font-size:12.5px; line-height:1.5; }
.stale-server-bar b { font-size:13px; }
.stale-server-bar span { display:block; opacity:.9; }

/* A class the calendar is showing from the timetable, which has not run yet.
   Faded rather than hidden: an empty Saturday looks like missing data. */
.cal-cls.cal-ahead { opacity:.55; background:var(--bg); color:var(--muted);
                     border:1px dashed var(--line); }

/* The way OUT of a preview must never be the thing that gets hidden. On a
   phone the scorecard controls -- which hold the "view as" picker and the
   role toggle -- are hidden on every page but the scorecard, so previewing
   an instructor and landing on their home page left no way back to being
   the CEO. */
body.previewing .topbar .controls { display:flex !important; }

/* Kids dashboard — a class list a coach can read at a glance. */
.kid-tag{display:inline-block;padding:1px 7px;border-radius:9px;font-size:11px;
  font-weight:600;letter-spacing:.02em;white-space:nowrap}
.kid-ok{background:#e3f3e8;color:#1d5b3e}
.kid-warn{background:#fdf0dc;color:#8a5a10}
.kid-bad{background:#fbe4e6;color:#8c1d2c}
.kid-belt{background:#eceff3;color:#3a444f}
tr.kid-gone td{opacity:.55}

/* Kids: search, filters, and a child that opens where you clicked. */
.kid-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 4px}
.kid-search{flex:1 1 240px;min-width:200px;padding:8px 12px;border:1px solid #d3d9e0;
  border-radius:7px;font-size:14px;background:#fff}
.kid-chip{border:1px solid #d3d9e0;background:#fff;border-radius:16px;padding:6px 13px;
  font-size:13px;cursor:pointer;white-space:nowrap;color:#3a444f}
.kid-chip span{margin-left:6px;font-weight:600;color:#7a8492}
.kid-chip:hover{border-color:#9aa5b1}
.kid-chip.on{background:#2f3742;border-color:#2f3742;color:#fff}
.kid-chip.on span{color:#c7ced6}
.kid-head{cursor:pointer;user-select:none;display:flex;align-items:baseline;gap:9px}
.kid-table tbody tr.kid-r{cursor:pointer}
.kid-table tbody tr.kid-r:hover td{background:#f2f5f8}
.kid-table tbody tr.kid-open td{background:#eef3f8;border-bottom:0}
.kid-detail td{background:#f7fafc;padding:16px 18px}
.kid-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:26px}
.kid-h4{margin:0 0 8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7a8492}
.kid-detail-grid h4+table,.kid-detail-grid h4+div{margin-bottom:18px}
.kid-mini{font-size:13px}
.kid-mini td,.kid-mini th{padding:5px 8px}
.kid-mini .fin-r{text-align:right}
.kid-sparks{display:flex;gap:5px;align-items:flex-end;height:64px;margin-bottom:18px}
.kid-sparks .kid-spark{display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;height:100%;flex:1}
.kid-sparks i{display:block;width:100%;background:#9b1c31;border-radius:2px 2px 0 0;min-height:2px}
.kid-sparks em{font-style:normal;font-size:9px;color:#7a8492;margin-top:3px}

/* Copy a child's details straight into Bsport's search box. */
.kid-copy-cell{display:flex;align-items:center;gap:8px;justify-content:space-between}
.kid-copy-val{word-break:break-all}
.kid-copy{flex:none;border:1px solid #d3d9e0;background:#fff;border-radius:5px;
  padding:2px 8px;font-size:11px;cursor:pointer;color:#5b6672}
.kid-copy:hover{border-color:#9aa5b1;background:#f2f5f8}
.kid-copy.on{background:#1d5b3e;border-color:#1d5b3e;color:#fff}

/* Kids: the age group is the first choice on the page. */
.kid-groups{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px}
.kid-gtab{flex:1 1 140px;min-width:130px;text-align:left;cursor:pointer;
  border:1px solid #d3d9e0;background:#fff;border-radius:9px;padding:10px 13px;
  display:flex;flex-direction:column;gap:2px;line-height:1.3}
.kid-gtab b{font-size:14px;color:#1d2530}
.kid-gtab span{font-size:12px;color:#5b6672}
.kid-gtab em{font-style:normal;font-size:11px;color:#7a8492}
.kid-gtab:hover{border-color:#9aa5b1;background:#f7fafc}
.kid-gtab.on{background:#2f3742;border-color:#2f3742}
.kid-gtab.on b,.kid-gtab.on span{color:#fff}
.kid-gtab.on em{color:#c7ced6}
.kid-plan{display:block;height:8px;background:#eceff3;border-radius:4px;overflow:hidden}
.kid-plan i{display:block;height:100%;background:#3a6ea5;border-radius:4px}
.kid-plan i.bad{background:#9b1c31}

/* The frozen top panel, tinted by which half of the app you are in. */
.period-controls{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.topbar[data-half="money"]{box-shadow:inset 0 -3px 0 #9b1c31}
.topbar[data-half="people"]{box-shadow:inset 0 -3px 0 #3a6ea5}
.topbar[data-half="work"]{box-shadow:inset 0 -3px 0 #d3d9e0}

/* Session drill-down: one class, at one time, over time. */
.crumbs{display:flex;gap:6px;align-items:center;font-size:12px;color:#7a8492;margin-bottom:4px}
.crumbs button{background:none;border:0;padding:0;font:inherit;color:#3a6ea5;cursor:pointer}
.crumbs button:hover{text-decoration:underline}
.ses-tabs{display:flex;gap:8px;margin:12px 0}
.ses-tab{border:1px solid #d3d9e0;background:#fff;border-radius:7px;padding:7px 16px;
  font-size:14px;cursor:pointer;color:#3a444f}
.ses-tab:hover{border-color:#9aa5b1}
.ses-tab.on{background:#2f3742;border-color:#2f3742;color:#fff}
.ses-sparks{display:flex;gap:6px;align-items:flex-end;height:96px}
.ses-sparks .ses-spark{display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;height:100%;flex:1;position:relative}
.ses-sparks i{display:block;width:100%;background:#3a6ea5;border-radius:2px 2px 0 0;min-height:2px}
.ses-sparks em{font-style:normal;font-size:9px;color:#7a8492;margin-top:3px}
.ses-sparks u{text-decoration:none;font-size:10px;color:#3a444f;font-weight:600}
tr.ses-partial td{opacity:.6}
.cls-slot{display:block;font-size:11px;color:#7a8492;font-weight:400;margin-top:1px}
.cls-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}

.drill-bar{padding:8px 0 2px;display:flex;flex-direction:column;gap:7px}
.drill-next{display:flex;flex-wrap:wrap;gap:7px}
.drill-opt{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;
  font-size:13px;font-weight:600;cursor:pointer;color:#3b4a61}
.drill-opt small{margin-left:6px;font-weight:700;opacity:.5;font-size:11px}
.drill-opt:hover{border-color:#9eb9df;background:#f4f8ff}
.drill-opt.on{background:var(--brand);border-color:var(--brand);color:#fff}
.drill-opt.on small{opacity:.8}
.drill-selects{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:9px}
.drill-sel{display:flex;flex-direction:column;gap:3px;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.07em;color:#7a8492;font-weight:700}
.drill-sel select{background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:6px 26px 6px 10px;font-size:13px;color:#263449;font-weight:400;
  text-transform:none;letter-spacing:0;min-width:170px}
.drill-path{margin-left:auto;font-size:12px;color:#7a8492;align-self:flex-end}

/* --- the sidebar, on its dark ground --------------------------------------
   The first group is the primary navigation -- what am I watching -- so it
   is set larger and brighter than the day's jobs below it. Everything used
   to be one weight and one colour, which made twenty links read as a wall. */
.nav-group{color:#5c6470}
.nav-group:first-child{color:#8b939f}

/* Lens rows: the six real choices. */
#nav > a{font-size:14.5px;padding:9px 12px;color:#c3c9d2}
#nav > a:hover{background:#1c1f25;color:#fff}
#nav > a.active{background:var(--brand);color:#fff;font-weight:600}
.nav-caret{float:right;font-style:normal;opacity:.45;font-size:15px;line-height:1.2}
#nav > a.active .nav-caret{opacity:.9}

/* A lens that is open: its children sit under it, quieter and indented. */
.nav-sub{margin:1px 0 8px;padding-left:11px;border-left:2px solid #2b313a;
  display:grid;gap:2px}
.nav-sub a{font-size:13px;padding:6px 10px;color:#98a0ab;border-radius:7px}
.nav-sub a:hover{background:#1c1f25;color:#fff}
.nav-sub a.active{background:#232830;color:#fff;font-weight:600}

/* The day's jobs are secondary: smaller, dimmer, and they do not compete. */
.nav-group + a,
.nav-group ~ a{}
#nav .nav-group:nth-of-type(2) ~ a{font-size:13.5px;color:#9aa1ab;padding:7px 12px}
#nav .nav-group:nth-of-type(2) ~ a.active{color:#fff}

/* Which half a lens belongs to, as a stripe rather than a coloured word. */
#nav > a.nav-money{box-shadow:inset 3px 0 0 #c8324a}
#nav > a.nav-people{box-shadow:inset 3px 0 0 #4d86c9}
#nav > a.nav-money.active,#nav > a.nav-people.active{box-shadow:none}

/* The top row: who you are, then who you are looking as. The "view as"
   picker was stretching to fill the controls row on its own, pushing the
   period and section pickers onto a third line. */
#viewAsPicker{max-width:210px;font-size:13px;padding:7px 28px 7px 10px}
.role-toggle button{padding:5px 11px;font-size:12.5px}
.who-chip{font-size:12.5px}
.top{align-items:flex-start;margin-bottom:12px}
.top h1{font-size:25px;line-height:1.15}
/* The freshness line was being clipped by the sticky bar's bottom edge --
   the bar has no bottom padding, so the third line of the title block ran
   straight into it. */
.topbar{padding-bottom:6px}
.top .freshness{margin-top:3px;font-size:11.5px;line-height:1.4}
.topbar.stuck .top .freshness{display:none}

/* Charts: one look for all of them. */
.ch{display:block;width:100%;min-width:700px;height:auto}
.ch-grid{stroke:#e8ecf1;stroke-width:1}
.ch-zero{stroke:#c3cad4;stroke-width:1.5}
.ch-ax{font-size:10.5px;fill:#8b939f;font-family:inherit}
.ch-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;font-size:12px;color:#5b6672}
.ch-legend i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.ch-note{color:#8b939f;font-style:italic}

/* Membership mix: what the plans are, and how much of it is tied in. */
.mix-head{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-end;margin-bottom:16px}
.mix-kpi span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#7a8492;font-weight:700}
.mix-kpi b{display:block;font-size:28px;line-height:1.1;margin:3px 0}
.mix-kpi i{font-style:normal;font-size:12px;color:#5b6672}
.mix-bar{flex:1 1 220px;height:12px;background:#c9a227;border-radius:6px;overflow:hidden;min-width:180px}
.mix-bar span{display:block;height:100%;background:#1d5b3e}

/* Line charts: the legend carries the direction, so you never trace a line. */
.ln-wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.ln-wrap .scroll{flex:1 1 520px;min-width:0}
.ln-legend{flex:0 0 210px;display:grid;gap:5px;align-content:start;padding-top:10px}
.ln-item{display:flex;align-items:center;gap:7px;font-size:12px;color:#3b4a61}
.ln-item i{width:11px;height:3px;border-radius:2px;flex:none}
.ln-item b{margin-left:auto;font-size:11.5px;font-weight:700}
.ln-up{color:#1d5b3e}.ln-down{color:#9b1c31}.ln-flat{color:#8b939f}
.cls-year{display:flex;flex-wrap:wrap;gap:22px;margin:4px 0 16px}

/* Every plan as a bar: the shape of the book at a glance. */
.plan-chart{display:grid;gap:5px}
.plan-row{display:grid;grid-template-columns:minmax(150px,1.6fr) 3fr 92px 52px 44px;
  gap:12px;align-items:center;font-size:12.5px}
.plan-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#3b4a61}
.plan-track{height:13px;background:#eef1f5;border-radius:3px;overflow:hidden}
.plan-track i{display:block;height:100%;border-radius:3px}
.plan-track i.tied{background:#1d5b3e}
.plan-track i.free{background:#c9a227}
.plan-val{text-align:right;font-weight:600;color:#1d2530}
.plan-n{text-align:right;color:#7a8492}
.plan-pc{text-align:right;color:#7a8492}
.kid-gtab u{text-decoration:none;font-weight:700;color:#1d2530;font-size:14px}
.kid-gtab.on u{color:#fff}
.kid-gbar{display:block;height:5px;background:#eef1f5;border-radius:3px;overflow:hidden;margin:3px 0 1px}
.kid-gbar i{display:block;height:100%;background:#1d5b3e;border-radius:3px}
.kid-gtab.on .kid-gbar{background:rgba(255,255,255,.25)}
.kid-gtab.on .kid-gbar i{background:#7fd1a4}
/* Six tiles do not divide into four. Let the grid fit what it has. */
.kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.kid-expand{cursor:pointer;padding:0 4px;border-radius:3px}
.kid-expand:hover{background:#dde4ec}

/* Member panel: why they left, and what to do about it. */
.ce-block{margin:16px 0 4px}
.ce-reason{display:flex;gap:10px;align-items:center}
.ce-said{margin:8px 0 0;font-size:13px;color:#3b4a61;font-style:italic;
  border-left:3px solid #e4e8ee;padding-left:10px}
.ce-contact{margin-top:10px;padding:11px 13px;border-radius:9px;border:1px solid var(--line);background:#fafbfc}
.ce-pending{border-color:#e6c07a;background:#fdf8ee}
.ce-sent{border-color:#bfe0cd;background:#f2faf5}
.ce-skipped{border-color:#d3d9e0;background:#f6f7f9}
.ce-state{font-size:13px;font-weight:600;color:#1d2530;display:flex;gap:8px;align-items:baseline}
.ce-actions{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.ce-tags{display:flex;flex-wrap:wrap;gap:7px}
.ce-tag{border:1px dashed #b9c2cc;background:#fff;border-radius:8px;padding:6px 11px;
  font-size:12.5px;cursor:pointer;color:#3b4a61;text-align:left;line-height:1.35}
.ce-tag span{display:block;font-size:10.5px;color:#8b939f}
.ce-tag:hover{border-style:solid;border-color:#3a6ea5;color:#3a6ea5}
.ce-tag.on{border-style:solid;border-color:#1d5b3e;background:#f2faf5;color:#1d5b3e;cursor:default}
.ce-tag.failed{border-color:#c8324a;color:#c8324a}

/* Quit page as a worklist. */
.qt-summary{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.qt-summary b{font-size:22px;margin-right:5px}
.qt-bar{flex:1 1 180px;min-width:140px;height:9px;background:#eef1f5;border-radius:5px;overflow:hidden}
.qt-bar span{display:block;height:100%;background:#1d5b3e}
.qt-actions{display:flex;gap:5px}
.qt-btn{border:1px solid var(--line);background:#fff;border-radius:6px;padding:4px 9px;
  font-size:11.5px;cursor:pointer;color:#3b4a61;white-space:nowrap}
.qt-btn:hover{border-color:#9aa5b1;background:#f4f8ff}
.qt-btn.ok:hover{border-color:#1d5b3e;color:#1d5b3e;background:#f2faf5}


/* --- Writing to a member from their own page ----------------------------- */
/* The thread was read-only: you could see what somebody wrote and had to go
   to the Email page to answer them, which meant leaving the record you were
   reading them against. */
.cc-box { margin:10px 0 0; padding:12px; border:1px solid var(--line);
          border-radius:10px; background:var(--bg); }
.cc-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.cc-row .select { flex:1; min-width:150px; }
.cc-row input { flex:2; min-width:180px; margin-top:0; }
.cc-suggest { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.cc-chip { border:1px solid var(--line); background:#fff; border-radius:999px;
           padding:4px 11px; font-size:11.5px; cursor:pointer; color:var(--ink); }
.cc-chip:hover { border-color:var(--red); color:var(--red); }
.cc-foot { display:flex; justify-content:space-between; align-items:center;
           gap:10px; margin-top:8px; flex-wrap:wrap; }
.cc-btns { display:flex; gap:8px; }
.cc-noconsent { color:#a8620a; font-size:11.5px; }


/* --- Who still owes a leaver a message ----------------------------------- */
/* Red or green on the whole row. A tag in one column is something you read;
   a coloured row is something you see without reading. Green covers both
   "thanked" and a recorded "no message needed" — both are decisions that
   were made, and the list exists to find the ones that were not. */
#quitterRows tr.qt-owed  { background:#fdf3f3; box-shadow:inset 3px 0 0 var(--red); }
#quitterRows tr.qt-done  { background:#f2f9f4; box-shadow:inset 3px 0 0 var(--green); }
#quitterRows tr.qt-owed:hover { background:#fbe9e9; }
#quitterRows tr.qt-done:hover { background:#e8f4ec; }

.cc-anyway { margin-left:8px; border:1px solid var(--red); background:#fff;
             color:var(--red); border-radius:6px; padding:3px 10px;
             font-size:11.5px; font-weight:600; cursor:pointer; }
.cc-anyway:hover { background:var(--red); color:#fff; }


/* --- The waiting list as a worklist -------------------------------------- */
/* Same red/green rule as the quit list: red while a child is still owed an
   answer, green once somebody has actually done something about them. */
.wl-box { margin-top:18px; }
.wl-summary { display:flex; gap:18px; flex-wrap:wrap; margin-bottom:10px;
              font-size:12.5px; }
.wl-summary b { font-size:16px; display:block; }
.wl-summary div { color:var(--muted); }
#wlRows tr.wl-owed { background:#fdf3f3; box-shadow:inset 3px 0 0 var(--red); }
#wlRows tr.wl-done { background:#f2f9f4; box-shadow:inset 3px 0 0 var(--green); }
.wl-actions { display:flex; gap:5px; flex-wrap:wrap; }
.wl-btn { border:1px solid var(--line); background:#fff; border-radius:6px;
          padding:3px 9px; font-size:11px; cursor:pointer; white-space:nowrap; }
.wl-btn:hover { border-color:var(--red); color:var(--red); }
.wl-btn.ok { border-color:var(--green); color:var(--green); }
.wl-btn.ok:hover { background:var(--green); color:#fff; }
.wl-state { font-size:11.5px; }
.wl-state b { display:block; }


/* --- Age groups on the planning page ------------------------------------- */
.ps-row { display:flex; gap:7px; flex-wrap:wrap; margin:0 0 12px; }
.ps-chip { border:1px solid var(--line); background:#fff; border-radius:999px;
           padding:6px 13px; font-size:12.5px; font-weight:600; cursor:pointer;
           color:var(--ink); display:inline-flex; align-items:center; gap:7px; }
.ps-chip:hover { border-color:var(--red); }
.ps-chip.on { background:var(--red); border-color:var(--red); color:#fff; }
.ps-n { font-size:11px; font-weight:700; border-radius:999px; padding:1px 7px;
        background:var(--line); color:var(--muted); }
.ps-chip.on .ps-n { background:rgba(255,255,255,.25); color:#fff; }
.ps-n.ps-left { background:#fbe3e3; color:var(--red); }
.ps-chip.on .ps-n.ps-left { background:rgba(255,255,255,.3); color:#fff; }


/* --- A planning square you can read -------------------------------------- */
/* It used to hold a number and a colour: "0/2" tells you a day needs work and
   nothing about which class or who is on it, which is exactly what you opened
   the day to find out. */
.cal-cell { align-items:stretch; }
.cal-cls { display:block; text-align:left; border-radius:5px; padding:3px 5px;
           margin-top:3px; font-size:10.5px; line-height:1.3;
           border-left:3px solid var(--line); background:#fff; }
.cal-cls b { display:block; font-size:10.5px; font-weight:700;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-cls i { display:block; font-style:normal; color:var(--muted); font-size:10px; }
.cal-cls u { display:block; text-decoration:none; color:var(--muted); font-size:9.5px; }
.cal-cls.cc-ok   { border-left-color:var(--green); }
.cal-cls.cc-todo { border-left-color:var(--red); }
.cal-more { display:block; font-size:9.5px; color:var(--muted); margin-top:2px; }
.cal-grid .cal-cell { min-height:96px; }
@media (max-width:900px) { .cal-grid .cal-cell { min-height:74px; } }


/* --- A manager's month, on the front page -------------------------------- */
.hw-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
          gap:12px; margin-bottom:14px; }
.hw-card { text-align:left; cursor:pointer; border:1px solid var(--line);
           display:block; width:100%; font:inherit; }
.hw-card:hover { border-color:var(--red); }
.hw-lab { font-size:11.5px; color:var(--muted); text-transform:uppercase;
          letter-spacing:.05em; font-weight:700; }
.hw-big { font-size:30px; font-weight:800; line-height:1.15; margin:4px 0 6px;
          font-variant-numeric:tabular-nums; }
.hw-sub { font-size:12px; color:var(--muted); margin-top:6px; }
.hw-ages { display:flex; gap:5px; flex-wrap:wrap; margin-top:9px; }
.hw-age { font-size:11px; border:1px solid var(--line); border-radius:999px;
          padding:2px 9px; color:var(--muted); }
.hw-age b { color:var(--ink); }
.hw-age.hw-owed { border-color:#f0b8b8; background:#fdf3f3; color:var(--red); }
.hw-age.hw-owed b { color:var(--red); }


/* --- The planning row, rebuilt ------------------------------------------- */
/* It was five columns on one line: the instructor (one name) took the same
   width as the assistants (a list of chips plus a picker), the technique was
   squeezed, and reception had nowhere to go. Header line, then labelled
   fields that size to what they hold. */
.plan-row { display:block; padding:10px 12px; }
.plan-head { display:flex; align-items:baseline; justify-content:space-between;
             gap:12px; margin-bottom:9px; }
.plan-head .plan-when span { font-weight:600; color:var(--ink); }
.plan-head .plan-save { flex:0 0 auto; }

.plan-fields {
  display:grid; gap:10px 12px;
  grid-template-columns:minmax(150px,0.85fr) minmax(210px,1.35fr) minmax(190px,1.2fr);
}
/* With reception there are four fields; the technique takes the full width
   underneath rather than being crushed into a fourth column. */
.plan-fields.has-rec {
  grid-template-columns:minmax(150px,0.8fr) minmax(200px,1.2fr) minmax(180px,1.1fr);
}
.pf { display:flex; flex-direction:column; gap:4px; min-width:0; }
.pf-wide { grid-column:1/-1; }
.pf-lab { font-size:10.5px; font-weight:700; letter-spacing:.05em;
          text-transform:uppercase; color:var(--muted); }
.pf-lab i { font-style:normal; text-transform:none; letter-spacing:0;
            font-weight:600; color:var(--red); margin-left:3px; }
.pf .sel, .pf input { width:100%; min-width:0; }

.plan-reception { display:flex; flex-wrap:wrap; gap:4px; align-items:center;
                  min-width:0; }
.plan-reception .chip { background:#fdf3ea; border-color:#f0cfa8; }

@media (max-width:820px) {
  .plan-fields, .plan-fields.has-rec { grid-template-columns:1fr; }
}


/* --- A manager's overview ------------------------------------------------ */
.mo-grid { display:grid; gap:12px;
           grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.mo-card { padding:14px 16px; }
.mo-head { display:flex; justify-content:space-between; align-items:baseline;
           gap:10px; margin-bottom:10px; }
.mo-head b { font-size:13px; }
.mo-head span { font-size:11.5px; color:var(--muted); }
.mo-n { font-size:28px; font-weight:800; line-height:1.1;
        font-variant-numeric:tabular-nums; }
.mo-n.mo-warn { color:var(--red); }
.mo-list { margin-top:10px; display:flex; flex-direction:column; gap:1px; }
.mo-item { display:flex; justify-content:space-between; gap:10px; padding:6px 8px;
           border-radius:6px; cursor:pointer; font-size:12.5px; }
.mo-item:hover { background:var(--bg); }
.mo-item i { font-style:normal; color:var(--muted); font-size:11.5px;
             white-space:nowrap; }
.mo-more { font-size:11.5px; color:var(--muted); padding:6px 8px; }
.mo-wl-row { display:flex; align-items:center; justify-content:space-between;
             gap:10px; padding:7px 8px; border-radius:6px; }
.mo-wl-row + .mo-wl-row { border-top:1px solid var(--line); }
.mo-wl-row.wl-owed { background:#fdf3f3; box-shadow:inset 3px 0 0 var(--red); }
.mo-wl-who b { font-size:12.5px; }
.mo-wl-who span { display:block; font-size:11px; color:var(--muted); }

#moWaiting .mo-wl-row.wl-done { background:#f2f9f4; box-shadow:inset 3px 0 0 var(--green); }


/* --- A waiting-list row you can actually hit ----------------------------- */
/* The whole row is the target, not a 60px button inside it. Most of these
   children have no Bsport profile to open, so the row expands in place and
   shows what the class sheet knows instead. */
.mo-wl-row { cursor:pointer; display:block; padding:0; }
.mo-wl-row:hover { filter:brightness(.985); }
.mo-wl-row:focus-visible { outline:2px solid var(--red); outline-offset:-2px; }
.mo-wl-top { display:flex; align-items:center; justify-content:space-between;
             gap:10px; padding:11px 12px; min-height:44px; }
.mo-wl-right { display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.wl-caret { color:var(--muted); font-size:12px; }
.wl-badge { font-size:10.5px; font-weight:700; letter-spacing:.03em;
            border-radius:999px; padding:2px 9px; white-space:nowrap; }
.wl-badge.owed { background:#fbe3e3; color:var(--red); }
.wl-badge.ok   { background:#e3f2e8; color:var(--green); }

.wl-detail { padding:0 12px 12px; cursor:default; }
.wl-facts { display:grid; gap:6px 16px; margin-bottom:11px;
            grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.wl-fact { font-size:12px; display:flex; justify-content:space-between; gap:10px;
           border-bottom:1px solid var(--line); padding-bottom:4px; }
.wl-fact span { color:var(--muted); }
.wl-fact b { text-align:right; word-break:break-word; }
.wl-actions.wl-big { gap:7px; }
.wl-actions.wl-big .wl-btn { padding:8px 14px; font-size:12.5px; min-height:38px;
                             display:inline-flex; align-items:center;
                             text-decoration:none; }

.wl-name { font-size:13.5px; line-height:1.25; display:block;
           word-break:break-word; }
.mo-wl-who { min-width:0; flex:1 1 auto; }
.mo-wl-who span { display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }
.wl-noage { font-style:normal; color:#a8620a; }
.wl-enq { background:var(--bg); border-radius:7px; padding:9px 11px; margin-bottom:10px; }
.wl-enq-head { display:flex; justify-content:space-between; gap:10px;
               flex-wrap:wrap; margin-bottom:5px; }
.wl-enq-head b { font-size:12.5px; }
.wl-enq-head span { font-size:11px; color:var(--muted); }
.wl-enq p { margin:0; font-size:12px; color:var(--ink); line-height:1.45; }
.wl-enq-none { font-size:12px; color:var(--muted); }

.mo-n .mo-of { font-size:15px; font-weight:600; color:var(--muted); }
.mo-card .plan-bar { margin:6px 0 2px; }

.tc-tbl { font-size:12.5px; }
.tc-tbl th, .tc-tbl td { padding:6px 8px; }
.tc-good { color:var(--green); }
.tc-mid  { color:#a8620a; }
.tc-bad  { color:var(--red); }


/* --- The kids belt scale ------------------------------------------------- */
/* White, grey, yellow, orange, green -- each in three steps. The dark
   variants are the black-barred grades, which sit above the plain colour. */
.belt-grey        { background:#9aa3ad; color:#fff; }
.belt-grey-dark   { background:#6b7480; color:#fff; }
.belt-yellow      { background:#e8c33a; color:#3a2f00; }
.belt-yellow-dark { background:#b8961f; color:#fff; }
.belt-orange      { background:#e8873a; color:#fff; }
.belt-orange-dark { background:#b85f1f; color:#fff; }
.belt-green       { background:#3f9a5c; color:#fff; }
.belt-green-dark  { background:#2b6b40; color:#fff; }

.stu-card { margin-bottom:12px; padding:14px 16px; }
.stu-tbl { font-size:12.5px; }
.stu-tbl tbody tr { cursor:pointer; }
.stu-tbl tbody tr:hover { background:var(--bg); }
.stu-mail { color:#7a8492; font-size:11px; }
.stu-belt { display:inline-block; border-radius:999px; padding:2px 10px;
            font-size:11px; font-weight:700; white-space:nowrap; }
.stu-nobelt { font-size:11.5px; color:var(--red); }

/* The sheet's own headings inside the waiting list. */
.mo-head.wl-sec { margin:14px 0 6px; padding-top:10px;
                  border-top:1px solid var(--line); }
.mo-head.wl-sec b { font-size:11.5px; letter-spacing:.06em;
                    text-transform:uppercase; color:var(--ink); }

.ms-tbl { font-size:12.5px; }
.ms-tbl th, .ms-tbl td { padding:6px 9px; }
.ms-tot td { border-top:2px solid var(--line); }
.ms-up { color:var(--green); }
.ms-dn { color:var(--red); }
.ms-d { font-size:10.5px; margin-left:5px; }

.wl-bands { display:flex; gap:8px; flex-wrap:wrap; }
.wl-band { border:1px solid var(--line); background:#fff; border-radius:9px;
           padding:9px 14px; cursor:pointer; text-align:left; min-width:96px; }
.wl-band:hover:not([disabled]) { border-color:var(--red); }
.wl-band[disabled] { opacity:.55; cursor:default; }
.wl-band b { display:block; font-size:20px; font-weight:800; line-height:1.1; }
.wl-band span { display:block; font-size:11.5px; color:var(--ink); }
.wl-band i { display:block; font-style:normal; font-size:10.5px; color:var(--muted); }
.wl-band.owed b { color:var(--red); }
.wl-clear { border:none; background:none; padding:0; font:inherit;
            color:var(--red); cursor:pointer; text-decoration:underline; }


/* --- Overview tabs ------------------------------------------------------- */
/* Everything a manager needs is on one page, which made it a long page. One
   click instead of one scroll, with the count of what is owed on the tab. */
.mo-tabs { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px;
           border-bottom:1px solid var(--line); padding-bottom:0; }
.mo-tab { border:1px solid transparent; border-bottom:none; background:none;
          padding:9px 15px; font-size:13px; font-weight:600; cursor:pointer;
          color:var(--muted); border-radius:8px 8px 0 0; margin-bottom:-1px;
          display:inline-flex; align-items:center; gap:7px; }
.mo-tab:hover { color:var(--ink); }
.mo-tab.on { color:var(--ink); background:var(--card);
             border-color:var(--line); border-bottom:1px solid var(--card); }
.mo-tab-n { font-size:11px; font-weight:700; border-radius:999px;
            padding:1px 7px; background:#fbe3e3; color:var(--red); }
.mo-tab.on .mo-tab-n { background:#fbe3e3; color:var(--red); }


/* --- Your month ---------------------------------------------------------- */
.ob-task { display:flex; align-items:flex-start; gap:14px; width:100%;
           text-align:left; background:var(--card); border:1px solid var(--line);
           border-radius:10px; padding:15px 16px; margin-bottom:10px;
           cursor:pointer; font:inherit; }
.ob-task:hover { border-color:var(--red); }
.ob-task.ob-done { background:#f4faf6; border-color:#cfe6d7; }
.ob-n { flex:0 0 auto; width:30px; height:30px; border-radius:50%;
        background:var(--red); color:#fff; font-weight:800; font-size:14px;
        display:flex; align-items:center; justify-content:center; }
.ob-done .ob-n { background:var(--green); }
.ob-body { flex:1 1 auto; min-width:0; }
.ob-body b { font-size:14px; display:block; margin-bottom:3px; }
.ob-body p { margin:0 0 9px; font-size:12.5px; color:var(--muted); line-height:1.45; }
.ob-body .plan-bar { margin:0 0 5px; }
.ob-prog { font-size:11.5px; color:var(--muted); }
.ob-go { flex:0 0 auto; color:var(--muted); font-size:18px; align-self:center; }
.cap-tbl { font-size:12.5px; }
.cap-tbl th, .cap-tbl td { padding:7px 9px; }
.cap-in { width:62px; text-align:right; padding:3px 6px; font-size:12.5px;
          border:1px solid var(--line); border-radius:6px; }
.cap-bar { height:7px; border-radius:99px; background:var(--line);
           overflow:hidden; min-width:70px; }
.cap-bar i { display:block; height:100%; background:var(--green); }
.cap-bar i.cap-hot { background:var(--red); }


/* --- Taking a child off the waiting list --------------------------------- */
.wl-remove { margin-top:10px; padding:11px 12px; border-radius:8px;
             background:var(--bg); border:1px solid var(--line); }
.wl-rm-head { font-size:12px; font-weight:700; margin-bottom:9px; }
.wl-rm-row { display:flex; gap:9px; flex-wrap:wrap; }
.wl-rm { flex:1 1 200px; text-align:left; border:1px solid var(--line);
         background:#fff; border-radius:8px; padding:10px 12px; cursor:pointer;
         font:inherit; }
.wl-rm:hover { border-color:var(--red); }
.wl-rm b { display:block; font-size:13px; }
.wl-rm span { display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }
.wl-rm i { display:block; font-style:normal; font-size:11px; color:var(--green);
           margin-top:5px; font-weight:600; }
.wl-rm-on { border-color:var(--green); background:#f4faf6; }

/* A profile for a child who is not in Bsport yet. */
.wc-overlay { position:fixed; inset:0; background:rgba(12,14,18,.5);
              display:none; align-items:flex-start; justify-content:center;
              z-index:60; padding:40px 16px; overflow:auto; }
.wc-panel { background:var(--card); border-radius:12px; padding:20px 22px;
            max-width:620px; width:100%; }
.wc-head { display:flex; justify-content:space-between; align-items:flex-start;
           gap:14px; margin-bottom:6px; }
.wc-head h3 { margin:0; font-size:18px; }
.wc-head span { font-size:12px; color:var(--muted); }
.wc-note { font-size:11.5px; color:var(--muted); margin:0 0 14px; }


/* --- Where a child has got to -------------------------------------------- */
.wl-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:11px; }
.wl-tag { border:1px solid var(--line); background:#fff; border-radius:999px;
          padding:5px 12px; font-size:11.5px; font-weight:600; cursor:pointer;
          color:var(--muted); }
.wl-tag:hover { border-color:var(--muted); color:var(--ink); }
.wl-tag.on { color:#fff; }
.wl-tag.wl-good.on { background:var(--green); border-color:var(--green); }
.wl-tag.wl-mid.on  { background:#a8620a; border-color:#a8620a; }
.wl-tag.wl-bad.on  { background:var(--red); border-color:var(--red); }
.wl-noteblk { display:block; margin-bottom:11px; }
.wl-note { width:100%; font:inherit; font-size:12.5px; padding:7px 9px;
           border:1px solid var(--line); border-radius:7px; resize:vertical; }
.wc-compose { margin-top:14px; padding-top:13px; border-top:1px solid var(--line); }
.wc-compose input, .wc-compose textarea { width:100%; margin-top:5px; }

/* Never alert(). A message that a browser can suppress is a message nobody
   gets, which is how every button on this list came to look dead. */
.wl-say { position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
          background:#14161a; color:#fff; padding:11px 18px; border-radius:9px;
          font-size:13px; z-index:90; box-shadow:0 6px 20px rgba(0,0,0,.25);
          max-width:min(560px,92vw); }
.wl-say.bad { background:var(--red); }


/* --- One heading on every page ------------------------------------------- */
.hd-bar { display:flex; gap:20px; flex-wrap:wrap; align-items:center;
          padding:11px 14px; margin-bottom:14px; background:var(--bg);
          border:1px solid var(--line); border-radius:10px; }
.hd-group { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.hd-lab { font-size:10.5px; font-weight:700; letter-spacing:.06em;
          text-transform:uppercase; color:var(--muted); }
.hd-step { border:1px solid var(--line); background:#fff; border-radius:6px;
           width:28px; height:28px; cursor:pointer; font-size:15px;
           line-height:1; color:var(--ink); }
.hd-step:hover { border-color:var(--red); color:var(--red); }
.hd-sel { border:1px solid var(--line); border-radius:7px; padding:5px 9px;
          font:inherit; font-size:12.5px; background:#fff; }
.hd-chips { display:flex; gap:5px; flex-wrap:wrap; }
.hd-chip { border:1px solid var(--line); background:#fff; border-radius:999px;
           padding:5px 12px; font-size:12px; font-weight:600; cursor:pointer;
           color:var(--muted); }
.hd-chip:hover { border-color:var(--red); color:var(--red); }
.hd-chip.on { background:var(--red); border-color:var(--red); color:#fff; }

.wl-seccard { padding:14px 16px; margin-bottom:12px; }
.wl-prow { border-radius:8px; margin-bottom:2px; }
.wl-prow.wl-owed { background:#fff; box-shadow:inset 3px 0 0 var(--red); }
.wl-prow.wl-done { background:#f4faf6; box-shadow:inset 3px 0 0 var(--green); }
.wl-ptop { display:flex; align-items:center; justify-content:space-between;
           gap:10px; padding:11px 12px; cursor:pointer; min-height:44px; }
.wa-grid { display:grid; gap:11px 14px;
           grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.wa-grid .pf-wide { grid-column:1/-1; }
.wa-grid input, .wa-grid select { width:100%; margin-top:4px; }

/* Andre, 16 Sep 2026: the filter (period, section/discipline, class) has to
   stay in view while scrolling down a long page like the Overview, or you
   lose it the moment you scroll past the first chart. It sits right under
   the topbar, which is sticky and shrinks itself on scroll -- --topbar-h is
   kept in step with that actual height by stickyTopbar() in app.js, so this
   sticks flush beneath it at every width rather than at a guessed offset. */
#pageHeading { margin:0 0 14px; position:sticky; top:var(--topbar-h, 78px);
  z-index:55; background:var(--bg); padding-top:10px; }
body:has(#topbar.stuck) #pageHeading:not(:empty) { box-shadow:0 6px 12px -10px rgba(16,24,40,.22); }
.cap-title { display:flex; align-items:flex-start; justify-content:space-between;
             gap:14px; margin-bottom:12px; flex-wrap:wrap; }
.cap-h { margin:0 0 3px; font-size:17px; }
.cap-conf { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.cap-conf .pf { display:block; }
.cap-conf input { width:100%; margin-top:4px; }

.wl-prow + .wl-prow { border-top:1px solid var(--line); }
.wl-prow .wl-name { font-size:14px; }
.wl-seccard .mo-head { margin-bottom:6px; }

.wl-page-top { align-items:center; margin-bottom:10px; }

.mo-pair { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); }
.mv-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.mv-col { border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.mv-head { display:flex; align-items:center; justify-content:space-between;
           gap:8px; padding:9px 11px; background:#fafbfc; border-bottom:1px solid var(--line); }
.mv-head b { font-size:12px; }
.mv-n { font-size:12px; font-weight:700; padding:1px 8px; border-radius:20px; }
.mv-n.up { background:#e7f5ec; color:var(--green); }
.mv-n.dn { background:#fdeaea; color:var(--red); }
.mv-list { max-height:230px; overflow-y:auto; }
.mv-row { display:flex; align-items:baseline; justify-content:space-between;
          gap:8px; padding:7px 11px; cursor:pointer; font-size:13px; }
.mv-row:hover { background:#f4f6f9; }
.mv-row + .mv-row { border-top:1px solid #f0f2f5; }
.mv-name { font-weight:600; }
.mv-sec { color:var(--muted); font-size:11px; white-space:nowrap; }
.mv-none { padding:12px 11px; color:var(--muted); font-size:12px; }

/* How full a class runs, as colour: quiet classes are where the next child
   off the waiting list goes, and full ones are where they cannot. */
.cap-tbl tr.cap-full  { background:#fdf4f4; }
.cap-tbl tr.cap-quiet { background:#f3f8fb; }
.cap-i-full  { background:var(--red); }
.cap-i-ok    { background:var(--green); }
.cap-i-quiet { background:#2f7fc4; }
.cap-w-full  { color:var(--red); }
.cap-w-ok    { color:var(--green); }
.cap-w-quiet { color:#2f7fc4; }

.wl-prow.wl-gone { background:#fafbfc; box-shadow:inset 3px 0 0 #b6bcc6; }
.wl-prow.wl-gone .wl-name { color:var(--muted); }
.wl-rm { padding:10px 12px 12px; border-top:1px solid var(--line); }
.wl-rm .pf { display:block; }
.wl-rm input { width:100%; margin-top:4px; }
.wl-btn.bad { color:var(--red); border-color:#f1c9c9; }
.wl-btn.bad:hover { background:#fdf1f1; }
#wlTabs { margin-bottom:12px; }

.cal-role { display:inline-block; width:14px; height:14px; line-height:14px;
            border-radius:4px; font-size:9px; font-weight:800; font-style:normal;
            text-align:center; margin-left:4px; color:#fff; vertical-align:1px; }
.role-instructor { background:var(--brand); }
.role-assistant  { background:#2f7fc4; }
.role-reception  { background:#c76b14; }
.mh-card { margin-bottom:14px; }
.mh-grid { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.mh-cell { border:1px solid var(--line); border-radius:10px; padding:11px 12px;
           display:flex; flex-direction:column; gap:3px; }
.mh-cell.mh-tot { background:#fafbfc; }
.mh-lab { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.mh-h { font-size:22px; font-variant-numeric:tabular-nums; }
.mh-n { font-size:11px; color:var(--muted); }

/* A planning square holds two classes with all three jobs spelled out, so it
   needs the height. */
#planCal .cal-cell { min-height:170px; }
.pc-cls { display:block; padding:5px 6px 6px; }
.pc-cls > b { display:block; font-size:11px; margin-bottom:3px; }
.pc-line { display:flex; align-items:center; gap:4px; font-style:normal;
           font-size:10.5px; line-height:1.5; color:#31415a; }
.pc-line .cal-role { margin-left:0; flex:none; }
.pc-line span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-line.pc-gap span { color:var(--red); }
#planWorkload { margin-bottom:14px; }
.pw-tbl td, .pw-tbl th { font-variant-numeric:tabular-nums; }
.pw-tbl .cap-bar { min-width:90px; }
/* The section picked in the topbar, marked in the comparison table it came from. */
tr.row-on td { background:#fff4f5; box-shadow:inset 3px 0 0 var(--brand); }
tr.row-on td:first-child b { color:var(--brand); }
.hd-toggle { display:inline-flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:#fff; }
.hd-toggle button { border:0; background:transparent; padding:5px 10px; font-size:12px; cursor:pointer; color:#31415a; }
.hd-toggle button + button { border-left:1px solid var(--line); }
.hd-toggle button.on { background:var(--red); color:#fff; }
.hd-group .hd-sel + .hd-sel { margin-left:4px; }
/* CEO overview */
.ceo-scope { margin:0 0 14px; display:flex; flex-direction:column; gap:8px; }
.ceo-sub { padding-left:2px; align-items:center; }
.ceo-card { margin-bottom:14px; }
.ceo-card .card-h { margin:0 0 10px; font-size:15px; }
/* Who's training: the figures open */
.mini-kpi.demo-open { cursor:pointer; }
.mini-kpi.demo-open:hover { box-shadow:inset 0 0 0 1px var(--brand); }
.mini-kpi.on { box-shadow:inset 0 0 0 2px var(--brand); }
.demo-list { margin-top:12px; }
.demo-grid { display:grid; gap:0 18px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
/* Directory: sortable headings */
#membersWorkspace th[data-sort] { cursor:pointer; user-select:none; white-space:nowrap; }
#membersWorkspace th[data-sort]:hover { color:var(--brand); }
#membersWorkspace th[data-sort].sorted::after { content:" ▲"; font-size:9px; color:var(--brand); }
#membersWorkspace th[data-sort].sorted[data-dir="desc"]::after { content:" ▼"; }
.ceo-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ceo-card-head .card-h { margin:0 0 8px; }
.ceo-toggle button { padding:4px 9px; font-size:11.5px; }
/* Class calendar: colour is fullness against capacity */
.cal-cls.cal-full  { background:#fde3e3; }
.cal-cls.cal-quiet { background:#e6f0fa; }
.cal-cls.cal-on    { outline:2px solid var(--brand); outline-offset:1px; }
.cal-cls .cal-n    { display:inline; font-size:inherit; color:var(--ink); }
.cal-fill { display:block; height:4px; border-radius:99px; background:rgba(0,0,0,.08); margin-top:3px; overflow:hidden; }
.cal-fill u { display:block; height:100%; background:rgba(0,0,0,.35); text-decoration:none; }
.cal-full .cal-fill u  { background:var(--red); }
.cal-ok .cal-fill u    { background:var(--green); }
.cal-quiet .cal-fill u { background:#2f7fc4; }
.cal-dot.cal-full  { background:#e57373; }
.cal-dot.cal-quiet { background:#7fb0e0; }
.cal-dot.cal-ahead { background:#d5d9e0; }
.cal-people { margin-top:12px; }
.cal-people-grid { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.cal-people .mv-list { max-height:420px; }
.cal-first { font-style:normal; font-size:10px; color:var(--teal); margin-left:4px; }
/* Values printed on the lines. A white halo keeps them readable where a
   label crosses a gridline or another series. */
.ch-val { font-size:10.5px; font-weight:600; font-family:inherit;
          paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linejoin:round; }
.hd-scope { flex-direction:column; align-items:flex-start; gap:6px; }
.hd-scope .hd-sub { align-items:center; padding-left:2px; }
.hd-scope { flex-direction:column; align-items:flex-start; gap:6px; }
.hd-scope .hd-sub { align-items:center; padding-left:2px; }
#capacityBlock { margin-bottom:18px; }
.cap-secrow { cursor:pointer; }
.cap-secrow:hover { background:#f4f6f9; }
.cap-secrow td:first-child .stu-mail { margin-left:8px; }
.cap-caret { display:inline-block; width:14px; color:var(--muted); }
.cap-sub td { background:#fafbfc; font-size:12.5px; }
.cap-indent { padding-left:30px !important; }
.cap-est { font-size:9.5px; color:var(--muted); margin-left:6px; border:1px solid var(--line);
           border-radius:4px; padding:0 4px; }
.cap-tbl .cap-bar { margin-top:3px; min-width:90px; }
.cap-click { cursor:pointer; }
.cap-sub.cap-click:hover td { background:#eef2f7; }
button.cap-caret { border:0; background:transparent; font:inherit; cursor:pointer;
                   padding:0 4px 0 0; color:var(--muted); }
button.cap-caret:hover { color:var(--brand); }
.cap-cal { border:1px solid var(--line); background:#fff; border-radius:6px; font:inherit;
           font-size:10.5px; color:var(--muted); padding:1px 7px; margin-left:10px; cursor:pointer; }
.cap-cal:hover { border-color:var(--brand); color:var(--brand); }
.cap-lim .cap-in { width:70px; text-align:right; }
.cap-lim tr.cap-guess td { background:#fffdf4; }
#capLimits { margin-top:14px; }
#leftToContactBlock { margin-bottom:18px; }
.ltc-name { cursor:pointer; }
.ltc-name:hover b { color:var(--brand); }
.ltc-actions { display:flex; gap:6px; flex-wrap:wrap; }
.ltc-tbl td { vertical-align:top; }
.ltc-tbl tr.ltc-done td { background:#f2f9f4; }
.ltc-tbl tr.ltc-done .ltc-name b { color:var(--green); }
.ltc-tbl tr.ltc-done td:first-child { box-shadow:inset 3px 0 0 var(--green); }
.ltc-tags { max-width:140px; }
.ltc-res { min-width:190px; }
.res-top { white-space:nowrap; }
.res-classes { display:flex; flex-wrap:wrap; gap:4px; margin-top:3px; }
.res-cls { font-size:10.5px; background:#eef1f5; border-radius:4px; padding:1px 6px; color:#31415a; }
.res-cls b { font-variant-numeric:tabular-nums; }
.res-more { font-size:10.5px; color:var(--muted); padding:1px 2px; }
.ltc-tbl tr.ltc-done .res-cls { background:#e4f1e8; }
.tag-bs { display:inline-block; font-size:10px; border:1px solid #cfd6e0; background:#fff;
          color:#4a5568; border-radius:4px; padding:1px 6px; margin:0 3px 3px 0; }
.ltc-tbl tr.ltc-done .tag-bs { background:#f7fcf9; }
.ctl-sep { display:inline-block; width:1px; height:22px; background:var(--line); margin:0 4px; }
#noSessionBanner { position:fixed; inset:0; z-index:9999; background:rgba(10,10,12,.72);
                   display:flex; align-items:center; justify-content:center; padding:20px; }
#noSessionBanner .nsb-card { background:#fff; border-radius:12px; padding:26px 28px; max-width:520px; }
#noSessionBanner h2 { margin:0 0 10px; font-size:19px; }
#noSessionBanner p { margin:0 0 12px; line-height:1.5; color:#31415a; }
#noSessionBanner .nsb-links { display:flex; gap:16px; flex-wrap:wrap; margin:16px 0 0; }
#noSessionBanner .nsb-links a { color:var(--brand); font-weight:600; }
.bi-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sec-chip { flex:none; font-size:10px; font-weight:700; padding:1px 7px; border-radius:20px;
            color:var(--sc); background:color-mix(in srgb, var(--sc) 13%, #fff);
            border:1px solid color-mix(in srgb, var(--sc) 35%, #fff); white-space:nowrap; }
/* The line under every chart that says how it was worked out. */
.ch-explain { margin:8px 2px 0; font-size:11.5px; line-height:1.5; color:var(--muted); max-width:78ch; }
/* Age · gender beside a name. Quiet by default; "parent" stands out, because
   writing to a parent as though they were the member is the mistake it
   exists to prevent. */
.who-tag { display:inline-block; margin-left:6px; font-size:10px; font-weight:600; line-height:1.5;
           padding:0 6px; border-radius:20px; background:#eef1f5; color:#4a5568;
           vertical-align:1px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.who-tag.who-m { background:#e8f0fa; color:#2f5f96; }
.who-tag.who-f { background:#fbeaf1; color:#9b3563; }
.who-tag.who-parent { background:#fff4dc; color:#8a5a00; }
.ltc-sortbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px; }
.ltc-rank { width:28px; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; font-weight:600; }
/* The thank-you email card */
#trialEmailBlock { margin-bottom:18px; }
.te-grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.te-list { max-height:320px; overflow-y:auto; border:1px solid var(--line); border-radius:10px; }
.te-row { display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:7px 11px; align-items:center; }
.te-row + .te-row { border-top:1px solid #f0f2f5; }
.te-row .stu-mail { grid-column:1; }
.te-row .te-send { grid-row:1 / span 2; grid-column:2; }
.te-row .mv-name { cursor:pointer; }
.te-send { border:1px solid var(--line); background:#fff; border-radius:6px; font:inherit; font-size:11px; padding:3px 9px; cursor:pointer; }
.te-send:hover { border-color:var(--brand); color:var(--brand); }
.cc-chip.cc-chip-trial { border-color:var(--brand); color:var(--brand); font-weight:600; }
.te-held { display:flex; gap:6px; flex-wrap:wrap; }
.te-warn { margin:0 0 12px; padding:10px 12px; border-radius:8px; background:#fdf1f1; color:#8a2b2b; font-size:12.5px; }

/* Ages & time in the club: two charts side by side, stacking on narrow screens. */
.ten-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(430px,1fr)); margin-bottom:6px; }
.ten-grid .card { margin:0; }

/* Month report: five questions, each answering itself in the summary line
   and opening into the detail behind it. */
.mr-sec { background:var(--card); border:1px solid var(--line); border-radius:11px;
  margin-bottom:10px; overflow:hidden; }
.mr-sec > summary { cursor:pointer; padding:14px 16px; display:grid; gap:2px 14px;
  grid-template-columns:minmax(150px,auto) 1fr; align-items:baseline; list-style:none; }
.mr-sec > summary::-webkit-details-marker { display:none; }
.mr-sec > summary:hover { background:#fafbfc; }
.mr-sec .mr-title { font-weight:700; font-size:15px; }
.mr-sec .mr-title:before { content:"\25B8"; color:var(--brand); margin-right:8px; font-size:11px; }
.mr-sec[open] .mr-title:before { content:"\25BE"; }
.mr-sec .mr-head { font-size:14px; }
.mr-sec .mr-head b { font-size:19px; letter-spacing:-.01em; }
.mr-sec .mr-sub { grid-column:2; color:var(--muted); font-size:12.5px; }
.mr-sec[open] > summary { border-bottom:1px solid var(--line); }
.mr-body { padding:14px 16px 16px; }
.mr-body table { margin-top:2px; }
.mr-body .kpis { margin-bottom:12px; }
@media(max-width:700px){ .mr-sec > summary { grid-template-columns:1fr; } .mr-sec .mr-sub { grid-column:1; } }

/* The owner's own note on a block of the month report. */
.mr-note { background:#fbfcfd; border:1px solid var(--line); border-radius:9px;
  padding:10px 12px; margin-bottom:14px; }
.mr-note textarea { width:100%; border:1px solid var(--line); border-radius:7px; padding:8px 10px;
  font:inherit; font-size:13.5px; line-height:1.5; resize:vertical; background:#fff; }
.mr-note textarea:focus { outline:2px solid var(--brand); outline-offset:-1px; }
.mr-note-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:7px; }
.mr-note.read { background:#fff8e6; border-color:#f1dca8; }
.mr-note.read p { margin:0 0 5px; font-size:14px; line-height:1.55; }
.mr-dot { margin-left:8px; padding:1px 7px; border-radius:20px; background:#fdeaef; color:var(--brand-dark);
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; vertical-align:1px; }

@media print {
  .side, .topbar, #pageHeading, .wl-btn, .mr-note-foot button, .table-actions { display:none !important; }
  .main { padding:0; max-width:none; }
  body { background:#fff; }
  .mr-sec, .card { break-inside:avoid; border-color:#d8dbe0; }
  .mr-sec > summary { background:#fff !important; }
  .mr-note textarea { border:none; padding:0; resize:none; background:#fff; }
  a[href]:after { content:""; }
}

/* Survival, as a bar you can read across a row. */
.surv-bar { display:block; height:7px; min-width:90px; background:#eef1f5; border-radius:4px; overflow:hidden; }
.surv-bar { position:relative; }
.surv-bar i { display:block; height:100%; background:var(--teal); border-radius:4px; opacity:.35; }
.surv-bar u { position:absolute; left:0; top:0; height:100%; background:var(--teal); border-radius:4px; }
tr.surv-none td { color:var(--muted); }

/* Month report: block charts on screen, and the sheet that prints. */
.rp-svg { width:100%; height:auto; display:block; }
.rp-lab { font-size:10.5px; fill:#3c4450; }
.rp-val { font-size:10.5px; font-weight:700; fill:#14161a; }
.rp-pt { font-size:8.5px; font-weight:600; fill:#3c4450; }
.rp-pt.last { font-size:10px; font-weight:800; fill:#14161a; }
.rp-ax { font-size:7.5px; fill:#9aa1ac; }
.rp-cap { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:0 0 4px; }
.rp-two { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.rp-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:var(--muted); margin-top:4px; }
.rp-legend i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
.rp-screen { margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line); max-width:860px; }
.mr-summary { margin:0 0 12px; }
.mr-summary .mr-note { margin-bottom:0; }

#mrPrintSheet { display:none; }
body.mr-sheet-open { overflow:hidden; }
body.mr-sheet-open #mrPrintSheet { display:block; position:fixed; inset:0; overflow:auto; background:#dfe2e7; z-index:900; }
.rp-bar { position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 18px; background:#14161a; color:#fff; font-size:13px; }
.rp-bar span { color:#b9bfc9; flex:1; min-width:200px; }
.rp-page { width:794px; max-width:calc(100% - 24px); margin:22px auto 40px; background:#fff; color:#14161a;
  padding:42px 46px; box-shadow:0 8px 30px rgba(16,24,40,.18); }
.rp-top { display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  border-bottom:3px solid #d50032; padding-bottom:12px; margin-bottom:16px; }
.rp-eyebrow { color:#d50032; font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.rp-top h1 { margin:4px 0 0; font-size:25px; letter-spacing:-.02em; }
.rp-meta { font-size:11px; color:#6b7280; text-align:right; }
.rp-panel { margin:0 0 20px; padding-top:4px; break-inside:avoid; }
.rp-panel h3 { margin:0 0 3px; font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#6b7280; }
.rp-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:2px; }
.rp-head b { font-size:22px; letter-spacing:-.02em; }
.rp-head span { font-size:13px; color:#0f766e; font-weight:700; }
.rp-detail { margin:0 0 9px; font-size:12.5px; color:#6b7280; }
.rp-note { margin:10px 0 0; padding:10px 13px; background:#fff8e6; border-left:3px solid #e0b64a;
  font-size:13px; line-height:1.55; border-radius:0 6px 6px 0; }
.rp-page > .rp-note { margin:0 0 18px; font-size:14px; }
.rp-names { margin-top:10px; columns:2; column-gap:22px; font-size:10.5px; line-height:1.55; color:#3c4450; }
.rp-names span { display:block; break-inside:avoid; }
.rp-foot { margin-top:8px; padding-top:9px; border-top:1px solid #e3e5ea; font-size:10px; color:#9aa1ac; }

@media print {
  @page { size:A4; margin:13mm; }
  body.mr-sheet-open > *:not(#mrPrintSheet) { display:none !important; }
  body.mr-sheet-open { overflow:visible; background:#fff; }
  body.mr-sheet-open #mrPrintSheet { position:static; overflow:visible; background:#fff; }
  .rp-bar { display:none !important; }
  .rp-page { width:auto; max-width:none; margin:0; padding:0; box-shadow:none; }
  .rp-note { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .rp-svg rect, .rp-svg path, .rp-svg circle { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* Month report: the KPI scoreboard, and drafted notes. */
.mrk { margin:0 0 12px; padding:14px 16px; }
.mrk .mo-head span { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.mrk-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:6px 26px; }
.mrk-col .rp-cap { margin:4px 0 2px; padding-bottom:5px; border-bottom:1px solid var(--line); }
.mrk-row { display:grid; grid-template-columns:1fr auto; gap:1px 10px; align-items:center;
  padding:8px 0; border-bottom:1px solid var(--line); }
.mrk-row:last-child { border-bottom:none; }
.mrk-name { font-size:13px; font-weight:600; }
.mrk-tag { margin-left:7px; font-size:10.5px; font-weight:600; color:var(--muted); }
.mrk-val { grid-column:1; font-size:13px; font-variant-numeric:tabular-nums; }
.mrk-val b { font-size:20px; letter-spacing:-.02em; margin-right:7px; }
.mrk-meta { grid-column:1; font-size:11.5px; color:var(--muted); line-height:1.4; }
.mrk-meta b { color:var(--ink, #14161a); }
.mrk-row .pill { grid-column:2; grid-row:1 / span 3; align-self:center; white-space:nowrap; }
.mrk-edit { grid-column:1; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mrk-edit input { width:74px; padding:4px 6px; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:13px;
  font-variant-numeric:tabular-nums; }
.mrk-edit input:focus { outline:2px solid var(--brand); outline-offset:-1px; }
.mrk-edit em { font-style:normal; font-size:10.5px; }
.mr-note-btns { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.mr-dot.draft { background:#eef0f3; color:#5b6472; }

.rp-draft-tag { display:block; margin-bottom:4px; font-size:9.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:#9a6b00; }
.rp-kpi { width:100%; border-collapse:collapse; font-size:11.5px; margin-top:4px; font-variant-numeric:tabular-nums; }
.rp-kpi th { text-align:left; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#9aa1ac;
  padding:3px 8px 3px 0; border-bottom:1px solid #e3e5ea; }
.rp-kpi td { padding:4px 8px 4px 0; border-bottom:1px solid #eef0f3; vertical-align:baseline; }
.rp-kpi td:nth-child(2), .rp-kpi td:nth-child(3) { white-space:nowrap; }
.rp-kpi td i { font-style:normal; font-size:9.5px; color:#9aa1ac; }
.rp-kpi td span { color:#6b7280; }
.rp-kpi-g td { padding-top:8px; font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#d50032; border-bottom:none; }
.rp-kpi-how { color:#6b7280; font-size:10.5px; }
.rp-st { display:inline-block; padding:1px 8px; border-radius:20px; font-size:10px; font-weight:700; white-space:nowrap; }
.rp-kpi td .rp-st-good { background:#e3f4ea; color:#14683a; }
.rp-kpi td .rp-st-close { background:#fdf1d6; color:#8a5a00; }
.rp-kpi td .rp-st-bad { background:#fde4e7; color:#a31224; }
.rp-kpi td .rp-st-none { background:#eef0f3; color:#5b6472; }
@media print {
  .rp-draft-tag { display:none !important; }
  .rp-st { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* KPI ranges, and the customers behind a KPI. */
.pill.great { background:#d9f2e3; color:#0b5a2e; font-weight:700; }
.mrk-row.click { cursor:pointer; border-radius:7px; margin:0 -6px; padding-left:6px; padding-right:6px; }
.mrk-row.click:hover { background:#f6f8fa; }
.mrk-row.on { background:#fdf1f4; box-shadow:inset 3px 0 0 var(--brand); }
.mrk-edit input { width:64px; }
.mrp { margin:12px 0 4px; padding:12px 14px 14px; border:1px solid var(--line); border-radius:10px; background:#fbfcfd; }
.mrp-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; font-size:14px; }
.mrp-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.mrp-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.mrp-bar input { border:1px solid var(--line); border-radius:7px; padding:6px 10px; font:inherit; font-size:13px; min-width:200px; }
.mrp-body { max-height:520px; overflow:auto; background:#fff; border:1px solid var(--line); border-radius:8px; }
.mrp-body table { margin:0; }
.mrp-body thead th { position:sticky; top:0; background:#fff; z-index:1; }
.rp-kpi td .rp-st-great { background:#d9f2e3; color:#0b5a2e; }

/* The customer tag: section, gender and age, member since -- one wrapper so
   the three chips travel together wherever a name is shown. */
.who-tags { display:inline-flex; flex-wrap:wrap; gap:4px; margin-left:6px; vertical-align:1px; align-items:center; }
.who-tags .who-tag { margin-left:0; }
.who-tag.who-since { background:#e6f4f1; color:#0f5f57; }
.who-tag.who-since.who-former { background:#f1f2f4; color:#6b7280; }
.who-tag.who-none { background:#f6f1e7; color:#7a5a1e; }
.client-who { margin:0 0 12px; }
.client-who .who-tags { margin-left:0; gap:6px; }
.client-who .who-tag, .client-who .sec-chip { font-size:12px; padding:2px 10px; }

/* A member's attendance on their own page. */
.ca-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ca-tile { border:1px solid var(--line); border-radius:8px; padding:7px 9px; background:#fff; }
.ca-tile span { display:block; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.ca-tile b { font-size:19px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ca-tile i { display:block; font-style:normal; font-size:11px; color:var(--muted); line-height:1.35; }
.ca-bars { display:grid; grid-template-columns:repeat(12,1fr); gap:4px; align-items:end; margin:12px 0 4px; height:70px; }
.ca-bar { display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; }
.ca-bar em { font-style:normal; font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; }
.ca-bar u { display:block; width:100%; max-width:26px; background:var(--teal, #0f766e); border-radius:3px 3px 0 0; text-decoration:none; }
.ca-bar span { font-size:9.5px; color:var(--muted); margin-top:3px; white-space:nowrap; }
.ca-more { margin-top:10px; border-top:1px solid var(--line); padding-top:8px; }
.ca-more > summary { cursor:pointer; font-size:12.5px; font-weight:700; color:#31415a; }
.ca-more table { margin-top:8px; }
.ca-month { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:12px 0 4px; font-size:13px; }
.ca-month span { font-size:11.5px; color:var(--muted); }
.ca-tbl { width:100%; border-collapse:collapse; font-size:12.5px; }
.ca-tbl td { padding:5px 8px 5px 0; border-top:1px solid var(--line); vertical-align:top; }
.ca-tbl td:first-child, .ca-tbl td:nth-child(2) { white-space:nowrap; font-variant-numeric:tabular-nums; color:#31415a; }
.ca-tbl td:last-child { text-align:right; white-space:nowrap; padding-right:0; }

/* A section set by hand: the same chip, visibly not automatic. */
.sec-chip.by-hand { border-style:dashed; border-width:1.5px; }
.sec-chip.by-hand:after { content:" \270E"; font-weight:400; }
.client-section { display:grid; grid-template-columns:auto 1fr auto; gap:6px 8px; align-items:center; margin:0 0 14px; }
.client-section #clientSectionSecond { grid-column:2 / span 2; }
.client-section label { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.client-section p { grid-column:1 / -1; margin:0; }
tr.mr-row-on td { background:#fdf1f4; }

/* On the mat now. */
.lv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; margin-top:4px; }
.lv-card { border:1px solid var(--line); border-radius:10px; padding:11px 13px; background:#fff; }
.lv-card.lv-now { border-color:var(--brand); box-shadow:0 0 0 2px #fdf1f4; }
.lv-card.lv-done { background:#fbfcfd; }
.lv-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.lv-top b { font-size:14.5px; }
.lv-when { font-size:11px; font-weight:700; color:var(--muted); white-space:nowrap; }
.lv-card.lv-now .lv-when { color:var(--brand); }
.lv-sub { font-size:11.5px; color:var(--muted); margin-bottom:6px; }
.lv-count { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.lv-count b { font-size:20px; color:var(--ink,#14161a); letter-spacing:-.02em; }
.lv-bar { flex:1; min-width:60px; height:6px; background:#eef1f5; border-radius:4px; overflow:hidden; }
.lv-bar u { display:block; height:100%; background:#15803d; text-decoration:none; }
.lv-people { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.lv-p { display:inline-flex; align-items:center; font-size:11.5px; padding:2px 7px; border-radius:20px; cursor:pointer; }
.lv-p.in { background:#e3f4ea; color:#14683a; }
.lv-p.out { background:#f1f2f4; color:#5b6472; }
.lv-p:hover { outline:1.5px solid var(--brand); }
.lv-p i { font-style:normal; margin-left:5px; padding:0 4px; border-radius:20px; font-size:10px;
          font-weight:700; background:rgba(0,0,0,.07); }
.lv-note { font-size:10.5px; color:var(--muted); margin-top:5px; }
.sec-half { margin-left:-2px; font-size:10px; font-weight:800; color:var(--muted);
            padding:0 3px; border-radius:4px; background:#eef1f5; }
.lst-half { display:inline-block; margin-top:2px; padding:0 5px; border-radius:20px; background:#fff4dc;
            color:#8a5a00; font-size:10px; font-weight:800; }

/* --- The member panel on a phone -----------------------------------------
   Andre, 19 Sep 2026: "add notes, belts and access student information from
   the app in my mobile". On a phone the panel is the whole screen, and the
   notes box sat about six thousand pixels down -- past the belt, the
   summary, the attendance, the whole email thread, the compose box, the
   memberships, the tags and the facts. Reachable in theory; nobody standing
   on the mat was ever going to reach it.

   So on a phone the panel is a flex column and the order is what somebody
   holding a phone beside a student actually wants: who they are, their belt,
   the note, then the reading. Email and the section override -- the two
   things that are desk work -- go to the end. The markup keeps its desktop
   order; only the phone reorders. */
.cn-foot { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.cn-btns { display:flex; gap:8px; flex-wrap:wrap; }

@media(max-width:620px){
  .client-panel { display:flex; flex-direction:column; padding:18px 16px 90px; }
  .client-panel-header { order:1 }
  #clientName { order:2 }
  #clientEmail { order:3 }
  #clientWho { order:4 }
  #clientConsentNote { order:5 }
  .belt-row { order:6 }
  #clientRankRow { order:7 }
  #clientNotesSection { order:8 }
  .summary-box { order:9 }
  #clientAttendanceBox { order:10 }
  .status-box:not(#clientAttendanceBox):not(#clientMembershipsBox) { order:11 }
  #clientMembershipsBox { order:12 }
  #clientTags { order:13 }
  .client-facts-grid { order:14 }
  #clientExtra { order:15 }
  .bsport-notes-box { order:16 }
  #clientSectionBox { order:17 }
  #clientEmailSection { order:18 }

  /* Two rows that ran off the right edge at 375px: the select took all the
     width the grid offered and pushed Save past the screen. */
  #clientRankRow { flex-wrap:wrap }
  #clientRankRow .select { flex:1 1 100%; min-width:0 }
  #clientRankRow .btn-primary { flex:1 1 auto }
  .client-section { grid-template-columns:1fr; }
  .client-section #clientSectionSecond, .client-section .btn-primary { grid-column:1 }
  .client-panel .select, .client-panel textarea, .client-panel input { max-width:100% }
  /* The tab bar sits over the bottom of the panel otherwise. */
  #clientNotesSection { scroll-margin-top:12px }
  .ca-tiles { grid-template-columns:repeat(2,1fr) }
}

/* On the mat now, on a phone: three small tiles in a row rather than three
   full-width cards, so the classes themselves are on the first screen. */
@media(max-width:620px){
  .kpis.lv-kpis { grid-template-columns:repeat(3,1fr); gap:6px }
  .lv-kpis .kpi { padding:8px 9px }
  .lv-kpis .lab { font-size:9.5px; letter-spacing:.03em }
  .lv-kpis .val { font-size:17px !important }
  .lv-kpis .sub { font-size:10px; line-height:1.3 }
  .lv-grid { grid-template-columns:1fr }
  .lv-people { gap:3px }
  .lv-p { font-size:12.5px; padding:3px 8px }
}

/* On a phone the section chips wrapped onto three rows and pushed the page
   itself below the fold. One row that scrolls sideways instead: the chosen
   one is always visible, and the rest are a thumb-flick away. Both bars --
   the drill bar most pages use and the heading chips -- because which one
   you get depends on the page. */
@media(max-width:620px){
  .hd-chips, .drill-next { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
              -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  .hd-chips::-webkit-scrollbar, .drill-next::-webkit-scrollbar { display:none }
  .hd-chips > *, .drill-next > * { flex:0 0 auto }
}

/* --- Classes, on the phone (Andre, 21 Sep 2026) ---------------------------
   Today first, earlier days above, later below. The list pins its own bar --
   title, Mine / All, Today -- under the top bar, and each day's heading pins
   under that, so you always know which day you are looking at. */
body.on-myclasses #pageHeading{display:none}
.mc{--mcbar:54px;max-width:640px;margin:0 auto}
.mc-bar{position:sticky;top:var(--topbar-h,0px);z-index:40;display:flex;align-items:center;gap:6px;
  height:var(--mcbar);background:var(--bg);margin:0 -4px;padding:0 4px}
.mc-h{margin:0 auto 0 0;font-size:19px;letter-spacing:-.01em}
.mc-bar button{border:1px solid var(--line);background:#fff;color:#39414d;border-radius:999px;
  padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;min-height:36px}
.mc-bar button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.mc-bar .mc-jump{color:var(--brand);border-color:#f1c4cf}
.mc-older{display:block;width:100%;margin:6px 0 4px;border:1px dashed #cdd2da;background:transparent;
  color:var(--muted);border-radius:10px;padding:11px;font-size:13px;font-weight:600;cursor:pointer}
.mc-edge{text-align:center;color:var(--muted);font-size:12px;margin:14px 0;line-height:1.5}
.mc-empty{color:var(--muted);text-align:center;padding:40px 0}

.mc-day{scroll-margin-top:calc(var(--topbar-h,0px) + var(--mcbar,54px));margin-bottom:6px}
.mc-dh{position:sticky;top:calc(var(--topbar-h,0px) + 54px);z-index:30;display:flex;align-items:baseline;gap:8px;
  margin:0;padding:10px 2px 7px;background:var(--bg);font-size:13px;font-weight:600;color:#39414d}
.mc-dh b{font-size:15px;color:var(--ink)}
.mc-dh span{color:var(--muted)}
.mc-dh em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--muted)}
.mc-today .mc-dh b{color:var(--brand)}
.mc-today .mc-dh{border-bottom:2px solid var(--brand)}
.mc-none{margin:4px 2px 12px;color:var(--muted);font-size:13px}

.mc-cls{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;
  text-align:left;background:#fff;border:1px solid var(--line);border-left:4px solid var(--sec,#5a6472);
  border-radius:12px;padding:11px 13px 11px 11px;margin:0 0 8px;cursor:pointer;font:inherit;color:inherit;
  min-height:64px}
.mc-cls:active{background:#f7f8fa}
.mc-cls:focus-visible,.mc-p:focus-visible,.mc-back:focus-visible,.mc-bar button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.mc-time b{display:block;font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mc-time i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:2px}
.mc-mid{min-width:0}
.mc-mid>b{display:block;font-size:14.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-mid>span{display:block;font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-mid em{display:inline-block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.03em;
  border-radius:5px;padding:2px 6px;margin:5px 5px 0 0}
.mc-live{background:var(--brand);color:#fff}
.mc-role{background:#eef0f4;color:#39414d}
.mc-num{text-align:right;font-variant-numeric:tabular-nums}
.mc-num b{display:block;font-size:19px;line-height:1}
.mc-num i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:3px}
.mc-done{opacity:.78}
.mc-done .mc-time b{color:#58606c}
.mc-now{border-color:#f1c4cf;box-shadow:0 0 0 3px rgba(213,0,50,.08)}

/* The sheets: a class, then a person on top of it. Full screen on a phone,
   a panel on the right on a desktop. */
body.mc-locked{overflow:hidden}
.mc-sheet{position:fixed;inset:0;z-index:120;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(100%);transition:transform .2s ease;visibility:hidden}
.mc-sheet.on{transform:none;visibility:visible}
#mcPerson{z-index:121}
@media(min-width:1051px){
  .mc-sheet{left:auto;width:min(480px,94vw);border-left:1px solid var(--line);box-shadow:-10px 0 30px rgba(0,0,0,.16)}
}
@media(prefers-reduced-motion:reduce){.mc-sheet{transition:none}}
.mc-sh-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;background:var(--bg);
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;border-bottom:1px solid var(--line)}
.mc-back{border:0;background:none;color:var(--brand);font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  padding:8px 4px;min-height:40px;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-sh-when{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);background:#eef0f4;border-radius:6px;padding:4px 8px}
.mc-sh-when.mc-w-now{background:var(--brand);color:#fff}
.mc-sh-body{padding:16px 16px calc(40px + env(safe-area-inset-bottom));max-width:640px;margin:0 auto}
.mc-kicker{margin:0;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.mc-title{margin:4px 0 4px;font-size:21px;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.mc-meta{margin:0;font-size:13px;color:#39414d;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.mc-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--sec,#5a6472);margin-right:3px}
.mc-tally,.mc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;margin:14px 0 4px}
.mc-tally div,.mc-stats div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 11px}
.mc-tally b,.mc-stats b{display:block;font-size:22px;line-height:1;font-variant-numeric:tabular-nums}
.mc-tally span,.mc-stats span{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}
.mc-fresh{font-size:12px;color:var(--green);margin:8px 0 0}
.mc-lh{display:flex;align-items:baseline;gap:8px;margin:20px 0 8px;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#58606c}
.mc-lh span{font-size:12px;letter-spacing:0;color:var(--muted);font-weight:600}
.mc-note{font-size:12.5px;color:#58606c;background:#eef0f4;border-radius:8px;padding:9px 11px;line-height:1.5;margin:10px 0}
.mc-line{font-size:13px;color:#39414d;margin:8px 0 0;line-height:1.55}
.mc-soft{color:var(--muted);font-size:12px}

.mc-p{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:9px 11px;margin:0 0 6px;cursor:pointer;font:inherit;color:inherit;min-height:56px}
.mc-p:active{background:#f7f8fa}
.mc-p:not(.in) .mc-pn b{color:#58606c}
.mc-pn{min-width:0;flex:1}
.mc-pn b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-pn span{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.mc-trial{color:#b45309;font-weight:700}
.mc-first{color:var(--teal);font-weight:700}
.mc-tick{font-style:normal;color:var(--green);font-weight:800;font-size:15px}
.mc-chev{color:#b0b6bf;font-size:20px;line-height:1}
.mc-p .belt-stamp{margin-right:0}

/* Photo when the member uploaded one, initials underneath when not (and when
   the photo fails to load, which it can -- it is Bsport's server, not ours). */
.mc-av{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:#dfe3ea;color:#39414d;font-weight:700;overflow:hidden;width:38px;height:38px;font-size:13px}
.mc-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mc-av-l{width:76px;height:76px;font-size:24px}
.mc-who{display:flex;align-items:center;gap:14px}
.mc-who .mc-title{margin:0 0 6px}
.mc-tags{display:flex;flex-wrap:wrap;gap:4px}

/* The belt, drawn: its colour, a junior belt's white or black bar, and the
   black tip (red on a black belt) carrying the stripes. */
.mc-belt{position:relative;display:inline-block;flex:none;width:96px;height:22px;border-radius:4px;
  background:var(--b);border:1px solid rgba(0,0,0,.18);overflow:hidden;vertical-align:middle}
.mc-belt.big{width:150px;height:30px}
.mc-belt-none{background:repeating-linear-gradient(45deg,#eef0f4 0 6px,#e3e6ec 6px 12px)}
.mc-beltbar{position:absolute;left:0;right:0;top:36%;height:28%;background:var(--bar)}
.mc-tip{position:absolute;right:10%;top:0;bottom:0;width:26%;background:var(--tip);display:flex;
  flex-direction:row-reverse;align-items:stretch;gap:3px;padding:3px 4px}
.mc-tip u{display:block;width:3px;background:#f4f3ee;text-decoration:none}
.mc-belt.big .mc-tip u{width:4px}
.mc-beltbox{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px}
.mc-beltbox b{display:block;font-size:15px}
.mc-beltbox span{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45}
.mc-grade{display:grid;gap:12px;margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
.mc-grade label{display:grid;gap:5px;font-size:12px;font-weight:600;color:#58606c}
.mc-grade select,.mc-grade input[type=date]{font:inherit;font-size:15px;border:1px solid var(--line);border-radius:9px;
  padding:10px 11px;background:#fff;color:var(--ink);min-height:44px;width:100%}
.mc-stripes{border:0;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.mc-stripes legend{font-size:12px;font-weight:600;color:#58606c;margin-bottom:5px;padding:0}
.mc-stripes label{display:block}
.mc-stripes input{position:absolute;opacity:0;pointer-events:none}
.mc-stripes span{display:flex;align-items:center;justify-content:center;width:46px;height:44px;border-radius:9px;
  border:1px solid var(--line);font-size:16px;font-weight:700;color:#39414d;cursor:pointer;background:#fff}
.mc-stripes input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.mc-stripes input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.mc-save{min-height:46px;font-size:15px}
.mc-saved{font-size:13px;font-weight:600;min-height:18px}
.mc-saved.ok{color:var(--green)}
.mc-saved.bad{color:var(--brand)}
.mc-hist,.mc-recent{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mc-hist li{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#39414d}
.mc-hist .mc-belt{width:60px;height:14px}
.mc-recent li{display:flex;gap:10px;font-size:13px;padding:8px 11px;background:#fff;border:1px solid var(--line);border-radius:9px}
.mc-recent b{flex:none;width:92px;font-variant-numeric:tabular-nums}
.mc-recent span{color:#39414d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-full{margin-top:18px;width:100%;min-height:44px}

/* Stripes on a coloured belt, in the tables' stamps. */
.belt-stamp sup{font-size:8px;margin-left:1px;line-height:0}
.belt-visual-wrap{display:inline-flex}

/* --- Phone view, from the desktop ------------------------------------------ */
body.pp-locked{overflow:hidden}
.pp-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(10,10,12,.72);overflow:auto;padding:20px}
.pp-overlay.on{display:flex}
.pp-stage{display:flex;flex-direction:column;align-items:center;gap:14px;margin:auto}
.pp-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#fff;width:100%;max-width:760px}
.pp-top b{display:block;font-size:15px}
.pp-top span{display:block;font-size:12px;color:#b8bec7;margin-top:2px}
.pp-actions{display:flex;gap:6px;flex-wrap:wrap}
.pp-actions button{border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;border-radius:8px;
  padding:7px 12px;font-size:13px;cursor:pointer}
.pp-actions button.on{background:#fff;color:var(--navy)}
.pp-actions .pp-close{background:var(--brand);border-color:var(--brand)}
.pp-device{flex:none;border:12px solid #1b1d22;border-radius:46px;overflow:hidden;background:#fff;
  box-shadow:0 30px 60px rgba(0,0,0,.45);box-sizing:content-box}
.pp-device iframe{display:block;border:0;background:var(--bg)}
/* Trials and birthdays: the people to go and say hello to, on top. */
.mc-special{background:#fff7ec;border:1px solid #f6d7ae;border-radius:14px;padding:2px 10px 6px;margin-top:16px}
.mc-special .mc-lh{margin-top:12px;color:#8a4b0f}
.mc-special .mc-p{border-color:#f3dfc4}
.mc-bday{color:var(--brand);font-weight:700}
.mc-chip-trial{background:#fdecd6;color:#8a4b0f}
.mc-chip-bday{background:#fde4ea;color:var(--brand-dark)}
.mc-fresh.stale{color:#b45309}

/* On the mat now, as on the phone (Andre, 21 Sep 2026): each class lists its
   members as rows -- photo, name, age, belt, and classes attended in that
   section -- with trials and birthdays on top. */
.lv-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));align-items:start}
.lv-card{border-left:4px solid var(--sec,#5a6472)}
.lv-card .mc-lh{margin:14px 0 6px}
.lv-special{margin-top:10px;padding:0 8px 4px}
.lv-special .mc-lh{margin-top:10px}
.lv-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:7px 9px;margin:0 0 5px;cursor:pointer;font:inherit;color:inherit;min-height:50px}
.lv-row:hover{border-color:#c9ced6;background:#fbfbfc}
.lv-row:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.lv-row:not(.in) .lv-rn b{color:#58606c}
.lv-rn{min-width:0;flex:1}
.lv-rn b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-rn span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.lv-row .belt-stamp{margin-right:0}
.lv-nobelt{color:#c3c8d0;font-size:12px;width:18px;text-align:center}
.lv-att{flex:none;text-align:right;min-width:44px;font-variant-numeric:tabular-nums}
.lv-att b{display:block;font-size:15px;line-height:1}
.lv-att i{display:block;font-style:normal;font-size:10px;color:var(--muted);margin-top:2px}
.lv-state{flex:none;width:14px;font-style:normal;color:var(--green);font-weight:800;text-align:center}
.lv-row .mc-av{width:34px;height:34px;font-size:12px}
@media(max-width:620px){.lv-grid{grid-template-columns:1fr}}
/* The month report reads as words first (Andre, 22 Sep 2026); the KPI
   table is kept, closed, at the bottom -- and on paper, at the back. */
.mr-numbers{margin-top:14px}
.mr-numbers .mrk{border:0;box-shadow:none;padding:0}
.mr-summary .mr-note textarea{font-size:14.5px;line-height:1.6}
.mr-note.read p{font-size:14.5px;line-height:1.6}
.rp-ref{font-size:92%}
.mr-feel{font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.mr-feel-good{background:#e3f4ea;color:#14683a}
.mr-feel-mixed{background:#eef0f4;color:#39414d}
.mr-feel-behind{background:#fdecd6;color:#8a4b0f}
.mr-sec > summary{grid-template-columns:minmax(150px,auto) 1fr auto}
.mr-sec .mr-feel{align-self:center}
@media(max-width:700px){.mr-sec > summary{grid-template-columns:1fr auto}.mr-sec .mr-head{grid-column:1 / -1}}

/* Your month: what each section teaches, week by week (Andre, 22 Sep 2026). */
.obt{margin:0 0 10px;padding:0}
.obt > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;cursor:pointer;list-style:none}
.obt > summary::-webkit-details-marker{display:none}
.obt > summary b:before{content:"\25B8";color:var(--brand);margin-right:8px;font-size:11px}
.obt[open] > summary b:before{content:"\25BE"}
.obt-count{font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;background:#fdecd6;color:#8a4b0f;white-space:nowrap}
.obt-count.done{background:#e3f4ea;color:#14683a}
.obt-form{display:grid;gap:8px;padding:0 16px 14px}
.obt-week{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.obt-week span{font-variant-numeric:tabular-nums;font-weight:600}
.obt-week input{font:inherit;font-size:14px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;color:var(--ink)}
.obt-week input[readonly]{background:#f7f8fa;border-color:transparent}
.obt-week input:focus{outline:2px solid var(--brand);outline-offset:-1px}
.obt-focus span{color:var(--ink)}
.obt-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.ob-optional{font-size:12.5px;color:var(--muted);margin:2px 2px 6px}
.ob-optional a{color:var(--brand)}
@media(max-width:620px){.obt-week{grid-template-columns:1fr;gap:4px}}
/* My work: this week's subject and the month's goal, per section. */
.ht-card{margin-bottom:13px}
.ht-row{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:9px 0;border-top:1px solid var(--line)}
.ht-row:first-of-type{border-top:0}
.ht-sec{font-size:11px;font-weight:700;color:#fff;background:var(--sec,#5a6472);border-radius:5px;padding:3px 8px;margin-top:2px;white-space:nowrap}
.ht-row b{display:block;font-size:15px}
.ht-row b.unset{color:#b45309;font-weight:600;font-size:14px}
.ht-row small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
/* Levels in the month's teaching plan (22 Sep 2026). */
.obt-level{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:8px}
.obt-level:first-child{border-top:0;padding-top:0}
.obt-lname{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.obt-month span{color:var(--ink)}
.obt-week em,.obt-weeks em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-left:6px}
.obt-month em{color:var(--brand)}
.obt-weeks{margin-left:142px}
.obt-weeks > summary{cursor:pointer;font-size:12.5px;color:var(--muted);font-weight:600;padding:2px 0}
.obt-weeks[open] > summary{margin-bottom:6px}
.obt-weeks .obt-week{margin-bottom:6px;grid-template-columns:120px 1fr}
@media(max-width:620px){.obt-weeks{margin-left:0}}
.ht-lv{margin:0 0 6px}
.ht-lv:last-child{margin-bottom:0}
.ht-lv i{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
/* The month's and week's subject, first wherever a class is shown (22 Sep 2026). */
.tp-block{border:1px solid var(--line);border-left:4px solid var(--sec,#5a6472);border-radius:10px;padding:11px 13px;margin:0 0 12px;background:#fff}
.tp-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.tp-lv{margin:0 0 6px}
.tp-lv:last-child{margin-bottom:0}
.tp-lv i{display:block;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tp-lv b{display:block;font-size:15px}
.tp-lv span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.tp-miss{color:#b45309 !important;font-weight:600}
.tp-top{display:flex;flex-direction:column;gap:2px;font-size:12px;color:#39414d;background:#f7f8fa;border-radius:7px;
  padding:6px 9px;margin:0 0 8px;border-left:3px solid var(--sec,#5a6472)}
.tp-top i{font-style:normal;font-weight:700;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}
.tp-top b{font-weight:700;color:var(--ink)}
.tp-top.tp-none{color:#b45309;font-weight:600}
.plan-row .tp-top{margin:6px 0 4px}

/* Team: remove from the row, or tick several and remove them together
   (24 Sep 2026). */
.person-pick{display:flex;align-items:center;padding:4px;margin:-4px 0 -4px -6px;cursor:pointer}
.person-pick input{width:17px;height:17px;cursor:pointer;accent-color:var(--brand)}
.person-pick input:disabled{cursor:not-allowed;opacity:.35}
.person-head.picked{background:#fdf1f4}
.person-x{border:1px solid #f1c4cf;background:#fff;color:var(--brand);border-radius:7px;padding:5px 10px;font-size:12.5px;
  font-weight:600;cursor:pointer;white-space:nowrap}
.person-x:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.person-x-none{width:1px}
.rm-bar{position:sticky;top:var(--topbar-h,0px);z-index:30;display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;background:#fff;border:1px solid #f1c4cf;border-left:4px solid var(--brand);border-radius:10px;padding:11px 14px;
  margin:0 0 10px;box-shadow:0 6px 16px -10px rgba(16,24,40,.3)}
.rm-bar.asking{background:#fff5f7}
.rm-bar b{display:block;font-size:14.5px}
.rm-bar span{font-size:12.5px;color:var(--muted)}
.rm-btns{display:flex;gap:8px;flex-wrap:wrap}

/* A class, opened: a side panel on a desktop, a bottom sheet on a phone, with
   its plan editable at the top (26 Sep 2026). */
@media (min-width:900px) {
  #classSheet.sheet { align-items:stretch; justify-content:flex-end; padding:0; background:rgba(10,10,12,.35); }
  #classSheet .sheet-card { width:min(600px, 94vw); max-width:none; max-height:none; height:100vh; border-radius:0;
    border-width:0 0 0 1px; box-shadow:-12px 0 32px rgba(0,0,0,.18); padding:18px 22px 40px; }
  #classSheet .sheet-head { position:sticky; top:-18px; background:var(--card); padding:18px 0 10px; margin-top:-18px; z-index:2;
    border-bottom:1px solid var(--line); margin-bottom:12px; }
}
#classSheet { z-index:95; }
.cs-plan { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:#fbfbfc; }
.cs-row { display:grid; grid-template-columns:96px 1fr; gap:10px; align-items:center; margin:8px 0; }
.cs-lab { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.cs-row input, .cs-row textarea { font:inherit; font-size:14px; border:1px solid var(--line); border-radius:8px; padding:8px 10px;
  background:#fff; width:100%; }
.cs-row textarea { resize:vertical; line-height:1.45; }
.cs-row .sel { max-width:100%; }
.cs-row .chip { margin:0 5px 5px 0; }
.cs-hint { display:block; font-size:11.5px; color:#b45309; margin-top:3px; }
.cs-nobody { font-size:13px; font-weight:600; margin-right:8px; }
.cs-nobody i { font-style:normal; font-weight:400; color:var(--muted); }
.cs-notes { white-space:pre-wrap; color:#39414d; font-size:13px; }
.cs-save > div { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.plan-open { font-size:12.5px; padding:6px 10px; }
.plan-when { cursor:pointer; }
.plan-when:hover span { text-decoration:underline; }
@media (max-width:620px) { .cs-row { grid-template-columns:1fr; gap:4px; } }

/* Handbook: the document list on the left, the open document on the right. */
.docs-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start}
.docs-list{display:flex;flex-direction:column;gap:4px;position:sticky;top:16px}
.docs-item{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:9px;cursor:pointer;font-size:14px;border:1px solid transparent}
.docs-item:hover{background:#eceef2}
.docs-item.active{background:var(--card);border-color:var(--line);font-weight:600}
.docs-item.active .freshness{font-weight:400}
.docs-reader{padding:24px 30px;max-width:820px}
.docs-reader-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:6px}
.docs-reader-head h2{margin:0;font-size:22px}
.docs-reader-head a{text-decoration:none;white-space:nowrap}
.docs-body{font-size:15px;line-height:1.6}
.docs-body h3{margin:24px 0 8px;font-size:17px;color:var(--brand);border-bottom:1px solid var(--line);padding-bottom:4px}
.docs-body h4{margin:18px 0 6px;font-size:15px}
.docs-body p{margin:0 0 10px}
.docs-body ul{margin:0 0 12px;padding-left:20px}
.docs-body li{margin-bottom:6px}
.docs-body li strong:first-child{color:var(--brand)}
@media(max-width:820px){.docs-layout{grid-template-columns:1fr}.docs-list{position:static}.docs-reader{padding:18px}}

/* Frontline School's one link sits at the bottom of the sidebar at its own
   height. It shares the .nav class with the main menu, and .nav is flex:1 --
   so the two split the sidebar 50/50 and the real menu was squeezed into the
   top half for the sake of a single link (Andre, 4 Oct 2026). */
#schoolNav{flex:none;overflow:visible;border-top:1px solid #23262d;margin-top:8px;padding-top:4px}
#schoolNav .nav-group{padding-top:8px}