/* ============================================================
   Academy Model Stations — the trainee's landing page.
   Loaded after signalling-panel.css, which carries the palette. Only
   the landing page's own furniture is here, plus the few rules the
   panels set that an application shell has to undo.

   Colour discipline, as the screen book has it: brass is the interface
   accent and never means status; the four signal colours are used only
   where they carry the meaning they carry on the board.
   ============================================================ */

body.app{padding:0;}
/* the panels space their reference sections with section{margin-top:44px} */
.app section{margin-top:0;}
/* and give every h2 a brass dash, which the band heads set for themselves */
.app h2::before{content:none;}

/* ---------------------------------------------------------------
   Top bar
   --------------------------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
  padding:11px 24px;background:rgba(9,15,21,.94);
  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-mark:hover .topbar-name{color:#fff;}

.topbar-who{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;}
.who-name{font-family:"Barlow Condensed",sans-serif;font-size:16px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);}
.who-fact{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.06em;color:var(--ink-2);}
.who-fact b{color:var(--rail);font-weight:500;}

.topbar-acts{margin-left:auto;display:flex;gap:8px;}
.call{border-color:#3d5b70;background:#1d3243;}
.call:hover{background:#264257;}
.ghost{background:transparent;}
.ghost:hover{background:#1a2b38;}

/* ---------------------------------------------------------------
   Shell — rail and page
   --------------------------------------------------------------- */
.shell{display:grid;grid-template-columns:212px minmax(0,1fr);gap:0;
  max-width:1460px;margin:0 auto;}
/* the page with no record to draw takes the rail out with the sections
   it indexed, and the grid has to be told or the message sits in the
   rail's column */
.shell.norail{grid-template-columns:minmax(0,1fr);}

.rail{border-right:1px solid var(--case-edge);padding:22px 0 60px;
  position:sticky;top:53px;align-self:start;max-height:calc(100vh - 53px);overflow-y:auto;}
.rail ul{list-style:none;margin:0;padding:0 12px;display:flex;flex-direction:column;gap:2px;}
.rail a,.rail span.soon{
  display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:2px;
  border-left:2px solid transparent;text-decoration:none;
  font-family:"Barlow Condensed",sans-serif;font-size:15px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
}
.rail a:hover{color:var(--ink);background:var(--case);border-left-color:var(--brass);}
.rail a:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;}
.rail a.here{color:var(--ink);background:var(--case);border-left-color:var(--brass);}
.rail span.soon{color:var(--ink-3);cursor:default;}
.rail span.soon::after{content:"soon";margin-left:auto;font-family:"IBM Plex Mono",monospace;
  font-size:9px;letter-spacing:.14em;color:var(--ink-3);border:1px solid var(--case-edge);
  border-radius:2px;padding:1px 4px;}
.rail .count{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:0;color:var(--ink-3);}
.rail a.here .count,.rail a:hover .count{color:var(--cyan);}

.page{padding:26px 30px 90px;display:flex;flex-direction:column;gap:38px;min-width:0;}

/* ---------------------------------------------------------------
   Band heads
   --------------------------------------------------------------- */
.band{display:flex;flex-direction:column;gap:14px;scroll-margin-top:68px;}
.band-head{display:flex;flex-direction:column;gap:3px;}
.band h2{font-family:"Barlow Condensed",sans-serif;font-size:23px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;margin:0;}
.band-sub{margin:0;font-size:13.5px;color:var(--ink-2);max-width:80ch;}
.band-sub b{color:var(--ink);}
.band.practice{border-top:1px solid var(--case-edge);padding-top:30px;}
.band.practice h2{color:var(--ink-2);font-size:19px;}

.empty{margin:0;padding:16px 18px;border:1px dashed var(--case-edge);border-radius:3px;
  font-size:13.5px;color:var(--ink-3);background:rgba(19,32,41,.4);}

/* ---------------------------------------------------------------
   The live strip — the instructor is driving this cubicle
   --------------------------------------------------------------- */
