/* Discourage copy-paste of content */
main, .hero, footer {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}
/* Restore for interactive controls so clicks still register */
button, input, select, textarea, a {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    user-select: auto
}

/* SECTION */
.sec { padding: 56px 0 0 }
.sec-label {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 10px
}
.sec h2 {
    font-size: clamp(24px, 3.4vw, 34px);
    font-weight: 700;
    color: var(--maroon-deep);
    max-width: 22ch
}
.sec .sub { margin-top: 12px; max-width: 60ch; color: var(--ink-soft) }

/* RULES */
.rules {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 28px
}
.rule {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow)
}
.rule .rl-tag {
    font-family: 'Space Mono';
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--maroon);
    margin-bottom: 10px
}
.rule h3 { font-size: 17px; font-weight: 600; margin-bottom: 10px; color: var(--maroon-deep) }
.rule ul { list-style: none; display: flex; flex-direction: column; gap: 9px }
.rule li {
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.5;
    padding-left: 18px;
    position: relative
}
.rule li::before { content: "▪"; position: absolute; left: 0; color: var(--gold); font-size: 13px }
.rule li b { font-family: 'Space Grotesk'; color: var(--maroon-deep) }
.trap {
    margin-top: 22px;
    background: #FBF1E4;
    border-left: 3px solid var(--gold);
    padding: 16px 18px;
    border-radius: 0 10px 10px 0;
    font-size: 14px;
    color: #6b4e1d
}
.trap b { color: #7a5410 }

/* PICKER */
.picker {
    margin-top: 28px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--shadow)
}
.q-block { margin-bottom: 22px }
.q-block:last-child { margin-bottom: 0 }
.q-block .qno { font-family: 'Space Mono'; font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: .08em }
.q-block h3 { font-size: 18px; font-weight: 600; margin: 4px 0 14px }
.opts { display: flex; flex-wrap: wrap; gap: 10px }
.opt {
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 30px;
    border: 1.5px solid var(--line-strong);
    background: var(--paper);
    color: var(--ink);
    transition: border-color .16s, color .16s, background-color .16s
}
.opt:hover { border-color: var(--maroon-soft); color: var(--maroon) }
.opt.on { background: var(--maroon); border-color: var(--maroon); color: #fff }
.picker-result { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-soft); display: none }
.picker-result.show { display: block }
.picker-result b { color: var(--maroon) }
.reset-btn {
    margin-left: 10px;
    font-family: 'Space Mono';
    font-size: 12px;
    background: none;
    border: none;
    color: var(--ink-soft);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px
}

/* FILTERS */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px }
.chip {
    font-family: 'Space Grotesk';
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1.5px solid var(--line-strong);
    background: var(--card);
    color: var(--ink-soft);
    transition: border-color .16s, color .16s, background-color .16s
}
.chip:hover { border-color: var(--maroon-soft); color: var(--maroon) }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff }
.chip .ct { font-family: 'Space Mono'; font-size: 11px; opacity: .7; margin-left: 5px }

