/* Courses use the same compact, high-contrast design as the monitoring tools. */
.courses-intro { background: var(--mcd-yellow); }
.course-eyebrow, .course-number { font-family: var(--mono); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.courses-intro h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.2; margin: 0.6rem 0; }
.courses-intro > p { max-width: 680px; }
.course-intro-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 1.25rem; font-size: 0.8rem; font-weight: 700; }
.course-intro-meta .badge { background: var(--white); }
.course-catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 2rem; }
.course-catalog a { display: flex; flex-direction: column; gap: 8px; text-decoration: none; padding: 1rem; border: 2px solid var(--dark); border-radius: 4px; background: var(--white); box-shadow: 3px 3px 0 var(--dark); }
.course-catalog a:hover { background: #fff9e6; }
.course-catalog strong { line-height: 1.3; font-size: 1.05rem; }
.course-catalog span:not(.course-number), .course-catalog small { font-size: 0.8rem; color: var(--muted); }
.course-catalog small { margin-top: auto; padding-top: 0.5rem; }
.course-progress { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 1rem; font-size: 0.85rem; }
.course { scroll-margin-top: 1rem; padding: 0; }
.course > summary { position: relative; padding: 1.25rem 3rem 1.25rem 1.5rem; cursor: pointer; list-style: none; }
.course > summary::-webkit-details-marker { display: none; }
.course > summary::after { content: '+'; position: absolute; right: 1.5rem; top: 1.7rem; font-size: 1.4rem; font-weight: 700; }
.course[open] > summary::after { content: '−'; }
.course > summary:focus-visible { outline: 3px solid var(--mcd-yellow-dark); outline-offset: 3px; }
.course > summary h2 { margin: 5px 0; }
.course[open] > summary { border-bottom: 2px solid var(--dark); background: #fff9e6; }
.course-body { padding: 1.5rem; }
.course-prerequisites { padding-bottom: 1.25rem; color: var(--muted); }
.course-body section + section { border-top: 1px solid var(--gray-2); padding-top: 1.25rem; margin-top: 1.25rem; }
.course-body h3 { font-size: 1.05rem; margin-bottom: 10px; }
.course-body p { font-size: 0.92rem; margin-bottom: 12px; }
.course-body a { text-underline-offset: 3px; }
.course-body code { font-family: var(--mono); font-size: 0.82rem; overflow-wrap: anywhere; }
.course-body p code { background: var(--gray); padding: 1px 4px; border-radius: 2px; }
.course-body pre { background: var(--dark); color: var(--white); padding: 1rem; border-radius: 3px; overflow-x: auto; margin: 1rem 0; tab-size: 4; }
.course-body pre code { overflow-wrap: normal; }
.course-lab { background: #fff9e6; border-left: 4px solid var(--mcd-yellow-dark); padding: 1rem; font-size: 0.9rem; margin-top: 1rem; }
.course-complete { margin-top: 1.25rem; }
.course-complete[aria-pressed="true"] { background: var(--green); color: var(--white); }
@media (max-width: 720px) {
    .course-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .course.card { padding: 0; }
    .course-body { padding: 1rem; }
}
@media (max-width: 440px) {
    .course-catalog { grid-template-columns: 1fr; }
}