/* ---------------------------------------------------------------
   Reading somebody else's page

   Brass, not cyan and not red: this is not a fault and it is not a
   thing to act on, it is the page telling the reader what they are
   looking at. Cyan is what is open to you, and the one thing this
   strip says is that none of it is.
   --------------------------------------------------------------- */
.viewing{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 26px;align-items:center;
  padding:14px 18px;border:1px solid rgba(201,162,39,.4);border-left:3px solid var(--brass);
  border-radius:0 4px 4px 0;background:rgba(201,162,39,.06);
}
.viewing[hidden]{display:none;}
.viewing-t{display:flex;flex-direction:column;gap:3px;min-width:0;}
.viewing-t b{font-family:"Barlow Condensed",sans-serif;font-size:17px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brass);}
.viewing-t p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5;max-width:88ch;}
.viewing-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.viewing-acts select{font:inherit;font-size:12.5px;background:#0f1a23;color:var(--ink);
  border:1px solid var(--case-edge);border-radius:2px;padding:7px 10px;max-width:230px;}
.viewing-go{font-family:"Barlow Condensed",sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  background:#1a2b38;border:1px solid #2c4557;border-radius:2px;padding:8px 13px;
  white-space:nowrap;}
.viewing-go:hover{background:#22384a;}

/* the page there is nothing to draw on. It replaces the sections
   rather than sitting above empty ones, so the rail is emptied with it */
.norecord{display:flex;flex-direction:column;gap:11px;align-items:flex-start;
  background:var(--case);border:1px solid var(--case-edge);border-radius:4px;
  padding:26px 28px;max-width:82ch;}
.norecord b{font-family:"Barlow Condensed",sans-serif;font-size:22px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);}
.norecord p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.6;}
.norecord p:empty{display:none;}
.norecord-acts{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:6px;}
.norecord-acts select{font:inherit;font-size:12.5px;background:#0f1a23;color:var(--ink);
  border:1px solid var(--case-edge);border-radius:2px;padding:8px 11px;max-width:260px;}

.live{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 26px;align-items:center;
  padding:18px 22px;border:1px solid #2d5568;border-left:3px solid var(--cyan);
  border-radius:0 4px 4px 0;background:linear-gradient(90deg,#132833,#0f1e27 70%);
  box-shadow:0 0 0 1px rgba(127,215,255,.08),0 18px 46px -30px #000;
}
.live[hidden]{display:none;}
.live-eyebrow{margin:0 0 5px;display:flex;align-items:center;gap:9px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan);}
.live-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);animation:pulse 1.9s ease-in-out infinite;}
@keyframes pulse{50%{opacity:.3;}}
.live h2{font-family:"Barlow Condensed",sans-serif;font-size:25px;font-weight:600;
  letter-spacing:.06em;margin:0;line-height:1.12;text-transform:none;}
