/* Live drills, the state deck, and the manager/admin tables.
   Kept in its own file so the original course styling stays untouched and both
   halves can be reasoned about separately. Every colour comes from the tokens
   in styles.css, so this follows the reader's theme without a second palette. */

/* The `hidden` attribute is only a UA default of display:none, so ANY author
   rule that sets display beats it. `.auth` is position:fixed / display:grid /
   z-index:50, which left the sign-in overlay painted over the whole app even
   after a successful sign-in. Make the attribute authoritative again. */
[hidden]{display:none !important}

/* ── auth ─────────────────────────────────────────────────────────────── */
.auth-note{margin:14px 0 0;font-size:13px;color:var(--muted);text-align:center;line-height:1.5}

/* ── drill picker ─────────────────────────────────────────────────────── */
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:8px 0 26px}
.dcard{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:15px 16px 14px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:7px;min-width:0}
.dcard.done{border-left:4px solid var(--ok)}
.dc-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dc-dir{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  padding:3px 8px;border-radius:99px;background:var(--skyfaint);color:var(--steel)}
.dc-dir.out{background:color-mix(in srgb,var(--bronze) 16%,transparent);color:var(--bronze)}
.dc-score{font-family:var(--disp);font-weight:700;font-size:22px;line-height:1;font-variant-numeric:tabular-nums}
.dc-new{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.dc-name{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.2}
.dc-blurb{font-size:13.5px;color:var(--muted);line-height:1.45;flex:1}
.dc-foot{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}
.dc-foot .btn{padding:7px 13px;font-size:13.5px}

/* ── the call modal ───────────────────────────────────────────────────── */
.rp-modal{position:fixed;inset:0;z-index:60;background:rgba(4,20,34,.62);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:16px}
.rp-modal[hidden]{display:none}
.rp-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  width:min(680px,100%);max-height:min(92vh,900px);display:flex;flex-direction:column;overflow:hidden}
.rp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:16px 18px;border-bottom:1px solid var(--line)}
.rp-title{font-family:var(--disp);font-weight:700;font-size:21px;line-height:1.2}
.rp-sub{font-size:13px;color:var(--muted);margin-top:2px}
.rp-head-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.rp-timer{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.rp-timer.warn{color:var(--bad);font-weight:700}
.rp-x{border:0;background:none;color:var(--muted);font-size:17px;cursor:pointer;padding:2px 4px;line-height:1}
.rp-x:hover{color:var(--ink)}
.rp-stage{padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.rp-stage[hidden]{display:none}

.rp-caller{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--skyfaint);border-radius:12px;padding:11px 14px}
.rp-dir{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  padding:3px 9px;border-radius:99px;background:var(--paper);color:var(--steel)}
.rp-dir.out{color:var(--bronze)}
.rp-caller-id{display:flex;flex-direction:column;min-width:0}
.rp-caller-name{font-weight:700;font-size:15px}
.rp-caller-meta{font-size:12.5px;color:var(--muted)}
.rp-caller-cue{font-size:12.5px;color:var(--muted);margin-left:auto;text-align:right}

.rp-orbwrap{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0 2px}
/* The orb scales with real mic/speaker volume, so silence looks like silence -
   a fixed pulse would read as "alive" during a dropped call. */
.rp-orb{width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,var(--sky),var(--steel) 62%,var(--navy2));
  box-shadow:0 14px 40px rgba(0,0,0,.28);transition:transform .09s linear,box-shadow .09s linear}
