/* ============================================================
   Academy Model Stations — performance dashboard.
   Loaded after signalling-panel.css, which carries the palette.

   Charting discipline, and the reason this file has so few colours in
   it: green, amber and red mean the competence band and nothing else.
   Where a chart carries current against previous against cohort, the
   three series differ by stroke weight and dash pattern — never by
   hue — so the only colour a reader has to interpret is the band.
   Brass stays what it is everywhere else in this build: the interface
   accent, never a status.
   ============================================================ */

body.app{padding:0;}
.app section{margin-top:0;}
.app h2::before{content:none;}

/* ---------------------------------------------------------------
   Top bar
   --------------------------------------------------------------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;
  gap:10px 20px;padding:10px 22px;background:rgba(9,15,21,.95);
  border-bottom:1px solid var(--case-edge);backdrop-filter:blur(6px);}
.topbar-mark{display:flex;flex-direction:column;text-decoration:none;line-height:1.1;}
.topbar-zone{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--brass);}
.topbar-name{font-family:"Barlow Condensed",sans-serif;font-size:19px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
.topbar-who{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;}
.who-name{font-family:"Barlow Condensed",sans-serif;font-size:15px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);}
.who-fact{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-2);}
.who-fact b{color:var(--rail);font-weight:500;}
.topbar-acts{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.back{font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;
  border:1px solid var(--case-edge);border-radius:2px;padding:7px 13px;}
.back:hover{color:var(--ink);background:#1a2b38;}
/* the way back reads first, so it sits ahead of the mark rather than
   at the far end of the bar with the page's own controls */
.back{display:inline-flex;align-items:center;gap:8px;order:-1;}
.back-arrow{font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--brass);}

.switcher{display:flex;align-items:center;gap:8px;}
.switcher[hidden]{display:none;}
.switcher > span{font-family:"Barlow Condensed",sans-serif;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);}
.switcher select{font-family:"IBM Plex Sans",sans-serif;font-size:12.5px;color:var(--ink);
  background:#132029;border:1px solid var(--case-edge);border-radius:2px;padding:6px 8px;
  max-width:230px;}
.switcher select:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;}

/* ---------------------------------------------------------------
   Page furniture
   --------------------------------------------------------------- */
#page{max-width:1440px;margin:0 auto;padding:22px 24px 90px;
  display:flex;flex-direction:column;gap:34px;}
.band{display:flex;flex-direction:column;gap:13px;}
/* an author display: outranks the browser's [hidden] rule, so every
   block the script hides has to say so again */
.band[hidden]{display:none;}
.band-head{display:flex;flex-direction:column;gap:3px;}
.dash-page h2{font-family:"Barlow Condensed",sans-serif;font-size:21px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;margin:0;}
.dash-page h3{font-family:"Barlow Condensed",sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin:0;}
.band-sub{margin:0;font-size:13px;color:var(--ink-2);max-width:88ch;}
.card{background:var(--case);border:1px solid var(--case-edge);border-radius:4px;
  padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0;}
.card-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;}
.empty{margin:0;padding:14px 16px;border:1px dashed var(--case-edge);border-radius:3px;
  font-size:13px;color:var(--ink-3);}
.hintline{margin:0;font-size:11.5px;color:var(--ink-3);line-height:1.5;}

.chip{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);background:#101c25;border:1px solid var(--case-edge);
  border-radius:2px;padding:2px 7px;white-space:nowrap;}