/* TRACK GRID */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 26px; padding-bottom: 8px; align-items: start }
.track {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    transition: border-color .18s, box-shadow .18s
}
.track.rec { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft), var(--shadow) }
.track.open { grid-column: 1 / -1 }
.track-head { padding: 22px 22px 18px; cursor: pointer; position: relative }
.rec-ribbon {
    display: none;
    position: absolute;
    top: 14px;
    right: 18px;
    font-family: 'Space Mono';
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--gold);
    color: #fff;
    padding: 4px 9px;
    border-radius: 20px
}
.track.rec .rec-ribbon { display: inline-block }
.cat-tag {
    font-family: 'Space Mono';
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 5px;
    display: inline-block;
    margin-bottom: 12px
}
.cat-dataml { background: var(--teal-soft); color: var(--teal) }
.cat-eng { background: #E4DCEA; color: #5B4380 }
.cat-biz { background: var(--gold-soft); color: #7a5410 }
.cat-research { background: #DCE6D9; color: #3E6638 }
.track-head h3 { font-size: 21px; font-weight: 600; line-height: 1.15; color: var(--maroon-deep); padding-right: 90px }
.track-head .one { margin-top: 8px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5 }
.track-meta { display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap }
.track-meta .m { font-size: 12.5px; color: var(--ink-soft) }
.track-meta .m b { font-family: 'Space Mono'; font-size: 12px; color: var(--maroon); font-weight: 700 }
.expand-btn {
    margin-top: 16px;
    font-family: 'Space Grotesk';
    font-size: 13.5px;
    font-weight: 600;
    color: var(--maroon);
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0
}
.expand-btn .arw { transition: transform .2s }
.track.open .expand-btn .arw { transform: rotate(90deg) }
.detail { max-height: 0; overflow: hidden; transition: max-height .4s ease }
.track.open .detail { max-height: 3200px }
.detail-in { padding: 4px 22px 24px; border-top: 1px solid var(--line) }
.drow { padding: 18px 0; border-bottom: 1px solid var(--line) }
.drow:last-child { border-bottom: none }
.drow .dlabel {
    font-family: 'Space Mono';
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px
}
.drow .dlabel .ico { color: var(--gold) }
.drow p { font-size: 14px; color: var(--ink); line-height: 1.6 }
.pill-opt {
    display: inline-block;
    font-family: 'Space Grotesk';
    font-weight: 600;
    font-size: 13px;
    padding: 4px 11px;
    border-radius: 6px;
    margin-bottom: 8px
}
.opt1 { background: var(--gold-soft); color: #7a5410 }
.opt2 { background: var(--teal-soft); color: var(--teal) }
.courses { display: flex; flex-wrap: wrap; gap: 8px }
.course {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 12px;
    border-radius: 8px;
    line-height: 1.25
}
.course .cname { font-size: 13px; font-weight: 600; font-family: 'Space Grotesk' }
.course .ccode { font-family: 'Space Mono'; font-size: 12px; opacity: .8 }
.course.must { background: var(--maroon); color: #fff }
.course.good { background: var(--paper-2); color: var(--ink); border: 1.5px dashed var(--line-strong) }
.note-warn {
    background: #FBF1E4;
    border-left: 3px solid var(--gold);
    padding: 12px 14px;
    border-radius: 0 8px 8px 0;
    font-size: 13.5px;
    color: #6b4e1d
}
.note-research {
    background: var(--teal-soft);
    border-left: 3px solid var(--teal);
    padding: 12px 14px;
    border-radius: 0 8px 8px 0;
    font-size: 13.5px;
    color: #234e51
}
.minor-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #EDE7F2;
    border: 1px solid #cdbfe0;
    color: #5B4380;
    font-family: 'Space Grotesk';
    font-weight: 600;
    font-size: 13px;
    padding: 7px 13px;
    border-radius: 8px;
    margin: 0 8px 8px 0
}
.minor-chip .mc-courses { font-family: 'Space Mono'; font-size: 12px; font-weight: 400; opacity: .85 }
.minor-none { font-size: 13px; color: var(--ink-soft); font-style: italic }
.seq { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 10px }
.seq li {
    counter-increment: s;
    position: relative;
    padding-left: 38px;
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.5
}
.seq li::before {
    content: counter(s);
    position: absolute;
    left: 0;
    top: -1px;
    width: 25px;
    height: 25px;
    background: var(--maroon-deep);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Mono';
    font-size: 12px;
    font-weight: 700
}
.seq li b { font-family: 'Space Grotesk'; color: var(--maroon-deep) }
.empty { grid-column: 1/-1; text-align: center; padding: 50px; color: var(--ink-soft); font-size: 15px }

/* MINORS */
.minors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px }
.minor-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow)
}
.minor-card h3 { font-size: 18px; font-weight: 600; color: #5B4380; margin-bottom: 4px }
.minor-card .mprereq { font-family: 'Space Mono'; font-size: 12px; color: var(--ink-soft); margin-bottom: 14px }
.minor-card .mprereq b { color: var(--maroon) }
.minor-card ol { list-style: none; display: flex; flex-direction: column; gap: 8px }
.minor-card ol li {
    font-size: 13.5px;
    font-family: 'Space Grotesk';
    font-weight: 500;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline
}
.minor-card ol li .cc { font-family: 'Space Mono'; font-size: 12px; color: var(--ink-soft); font-weight: 400 }
.minors-note {
    margin-top: 22px;
    background: #EDE7F2;
    border-left: 3px solid #5B4380;
    padding: 16px 18px;
    border-radius: 0 10px 10px 0;
    font-size: 13.5px;
    color: #46356b
}

/* PATHWAYS */
.paths { display: flex; flex-direction: column; gap: 16px; margin-top: 26px }
.path {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px;
    box-shadow: var(--shadow);
    display: flex;
    gap: 20px;
    align-items: flex-start
}
.path .pnum {
    font-family: 'Space Mono';
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    background: var(--teal);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}
.path h3 { font-size: 17px; font-weight: 600; color: var(--maroon-deep); margin-bottom: 6px }
.path p { font-size: 14px; color: var(--ink-soft); line-height: 1.55 }
.path p .key { color: var(--maroon); font-weight: 600 }

/* FOOTER */
footer { margin-top: 64px; border-top: 1px solid var(--line); padding: 34px 0 60px }
footer .fwrap { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between }
footer h3 { font-family: 'Space Grotesk'; font-size: 14px; font-weight: 600; margin-bottom: 10px }
footer p, footer li { font-size: 13px; color: var(--ink-soft); line-height: 1.6 }
footer ul { list-style: none }
footer a { color: var(--maroon); text-decoration: none }
footer a:hover { text-decoration: underline }
.legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px }
.legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft) }
.sw { width: 22px; height: 14px; border-radius: 4px; display: inline-block }
.sw.must { background: var(--maroon) }
.sw.good { background: var(--paper-2); border: 1.5px dashed var(--line-strong) }
.stamp { font-family: 'Space Mono'; font-size: 12px; color: var(--ink-soft); margin-top: 20px }