.rp-orb.listening{background:radial-gradient(circle at 34% 30%,#9fd6b2,#4d9b68 62%,#2f6b3a)}
.rp-speaking{font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  padding:4px 12px;border-radius:99px;background:var(--line2);color:var(--muted)}
.rp-speaking.is-caller{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.rp-status{text-align:center;font-size:13.5px;color:var(--muted);min-height:1.2em}

.rp-live{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--cream);
  max-height:230px;overflow-y:auto;font-size:14px;display:flex;flex-direction:column;gap:7px}
.rp-line{line-height:1.5}
.rp-line b{color:var(--steel)}
.rp-line.muted{color:var(--muted)}
.rp-foot{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding-top:2px}

/* ── scorecard ────────────────────────────────────────────────────────── */
.sc-top{display:flex;align-items:center;gap:16px}
.sc-big{font-family:var(--disp);font-weight:700;font-size:52px;line-height:1;font-variant-numeric:tabular-nums;flex:0 0 auto}
.sc-head{font-size:15.5px;line-height:1.45}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.sc-cell{background:var(--cream);border:1px solid var(--line);border-radius:11px;padding:10px 12px;
  display:flex;flex-direction:column;gap:2px;min-width:0}
.sc-cell span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.sc-cell b{font-size:21px;font-family:var(--disp);font-variant-numeric:tabular-nums}
.sc-cell small{font-size:11px;color:var(--muted)}
.sc-cell .ok{color:var(--ok);font-size:15px}
.sc-cell .bad{color:var(--bad);font-size:15px}
.sc-sec{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--bronze);font-weight:700;margin-top:4px}
.sc-moment{border-left:3px solid var(--line);padding:2px 0 2px 13px;display:flex;flex-direction:column;gap:6px}
.sc-said,.sc-try{font-size:14px;line-height:1.5}
.sc-said span,.sc-try span{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:2px}
.sc-said{color:var(--muted);font-style:italic}
.sc-issue{font-size:14.5px;line-height:1.5}
.sc-try{background:color-mix(in srgb,var(--ok) 10%,transparent);border-radius:9px;padding:9px 11px}
.sc-try span{color:var(--ok)}

/* ── state deck ───────────────────────────────────────────────────────── */
/* Rendered from JSON rather than 408 exported images, so it stays readable at
   phone width and picks up the reader's theme. */
.st-loading{color:var(--muted);font-size:14.5px;padding:24px;text-align:center;
  border:1px dashed var(--line);border-radius:12px}
.stviewer .stage{background:var(--paper);padding:0;display:block}
.stslide{padding:26px 28px;display:flex;flex-direction:column;gap:12px;min-height:360px}
.st-eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);font-weight:700}
.st-title{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.6vw,28px);line-height:1.15;margin:0;text-wrap:balance}
.st-table{width:100%;border-collapse:collapse;font-size:14.5px;display:table}
.st-table th,.st-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.st-table th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.st-table tr td:first-child{color:var(--muted);width:44%}
.st-table tr td:last-child{font-weight:600}
.st-blocks{display:flex;flex-direction:column;gap:14px}
.st-blocks.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.st-block{min-width:0}
.st-label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:var(--steel);margin-bottom:5px}
.st-block ul{margin:0;padding-left:1.1em;font-size:14.5px;line-height:1.55}
.st-block li{margin:.35em 0}
.st-block li b{color:var(--ink)}
.st-coach{margin-top:auto;background:var(--skyfaint);border-left:3px solid var(--sky);
  border-radius:0 10px 10px 0;padding:10px 14px;font-size:13.5px;color:var(--muted);line-height:1.5}
.st-coach span{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--steel);margin-bottom:3px}
.rp-note{background:var(--skyfaint);border-left:3px solid var(--sky);padding:11px 15px;
  border-radius:0 10px 10px 0;font-size:14.5px}

/* ── team / firms ─────────────────────────────────────────────────────── */
.addbox{background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:15px 16px;box-shadow:var(--shadow);margin:20px 0 22px}
.ab-h{font-family:var(--disp);font-weight:700;font-size:17px;margin-bottom:10px}
.ab-row{display:flex;gap:8px;flex-wrap:wrap}
.ab-row input,.ab-row select{flex:1 1 150px;min-width:0;border:1px solid var(--line);border-radius:9px;
  padding:8px 11px;font:inherit;font-size:14px;background:var(--cream);color:var(--ink)}
.ab-row .btn{flex:0 0 auto}
.ab-note{font-size:12.5px;color:var(--muted);margin-top:9px}
.ab-note .err{color:var(--bad);font-weight:600}
.sptable table td .em{display:block;font-size:12px;color:var(--muted)}
.sptable table tr.off{opacity:.55}
.sptable select,.sptable input.inline{border:1px solid var(--line);border-radius:8px;padding:5px 8px;
  font:inherit;font-size:13.5px;background:var(--cream);color:var(--ink);max-width:100%}
.tinybtn{border:1px solid var(--line);border-radius:99px;padding:4px 12px;font:inherit;font-size:12.5px;
  cursor:pointer;background:var(--paper);color:var(--ink)}
