/* ============================================================
   admissions.css — college profiles (/admissions/<slug>/) and the
   /admissions/ hub, Admissions Phase 3
   Loads on those pages after content-styles.css (college-data.php,
   gpa_college_profile_styles), and with the [gpa_college_archive]
   shortcode. Both pages use the content-page design from layout.css and
   components.css: hero band, quick facts, numbered sections, FAQ,
   Sources. This file adds only what college data needs: the H1's second
   line, data tables with a label column, status labels, the acceptance
   meter, the GPA bars (sections 1-5) and the hub's college finder
   (section 7). Colors and sizes come from var(--gpa-*) tokens, except
   the hub's lime, which the palette lacks.
   ============================================================ */

/* ---------- 1. Hero ----------
   content-styles.css sizes every page's H1 except college pages; same
   rule here. The second line names what the page covers. */
html body.single-colleges.gpa-hero-band .inside-article h1.entry-title {
    font-family: var(--gpa-font) !important;
    font-size: var(--gpa-h1-size) !important;
    font-weight: var(--gpa-h1-weight) !important;
    line-height: var(--gpa-h1-line) !important;
    letter-spacing: var(--gpa-h1-tracking) !important;
    padding: 0 !important;
}
body.single-colleges .entry-header .gpa-college-h1-sub {
    display: block;
    margin-top: 8px;
    font-size: 0.5em;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--gpa-hero-text);
}

/* ---------- 2. Data tables ----------
   Score, admission factor and GPA tables: the first column holds the
   label, so it is left-aligned; the other columns stay centred. */
#page .entry-content .gpa-college-table:not(#root *) :is(th, td):first-child {
    text-align: left !important;
}
#page .entry-content .gpa-college-table:not(#root *) td:first-child {
    color: var(--gpa-text-strong) !important;
}
#page .entry-content .gpa-college-table td > strong {
    display: block;
    font-weight: 600 !important;
    color: var(--gpa-text-strong) !important;
}
#page .entry-content .gpa-college-table .gpa-college-table__about {
    display: block;
    margin-top: 2px;
    font-size: var(--gpa-small-size);
    line-height: 1.45;
    color: var(--gpa-text-muted);
}
#page .entry-content .gpa-college-factors:not(#root *) td:last-child {
    width: 1%;
    white-space: nowrap;
}

/* ---------- 3. Status labels (admission factors) ---------- */
.gpa-college-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--gpa-radius-pill);
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}
.gpa-college-status--required { background: var(--gpa-green-50); border-color: var(--gpa-green-200); color: var(--gpa-green-800); }
.gpa-college-status--recommended { background: var(--gpa-tint-blue); border-color: var(--gpa-blue-100); color: var(--gpa-blue-800); }
.gpa-college-status--considered { background: var(--gpa-tint-indigo); border-color: var(--gpa-indigo-100); color: var(--gpa-indigo-800); }
.gpa-college-status--not { background: var(--gpa-gray-50); border-color: var(--gpa-border); color: var(--gpa-gray-600); }

/* ---------- 4. Acceptance meter ----------
   The share of applicants admitted, as wide as the text: layout.css's
   inset of 20px beside text on phones and 40px from 641px up. */
#page .entry-content .gpa-college-meter {
    max-width: min(var(--gpa-text-max), calc(100% - 40px));
    height: 10px;
    margin: 0 auto var(--gpa-p-gap);
    border-radius: var(--gpa-radius-pill);
    background: var(--gpa-gray-100);
    overflow: hidden;
}
@media (min-width: 641px) {
    #page .entry-content .gpa-college-meter { max-width: min(var(--gpa-text-max), calc(100% - 80px)); }
}
#page .entry-content .gpa-college-meter > span {
    display: block;
    min-width: 6px;
    height: 100%;
    border-radius: inherit;
    background: var(--gpa-primary);
}

