: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; }