/* ==========================================================================
   GPA scale styles: the /gpa-scale/ hub and the /gpa-scale/<x-x>-gpa/ pages
   Loaded after components.css and content-styles.css on those pages only (gpa_scale_styles() in functions.php).
     1. Scale chart (Table block .gpa-scale-table), the "Updated" date and prev / next links (from content-styles.css)
     2. Hub quick converter, "Look up a GPA" cards and the GPA page Unweighted | Weighted view (from components.css)
   ========================================================================== */

/* ---------- 1. Scale chart, "Updated" date, prev / next ---------- */
/* ==========================================================================
   GPA SCALE TABLE (/gpa-scale/<x-x>-gpa/ pages)
   Core Table block with class gpa-scale-table: GPA | Percentage | Letter grade.
   Rows get is-band-a … is-band-f and the page's own GPA gets is-current-gpa
   from gpa_scale_table_mark_rows() in functions.php.
   ========================================================================== */
.content-page .entry-content figure.wp-block-table.gpa-scale-table {
    max-width: 560px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.content-page .entry-content .gpa-scale-table table { table-layout: fixed; }
.content-page .entry-content .gpa-scale-table thead th {
    background: var(--gpa-bg-gray-50, var(--gpa-surface-subtle)) !important;
    padding: 14px 16px !important;
    font-size: 13px !important;
}
.content-page .entry-content .gpa-scale-table tbody td {
    padding: 11px 16px !important;
    font-size: 16px !important;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--gpa-border, var(--gpa-border)) !important;
    transition: background-color .15s ease;
}
.content-page .entry-content .gpa-scale-table tbody tr:last-child td { border-bottom: none !important; }
.content-page .entry-content .gpa-scale-table tbody td:first-child { font-weight: 600 !important; color: var(--gpa-text-heading, var(--gpa-text-strong)) !important; }
.content-page .entry-content .gpa-scale-table tbody td:last-child { font-weight: 700 !important; }
.content-page .entry-content .gpa-scale-table tr.is-band-a td { background: var(--gpa-band-a-bg, var(--gpa-green-50)); }
.content-page .entry-content .gpa-scale-table tr.is-band-b td { background: var(--gpa-band-b-bg, var(--gpa-tint-blue)); }
.content-page .entry-content .gpa-scale-table tr.is-band-c td { background: var(--gpa-band-c-bg, var(--gpa-amber-50)); }
.content-page .entry-content .gpa-scale-table tr.is-band-d td { background: var(--gpa-band-d-bg, var(--gpa-orange-50)); }
.content-page .entry-content .gpa-scale-table tr.is-band-f td { background: var(--gpa-band-f-bg, var(--gpa-red-50)); }
.content-page .entry-content .gpa-scale-table tr.is-band-a td:last-child { color: var(--gpa-band-a, var(--gpa-green-700)) !important; }
.content-page .entry-content .gpa-scale-table tr.is-band-b td:last-child { color: var(--gpa-band-b, var(--gpa-primary-hover)) !important; }
.content-page .entry-content .gpa-scale-table tr.is-band-c td:last-child { color: var(--gpa-band-c, var(--gpa-amber-700)) !important; }
.content-page .entry-content .gpa-scale-table tr.is-band-d td:last-child { color: var(--gpa-band-d, var(--gpa-orange-700)) !important; }
.content-page .entry-content .gpa-scale-table tr.is-band-f td:last-child { color: var(--gpa-band-f, var(--gpa-red-700)) !important; }
.content-page .entry-content .gpa-scale-table tr.is-current-gpa td:first-child::after {
    content: "Your GPA";
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: var(--gpa-radius-pill, 999px);
    background: var(--gpa-surface);
    color: var(--gpa-primary, var(--gpa-primary));
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    vertical-align: 2px;
}
.content-page .entry-content .gpa-scale-table figcaption {
    margin: 0 !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    color: var(--gpa-text-muted, var(--gpa-text-muted)) !important;
    text-align: center;
    border-top: 1px solid var(--gpa-border, var(--gpa-border));
    background: var(--gpa-bg-white, var(--gpa-surface));
}
@media (max-width: 480px) {
    .content-page .entry-content .gpa-scale-table thead th,
    .content-page .entry-content .gpa-scale-table tbody td { padding-left: 10px !important; padding-right: 10px !important; }
    .content-page .entry-content .gpa-scale-table tr.is-current-gpa td:first-child::after { display: block; width: max-content; margin: 4px auto 0; }
}