/* ---------- 5. GPA bars (Common Data Set GPA ranges) ---------- */
#page .entry-content .gpa-college-bands:not(#root *) :is(th, td):last-child {
    text-align: left !important;
}
.gpa-college-barcell {
    display: flex;
    align-items: center;
    gap: 12px;
}
.gpa-college-bar {
    flex: 1 1 auto;
    max-width: 320px;
    height: 8px;
    border-radius: var(--gpa-radius-pill);
    background: var(--gpa-gray-100);
    overflow: hidden;
}
.gpa-college-bar > span {
    display: block;
    height: 100%;
    background: var(--gpa-primary);
}
.gpa-college-bar__num {
    flex: none;
    min-width: 3.5em;
    font-variant-numeric: tabular-nums;
    color: var(--gpa-text-strong);
}

@media (max-width: 480px) {
    #page .entry-content .gpa-college-factors .gpa-college-table__about { display: none; }
    #page .entry-content .gpa-college-factors:not(#root *) td:last-child { width: auto; white-space: normal; }
    .gpa-college-status { padding: 2px 8px; font-size: 12px; white-space: normal; text-align: center; }
    .gpa-college-wide { display: none; }
}

/* ---------- 6. Hub: the college finder ----------
   On /admissions/ the finder is a card that rises into the hero, as
   calculators do (layout.css section 6 with the calculator's tail and
   overlap), led by a search bar with its own Search button. One card
   per college: name, place and type and a tag saying how hard it is to
   get into, then the average GPA, SAT and ACT in columns under a header
   row; on phones each figure shows its own label instead. The tag's
   color (red, very hard, to green, easy; teal, open admission) and its
   meter (five bars for very hard down to one for easy) are explained in
   the legend over the list. Scoped to .gpa-hub so the shortcode works
   anywhere. The ids and db-* classes are the ones database-ajax.js
   uses. */
body.post-type-archive-colleges.gpa-hero-band.gpa-hero-band {
    --rx-hero-tail: var(--gpa-hero-tail);
    --rx-card-overlap: var(--gpa-hero-overlap);
}
body.post-type-archive-colleges.gpa-hero-band.gpa-hero-band .entry-content {
    margin-top: calc(var(--rx-hero-tail) - var(--rx-card-overlap)) !important;
    padding-top: 0 !important;
}
body.post-type-archive-colleges .gpa-hub {
    position: relative;
    z-index: 2;
    border-radius: var(--gpa-column-radius) var(--gpa-column-radius) 0 0;
    background: var(--gpa-surface);
}
.gpa-hub {
    --gpa-hub-cols: minmax(0, 1fr) 136px 116px 70px;
    /* lime between amber and green (Tailwind lime 50/200/600/800) */
    --gpa-hub-lime-50: #F7FEE7;
    --gpa-hub-lime-200: #D9F99D;
    --gpa-hub-lime-600: #65A30D;
    --gpa-hub-lime-800: #3F6212;
    padding: 32px 28px 8px;
    font-family: var(--gpa-font);
    color: var(--gpa-text);
}

/* Search: a labeled bar with the Search button inside it (the list also
   searches as you type), and three example searches under it. The bar
   carries the border and the focus ring, so the input inside has none
   (style.css rings every focused input with an !important outline). */
.gpa-hub .gpa-hub__search-label {
    display: block;
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--gpa-text-strong);
}
.gpa-hub__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 5px 5px 16px;
    border: 2px solid var(--gpa-blue-300);
    border-radius: 14px;
    background: var(--gpa-surface);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--gpa-blue-600) 10%, transparent);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gpa-hub__bar:hover { border-color: var(--gpa-blue-400); }