.live h2 span{color:var(--rail-dim);}
.live-detail{margin:6px 0 0;font-size:13.5px;color:var(--ink-2);}
.live-meta{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:7px;}
.live-go{white-space:nowrap;font-size:15px;padding:12px 22px;
  background:#1d3243;border-color:var(--cyan);color:#eaf6ff;letter-spacing:.16em;}
.live-go:hover{background:#26485e;}

/* ---------------------------------------------------------------
   Chips — the shared vocabulary
   --------------------------------------------------------------- */
.chip{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);background:#101c25;
  border:1px solid var(--case-edge);border-radius:2px;padding:3px 8px;white-space:nowrap;}
.chip b{color:var(--rail);font-weight:500;}
.chip.mode-guided   {color:#9fe6b4;border-color:rgba(34,197,94,.4);}
.chip.mode-corrected{color:#ffd08a;border-color:rgba(255,176,32,.4);}
.chip.mode-assessed {color:#ff9a91;border-color:rgba(255,68,56,.42);}
.chip.cyan{color:var(--cyan);border-color:rgba(127,215,255,.4);}
.chip.brass{color:var(--brass);border-color:rgba(201,162,39,.45);}

/* ---------------------------------------------------------------
   Due and mandatory
   --------------------------------------------------------------- */
.duelist{display:flex;flex-direction:column;gap:8px;}
.due{
  display:grid;grid-template-columns:44px minmax(0,1fr) 150px 132px;gap:18px;align-items:center;
  background:var(--case);border:1px solid var(--case-edge);border-left:3px solid var(--case-edge);
  border-radius:0 3px 3px 0;padding:13px 18px;
}
.due.state-complete{border-left-color:var(--green);}
.due.state-due     {border-left-color:var(--amber);}
.due.state-overdue {border-left-color:var(--red);}
.due.state-blocked {border-left-color:var(--ink-3);}
.due-code{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;color:var(--brass);}
.due-name{min-width:0;}
.due-name b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:17px;font-weight:600;
  letter-spacing:.06em;color:var(--ink);line-height:1.2;}
.due-name span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px;}
.due-when{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-2);text-align:right;}
.due-when b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;margin-bottom:2px;}
.due.state-overdue .due-when b{color:#ff9a91;}

/* the progress bar, used here and in the course cards */
.meter{display:flex;align-items:center;gap:9px;}
.meter-track{flex:1;height:5px;border-radius:3px;background:#16252f;overflow:hidden;}
.meter-fill{height:100%;border-radius:3px;background:var(--rail-dim);transition:width .4s ease;}
.meter.good .meter-fill{background:var(--green);}
.meter.mid  .meter-fill{background:var(--amber);}
.meter.low  .meter-fill{background:var(--red);}
.meter-pct{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink);
  font-variant-numeric:tabular-nums;min-width:38px;text-align:right;}

@media (max-width:900px){
  .due{grid-template-columns:36px minmax(0,1fr);row-gap:10px;}
  .due-when{text-align:left;grid-column:2;}
  .due .meter{grid-column:2;}
}

/* ---------------------------------------------------------------
   Course cards
   --------------------------------------------------------------- */
.courses{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(400px,1fr));}
/* grid and flex items default to min-width:auto, which lets a long
   nowrap chip push a card wider than its own column */
.courses > li{display:flex;min-width:0;}
.course{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 22%),var(--case);
  border:1px solid var(--case-edge);border-radius:4px;padding:16px 18px 18px;
  box-shadow:0 22px 60px -34px #000;
}
.course-top{display:flex;align-items:flex-start;gap:12px;}
.course-code{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;
  color:var(--brass);padding-top:3px;}
.course-title{min-width:0;flex:1;}
.course-title h3{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:23px;
  letter-spacing:.05em;text-transform:uppercase;margin:0;line-height:1.05;}
.course-title p{margin:5px 0 0;font-size:12.5px;color:var(--ink-2);}

/* the schematic — the same track, drawn to the working board's own
   co-ordinates, so a course is recognised by its layout */