.tinybtn.on{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);border-color:transparent;font-weight:600}
.tinybtn.off{background:var(--line2);color:var(--muted)}
.ok-chip,.warn-chip{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.ok-chip{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.warn-chip{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad)}

/* ── narrow screens ───────────────────────────────────────────────────── */
@media (max-width:720px){
  .rp-card{max-height:100dvh;height:100dvh;width:100%;border-radius:0}
  .rp-caller-cue{margin-left:0;text-align:left;width:100%}
  .sc-top{flex-direction:column;align-items:flex-start;gap:6px}
  .sc-big{font-size:44px}
  .stslide{padding:18px 16px;min-height:0}
  /* A two-column fact table has to keep both columns at phone width; wrapping
     the label under the value would make the sheet unreadable. */
  .st-table{font-size:13px}
  .st-table th,.st-table td{padding:7px 6px}
  .ab-row input,.ab-row select{flex:1 1 100%}
}

/* ── settings tabs ────────────────────────────────────────────────────── */
.themebtn.gear{font-size:16px;line-height:1;padding:6px 10px}
.settabs{display:flex;gap:6px;margin:18px 0 4px;border-bottom:1px solid var(--line)}
.settab{border:0;background:none;font:inherit;font-size:14.5px;color:var(--muted);cursor:pointer;
  padding:9px 14px;border-bottom:2px solid transparent;margin-bottom:-1px}
.settab:hover{color:var(--ink)}
.settab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--bronze)}

/* ── per-state tabs inside the state module ───────────────────────────── */
.sttabs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.sttab{border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:14px;
  border-radius:99px;padding:7px 15px;cursor:pointer}
.sttab:hover{border-color:var(--steel)}
.sttab.done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.sttab.on{background:var(--bronze);border-color:var(--bronze);color:#1a1207;font-weight:600}
.sttab.on.done{color:#1a1207}

/* ── state picker ─────────────────────────────────────────────────────── */
/* 51 options is too many for a native multi-select, where building a list means
   ctrl-clicking and one slip clears everything already chosen. The panel is
   fixed and placed by script because the firms table scrolls horizontally, and
   an overflow container clips absolutely-positioned children. */
.spick{display:block;min-width:0}
.spick-btn{width:100%;min-width:150px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:9px;padding:6px 9px;min-height:36px;
  font:inherit;font-size:14px;background:var(--cream);color:var(--ink);cursor:pointer;text-align:left}
.spick-btn:hover{border-color:var(--steel)}
.spick-ph{color:var(--muted)}
.spick-caret{margin-left:auto;color:var(--muted);font-size:11px}
.schip{display:inline-block;background:var(--skyfaint);color:var(--steel);font-weight:700;
  font-size:11.5px;letter-spacing:.04em;padding:2px 7px;border-radius:99px}
.schip.more{background:var(--line2);color:var(--muted)}

.spick-panel{position:fixed;z-index:80;width:min(320px,92vw);
  background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:10px;display:flex;flex-direction:column;gap:8px}
.spick-head{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700}
.spick-search{border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:inherit;font-size:13.5px;
  background:var(--cream);color:var(--ink)}
.spick-list{max-height:250px;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:1px 6px}
.spick-opt{display:flex;align-items:center;gap:7px;padding:5px 6px;border-radius:7px;
  font-size:13px;cursor:pointer;min-width:0}
.spick-opt:hover{background:var(--skyfaint)}
.spick-opt[hidden]{display:none}
.spick-opt input{margin:0;cursor:pointer;flex:0 0 auto}
.so-abbr{font-weight:700;font-size:11px;color:var(--steel);flex:0 0 20px}
.so-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spick-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--line);padding-top:8px}
.spick-count{font-size:12.5px;color:var(--muted)}
.spick-acts{display:flex;align-items:center;gap:6px}
.spick-foot .btn{padding:6px 14px;font-size:13.5px}
@media (max-width:720px){.spick-list{grid-template-columns:1fr}}

/* ── narrow screens ───────────────────────────────────────────────────── */
@media (max-width:720px){
  .rp-card{max-height:100dvh;height:100dvh;width:100%;border-radius:0}
  .rp-caller-cue{margin-left:0;text-align:left;width:100%}
  .sc-top{flex-direction:column;align-items:flex-start;gap:6px}
  .sc-big{font-size:44px}
  .stslide{padding:18px 16px;min-height:0}
  /* A two-column fact table has to keep both columns at phone width; wrapping
     the label under the value would make the sheet unreadable. */
  .st-table{font-size:13px}
  .st-table th,.st-table td{padding:7px 6px}
  .ab-row input,.ab-row select{flex:1 1 100%}
}