/* /gpa-scale/<x-x>-gpa/ pages: "Updated" date in the hero and prev / next / hub links (functions.php) */
body.gpa-hero-band .entry-header .gpa-updated {
    position: relative;
    z-index: 1;
    margin: 12px auto 0 !important;
    font-size: var(--gpa-small-size) !important;
    color: var(--gpa-hero-text) !important;
    text-align: center;
}
.content-page .entry-content .gpa-scale-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 40px 0 8px;
    padding: 16px 20px;
    border: 1px solid var(--gpa-border, var(--gpa-border));
    border-radius: var(--gpa-radius-lg, 16px);
    background: var(--gpa-bg-gray-50, var(--gpa-surface-subtle));
    font-weight: 600;
}
.content-page .entry-content .gpa-scale-nav a { text-decoration: none !important; color: var(--gpa-primary, var(--gpa-primary)) !important; }
.content-page .entry-content .gpa-scale-nav a:hover { text-decoration: underline !important; }
.content-page .entry-content .gpa-scale-nav__prev { justify-self: start; grid-column: 1; }
.content-page .entry-content .gpa-scale-nav__hub { justify-self: center; grid-column: 2; font-weight: 500; color: var(--gpa-text-muted, var(--gpa-text-muted)) !important; }
.content-page .entry-content .gpa-scale-nav__next { justify-self: end; grid-column: 3; }
@media (max-width: 480px) {
    .content-page .entry-content .gpa-scale-nav { grid-template-columns: 1fr 1fr; }
    .content-page .entry-content .gpa-scale-nav__hub { grid-column: 1 / -1; grid-row: 2; }
    .content-page .entry-content .gpa-scale-nav__next { grid-column: 2; }
}

/* GPA scale tables: keep their letter-grade band colors and the "Your GPA" tag */
#page .entry-content .gpa-scale-table tr.is-current-gpa td:first-child::after {
    background: var(--gpa-primary);
    color: var(--gpa-white);
}

/* ---------- 2. GPA scale hub: quick converter and "Look up a GPA" cards ----------
   [gpa_scale_converter] and [gpa_scale_lookup] (gpa-shortcodes.php). Same card language as
   Related tools (white, 1px border, 12px corners); the accent tint marks popular GPAs. */
#page .entry-content .gpa-quickconv {
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    align-items: start;             /* every label on one top line */
    gap: 16px 24px;
    margin: 0 0 24px !important;
    padding: 20px !important;
    background: var(--gpa-surface-subtle) !important;
    border: 1px solid var(--gpa-border) !important;
    border-radius: 12px !important;
}
#page .entry-content .gpa-quickconv__label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--gpa-gray-600);
}
#page .entry-content .gpa-quickconv__select {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    font-size: 17px;
    font-weight: 600;
    color: var(--gpa-heading);
    background: var(--gpa-surface);
    border: 1px solid var(--gpa-border-strong);
    border-radius: 10px;
}
#page .entry-content .gpa-quickconv__select:focus-visible { outline: 2px solid var(--gpa-focus-ring); outline-offset: 2px; }
#page .entry-content .gpa-quickconv__out {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 32px;
}
#page .entry-content .gpa-quickconv__stat strong {
    display: block;
    font-size: 28px;
    line-height: 48px;              /* same height as the select, so the values sit level with it */
    font-weight: 700;
    color: var(--gpa-heading);
    font-variant-numeric: tabular-nums;
}
#page .entry-content .gpa-quickconv__link {
    flex-basis: 100%;               /* its own line under the values, left-aligned */
    font-weight: 600;
    color: var(--gpa-link) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--gpa-link-underline) !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 4px !important;
}
#page .entry-content .gpa-quickconv__link[hidden] { display: none; }

/* Hub converter + its letter-grade table at body text width, the paragraphs' left edge, like the GPA pages' card
   and chart (Digant 2026-10-03 08:46); same card padding and corners as the GPA page card */