.gpa-hub__bar:focus-within {
    border-color: var(--gpa-primary);
    box-shadow: 0 0 0 4px var(--gpa-blue-100);
}
.gpa-hub__search-icon {
    flex: none;
    color: var(--gpa-primary);
}
.gpa-hub .gpa-hub__input,
.gpa-hub .gpa-hub__input:focus {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: inherit;
    color: var(--gpa-text-strong);
    -webkit-appearance: none;
    appearance: none;
}
.gpa-hub .gpa-hub__input:focus-visible { outline: none !important; }
.gpa-hub .gpa-hub__input::placeholder {
    color: var(--gpa-text-muted);
    opacity: 1;
}
.gpa-hub__spinner {
    flex: none;
    display: flex;
    color: var(--gpa-primary);
    animation: gpa-hub-spin 0.8s linear infinite;
}
@keyframes gpa-hub-spin { to { transform: rotate(360deg); } }
.gpa-hub .gpa-hub__go,
.gpa-hub .gpa-hub__go:focus {
    flex: none;
    height: 48px;
    margin: 0;
    padding: 0 26px;
    border: 0;
    border-radius: 10px;
    background: var(--gpa-primary);
    font: 700 var(--gpa-ui-size)/1 var(--gpa-font);
    color: var(--gpa-white);
    cursor: pointer;
}
.gpa-hub .gpa-hub__go:hover {
    background: var(--gpa-primary-hover);
    color: var(--gpa-white);
}
.gpa-hub__try {
    margin-top: 10px;
    font-size: var(--gpa-ui-size);
    line-height: 1.5;
    color: var(--gpa-text-muted);
}
.gpa-hub .gpa-hub__example,
.gpa-hub .gpa-hub__example:hover,
.gpa-hub .gpa-hub__example:focus {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: 600 var(--gpa-ui-size)/1.5 var(--gpa-font);
    color: var(--gpa-link);
    text-decoration: underline;
    text-decoration-color: var(--gpa-link-underline);
    text-underline-offset: 3px;
    cursor: pointer;
}
.gpa-hub .gpa-hub__example:hover { text-decoration-color: currentColor; }

/* Quick filters and the filters panel */
.gpa-hub__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}
.gpa-hub__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.gpa-hub .db-archive-pill,
.gpa-hub .db-archive-pill:focus {
    margin: 0;
    padding: 7px 14px;
    border: 1px solid var(--gpa-border);
    border-radius: var(--gpa-radius-pill);
    background: var(--gpa-surface);
    font: 600 14px/1.2 var(--gpa-font);
    color: var(--gpa-text);
    cursor: pointer;
}
.gpa-hub .db-archive-pill:hover {
    border-color: var(--gpa-blue-300);
    background: var(--gpa-surface);
    color: var(--gpa-link);
}
.gpa-hub .db-archive-pill.db-archive-pill--active,
.gpa-hub .db-archive-pill.db-archive-pill--active:hover {
    border-color: var(--gpa-blue-300);
    background: var(--gpa-tint-blue);
    color: var(--gpa-blue-800);
}
.gpa-hub .gpa-hub__more,
.gpa-hub .gpa-hub__more:hover,
.gpa-hub .gpa-hub__more:focus,
.gpa-hub .gpa-hub__reset,
.gpa-hub .gpa-hub__reset:hover,
.gpa-hub .gpa-hub__reset:focus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 2px;
    border: 0;
    background: none;
    font: 600 14px/1.2 var(--gpa-font);
    color: var(--gpa-link);
    cursor: pointer;
}
.gpa-hub .gpa-hub__more:hover,
.gpa-hub .gpa-hub__reset:hover { text-decoration: underline; }
.gpa-hub__panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--gpa-border);
    border-radius: var(--gpa-radius-md);
    background: var(--gpa-surface-subtle);
}
.gpa-hub__field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gpa-text-strong);
}
.gpa-hub .gpa-hub__field select {
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--gpa-border);
    border-radius: var(--gpa-input-radius);
    background-color: var(--gpa-surface);
    font: 500 14px var(--gpa-font);
    color: var(--gpa-text-strong);
}
.gpa-hub__panel .gpa-hub__reset { grid-column: 1 / -1; justify-self: start; }