/* QUIZ + FILTER RECONCILIATION */
.rec-filter-note { display: none; color: var(--ink-soft); font-style: italic }
.picker-result.dimmed { opacity: 0.6 }
.picker-result.dimmed .rec-filter-note { display: inline }

/* RESPONSIVE — non-critical sections */
@media(max-width:840px) {
    .grid, .minors-grid, .rules { grid-template-columns: 1fr }
}
@media(max-width:520px) {
    .track-head h3 { padding-right: 0 }
    .rec-ribbon { position: static; display: none !important }
    .track.rec .rec-ribbon { display: inline-block !important; margin-bottom: 10px }
}

/* ===== COURSE-MATCH PAGE ===== */

.cm-form { display: flex; flex-direction: column; gap: 22px; margin-top: 28px }
.cm-fieldset {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 24px 24px
}
.cm-fieldset legend {
    font-family: 'Space Grotesk';
    font-size: 17px;
    font-weight: 600;
    color: var(--maroon-deep);
    padding: 0 8px;
    display: inline-flex;
    align-items: baseline;
    gap: 10px
}
.cm-credit {
    font-family: 'Space Mono';
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft)
}
.cm-fieldset-note { font-size: 13px; color: var(--ink-soft); margin: 4px 0 14px }
.cm-level-actions { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap }
.cm-level-actions button {
    font-family: 'Space Mono';
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--line-strong);
    background: var(--paper-2);
    color: var(--ink-soft);
    transition: border-color .14s, color .14s
}
.cm-level-actions button:hover { border-color: var(--maroon-soft); color: var(--maroon) }
.cm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px }
.cm-fieldset-electives .cm-grid { grid-template-columns: repeat(2, 1fr) }
.cm-check {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--paper);
    cursor: pointer;
    transition: border-color .14s, background-color .14s
}
.cm-check:hover { border-color: var(--maroon-soft); background: #fff }
.cm-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--line-strong);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background-color .14s, border-color .14s
}
.cm-check input[type="checkbox"]:checked {
    background: var(--maroon);
    border-color: var(--maroon)
}
.cm-check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
}
.cm-check .cname {
    font-family: 'Space Grotesk';
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    flex: 1;
    line-height: 1.3
}
.cm-check .ccode {
    font-family: 'Space Mono';
    font-size: 11.5px;
    color: var(--ink-soft);
    flex-shrink: 0
}
.cm-check input[type="checkbox"]:checked ~ .cname { color: var(--maroon-deep); font-weight: 600 }