#page .entry-content .gpa-quickconv,
#page .entry-content .gpa-quickconv + figure.wp-block-table {
    max-width: min(var(--gpa-text-max), calc(100% - 80px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
#page .entry-content .gpa-quickconv { padding: 24px !important; border-radius: 16px !important; }
@media (max-width: 640px) {
    #page .entry-content .gpa-quickconv,
    #page .entry-content .gpa-quickconv + figure.wp-block-table { max-width: 100% !important; }
    #page .entry-content .gpa-quickconv { padding: 16px !important; }
}

/* Hub converter, polish (Digant 2026-10-03 09:00): the GPA page card's look (tint, sentence-case labels, white
   figure tiles), the select and the two figures in one row, the link centred on its own line under a hairline */
#page .entry-content .gpa-quickconv {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    background: var(--gpa-tint-indigo, var(--gpa-surface-subtle)) !important;
}
#page .entry-content .gpa-quickconv__out { display: contents; }
#page .entry-content .gpa-quickconv__label {
    margin-bottom: 4px;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}
#page .entry-content .gpa-quickconv__field { padding-top: 13px; }   /* label level with the tiles' labels */
#page .entry-content .gpa-quickconv__select { min-height: 46px; }   /* bottom level with the tiles */
#page .entry-content .gpa-quickconv__stat {
    padding: 12px 16px;
    background: var(--gpa-surface);
    border: 1px solid var(--gpa-border);
    border-radius: 12px;
}
#page .entry-content .gpa-quickconv__stat strong { font-size: 26px; line-height: 1.25; }
#page .entry-content .gpa-quickconv__link {
    grid-column: 1 / -1;
    justify-self: stretch;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--gpa-border);
    text-align: center;
}
@media (max-width: 640px) {
    #page .entry-content .gpa-quickconv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    #page .entry-content .gpa-quickconv__field { grid-column: 1 / -1; padding-top: 0; }
    #page .entry-content .gpa-quickconv__stat strong { font-size: 22px; }
}

#page .entry-content .gpa-lookup__group {
    margin: 24px 0 12px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--gpa-heading) !important;
}
#page #main .entry-content ul.gpa-lookup__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
#page #main .entry-content ul.gpa-lookup__grid > li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#page #main .entry-content ul.gpa-lookup__grid > li::before,
#page #main .entry-content ul.gpa-lookup__grid > li::marker { content: none !important; display: none !important; }
#page .entry-content .gpa-lookup__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 16px 16px 14px;
    background: var(--gpa-surface);
    border: 1px solid var(--gpa-border);
    border-radius: 12px;
    text-decoration: none !important;
    transition: border-color .15s ease, transform .15s ease;
}
#page .entry-content .gpa-lookup__card:hover { border-color: var(--gpa-accent); transform: translateY(-1px); }
#page .entry-content .gpa-lookup__card:focus-visible { outline: 3px solid var(--gpa-focus-ring); outline-offset: 2px; }
#page .entry-content .gpa-lookup__num {
    font-size: 28px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--gpa-heading);
    font-variant-numeric: tabular-nums;
}
#page .entry-content .gpa-lookup__sub { font-size: 14px; line-height: 1.4; color: var(--gpa-gray-600); }
#page .entry-content .gpa-lookup__card.is-popular { background: var(--gpa-tint-indigo); border-color: var(--gpa-accent); }
#page .entry-content .gpa-lookup__card.is-popular .gpa-lookup__num { color: var(--gpa-accent); }
#page .entry-content .gpa-lookup__tag {
    order: -1;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gpa-accent);
}
@media (max-width: 640px) {
    #page .entry-content .gpa-lookup__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#page .entry-content .gpa-lookup__tag.is-weighted { color: var(--gpa-gray-600); }
#page .entry-content .gpa-lookup__card.is-weighted { background: var(--gpa-surface-subtle); }
#page .entry-content .gpa-lookup__note { margin: 0 0 14px !important; font-size: 15px !important; color: var(--gpa-gray-600) !important; }

/* GPA page view ([gpa_scale_view]): Unweighted | Weighted toggle, summary facts, weighted mini converter */
#page .entry-content .gpa-view {
    margin: 0 0 24px !important;
    padding: 20px !important;
    background: var(--gpa-surface-subtle) !important;
    border: 1px solid var(--gpa-border) !important;
    border-radius: 12px !important;
}
#page .entry-content .gpa-view__toggle {
    display: inline-flex;
    padding: 4px;
    margin-bottom: 16px;
    background: var(--gpa-surface);
    border: 1px solid var(--gpa-border);
    border-radius: 999px;
}
#page .entry-content .gpa-view__btn {
    min-height: 40px;
    padding: 8px 18px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--gpa-gray-600);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}
