.mw-course-list {
  --mw-course-blue: var(--mw-accent, #2d6fa3);
  --mw-course-navy: var(--mw-navy, #003366);
  --mw-course-ink: var(--mw-charcoal, #26313d);
  --mw-course-muted: var(--mw-text-muted, #596675);
  --mw-course-border: var(--mw-border, #d3dbe5);
  --mw-course-surface: var(--mw-surface, #fff);
  --mw-course-sunken: var(--mw-surface-sunken, #eff3f8);
  display: grid;
  gap: 12px;
  color: var(--mw-course-ink);
  font-family: var(--mw-font-body, "Source Sans 3", system-ui, sans-serif);
}
.mw-course-item {
  --mw-item-accent: var(--mw-course-blue);
  min-width: 0;
  border: 1px solid var(--mw-course-border);
  border-radius: var(--mw-radius, 8px);
  background: var(--mw-course-surface);
}
.mw-course-item--alphabetization { --mw-item-accent: var(--mw-course-navy); }
.mw-course-list--channel-announcements .mw-course-item,
.mw-course-item--announcement { --mw-item-accent: #596675; }
.mw-course-item--finished {
  --mw-item-accent: #747d87;
  border-color: #c7cdd4;
  background: #f1f3f5;
  color: #4b5560;
}
.mw-course-item__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mw-course-item h3 {
  margin: 0;
  color: var(--mw-course-navy);
  font: 600 clamp(1.125rem, 1.5vw, 1.35rem)/1.3 var(--mw-font-head, Lexend, system-ui, sans-serif);
  letter-spacing: -.015em;
}
.mw-course-item--finished h3 { color: #4b5560; }
.mw-course-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: #f7f9fb;
  color: var(--mw-item-accent);
  font: 600 .8125rem/1.25 var(--mw-font-head, Lexend, system-ui, sans-serif);
}
.mw-course-badge::before { width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: currentColor; content: ""; }
.mw-course-facts { display: grid; margin: 0; }
.mw-course-fact { min-width: 0; }
.mw-course-fact dt { margin: 0 0 4px; color: var(--mw-course-muted); font-size: .78rem; font-weight: 700; letter-spacing: .035em; }
.mw-course-fact dd { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--mw-course-ink); font-variant-numeric: tabular-nums; line-height: 1.45; }
.mw-course-icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: .1em; color: var(--mw-course-muted); }
.mw-course-finished-copy { margin: 16px 0 0; line-height: 1.55; }
.mw-course-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.mw-course-apply { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 18px; border: 1px solid var(--mw-course-navy); border-radius: 6px; background: var(--mw-course-navy); color: #fff; font-weight: 700; line-height: 1.25; text-decoration: none; }
.mw-course-apply:hover, .mw-course-apply:focus-visible { background: #00264d; color: #fff; text-decoration: none; }
.mw-course-apply:focus-visible { outline: 3px solid rgba(45, 111, 163, .35); outline-offset: 3px; }
.mw-course-apply--disabled { border-color: var(--mw-course-border); background: var(--mw-course-sunken); color: var(--mw-course-muted); cursor: default; }
.mw-course-empty { padding: 18px 20px; border-left: 4px solid var(--mw-course-blue); background: var(--mw-course-sunken); color: var(--mw-course-ink); }

/* The dark option frames the complete list as a distinct course block. */
.mw-course-list--dark {
  --mw-course-blue: #b7d8f2;
  --mw-course-ink: #fff;
  --mw-course-muted: #d9e3ef;
  --mw-course-border: #6d89a5;
  --mw-course-surface: #003366;
  --mw-course-sunken: #173e66;
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid #335b80;
  border-radius: 16px;
  background: #002244;
  color: #fff;
}
.mw-course-list--dark .mw-course-item {
  --mw-item-accent: #b7d8f2;
  box-shadow: 0 6px 20px rgba(0, 18, 38, .18);
}
.mw-course-list--dark .mw-course-item h3 { color: #fff; }
.mw-course-list--dark .mw-course-badge {
  border-color: #e9eef4;
  background: #e9eef4;
  color: #002244;
}
.mw-course-list--dark .mw-course-item--finished {
  border-color: #8295a8;
  background: #334b64;
  color: #fff;
}
.mw-course-list--dark .mw-course-item--finished h3 { color: #fff; }
.mw-course-list--dark .mw-course-apply {
  border-color: #fff;
  background: #fff;
  color: #003366;
}
.mw-course-list--dark .mw-course-apply:hover,
.mw-course-list--dark .mw-course-apply:focus-visible {
  border-color: #d9e3ef;
  background: #d9e3ef;
  color: #002244;
}
.mw-course-list--dark .mw-course-apply--disabled {
  border-color: #6d89a5;
  background: #173e66;
  color: #e9eef4;
}
.mw-course-list--dark .mw-course-apply--disabled:hover {
  border-color: #6d89a5;
  background: #173e66;
  color: #e9eef4;
}
.mw-course-list--dark .mw-course-item--announcement {
  --mw-item-accent: #b7d8f2;
}

/* A: date-scanning rows. */
.mw-course-list--rows .mw-course-item { padding: 20px 22px; border-left: 4px solid var(--mw-item-accent); }
.mw-course-list--rows .mw-course-item__heading { align-items: center; }
.mw-course-list--rows .mw-course-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--mw-course-border); }

/* B: equal comparison cards. */
.mw-course-list--cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: 18px; }
.mw-course-list--cards .mw-course-item { display: flex; flex-direction: column; padding: 24px; border-top: 3px solid var(--mw-item-accent); }
.mw-course-list--cards .mw-course-item__heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.mw-course-list--cards .mw-course-badge { grid-column: 2; grid-row: 1; }
.mw-course-list--cards h3 { grid-column: 1 / -1; grid-row: 2; min-height: 3.4em; }
.mw-course-list--cards .mw-course-facts { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 18px 24px; margin-top: auto; padding-top: 24px; }
.mw-course-list--cards .mw-course-fact--start { grid-column: 1; grid-row: 1; }
.mw-course-list--cards .mw-course-fact--end { grid-column: 1; grid-row: 2; }
.mw-course-list--cards .mw-course-fact--days { grid-column: 2; grid-row: 1; }
.mw-course-list--cards .mw-course-fact--time { grid-column: 2; grid-row: 2; }

/* C: quiet embedded announcements. */
.mw-course-list--compact { gap: 0; border-top: 1px solid var(--mw-course-border); }
.mw-course-list--compact .mw-course-item { display: grid; grid-template-columns: minmax(13rem, .8fr) minmax(18rem, 1.4fr) auto; gap: 20px 28px; padding: 18px 4px 18px 18px; border: 0; border-bottom: 1px solid var(--mw-course-border); border-left: 3px solid var(--mw-item-accent); border-radius: 0; }
.mw-course-list--dark.mw-course-list--compact .mw-course-item { padding-right: 18px; border: 1px solid var(--mw-course-border); border-left: 4px solid var(--mw-item-accent); border-radius: 8px; }
.mw-course-list--compact .mw-course-badge { display: none; }
.mw-course-list--compact .mw-course-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.mw-course-list--compact .mw-course-finished-copy { margin: 0; align-self: center; }
.mw-course-list--compact .mw-course-actions { align-self: center; margin: 0; }

@media (max-width: 900px) {
  .mw-course-list--rows .mw-course-facts { grid-template-columns: 1fr 1fr; }
  .mw-course-list--compact .mw-course-item { grid-template-columns: 1fr; gap: 14px; }
  .mw-course-list--compact .mw-course-facts { grid-template-columns: 1fr 1fr; }
  .mw-course-list--compact .mw-course-actions { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .mw-course-list--cards { grid-template-columns: 1fr; }
  .mw-course-list--rows .mw-course-item, .mw-course-list--cards .mw-course-item { padding: 18px; }
  .mw-course-item__heading { display: grid; justify-items: start; gap: 10px; }
  .mw-course-list--rows .mw-course-facts,
  .mw-course-list--cards .mw-course-facts,
  .mw-course-list--compact .mw-course-facts { grid-template-columns: 1fr; gap: 12px; }
  .mw-course-list--cards h3 { min-height: 0; }
  .mw-course-list--cards .mw-course-fact--start,
  .mw-course-list--cards .mw-course-fact--end,
  .mw-course-list--cards .mw-course-fact--days,
  .mw-course-list--cards .mw-course-fact--time { grid-column: auto; grid-row: auto; }
}