.course-thumb{background:var(--plate);border:1px solid #1a2b38;border-radius:3px;
  padding:8px;box-shadow:0 0 0 3px #080e13 inset;}
.course-thumb svg{display:block;width:100%;height:auto;}
.t-rail{fill:none;stroke:#f0a63c;stroke-width:7;stroke-linecap:round;opacity:.85;}
.t-diag{fill:none;stroke:#4a5f70;stroke-width:6;stroke-linecap:round;}
.t-stop{stroke:#9fb8c9;stroke-width:6;}
.t-pf{fill:#1b2c38;stroke:#2c4557;}
.course.blocked .t-rail{stroke:#3d5b70;opacity:.6;}

.course-meta{display:flex;flex-wrap:wrap;gap:6px;}
.course-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:9px 8px;margin:0;}
.course-stats div{border-left:1px solid var(--case-edge);padding-left:10px;}
.course-stats dt{font-family:"Barlow Condensed",sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);}
.course-stats dd{font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:600;
  color:var(--rail);margin:1px 0 0;font-variant-numeric:tabular-nums;}

.course-next{margin-top:auto;padding-top:13px;border-top:1px solid var(--case-edge);
  display:flex;align-items:center;gap:14px;}
.course-next .nx{min-width:0;flex:1;}
.course-next .nx b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);}
.course-next .nx span{display:block;font-size:13px;color:var(--ink);margin-top:2px;}
.course-next button{white-space:nowrap;}
.course.blocked{opacity:.72;}
.blockedby{margin:0;font-size:12.5px;color:#ffd08a;
  border-left:2px solid var(--amber);padding-left:11px;}

/* ---------------------------------------------------------------
   Skill packs
   --------------------------------------------------------------- */
.packs{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.pack{
  display:flex;flex-direction:column;gap:10px;height:100%;
  background:var(--plate);border:1px solid var(--case-edge);border-left:3px solid var(--brass);
  border-radius:0 3px 3px 0;padding:15px 17px;
}
.pack.done{border-left-color:var(--green);opacity:.8;}
.pack-skill{margin:0;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass);}
.pack.done .pack-skill{color:var(--green);}
.pack h3{font-family:"Barlow Condensed",sans-serif;font-size:19px;font-weight:600;
  letter-spacing:.06em;margin:0;line-height:1.15;}
.pack-why{margin:0;font-size:12.5px;color:var(--ink-2);}
.pack-why b{color:var(--ink);font-weight:500;}
.pack-foot{margin-top:auto;padding-top:11px;display:flex;align-items:center;gap:12px;
  border-top:1px solid var(--case-edge);}
.pack-foot .m{flex:1;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);}

/* ---------------------------------------------------------------
   Tests
   --------------------------------------------------------------- */
.testgroup{display:flex;flex-direction:column;gap:9px;}
.testgroup + .testgroup{margin-top:20px;}
.testgroup > h3{font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin:0;
  display:flex;align-items:center;gap:11px;}
.testgroup > h3::after{content:"";flex:1;height:1px;background:var(--case-edge);}

.test{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 22px;align-items:center;
  background:var(--case);border:1px solid var(--case-edge);border-left:3px solid var(--case-edge);
  border-radius:0 3px 3px 0;padding:14px 18px;
}
.test.available{border-left-color:var(--cyan);}
.test.scheduled{border-left-color:var(--ink-3);}
.test.pass{border-left-color:var(--green);}
.test.fail{border-left-color:var(--red);}
.test-main{min-width:0;}
.test-main h4{font-family:"Barlow Condensed",sans-serif;font-size:18px;font-weight:600;
  letter-spacing:.05em;margin:0;line-height:1.2;}
.test-meta{margin:7px 0 0;display:flex;flex-wrap:wrap;gap:6px;}
.test-note{margin:8px 0 0;font-size:12.5px;color:var(--ink-2);}
.test.scheduled .test-note{color:var(--ink-3);}
.test-right{display:flex;align-items:center;gap:16px;}
.test-score{text-align:right;}
.test-score b{display:block;font-family:"IBM Plex Mono",monospace;font-size:26px;font-weight:600;
  line-height:1;font-variant-numeric:tabular-nums;}
.test-score span{display:block;font-family:"Barlow Condensed",sans-serif;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;margin-top:4px;}
.test.pass .test-score b{color:var(--green);} .test.pass .test-score span{color:var(--green);}
.test.fail .test-score b{color:var(--red);}   .test.fail .test-score span{color:var(--red);}
.locked{font-family:"Barlow Condensed",sans-serif;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;}

@media (max-width:820px){
  .test{grid-template-columns:minmax(0,1fr);}
  .test-right{justify-content:flex-start;}
}

/* ---------------------------------------------------------------
   Performance snapshot
   --------------------------------------------------------------- */
.perf{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);gap:16px;}
@media (max-width:900px){ .perf{grid-template-columns:minmax(0,1fr);} }

.perf-figures{background:var(--case);border:1px solid var(--case-edge);border-radius:3px;
  padding:18px 20px;display:flex;flex-direction:column;gap:16px;}
