/* Course chooser — the root page, seen once. Each course then has its own
   address, so nothing else on the site ever asks which course you are on.
   Same tokens as site.css; no new colours, no cards with shadows. */
.chooser-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.chooser-card { display: grid; grid-template-columns: 6.5rem 1fr; gap: .15rem .9rem; padding: 1.1rem .2rem; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.chooser-card:hover { background: var(--surface-2, rgba(0,0,0,.03)); }
.chooser-code { grid-row: span 3; font-family: var(--mono); font-size: .95rem; letter-spacing: .03em; align-self: start; padding-top: .1rem; }
.chooser-title { font-size: 1.05rem; }
.chooser-meta { font-family: var(--mono); font-size: .72rem; opacity: .72; }
.chooser-desc { font-size: .85rem; color: var(--muted); max-width: 62ch; margin-top: .25rem; }
@media (max-width: 34rem) {
  .chooser-card { grid-template-columns: 1fr; }
  .chooser-code { grid-row: auto; padding-top: 0; }
}