.chip.cyan {color:var(--cyan);border-color:rgba(127,215,255,.4);}
.chip.brass{color:var(--brass);border-color:rgba(201,162,39,.45);}
.chip.amber{color:var(--amber);border-color:rgba(255,176,32,.45);}
.chip.red  {color:#ff9a91;border-color:rgba(255,68,56,.45);}
.chip.green{color:#9fe6b4;border-color:rgba(34,197,94,.4);}
.chips{display:flex;flex-wrap:wrap;gap:5px;}

button{font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:#1a2b38;
  border:1px solid #2c4557;border-radius:2px;padding:7px 12px;cursor:pointer;}
button:hover:not([disabled]){background:#22384a;}
button[disabled]{opacity:.4;cursor:not-allowed;}
button:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;}
button.ghost{background:transparent;color:var(--ink-2);border-color:var(--case-edge);}
button.ghost:hover{color:var(--ink);background:#1a2b38;}
button.toggle{font-size:11px;padding:5px 10px;}
button.linkish{background:transparent;border-color:transparent;color:var(--cyan);
  padding:3px 6px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;
  text-transform:none;}
button.linkish:hover{background:#16252f;}

/* text tones — the three bands, and nothing else uses them */
.tone-green{color:var(--green);} .tone-amber{color:var(--amber);} .tone-red{color:var(--red);}

/* ---------------------------------------------------------------
   Identity strip
   --------------------------------------------------------------- */
.strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,auto);gap:16px 28px;align-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 30%),var(--case);
  border:1px solid var(--case-edge);border-radius:4px;padding:20px 24px;}
.strip-code{margin:0 0 4px;font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--brass);}
.strip h1{font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:clamp(26px,3.4vw,40px);letter-spacing:.05em;text-transform:uppercase;
  margin:0 0 11px;line-height:1.02;}
.strip-facts{display:flex;flex-wrap:wrap;gap:14px 18px;margin:0;}
.strip-facts div{border-left:1px solid var(--case-edge);padding-left:11px;min-width:84px;}
.strip-facts dt{font-family:"Barlow Condensed",sans-serif;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);}
.strip-facts dd{margin:1px 0 0;font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:600;
  color:var(--rail);font-variant-numeric:tabular-nums;}
.strip-window{grid-column:1/-1;margin:0;padding-top:12px;border-top:1px solid var(--case-edge);
  font-size:12px;color:var(--ink-3);}

/* ---------------------------------------------------------------
   Band one — the index
   --------------------------------------------------------------- */
.idxcard{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);gap:20px 30px;
  align-items:center;background:var(--case);border:1px solid var(--case-edge);border-radius:4px;
  padding:18px 22px;}
.idx-fig{display:flex;flex-direction:column;gap:8px;min-width:0;}
.idx-num{display:flex;align-items:baseline;gap:12px;}
.idx-num b{font-family:"IBM Plex Mono",monospace;font-size:62px;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;color:currentColor;}
.idx-num span{font-family:"Barlow Condensed",sans-serif;font-size:15px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;}
.idx-line{margin:0;font-size:13px;color:var(--ink-2);}
.idx-scale{min-width:0;}
.scalechart{display:block;width:100%;height:auto;}