#page .entry-content .gpa-view__btn[aria-pressed="true"] { background: var(--gpa-accent); color: var(--gpa-surface); }
#page .entry-content .gpa-view__btn:focus-visible { outline: 3px solid var(--gpa-focus-ring); outline-offset: 2px; }
#page .entry-content .gpa-view__panel[hidden] { display: none !important; }
#page #main .entry-content ul.gpa-view__facts {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 0 0 12px !important;
    padding: 0 !important;
    list-style: none !important;
}
#page #main .entry-content ul.gpa-view__facts > li {
    margin: 0 !important;
    padding: 12px 14px !important;
    background: var(--gpa-surface);
    border: 1px solid var(--gpa-border);
    border-radius: 10px;
    list-style: none !important;
}
#page #main .entry-content ul.gpa-view__facts > li::before { content: none !important; display: none !important; }
#page #main .entry-content ul.gpa-view__facts > li > span {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--gpa-gray-600);
}
#page #main .entry-content ul.gpa-view__facts > li > strong {
    display: block;
    margin-top: 2px;
    font-size: 22px;
    line-height: 1.2;
    color: var(--gpa-heading);
    font-variant-numeric: tabular-nums;
}
#page #main .entry-content p.gpa-view__note:not(#root *) { margin: 0 !important; font-size: 15px !important; line-height: 1.6 !important; color: var(--gpa-text) !important; }
#page .entry-content .gpa-view__conv {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0 !important;
}
#page .entry-content .gpa-view__field input {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    color: var(--gpa-heading);
    background: var(--gpa-surface);
    border: 1px solid var(--gpa-border-strong);
    border-radius: 10px;
}
#page .entry-content .gpa-view__field input:focus-visible { outline: 3px solid var(--gpa-focus-ring); outline-offset: 2px; }
@media (max-width: 640px) {
    #page .entry-content .gpa-view { padding: 16px !important; }
    #page .entry-content .gpa-view__toggle { display: flex; }
    #page .entry-content .gpa-view__btn { flex: 1; }
    #page .entry-content .gpa-view__conv { grid-template-columns: 1fr; }
    #page #main .entry-content ul.gpa-view__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Chart mark: the page's GPA beside its nearest letter's row (text from data-mark, set by functions.php / the view) */
#page .entry-content .gpa-scale-table tr.is-current-gpa td[data-mark]:first-child::after {
    content: attr(data-mark) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
}

/* GPA page view v4 (Digant 2026-10-03 07:59). The card, the "Here is where…" lead-in and the chart all sit at body
   text width with the paragraphs' left edge. One tinted card holds the toggle and figures; the chart stays outside it.
   Desktop: figures as tiles in one row (label small on top, value below). Phone: label/value rows. */