.perf-index{display:flex;align-items:baseline;gap:12px;}
.perf-index b{font-family:"IBM Plex Mono",monospace;font-size:46px;font-weight:600;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;}
.perf-index .band-tag{font-family:"Barlow Condensed",sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;}
.tone-green{color:var(--green);} .tone-amber{color:var(--amber);} .tone-red{color:var(--red);}
.perf-line{margin:0;font-size:13px;color:var(--ink-2);}
.perf-line b{color:var(--ink);font-weight:500;}
.perf-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  border-top:1px solid var(--case-edge);padding-top:14px;}
.perf-tiles div{display:flex;flex-direction:column;gap:2px;}
.perf-tiles dt{font-family:"Barlow Condensed",sans-serif;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);}
.perf-tiles dd{margin:0;font-family:"IBM Plex Mono",monospace;font-size:19px;font-weight:600;
  color:var(--rail);font-variant-numeric:tabular-nums;}

.perf-skills{background:var(--case);border:1px solid var(--case-edge);border-radius:3px;
  padding:18px 20px;display:flex;flex-direction:column;gap:11px;}
.perf-skills > h3{font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin:0;}
.sk{display:grid;grid-template-columns:150px minmax(0,1fr) 34px;gap:12px;align-items:center;}
.sk-name{font-size:12.5px;color:var(--ink-2);}
.sk-track{position:relative;height:7px;border-radius:3px;background:#16252f;overflow:hidden;}
.sk-fill{position:absolute;inset:0 auto 0 0;border-radius:3px;transition:width .5s ease;}
.sk-fill.tone-green{background:var(--green);}
.sk-fill.tone-amber{background:var(--amber);}
.sk-fill.tone-red{background:var(--red);}
.sk-target{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--ink-2);opacity:.7;}
.sk-val{font-family:"IBM Plex Mono",monospace;font-size:12.5px;text-align:right;color:var(--ink);
  font-variant-numeric:tabular-nums;}
.perf-foot{margin:4px 0 0;font-size:11.5px;color:var(--ink-3);
  border-top:1px solid var(--case-edge);padding-top:11px;}
.perf-foot a{color:var(--cyan);}
@media (max-width:520px){ .sk{grid-template-columns:minmax(0,1fr) 34px;} .sk-name{grid-column:1/-1;} }

/* ---------------------------------------------------------------
   Free practice
   --------------------------------------------------------------- */
.practice-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.practice-list a{
  display:flex;flex-direction:column;gap:4px;text-decoration:none;
  background:var(--plate);border:1px solid var(--case-edge);border-radius:3px;padding:13px 16px;
  transition:border-color .18s,transform .18s;
}
.practice-list a:hover{border-color:#3d5b70;transform:translateY(-2px);}
.practice-list a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.practice-list b{font-family:"Barlow Condensed",sans-serif;font-size:16px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);}
.practice-list span{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-2);}
.practice-list a[aria-disabled="true"]{opacity:.45;pointer-events:none;}

/* ---------------------------------------------------------------
   Boot failure — the page is nothing without its configuration
   --------------------------------------------------------------- */
.bootfail{margin:26px 30px;}

@media (prefers-reduced-motion:reduce){
  .live-eyebrow::before{animation:none;}
  .meter-fill,.sk-fill,.practice-list a{transition:none;}
}

@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr);}
  .rail{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--case-edge);
    padding:12px 0;}
  .rail ul{flex-direction:row;flex-wrap:wrap;padding:0 16px;}
  .rail a,.rail span.soon{border-left:0;border-bottom:2px solid transparent;padding:7px 10px;}
  .rail a.here{border-left:0;border-bottom-color:var(--brass);}
  .rail .count,.rail span.soon::after{display:none;}
  .page{padding:22px 16px 70px;gap:30px;}
  .live{grid-template-columns:minmax(0,1fr);}
  .courses{grid-template-columns:minmax(0,1fr);}
  /* a board's full name is longer than a narrow card; let it wrap
     rather than push the card past the edge of the page */
  .chip{white-space:normal;}
}