/* 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}

/* ── state picker inside the lesson ───────────────────────────────────── */
/* Pills for a handful of states, a dropdown once a firm works the country. */
.stpick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 4px}
.stsel{font:inherit;font-size:15px;font-weight:600;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:10px 34px 10px 13px;cursor:pointer;
  min-width:240px;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--steel) 50%),
                   linear-gradient(135deg,var(--steel) 50%,transparent 50%);
  background-position:calc(100% - 17px) 54%,calc(100% - 12px) 54%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.stsel:hover{border-color:var(--steel)}
.stpick-note{font-size:12.5px;color:var(--muted)}

/* ── public demo ──────────────────────────────────────────────────────────
   The demo renders through the ordinary course UI, so there is almost nothing
   to style. What is left is hiding the few controls a signed-out visitor has
   no account behind: progress, sign-out, and the manager tools. */
body.demo-mode .cp-meta, body.demo-mode .cp-bar,
body.demo-mode #btn-signout, body.demo-mode .nav-manage { display: none !important; }
body.demo-mode .lock-sub { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.auth-demo { margin: 14px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); }


/* ── the demo's purchase offer ────────────────────────────────────────── */
.buybtn { white-space: nowrap; }
body:not(.demo-mode) .buybtn { display: none !important; }
/* .rp-card supplies the panel; this is only what the offer adds on top. The
   first version asked for .rp-box, which does not exist - so the modal rendered
   with no card behind it and the text sat straight on the dimmed page. */
.offer-box {
  width: min(460px, 100%); max-height: none; position: relative;
  padding: 26px 28px 24px; display: block; text-align: left;
}
.offer-box .rp-x { position: absolute; top: 12px; right: 14px; font-size: 15px; }
.offer-tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  background: var(--accent-soft, #F3E7DA); color: var(--accent, #B9793F); margin-bottom: 10px;
}
.offer-box h2 { margin: 0 0 10px; font-size: 1.5rem; }
.offer-box p { color: var(--muted); margin: 0 0 12px; }
.offer-note { font-size: 13px; }
.offer-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
@media (max-width: 560px) { .buybtn { font-size: 13px; padding: 8px 12px; } }

/* The demo is how a prospect gets in, so it is a button under a divider rather
   than a line of small print under the error message - where it read as a
   footnote to a failed sign-in. */
.auth-split { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; }
.auth-split::before, .auth-split::after {
  content: ""; flex: 1; height: 1px; background: var(--line, #E4DCCC);
}
.auth-split span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.demo-cta {
  font-weight: 600;
  position: relative;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease,
              border-color .18s ease, background .18s ease;
}
/* The arrow is drawn in a pseudo-element rather than added to the markup, so
   the button's accessible name stays "Preview the intake course". */
.demo-cta::after {
  content: "→";
  display: inline-block;
  margin-left: 8px;
  transform: translateX(-3px);
  opacity: .55;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), opacity .18s ease;
}
.demo-cta:hover,
.demo-cta:focus-visible {
  transform: translateY(-2px);
  border-color: var(--bronze);
  box-shadow: 0 8px 20px rgba(0,32,60,.14);
}
.demo-cta:hover::after,
.demo-cta:focus-visible::after { transform: translateX(2px); opacity: 1; }
.demo-cta:active { transform: translateY(0); box-shadow: var(--shadow); }
/* A slow pulse on the border while nobody has touched it, so the eye finds
   it. It stops the moment the pointer arrives. */
@keyframes demoCtaNudge {
  0%, 88%, 100% { border-color: var(--line); }
  94%           { border-color: var(--bronze); }
}
.demo-cta { animation: demoCtaNudge 4.5s ease-in-out infinite; }
.demo-cta:hover { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .demo-cta, .demo-cta::after { transition: none; animation: none; }
  .demo-cta:hover, .demo-cta:focus-visible { transform: none; }
}
.auth-demo { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--muted); }

/* The old price beside the new one. Struck through and quieter, so the saving
   is legible at a glance without the modal shouting two numbers at equal
   weight. <s> would say the same thing to a screen reader, but the text
   already states both figures, so this stays presentational. */
.offer-box h2 .was {
  font-size: .62em; font-weight: 500; color: var(--muted);
  text-decoration: line-through; margin-left: 8px;
}

/* Both numbers on one line, because a setup fee without the recurring cost
   beside it is only half the price - and the half that flatters. */
.offer-terms {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 10px;
  background: var(--bg, #FBF7EC); font-size: 14.5px; color: var(--ink);
}
.offer-terms b { font-weight: 700; }
.offer-terms span { color: var(--muted); margin: 0 4px; }

/* The promotion code, stated plainly. A modal that quotes a discounted price
   and then sends the buyer to a page showing full price reads as a bait, so
   the code sits where they cannot miss it on the way out. */
.offer-code {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 9px;
  border: 1px dashed var(--accent, #B9793F);
  font-size: 14px; color: var(--ink); text-align: center;
}
.offer-code b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }

/* ── the demo's top bar ───────────────────────────────────────────────────
   mobile.css lets the bar wrap, which is right for the signed-in app but not
   here: the demo adds a Purchase button, and four controls plus a breadcrumb
   tips it onto a second line. Everything stays on one row, and the breadcrumb
   is the thing that gives way, because it is the only part that can be read
   from the page itself. */
body.demo-mode .topbar { flex-wrap: nowrap !important; gap: 8px !important; }
body.demo-mode .topbar > div { min-width: 0; }
body.demo-mode .crumbs {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* No progress to report when nothing is being recorded. */
body.demo-mode .prog { display: none !important; }
body.demo-mode .buybtn { white-space: nowrap; padding: 8px 14px; font-size: 13.5px; }
body.demo-mode .themebtn { white-space: nowrap; }
@media (max-width: 560px) {
  body.demo-mode .crumbs { display: none; }
  body.demo-mode .buybtn { padding: 7px 11px; font-size: 12.5px; }
}

/* The demo's live drill. */
.demo-rp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 12px; }
.demo-rp-note { font-size: 13.5px; color: var(--muted); margin: 0; }