#page .entry-content .gpa-view,
#page #main .entry-content p:has(+ figure.gpa-scale-table),
#page .entry-content figure.wp-block-table.gpa-scale-table {
    max-width: min(var(--gpa-text-max), calc(100% - 80px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
#page #main .entry-content p:has(+ figure.gpa-scale-table) { text-align: left !important; }
#page .entry-content .gpa-view {
    margin-bottom: 28px !important;
    padding: 24px !important;
    background: var(--gpa-tint-indigo, var(--gpa-surface-subtle)) !important;
    border: 1px solid var(--gpa-border) !important;
    border-radius: 16px !important;
}
#page .entry-content .gpa-view__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--gpa-gray-600);
}
#page .entry-content .gpa-view__field .gpa-view__label { margin-bottom: 6px; }
#page .entry-content .gpa-view__conv { margin: 14px 0 !important; }
#page #main .entry-content dl.gpa-view__tiles {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 14px !important;
    padding: 0 !important;
}
#page #main .entry-content dl.gpa-view__tiles > div {
    margin: 0 !important;
    padding: 14px 16px !important;
    text-align: left;
    background: var(--gpa-surface);
    border: 1px solid var(--gpa-border);
    border-radius: 12px;
}
#page #main .entry-content dl.gpa-view__tiles dt {
    margin: 0 0 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--gpa-gray-600) !important;
}
#page #main .entry-content dl.gpa-view__tiles dd {
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--gpa-heading) !important;
    font-variant-numeric: tabular-nums;
}
#page #main .entry-content dl.gpa-view__tiles dd small {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
    color: var(--gpa-gray-600);
}
#page #main .entry-content dl.gpa-view__tiles > div.is-headline dd { font-size: 36px !important; color: var(--gpa-accent) !important; }
#page #main .entry-content p.gpa-view__fine:not(#root *) { font-size: 14px !important; color: var(--gpa-gray-600) !important; }
#page #main .entry-content p.gpa-view__other:not(#root *) {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--gpa-border);
    font-size: 15px !important;
}
@media (max-width: 640px) {
    #page .entry-content .gpa-view,
    #page #main .entry-content p:has(+ figure.gpa-scale-table),
    #page .entry-content figure.wp-block-table.gpa-scale-table { max-width: 100% !important; }
    #page .entry-content .gpa-view { padding: 16px !important; }
    #page #main .entry-content dl.gpa-view__tiles {
        grid-template-columns: 1fr;
        gap: 0;
        background: var(--gpa-surface);
        border: 1px solid var(--gpa-border);
        border-radius: 12px;
    }
    #page #main .entry-content dl.gpa-view__tiles > div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 14px !important;
        background: none;
        border: 0;
        border-top: 1px solid var(--gpa-border);
        border-radius: 0;
    }
    #page #main .entry-content dl.gpa-view__tiles > div:first-child { border-top: 0; }
    #page #main .entry-content dl.gpa-view__tiles dt { margin: 0 !important; font-size: 15px !important; font-weight: 400 !important; color: var(--gpa-text) !important; }
    #page #main .entry-content dl.gpa-view__tiles dd { font-size: 18px !important; text-align: right; }
    #page #main .entry-content dl.gpa-view__tiles dt { flex: none; white-space: nowrap; }
    #page #main .entry-content dl.gpa-view__tiles dd { flex: 1 1 auto; min-width: 0; }
    #page #main .entry-content dl.gpa-view__tiles dd small { white-space: nowrap; }
    #page #main .entry-content dl.gpa-view__tiles > div.is-headline dd { font-size: 28px !important; }
}

/* Chart: the "your GPA" row keeps its band color; a 3px blue bar, bold text and the badge mark it */
#page #main .entry-content .gpa-scale-table tr.is-current-gpa td { font-weight: 700 !important; color: var(--gpa-heading) !important; }
#page #main .entry-content .gpa-scale-table tr.is-current-gpa.is-band-a td { background: var(--gpa-band-a-bg) !important; }
#page #main .entry-content .gpa-scale-table tr.is-current-gpa.is-band-b td { background: var(--gpa-band-b-bg) !important; }
#page #main .entry-content .gpa-scale-table tr.is-current-gpa.is-band-c td { background: var(--gpa-band-c-bg) !important; }
#page #main .entry-content .gpa-scale-table tr.is-current-gpa.is-band-d td { background: var(--gpa-band-d-bg) !important; }
#page #main .entry-content .gpa-scale-table tr.is-current-gpa.is-band-f td { background: var(--gpa-band-f-bg) !important; }
#page #main .entry-content .gpa-scale-table tr.is-current-gpa td:first-child { box-shadow: inset 3px 0 0 var(--gpa-primary) !important; }

/* GPA page view v5 (Digant 2026-10-03 15:58): each tab leads with its own scale as a sentence; Unweighted has two
   tiles; Weighted puts its inputs under the tiles in "Customize for your classes" (open on desktop, collapsed on phone) */