/* ── settings tabs ────────────────────────────────────────────────────── */
.themebtn.gear{font-size:16px;line-height:1;padding:6px 10px}
.settabs{display:flex;gap:6px;margin:18px 0 4px;border-bottom:1px solid var(--line)}
.settab{border:0;background:none;font:inherit;font-size:14.5px;color:var(--muted);cursor:pointer;
  padding:9px 14px;border-bottom:2px solid transparent;margin-bottom:-1px}
.settab:hover{color:var(--ink)}
.settab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--bronze)}

/* ── per-state tabs inside the state module ───────────────────────────── */
.sttabs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.sttab{border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:14px;
  border-radius:99px;padding:7px 15px;cursor:pointer}
.sttab:hover{border-color:var(--steel)}
.sttab.done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.sttab.on{background:var(--bronze);border-color:var(--bronze);color:#1a1207;font-weight:600}
.sttab.on.done{color:#1a1207}

/* ── state picker ─────────────────────────────────────────────────────── */
/* 51 options is too many for a native multi-select, where building a list means
   ctrl-clicking and one slip clears everything already chosen. */
.spick{position:relative;flex:1 1 190px;min-width:0}
.spick-btn{width:100%;text-align:left;border:1px solid var(--line);border-radius:9px;padding:8px 11px;
  font:inherit;font-size:14px;background:var(--cream);color:var(--ink);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spick-btn:hover{border-color:var(--steel)}
.spick-panel{position:absolute;z-index:40;top:calc(100% + 5px);left:0;width:min(300px,88vw);
  background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:10px;display:flex;flex-direction:column;gap:8px}
.spick-panel[hidden]{display:none}
.spick-search{border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:inherit;font-size:13.5px;
  background:var(--cream);color:var(--ink)}
.spick-list{max-height:230px;overflow-y:auto;display:flex;flex-direction:column}
.spick-opt{display:flex;align-items:center;gap:9px;padding:5px 6px;border-radius:7px;
  font-size:14px;cursor:pointer}
.spick-opt:hover{background:var(--skyfaint)}
.spick-opt[hidden]{display:none}
.spick-opt input{margin:0;cursor:pointer}
.spick-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--line);padding-top:8px}
.spick-count{font-size:12.5px;color:var(--muted)}
.spick-foot .btn{padding:6px 14px;font-size:13.5px}

/* ── trainer scripts (manager only) ───────────────────────────────────── */
.tscripts{border:1px solid var(--line);border-radius:12px;background:var(--paper);
  box-shadow:var(--shadow);margin-bottom:22px}
.tscripts summary{cursor:pointer;padding:12px 16px;font-weight:600;font-size:14.5px;list-style:none}
.tscripts summary::-webkit-details-marker{display:none}
.tscripts summary::before{content:"\25b8 ";color:var(--bronze);display:inline-block;
  transition:transform .15s;margin-right:4px}
.tscripts[open] summary::before{transform:rotate(90deg)}
.tscripts summary:hover{color:var(--bronze)}
.tscripts .rpwrap{padding:0 16px 16px;display:flex;flex-direction:column;gap:16px}

/* ── scores grid ──────────────────────────────────────────────────────── */
/* Thirteen-odd columns will not fit a laptop, so the table scrolls sideways
   inside its own box and the name column stays pinned - scrolling to Capstone
   is useless if you can no longer see whose row you are on. */
.sctable{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--paper);
  box-shadow:var(--shadow);margin-top:16px}