/* shared chart furniture */
.gl{stroke:#1b2b36;stroke-width:1;}
.gl.pass{stroke:#3a4f5e;stroke-dasharray:3 3;}
.tick{fill:var(--ink-3);font-family:"IBM Plex Mono",monospace;font-size:10px;}
.tick.dim{fill:#4a5c6b;font-size:9px;}
.axis-lab{fill:var(--ink-3);font-family:"Barlow Condensed",sans-serif;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;}
.pass-lab{fill:var(--ink-2);}
.marklab{fill:var(--ink-3);font-family:"IBM Plex Mono",monospace;font-size:9.5px;}
.track{fill:#16252f;}
.fill.tone-green{fill:var(--green);} .fill.tone-amber{fill:var(--amber);} .fill.tone-red{fill:var(--red);}
.mark{stroke-width:2;}
.mark.prev{stroke:var(--ink-3);stroke-dasharray:3 2;}
.mark.cohort{stroke:var(--rail-dim);}

/* ---------------------------------------------------------------
   Band two — profile: the shape, and the values
   --------------------------------------------------------------- */
.profile{display:grid;grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr);gap:16px;
  align-items:start;}
.radar{display:block;width:100%;height:auto;max-width:420px;margin:0 auto;}
.web{fill:none;stroke:#1b2b36;stroke-width:1;}
.web.pass{stroke:#3a4f5e;stroke-dasharray:3 3;}
.spoke{stroke:#182631;stroke-width:1;}
.axis{fill:var(--ink-2);font-family:"Barlow Condensed",sans-serif;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;}
/* three traces, one hue: weight and dash carry the difference */
.trace{fill:none;}
.trace.now   {stroke:var(--ink);stroke-width:2.2;fill:rgba(230,240,248,.07);}
.trace.prev  {stroke:var(--ink-3);stroke-width:1.4;stroke-dasharray:5 4;}
.trace.cohort{stroke:var(--rail-dim);stroke-width:1.4;stroke-dasharray:1 3;stroke-linecap:round;}
.dot.tone-green{fill:var(--green);} .dot.tone-amber{fill:var(--amber);} .dot.tone-red{fill:var(--red);}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11.5px;color:var(--ink-3);}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.legend i{width:12px;height:12px;border-radius:2px;display:inline-block;font-style:normal;}
.swatch{width:26px;height:12px;flex:none;overflow:visible;}

.bars{display:flex;flex-direction:column;gap:9px;}
.sub-h{margin-top:6px;padding-top:12px;border-top:1px solid var(--case-edge);}
.barwrap{display:flex;flex-direction:column;gap:3px;min-width:0;}
.bar{display:grid;grid-template-columns:132px minmax(0,1fr) 62px auto;gap:12px;align-items:center;
  width:100%;text-align:left;font:inherit;color:inherit;text-transform:none;letter-spacing:normal;
  background:transparent;border:0;padding:3px 0;}
button.bar{cursor:pointer;}
button.bar:hover{background:#111d26;}
button.bar:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.bar-name{font-size:12.5px;color:var(--ink-2);}
.bar-track{position:relative;height:9px;border-radius:2px;background:#16252f;overflow:visible;}
.bar-fill{position:absolute;inset:0 auto 0 0;border-radius:2px;}
.bar-fill.tone-green{background:var(--green);}
.bar-fill.tone-amber{background:var(--amber);}
.bar-fill.tone-red{background:var(--red);}
.bar-target{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--ink-2);opacity:.75;}
.bar-tick{position:absolute;top:-4px;bottom:-4px;width:2px;}
.bar-tick.prev{background:var(--ink-3);}
.bar-tick.cohort{background:var(--rail-dim);
  background-image:linear-gradient(var(--rail-dim) 50%,transparent 50%);background-size:2px 4px;}
.bar-val{display:flex;align-items:baseline;justify-content:flex-end;gap:6px;
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;}
.bar-val b{font-size:14px;font-weight:600;}
.bar-delta{font-size:10.5px;color:var(--ink-3);}
.bar-caret{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3);}
.bar-meta{margin:0 0 0 144px;font-family:"IBM Plex Mono",monospace;font-size:10px;
  color:var(--ink-3);}
.barwrap > .chip{align-self:flex-start;margin-left:144px;}
.subs{margin:6px 0 10px 144px;padding:10px 12px;background:var(--plate);
  border:1px solid var(--case-edge);border-radius:3px;display:flex;flex-direction:column;gap:8px;}
.sub{display:grid;grid-template-columns:minmax(0,1fr) 110px 28px;gap:10px;align-items:center;}
.sub-name{font-size:12px;color:var(--ink-2);}
.sub-track{position:relative;height:6px;border-radius:2px;background:#16252f;}
.sub-fill{position:absolute;inset:0 auto 0 0;border-radius:2px;}
.sub-fill.tone-green{background:var(--green);}
.sub-fill.tone-amber{background:var(--amber);}
.sub-fill.tone-red{background:var(--red);}
.sub-val{font-family:"IBM Plex Mono",monospace;font-size:12px;text-align:right;
  font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------------------
   Progress over time
   --------------------------------------------------------------- */
.linechart{display:block;width:100%;height:auto;}
.line{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.pt{stroke-width:2;}
.pt.solid.tone-green{fill:var(--green);stroke:var(--green);}
.pt.solid.tone-amber{fill:var(--amber);stroke:var(--amber);}
.pt.solid.tone-red  {fill:var(--red);stroke:var(--red);}
.pt.hollow{fill:var(--case);}
.pt.hollow.tone-green{stroke:var(--green);}
.pt.hollow.tone-amber{stroke:var(--amber);}
.pt.hollow.tone-red  {stroke:var(--red);}
.ring{fill:none;stroke:var(--ink-3);stroke-width:1;}

/* ---------------------------------------------------------------
   Topic heatmap
   --------------------------------------------------------------- */
.heat-wrap{overflow-x:auto;border:1px solid var(--case-edge);border-radius:3px;background:var(--case);}
table.heat{border-collapse:collapse;width:100%;min-width:620px;font-size:12.5px;}
table.heat th,table.heat td{padding:6px 8px;text-align:center;border-top:1px solid var(--case-edge);}
table.heat thead th{border-top:0;background:var(--plate);font-family:"Barlow Condensed",sans-serif;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:600;}
table.heat th.who{text-align:left;min-width:230px;}
/* the attempt columns are one number wide; the module name takes the
   slack, so the mean does not stretch into a banner */
table.heat th:not(.who){width:54px;}
table.heat th:last-child{width:96px;}
table.heat td.who{text-align:left;color:var(--ink);}
table.heat td.who span{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;
  color:var(--ink-3);}
.cell{display:block;width:100%;font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;
  border:0;border-radius:2px;padding:6px 0;font-variant-numeric:tabular-nums;
  letter-spacing:normal;text-transform:none;}
button.cell{cursor:pointer;}
button.cell:hover{outline:2px solid var(--cyan);outline-offset:-2px;}
.cell.b-none {color:var(--ink-3);background:#111c24;}
.cell.b-red  {color:#1a0f0f;background:#c93b32;}
.cell.b-amber{color:#1a1408;background:#d9931b;}
.cell.b-green{color:#08170d;background:#2f9e52;}
.prov{display:block;font-family:"Barlow Condensed",sans-serif;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber);margin-top:2px;}

/* ---------------------------------------------------------------
   Recurring errors
   --------------------------------------------------------------- */
.errlist{display:flex;flex-direction:column;gap:7px;}
.err{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:start;
  background:var(--case);border:1px solid var(--case-edge);border-left:3px solid var(--red);
  border-radius:0 3px 3px 0;padding:12px 14px;}
.err-times{text-align:center;}
.err-times b{display:block;font-family:"IBM Plex Mono",monospace;font-size:24px;font-weight:600;
  color:var(--red);line-height:1;font-variant-numeric:tabular-nums;}
.err-times span{font-family:"Barlow Condensed",sans-serif;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);}
.err-main{min-width:0;display:flex;flex-direction:column;gap:7px;}
.err-main > b{font-size:13.5px;color:var(--ink);font-weight:500;line-height:1.35;}
.err-track{height:5px;border-radius:3px;background:#16252f;overflow:hidden;max-width:420px;}
.err-fill{height:100%;background:var(--red);border-radius:3px;opacity:.7;}
.err-links{display:flex;flex-wrap:wrap;align-items:center;gap:5px;}
.err-last{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-3);}

/* ---------------------------------------------------------------
   Timeliness
   --------------------------------------------------------------- */
.timegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;}
.time-fig{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.time-num{display:flex;align-items:baseline;gap:5px;}
.time-num b{font-family:"IBM Plex Mono",monospace;font-size:40px;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;}
.time-num span{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-3);}
.time-num.over b{color:var(--amber);}
.time-num.under b{color:var(--green);}
.time-line{margin:0;font-size:12.5px;color:var(--ink-2);}
.hist{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;align-items:end;
  height:120px;padding-top:4px;}
.hist-col{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;height:100%;}
.hist-space{flex:1;display:flex;align-items:flex-end;}
.hist-bar{width:100%;background:var(--rail-dim);border-radius:2px 2px 0 0;min-height:2px;}
.hist-n{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-2);text-align:center;
  font-variant-numeric:tabular-nums;}
.hist-lab{font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--ink-3);text-align:center;}

/* ---------------------------------------------------------------
   Recommendations
   --------------------------------------------------------------- */
.recogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px;
  align-items:start;}
.reco{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  background:var(--plate);border:1px solid var(--case-edge);border-radius:3px;padding:10px 12px;}
.reco > div{min-width:0;display:flex;flex-direction:column;gap:5px;}
.reco b{font-size:13px;color:var(--ink);font-weight:500;line-height:1.3;}
.reco-lamp{width:9px;height:9px;border-radius:50%;background:var(--cyan);}
.reco-lamp.done{background:var(--green);}
.reco-no{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;color:var(--brass);
  min-width:38px;}
/* the trainee's Practise opens the exercise's own page, so it is a
   link where the trainer's Assign is a button. It carries the button's
   weight because it is the same errand in the same slot */
.reco-go{font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  background:#1a2b38;border:1px solid #2c4557;border-radius:2px;padding:7px 12px;
  white-space:nowrap;}
.reco-go:hover{background:#22384a;}

/* ---------------------------------------------------------------
   Attendance calendar

   The one block on the page with no band colour in it. A neutral
   ramp carries how many sessions a day held, because being at the
   desk is not a competence and the three bands mean nothing else.
   --------------------------------------------------------------- */
.cals{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px;}
.cal{background:var(--case);border:1px solid var(--case-edge);border-radius:4px;
  padding:13px 15px 15px;min-width:0;}
.cal-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px 12px;margin-bottom:9px;padding-bottom:8px;border-bottom:1px solid var(--case-edge);}
.cal-head b{font-family:"Barlow Condensed",sans-serif;font-size:15px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
.cal-head span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-3);}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;}
.cal-dow{font-family:"Barlow Condensed",sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:center;
  padding-bottom:3px;}
.cal-dow.end{color:#4a5c6b;}
.cal-pad{aspect-ratio:1;}

.cal-d{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:2px;padding:0;
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  letter-spacing:normal;text-transform:none;}
.cal-d em{font-style:normal;font-size:11.5px;line-height:1;}
.cal-d i{position:absolute;top:2px;right:3px;font-style:normal;font-size:8px;font-weight:600;
  color:var(--ink);opacity:.85;}
/* the ramp: one step per session, and it stops at three */
.cal-d.lv0{background:#0e1820;color:var(--ink-3);}
.cal-d.lv1{background:#1d3243;color:var(--rail);}
.cal-d.lv2{background:#2c4c63;color:var(--rail);}
.cal-d.lv3{background:#3d6a86;color:#fff;}
.cal-d.lv0.before,.cal-d.lv0.after{background:transparent;color:#3c4a56;}
button.cal-d{cursor:pointer;}
button.cal-d:hover{border-color:var(--cyan);}
button.cal-d:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;}
.cal-d.today{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(127,215,255,.35);}

.cal-key{width:12px;height:12px;border-radius:2px;display:inline-block;font-style:normal;
  border:1px solid transparent;}
.cal-key.lv0{background:#0e1820;} .cal-key.lv1{background:#1d3243;}
.cal-key.lv2{background:#2c4c63;} .cal-key.lv3{background:#3d6a86;}
.cal-key.today{background:#0e1820;border-color:var(--cyan);}

/* the row the calendar sent you to */
table.sess tr.hit td{background:#1d3243;}
table.sess tr.hit td:first-child{box-shadow:inset 2px 0 0 var(--cyan);}

/* ---------------------------------------------------------------
   Session history
   --------------------------------------------------------------- */
.sess-wrap{overflow-x:auto;border:1px solid var(--case-edge);border-radius:3px;background:var(--case);}
table.sess{border-collapse:collapse;width:100%;min-width:940px;font-size:12.5px;}
table.sess th,table.sess td{padding:8px 10px;text-align:left;border-top:1px solid var(--case-edge);
  vertical-align:top;}
table.sess thead th{border-top:0;background:var(--plate);font-family:"Barlow Condensed",sans-serif;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:600;
  white-space:nowrap;}
table.sess td.mono{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-2);
  white-space:nowrap;}
table.sess td.num{text-align:right;font-variant-numeric:tabular-nums;}
table.sess td b{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--brass);}
table.sess td span{display:block;font-size:11.5px;color:var(--ink-2);max-width:34ch;}
table.sess tr.live td{background:#12222c;}
.running{font-family:"Barlow Condensed",sans-serif;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cyan);}

/* ---------------------------------------------------------------
   Remarks
   --------------------------------------------------------------- */
#remarks textarea{width:100%;background:var(--plate);border:1px solid var(--case-edge);
  border-radius:3px;color:var(--ink);font-family:"IBM Plex Sans",sans-serif;font-size:13px;
  padding:10px 12px;resize:vertical;}
#remarks textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;}
.remark-acts{display:flex;flex-wrap:wrap;gap:8px;}

/* ---------------------------------------------------------------
   Inertness, stated rather than pretended
   --------------------------------------------------------------- */
.notice{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;
  display:flex;align-items:flex-start;gap:14px;max-width:min(760px,calc(100vw - 32px));
  background:#132029;border:1px solid #2c4557;border-left:3px solid var(--brass);
  border-radius:3px;padding:12px 14px;box-shadow:0 18px 40px -18px #000;}
.notice p{margin:0;font-size:12.5px;color:var(--ink-2);}

.norecord{background:var(--case);border:1px solid var(--case-edge);border-left:3px solid var(--amber);
  border-radius:0 4px 4px 0;padding:18px 22px;display:flex;flex-direction:column;gap:8px;
  align-items:flex-start;}
.norecord b{font-family:"Barlow Condensed",sans-serif;font-size:17px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);}
.norecord p{margin:0;font-size:13px;color:var(--ink-2);max-width:78ch;}
.norecord a{color:var(--cyan);font-size:13px;}

.bootfail{margin:24px 22px;}

.print-sign{flex-direction:column;gap:16px;border-top:1px solid #bbb;padding-top:14px;}
.print-sign h3{color:#111;}
.print-sign .print-remarks{min-height:44px;font-size:12.5px;color:#222;white-space:pre-wrap;}
.print-sign .signrow{display:flex;gap:40px;margin-top:26px;}
.print-sign .signrow div{flex:1;border-top:1px solid #444;padding-top:5px;font-size:11px;
  color:#444;font-family:"Barlow Condensed",sans-serif;letter-spacing:.14em;text-transform:uppercase;}

/* ---------------------------------------------------------------
   Narrow
   --------------------------------------------------------------- */
@media (max-width:1100px){
  .profile{grid-template-columns:minmax(0,1fr);}
  .idxcard{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:820px){
  .strip{grid-template-columns:minmax(0,1fr);}
  .bar{grid-template-columns:minmax(0,1fr) 62px auto;row-gap:6px;}
  .bar-name{grid-column:1/-1;}
  .bar-meta,.barwrap > .chip,.subs{margin-left:0;}
  .sub{grid-template-columns:minmax(0,1fr) 28px;row-gap:4px;}
  .sub-track{grid-column:1/-1;}
}
@media (max-width:600px){
  #page{padding:18px 13px 70px;gap:26px;}
  .topbar{padding:10px 13px;}
  .switcher select{max-width:150px;}
}

/* the report block is print-only, and this rule has to come BEFORE the
   print block: same specificity, so source order decides the winner */
.print-sign{display:none;}

/* ---------------------------------------------------------------
   The printed report — the one artefact of this screen that leaves
   the building.

   Written on the assumption that background graphics are OFF, which
   is what every browser defaults to: everything carried by a fill —
   the bar tracks, the heatmap cells, the histograms, the index scale
   — would come out as blank paper. So on paper the band is carried
   by ink instead, in rule and type, and the two charts drawn in
   strokes rather than fills are re-inked to survive the change of
   ground. Selectors here are prefixed with #page because the sweep
   that darkens the body text would otherwise outrank them.
   --------------------------------------------------------------- */
@media print{
  @page{margin:13mm;}
  html,body{background:#fff;}
  body{padding:0;}
  #page,#page *{color:#111;}

  /* screen furniture, and everything that only exists as a fill */
  .topbar,.notice,button,.hist,.err-track,.legend,.bar-track,.sub-track,
  .idx-scale,.bar-meta,#sec-remarks,.prov,.bar-caret{display:none !important;}
  /* three of those "buttons" are content, not controls: hiding them
     leaves a skill with no value, a heatmap cell blank and a calendar
     missing exactly the days it exists to show */
  #page button.bar{display:grid !important;}
  #page button.cell{display:block !important;}
  #page button.cal-d{display:flex !important;}

  #page{max-width:none;padding:0;gap:15px;}
  .band{break-inside:avoid;}
  .card,.idxcard,.err,.reco,.heat-wrap,.sess-wrap,.subs{background:#fff;border-color:#bbb;
    box-shadow:none;}
  .strip{background:#fff;padding:0 0 9px;border:0;border-bottom:2px solid #111;}
  .dash-page h2{font-size:15px;letter-spacing:.14em;border-bottom:1px solid #ccc;
    padding-bottom:3px;}
  #page .band-sub,#page .hintline,#page .idx-line,#page .strip-window,#page .time-line,
  #page .err-last,#page .bar-name,#page .sub-name,#page .tick,#page .axis{color:#444;}
  #page .band-sub,#page .hintline{font-size:10.5px;}
  #page .chip{border-color:#999;color:#333;background:#fff;}
  .idxcard{border:0;padding:0;}
  .idx-num b{font-size:44px;}
  .bar{grid-template-columns:minmax(0,1fr) 62px;padding:1px 0;}
  .sub{grid-template-columns:minmax(0,1fr) 34px;}

  /* the band, carried by ink rather than by fill */
  #page .tone-green{color:#12662f;} #page .tone-amber{color:#7a4f00;}
  #page .tone-red{color:#96170f;}
  #page .cell{background:#fff;border:1.4px solid #bbb;color:#111;padding:4px 0;}
  #page .cell.b-green{background:#fff;border-color:#12662f;color:#12662f;}
  #page .cell.b-amber{background:#fff;border-color:#7a4f00;color:#7a4f00;}
  #page .cell.b-red  {background:#fff;border-color:#96170f;color:#96170f;}
  #page .cell.b-none {background:#fff;border-style:dotted;color:#999;}
  table.heat,table.sess{font-size:10px;}
  table.heat th,table.heat td,table.sess th,table.sess td{border-color:#ddd;padding:4px 6px;}
  #page table.sess thead th,#page table.heat thead th{background:#fff;color:#111;
    border-bottom:1px solid #111;}
  #page table.sess tr.live td{background:#fff;}
  .heat-wrap,.sess-wrap{overflow:visible;}
  .err{border-left:2px solid #96170f;}
  #page .err-times b{color:#96170f;}

  /* the two charts that are strokes, not fills, and so do survive */
  .radar,.linechart{max-width:none;}
  .web,.spoke,.gl{stroke:#ddd;}
  .gl.pass,.web.pass{stroke:#999;}
  .tick,.axis,.axis-lab,.marklab{fill:#444;}
  .line{stroke:#111;}
  .trace.now{stroke:#111;fill:none;}
  .trace.prev{stroke:#888;}
  .trace.cohort{stroke:#aaa;}
  .ring{stroke:#666;}
  .pt.hollow{fill:#fff;}
  .dot.tone-green,.pt.solid.tone-green{fill:#12662f;stroke:#12662f;}
  .dot.tone-amber,.pt.solid.tone-amber{fill:#7a4f00;stroke:#7a4f00;}
  .dot.tone-red,.pt.solid.tone-red{fill:#96170f;stroke:#96170f;}
  .pt.hollow.tone-green{stroke:#12662f;}
  .pt.hollow.tone-amber{stroke:#7a4f00;}
  .pt.hollow.tone-red{stroke:#96170f;}

  /* the calendar is fills too — on paper a day that held a session is
     carried by a rule around it and the count beside the number */
  #page .cal-d{background:#fff;color:#111;border:1px solid transparent;}
  #page .cal-d.lv1,#page .cal-d.lv2,#page .cal-d.lv3{border-color:#111;font-weight:600;}
  #page .cal-d.lv0{color:#aaa;}
  #page .cal-d.today{border-color:#111;border-style:dashed;}
  #page .cal-d i{color:#111;}
  .cal{border-color:#bbb;background:#fff;}
  .cal-head b{font-size:13px;}

  .print-sign{display:flex;break-inside:avoid;}
}