/* Mapank — exam calendar. All classes `cal-` prefixed.
   Colour carries one meaning here and only one: teal is an announced date,
   amber is a projection. Nothing else on the page is allowed those two
   colours, because the whole point of the page is that difference. */

.cal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 26px}
.cal-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px}
.cal-stat b{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.cal-stat span{display:block;font-size:12px;color:var(--ink-500);margin-top:4px;line-height:1.45}
.cal-stat--ok b{color:var(--positive)}
.cal-stat--guess b{color:var(--accent)}
@media(max-width:640px){.cal-stats{grid-template-columns:1fr}}

/* ---------- controls ---------- */
.cal-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 18px}
.cal-chips{display:flex;flex-wrap:wrap;gap:7px}
.cal-chip{appearance:none;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  padding:6px 12px;border-radius:99px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink-700);transition:.14s}
.cal-chip:hover{border-color:var(--ink-400)}
.cal-chip[aria-pressed="true"]{background:var(--primary);border-color:var(--primary-800);color:#fff}
.cal-find{flex:1 1 200px;min-width:160px;padding:8px 12px;font:inherit;font-size:13.5px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink)}
.cal-find:focus{outline:2px solid var(--primary);outline-offset:1px}

.cal-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  font-weight:600;color:var(--ink-700);cursor:pointer;user-select:none}
.cal-toggle input{width:15px;height:15px;accent-color:var(--positive);cursor:pointer}

.cal-count{font-size:12.5px;color:var(--ink-500);margin:0 0 14px}
.cal-count b{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- month groups ---------- */
.cal-month{margin:0 0 8px}
.cal-month-head{position:sticky;top:0;z-index:2;background:var(--surface-2);
  padding:9px 0 7px;font-size:12px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-500);border-bottom:1px solid var(--line)}

/* The row is a button so the whole thing is one keyboard target, rather than
   a div with a small clickable icon hidden inside it. */
.cal-row{display:grid;grid-template-columns:74px 1fr auto auto;gap:12px;align-items:baseline;
  width:100%;text-align:left;appearance:none;border:0;font:inherit;cursor:pointer;
  padding:11px 12px;border-bottom:1px solid var(--line);border-left:3px solid transparent;
  background:transparent;transition:background .12s}
.cal-row:hover{background:var(--surface-2)}
.cal-row:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.cal-row--official{border-left-color:var(--positive);background:var(--positive-100)}
.cal-row--official:hover{background:var(--positive-100)}

.cal-caret{color:var(--ink-400);font-size:17px;font-weight:800;line-height:1;
  transition:transform .16s;align-self:center}
.cal-row[aria-expanded="true"]{background:var(--surface-2);border-bottom-color:transparent}
.cal-row[aria-expanded="true"] .cal-caret{transform:rotate(90deg);color:var(--primary-800)}

/* ---------- the expanded detail ---------- */
.cal-detail{padding:2px 12px 16px;border-bottom:1px solid var(--line);
  background:var(--surface-2);animation:cal-in .18s ease both}
@keyframes cal-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cal-detail{animation:none}}

.cal-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin-top:10px}
.cal-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px}
.cal-card-top b{font-size:14px;font-weight:800;letter-spacing:-.01em}

.cal-facts{display:grid;grid-template-columns:150px 1fr;gap:7px 14px;margin:0;font-size:12.5px}
.cal-facts dt{color:var(--ink-500);font-weight:700}
.cal-facts dd{margin:0;color:var(--ink)}
@media(max-width:560px){
  .cal-facts{grid-template-columns:1fr;gap:2px}
  .cal-facts dd{margin-bottom:7px}
}

.cal-note{font-size:11.5px;line-height:1.55;color:var(--ink-500);margin:10px 0 0}
.cal-note--ok{color:var(--positive);font-weight:600}
.cal-note--warn{color:var(--accent);font-weight:600}

.cal-when{font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.cal-when i{display:block;font-style:normal;font-size:10.5px;font-weight:600;color:var(--ink-400)}
.cal-what{min-width:0}
.cal-what b{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em}
.cal-what span{display:block;font-size:12.5px;color:var(--ink-500);margin-top:1px}
.cal-what em{font-style:normal;color:var(--accent);font-weight:600}

.cal-tag{flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;white-space:nowrap}
.cal-tag--official{background:var(--positive);color:#fff}
.cal-tag--expected{background:var(--surface-3);color:var(--ink-500)}

@media(max-width:560px){
  .cal-row{grid-template-columns:62px 1fr auto;gap:9px}
  .cal-tag{grid-column:2;justify-self:start;margin-top:4px}
}

.cal-empty{padding:28px 14px;text-align:center;color:var(--ink-500);font-size:13.5px}

/* ---------- the 2025-26 reference tables ---------- */
.cal-ref{margin-top:14px}
.cal-ref details{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;
  background:var(--surface);overflow:hidden}
.cal-ref summary{cursor:pointer;list-style:none;padding:13px 16px;font-weight:700;font-size:14px;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.cal-ref summary::-webkit-details-marker{display:none}
.cal-ref summary::after{content:"›";font-size:19px;font-weight:800;color:var(--primary-800);
  transition:transform .16s}
.cal-ref details[open] summary::after{transform:rotate(90deg)}
.cal-ref summary:hover{background:var(--surface-2)}
.cal-ref details[open] summary{border-bottom:1px solid var(--line)}
.cal-ref-n{font-size:11.5px;font-weight:600;color:var(--ink-400)}

.cal-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.cal-tbl th{text-align:left;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-500);padding:9px 12px;background:var(--surface-2);font-weight:800;
  border-bottom:1px solid var(--line);white-space:nowrap}
.cal-tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.cal-tbl tr:last-child td{border-bottom:0}
.cal-tbl .cal-nm{font-weight:700;color:var(--ink)}
.cal-tbl .cal-sub{display:block;font-size:11px;color:var(--ink-400);margin-top:2px;font-weight:400}
.cal-pri{font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 6px;border-radius:4px;white-space:nowrap}
.cal-pri--core{background:var(--primary-100);color:var(--primary-800)}
.cal-pri--important{background:var(--accent-100);color:var(--accent)}
.cal-pri--optional{background:var(--surface-3);color:var(--ink-500)}

/* Mobile: thumb-sized controls. Measured at 375px — chips were 30px tall and
   the search field 34px, both under the 44px a thumb reliably hits. */
@media (max-width: 640px) {
  .cal-chip { min-height: 44px; padding: 6px 14px; }
  .cal-find { min-height: 44px; font-size: 16px; }
  .cal-toggle { min-height: 44px; }
  .cal-row { padding: 13px 12px; }
  .cal-caret { font-size: 20px; }
}

/* contrast pass, 5 Sep 2026 -- aqua is a fill, so the pressed chip takes ink
   on aqua (12.4:1) rather than white on aqua (1.5:1); amber text moves to
   its own darker step. */
.cal-chip[aria-pressed="true"] { color: var(--ink); }
.cal-pri--important            { color: var(--accent-800); }
.cal-stat--guess b             { color: var(--accent-800); }
.cal-note--warn                { color: var(--accent-800); }
.cal-what em                   { color: var(--accent-800); }