.sctable table{border-collapse:separate;border-spacing:0;width:100%;font-size:13.5px}
.sctable th,.sctable td{padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.sctable thead th{background:var(--paper);position:sticky;top:0;z-index:2;
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  font-weight:700;text-align:center;vertical-align:bottom}
.sctable th.grp{color:var(--bronze);border-left:1px solid var(--line);text-align:center}
.sctable th.vert span{display:inline-block;max-width:96px;white-space:normal;line-height:1.25}
.sctable .sticky{position:sticky;left:0;z-index:3;background:var(--paper);
  border-right:1px solid var(--line);text-align:left;min-width:150px}
.sctable thead .sticky{z-index:4}
.sctable td.nm{font-weight:600}
.sctable td.nm .em{display:block;font-size:11.5px;color:var(--muted);font-weight:400}
.sctable td.mid{text-align:center;font-variant-numeric:tabular-nums}
.sctable td.mid b{font-size:15px}
.sctable td.mid .sub2{display:block;font-size:10.5px;color:var(--muted)}
.sctable td.fail{background:color-mix(in srgb,var(--bad) 9%,transparent)}
.sctable .empty{color:var(--line2)}
.sctable tr.off{opacity:.55}
.sctable tr:hover td{background:var(--skyfaint)}
.sctable tr:hover td.sticky{background:var(--skyfaint)}
.sctable tr.avgrow td{border-top:2px solid var(--line);font-weight:700;background:var(--cream)}
.sctable tr.avgrow td.sticky{background:var(--cream);color:var(--muted);
  font-size:11.5px;letter-spacing:.05em;text-transform:uppercase}

/* ── who speaks first ─────────────────────────────────────────────────── */
.whospeaks{display:grid;gap:10px;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);margin:6px 0 18px}
.ws-row{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5}
.ws-row .dc-dir{flex:0 0 auto;margin-top:2px}
.dc-cue{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--steel)}

/* ── inline row editing ───────────────────────────────────────────────── */
.sptable input.inline{width:100%;min-width:110px}
.sptable input.inline.wide{min-width:220px}
.sptable td.nm input.inline{font-weight:600}
.rowacts{white-space:nowrap}
.linkbtn{border:0;background:none;font:inherit;font-size:12.5px;color:var(--steel);
  cursor:pointer;padding:3px 6px;border-radius:6px}
.linkbtn:hover{background:var(--skyfaint);text-decoration:underline}
.linkbtn.danger{color:var(--bad)}
.linkbtn.danger:hover{background:color-mix(in srgb,var(--bad) 10%,transparent)}
.tinybtn:disabled{opacity:.5;cursor:default}
.sptable select.inline:disabled{opacity:.6;cursor:default}

/* ── pencil row editing ───────────────────────────────────────────────── */
/* Rows are read-only until the pencil is clicked. Always-live inputs did not
   look editable and made a stray keystroke a silent save. */
.pencil{border:1px solid transparent;background:none;font-size:15px;line-height:1;
  color:var(--muted);cursor:pointer;padding:5px 9px;border-radius:8px}
