/* Silent Student GPA calculators: layout on top of tools.css (colors and type come from the site tokens). */

.tl-updated { margin-top: 10px; font-size: 14px; color: var(--text-3); }

/* space reserved until the script has built the tool, from the measured first render at 1280 / 800 / 600 / 375 px */
#gpa-tool:not(.is-ready) { min-height: 610px; }
#hs-gpa-tool:not(.is-ready) { min-height: 764px; }
#raise-gpa-tool:not(.is-ready) { min-height: 415px; }
@media (max-width: 999px) { #gpa-tool:not(.is-ready) { min-height: 860px; } #hs-gpa-tool:not(.is-ready) { min-height: 1016px; } #raise-gpa-tool:not(.is-ready) { min-height: 646px; } }
@media (max-width: 719px) { #gpa-tool:not(.is-ready) { min-height: 1380px; } #hs-gpa-tool:not(.is-ready) { min-height: 2348px; } #raise-gpa-tool:not(.is-ready) { min-height: 666px; } }
@media (max-width: 519px) { #gpa-tool:not(.is-ready) { min-height: 1410px; } #hs-gpa-tool:not(.is-ready) { min-height: 2508px; } #raise-gpa-tool:not(.is-ready) { min-height: 907px; } }

.gp-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .gp-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; } }
.gp-form > * + * { margin-top: 16px; }

/* course rows */
.gp-rows { display: grid; gap: 0; margin-top: 4px; }
.gp-row { display: grid; gap: 8px; align-items: start; padding: 6px 0; border-top: 1px solid var(--line); }
.gp-rows > .gp-row:first-child { border-top: 0; }
.gp-row--college { grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr) minmax(0, 1.1fr) 44px; }
.gp-has-prior .gp-row--college { grid-template-columns: minmax(0, 1.3fr) minmax(0, .6fr) minmax(0, 1fr) minmax(0, 1fr) 44px; }
.gp-row--college .gp-cell--rt, .gp-row--college .gp-retake-h { display: none; }
.gp-has-prior .gp-row--college .gp-cell--rt, .gp-has-prior .gp-row--college .gp-retake-h { display: block; }
.gp-row--hs { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr) minmax(0, 1fr) minmax(0, 1fr) 44px; }
.gp-row--head { border-top: 0; padding: 8px 0 2px; font: 700 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.gp-cell { min-width: 0; }
.gp-cell--rm { display: flex; justify-content: center; }
.gp-fl { display: none; font: 600 13px/1.2 var(--sans); color: var(--text-2); margin-bottom: 4px; }
@media (max-width: 719px) {
  .gp-row--head { display: none !important; }
  .gp-row--college, .gp-has-prior .gp-row--college, .gp-row--hs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px 0; }
  .gp-cell--name { grid-column: 1 / -1; }
  .gp-cell--rm { grid-column: 1 / -1; justify-content: flex-end; }
  .gp-fl { display: block; }
}

.gp-prior-toggle { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.gp-prior[hidden] { display: none; }
.gp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.gp-pair--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 519px) { .gp-pair, .gp-pair--3 { grid-template-columns: minmax(0, 1fr); } }
.gp-settings { padding-top: 14px; border-top: 1px solid var(--line); }
.gp-settings > * + * { margin-top: 14px; }

/* results */
.gp-gap { margin-top: 22px; }
.gp-both .tl-fig { padding: 12px 14px; }
.gp-num { display: block; margin-top: 4px; font-family: var(--serif); font-size: clamp(38px, 4.4vw, 52px); line-height: 1; letter-spacing: -.02em; color: var(--text); }
.gp-cap { display: block; margin-top: 4px; font-size: 13px; color: var(--text-3); }
.gp-cap-p { padding: 10px 12px 6px; margin: 0; }
