/* The dates table. One component on every page that lists a date: the main course board, every
   hub, every centre page and every course page. Lifted out of info.css when the catalogue became
   the only build, because three of those four never load info.css. */

.acadame .vd-board { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#fff; }

.acadame .vd-list { display:grid; gap:1px; background:var(--border); }

.acadame .vd-list li { display:grid; grid-template-columns:190px 1fr 150px 92px; gap:14px; align-items:center;
  background:#fff; padding:11px 14px; font-size:14px; }

.acadame .vd-when { font-weight:600; color:var(--primary); }

.acadame .vd-name { color:var(--text); }

.acadame .vd-name a { color:var(--primary); font-weight:600; text-decoration:none; }

.acadame .vd-name a:hover, .acadame .vd-name a:focus-visible { color:var(--red); text-decoration:underline; }

.acadame .vd-meta { color:var(--text); font-size:13px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.acadame .vd-full { font-style:normal; font-weight:600; color:var(--red-ink); }

.acadame .vd-few { font-style:normal; font-weight:600; color:var(--red-ink); }

.acadame .vd-list .btn { padding:6px 14px; font-size:13px; }

.acadame .vd-list li[hidden] { display:none; }

/* Filters: three selects and a search box on one row, then the switches and the export button. */
.acadame /* Fits itself to the controls it has. A scoped hub board drops the category filter, and a fixed four
   column grid left a hole where it used to be. */
.vd-filter { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px 14px; align-items:end; margin:0 0 14px; }

.acadame .vd-filter label { display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; color:var(--primary); }

.acadame .vd-filter input[type=search], .acadame .vd-filter select { font:inherit; font-weight:400; font-size:14px; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; color:var(--text); width:100%; }

.acadame .vd-filter input[type=search]:focus, .acadame .vd-filter select:focus { outline:2px solid var(--primary); outline-offset:-1px; }

.acadame .vd-f-row { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }

.acadame .vd-f-c { flex-direction:row !important; align-items:center; gap:8px !important; font-weight:400 !important; color:var(--text) !important; white-space:nowrap; }

.acadame .vd-f-c input { width:16px; height:16px; }

.acadame .vd-x-open { padding:8px 14px !important; font-size:13px !important; }

.acadame .vd-count { margin:0 !important; margin-left:auto !important; font-size:13px; color:var(--text); }

/* The export panel. Same idea as the course sheet: a small card that opens where you are. */
.acadame .vd-x { grid-column:1 / -1; }

.acadame .vd-x-in { position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--sh); padding:18px 20px 20px; max-width:520px; }

.acadame .vd-x-in h3 { font-size:16px; margin:0 0 6px; color:var(--primary); }

.acadame .vd-x-close { position:absolute; top:8px; right:10px; width:30px; height:30px; border:0; background:none; font-size:22px; line-height:1; color:var(--text); cursor:pointer; border-radius:8px; }

.acadame .vd-x-close:hover { background:var(--light); }

.acadame .vd-x-sum { font-size:13px; color:var(--text); margin:0 0 14px !important; }

.acadame .vd-x-lab { font-size:13px; font-weight:600; color:var(--primary); margin:0 0 8px !important; }

.acadame .vd-x-vs { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; margin-bottom:8px; }

.acadame .vd-filter .vd-x-v, .acadame .vd-filter .vd-x-all { display:flex; flex-direction:row; align-items:center; gap:8px; font-size:13.5px; color:var(--text); font-weight:400; }

.acadame .vd-x-v input, .acadame .vd-x-all input { width:16px; height:16px; flex:0 0 16px; }

.acadame .vd-filter .vd-x-all { margin-bottom:14px; font-weight:600; color:var(--primary); }

.acadame .vd-x-f { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin-bottom:12px; }

.acadame .vd-filter .vd-x-i { display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; color:var(--primary); }

.acadame .vd-x-i input { font:inherit; font-weight:400; font-size:14px; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; color:var(--text); width:100%; }

.acadame .vd-x-i input:focus { outline:2px solid var(--primary); outline-offset:-1px; }

.acadame .vd-x-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.acadame .vd-x-go { border:0; cursor:pointer; }

.acadame .vd-x-go.is-off, .acadame .vd-x-go[disabled] { opacity:.45; pointer-events:none; }

.acadame .vd-x-msg { margin:10px 0 0 !important; font-size:13px; color:var(--text); }

.acadame .vd-x-msg.is-good { color:var(--primary); font-weight:600; }

.acadame .vd-x-msg.is-bad { color:var(--red-ink); font-weight:600; }

.acadame .vd-x-note { font-size:12.5px; color:var(--text); margin:10px 0 0 !important; }

/* Places left. Deliberately loud: it is the one thing on the row that changes a decision. */
.acadame .vd-few { display:inline-flex; align-items:center; gap:5px; font-style:normal; font-size:11.5px; font-weight:800; line-height:1; color:#fff; background:var(--red); border-radius:999px; padding:4px 9px; white-space:nowrap; }

.acadame .vd-few::before { content:''; width:6px; height:6px; border-radius:50%; background:#fff; opacity:.9; }

.acadame .vd-full { display:inline-block; font-style:normal; font-size:11.5px; font-weight:700; line-height:1; color:var(--primary); background:var(--light); border:1px solid var(--border); border-radius:999px; padding:4px 9px; white-space:nowrap; }

.acadame .vd-more { margin-top:1px; }

.acadame .vd-more > summary { cursor:pointer; list-style:none; background:#fff; padding:12px 14px; font-size:14px; font-weight:600; color:var(--primary); }

.acadame .vd-more > summary::-webkit-details-marker { display:none; }

.acadame .vd-more > summary::after { content:' \25BE'; }

.acadame .vd-more[open] > summary::after { content:' \25B4'; }

.acadame .vd-more > summary:hover { text-decoration:underline; }

.acadame .vd-more > summary:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }

.acadame .vd-more .vd-list { margin-top:1px; }

.acadame .vd-note { font-size:13px; margin-top:10px !important; color:var(--text); }

.acadame .vd-note a { color:var(--primary); font-weight:600; text-decoration:underline !important; }
@media (max-width:820px) {
  
  .acadame .vd-list li { grid-template-columns:1fr auto; grid-template-areas:'when btn' 'name btn' 'meta btn'; gap:2px 12px; padding:12px 14px; align-items:start; }
  
  .acadame .vd-when { grid-area:when; font-size:13px; }
  
  .acadame .vd-name { grid-area:name; font-weight:600; }
  
  .acadame .vd-meta { grid-area:meta; }
  
  .acadame .vd-gap { display:none; }
  
  .acadame .vd-list .btn { grid-area:btn; align-self:center; }
  
  .acadame .vd-filter { grid-template-columns:1fr; gap:10px; }
  
  .acadame .vd-f-row { flex-direction:column; align-items:flex-start; }
  
  .acadame .vd-count { margin-left:0 !important; }
  
  .acadame .vd-x-vs { grid-template-columns:1fr; }
}

/* A dates board that covers every centre names the centre on each row and filters by it. */
.acadame .vd-at { display:inline-block; font-style:normal; font-size:11.5px; font-weight:700; line-height:1; color:var(--primary); background:var(--lb); border:1px solid var(--border); border-radius:999px; padding:4px 9px; white-space:nowrap; }

.acadame .vd-filter-5 { grid-template-columns:repeat(5,1fr); }
@media (max-width:1100px) {
   .acadame .vd-filter-5 { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:820px) {
   .acadame .vd-filter-5 { grid-template-columns:1fr; }
}




/* The dates board on a hub is the same table as the catalogue below it, so it is finished the same
   way: one bordered block rather than a bare stack of rows, the venue and the price on one line,
   and the outlined Book the catalogue uses. */
.acadame .vd-list { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }

.acadame .vd-list li { grid-template-columns:190px 1fr 250px 96px; }

.acadame .vd-meta { flex-wrap:nowrap; font-size:13px; font-variant-numeric:tabular-nums; }

.acadame .vd-list .btn { min-height:0; padding:8px 16px; font-size:13px; font-weight:700; border-radius:999px; color:var(--red-ink); background:#fff; border:1px solid var(--red); box-shadow:none; justify-self:end; }

.acadame .vd-list .btn:hover { color:#fff; background:var(--red); border-color:var(--red); }
@media (max-width:820px) {
  
  .acadame .vd-list li { grid-template-columns:1fr auto; }
  
  .acadame .vd-meta { flex-wrap:wrap; }
  
  .acadame .vd-list .btn { justify-self:end; }
}




/* ---- The course catalogue (info block: catalogue) ------------------------------------------
   Everything we run, in one list, filtered in the browser on rows that are already in the page.
   Built to read as a reference list rather than a set of cards: a person scanning 350 courses
   wants alignment and density, not 350 boxes. */
.acadame .cat-intro { max-width:74ch; margin:0 0 16px; }


.acadame .cat-filter { display:grid; grid-template-columns:2fr 1fr; gap:12px 14px; align-items:end; margin:0 0 14px; }


.acadame .cat-filter label { display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; color:var(--primary); }


.acadame .cat-filter input[type=search], .acadame .cat-filter select { font:inherit; font-weight:400; font-size:14px; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; color:var(--text); width:100%; }


.acadame .cat-filter input[type=search]:focus, .acadame .cat-filter select:focus { outline:2px solid var(--primary); outline-offset:-1px; }


.acadame .cat-f-d { grid-column:1 / -1; flex-direction:row !important; align-items:center; gap:8px !important; font-weight:400 !important; color:var(--text) !important; }


.acadame .cat-f-d input { width:16px; height:16px; flex:0 0 auto; }


.acadame .cat-f-d b { font-weight:700; color:var(--primary); }


.acadame .cat-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }


.acadame .cat-chip { font:inherit; font-size:13px; font-weight:600; line-height:1; color:var(--primary); background:#fff; border:1px solid var(--border); border-radius:999px; padding:9px 14px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }


.acadame .cat-chip b { font-weight:700; font-size:12px; color:var(--text); background:var(--light); border-radius:999px; padding:2px 7px; }


.acadame .cat-chip:hover { border-color:var(--primary); }


.acadame .cat-chip:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }


.acadame .cat-chip.on { background:var(--primary); border-color:var(--primary); color:#fff; }


.acadame .cat-chip.on b { background:rgba(255,255,255,.22); color:#fff; }


.acadame .cat-count { margin:0 0 10px !important; font-size:13px; color:var(--text); }


.acadame .cat-list { display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; list-style:none; padding:0; margin:0; }


.acadame .cat-list li[hidden] { display:none; }


.acadame .cat-h { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px 14px; background:var(--light); padding:13px 16px 10px; }


.acadame .cat-h h3 { margin:0; font-size:15px; color:var(--primary); }


.acadame .cat-h-n { font-size:12.5px; font-weight:700; color:var(--text); }


.acadame .cat-cols { grid-column:1 / -1; display:grid; grid-template-columns:1fr 150px 130px 132px; gap:14px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text); opacity:.75; padding-top:4px; }


.acadame .cat-row { background:#fff; }


.acadame .cat-row > .cat-r:hover { background:var(--lb); }


.acadame .cat-n { display:flex; flex-direction:column; gap:2px; min-width:0; }


.acadame .cat-n a { font-size:14.5px; font-weight:600; line-height:1.35; color:var(--primary); text-decoration:none; }


.acadame .cat-n a:hover { text-decoration:underline; }


.acadame .cat-n em { font-style:normal; font-size:12px; color:var(--text); }


.acadame .cat-d, .acadame .cat-p { font-size:13.5px; color:var(--text); }


.acadame .cat-p { font-weight:600; color:var(--primary); font-variant-numeric:tabular-nums; }


.acadame .cat-w { justify-self:start; font-size:11.5px; font-weight:700; line-height:1; border-radius:999px; padding:5px 10px; white-space:nowrap; }


.acadame .cat-on { color:#fff; background:var(--red); }


.acadame .cat-now { color:var(--primary); background:var(--lb); border:1px solid var(--border); }


.acadame .cat-reg { color:var(--primary); background:var(--light); border:1px solid var(--border); }


.acadame .cat-ask { color:var(--text); background:#fff; border:1px solid var(--border); }


.acadame .cat-more { background:#fff; padding:0; }


.acadame .cat-more button { font:inherit; width:100%; text-align:left; background:none; border:0; padding:13px 16px; font-size:13.5px; font-weight:600; color:var(--primary); cursor:pointer; }


.acadame .cat-more button:hover { background:var(--light); text-decoration:underline; }


.acadame .cat-more button:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }


.acadame .cat-empty { margin:16px 0 0 !important; font-size:14px; }


.acadame .cat-empty a { color:var(--primary); font-weight:600; text-decoration:underline !important; }


.acadame .cat-note { margin:12px 0 0 !important; font-size:13px; color:var(--text); }
@media (max-width:900px) {
  
  
  .acadame .cat-cols { display:none; }
  
  
  .acadame .cat-n { grid-column:1; grid-row:1 / span 2; }
  
  
  .acadame .cat-w { grid-column:2; grid-row:1; justify-self:end; }
  
  
  .acadame .cat-p { grid-column:2; grid-row:2; justify-self:end; font-size:13px; }
  
  
  .acadame .cat-d { grid-column:1 / -1; grid-row:3; font-size:12.5px; }
  
  
  .acadame .cat-d:empty { display:none; }
  
  
  .acadame .cat-filter { grid-template-columns:1fr; gap:10px; }
}


/* The table row becomes a details element wherever the course has dates, so the availability cell
   opens the dates in place. No script is involved, which is why it still works with JS off. */
.acadame .cat-row .cat-r { display:grid; grid-template-columns:1fr 150px 130px 132px; gap:14px; align-items:center; padding:12px 16px; }


.acadame .cat-row > .cat-dt { display:block; }


.acadame .cat-row summary.cat-r { cursor:pointer; list-style:none; }


.acadame .cat-row summary.cat-r::-webkit-details-marker { display:none; }


.acadame .cat-row summary.cat-r:hover { background:var(--lb); }


.acadame .cat-row summary.cat-r:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }


.acadame .cat-w i { display:inline-block; width:6px; height:6px; margin-left:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .15s; }


.acadame .cat-dt[open] .cat-w i { transform:translateY(1px) rotate(-135deg); }


.acadame .cat-dt[open] summary.cat-r { background:var(--light); }


.acadame .cat-dd { background:var(--light); padding:2px 16px 16px; border-top:1px solid var(--border); }


.acadame .cd-list { list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }


.acadame .cd-list li { display:grid; grid-template-columns:210px 170px 130px 1fr 96px; gap:14px; align-items:center; background:#fff; padding:10px 14px; margin:0; }


.acadame .cd-list li.cd-is-full { background:#fbfbfc; }


.acadame .cd-when { font-size:13.5px; font-weight:600; color:var(--primary); }


.acadame .cd-at { font-size:12.5px; font-weight:700; color:var(--primary); background:var(--lb); border-radius:999px; padding:4px 10px; justify-self:start; white-space:nowrap; }


.acadame .cd-price { font-size:13.5px; font-weight:600; color:var(--primary); font-variant-numeric:tabular-nums; }


.acadame .cd-few { display:inline-block; font-style:normal; font-size:11.5px; font-weight:700; line-height:1; color:#fff; background:var(--red); border-radius:999px; padding:4px 9px; white-space:nowrap; }


.acadame .cd-full { display:inline-block; font-style:normal; font-size:11.5px; font-weight:700; line-height:1; color:var(--text); background:var(--light); border:1px solid var(--border); border-radius:999px; padding:4px 9px; white-space:nowrap; }


.acadame .cd-book { display:inline-block; font-size:13px; font-weight:700; line-height:1; color:var(--red-ink); background:#fff; border:1px solid var(--red); border-radius:999px; padding:8px 16px; text-decoration:none; justify-self:end; white-space:nowrap; }


.acadame .cd-book:hover { color:#fff; background:var(--red); }


.acadame .cd-note { margin:10px 0 0 !important; font-size:12.5px; color:var(--text); }


.acadame .cd-note a { color:var(--primary); font-weight:600; text-decoration:underline !important; }


.acadame .cat-fullup { color:var(--text); background:var(--light); border:1px solid var(--border); }
@media (max-width:900px) {
  
  
  .acadame .cat-row .cat-r { grid-template-columns:1fr auto; gap:4px 12px; align-items:start; }
  
  
  .acadame .cd-list li { grid-template-columns:1fr auto; gap:4px 12px; align-items:start; }
  
  
  .acadame .cd-when { grid-column:1; grid-row:1; }
  
  
  .acadame .cd-at { grid-column:2; grid-row:1; justify-self:end; }
  
  
  .acadame .cd-price { grid-column:1; grid-row:2; }
  
  
  .acadame .cd-left { grid-column:1; grid-row:3; }
  
  
  .acadame .cd-book { grid-column:2; grid-row:2 / span 2; align-self:center; }
  
  
  .acadame .cd-gap { display:none; }
  
  
  .acadame .cat-dd { padding:2px 12px 12px; }
}



/* The export. Same idea as the old date board's: a small card that opens where you are, carrying
   whatever the filters have left rather than whatever happens to be on screen. */
.acadame .cat-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:0 0 10px; }


.acadame .cat-bar .cat-count { margin:0 !important; }


.acadame .cat-x-open { padding:8px 14px !important; font-size:13px !important; margin-left:auto; }


.acadame .cat-x { margin:0 0 14px; }


.acadame .cat-x-in { position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--sh); padding:18px 20px 20px; max-width:520px; }


.acadame .cat-x-in h3 { font-size:16px; margin:0 0 6px; color:var(--primary); }


.acadame .cat-x-close { position:absolute; top:8px; right:10px; width:30px; height:30px; border:0; background:none; font-size:22px; line-height:1; color:var(--text); cursor:pointer; border-radius:8px; }


.acadame .cat-x-close:hover { background:var(--light); }


.acadame .cat-x-sum { font-size:13.5px; color:var(--text); margin:0 0 12px !important; }


.acadame .cat-x-lab { font-size:13px; font-weight:600; color:var(--primary); margin:0 0 7px !important; }


.acadame .cat-x-vs { display:grid; grid-template-columns:repeat(2,1fr); gap:6px 14px; margin:0 0 10px; }


.acadame .cat-x-v, .acadame .cat-x-one { display:flex; flex-direction:row; align-items:center; gap:8px; font-size:13.5px; color:var(--text); }


.acadame .cat-x-v input, .acadame .cat-x-one input { width:16px; height:16px; flex:0 0 auto; }


.acadame .cat-x-one { margin:0 0 14px; }


.acadame .cat-x-f { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:0 0 14px; }


.acadame .cat-x-i { display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; color:var(--primary); }


.acadame .cat-x-i input { font:inherit; font-weight:400; font-size:14px; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; color:var(--text); width:100%; }


.acadame .cat-x-i input:focus { outline:2px solid var(--primary); outline-offset:-1px; }


.acadame .cat-x-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }


.acadame .cat-x-go.is-off { opacity:.5; pointer-events:none; }


.acadame .cat-x-msg { font-size:13px; margin:10px 0 0 !important; }


.acadame .cat-x-msg.is-good { color:var(--primary); font-weight:600; }


.acadame .cat-x-msg.is-bad { color:var(--red-ink); font-weight:600; }


.acadame .cat-x-note { font-size:12.5px; color:var(--text); margin:10px 0 0 !important; }
@media (max-width:620px) {
  
  
  .acadame .cat-x-vs, .acadame .cat-x-f { grid-template-columns:1fr; }
  
  
  .acadame .cat-x-open { margin-left:0; }
}