.course-summary>span,.course-title,.course-meta{min-width:0;overflow-wrap:anywhere}
.course-summary:not(:has(>.course-index)){grid-template-columns:minmax(0,1fr) minmax(150px,220px) 32px}
.course-summary-fee{min-width:0;white-space:normal;overflow-wrap:anywhere}
.fee-added-group>summary{padding:24px;display:grid;grid-template-columns:minmax(0,1fr) auto 32px;gap:16px;align-items:center;list-style:none;cursor:pointer}
.fee-added-group>summary::-webkit-details-marker{display:none}
.fee-added-group .group-label{font-weight:700;font-size:18px;color:var(--ink)}
.fee-added-group .group-count{font-size:12px;color:var(--muted);white-space:nowrap}
.fee-added-group>.course-grid{display:grid;gap:16px;padding:0 20px 22px;min-width:0}
.fee-added-group .course-card{margin:0;min-width:0;box-shadow:none}
.fee-added-group summary:focus-visible{outline:3px solid #b84b10;outline-offset:-4px;border-radius:16px}
.course-panel .course-info dd{overflow-wrap:anywhere}
@media(max-width:700px){
 .course-summary:not(:has(>.course-index)){grid-template-columns:minmax(0,1fr) 30px}
 .course-summary:not(:has(>.course-index))>.course-summary-fee{grid-column:1;grid-row:2}
 .course-summary:not(:has(>.course-index))>.accordion-mark{grid-column:2;grid-row:1/span 2}
 .fee-added-group>summary{padding:21px 18px;gap:12px;grid-template-columns:minmax(0,1fr) auto 30px}
 .fee-added-group .group-label{font-size:16px}
 .fee-added-group>.course-grid{padding:0 12px 16px}
 .fee-added-group .course-summary{padding-inline:16px}
 .fee-added-group .course-panel{padding-inline:16px}
}

/* Give the course name its own track, with or without an optional number. */
.course-card > summary.course-summary {
 display:grid;
 grid-template-columns:minmax(0,1fr) minmax(170px,230px) 32px;
 grid-template-areas:"course fee toggle";
 align-items:center;
 gap:18px;
 padding:24px;
 min-width:0;
 text-align:left;
}
.course-card > summary.course-summary > .course-index {display:none}
.course-card > summary.course-summary > span:not(.course-index):not(.course-summary-fee):not(.accordion-mark) {
 grid-area:course;
 display:block;
 min-width:0;
 width:auto;
 max-width:none;
}
.course-card > summary.course-summary .course-title {
 display:block;
 min-width:0;
 max-width:none;
 white-space:normal;
 word-break:normal;
 overflow-wrap:break-word;
}
.course-card > summary.course-summary .course-meta {
 white-space:normal;
 word-break:normal;
 overflow-wrap:break-word;
}
.course-card > summary.course-summary > .course-summary-fee {
 grid-area:fee;
 display:block;
 min-width:0;
 width:auto;
 white-space:normal;
 text-align:right;
 overflow-wrap:break-word;
}
.course-card > summary.course-summary > .accordion-mark {grid-area:toggle;justify-self:end}
@media(max-width:700px) {
 .course-card > summary.course-summary {
  grid-template-columns:minmax(0,1fr) 32px;
  grid-template-areas:"course toggle" "fee toggle";
  gap:14px 16px;
  padding:22px 18px;
 }
 .course-card > summary.course-summary > .course-summary-fee {text-align:left}
 .course-card > summary.course-summary > .accordion-mark {align-self:center}
}