#page #main .entry-content p.gpa-view__lead:not(#root *) {
    margin: 0 0 14px !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
    color: var(--gpa-heading) !important;
}
#page #main .entry-content p.gpa-view__lead strong { font-weight: 700; color: inherit !important; }
#page #main .entry-content dl.gpa-view__tiles.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#page .entry-content details.gpa-view__custom {
    margin: 0 0 14px !important;
    padding: 0 16px !important;
    background: var(--gpa-surface);
    border: 1px solid var(--gpa-border);
    border-radius: 12px;
}
#page .entry-content details.gpa-view__custom[open] { padding-bottom: 16px !important; }
#page .entry-content details.gpa-view__custom > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--gpa-heading);
    list-style: none;
    cursor: pointer;
}
#page .entry-content details.gpa-view__custom > summary::-webkit-details-marker { display: none; }
#page .entry-content details.gpa-view__custom > summary::after {
    content: "";
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 8px;
    background: var(--gpa-indigo-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234338ca' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
    transition: transform .15s;
}
#page .entry-content details.gpa-view__custom[open] > summary::after { transform: rotate(180deg); }
#page .entry-content details.gpa-view__custom > summary:focus-visible { outline: 2px solid var(--gpa-focus-ring); outline-offset: 2px; border-radius: 12px; }
#page #main .entry-content details.gpa-view__custom > p.gpa-view__note:not(#root *) { margin-top: 0 !important; font-size: 14px !important; color: var(--gpa-gray-600) !important; }
#page .entry-content details.gpa-view__custom > .gpa-view__conv { margin: 10px 0 0 !important; }
@media (max-width: 640px) {
    #page #main .entry-content dl.gpa-view__tiles.is-two { grid-template-columns: 1fr; }
    #page #main .entry-content p.gpa-view__lead:not(#root *) { font-size: 16px !important; }
}
#page .entry-content details.gpa-view__custom .gpa-view__field { min-width: 0; }
#page .entry-content details.gpa-view__custom .gpa-view__field input { box-sizing: border-box; max-width: 100%; }

/* GPA page v6 (Digant 2026-10-03 16:17). Top: a static answer card in the hub converter's style (no dropdown):
   three tiles and one line. Further down: the weighted estimator as a <details> card, "Is your 3.7 weighted?",
   collapsed by default (open on 4.1+ pages). */
#page .entry-content .gpa-answer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#page .entry-content .gpa-answer .gpa-quickconv__stat.is-headline strong { color: var(--gpa-accent); }
#page #main .entry-content p.gpa-answer__line:not(#root *) {
    grid-column: 1 / -1;
    margin: 4px 0 0 !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
    color: var(--gpa-heading) !important;
    text-align: left;
}
#page .entry-content details.gpa-weighted > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--gpa-heading);
    list-style: none;
    cursor: pointer;
}
#page .entry-content details.gpa-weighted > summary::-webkit-details-marker { display: none; }
#page .entry-content details.gpa-weighted > summary::after {
    content: "";
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--gpa-indigo-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234338ca' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
    transition: transform .15s;
}
#page .entry-content details.gpa-weighted[open] > summary { margin-bottom: 14px; }
#page .entry-content details.gpa-weighted[open] > summary::after { transform: rotate(180deg); }
#page .entry-content details.gpa-weighted > summary:focus-visible { outline: 2px solid var(--gpa-focus-ring); outline-offset: 4px; border-radius: 8px; }
#page .entry-content details.gpa-weighted { scroll-margin-top: 96px; }
#page .entry-content details.gpa-weighted .gpa-view__field { min-width: 0; }
#page .entry-content details.gpa-weighted .gpa-view__field input { box-sizing: border-box; max-width: 100%; }
#page .entry-content details.gpa-weighted > .gpa-view__conv { margin: 10px 0 14px !important; }
@media (max-width: 640px) {
    #page .entry-content .gpa-answer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #page .entry-content .gpa-answer .gpa-quickconv__stat:first-child { grid-column: 1 / -1; }
    #page #main .entry-content p.gpa-answer__line:not(#root *) { font-size: 16px !important; }
    #page .entry-content details.gpa-weighted > summary { font-size: 17px; }
}
@media (max-width: 480px) {
    /* the mark text ("Your 3.7 · 90–92%") fits the narrow GPA column */
    #page .entry-content .gpa-scale-table tr.is-current-gpa td:first-child::after { max-width: 100%; padding: 2px 6px; font-size: 10px; letter-spacing: 0; white-space: normal; }
}

/* Answer card (Digant 19:11): label and value centred in each tile, no line under the tiles */
#page .entry-content .gpa-answer .gpa-quickconv__stat { text-align: center; }

/* Answer card without the tinted outer container (Digant 20:23): just the three tiles at the text column */
#page .entry-content .gpa-quickconv.gpa-answer {
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}
@media (max-width: 480px) {
    /* the badge ("Your 3.7 · 90–92%") fits inside the narrow GPA cell */
    #page .entry-content .gpa-scale-table tr.is-current-gpa td:first-child::after { padding: 2px 5px; font-size: 9px; }
}