/* gpa-calculator: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.result-tag {
    display: inline-block; vertical-align: middle; font: 600 0.82rem var(--text); letter-spacing: 0;
    padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / 0.1); color: #fff;
}
.result-tag.tag-ok { background: rgb(79 214 168 / 0.18); color: #7BE7C2; }
.result-tag.tag-warn { background: rgb(255 200 87 / 0.18); color: #FFD583; }
.result-tag.tag-bad { background: rgb(255 122 102 / 0.2); color: #FFA597; }
.gpa-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.gpa-head, .gpa-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px 40px; gap: 8px; align-items: center; }
.gpa-head { font-size: 0.85rem; font-weight: 600; color: var(--slate); }
.gpa-cumulative { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.gpa-cumulative summary { cursor: pointer; font-weight: 600; margin-bottom: 14px; }
@media (max-width: 480px) {
    .gpa-head { display: none; }
    .gpa-row { grid-template-columns: 1fr 1fr 40px; }
    .gpa-row input[name="course"] { grid-column: 1 / -1; }
}