.pencil:hover{background:var(--skyfaint);color:var(--bronze);border-color:var(--line)}
.sptable tr.editing td{background:var(--skyfaint)}
.sptable tr.editing td.sticky{background:var(--skyfaint)}
.linkbtn.save{color:var(--ok);font-weight:700}
.sptable td.trunc{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.sptable td .schip{margin-right:2px}
.sptable span.tinybtn{cursor:default}

/* ── view as ──────────────────────────────────────────────────────────── */
.viewpill{display:inline-flex;align-items:center;gap:9px;background:color-mix(in srgb,var(--bronze) 18%,transparent);
  color:var(--bronze);border:1px solid color-mix(in srgb,var(--bronze) 40%,transparent);
  border-radius:99px;padding:5px 6px 5px 13px;font-size:13px}
.viewpill b{font-weight:700}
.viewpill button{border:0;background:var(--bronze);color:#1a1207;font:inherit;font-size:12px;font-weight:700;
  border-radius:99px;padding:3px 11px;cursor:pointer}
.viewpill button:hover{filter:brightness(1.08)}

/* ── team table fits without sideways scroll ──────────────────────────── */
.teamtable td,.teamtable th{white-space:normal}
.teamtable td.nm{min-width:0;max-width:220px}
.teamtable td.prog2{white-space:nowrap;font-variant-numeric:tabular-nums}
.teamtable td.prog2 .pbar{width:64px;margin-right:6px}
.teamtable .rowacts{white-space:nowrap;text-align:right}

/* ── management pages use the full width ──────────────────────────────── */
/* The 820px reading column suits a lesson and fights a 13-column grid; it was
   the reason the scores table had to scroll sideways at all. */
.wrap.wide{max-width:none;padding-left:clamp(18px,3vw,40px);padding-right:clamp(18px,3vw,40px)}
.wrap.wide .lead{max-width:74ch}

/* Compact enough that the whole grid fits a laptop without scrolling. */
.sctable table{font-size:12.5px}
.sctable th,.sctable td{padding:7px 6px}
.sctable th.vert span{max-width:74px;font-size:10px;letter-spacing:.02em}
.sctable td.mid b{font-size:13.5px}
.sctable .sticky{min-width:132px}
.sctable td.nm{font-size:13px}

/* ── locked lessons ───────────────────────────────────────────────────── */
.navlink.locked{opacity:.5}
.navlink.locked:hover{opacity:.72}
.navlink .lockicon{margin-left:auto;font-size:11px;opacity:.8}
.navlink.locked .dot{border-style:dashed}
.lockpanel{display:flex;gap:16px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:var(--shadow);
  margin-top:22px;font-size:15.5px;line-height:1.55}
.lock-ic{font-size:26px;line-height:1;flex:0 0 auto;opacity:.75}
.lockpanel a{font-weight:600}
.lock-sub{margin-top:8px;font-size:13.5px;color:var(--muted)}
.pagenav button.lockedbtn{opacity:.55;cursor:default}
.quiz-foot .nextup{margin-left:auto}

/* ── drill grid ───────────────────────────────────────────────────────── */
.sctable td.weak{text-align:left;min-width:132px}
.sctable td.weak b{font-size:12.5px;font-family:var(--body)}
.sctable th[colspan]{border-left:1px solid var(--line)}
.sctable td.mid .sub2{font-size:10px}

/* ── admin firm chooser ───────────────────────────────────────────────── */
.firmpick{display:flex;align-items:center;gap:10px;margin:16px 0 4px}
.firmpick label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.firmpick select{border:1px solid var(--line);border-radius:9px;padding:8px 12px;
  font:inherit;font-size:14.5px;font-weight:600;background:var(--paper);color:var(--ink);
  min-width:220px;cursor:pointer}
.firmpick select:hover{border-color:var(--steel)}

/* ── move a person between firms ──────────────────────────────────────── */
.movebox{display:flex;align-items:center;gap:7px;margin-top:6px}
.movebox label{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.movebox select{font-size:13px;padding:4px 7px}

/* ── jeopardy for a room ──────────────────────────────────────────────── */
/* The header sits inside the fullscreen wrapper, so a projected board keeps
   its title and its two controls instead of showing a bare grid. */
.jshead{margin-top:38px}
.jshead .jactions{margin-left:auto;display:flex;gap:6px;flex:0 0 auto}
.iconbtn{border:1px solid var(--line);background:var(--paper);color:var(--muted);
  font-size:16px;line-height:1;border-radius:9px;padding:8px 11px;cursor:pointer;
  transition:background .12s,color .12s,border-color .12s}
.iconbtn:hover{background:var(--skyfaint);color:var(--bronze);border-color:var(--steel)}
.jwrap{background:var(--cream);border-radius:14px}

/* Real fullscreen and the fallback share one layout, so the board looks the
   same however the browser decides to grant it. */
.jwrap:fullscreen,.jwrap.jfs-pseudo{position:fixed;inset:0;z-index:200;margin:0;
  padding:clamp(14px,2.2vw,30px);overflow:auto;display:flex;flex-direction:column;
  background:var(--cream)}
.jwrap:fullscreen .jshead,.jwrap.jfs-pseudo .jshead{margin:0 0 14px;flex:0 0 auto}
.jwrap:fullscreen .jshead h2,.jwrap.jfs-pseudo .jshead h2{font-size:clamp(20px,2.2vw,32px)}
.jwrap:fullscreen .jboard,.jwrap.jfs-pseudo .jboard{flex:1;align-content:stretch;margin-top:0}
.jwrap:fullscreen .jtile,.jwrap.jfs-pseudo .jtile{font-size:clamp(20px,3.4vw,46px)}
.jwrap:fullscreen .jcat,.jwrap.jfs-pseudo .jcat{font-size:clamp(12px,1.4vw,20px)}
.jwrap:fullscreen .jm-card,.jwrap.jfs-pseudo .jm-card{max-width:min(1000px,88vw)}
.jwrap:fullscreen .jm-clue,.jwrap.jfs-pseudo .jm-clue{font-size:clamp(20px,2.6vw,38px)}
.viewpill .ro{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:700;opacity:.8}

/* ── reviewing a recorded drill ───────────────────────────────────────── */
.sctable td.cell-open{cursor:pointer}
.sctable td.cell-open:hover{background:var(--skyfaint);outline:1px solid var(--steel);outline-offset:-1px}
.recbox{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.recbox audio{width:100%;max-width:100%}
.rec-status{font-size:13.5px;color:var(--muted)}
.sc-transcript{border:1px solid var(--line);border-radius:11px;background:var(--cream)}
.sc-transcript summary{cursor:pointer;padding:10px 13px;font-size:13.5px;font-weight:600;list-style:none}
.sc-transcript summary::-webkit-details-marker{display:none}
.sc-transcript summary::before{content:"\25b8 ";color:var(--bronze);display:inline-block;margin-right:4px;transition:transform .15s}
.sc-transcript[open] summary::before{transform:rotate(90deg)}
.rp-live.static{max-height:280px;border:0;border-top:1px solid var(--line);border-radius:0 0 11px 11px}
/* Only meaningful where the board scrolls; mobile.css turns it on. */
.jhint{display:none;color:var(--muted)}

/* ── course switcher ──────────────────────────────────────────────────── */
/* Collapsed to one card by default - the sidebar belongs to the lesson list.
   The list expands inline rather than floating, because the sidebar is a scroll
   container and would clip an absolutely-positioned panel. */
.coursepick{padding:14px 12px;border-bottom:1px solid rgba(255,255,255,.09);margin-bottom:2px}

.cp-current{display:grid;gap:3px;width:100%;text-align:left;cursor:pointer;font:inherit;
  position:relative;padding:11px 34px 12px 13px;border-radius:12px;
  color:#EAF1F7;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  transition:background .15s,border-color .15s}
.cp-current:hover{background:rgba(255,255,255,.12);border-color:var(--bronze)}
.cp-eyebrow{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sky);font-weight:700}
.cp-title{font-family:var(--disp);font-size:16px;font-weight:700;line-height:1.2;
  color:var(--bronze2)}
.cp-meta{font-size:11.5px;color:var(--sky);opacity:.85}
.cp-bar{display:block;height:4px;border-radius:99px;margin-top:6px;
  background:rgba(255,255,255,.14);overflow:hidden}
.cp-bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--steel),var(--bronze2));transition:width .45s}