/* DS elective pair (radio group) */
.cm-ds-pair {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--line-strong);
    display: flex;
    flex-direction: column;
    gap: 10px
}
.cm-ds-pair h4 { font-family: 'Space Grotesk'; font-size: 14.5px; font-weight: 600; color: var(--maroon-deep) }
.cm-radio {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--line-strong);
    background: var(--paper);
    cursor: pointer;
    transition: border-color .14s, background-color .14s
}
.cm-radio:hover { border-color: var(--gold) }
.cm-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--line-strong);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    transition: border-color .14s
}
.cm-radio input[type="radio"]:checked { border-color: var(--gold); border-width: 5px }
.cm-radio:has(input[type="radio"]:checked) { border-color: var(--gold); background: #fff }
.cm-radio-body { flex: 1 }
.cm-radio-title { font-family: 'Space Grotesk'; font-size: 14px; font-weight: 600; color: var(--maroon-deep); margin-bottom: 4px }
.cm-radio-warn { font-size: 12.5px; color: #7a5410; margin-bottom: 8px }
.cm-radio-courses { display: flex; flex-wrap: wrap; gap: 6px }

/* Action bar */
.cm-actions {
    margin-top: 22px;
    padding: 14px 18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    position: sticky;
    bottom: 12px;
    z-index: 5
}
.cm-btn {
    font-family: 'Space Grotesk';
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    transition: background-color .14s, border-color .14s
}
.cm-btn-primary { background: var(--maroon); color: #fff; border-color: var(--maroon) }
.cm-btn-primary:hover { background: var(--maroon-deep); border-color: var(--maroon-deep) }
.cm-btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line-strong) }
.cm-btn-ghost:hover { color: var(--maroon); border-color: var(--maroon-soft) }
.cm-saved { font-family: 'Space Mono'; font-size: 11.5px; color: var(--ink-soft); letter-spacing: .04em; margin-left: auto }

/* Results */
.cm-results { margin-top: 36px; min-height: 80px }
.cm-empty {
    background: var(--paper-2);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    padding: 28px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 14.5px
}
.cm-empty b { color: var(--maroon) }
.cm-section-h {
    font-family: 'Space Grotesk';
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight: 700;
    color: var(--maroon-deep);
    margin-bottom: 6px
}
.cm-section-h-2 { margin-top: 40px }
.cm-section-sub { font-size: 14px; color: var(--ink-soft); margin-bottom: 22px; max-width: 62ch }

.cm-results-grid { display: grid; grid-template-columns: 1fr; gap: 18px }
.cm-result {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px
}
.cm-result[data-rank="1"] { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft), var(--shadow) }
.cm-result-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.cm-result-head .cat-tag { margin-bottom: 0 }
.cm-rank {
    font-family: 'Space Mono';
    font-size: 12px;
    font-weight: 700;
    color: var(--maroon);
    background: var(--paper-2);
    border-radius: 20px;
    padding: 3px 9px
}
.cm-result-head h3 {
    flex-basis: 100%;
    font-family: 'Space Grotesk';
    font-size: 20px;
    font-weight: 600;
    color: var(--maroon-deep);
    margin-top: 4px
}
.cm-one { flex-basis: 100%; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5 }
.cm-bar {
    position: relative;
    height: 18px;
    background: var(--paper-2);
    border-radius: 10px;
    overflow: hidden
}
.cm-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-soft), var(--gold));
    transition: width .35s ease
}
.cm-bar-num {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Space Mono';
    font-size: 12px;
    font-weight: 700;
    color: var(--maroon-deep)
}
.cm-stats { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--ink-soft) }
.cm-stats b { font-family: 'Space Mono'; color: var(--maroon); font-weight: 700 }
.cm-notice {
    background: #FBF1E4;
    border-left: 3px solid var(--gold);
    padding: 10px 12px;
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    color: #6b4e1d
}
.cm-gap-list { display: flex; flex-direction: column; gap: 14px }
.cm-gap-block { display: flex; flex-direction: column; gap: 8px }
.cm-gap-label {
    font-family: 'Space Mono';
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft)
}
.cm-gap-clear {
    background: var(--teal-soft);
    border-left: 3px solid var(--teal);
    padding: 8px 12px;
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    color: #234e51
}
.cm-toggle {
    margin: 20px auto 0;
    display: block;
    font-family: 'Space Grotesk';
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 9px 18px;
    border-radius: 8px;
    border: 1.5px solid var(--line-strong);
    background: var(--card);
    color: var(--ink-soft);
    transition: border-color .14s, color .14s
}
.cm-toggle:hover { border-color: var(--maroon-soft); color: var(--maroon) }