/* Count, legend, header row and the list */
.gpa-hub__count {
    margin: 20px 0 10px;
    font-size: var(--gpa-small-size);
    color: var(--gpa-text-muted);
}

/* The difficulty levels: color, tint, edge and ink, for the tags and the
   legend */
.gpa-hub :is(.gpa-hub-tag, .gpa-hub__key) {
    --gpa-hub-accent: var(--gpa-gray-300);
    --gpa-hub-tint: var(--gpa-gray-50);
    --gpa-hub-edge: var(--gpa-gray-200);
    --gpa-hub-ink: var(--gpa-text-secondary);
}
.gpa-hub :is(.gpa-hub-tag--very-hard, .gpa-hub__key--very-hard) {
    --gpa-hub-accent: var(--gpa-red-600);
    --gpa-hub-tint: var(--gpa-red-50);
    --gpa-hub-edge: var(--gpa-red-200);
    --gpa-hub-ink: var(--gpa-red-800);
}
.gpa-hub :is(.gpa-hub-tag--hard, .gpa-hub__key--hard) {
    --gpa-hub-accent: var(--gpa-orange-600);
    --gpa-hub-tint: var(--gpa-orange-50);
    --gpa-hub-edge: var(--gpa-orange-200);
    --gpa-hub-ink: var(--gpa-orange-800);
}
.gpa-hub :is(.gpa-hub-tag--moderate, .gpa-hub__key--moderate) {
    --gpa-hub-accent: var(--gpa-amber-500);
    --gpa-hub-tint: var(--gpa-amber-50);
    --gpa-hub-edge: var(--gpa-amber-200);
    --gpa-hub-ink: var(--gpa-amber-800);
}
.gpa-hub :is(.gpa-hub-tag--fairly-easy, .gpa-hub__key--fairly-easy) {
    --gpa-hub-accent: var(--gpa-hub-lime-600);
    --gpa-hub-tint: var(--gpa-hub-lime-50);
    --gpa-hub-edge: var(--gpa-hub-lime-200);
    --gpa-hub-ink: var(--gpa-hub-lime-800);
}
.gpa-hub :is(.gpa-hub-tag--easy, .gpa-hub__key--easy) {
    --gpa-hub-accent: var(--gpa-green-600);
    --gpa-hub-tint: var(--gpa-green-50);
    --gpa-hub-edge: var(--gpa-green-200);
    --gpa-hub-ink: var(--gpa-green-800);
}
.gpa-hub :is(.gpa-hub-tag--open, .gpa-hub__key--open) {
    --gpa-hub-accent: var(--gpa-teal-600);
    --gpa-hub-tint: color-mix(in srgb, var(--gpa-teal-100) 45%, var(--gpa-white));
    --gpa-hub-edge: var(--gpa-teal-200);
    --gpa-hub-ink: var(--gpa-teal-800);
}

.gpa-hub__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.4;
}
.gpa-hub__legend-title {
    font-weight: 700;
    color: var(--gpa-text-strong);
}
.gpa-hub__keys {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}
.gpa-hub__key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--gpa-hub-ink);
}
.gpa-hub__range {
    font-weight: 500;
    color: var(--gpa-text-muted);
}
/* The meter: five rising bars, as many filled in the level's color as the
   level is hard */
.gpa-hub-meter {
    display: inline-flex;
    flex: none;
    align-items: flex-end;
    gap: 2px;
    height: 13px;
}
.gpa-hub-meter > span {
    width: 3px;
    border-radius: 1px;
    background: color-mix(in srgb, var(--gpa-hub-accent) 30%, transparent);
}
.gpa-hub-meter > span:nth-child(1) { height: 5px; }
.gpa-hub-meter > span:nth-child(2) { height: 7px; }
.gpa-hub-meter > span:nth-child(3) { height: 9px; }
.gpa-hub-meter > span:nth-child(4) { height: 11px; }
.gpa-hub-meter > span:nth-child(5) { height: 13px; }
.gpa-hub-meter > .gpa-hub-meter__on { background: var(--gpa-hub-accent); }
.gpa-hub__legend:has(+ .gpa-hub__head + .gpa-hub__list[style*="none"]) { display: none; }