/* Drawn, not inherited: a native marker is invisible against this ground. */
.cp-chev{position:absolute;right:14px;top:50%;width:7px;height:7px;
  border-right:2px solid var(--sky);border-bottom:2px solid var(--sky);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s}
.coursepick.open .cp-chev{transform:translateY(-30%) rotate(-135deg)}

.cp-list{display:flex;flex-direction:column;gap:2px;margin-top:6px;
  border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:5px;
  background:rgba(0,0,0,.16)}
.cp-list[hidden]{display:none}
.cp-opt{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;
  font:inherit;cursor:pointer;background:none;border:0;border-radius:9px;
  padding:9px 10px;color:#D7E4EE;transition:background .12s}
.cp-opt:hover{background:rgba(255,255,255,.09)}
.cp-opt.on{background:rgba(255,255,255,.07)}
.cp-tick{width:13px;flex:0 0 13px;font-size:11px;color:var(--bronze2);line-height:1.5}
.cp-opt-main{display:flex;flex-direction:column;min-width:0}
.cp-opt-t{font-size:13.5px;font-weight:600;line-height:1.25}
.cp-opt.on .cp-opt-t{color:var(--bronze2)}
.cp-opt-s{font-size:11px;color:var(--sky);opacity:.8;margin-top:1px}

/* ── granting a course to one person ──────────────────────────────────── */
.grantbox{display:flex;flex-direction:column;gap:4px}
.grant{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;
  padding:3px 5px;border-radius:6px}
.grant:hover{background:var(--skyfaint)}
/* Included with their role: shown ticked and locked, because unticking it
   would suggest an access change that role alone still grants. */
.grant.byrole{opacity:.6;cursor:default}
.grant.byrole:hover{background:none}
.grant input{margin:0;cursor:inherit}
.muted-sm{font-size:12.5px;color:var(--muted)}
.wrap code{background:var(--skyfaint);color:var(--steel);border-radius:5px;
  padding:1px 6px;font-size:.92em}