/* Minors grid */
.cm-minors-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px }
.cm-minor {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px
}
.cm-minor header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px }
.cm-minor h4 { font-family: 'Space Grotesk'; font-size: 16px; font-weight: 600; color: #5B4380 }
.cm-minor-score {
    font-family: 'Space Mono';
    font-size: 12px;
    font-weight: 700;
    color: var(--maroon)
}
.cm-prereq { font-family: 'Space Mono'; font-size: 11.5px; color: var(--ink-soft) }
.cm-prereq b { color: var(--maroon) }

@media(max-width:760px) {
    .cm-grid, .cm-minors-grid { grid-template-columns: 1fr }
    .cm-actions { position: static }
    .cm-saved { margin-left: 0; flex-basis: 100% }
}

/* ---- Feasibility badges ---- */
.cm-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 99px;
    font-family: 'Space Mono';
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: default
}
.cm-badge--achievable { background: #d1fae5; color: #065f46 }
.cm-badge--stretch    { background: #fef3c7; color: #92400e }
.cm-badge--conflict   { background: #fee2e2; color: #991b1b }

/* ---- Roadmap stepper ---- */
.cm-path {
    margin-top: 14px;
    border-top: 1px solid var(--line);
    padding-top: 12px
}
.cm-path > summary {
    cursor: pointer;
    font-family: 'Space Mono';
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-soft);
    list-style: none;
    user-select: none
}
.cm-path > summary::before { content: '▶ '; font-size: .65rem }
.cm-path[open] > summary::before { content: '▼ ' }
.cm-path-steps { margin-top: 10px; display: flex; flex-direction: column; gap: 0 }
.cm-path-step {
    display: flex;
    gap: 10px;
    padding: 7px 10px 7px 12px;
    font-size: .8rem;
    border-left: 2px solid var(--line);
    line-height: 1.5
}
.cm-path-step--done    { border-color: var(--teal); color: var(--ink-soft) }
.cm-path-step--next    { border-color: var(--maroon); color: var(--ink); font-weight: 600; background: var(--paper-2); border-radius: 0 6px 6px 0 }
.cm-path-step--pending { border-color: var(--line); color: var(--ink-soft); opacity: .55 }
.cm-path-icon { flex-shrink: 0; font-family: 'Space Mono'; font-size: .72rem; min-width: 14px; padding-top: 1px }

/* ---- Degree completion panel ---- */
.cm-degree-panel {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 28px
}
.cm-degree-panel h3 {
    font-family: 'Space Grotesk';
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-soft);
    margin: 0 0 14px
}
.cm-degree-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .77rem;
    margin-bottom: 7px
}
.cm-degree-row:last-child { margin-bottom: 0 }
.cm-degree-row-label { min-width: 190px; color: var(--ink-soft) }
.cm-degree-bar-track {
    flex: 1;
    height: 6px;
    background: var(--line);
    border-radius: 3px;
    overflow: hidden
}
.cm-degree-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--gold-soft);
    transition: width .4s ease
}
.cm-degree-bar-fill--done { background: var(--teal) }
.cm-degree-row-count {
    min-width: 44px;
    text-align: right;
    font-family: 'Space Mono';
    font-size: .72rem;
    font-weight: 700;
    color: var(--ink)
}

@media(max-width:520px) {
    .cm-degree-row-label { min-width: 130px; font-size: .72rem }
    .cm-degree-row-count { min-width: 36px }
}