.gpa-hub__head,
.gpa-hub-row {
    display: grid;
    grid-template-columns: var(--gpa-hub-cols);
    column-gap: 14px;
    align-items: center;
}
.gpa-hub__head {
    padding: 0 18px 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--gpa-text-strong);
}
.gpa-hub__head > span:not(:first-child) { text-align: center; }
.gpa-hub__head small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--gpa-text-muted);
}
.gpa-hub__head:has(+ .gpa-hub__list[style*="none"]) { display: none; }
.gpa-hub__list {
    display: grid;
    gap: 12px;
}
/* A card per college */
.gpa-hub-row {
    position: relative;
    padding: 16px 18px;
    border: 1px solid var(--gpa-border);
    border-radius: var(--gpa-radius-md);
    background: var(--gpa-surface);
    box-shadow: var(--gpa-shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gpa-hub-row:hover {
    border-color: var(--gpa-blue-200);
    box-shadow: var(--gpa-shadow-md);
}
.gpa-hub-row__college {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}
.gpa-hub .gpa-hub-row__name,
.gpa-hub .gpa-hub-row__name:visited {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--gpa-text-strong);
    text-decoration: none;
}
/* The whole card opens the college's page */
.gpa-hub-row__name::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.gpa-hub .gpa-hub-row:hover .gpa-hub-row__name {
    color: var(--gpa-link);
    text-decoration: underline;
    text-decoration-color: var(--gpa-link-underline);
    text-underline-offset: 3px;
}
/* Keyboard focus rings the whole card instead of the name (style.css gives
   every focused link an !important outline) */
.gpa-hub .gpa-hub-row__name:focus-visible { outline: none !important; }
.gpa-hub .gpa-hub-row__name:focus-visible::after {
    outline: 2px solid var(--gpa-focus-ring);
    outline-offset: -2px;
}
.gpa-hub-row__meta {
    font-size: 13px;
    line-height: 1.45;
    color: var(--gpa-text-muted);
}
/* Place and type, with a dot between them that hides when the type wraps
   to its own line: each part carries its dot in the gap before it, and the
   dot of a part that starts a line falls outside the box and is clipped. */
.gpa-hub-row__meta {
    display: flex;
    flex-wrap: wrap;
    column-gap: 14px;
    overflow: hidden;
}
.gpa-hub-row__meta > span { margin-left: -14px; }
.gpa-hub-row__meta > span::before {
    content: "·";
    content: "·" / "";
    display: inline-block;
    width: 14px;
    text-align: center;
}
/* How hard to get into: "[meter] Very hard · 3.6% admitted" */
.gpa-hub-tag {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 7px;
    margin-top: 7px;
    padding: 3px 11px 3px 9px;
    border: 1px solid var(--gpa-hub-edge);
    border-radius: var(--gpa-radius-pill);
    background: var(--gpa-hub-tint);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--gpa-hub-ink);
}
.gpa-hub-tag__rate { font-weight: 600; }
.gpa-hub-tag__rate::before {
    content: "·";
    content: "·" / "";
    margin-right: 6px;
}
.gpa-hub-row__fig {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--gpa-text-strong);
}
.gpa-hub-row__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* The average GPA leads, with its label under it */
.gpa-hub-row__gpa {
    display: block;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--gpa-text-strong);
}
.gpa-hub-row__note {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--gpa-text-muted);
}
.gpa-hub-row__line { display: block; white-space: nowrap; }
.gpa-hub-row__line small {
    font-size: 12px;
    font-weight: 500;
    color: var(--gpa-text-muted);
}
.gpa-hub-row__none {
    font-weight: 500;
    color: var(--gpa-gray-400);
}
.gpa-hub-row__review {
    grid-column: 2 / -1;
    font-size: 13px;
    text-align: center;
    color: var(--gpa-text-muted);
}

/* Show more, nothing found, loading rows */
.gpa-hub__more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.gpa-hub .gpa-hub__load,
.gpa-hub .gpa-hub__load:focus {
    margin: 0;
    padding: 12px 22px;
    border: 1px solid var(--gpa-blue-100);
    border-radius: var(--gpa-radius-sm);
    background: var(--gpa-tint-blue);
    font: 600 15px/1.2 var(--gpa-font);
    color: var(--gpa-link);
    cursor: pointer;
}
.gpa-hub .gpa-hub__load:hover { background: var(--gpa-blue-100); color: var(--gpa-link); }
.gpa-hub .gpa-hub__load:disabled { opacity: 0.7; cursor: default; }
.gpa-hub__empty {
    padding: 32px 16px;
    border: 1px solid var(--gpa-border);
    border-radius: var(--gpa-radius-md);
    text-align: center;
}
.gpa-hub__empty > strong,
.gpa-hub__empty > span {
    display: block;
    margin-bottom: 8px;
}
.gpa-hub__empty > strong { font-size: 17px; color: var(--gpa-text-strong); }
.gpa-hub__empty > span { font-size: 15px; color: var(--gpa-text-muted); }
.gpa-hub-skel {
    display: block;
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--gpa-gray-100), var(--gpa-gray-200), var(--gpa-gray-100));
    background-size: 200% 100%;
    animation: gpa-hub-shimmer 1.2s ease-in-out infinite;
}
.gpa-hub-skel--name { width: 70%; height: 18px; }
@keyframes gpa-hub-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
    .gpa-hub__spinner,
    .gpa-hub-skel { animation: none; }
}

@media (max-width: 940px) {
    .gpa-hub { padding: 28px 24px 8px; }
}
/* Narrow screens: no header row; each figure shows its own label under
   the college */
@media (max-width: 767px) {
    .gpa-hub__head { display: none; }
    .gpa-hub__list { gap: 10px; }
    .gpa-hub-row {
        grid-template-columns: minmax(108px, 1.1fr) minmax(100px, 1.3fr) minmax(46px, 0.6fr);
        align-items: start;
        column-gap: 12px;
        row-gap: 12px;
        padding: 14px;
    }
    .gpa-hub-row__gpa { font-size: 20px; }
    .gpa-hub-row__college,
    .gpa-hub-row__review,
    .gpa-hub-skel--name { grid-column: 1 / -1; }
    .gpa-hub-row__fig,
    .gpa-hub-row__review { text-align: left; }
    .gpa-hub-row__label {
        position: static;
        display: block;
        width: auto;
        height: auto;
        margin-bottom: 2px;
        overflow: visible;
        clip: auto;
        font-size: 12px;
        font-weight: 600;
        color: var(--gpa-text-muted);
    }
}
@media (max-width: 600px) {
    .gpa-hub { padding: 20px 16px 8px; }
    .gpa-hub .gpa-hub__search-label { font-size: 18px; }
    .gpa-hub__bar { gap: 8px; padding-left: 12px; }
    .gpa-hub__search-icon { display: none; }
    .gpa-hub .gpa-hub__go,
    .gpa-hub .gpa-hub__go:focus { padding: 0 18px; }
    .gpa-hub__panel { grid-template-columns: minmax(0, 1fr); }
}
/* Small phones: a GPA with its label, an SAT line and an ACT range side
   by side need about 260px */
@media (max-width: 380px) {
    .gpa-hub { padding-right: 12px; padding-left: 12px; }
    .gpa-hub .gpa-hub__go,
    .gpa-hub .gpa-hub__go:focus { padding: 0 14px; }
    .gpa-hub-row { column-gap: 8px; padding-right: 10px; padding-left: 12px; }
}
@media (max-width: 340px) {
    .gpa-hub-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 0.6fr); }
    .gpa-hub-row__line { white-space: normal; }
}