/* EDsmart Data - Data Page Styles */
/* Clean, data-first styling for data exploration pages */

/* Page Header - NOT sticky */
.page-header {
    margin-bottom: calc(var(--spacing-unit) * 6);
    padding-bottom: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border);
    position: static !important; /* Explicitly not sticky - override any other rules */
    top: auto !important;
    z-index: auto !important;
}

.page-header h1 {
    margin-bottom: calc(var(--spacing-unit) * 3);
    color: var(--color-primary);
}

.subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-bottom: calc(var(--spacing-unit) * 3);
    line-height: 1.6;
}

.meta-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 2);
    font-size: 1rem;
    color: var(--text-meta);
}

.meta-info .meta-sep {
    color: var(--text-meta);
    user-select: none;
}

.meta-info a {
    color: var(--color-link);
    font-weight: 600;
    text-decoration: none;
}

.meta-info a:hover {
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   Wide content & tables — mobile first (stay inside article / container)
   ----------------------------------------------------------------------------- */
article .introduction,
article .chart-section,
article .data-table-section,
article .analysis-insights,
article details.sources,
article .page-toc,
article .ranking-table-section,
article .ranking-tables,
article .data-table-downloads,
article .data-table-section,
article .table-responsive-wrapper,
article .tldr-section,
article .faq-section,
article .editorial-disclaimer {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.table-wrapper,
.table-container,
.table-responsive-wrapper,
.ranking-table-container,
.ranking-table-wrapper {
    max-width: 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* Career profiles: intro line above related degree links */
.related-degrees .related-degrees-lead {
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-bottom: calc(var(--spacing-unit) * 2);
    line-height: 1.6;
}

/* Career profiles: related degree program links */
.related-degrees .related-degrees-list {
    margin: 0;
    padding-left: 1.25rem;
    max-width: 42rem;
}
.related-degrees .related-degrees-list li {
    margin-bottom: calc(var(--spacing-unit) * 2);
}
.related-degrees .related-degrees-list a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}
.related-degrees .related-degrees-list a:hover {
    text-decoration: underline;
}

/* Data transparency — illustrative charts & source limits (see docs/DATA_INTEGRITY_AUDIT.md) */
.editorial-disclaimer {
    margin: calc(var(--spacing-unit) * 4) 0;
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.editorial-disclaimer strong {
    color: var(--color-primary);
    font-weight: 600;
}

.editorial-disclaimer a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.editorial-disclaimer a:hover {
    text-decoration: underline;
}

/* College Board Education Pays–style callouts (Highlights, Also important) */
.also-important {
    margin: calc(var(--spacing-unit) * 3) 0;
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3.5);
    background: var(--surface-alt);
    border-left: 3px solid var(--color-primary);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.also-important strong {
    color: var(--color-primary);
    font-weight: 600;
}

/* Carnegie Opportunity College badge / callout on school profiles */
.ocu-callout {
    margin: calc(var(--spacing-unit) * 4) 0;
    padding: calc(var(--spacing-unit) * 3.5) calc(var(--spacing-unit) * 4);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, var(--surface-alt) 55%);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-left: 4px solid #059669;
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.ocu-badge-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.ocu-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: #059669;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.ocu-badge-sub {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-meta, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ocu-callout p {
    margin: 0;
}

.ocu-callout a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.ocu-callout a:hover {
    text-decoration: underline;
}

.highlights-section .highlights-lead {
    font-size: 1.05rem;
    line-height: 1.65;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.highlights-section ul {
    line-height: 1.65;
}

.highlights-section .highlights-subhead {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: calc(var(--spacing-unit) * 4) 0 calc(var(--spacing-unit) * 2);
}

/* State / region / city profile cross-links */
article .profile-internal-links {
    margin: calc(var(--spacing-unit) * 3) 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

article .profile-internal-links h2 {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
}

article .profile-internal-links-list {
    margin: 0;
    padding-left: 1.25rem;
    columns: 2;
    column-gap: 2rem;
}

@media (max-width: 640px) {
    article .profile-internal-links-list {
        columns: 1;
    }
}

article .profile-internal-links-list a {
    color: var(--color-primary);
    text-decoration: none;
}

article .profile-internal-links-list a:hover {
    text-decoration: underline;
}

/* Related profile cards — geo hubs + school near/similar */
.related-profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(14.5rem, 100%), 1fr));
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.related-profiles-grid > li {
    list-style: none;
    margin: 0;
    min-width: 0;
}

.related-profile-card {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
    min-height: 7.25rem;
    padding: 1rem 1.05rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(10, 28, 74, 0.04));
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

a.related-profile-card:hover {
    border-color: color-mix(in srgb, var(--color-aqua) 35%, var(--border));
    border-left-color: var(--color-aqua);
    box-shadow: var(--shadow-md, 0 4px 14px rgba(10, 28, 74, 0.08));
    transform: translateY(-1px);
    text-decoration: none;
    color: inherit;
}

.related-profile-card--near {
    border-left-color: var(--color-aqua);
}

.related-profile-card--similar {
    border-left-color: var(--chart-navy, #2E5074);
}

.related-profile-card--geo {
    border-left-color: var(--chart-aqua, #4A98A8);
}

.related-profile-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.related-profile-kicker {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-aqua-text);
    line-height: 1.3;
}

.related-profile-topline .grade-badge {
    flex-shrink: 0;
    margin-top: -0.1rem;
}

/* Letter grade chips (also in design-system.css; duplicated for school pages) */
.grade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    height: 1.65rem;
    padding: 0 0.35rem;
    border-radius: var(--radius-sm, 6px);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #fff;
}

/* Keep compact relation-card badges on the same brand fills as the overview card */
.grade-badge--a { background: var(--button-success); }
.grade-badge--b { background: var(--color-primary); }
.grade-badge--c { background: var(--color-aqua-dark); }
.grade-badge--d { background: var(--chart-coral, #D4654A); }
.grade-badge--f { background: var(--color-button); }

.related-profile-name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(0.92rem, 3.8cqi, 1.02rem);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.28;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.related-profile-meta {
    margin: auto 0 0;
    padding-top: 0.35rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.related-profile-stat {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--color-aqua-text);
    line-height: 1.2;
}

.school-relations {
    margin: calc(var(--spacing-unit) * 5) 0;
}

.school-relations + .school-relations {
    margin-top: calc(var(--spacing-unit) * 4);
}

.school-relations-header {
    margin-bottom: 1rem;
}

.school-relations-header .section-kicker {
    display: inline-block;
    margin-bottom: 0.35rem;
}

.school-relations-header h2 {
    margin: 0 0 0.35rem;
    font-size: clamp(1.25rem, 2vw, 1.45rem);
}

.school-relations-header .chart-note {
    margin: 0;
    max-width: 42rem;
}

.school-relations-footer {
    margin: 1rem 0 0;
    font-size: 0.9rem;
}

.school-relations-footer a {
    color: var(--color-link);
    font-weight: 700;
    text-decoration: none;
}

.school-relations-footer a:hover {
    text-decoration: underline;
}

/* Card layout variant for related profiles (geo hubs + school peers) */
.profile-internal-links--cards {
    padding: 1.15rem 1.25rem 1.25rem;
}

.profile-internal-links--cards .related-profiles-grid {
    margin-top: 0.25rem;
}

.profile-internal-links--cards > p {
    margin: 1rem 0 0;
}

article .state-top-card-meta a {
    color: var(--color-primary);
    text-decoration: none;
}

article .state-top-card-meta a:hover {
    text-decoration: underline;
}

/* Reports hub + Rankings hub: card grids (imported HTML + block Query Loop) */
article .reports-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

article .reports-link-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    background: var(--surface);
}

article .reports-link-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

article .reports-link-card h3 a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

article .reports-link-card h3 a:hover {
    text-decoration: underline;
}

article .reports-link-card p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.wp-block-query.reports-link-grid .wp-block-post-template.is-layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.wp-block-query.reports-link-grid .reports-link-card.wp-block-group {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    background: var(--surface);
}

.wp-block-query.reports-link-grid .reports-link-card .wp-block-post-title {
    margin-bottom: 0.5rem;
}

.wp-block-query.reports-link-grid .reports-link-card .wp-block-post-title a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
}

.wp-block-query.reports-link-grid .reports-link-card .wp-block-post-title a:hover {
    text-decoration: underline;
}

.wp-block-query.reports-link-grid .reports-link-card .wp-block-post-excerpt {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* TL;DR / Executive Summary */
.tldr-section {
    background: linear-gradient(135deg, var(--primary) 0%, #152A52 100%);
    color: #FFFFFF !important; /* Explicit white for accessibility */
    padding: calc(var(--spacing-unit) * 5);
    margin: calc(var(--spacing-unit) * 6) 0;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(10, 28, 74, 0.15);
}

.tldr-section * {
    color: #FFFFFF !important; /* Force all child elements to be white */
}

.tldr-content {
    color: #FFFFFF !important;
}

.tldr-content h2 {
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit) * 3);
    font-size: 1.5rem;
    color: #FFFFFF !important; /* Explicit white for accessibility */
    font-family: var(--font-heading);
}

.tldr-text {
    font-size: 1.15rem;
    line-height: 1.7;
    margin: 0;
    font-weight: 500;
    color: #FFFFFF !important; /* Explicit white for accessibility */
}

.tldr-section a {
    color: #9CF0FF !important;
    text-decoration: underline;
}

.tldr-section a:hover {
    color: #FFFFFF !important;
}

/* Batch Download Controls */
.batch-downloads {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: calc(var(--spacing-unit) * 4);
    margin: calc(var(--spacing-unit) * 6) 0;
}

.download-controls {
    display: flex;
    gap: calc(var(--spacing-unit) * 3);
    flex-wrap: wrap;
    align-items: center;
}

.btn-download-all,
.btn-export-data {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 5);
    background-color: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    font-family: var(--font-body);
}

.btn-download-all:hover,
.btn-export-data:hover {
    background-color: var(--primary-hover, #0d2a66);
    color: #FFFFFF !important; /* Ensure white text on hover */
    transform: translateY(-1px);
}

.btn-download-all:active,
.btn-export-data:active {
    transform: translateY(0);
}

.btn-download-all span,
.btn-export-data span {
    font-size: 1.2rem;
}

/* Insight Structure - Insight → Evidence → Why it matters */
.insight-takeaway,
.insight-evidence,
.insight-implication {
    margin-bottom: calc(var(--spacing-unit) * 3);
    padding: calc(var(--spacing-unit) * 3);
    background-color: var(--surface-alt);
    border-left: 3px solid var(--primary);
    border-radius: 6px;
}

.insight-takeaway {
    border-left-color: var(--primary);
    background-color: rgba(10, 28, 74, 0.05);
}

.insight-evidence {
    border-left-color: var(--color-aqua);
    background-color: rgba(0, 179, 198, 0.05);
}

.insight-implication {
    border-left-color: var(--color-aqua);
    background-color: rgba(0, 179, 198, 0.05);
}

.insight-takeaway strong,
.insight-evidence strong,
.insight-implication strong {
    display: block;
    margin-bottom: calc(var(--spacing-unit) * 1);
    color: var(--primary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.insight-evidence strong {
    color: var(--color-aqua-text);
}

.insight-implication strong {
    color: var(--color-aqua-text);
}

/* Limitations Section */
.limitations-section {
    margin: calc(var(--spacing-unit) * 6) 0;
    padding: calc(var(--spacing-unit) * 5);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid #FFB020;
    border-radius: 10px;
}

.limitations-section h2 {
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit) * 4);
    color: var(--text-primary);
}

.limitations-section ul {
    list-style: none;
    padding-left: 0;
}

.limitations-section li {
    padding: calc(var(--spacing-unit) * 2) 0;
    padding-left: calc(var(--spacing-unit) * 4);
    position: relative;
    line-height: 1.7;
    color: var(--text-primary);
}

.limitations-section li::before {
    content: '⚠';
    position: absolute;
    left: 0;
    font-size: 1.2rem;
}

/* Enhanced Methodology */
.methodology-content h3 {
    margin-top: calc(var(--spacing-unit) * 4);
    margin-bottom: calc(var(--spacing-unit) * 2);
    font-size: 1.25rem;
    color: var(--primary);
    font-family: var(--font-heading);
}

.methodology-content h3:first-child {
    margin-top: 0;
}

.methodology-content ul {
    margin-left: calc(var(--spacing-unit) * 4);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.methodology-content li {
    margin-bottom: calc(var(--spacing-unit) * 2);
    line-height: 1.6;
}

/* Key Facts Box */
.key-facts {
    background: linear-gradient(135deg, var(--color-aqua-soft) 0%, #F8FAFC 100%);
    border: 1px solid var(--border);
    border-left: 4px solid var(--color-aqua);
    padding: calc(var(--spacing-unit) * 4);
    margin: calc(var(--spacing-unit) * 6) 0;
    border-radius: 12px;
}

.key-facts h2 {
    margin-top: 0;
    font-size: 1.5rem;
    margin-bottom: calc(var(--spacing-unit) * 3);
    color: var(--color-primary);
}

.key-facts ul {
    list-style: none;
    padding-left: 0;
}

.key-facts li {
    padding: calc(var(--spacing-unit) * 2) 0;
    padding-left: calc(var(--spacing-unit) * 3);
    position: relative;
    line-height: 1.6;
    border-bottom: 1px solid rgba(10, 28, 74, 0.08);
}

.key-facts li:last-child {
    border-bottom: none;
}

.key-facts li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: bold;
    font-size: 1.2rem;
}

.key-facts strong {
    color: var(--primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Key Statistics Boxes */
.key-statistics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: calc(var(--spacing-unit) * 3);
    margin: calc(var(--spacing-unit) * 4) 0;
}

.stat-box {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: calc(var(--spacing-unit) * 4);
    text-align: center;
}

.stat-value {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Chart Section */
.chart-section {
    margin: calc(var(--spacing-unit) * 8) 0;
    max-width: 100%;
    min-width: 0;
}

.chart-section h2 {
    margin-bottom: calc(var(--spacing-unit) * 2);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-primary);
}

.chart-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: calc(var(--spacing-unit) * 4);
    font-weight: 400;
    line-height: 1.5;
}

/* Chart layout: mobile first single column; side-by-side from large tablet up */
.chart-section-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 3);
    align-items: start;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}

@media (min-width: 1024px) {
    .chart-section-content {
        grid-template-columns: 1fr 3fr;
        gap: calc(var(--spacing-unit) * 4);
    }
}

/* Single full-width column when there is no left/right pair (avoids chart stuck in 1fr slot). */
.chart-section-content > .chart-section-right:only-child,
.chart-section-content > .chart-section-left:only-child {
    grid-column: 1 / -1;
}

.chart-section-left,
.chart-section-right {
    min-width: 0;
    max-width: 100%;
}

/* Bar figures live in the right column; keep them inside the article like deep-dive chart cells */
.chart-section-right:has(.ranking-bar-chart) {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

/* Ranking pages — CSS-only horizontal bars (no Chart.js) */
.ranking-bar-chart {
    margin: 0;
    padding: calc(var(--spacing-unit) * 3);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 10px;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

.ranking-bar-chart .ranking-bar-row {
    margin-bottom: calc(var(--spacing-unit) * 3);
    min-width: 0;
}

.ranking-bar-chart .ranking-bar-row:last-child {
    margin-bottom: 0;
}

.ranking-bar-chart .ranking-bar-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin-bottom: calc(var(--spacing-unit) * 1);
    font-size: 0.95rem;
    color: var(--text-primary);
    min-width: 0;
}

.ranking-bar-chart .ranking-bar-meta > span {
    flex: 1 1 10rem;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.ranking-bar-chart .ranking-bar-meta > strong {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
    font-size: 1.05rem;
    white-space: nowrap;
}

.ranking-bar-chart .ranking-bar-track {
    position: relative;
    height: 1.25rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
}

.ranking-bar-chart .ranking-bar-fill {
    display: block;
    height: 100%;
    /* Prefer inline style="width:NN%" on markup — WordPress may strip custom properties (--*) in saved HTML. */
    width: 50%;
    max-width: 100%;
    min-width: 0.25rem;
    border-radius: 6px 0 0 6px;
    background: linear-gradient(90deg, var(--color-primary, #0a1c4a), #1a3a7a);
}

.ranking-bar-chart + .chart-note,
.chart-section-right .ranking-bar-chart + p.chart-note {
    margin-top: calc(var(--spacing-unit) * 2);
}

/* School demographics share bars — tighter than ranking pages */
.demographics-share-bars {
    list-style: none;
    margin: 0;
    background: var(--surface);
}

.demographics-share-bars.ranking-bar-chart .ranking-bar-row {
    margin-bottom: calc(var(--spacing-unit) * 1.75);
}

.demographics-share-bars.ranking-bar-chart .ranking-bar-track {
    height: 0.85rem;
}

.hub-layout.ed-page-school .chart-section-content--compact .demographics-share-bars {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
}

/* School profile — top programs (full-width ranking bars) */
.top-programs-panel {
    margin: calc(var(--spacing-unit) * 4) 0 0;
    max-width: 100%;
}

.top-programs-header {
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.top-programs-header h3 {
    margin: 0 0 calc(var(--spacing-unit) * 1);
    color: var(--color-aqua-text, var(--color-primary));
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
}

.top-programs-summary {
    margin: 0;
    max-width: none;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
}

.top-programs-summary-count {
    font-size: inherit;
    font-weight: 800;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    margin-right: 0.15rem;
}

.top-programs-bars {
    list-style: none;
    margin: 0;
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.top-programs-bars .top-programs-row {
    margin-bottom: calc(var(--spacing-unit) * 1.35);
}

.top-programs-bars .top-programs-row:last-child {
    margin-bottom: 0;
}

.top-programs-bars .ranking-bar-meta {
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0.75rem 1.25rem;
    margin-bottom: 0.3rem;
    font-size: 0.92rem;
}

.top-programs-bars .ranking-bar-meta > span {
    flex: 1 1 auto;
    max-width: none;
}

.top-programs-bars .ranking-bar-meta > strong {
    flex: 0 0 auto;
}

.top-programs-bars .ranking-bar-track {
    height: 0.55rem;
}

.top-programs-label {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    min-width: 0;
}

.top-programs-rank {
    flex: 0 0 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    line-height: 1.35;
    font-size: 0.9rem;
}

.top-programs-label a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.top-programs-label a:hover,
.top-programs-label a:focus-visible {
    text-decoration: underline;
}

.top-programs-value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.top-programs-value::after {
    content: " completions";
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.top-programs-panel > .chart-note {
    margin-top: calc(var(--spacing-unit) * 1.5);
}

@media (max-width: 640px) {
    .top-programs-bars {
        padding: calc(var(--spacing-unit) * 2);
    }

    .top-programs-bars .ranking-bar-meta {
        flex-wrap: wrap;
        gap: 0.25rem 0.75rem;
    }

    .top-programs-value::after {
        display: none;
    }
}

.hub-layout.ed-page-school .top-programs-panel {
    margin-top: calc(var(--spacing-unit) * 3);
}

/* Admissions funnel — replaces sparse single-bar Chart.js acceptance viz */
.admissions-funnel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--spacing-unit) * 1.75);
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 3.5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    min-height: 0;
}

.admissions-funnel-stage {
    width: min(100%, var(--funnel-width, 100%));
    margin-inline: auto;
}

.admissions-funnel-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: 0.45rem;
}

.admissions-funnel-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-meta, var(--text-secondary));
}

.admissions-funnel-value {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.admissions-funnel-bar {
    height: 2.35rem;
    border-radius: 8px;
    background: var(--color-primary);
    box-shadow: inset 0 0 0 1px rgba(10, 28, 74, 0.06);
}

.admissions-funnel-stage--admitted .admissions-funnel-bar {
    background: #3d6b8c;
}

.admissions-funnel-stage--enrolled .admissions-funnel-bar {
    background: var(--color-aqua, #00b3c6);
}

.admissions-funnel-share {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-secondary);
    text-align: center;
}

.selectivity-meter {
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 3.5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.selectivity-meter-value {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: calc(var(--spacing-unit) * 2.5);
}

.selectivity-meter-value strong {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 900;
    color: var(--color-aqua, #00b3c6);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.selectivity-meter-value span {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.selectivity-meter-track {
    position: relative;
    height: 0.85rem;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(0, 179, 198, 0.35) 0%,
        rgba(46, 80, 116, 0.18) 45%,
        rgba(10, 28, 74, 0.08) 100%
    );
    border: 1px solid var(--border);
}

.selectivity-meter-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-aqua, #00b3c6);
    min-width: 2px;
}

.selectivity-meter-marker {
    position: absolute;
    top: 50%;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px rgba(10, 28, 74, 0.2);
    transform: translate(-50%, -50%);
}

.selectivity-meter-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 0.55rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.chart-section-right > .admissions-funnel + .chart-note,
.chart-section-right > .selectivity-meter + .chart-note,
.chart-section-right > .score-range-panel + .chart-note {
    margin-top: calc(var(--spacing-unit) * 2);
}

/* Compact score ranges — no tall Chart.js canvas */
.score-range-panel {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.score-range-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: 0.55rem;
}

.score-range-title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-meta, var(--text-secondary));
}

.score-range-span {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.score-range-track {
    position: relative;
    height: 0.9rem;
    border-radius: 999px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
}

.score-range-band {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: inherit;
    background: rgba(46, 80, 116, 0.55);
    min-width: 4px;
}

.score-range--act .score-range-band,
.score-range--gpa .score-range-band {
    background: rgba(0, 179, 198, 0.45);
}

.score-range-marker {
    position: absolute;
    top: 50%;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px rgba(10, 28, 74, 0.18);
    transform: translate(-50%, -50%);
    z-index: 1;
}

.score-range--act .score-range-marker,
.score-range--gpa .score-range-marker {
    background: var(--color-aqua, #00b3c6);
}

.score-range--point .score-range-band {
    display: none;
}

.score-range-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 0.45rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.score-range-caption {
    margin: 0.45rem 0 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

@media (max-width: 640px) {
    .score-range-panel {
        padding: calc(var(--spacing-unit) * 2.5);
    }
}

@media (max-width: 640px) {
    .top-programs-bars {
        padding: calc(var(--spacing-unit) * 2.5);
    }

    .top-programs-value::after {
        display: none;
    }

    .admissions-funnel,
    .selectivity-meter {
        padding: calc(var(--spacing-unit) * 2.5);
    }

    .admissions-funnel-bar {
        height: 1.85rem;
    }
}

.chart-container {
    position: relative;
    height: 450px;
    min-height: 450px;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 calc(var(--spacing-unit) * 3) 0;
    padding: calc(var(--spacing-unit) * 4);
    background-color: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: none;
    /* Block layout — Chart.js sets canvas pixel dimensions; flex + 100% CSS stretches the bitmap */
    display: block;
    overflow-x: auto;
    overflow-y: visible;
    box-sizing: border-box;
}

/* Special handling for doughnut/pie charts - taller container to prevent title overlap */
.chart-container:has(canvas[data-chart-type="doughnut"]),
.chart-container:has(canvas[data-chart-type="pie"]) {
    height: 750px;
    min-height: 750px;
    padding-top: calc(var(--spacing-unit) * 4);
    padding-left: calc(var(--spacing-unit) * 4);
    padding-right: calc(var(--spacing-unit) * 4);
    overflow: visible;
}

/* Chart Actions (Export buttons) - In right section below chart */
.chart-section-right .chart-actions {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
    margin-top: calc(var(--spacing-unit) * 3);
    padding: 0;
}

.btn-export {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    background-color: transparent;
    color: var(--primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body);
}

/* Full width buttons in left section */
.chart-section-left .btn-export {
    width: 100%;
    text-align: center;
}

.btn-export:hover {
    background-color: rgba(0, 179, 198, 0.08);
    border-color: var(--color-aqua);
}

/* Let Chart.js own canvas dimensions (width/height attrs × devicePixelRatio).
   Forcing width/height in CSS scales the bitmap and causes blur on Retina displays. */
.chart-container canvas {
    display: block;
    max-width: 100%;
    box-sizing: border-box;
}

.chart-container:focus-within {
    outline: 2px solid rgba(74, 152, 168, 0.45);
    outline-offset: 2px;
}

.chart-container.chart-container--tall {
    min-height: 360px;
}

.chart-container.chart-container--horizontal-bar {
    height: 420px;
    min-height: 360px;
    max-width: 100%;
    width: 100%;
}

.chart-container + .table-filter-toolbar {
    margin-top: calc(var(--spacing-unit) * 2);
}

.chart-container:has(canvas[data-chart-type="doughnut"]) canvas,
.chart-container:has(canvas[data-chart-type="pie"]) canvas {
    margin-inline: auto;
}

/* Mobile optimization for donut charts */
@media (max-width: 768px) {
    .chart-container:has(canvas[data-chart-type="doughnut"]) canvas,
    .chart-container:has(canvas[data-chart-type="pie"]) canvas {
        max-width: 100%;
    }
}

.chart-note {
    font-size: 0.875rem;
    color: var(--text-meta);
    font-style: normal;
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit) * 3);
    line-height: 1.5;
    padding: 0;
}

/* Chart Insight Block - Individual insight for each chart (Left 1/4) */
.chart-section-left {
    /* 25% width - insight block */
    position: sticky;
    top: calc(var(--spacing-unit) * 4);
    align-self: start;
}

/* Chart Container - Chart, note, and export buttons (Right 3/4) */
.chart-section-right {
    /* 75% width - chart container and note */
}

.chart-insight {
    padding: calc(var(--spacing-unit) * 4);
    background-color: var(--surface-alt);
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 1rem;
    color: var(--text-secondary);
}

.chart-insight h3 {
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit) * 2);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-aqua-text);
}

.chart-insight p {
    margin: 0;
    line-height: 1.7;
    color: var(--text-secondary);
    font-size: 1rem;
}

.chart-insight strong {
    color: var(--primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Insights & Analysis Section - For comprehensive analysis at end */
.insights-section {
    margin: calc(var(--spacing-unit) * 8) 0;
    padding: calc(var(--spacing-unit) * 5);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.insights-section h2 {
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit) * 4);
    font-size: 1.75rem;
    color: var(--text-primary);
}

.insight-block {
    margin-bottom: calc(var(--spacing-unit) * 4);
    padding-bottom: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-light);
}

.insight-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.insight-block h3 {
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit) * 3);
    font-size: 1.25rem;
    color: var(--primary);
}

.insight-block p {
    margin: 0;
    line-height: 1.7;
    color: var(--text-primary);
}

.insight-block strong {
    color: var(--primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Data Table - Spreadsheet-like, sticky headers */
.data-table-section {
    margin: calc(var(--spacing-unit) * 8) 0;
}

.table-description {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: calc(var(--spacing-unit) * 4);
    line-height: 1.6;
}

.table-controls {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 3);
    flex-wrap: wrap;
}

.table-controls input,
.table-controls select {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    background-color: var(--surface);
    font-family: var(--font-body);
    transition: border-color 0.2s ease;
}

.table-controls input:focus,
.table-controls select:focus {
    outline: none;
    border-color: var(--primary);
}

.table-controls input {
    flex: 1;
    min-width: 200px;
}

.table-wrapper {
    overflow-x: auto;
    margin: calc(var(--spacing-unit) * 3) 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--surface);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums; /* Tabular numerals for all data */
    background-color: var(--surface);
    font-size: 1rem;
}

.data-table thead {
    background: linear-gradient(180deg, #122456 0%, var(--color-primary) 100%);
    position: sticky;
    top: 0;
    z-index: 10;
}

.data-table th {
    text-align: left;
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}

.data-table td {
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-light);
    font-variant-numeric: tabular-nums;
}

/* Rankings / narrative tables: constrain width to article column; wrap long copy */
.table-responsive-wrapper .data-table,
.filterable-table.table-responsive-wrapper .data-table {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
}

.table-responsive-wrapper .data-table th,
.filterable-table.table-responsive-wrapper .data-table th {
    white-space: normal;
    vertical-align: bottom;
    hyphens: auto;
}

.table-responsive-wrapper .data-table td,
.filterable-table.table-responsive-wrapper .data-table td {
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Whitepaper breakout map: scroll horizontally instead of squishing columns */
article.report-whitepaper .table-responsive-wrapper .breakout-map-table {
    table-layout: auto;
    width: max-content;
    min-width: 42rem;
}

article.report-whitepaper .table-responsive-wrapper .breakout-map-table th,
article.report-whitepaper .table-responsive-wrapper .breakout-map-table td {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

article.report-whitepaper .table-responsive-wrapper .breakout-map-table th:first-child,
article.report-whitepaper .table-responsive-wrapper .breakout-map-table td:first-child {
    white-space: normal;
    min-width: 11rem;
    max-width: 14rem;
}

/* Prefer slightly wider narrative column on wide viewports */
@media (min-width: 900px) {
    .table-responsive-wrapper .data-table th:last-child,
    .table-responsive-wrapper .data-table td:last-child {
        width: 32%;
    }
}

.data-table tbody tr:hover {
    background-color: var(--background);
}

.data-table tbody tr:nth-child(even) {
    background-color: rgba(238, 242, 248, 0.7);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.table-note {
    font-size: 1rem;
    color: var(--text-meta);
    margin-top: calc(var(--spacing-unit) * 3);
    line-height: 1.5;
}

/* Methodology Section */
.methodology {
    margin: calc(var(--spacing-unit) * 6) 0;
    padding: calc(var(--spacing-unit) * 5);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.methodology h2 {
    margin-top: 0;
}

.methodology h3 {
    margin-top: calc(var(--spacing-unit) * 4);
    font-size: 1.25rem;
}

.methodology ul {
    margin-left: calc(var(--spacing-unit) * 4);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.methodology li {
    margin-bottom: calc(var(--spacing-unit) * 2);
    line-height: 1.6;
}

.methodology a {
    color: var(--primary);
    text-decoration: none;
}

.methodology a:hover {
    text-decoration: underline;
}

/* FAQ Section (legacy static cards with h3/p) */
.faq-section {
    margin: calc(var(--spacing-unit) * 6) 0;
    padding: calc(var(--spacing-unit) * 5);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.faq-section h2 {
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit) * 4);
    font-size: 1.75rem;
    color: var(--text-primary);
}

.faq-section .faq-item:not(details) {
    margin-bottom: calc(var(--spacing-unit) * 4);
    padding-bottom: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-light);
}

.faq-section .faq-item:not(details):last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.faq-section .faq-item h3 {
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit) * 2);
    font-size: 1.25rem;
    color: var(--primary);
    font-weight: 600;
}

.faq-section .faq-item p {
    margin: 0;
    line-height: 1.7;
    color: var(--text-primary);
    font-size: 1rem;
}

.faq-section .faq-item strong {
    color: var(--primary);
    font-weight: 600;
}

/* FAQ accordion (details/summary) — school profiles, data pages, design system */
section.faq,
.faq {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
    margin: calc(var(--spacing-unit) * 6) 0;
    max-width: 100%;
}

section.faq > h2,
.faq > h2 {
    margin: 0 0 calc(var(--spacing-unit) * 1.5);
    color: var(--color-primary);
    font-size: 1.5rem;
    line-height: 1.25;
}

section.faq .faq-subheading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: calc(var(--spacing-unit) * 3) 0 calc(var(--spacing-unit) * 1);
    font-family: var(--font-heading, Montserrat, "Montserrat", sans-serif);
}

section.faq .faq-subheading:first-of-type {
    margin-top: calc(var(--spacing-unit) * 0.5);
}

section.faq details,
.faq details,
details.faq-item {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background-color: var(--surface);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

section.faq details[open],
.faq details[open],
details.faq-item[open] {
    border-color: #c5d0e0;
    box-shadow: 0 1px 0 rgba(10, 28, 74, 0.04);
}

section.faq details summary,
.faq details summary,
details.faq-item > summary {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing-unit) * 2);
    cursor: pointer;
    list-style: none;
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 5.5) calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    font-family: var(--font-heading, Montserrat, "Montserrat", sans-serif);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-primary);
    background: var(--surface);
    transition: background-color 0.15s ease;
}

section.faq details summary:hover,
.faq details summary:hover,
details.faq-item > summary:hover {
    background: var(--surface-alt);
}

section.faq details[open] > summary,
.faq details[open] > summary,
details.faq-item[open] > summary {
    background: var(--surface-alt);
}

section.faq details summary::-webkit-details-marker,
.faq details summary::-webkit-details-marker,
details.faq-item > summary::-webkit-details-marker {
    display: none;
}

section.faq details summary::after,
.faq details summary::after,
details.faq-item > summary::after {
    content: "";
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    width: 0.55rem;
    height: 0.55rem;
    flex: 0 0 auto;
    border-right: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    transform: rotate(45deg);
    transition: transform 0.18s ease, border-color 0.15s ease;
}

section.faq details[open] > summary::after,
.faq details[open] > summary::after,
details.faq-item[open] > summary::after {
    top: 1.35rem;
    transform: rotate(225deg);
    border-color: var(--color-primary);
}

section.faq .faq-question,
.faq .faq-question,
details.faq-item .faq-question,
summary.faq-question {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
}

section.faq .faq-answer,
.faq .faq-answer,
details.faq-item .faq-answer {
    padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 3.25);
    border-top: 1px solid var(--border-light, #e8ecf2);
    background: var(--surface);
}

section.faq .faq-answer p,
.faq .faq-answer p,
details.faq-item .faq-answer p {
    margin: 0;
    max-width: 42rem;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

section.faq .faq-answer p + p,
.faq .faq-answer p + p,
details.faq-item .faq-answer p + p {
    margin-top: 0.75rem;
}

section.faq .faq-answer a,
.faq .faq-answer a,
details.faq-item .faq-answer a {
    color: var(--color-primary);
    font-weight: 600;
}

@media (max-width: 640px) {
    section.faq details summary,
    .faq details summary,
    details.faq-item > summary {
        padding: calc(var(--spacing-unit) * 2.25) calc(var(--spacing-unit) * 5) calc(var(--spacing-unit) * 2.25) calc(var(--spacing-unit) * 2.5);
        font-size: 0.98rem;
    }

    section.faq .faq-answer,
    .faq .faq-answer,
    details.faq-item .faq-answer {
        padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 2.75);
    }
}

/* Table of Contents - Horizontal Scrolling Ticker */
nav.page-toc,
.page-toc {
    display: block;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: calc(var(--spacing-unit) * 2.5) 0 calc(var(--spacing-unit) * 2);
    margin: calc(var(--spacing-unit) * 6) 0;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Pages with a fixed site header (WordPress / full layout) */
body:has(> header) .page-toc {
    top: 80px;
}

/* Anchor targets sit below sticky header + TOC when jumping via hash links */
article:has(.page-toc) section[id],
article:has(.page-toc) details[id] {
    scroll-margin-top: calc(var(--page-toc-offset, 5.5rem) + 0.75rem);
}

body:has(> header) article:has(.page-toc) section[id],
body:has(> header) article:has(.page-toc) details[id] {
    scroll-margin-top: calc(80px + var(--page-toc-offset, 5.5rem) + 0.75rem);
}

article.report-whitepaper section[id] {
    scroll-margin-top: calc(var(--page-toc-offset, 5.5rem) + 0.75rem);
}

body:has(> header) article.report-whitepaper section[id] {
    scroll-margin-top: calc(80px + var(--page-toc-offset, 5.5rem) + 0.75rem);
}

.page-toc-head {
    padding: 0 calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 1.5);
}

.page-toc-label {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-meta);
    line-height: 1.4;
}

.page-toc-scroll {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: calc(var(--spacing-unit) * 2);
    padding: 0 calc(var(--spacing-unit) * 4);
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    -webkit-overflow-scrolling: touch;
}

/* Spacing between TOC pills if flex `gap` is stripped (e.g. aggressive CSS optimization) */
.page-toc-scroll > a:not(:last-child) {
    margin-inline-end: 0.5rem;
}

.page-toc-scroll::-webkit-scrollbar {
    height: 6px;
}

.page-toc-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.page-toc-scroll::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: 3px;
}

.page-toc-scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-secondary);
}

.page-toc a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    display: inline-block;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border-radius: 6px;
    transition: color 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.page-toc a:hover {
    color: var(--color-primary);
    background-color: var(--color-aqua-soft);
}

.page-toc a.active {
    color: #FFFFFF !important;
    font-weight: 600;
    background: linear-gradient(135deg, var(--color-primary) 0%, #152A52 100%);
    border-color: transparent;
}

@keyframes underlineExpand {
    from {
        width: 0;
    }
    to {
        width: calc(100% - 48px);
    }
}

/* Sources Section - Collapsible */
.sources {
    margin: calc(var(--spacing-unit) * 6) 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--surface);
    padding: calc(var(--spacing-unit) * 4);
}

.sources summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
    outline: none;
}

.sources summary::-webkit-details-marker {
    display: none;
}

.sources summary::marker {
    display: none;
}

.sources summary::before {
    content: '▶';
    display: inline-block;
    margin-right: calc(var(--spacing-unit) * 2);
    color: var(--primary);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
    vertical-align: middle;
}

.sources[open] summary::before {
    transform: rotate(90deg);
}

.sources summary h2 {
    display: inline-block;
    margin: 0;
    font-size: 1.5rem;
    font-family: var(--font-heading);
    color: var(--text-primary);
    vertical-align: middle;
}

.sources summary:hover h2 {
    color: var(--primary);
}

.sources-content {
    margin-top: calc(var(--spacing-unit) * 4);
    padding-top: calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-light);
}

.sources ul {
    list-style: none;
    padding-left: 0;
}

.sources li {
    margin-bottom: calc(var(--spacing-unit) * 3);
    padding-left: calc(var(--spacing-unit) * 4);
    position: relative;
    line-height: 1.6;
}

.sources li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: bold;
}

.sources strong {
    display: block;
    margin-bottom: calc(var(--spacing-unit) * 1);
    color: var(--text-primary);
    font-weight: 600;
}

/* Related Pages */
.related-pages {
    margin: calc(var(--spacing-unit) * 6) 0;
    padding: calc(var(--spacing-unit) * 4);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.related-pages h2 {
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.related-pages ul {
    list-style: none;
    padding-left: 0;
}

.related-pages li {
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.related-pages a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.related-pages a:hover {
    text-decoration: underline;
}

/* Download CTA */
.download-cta {
    margin: calc(var(--spacing-unit) * 6) 0;
    padding: calc(var(--spacing-unit) * 5);
    background: linear-gradient(135deg, var(--color-aqua-soft) 0%, #FFFFFF 100%);
    border: 1px solid var(--border-accent);
    border-radius: 12px;
    text-align: center;
}

.download-cta h2 {
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.btn-download {
    display: inline-block;
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 6);
    background-color: var(--primary);
    color: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    margin: calc(var(--spacing-unit) * 2) 0;
    transition: background-color 0.2s ease;
    font-family: var(--font-body);
}

.btn-download:hover,
.btn-download:focus-visible {
    background-color: var(--primary-hover);
    color: #ffffff !important;
    text-decoration: none;
}

/* Beat global article/link styles (e.g. WP theme link color on dark CTA buttons). */
article .download-cta a.btn-download,
.entry-content .download-cta a.btn-download,
.wp-block-html .download-cta a.btn-download {
    color: #ffffff !important;
    text-decoration: none;
}

article .download-cta a.btn-download:hover,
article .download-cta a.btn-download:focus-visible,
.entry-content .download-cta a.btn-download:hover,
.entry-content .download-cta a.btn-download:focus-visible,
.wp-block-html .download-cta a.btn-download:hover,
.wp-block-html .download-cta a.btn-download:focus-visible {
    color: #ffffff !important;
    text-decoration: none;
}

.download-note {
    font-size: 1rem;
    color: var(--text-meta);
    margin-top: calc(var(--spacing-unit) * 3);
}

/* Responsive */
@media (max-width: 1024px) {
    .chart-section-left {
        position: static;
    }
}

@media (max-width: 768px) {
    .page-toc {
        margin: calc(var(--spacing-unit) * 4) 0;
        padding: calc(var(--spacing-unit) * 2) 0;
    }

    .page-toc-head {
        padding: 0 calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 1);
    }

    .page-toc-scroll {
        padding: 0 calc(var(--spacing-unit) * 3);
    }

    .page-toc a {
        font-size: 0.9375rem;
        padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    }

    article.report-whitepaper {
        padding: calc(var(--spacing-unit) * 3);
    }

    article.report-whitepaper .editorial-figure img {
        border-radius: 6px;
    }
}

@media (max-width: 768px) {
    .chart-container {
        height: 350px;
        min-height: 350px;
        padding: calc(var(--spacing-unit) * 3);
    }
    
    .chart-container:has(canvas[data-chart-type="doughnut"]),
    .chart-container:has(canvas[data-chart-type="pie"]) {
        height: 600px;
        min-height: 600px;
        padding-top: calc(var(--spacing-unit) * 4);
    }
    
    .chart-container:has(canvas[data-chart-type="doughnut"]) canvas,
    .chart-container:has(canvas[data-chart-type="pie"]) canvas {
        max-width: 100%;
    }
    
    .chart-section h2 {
        font-size: 1.25rem;
    }
    
    .chart-section-right .chart-actions {
        flex-direction: row;
    }
    
    .chart-section-right .btn-export {
        width: auto;
        flex: 1;
    }
    
    .table-controls {
        flex-direction: column;
    }
    
    .table-controls input {
        width: 100%;
    }
    
    .data-table {
        font-size: 0.85rem;
    }
    
    .data-table th,
    .data-table td {
        padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2);
    }
}

/* Stats Grid for Degree Profiles */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.stat-item {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(10, 28, 74, 0.04);
    padding: calc(var(--spacing-unit) * 4);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.stat-value {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.stat-change {
    font-size: 0.85rem;
    color: var(--color-aqua-text);
    font-weight: 600;
    font-style: normal;
}

.stat-change:empty {
    display: none;
}

.degree-level-list {
    margin: 0 0 1rem 1.25rem;
    line-height: 1.6;
}

.degree-level-list li {
    margin-bottom: 0.35rem;
}

@media (max-width: 768px) {
    .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}
    
    .stat-value {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
}

/* Ranking Tables for Degree Profiles — mobile first: one column, then auto-fit */
.ranking-tables {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 4);
    margin: calc(var(--spacing-unit) * 6) 0;
    max-width: 100%;
    min-width: 0;
}

@media (min-width: 640px) {
    .ranking-tables {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
        gap: calc(var(--spacing-unit) * 6);
    }
}

.ranking-table-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: calc(var(--spacing-unit) * 4);
}

.ranking-table-section h3 {
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit) * 3);
    font-size: 1.25rem;
    color: var(--text-primary);
    font-weight: 600;
}

.ranking-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Wide benchmark tables (hub + data pages): scroll inside article, never overflow layout */
.ranking-table-container {
    max-width: 100%;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    margin: calc(var(--spacing-unit) * 3) 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--surface);
}

.ranking-table-container.filterable-table {
    /* table-filter.js may inject controls; keep scroll on the block that wraps the table */
    display: block;
}

.ranking-table-container .ranking-table th,
.ranking-table-container .ranking-table td {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2);
}

.ranking-table-container .ranking-table {
    width: max-content;
    min-width: 100%;
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    min-width: 100%;
}

.ranking-table thead {
    background-color: var(--surface-alt);
    border-bottom: 2px solid var(--border);
}

.ranking-table th {
    text-align: left;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
}

.ranking-table td {
    padding: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-light);
    vertical-align: top;
}

.ranking-table tbody tr:hover {
    background-color: var(--background);
}

.ranking-table tbody tr:last-child td {
    border-bottom: none;
}

.ranking-table .rank {
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    width: 40px;
}

.ranking-table .school-name {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 200px;
}

.ranking-table .school-state {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.ranking-table .value {
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    white-space: nowrap;
}

.ranking-table .value-currency::before {
    content: '$';
}

/* Table Filtering + sortable headers */
.table-filter-toolbar {
    margin-bottom: calc(var(--spacing-unit) * 3);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
    max-width: 100%;
    min-width: 0;
}

.table-filter-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: calc(var(--spacing-unit) * 2);
    max-width: 100%;
    min-width: 0;
}

.table-filter-search-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    max-width: 100%;
    min-width: 0;
}

.table-filter-search-row .table-filter-input {
    flex: 1 1 12rem;
    min-width: 0;
}

.ranking-table thead th.table-col-sortable,
.data-table thead th.table-col-sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: calc(var(--spacing-unit) * 4);
}

.ranking-table thead th.table-col-sortable:hover,
.data-table thead th.table-col-sortable:hover {
    color: var(--color-primary);
}

.ranking-table thead th.table-col-sortable--asc::after,
.data-table thead th.table-col-sortable--asc::after {
    content: ' \2191';
    font-weight: 700;
    opacity: 0.85;
}

.ranking-table thead th.table-col-sortable--desc::after,
.data-table thead th.table-col-sortable--desc::after {
    content: ' \2193';
    font-weight: 700;
    opacity: 0.85;
}

.table-filter-container {
    margin-bottom: calc(var(--spacing-unit) * 3);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    flex-wrap: wrap;
}

.table-filter-input {
    flex: 1;
    min-width: 200px;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
    font-family: 'Open Sans', sans-serif;
    color: var(--text-primary);
    background-color: var(--surface);
}

.table-filter-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(10, 28, 74, 0.1);
}

.table-preset-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.table-filter-select {
    min-width: 12rem;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
    font-family: 'Open Sans', sans-serif;
    color: var(--text-primary);
    background-color: var(--surface);
}

.table-filter-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(10, 28, 74, 0.1);
}

.table-filter-count {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    display: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Analysis & insights — before Sources on Data / deep-dive pages */
.analysis-insights {
    margin-top: calc(var(--spacing-unit) * 8);
    margin-left: auto;
    margin-right: auto;
    padding-top: calc(var(--spacing-unit) * 5);
    border-top: 1px solid var(--border);
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

.analysis-insights h2 {
    font-size: 1.35rem;
    color: var(--color-primary);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.analysis-insights-text {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.analysis-insights-text:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .ranking-table-section {
        padding: calc(var(--spacing-unit) * 3);
    }
    
    .ranking-table {
        font-size: 0.875rem;
    }
    
    .ranking-table th,
    .ranking-table td {
        padding: calc(var(--spacing-unit) * 2);
    }
    
    .ranking-table .school-name {
        min-width: 0;
    }
    
    .table-filter-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .table-filter-input,
    .table-filter-select {
        width: 100%;
        min-width: 0;
    }
    
    /* Card-style rows: benchmark / geo tables only (school lists use school-data cards below) */
    .ranking-table-container,
    .ranking-table-wrapper:not(:has(td.school-name)) {
        display: block;
    }

    .ranking-table-container .ranking-table,
    .ranking-table-container .ranking-table thead,
    .ranking-table-container .ranking-table tbody,
    .ranking-table-container .ranking-table th,
    .ranking-table-container .ranking-table td,
    .ranking-table-container .ranking-table tr,
    .ranking-table-wrapper:not(:has(td.school-name)) .ranking-table,
    .ranking-table-wrapper:not(:has(td.school-name)) .ranking-table thead,
    .ranking-table-wrapper:not(:has(td.school-name)) .ranking-table tbody,
    .ranking-table-wrapper:not(:has(td.school-name)) .ranking-table th,
    .ranking-table-wrapper:not(:has(td.school-name)) .ranking-table td,
    .ranking-table-wrapper:not(:has(td.school-name)) .ranking-table tr {
        display: block;
    }

    .ranking-table-container .ranking-table thead,
    .ranking-table-wrapper:not(:has(td.school-name)) .ranking-table thead {
        display: none;
    }

    .ranking-table-container .ranking-table tr,
    .ranking-table-wrapper:not(:has(td.school-name)) .ranking-table tr {
        border: 1px solid var(--border);
        border-radius: 8px;
        margin-bottom: calc(var(--spacing-unit) * 2);
        padding: calc(var(--spacing-unit) * 2);
        background: var(--surface);
    }

    .ranking-table-container .ranking-table td,
    .ranking-table-container .ranking-table tbody th,
    .ranking-table-wrapper:not(:has(td.school-name)) .ranking-table td,
    .ranking-table-wrapper:not(:has(td.school-name)) .ranking-table tbody th {
        border: none;
        padding: calc(var(--spacing-unit) * 1) 0;
        text-align: left !important;
        position: relative;
        padding-left: 40%;
    }

    .ranking-table-container .ranking-table td::before,
    .ranking-table-container .ranking-table tbody th::before,
    .ranking-table-wrapper:not(:has(td.school-name)) .ranking-table td::before,
    .ranking-table-wrapper:not(:has(td.school-name)) .ranking-table tbody th::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 35%;
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 0.85rem;
        text-transform: uppercase;
    }

    .ranking-table-container .ranking-table tbody th::before,
    .ranking-table-wrapper:not(:has(td.school-name)) .ranking-table tbody th::before {
        text-align: left;
    }

    .ranking-table-container .ranking-table .rank,
    .ranking-table-wrapper:not(:has(td.school-name)) .ranking-table .rank {
        width: auto;
    }
}

/* -----------------------------------------------------------------------------
   Ranking detail pages — school cards (mockup-inspired).
   Table kept for a11y / filter / sort; thead hidden; data-label + enrichment
   from edsmart-table-filter-v3.js.
   Seven cols: Rank | School | State | Control | Enrollment | Metric | Also see
   ----------------------------------------------------------------------------- */
body.single-ed_ranking .table-responsive-wrapper.filterable-table,
body.post-type-ed_ranking.single .table-responsive-wrapper.filterable-table,
.ed-page-ranking .table-responsive-wrapper.filterable-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: visible;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior-x: contain;
}

body.single-ed_ranking .table-responsive-wrapper.filterable-table table.data-table,
body.post-type-ed_ranking.single .table-responsive-wrapper.filterable-table table.data-table,
.ed-page-ranking .table-responsive-wrapper.filterable-table table.data-table {
    table-layout: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table thead,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table thead,
.ed-page-ranking .table-responsive-wrapper table.data-table thead {
    display: none;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table tbody,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody,
.ed-page-ranking .table-responsive-wrapper table.data-table tbody {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

@media (min-width: 900px) {
    body.single-ed_ranking .table-responsive-wrapper table.data-table tbody,
    body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody,
    .ed-page-ranking .table-responsive-wrapper table.data-table tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: calc(var(--spacing-unit) * 3);
        align-items: stretch;
    }
}

body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr,
.ed-page-ranking .table-responsive-wrapper table.data-table tbody tr {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0;
    row-gap: calc(var(--spacing-unit) * 2.25);
    margin: 0;
    padding: calc(var(--spacing-unit) * 3.5) calc(var(--spacing-unit) * 3.5) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(10, 28, 74, 0.04), 0 10px 28px rgba(10, 28, 74, 0.07);
    box-sizing: border-box;
    min-width: 0;
    overflow: visible;
    container-type: inline-size;
    container-name: ranking-card;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:hover,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:hover,
.ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:hover {
    border-color: color-mix(in srgb, var(--color-aqua) 35%, var(--border));
    box-shadow: 0 2px 6px rgba(10, 28, 74, 0.06), 0 14px 32px rgba(10, 28, 74, 0.09);
}

@media (min-width: 900px) {
    body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr,
    body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr,
    .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr {
        min-height: 100%;
    }
}

body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:nth-child(even),
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:nth-child(even),
.ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:nth-child(even) {
    background: var(--surface);
}

body.single-ed_ranking .table-responsive-wrapper table.data-table td,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table td,
.ed-page-ranking .table-responsive-wrapper table.data-table td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.2rem;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left !important;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.35;
    width: auto;
    max-width: 100%;
    min-width: 0;
    vertical-align: top;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
    color: var(--color-primary);
    font-weight: 700;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table td[data-label]::before,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table td[data-label]::before,
.ed-page-ranking .table-responsive-wrapper table.data-table td[data-label]::before {
    content: attr(data-label);
    position: static;
    display: block;
    width: auto;
    max-width: 100%;
    font-weight: 600;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-meta);
    line-height: 1.3;
}

/* Rank ribbon */
body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(1),
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(1),
.ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(1) {
    position: absolute;
    top: -3px;
    left: calc(var(--spacing-unit) * 3.5);
    z-index: 2;
    grid-column: auto;
    grid-row: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    min-height: 3.15rem;
    padding: 0.45rem 0 0.85rem;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading, "Montserrat", system-ui, sans-serif);
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    border-radius: 0 0 3px 3px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 50% 100%, 0 calc(100% - 10px));
    box-shadow: 0 4px 10px rgba(10, 28, 74, 0.22);
    pointer-events: none;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(1)::before,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(1)::before,
.ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(1)::before {
    content: none;
    display: none;
}

/* School name */
body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(2),
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(2),
.ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 0.15rem 0 calc(var(--spacing-unit) * 2.25) calc(var(--spacing-unit) * 6.5);
    font-family: var(--font-heading, "Montserrat", system-ui, sans-serif);
    font-size: clamp(1.05rem, 2.8vw, 1.22rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary);
    border-bottom: 1px solid var(--border-light);
}

body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(2)::after,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(2)::after,
.ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(2)::after {
    content: "";
    display: block;
    width: 2.75rem;
    height: 3px;
    margin-top: 0.45rem;
    background: var(--color-aqua);
    border-radius: 2px;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(2) a,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(2) a,
.ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(2) a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 700;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(2) a:hover,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(2) a:hover,
.ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(2) a:hover {
    color: var(--color-link);
    text-decoration: underline;
}

/* Whole-card hit target → school profile */
body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr.school-card-is-link,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr.school-card-is-link,
.ed-page-ranking .table-responsive-wrapper table.data-table tbody tr.school-card-is-link {
    cursor: pointer;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table .school-card-profile-link,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table .school-card-profile-link,
.ed-page-ranking .table-responsive-wrapper table.data-table .school-card-profile-link {
    position: static;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table .school-card-profile-link::after,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table .school-card-profile-link::after,
.ed-page-ranking .table-responsive-wrapper table.data-table .school-card-profile-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 16px;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(2)::before,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(2)::before,
.ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(2)::before {
    content: none;
    display: none;
}

/* Meta strip: Location full width, then Control | Enrollment */
body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(3),
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(3),
.ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0.1rem 0 0.35rem;
    white-space: normal;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(4),
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(4),
.ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(4) {
    grid-column: 1 / 2;
    grid-row: 3;
    padding: 0.35rem calc(var(--spacing-unit) * 2) 0.15rem 0;
    border-left: none;
    border-top: 1px solid var(--border-light);
}

body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(5),
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(5),
.ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(5) {
    grid-column: 2 / -1;
    grid-row: 3;
    padding: 0.35rem 0 0.15rem calc(var(--spacing-unit) * 2);
    border-left: 1px solid var(--border-light);
    border-top: 1px solid var(--border-light);
}

/* Primary metric band */
body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6),
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6),
.ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6) {
    grid-column: 1 / -1;
    grid-row: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem 1rem;
    align-items: center;
    padding: calc(var(--spacing-unit) * 2.25) calc(var(--spacing-unit) * 2.75);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-aqua-soft) 0%, color-mix(in srgb, var(--color-aqua-soft) 70%, #fff) 100%);
    border: 1px solid color-mix(in srgb, var(--color-aqua) 22%, var(--border));
    box-sizing: border-box;
    color: var(--color-primary);
    font-weight: 800;
    line-height: 1.15;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6)::before,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6)::before,
.ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6)::before {
    grid-column: 1;
    grid-row: 1;
    color: var(--color-link);
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.07em;
    margin: 0;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table .ranking-metric-value,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table .ranking-metric-value,
.ed-page-ranking .table-responsive-wrapper table.data-table .ranking-metric-value {
    grid-column: 1;
    grid-row: 2;
    font-family: var(--font-heading, "Montserrat", system-ui, sans-serif);
    font-size: clamp(1.35rem, 4vw, 1.7rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
    line-height: 1.1;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table .ranking-metric-note,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table .ranking-metric-note,
.ed-page-ranking .table-responsive-wrapper table.data-table .ranking-metric-note {
    grid-column: 1;
    grid-row: 3;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-secondary);
}

@media (min-width: 520px) {
    body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6):has(.ranking-metric-note),
    body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6):has(.ranking-metric-note),
    .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6):has(.ranking-metric-note) {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    }

    body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6):has(.ranking-metric-note)::before,
    body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6):has(.ranking-metric-note)::before,
    .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6):has(.ranking-metric-note)::before {
        grid-column: 1;
        grid-row: 1;
    }

    body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6):has(.ranking-metric-note) .ranking-metric-value,
    body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6):has(.ranking-metric-note) .ranking-metric-value,
    .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6):has(.ranking-metric-note) .ranking-metric-value {
        grid-column: 1;
        grid-row: 2;
    }

    body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6):has(.ranking-metric-note) .ranking-metric-note,
    body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6):has(.ranking-metric-note) .ranking-metric-note,
    .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6):has(.ranking-metric-note) .ranking-metric-note {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
        margin-top: 0;
        padding-left: calc(var(--spacing-unit) * 2.5);
        border-left: 1px solid color-mix(in srgb, var(--color-aqua) 28%, var(--border));
    }
}

/* Prefer card width over viewport for dense 3-up grids */
@container ranking-card (max-width: 460px) {
    body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6):has(.ranking-metric-note),
    body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6):has(.ranking-metric-note),
    .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6):has(.ranking-metric-note) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6):has(.ranking-metric-note) .ranking-metric-note,
    body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6):has(.ranking-metric-note) .ranking-metric-note,
    .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6):has(.ranking-metric-note) .ranking-metric-note {
        grid-column: 1 !important;
        grid-row: 3 !important;
        padding-left: 0 !important;
        border-left: none !important;
        margin-top: 0.2rem;
        align-self: start !important;
    }

    body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:last-child,
    body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:last-child,
    .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:last-child {
        grid-template-columns: 1fr;
    }
}

/* Also see footer */
body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:last-child,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:last-child,
.ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:last-child {
    grid-column: 1 / -1;
    grid-row: 5;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem 0.85rem;
    margin-top: 0;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    border: none;
    border-radius: 12px;
    background: var(--surface-alt);
    color: var(--text-secondary);
    font-weight: 500;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:last-child::before,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:last-child::before,
.ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:last-child::before {
    grid-column: 1 / -1;
    margin: 0 0 0.1rem;
    color: var(--text-meta);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table .ranking-also-item,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table .ranking-also-item,
.ed-page-ranking .table-responsive-wrapper table.data-table .ranking-also-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0;
    border: none;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table .ranking-also-item + .ranking-also-item,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table .ranking-also-item + .ranking-also-item,
.ed-page-ranking .table-responsive-wrapper table.data-table .ranking-also-item + .ranking-also-item {
    padding-left: 0;
    padding-top: 0;
    border-left: none;
    border-top: none;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table .ranking-also-item--wide,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table .ranking-also-item--wide,
.ed-page-ranking .table-responsive-wrapper table.data-table .ranking-also-item--wide {
    grid-column: 1 / -1;
    padding-bottom: 0.15rem;
    margin-bottom: 0.1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.35;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table .ranking-also-label,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table .ranking-also-label,
.ed-page-ranking .table-responsive-wrapper table.data-table .ranking-also-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-meta);
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table .ranking-also-value,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table .ranking-also-value,
.ed-page-ranking .table-responsive-wrapper table.data-table .ranking-also-value {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

/* Narrow phones: stack control + enrollment */
@media (max-width: 420px) {
    body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)),
    body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)),
    .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2.75) calc(var(--spacing-unit) * 2.75);
        row-gap: calc(var(--spacing-unit) * 2);
    }

    body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(1),
    body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(1),
    .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(1) {
        left: calc(var(--spacing-unit) * 2.75);
        width: 2.35rem;
        min-height: 2.85rem;
        font-size: 1.2rem;
    }

    body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(2),
    body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(2),
    .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(2) {
        padding-left: calc(var(--spacing-unit) * 5.5);
    }

    body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(4),
    body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(5),
    body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(4),
    body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(5),
    .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(4),
    .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(5) {
        grid-column: 1 / -1;
        border-left: none;
        padding-left: 0;
        padding-right: 0;
    }

    body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(4),
    body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(4),
    .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(4) {
        grid-row: 3;
    }

    body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(5),
    body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(5),
    .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(5) {
        grid-row: 4;
        padding-top: 0.45rem;
    }

    body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6),
    body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6),
    .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6) {
        grid-row: 5;
    }

    body.single-ed_ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:last-child,
    body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:last-child,
    .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:last-child {
        grid-row: 6;
        grid-template-columns: 1fr;
    }
}

body.single-ed_ranking .table-responsive-wrapper table.data-table tr.no-results-row,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tr.no-results-row,
.ed-page-ranking .table-responsive-wrapper table.data-table tr.no-results-row {
    display: block;
    grid-column: 1 / -1;
    box-shadow: none;
    overflow: hidden;
}

body.single-ed_ranking .table-responsive-wrapper table.data-table tr.no-results-row td,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tr.no-results-row td,
.ed-page-ranking .table-responsive-wrapper table.data-table tr.no-results-row td {
    padding: calc(var(--spacing-unit) * 2);
    text-align: center !important;
    align-items: center;
    font-weight: 500;
    color: var(--text-secondary);
}

body.single-ed_ranking .table-responsive-wrapper table.data-table tr.no-results-row td::before,
body.post-type-ed_ranking.single .table-responsive-wrapper table.data-table tr.no-results-row td::before,
.ed-page-ranking .table-responsive-wrapper table.data-table tr.no-results-row td::before {
    content: none;
    display: none;
}

body.single-ed_ranking .table-filter-toolbar,
body.post-type-ed_ranking.single .table-filter-toolbar,
.ed-page-ranking .table-filter-toolbar {
    margin-bottom: calc(var(--spacing-unit) * 3);
}

@media (max-width: 768px) {
    body.single-ed_ranking .table-filter-input,
    body.single-ed_ranking .table-filter-select,
    body.post-type-ed_ranking.single .table-filter-input,
    body.post-type-ed_ranking.single .table-filter-select,
    .ed-page-ranking .table-filter-input,
    .ed-page-ranking .table-filter-select {
        min-height: 44px;
        font-size: 1rem;
    }
}

/* -----------------------------------------------------------------------------
   School list cards — degree / major ranking-tables
   Four cols: # | School/Institution | State | Metric (Completions, Enrollment, …)
   Marked by td.school-name so geo benchmarks & compare tables stay tabular.
   ----------------------------------------------------------------------------- */
.ranking-table-wrapper.filterable-table:has(td.school-name) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: visible;
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) {
    table-layout: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) thead {
    display: none;
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) tbody {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

@media (min-width: 900px) {
    .ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: calc(var(--spacing-unit) * 3.5);
        align-items: stretch;
    }
}

@media (min-width: 1280px) {
    .ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) tbody {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) tbody tr {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(var(--spacing-unit) * 2.25);
    margin: 0;
    padding: calc(var(--spacing-unit) * 3.5) calc(var(--spacing-unit) * 3.5) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(10, 28, 74, 0.04), 0 10px 28px rgba(10, 28, 74, 0.07);
    box-sizing: border-box;
    min-width: 0;
    overflow: visible;
    container-type: inline-size;
    container-name: school-data-card;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) tbody tr:hover {
    border-color: color-mix(in srgb, var(--color-aqua) 35%, var(--border));
    box-shadow: 0 2px 6px rgba(10, 28, 74, 0.06), 0 14px 32px rgba(10, 28, 74, 0.09);
}

@media (min-width: 900px) {
    .ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) tbody tr {
        min-height: 100%;
    }
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) tbody tr:nth-child(even) {
    background: var(--surface);
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.2rem;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left !important;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.35;
    width: auto;
    max-width: 100%;
    min-width: 0;
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: var(--color-primary);
    font-weight: 700;
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td[data-label]::before {
    content: attr(data-label);
    position: static;
    display: block;
    width: auto;
    max-width: 100%;
    font-weight: 600;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-meta);
    line-height: 1.3;
}

/* Rank ribbon */
.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td.rank {
    position: absolute;
    top: -3px;
    left: calc(var(--spacing-unit) * 3.5);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    min-height: 3.15rem;
    padding: 0.45rem 0 0.85rem;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading, "Montserrat", system-ui, sans-serif);
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    border-radius: 0 0 3px 3px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 50% 100%, 0 calc(100% - 10px));
    box-shadow: 0 4px 10px rgba(10, 28, 74, 0.22);
    pointer-events: none;
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td.rank::before {
    content: none;
    display: none;
}

/* School name */
.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td.school-name {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 0.15rem 0 calc(var(--spacing-unit) * 2.25) calc(var(--spacing-unit) * 6.5);
    font-family: var(--font-heading, "Montserrat", system-ui, sans-serif);
    font-size: clamp(1.05rem, 2.8vw, 1.22rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary);
    border-bottom: 1px solid var(--border-light);
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td.school-name::after {
    content: "";
    display: block;
    width: 2.75rem;
    height: 3px;
    margin-top: 0.45rem;
    background: var(--color-aqua);
    border-radius: 2px;
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td.school-name a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 700;
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td.school-name a:hover {
    color: var(--color-link);
    text-decoration: underline;
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) tbody tr.school-card-is-link {
    cursor: pointer;
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) .school-card-profile-link {
    position: static;
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) .school-card-profile-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 16px;
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td.school-name::before {
    content: none;
    display: none;
}

/* State meta */
.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td.school-state {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0.15rem 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--color-primary);
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td.school-state::before {
    margin-bottom: 0.1rem;
}

/* Primary metric band */
.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td.value {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: flex-start;
    padding: calc(var(--spacing-unit) * 2.25) calc(var(--spacing-unit) * 2.75);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-aqua-soft) 0%, color-mix(in srgb, var(--color-aqua-soft) 70%, #fff) 100%);
    border: 1px solid color-mix(in srgb, var(--color-aqua) 22%, var(--border));
    box-sizing: border-box;
    color: var(--color-primary);
    font-weight: 800;
    line-height: 1.15;
    text-align: left !important;
    white-space: normal;
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td.value::before {
    color: var(--color-link);
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.07em;
    margin: 0;
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) .ranking-metric-value {
    font-family: var(--font-heading, "Montserrat", system-ui, sans-serif);
    font-size: clamp(1.35rem, 4vw, 1.7rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
    line-height: 1.1;
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) tr.no-results-row {
    display: block;
    grid-column: 1 / -1;
    box-shadow: none;
    overflow: hidden;
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) tr.no-results-row td {
    padding: calc(var(--spacing-unit) * 2);
    text-align: center !important;
    align-items: center;
    font-weight: 500;
    color: var(--text-secondary);
}

.ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) tr.no-results-row td::before {
    content: none;
    display: none;
}

.ranking-table-wrapper.filterable-table:has(td.school-name) .table-filter-toolbar {
    margin-bottom: calc(var(--spacing-unit) * 3);
}

@media (max-width: 420px) {
    .ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) tbody tr {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2.75) calc(var(--spacing-unit) * 2.75);
    }

    .ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td.rank {
        left: calc(var(--spacing-unit) * 2.75);
        width: 2.35rem;
        min-height: 2.85rem;
        font-size: 1.2rem;
    }

    .ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td.school-name {
        padding-left: calc(var(--spacing-unit) * 5.5);
    }
}

/* State profile pages (/states/{slug}/) */
.ranking-table tr.highlight-row th,
.ranking-table tr.highlight-row td {
    background: rgba(0, 179, 198, 0.08);
    font-weight: 600;
}

.state-top-colleges-grid,
article .reports-link-grid.state-top-colleges-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.875rem;
}

ol.state-top-colleges-grid {
    list-style: none;
    margin: 0;
    padding: 0;
}

ol.state-top-colleges-grid > li {
    list-style: none;
}

@media (max-width: 1100px) {
    .state-top-colleges-grid,
    article .reports-link-grid.state-top-colleges-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .state-top-colleges-grid,
    article .reports-link-grid.state-top-colleges-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .state-top-colleges-grid,
    article .reports-link-grid.state-top-colleges-grid {
        grid-template-columns: 1fr;
    }
}

/* State / trade top-college cards — aligned with ranking-leader + school-card */
.state-top-college-card,
a.state-top-college-card,
li.state-top-college-card,
article .reports-link-card.state-top-college-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    min-height: 10.75rem;
    margin: 0;
    padding: 1.15rem 1.15rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-left-color: var(--color-primary);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(10, 28, 74, 0.04));
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

a.state-top-college-card:hover,
.state-top-college-card:hover {
    border-color: color-mix(in srgb, var(--color-aqua) 35%, var(--border));
    border-left-color: var(--color-aqua);
    box-shadow: var(--shadow-md, 0 4px 14px rgba(10, 28, 74, 0.08));
    transform: translateY(-1px);
    text-decoration: none;
    color: inherit;
}

.state-top-college-card[data-rank-category="earnings"] {
    border-left-color: var(--chart-coral, #D4654A);
}

.state-top-college-card[data-rank-category="outcomes"] {
    border-left-color: var(--chart-aqua, #4A98A8);
}

.state-top-college-card[data-rank-category="affordability"] {
    border-left-color: var(--color-aqua);
}

.state-top-college-card[data-rank-category="selectivity"] {
    border-left-color: var(--chart-navy, #2E5074);
}

.state-top-college-card[data-rank-category="value"] {
    border-left-color: var(--color-aqua);
}

.state-top-college-card[data-rank-category="default"] {
    border-left-color: var(--color-primary);
}

.state-top-college-card .state-top-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    flex-shrink: 0;
    min-width: 2.1rem;
    margin: 0;
    padding: 0.28rem 0.55rem;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--color-primary);
    background: var(--surface-alt, #EEF2F8);
    border-radius: 6px;
}

.state-top-card-top {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.2;
}

.state-top-metric-label {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-meta);
    line-height: 1.3;
}

.state-top-metric-value,
article .state-top-college-card .state-top-metric-value,
a.state-top-college-card .state-top-metric-value {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2.4vw, 1.6rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-aqua-text);
}

.state-top-college-card h3,
article .reports-link-card.state-top-college-card h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-primary);
}

.state-top-college-card[data-rank-category="earnings"] .state-top-rank {
    color: var(--status-warning, #B34A32);
    background: color-mix(in srgb, var(--chart-coral, #D4654A) 14%, var(--surface));
}

.state-top-college-card[data-rank-category="outcomes"] .state-top-rank,
.state-top-college-card[data-rank-category="affordability"] .state-top-rank,
.state-top-college-card[data-rank-category="value"] .state-top-rank {
    color: var(--color-aqua-text);
    background: var(--color-aqua-soft);
}

.state-top-college-card[data-rank-category="selectivity"] .state-top-rank {
    color: var(--chart-navy, #2E5074);
    background: color-mix(in srgb, var(--chart-navy, #2E5074) 12%, var(--surface));
}

article .state-top-college-card h3 a,
.state-top-college-card h3 a {
    color: var(--color-primary);
    font-weight: 800;
    text-decoration: none;
}

article .state-top-college-card h3 a:hover,
.state-top-college-card h3 a:hover {
    text-decoration: underline;
}

.state-top-card-meta,
.state-top-college-card .school-card-meta {
    margin: auto 0 0;
    padding-top: 0.45rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.state-top-card-meta a {
    color: var(--color-link);
    text-decoration: none;
}

.state-top-card-meta a:hover {
    text-decoration: underline;
}

.state-top-colleges-block {
    margin-bottom: calc(var(--spacing-unit, 8px) * 5);
    padding-bottom: calc(var(--spacing-unit, 8px) * 2);
    border-bottom: 1px solid var(--border, #E5E7EB);
}

.state-top-colleges-block:last-of-type {
    border-bottom: none;
}

.analysis-insights h3 {
    font-size: 1.15rem;
    margin: 1.75rem 0 0.75rem;
    color: var(--color-primary, #003366);
}

.analysis-insights h3:first-of-type {
    margin-top: 0.5rem;
}

/* ==========================================================================
   Deep-dive layout (Stitch-inspired): sticky navigator + main column
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

.deep-dive-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--spacing-unit) * 6);
    margin-top: calc(var(--spacing-unit) * 2);
    /* stretch so sticky sidebar can travel with the tall main column */
    align-items: stretch;
}

.deep-dive-sidebar {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
    align-self: stretch;
    min-width: 0;
}

.deep-dive-sidebar-sticky {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
}

.deep-dive-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 6);
}

.report-navigator {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 1.5);
}

.report-navigator-label {
    margin: 0 0 calc(var(--spacing-unit) * 2);
    padding: 0 calc(var(--spacing-unit) * 1);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-meta);
    font-family: var(--font-body);
}

.report-navigator nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.report-nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(var(--spacing-unit) * 1.25);
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 0 8px 8px 0;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.report-nav-link:hover {
    background: var(--surface-alt);
    color: var(--color-primary);
    text-decoration: none;
}

.report-nav-link.is-active,
.report-nav-link.active {
    background: var(--surface-alt);
    color: var(--color-primary);
}

.report-nav-link .ti {
    color: var(--text-meta);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.report-nav-link.is-active .ti,
.report-nav-link.active .ti,
.report-nav-link:hover .ti {
    color: var(--color-aqua-text);
}

.key-facts.key-facts--sidebar {
    margin: 0;
    padding: calc(var(--spacing-unit) * 3);
    border-radius: 0 12px 12px 0;
    background: var(--surface-alt, #EEF2F8);
    border: none;
    border-left: 4px solid var(--color-aqua);
}

.key-facts.key-facts--sidebar h2,
.key-facts.key-facts--sidebar .key-facts-heading {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.key-facts.key-facts--sidebar li {
    font-size: 0.9rem;
    padding: calc(var(--spacing-unit) * 1.25) 0;
    padding-left: 0;
    border-bottom: none;
    position: relative;
}

.key-facts.key-facts--sidebar li::before {
    content: none;
    display: none;
}

.tldr-section.tldr-section--hero {
    position: relative;
    overflow: hidden;
}

.tldr-kicker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: calc(var(--spacing-unit) * 2);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9CF0FF !important;
}

.tldr-kicker .ti {
    color: #9CF0FF !important;
}

.tldr-section--hero .tldr-text strong {
    color: #9CF0FF !important;
}

.section-kicker {
    display: block;
    margin-bottom: calc(var(--spacing-unit) * 1);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-aqua-text);
}

.insight-stack {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.insight-block-label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 700;
    color: var(--color-primary);
}

.insight-evidence-card {
    background: var(--surface-alt);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: calc(var(--spacing-unit) * 2.5);
}

.chart-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: calc(var(--spacing-unit) * 3);
    box-shadow: 0 1px 3px rgba(10, 28, 74, 0.04);
    display: flex;
    flex-direction: column;
    min-height: 360px;
}

.chart-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 2);
    flex-wrap: wrap;
}

.chart-panel-title {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.95rem;
}

.chart-panel-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: #059669;
    font-variant-numeric: tabular-nums;
}

.chart-panel-stat--aqua {
    color: var(--color-aqua-text);
}

.chart-panel .chart-container {
    flex: 1;
    min-height: 300px;
    height: 320px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.chart-section.chart-section--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--spacing-unit) * 4);
    align-items: start;
    margin: 0;
}

.chart-section.chart-section--split > .chart-section-content {
    display: contents;
}

.chart-section.chart-section--split .chart-section-left,
.chart-section.chart-section--split .chart-section-right {
    width: 100%;
}

.chart-section.chart-section--split .chart-section-left h2 {
    margin-top: 0;
}

.graduate-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: calc(var(--spacing-unit) * 4);
    box-shadow: 0 1px 3px rgba(10, 28, 74, 0.04);
}

.graduate-panel-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.graduate-panel-header h2 {
    margin: 0 0 0.35rem;
}

.graduate-panel-sub {
    margin: 0;
    color: var(--text-secondary);
}

.graduate-stat-pills {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
    background: var(--surface-alt, #f2f4f8);
    border-radius: 999px;
    padding: 0.65rem 1.25rem;
}

.graduate-stat-pills .stat {
    text-align: center;
}

.graduate-stat-pills .stat-value {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.graduate-stat-pills .stat-value.is-aqua {
    color: var(--color-aqua-text);
}

.graduate-stat-pills .stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-meta);
}

.graduate-stat-pills .stat-divider {
    width: 1px;
    height: 2rem;
    background: var(--border);
}

.graduate-panel .chart-container {
    height: 350px;
    min-height: 320px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.graduate-insight-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 2);
    margin-top: calc(var(--spacing-unit) * 3);
}

.graduate-insight-grid .insight-mini {
    background: var(--surface-alt);
    border-radius: 8px;
    padding: calc(var(--spacing-unit) * 2.5);
}

.graduate-insight-grid .insight-mini p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.milestone-panel {
    background: var(--color-primary);
    color: #fff;
    border-radius: 12px;
    padding: calc(var(--spacing-unit) * 4);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(10, 28, 74, 0.18);
}

.milestone-panel-dots {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    pointer-events: none;
    background-image: radial-gradient(circle at 2px 2px, #fff 1px, transparent 0);
    background-size: 32px 32px;
    z-index: 0;
}

.milestone-panel h2 {
    color: #fff !important;
    margin-top: 0;
}

.milestone-panel p,
.milestone-panel .milestone-copy {
    color: var(--text-on-navy-muted);
}

.milestone-panel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 4);
    position: relative;
    z-index: 1;
}

.milestone-legend {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: calc(var(--spacing-unit) * 3);
}

.milestone-legend-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}

.milestone-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

.milestone-swatch--coral { background: #D4654A; }
.milestone-swatch--aqua { background: var(--color-aqua); }
.milestone-swatch--navy { background: #8AA4C8; }

.milestone-panel .chart-container {
    height: 360px;
    min-height: 320px;
    background: transparent;
}

.data-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.data-table-toolbar h2 {
    margin: 0;
}

.data-table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 1.5);
    align-items: center;
}

.data-table-filter {
    position: relative;
}

.data-table-filter input {
    padding: 0.55rem 0.85rem 0.55rem 2.25rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    min-width: 12rem;
    background: var(--surface);
    color: var(--text-color);
}

.data-table-filter .ti {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-meta);
    font-size: 1rem;
    pointer-events: none;
}

.data-table-shell {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(10, 28, 74, 0.04);
}

.data-table-shell .table-responsive-wrapper,
.data-table-shell .table-container {
    margin: 0;
    border: none;
    border-radius: 0;
}

.data-table-shell thead th {
    background: var(--color-primary);
    color: #fff;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.data-table--attainment tbody td:first-child {
    font-weight: 700;
    color: var(--color-primary);
}

.data-table--attainment tbody td.is-negative {
    color: #ba1a1a;
    font-weight: 600;
}

.btn-export-csv {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.55rem 1rem;
    border: none;
    border-radius: 8px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    white-space: nowrap;
}

.btn-export-csv:hover,
.btn-export-csv:focus-visible {
    background: var(--primary-hover, #0d2a66);
    color: #fff;
}

.ed-deep-dive .chart-actions {
    display: none !important;
}

.faq-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 2);
    margin-top: calc(var(--spacing-unit) * 4);
}

.faq-card {
    background: var(--surface-alt);
    border-radius: 12px;
    padding: calc(var(--spacing-unit) * 3);
}

.faq-card h3,
.faq-card h4 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: var(--color-primary);
}

.faq-card p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.sources-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 2);
}

.sources-card {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
}

.sources-card:hover {
    border-color: var(--color-aqua);
    text-decoration: none;
}

.sources-card .ti {
    color: var(--color-aqua-text);
    font-size: 1.25rem;
    margin-top: 0.1rem;
}

.sources-card strong {
    display: block;
    color: var(--color-primary);
    font-size: 0.95rem;
}

.sources-card span {
    display: block;
    font-size: 0.8rem;
    color: var(--text-meta);
}

.analysis-panel {
    background: var(--surface-alt, #eceef2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: calc(var(--spacing-unit) * 4);
}

.analysis-panel h2 {
    margin-top: 0;
    color: var(--color-primary);
}

.analysis-panel .analysis-insights-text {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.analysis-panel .analysis-insights-text:last-child {
    margin-bottom: 0;
}

.methodology.methodology--stitch {
    border-top: 1px solid var(--border-light);
    padding-top: calc(var(--spacing-unit) * 5);
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    background: transparent;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: none;
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
}

.methodology--stitch ul.methodology-bullets {
    margin: calc(var(--spacing-unit) * 3) 0 0;
    padding-left: 1.25rem;
    list-style: disc;
}

.methodology--stitch ul.methodology-bullets li {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    padding-left: 0.25rem;
}

.methodology--stitch ul.methodology-bullets li::before {
    content: none;
    display: none;
}

.sources-card-grid--two {
    max-width: 100%;
}

@media (min-width: 768px) {
    .chart-section.chart-section--split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: calc(var(--spacing-unit) * 5);
    }

    .chart-section.chart-section--split.is-chart-left .chart-section-right {
        order: -1;
    }

    .graduate-insight-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .milestone-panel-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .faq-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sources-card-grid,
    .sources-card-grid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .deep-dive-layout {
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
        gap: calc(var(--spacing-unit) * 6);
    }

    .deep-dive-sidebar-sticky {
        position: sticky;
        top: var(--site-header-clearance, 7.5rem);
    }

    .deep-dive-layout section,
    .deep-dive-main > section {
        scroll-margin-top: calc(var(--site-header-clearance, 7.5rem) + 0.5rem);
    }
}

@media (max-width: 767px) {
    .chart-panel {
        min-height: 300px;
    }

    .chart-panel .chart-container {
        height: 240px;
        min-height: 240px;
    }

    .graduate-stat-pills {
        border-radius: 12px;
        width: 100%;
        justify-content: space-around;
    }
}

/* ==========================================================================
   Hub layouts (Home / Reports / Rankings / cost pilots) — Stitch patterns
   ========================================================================== */

.hub-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--spacing-unit) * 6);
    /* stretch so .hub-sidebar is as tall as .hub-main — required for position:sticky */
    align-items: stretch;
    margin-top: calc(var(--spacing-unit) * 2);
}

.hub-sidebar {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
    min-width: 0;
    /* Fill the grid track so sticky children can travel with the main column */
    align-self: stretch;
}

.hub-sidebar-sticky {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
}

/* Sidebar cards use overflow:hidden, which zeroes their flex min-height; without this
   the max-height clamp below shrinks and clips them instead of scrolling the stack. */
.hub-sidebar-sticky > *,
.deep-dive-sidebar-sticky > * {
    flex: 0 0 auto;
}

.hub-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 6);
}

.key-facts.key-facts--navy {
    background: var(--color-primary);
    color: var(--text-on-navy);
    border: none;
    border-radius: 12px;
    padding: calc(var(--spacing-unit) * 3);
    margin: 0;
}

.key-facts.key-facts--navy h2,
.key-facts.key-facts--navy .key-facts-heading {
    color: var(--color-aqua-on-dark);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 calc(var(--spacing-unit) * 3);
}

.key-facts.key-facts--navy .kf-stat {
    padding: calc(var(--spacing-unit) * 2) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.key-facts.key-facts--navy .kf-stat:first-of-type {
    border-top: none;
    padding-top: 0;
}

.key-facts.key-facts--navy .kf-value {
    display: block;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.75rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--text-on-navy);
}

.key-facts.key-facts--navy .kf-value.is-aqua {
    color: var(--color-aqua-on-dark);
}

.key-facts.key-facts--navy .kf-label {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-on-navy-muted);
}

.key-facts.key-facts--navy .btn-download,
.key-facts.key-facts--navy .btn-hub-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    margin-top: calc(var(--spacing-unit) * 3);
    padding: 0.75rem 1rem;
    background: var(--color-aqua);
    color: var(--color-primary);
    border: none;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.key-facts.key-facts--navy .btn-hub-cta:hover {
    background: #fff;
    color: var(--color-primary);
    text-decoration: none;
}

.btn-hub-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding: 0.65rem 1rem;
    background: var(--color-primary, #0A1C4A);
    color: #fff;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.btn-hub-cta:hover {
    background: var(--color-aqua, #00B3C6);
    color: var(--color-primary, #0A1C4A);
    text-decoration: none;
}

.key-facts.key-facts--quick {
    margin: 0;
    background: var(--surface-alt);
    border: none;
    border-left: 4px solid var(--color-aqua);
    border-radius: 0 12px 12px 0;
    padding: calc(var(--spacing-unit) * 3);
}

.key-facts.key-facts--quick h2,
.key-facts.key-facts--quick .key-facts-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.key-facts.key-facts--quick li {
    font-size: 0.88rem;
    padding: 0.65rem 0;
    padding-left: 0;
    border-bottom: none;
}

.key-facts.key-facts--quick li::before {
    content: none;
    display: none;
}

.mission-bar {
    background: var(--color-primary);
    color: #fff;
    border-radius: 16px;
    padding: calc(var(--spacing-unit) * 4);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
    box-shadow: 0 8px 24px rgba(10, 28, 74, 0.18);
}

.mission-bar-kicker {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-aqua-on-dark);
}

.mission-bar p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.9);
}

.mission-bar strong,
.mission-bar em {
    color: var(--color-aqua-on-dark);
    font-style: italic;
}

.integrity-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: calc(var(--spacing-unit) * 5);
    box-shadow: 0 1px 3px rgba(10, 28, 74, 0.04);
}

.integrity-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 4);
    margin-top: calc(var(--spacing-unit) * 4);
}

.integrity-item .integrity-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    background: var(--surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}

.integrity-item h3,
.integrity-item h4 {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
}

.integrity-item p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.hub-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: calc(var(--spacing-unit) * 3);
    padding-bottom: calc(var(--spacing-unit) * 2);
    border-bottom: 2px solid var(--border-light);
}

.hub-section-header h2 {
    margin: 0;
}

.hub-section-header .hub-section-link {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-aqua-text);
    text-decoration: none;
}

.hub-section-header .hub-section-link:hover {
    color: var(--color-primary);
}

.report-standards-card {
    background: var(--surface-alt);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: calc(var(--spacing-unit) * 3);
}

.report-standards-card h3,
.report-standards-card h4 {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.report-standards-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.report-standards-list li {
    display: flex;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.report-standards-list .std-num {
    color: var(--color-aqua-text);
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.live-report-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: calc(var(--spacing-unit) * 3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
}

.live-report-link:hover {
    border-color: var(--color-aqua);
    text-decoration: none;
}

.live-report-link h3 {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    color: var(--color-primary);
}

.live-report-link p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-meta);
}

.live-report-link .ti {
    color: var(--color-aqua-text);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.hub-cta-panel {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: calc(var(--spacing-unit) * 5);
}

.hub-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: calc(var(--spacing-unit) * 3);
}

.stat-pills-stack {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
}

.stat-pill-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: calc(var(--spacing-unit) * 3);
    box-shadow: 0 1px 3px rgba(10, 28, 74, 0.04);
}

.stat-pill-card .stat-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-meta);
    margin-bottom: 0.25rem;
}

.stat-pill-card .stat-value {
    display: block;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.stat-pill-card .stat-note {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    color: var(--text-meta);
}

.sidebar-download-card {
    background: var(--color-primary);
    color: #fff;
    border-radius: 10px;
    padding: calc(var(--spacing-unit) * 2.5);
    margin-top: calc(var(--spacing-unit) * 3);
}

.sidebar-download-card p {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.cost-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing-unit) * 2);
    margin-top: calc(var(--spacing-unit) * 3);
}

.cost-metric-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: calc(var(--spacing-unit) * 2.5);
    box-shadow: 0 1px 3px rgba(10, 28, 74, 0.04);
}

.cost-metric-card .label {
    display: block;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-meta);
    margin-bottom: 0.35rem;
}

.cost-metric-card .value {
    display: block;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.75rem;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.cost-metric-card .value.is-positive {
    color: #059669;
}

.home-hero-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(10, 28, 74, 0.04);
}

.home-hero-card-grid {
    display: grid;
    grid-template-columns: 1fr;
}

.home-hero-copy {
    padding: calc(var(--spacing-unit) * 5);
}

.home-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    background: rgba(0, 179, 198, 0.1);
    color: var(--color-aqua-text);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 4px;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.home-hero-chart-pane {
    background: var(--surface-alt);
    padding: calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-light);
}

.home-hero-chart-pane .chart-container {
    height: 240px;
    min-height: 240px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.archive-cta-card {
    background: #F0F9FF;
    border: 1px solid rgba(0, 179, 198, 0.25);
    border-radius: 12px;
    padding: calc(var(--spacing-unit) * 4);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.archive-cta-card .ti {
    font-size: 2rem;
    color: var(--color-aqua-text);
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .integrity-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mission-bar {
        flex-direction: row;
        align-items: center;
    }

    .mission-bar-kicker {
        flex: 0 0 25%;
    }

    .home-hero-card-grid {
        grid-template-columns: 1fr 1fr;
    }

    .home-hero-chart-pane {
        border-top: none;
        border-left: 1px solid var(--border-light);
    }

    .cost-metric-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .hub-layout {
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
        gap: calc(var(--spacing-unit) * 6);
    }

    .hub-sidebar-sticky {
        position: sticky;
        top: var(--site-header-clearance, 7.5rem);
        /* Keep nav + Key Facts usable on short viewports while main column scrolls */
        max-height: calc(100vh - var(--site-header-clearance, 7.5rem) - 0.75rem);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 0.15rem; /* room for scrollbar without clipping cards */
        scrollbar-width: thin;
    }

    .hub-layout section,
    .hub-main > section {
        scroll-margin-top: calc(var(--site-header-clearance, 7.5rem) + 0.5rem);
    }
}


/* Ranking hub cards (Stitch rank-ribbon) */
.reports-link-grid.ranking-hub-grid,
.ranking-hub-grid {
    counter-reset: ranking-hub;
}

.ranking-hub-card,
.reports-link-grid.ranking-hub-grid > .reports-link-card {
    position: relative;
    overflow: visible;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3.5) calc(var(--spacing-unit) * 3.5);
    padding-top: calc(var(--spacing-unit) * 5.5);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(10, 28, 74, 0.04), 0 10px 28px rgba(10, 28, 74, 0.07);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    counter-increment: ranking-hub;
}

.ranking-hub-card:hover,
.reports-link-grid.ranking-hub-grid > .reports-link-card:hover {
    border-color: color-mix(in srgb, var(--color-aqua) 35%, var(--border));
    box-shadow: 0 2px 6px rgba(10, 28, 74, 0.06), 0 14px 32px rgba(10, 28, 74, 0.09);
}

.ranking-hub-card::before,
.reports-link-grid.ranking-hub-grid > .reports-link-card::before {
    content: counter(ranking-hub);
    position: absolute;
    top: -3px;
    left: calc(var(--spacing-unit) * 3.5);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    min-height: 2.85rem;
    padding: 0.4rem 0 0.7rem;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading, "Montserrat", system-ui, sans-serif);
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    border-radius: 0 0 3px 3px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 50% 100%, 0 calc(100% - 10px));
    box-shadow: 0 4px 10px rgba(10, 28, 74, 0.22);
    pointer-events: none;
}

.ranking-hub-card h3,
.reports-link-grid.ranking-hub-grid > .reports-link-card h3 {
    margin-top: 0;
    font-size: 1.05rem;
    line-height: 1.35;
}

.ranking-hub-card h3 a,
.reports-link-grid.ranking-hub-grid > .reports-link-card h3 a {
    text-decoration: none;
}

.ranking-hub-card h3 a:hover,
.reports-link-grid.ranking-hub-grid > .reports-link-card h3 a:hover {
    text-decoration: underline;
}

/* ---- Contact / About / Methodology site pages ---- */
.contact-dept-card {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
    padding: calc(var(--spacing-unit) * 4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: calc(var(--spacing-unit) * 3);
    transition: border-color 0.15s ease;
}

@media (min-width: 700px) {
    .contact-dept-card {
        flex-direction: row;
        align-items: flex-start;
    }
}

.contact-dept-card:hover {
    border-color: color-mix(in srgb, var(--color-aqua) 40%, var(--border));
}

.contact-dept-icon {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-alt);
    border-radius: 12px;
    flex-shrink: 0;
    color: var(--color-primary);
    font-size: 1.75rem;
}

.contact-dept-card:hover .contact-dept-icon {
    color: var(--link);
}

.contact-dept-body {
    flex: 1;
    min-width: 0;
}

.contact-dept-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.contact-dept-head h3 {
    margin: 0;
    font-size: 1.25rem;
}

.contact-dept-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--surface-alt);
    color: var(--color-primary);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
}

.contact-dept-tag--priority {
    background: #ffdad6;
    color: #93000a;
}

.contact-email-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: calc(var(--spacing-unit) * 2.5);
    background: var(--background-color, #f7f9fd);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    margin-top: 1rem;
}

.contact-email-box .ti {
    color: var(--link);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.contact-email-box .ti.ti-priority {
    color: #ba1a1a;
}

.contact-email-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-meta);
}

.contact-email-box a {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.contact-mini-grid {
    display: grid;
    gap: calc(var(--spacing-unit) * 2);
    grid-template-columns: 1fr;
    margin-top: calc(var(--spacing-unit) * 2);
}

@media (min-width: 700px) {
    .contact-mini-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.contact-mini-card {
    padding: calc(var(--spacing-unit) * 3);
    background: var(--background-color, #f7f9fd);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.contact-mini-card h4 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-mini-card a {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.contact-mini-card p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-meta);
}

.protocol-callout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: calc(var(--spacing-unit) * 4);
    background: color-mix(in srgb, var(--color-aqua) 12%, var(--surface));
    border-left: 4px solid var(--color-aqua);
    border-radius: 0 12px 12px 0;
    margin: calc(var(--spacing-unit) * 3) 0;
}

.protocol-callout .ti {
    color: var(--color-aqua-text);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.protocol-callout h4 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.protocol-callout p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.source-card-grid {
    display: grid;
    gap: calc(var(--spacing-unit) * 3);
    grid-template-columns: 1fr;
}

@media (min-width: 700px) {
    .source-card-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.source-card {
    position: relative;
    padding: calc(var(--spacing-unit) * 4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.source-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.source-card p {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.source-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.source-card-tags span {
    padding: 0.2rem 0.5rem;
    background: var(--surface-alt);
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.source-card-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.2rem 0.5rem;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 0 12px 0 8px;
}

.method-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
}

.method-section-title::before {
    content: "";
    width: 4px;
    height: 1.75rem;
    background: var(--color-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.method-section-title h2 {
    margin: 0;
}

.insight-process-card {
    border-left: 4px solid var(--color-aqua);
    background: var(--background-color, #f7f9fd);
    padding: calc(var(--spacing-unit) * 4);
    border-radius: 0 12px 12px 0;
    margin: calc(var(--spacing-unit) * 3) 0;
}

.insight-process-card .insight-kicker {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-aqua-text);
    margin-bottom: 0.35rem;
}

.insight-process-card h3 {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}

.insight-quote {
    padding: calc(var(--spacing-unit) * 3);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin: 0 0 0.75rem;
    font-style: italic;
    color: var(--color-primary);
}

.method-var-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    font-size: 0.95rem;
}

.method-var-table thead {
    background: var(--color-primary);
    color: #fff;
}

.method-var-table th {
    text-align: left;
    padding: 0.85rem 1rem;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.method-var-table td {
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--border-light);
    vertical-align: top;
}

.method-var-table tbody tr:nth-child(even) {
    background: var(--surface-alt);
}

.method-var-table td:first-child {
    font-weight: 700;
    color: var(--color-primary);
}

.method-cta-panel {
    text-align: center;
    padding: calc(var(--spacing-unit) * 5);
    background: var(--background-color, #f7f9fd);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.method-cta-panel .ti {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.method-cta-panel h3 {
    margin: 0 0 0.5rem;
}

.method-cta-panel p {
    max-width: 36rem;
    margin: 0 auto 1.25rem;
    color: var(--text-secondary);
}

.about-mission-hero {
    position: relative;
    overflow: hidden;
    padding: calc(var(--spacing-unit) * 6);
    background: var(--color-primary);
    color: #fff;
    border-radius: 16px;
    margin-bottom: calc(var(--spacing-unit) * 5);
}

.about-mission-hero .mission-kicker {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-aqua-text);
    margin-bottom: 0.75rem;
}

.about-mission-hero h1 {
    margin: 0 0 1rem;
    color: #fff;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.15;
}

.about-mission-hero p {
    margin: 0 0 1.5rem;
    max-width: 40rem;
    opacity: 0.9;
    font-size: 1.05rem;
    line-height: 1.65;
}

.about-mission-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.about-mission-stat {
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
}

.about-mission-stat strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
}

.about-mission-stat span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.8;
}

.about-bento {
    display: grid;
    gap: calc(var(--spacing-unit) * 3);
    grid-template-columns: 1fr;
}

@media (min-width: 700px) {
    .about-bento {
        grid-template-columns: 1fr 1fr;
    }
}

.about-bento-card {
    padding: calc(var(--spacing-unit) * 4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.about-bento-card .ti {
    font-size: 1.75rem;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.about-bento-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.about-bento-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.about-bento-card--wide {
    grid-column: 1 / -1;
    background: var(--surface-alt);
}

.about-affiliate-panel {
    display: grid;
    gap: calc(var(--spacing-unit) * 4);
    padding: calc(var(--spacing-unit) * 5);
    background: var(--color-primary);
    color: #fff;
    border-radius: 16px;
    margin: calc(var(--spacing-unit) * 4) 0;
}

@media (min-width: 800px) {
    .about-affiliate-panel {
        grid-template-columns: 1.2fr 1fr;
        align-items: center;
    }
}

.about-affiliate-panel h3 {
    margin: 0 0 0.75rem;
    color: #fff;
}

.about-affiliate-panel p,
.about-affiliate-panel li {
    color: rgba(255, 255, 255, 0.85);
}

.about-affiliate-panel a {
    color: var(--color-aqua-text);
}

.about-affiliate-aside {
    padding: calc(var(--spacing-unit) * 3);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    font-size: 0.9rem;
}

.about-check-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.about-check-list li {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.about-check-list .ti {
    color: var(--accent-success, #5A8F6F);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.tldr-response-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.tldr-section--hero .tldr-hero-row {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (min-width: 800px) {
    .tldr-section--hero .tldr-hero-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.tldr-section--hero .tldr-hero-copy {
    flex: 1;
    min-width: 0;
}

.tldr-delta-callout {
    flex-shrink: 0;
    min-width: 9.5rem;
    padding: 1.25rem 1.5rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(8px);
}

.tldr-delta-value {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: #9CF0FF;
}

.tldr-delta-callout.is-affordable .tldr-delta-value {
    color: #9CF0FF;
}

.tldr-delta-label {
    margin-top: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.8;
    color: #fff;
}

.focus-takeaway {
    margin: calc(var(--spacing-unit) * -2) 0 calc(var(--spacing-unit) * 6);
    padding: calc(var(--spacing-unit) * 3);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-left: 4px solid var(--color-aqua);
    border-radius: 0 10px 10px 0;
}

.focus-takeaway--coral {
    border-left-color: var(--chart-coral, #D4654A);
}

.focus-takeaway-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.focus-takeaway p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.report-navigator--branded {
    padding: 0;
    overflow: hidden;
}

.report-navigator--branded .report-navigator-header {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 2.5);
    background: var(--color-primary);
    color: #fff;
}

.report-navigator--branded .report-navigator-header .report-navigator-label {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-transform: none;
    font-family: var(--font-heading);
    font-weight: 700;
}

.report-navigator--branded .report-navigator-header .report-navigator-sub {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    opacity: 1;
    color: var(--text-on-navy-muted);
}

.report-navigator--branded nav {
    padding: 0.5rem 0.5rem 0.75rem 0;
}

.profile-badge {
    display: inline-block;
    margin-bottom: calc(var(--spacing-unit) * 2);
    padding: 0.35rem 0.85rem;
    background: rgba(0, 179, 198, 0.15);
    color: var(--color-aqua-dark, #006874);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.source-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.source-card-foot a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-link, #0A5F6D);
    text-decoration: none;
}

.source-card-foot a:hover {
    text-decoration: underline;
}

.source-card-meta {
    font-size: 0.75rem;
    color: var(--text-meta);
}

.harmonization-grid {
    display: grid;
    gap: calc(var(--spacing-unit) * 4);
    grid-template-columns: 1fr;
    text-align: center;
}

@media (min-width: 700px) {
    .harmonization-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.harmonization-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 0.75rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: 10px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.1rem;
}

.integrity-panel--sources {
    background: rgba(0, 179, 198, 0.08);
    border-left: 4px solid var(--color-aqua);
    border-radius: 0 12px 12px 0;
    padding: calc(var(--spacing-unit) * 4);
}

/* Ranking detail — top-tier leader cards (Stitch) */
.ranking-leaders {
    margin: 0 0 calc(var(--spacing-unit) * 6);
}

.ranking-leaders h2 {
    margin: 0 0 calc(var(--spacing-unit) * 3);
}

.ranking-leaders-grid {
    display: grid;
    gap: calc(var(--spacing-unit) * 3);
    grid-template-columns: 1fr;
    align-items: stretch;
}

@media (min-width: 640px) {
    .ranking-leaders-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .ranking-leaders-grid {
        /* Top-3 leaders fit well three-across; full ranking cards stay 2-up */
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ranking-leader-card {
    position: relative;
    container-type: inline-size;
    container-name: leader-card;
    display: grid;
    grid-template-rows: minmax(2.75rem, auto) auto minmax(0, 1fr);
    grid-template-areas:
        "name"
        "metric"
        "meta";
    gap: 0.75rem;
    min-height: 11.5rem;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 12px;
    padding: 1.35rem 1.35rem 1.25rem;
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(10, 28, 74, 0.04));
}

.ranking-leader-card.border-secondary {
    border-left-color: var(--color-aqua);
}

.ranking-leader-card.border-chart-aqua {
    border-left-color: var(--chart-aqua, #4A98A8);
}

.ranking-leader-card.border-chart-coral {
    border-left-color: var(--chart-coral, #D4654A);
}

.ranking-leader-ribbon {
    position: absolute;
    top: -4px;
    left: 1.05rem;
    z-index: 1;
    width: 2.15rem;
    min-height: 2.6rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.32rem;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1rem;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%);
}

.ranking-leader-name {
    grid-area: name;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.28;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.ranking-leader-card:has(.ranking-leader-ribbon) .ranking-leader-name {
    padding-left: 2.7rem;
    /* With 2-up cards, names get more width — keep a modest floor only */
    min-height: 2.75rem;
}

.ranking-leader-name a {
    display: inline;
    color: var(--color-primary);
    text-decoration: none;
}

.ranking-leader-name a:hover {
    text-decoration: underline;
}

.ranking-leader-metric {
    grid-area: metric;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
    min-width: 0;
}

.ranking-leader-card:has(.ranking-leader-ribbon) .ranking-leader-metric {
    padding-left: 2.7rem;
}

.ranking-leader-metric .label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-meta);
    line-height: 1.2;
}

.ranking-leader-metric .value {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.25rem, 4.5cqi, 1.5rem);
    font-variant-numeric: tabular-nums;
    color: var(--color-aqua-text);
    line-height: 1.15;
}

.ranking-leader-meta {
    grid-area: meta;
    align-self: end;
    margin: 0;
    padding-top: 0.55rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.ranking-leader-card:has(.ranking-leader-ribbon) .ranking-leader-meta {
    padding-left: 2.7rem;
}

/* Narrow cards: slightly tighter name so long titles fit more lines without overflow */
@container leader-card (max-width: 15rem) {
    .ranking-leader-name {
        font-size: 0.92rem;
        line-height: 1.3;
    }

    .ranking-leader-card:has(.ranking-leader-ribbon) .ranking-leader-name {
        min-height: 4.55rem;
    }
}

@container leader-card (max-width: 12.5rem) {
    .ranking-leader-name {
        font-size: 0.88rem;
    }
}

/* Ranking pages — tighten stacked margins (hub gap + section margins were doubling) */
.ed-page-ranking > .page-header {
    margin-bottom: calc(var(--spacing-unit) * 3);
    padding-bottom: calc(var(--spacing-unit) * 3);
}

.ed-page-ranking > .page-header h1 {
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.ed-page-ranking > .tldr-section {
    margin: 0 0 calc(var(--spacing-unit) * 4);
    padding: calc(var(--spacing-unit) * 4);
}

.ed-page-ranking .hub-layout {
    margin-top: 0;
    gap: calc(var(--spacing-unit) * 4);
}

.ed-page-ranking .hub-main {
    gap: calc(var(--spacing-unit) * 4);
}

.ed-page-ranking .ranking-leaders {
    margin: 0;
}

.ed-page-ranking .ranking-leaders h2 {
    margin: 0 0 calc(var(--spacing-unit) * 2.5);
}

.ed-page-ranking .hub-main > .introduction,
.ed-page-ranking .hub-main > .data-table-section,
.ed-page-ranking .hub-main > .download-cta,
.ed-page-ranking .hub-main > .faq-section {
    margin-top: 0;
    margin-bottom: 0;
}

.ed-page-ranking .hub-main > .download-cta {
    padding: calc(var(--spacing-unit) * 4);
}

.ed-page-ranking .hub-main > .introduction h2,
.ed-page-ranking .hub-main > .data-table-section h2,
.ed-page-ranking .hub-main > .download-cta h2 {
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit) * 2.5);
}

.ed-page-ranking .hub-main > .introduction h3 {
    margin-top: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.ed-page-ranking .hub-main > .introduction h3:first-of-type {
    margin-top: calc(var(--spacing-unit) * 2.5);
}

@media (min-width: 1024px) {
    .ed-page-ranking .hub-layout {
        gap: calc(var(--spacing-unit) * 5);
    }
}

/* TL;DR hero callout stat (report whitepapers) */
.tldr-section--hero .tldr-hero-stat {
    flex-shrink: 0;
    min-width: 9.5rem;
    padding: 1.25rem 1.5rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(8px);
}

.tldr-section--hero .tldr-hero-value {
    display: block;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 2.25rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: #9CF0FF;
}

.tldr-section--hero .tldr-hero-label {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.85;
    color: #fff;
}

.method-limits-callout {
    margin-top: calc(var(--spacing-unit) * 4);
    padding: calc(var(--spacing-unit) * 4);
    background: var(--surface-alt, #EEF2F8);
    border: 2px dashed var(--border, #D8E0ED);
    border-radius: 12px;
}

.method-limits-callout h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Insight / evidence stacks on report breakouts */
.hub-main .insight-stack,
.report-whitepaper .insight-panel {
    margin: calc(var(--spacing-unit) * 4) 0;
    padding: calc(var(--spacing-unit) * 3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--color-aqua);
    border-radius: 0 12px 12px 0;
}

/* ==========================================================================
   School profile — Stitch report-card layout
   ========================================================================== */

.profile-report-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Full-bleed navy report hero (Stitch EduAnalytics pattern) */
.school-report-hero {
    width: 100%;
    margin: 0 0 calc(var(--spacing-unit) * 5);
    padding: calc(var(--spacing-unit) * 5) 0;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 0;
    /* Do not inherit site chrome sticky from bare `header` */
    position: static;
    top: auto;
    z-index: auto;
    box-shadow: none;
}

.school-report-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.school-report-hero .page-header-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.school-report-hero h1 {
    margin: 0;
    max-width: none;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.school-report-hero-location {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.85rem 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: rgba(182, 197, 252, 0.95);
}

.school-report-hero-location .ti {
    flex-shrink: 0;
    font-size: 1.05rem;
    opacity: 0.9;
    transform: translateY(-0.5px);
}

.school-report-hero h1 + .report-hero-metrics {
    margin-top: calc(var(--spacing-unit) * 3.5);
}

.school-report-hero .report-id-meta {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(182, 197, 252, 0.95);
}

.school-report-hero .report-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.65rem;
    background: var(--color-aqua, #00b3c6);
    color: #fff;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.school-report-hero .report-status-badge::before {
    display: none;
}

/* Legacy class kept for non-school pages */
.page-header--report {
    margin: 0 0 calc(var(--spacing-unit) * 5);
    padding: calc(var(--spacing-unit) * 5) calc(var(--spacing-unit) * 4);
    border: none;
    border-radius: 16px;
    background: var(--color-primary);
    color: #fff;
}

@media (min-width: 768px) {
    .page-header--report {
        padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 5);
    }
}

.page-header--report .page-header-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    margin-bottom: calc(var(--spacing-unit) * 2.5);
}

.page-header--report .page-header-top {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

@media (min-width: 768px) {
    .page-header--report .page-header-top {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

.page-header--report h1 {
    margin: 0 0 calc(var(--spacing-unit) * 4);
    max-width: 44rem;
    font-size: clamp(1.85rem, 4vw, 2.85rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.page-header--report .meta-info,
.page-header--report .report-id-meta {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: rgba(182, 197, 252, 0.9);
}

.page-header--report .meta-info .ti {
    color: var(--color-aqua, #00b3c6);
    font-size: 1rem;
    vertical-align: -0.15em;
    margin-right: 0.2rem;
}

.report-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding: 0.35rem 0.7rem;
    background: var(--color-aqua, #00b3c6);
    color: var(--color-primary, #0a1c4a);
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.report-status-badge::before {
    display: none;
}

@keyframes report-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.page-header--report .cost-metric-grid {
    margin-top: 0;
}

.profile-report-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 8);
}

@media (min-width: 768px) {
    .profile-report-body {
        padding: 0;
    }
}

/* School hub: Report Contents panel (Stitch sidebar-item) */
.report-navigator--contents {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5) 0;
}

.report-navigator--contents .report-navigator-label {
    margin: 0 0 calc(var(--spacing-unit) * 2);
    padding: 0 calc(var(--spacing-unit) * 2);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-meta);
}

.report-navigator--contents .report-nav-link {
    padding: 0.65rem calc(var(--spacing-unit) * 2);
    border-radius: 0 8px 8px 0;
}

.report-navigator--contents .report-nav-link.is-active,
.report-navigator--contents .report-nav-link.active {
    background: rgba(0, 179, 198, 0.1);
    color: var(--color-primary);
    border-radius: 0 8px 8px 0;
    border-left: 4px solid var(--color-aqua);
    padding-left: calc(var(--spacing-unit) * 2 - 4px);
}

.report-navigator--contents .sidebar-download-card {
    margin-top: calc(var(--spacing-unit) * 4);
    margin-left: calc(var(--spacing-unit) * 1.5);
    margin-right: calc(var(--spacing-unit) * 1.5);
    padding-top: calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border);
    background: transparent;
    color: inherit;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

.report-navigator--contents .sidebar-download-inner {
    background: var(--color-primary);
    color: #fff;
    border-radius: 10px;
    padding: calc(var(--spacing-unit) * 2.5);
}

.report-navigator--contents .sidebar-download-inner p {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
}

.report-navigator--contents .sidebar-download-inner .btn-hub-cta {
    display: flex;
    width: 100%;
    margin-top: 0;
    background: var(--color-aqua);
    color: var(--color-primary);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 6px;
}

.report-navigator--contents .sidebar-download-inner .btn-hub-cta:hover {
    filter: brightness(1.08);
    background: var(--color-aqua);
    color: var(--color-primary);
    text-decoration: none;
}

/* Soften TL;DR when nested inside the report card */
.profile-report-body .tldr-section--hero {
    margin: 0;
    border-radius: 12px;
}

.profile-report-body .chart-section {
    margin: 0;
    padding: calc(var(--spacing-unit) * 4);
    background: rgba(238, 242, 248, 0.45);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.profile-report-body .chart-section > h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0;
}

.profile-report-body .chart-section-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.profile-report-body .chart-section-content:last-child {
    margin-bottom: 0;
}

.profile-report-body .insights-section,
.profile-report-body .methodology,
.profile-report-body details.sources {
    margin: 0;
    padding-top: calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border);
}

.profile-report-body .school-about {
    margin: 0;
    padding-top: calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border);
}

/* School about — institution snapshot card */
.school-about > h2 {
    margin: 0 0 calc(var(--spacing-unit) * 2.5);
    font-size: 1.5rem;
    color: var(--color-primary);
    line-height: 1.25;
}

.school-about-card {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2.5);
    padding: calc(var(--spacing-unit) * 3.5) calc(var(--spacing-unit) * 4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--color-primary);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(10, 28, 74, 0.04);
}

.school-about-card-header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.school-about-kicker {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-aqua-text, var(--color-aqua));
}

.school-about-name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2.4vw, 1.55rem);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.25;
}

.school-about-meta {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-meta, var(--text-secondary));
    line-height: 1.45;
}

.school-about-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    padding: calc(var(--spacing-unit) * 2.5) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.school-about-metric {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.school-about-metric .label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-meta, var(--text-secondary));
}

.school-about-metric .value {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.school-financials-card .school-about-metrics {
    margin-top: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.school-financials-card .school-about-kicker {
    margin: 0 0 0.35rem;
}

.school-financials-card .metric-stack {
    margin: calc(var(--spacing-unit) * 1.5) 0 calc(var(--spacing-unit) * 2);
}

/* Equal columns for endowment + instructional side-by-side */
.hub-layout.ed-page-school .profile-report-body > .chart-section:not(.school-guide):not(.data-guide) .chart-section-content--financials,
.hub-layout.ed-page-school .chart-section-content--financials {
    align-items: start;
}

@media (min-width: 1024px) {
    .hub-layout.ed-page-school .profile-report-body > .chart-section:not(.school-guide):not(.data-guide) .chart-section-content--financials,
    .hub-layout.ed-page-school .chart-section-content--financials {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: calc(var(--spacing-unit) * 4);
    }

    .hub-layout.ed-page-school .chart-section-content--financials .chart-section-left {
        position: static;
        justify-content: flex-start;
    }
}

.school-about-body {
    padding-top: 0;
    padding-bottom: calc(var(--spacing-unit) * 0.5);
}

.school-about-body p {
    margin: 0;
    max-width: 42rem;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.school-about-body strong {
    color: var(--color-primary);
    font-weight: 700;
}

.school-about-facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 3);
    margin: 0;
    padding-top: 0;
    border-top: none;
}

@media (min-width: 720px) {
    .school-about-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: calc(var(--spacing-unit) * 4);
    }
}

.school-about-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.school-about-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-primary);
    background: var(--surface-alt, #f4f7fb);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.school-about-demo {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.school-about-demo-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
    gap: 0.55rem;
    align-items: center;
}

.school-about-demo-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.3;
}

.school-about-demo-track {
    display: block;
    height: 0.45rem;
    background: rgba(10, 28, 74, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.school-about-demo-fill {
    display: block;
    height: 100%;
    background: var(--color-aqua, #00b3c6);
    border-radius: 999px;
}

.school-about-demo-pct {
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
    text-align: right;
    min-width: 3.25rem;
}

@media (max-width: 520px) {
    .school-about-demo-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "label pct"
            "track track";
    }

    .school-about-demo-label { grid-area: label; }
    .school-about-demo-pct { grid-area: pct; }
    .school-about-demo-track { grid-area: track; }
}

.school-about-fact {
    margin: 0;
}

.school-about-fact dt {
    margin: 0 0 0.3rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-meta, var(--text-secondary));
}

.school-about-fact dd {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.4;
}

.school-about-fact a {
    color: var(--color-primary);
    font-weight: 700;
}

@media (min-width: 720px) {
    .school-about-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .school-about-card {
        padding: calc(var(--spacing-unit) * 2.5);
    }

    .school-about-facts {
        grid-template-columns: 1fr;
    }
}

.profile-report-body .key-facts:not(.key-facts--navy) {
    margin: 0;
    padding: calc(var(--spacing-unit) * 3);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.hub-layout.ed-page-school {
    margin-top: 0;
    align-items: stretch;
    gap: calc(var(--spacing-unit) * 4);
}

.hub-layout.ed-page-school .hub-main {
    gap: 0;
}

.hub-layout.ed-page-school .hub-sidebar {
    min-width: 0;
}

.hub-layout.ed-page-school .hub-sidebar-sticky {
    position: static;
    max-height: none;
    display: flex;
    flex-direction: column;
}

.hub-layout.ed-page-school .report-navigator--contents {
    display: flex;
    flex-direction: column;
    max-height: none;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2) 0;
}

.hub-layout.ed-page-school .report-navigator--contents .school-hub-nav {
    flex: 1 1 auto;
    overflow: visible;
    min-height: 0;
    padding: 0;
    margin: 0;
}

.hub-layout.ed-page-school .report-navigator--contents .report-nav-link {
    padding: 0.55rem calc(var(--spacing-unit) * 1.75);
    font-size: 0.85rem;
}

.hub-layout.ed-page-school .report-navigator--contents .report-nav-link.is-active,
.hub-layout.ed-page-school .report-navigator--contents .report-nav-link.active {
    padding-left: calc(var(--spacing-unit) * 1.75 - 4px);
}

.hub-layout.ed-page-school .report-navigator--contents .sidebar-download-card {
    flex: 0 0 auto;
    margin-top: calc(var(--spacing-unit) * 2);
    margin-left: calc(var(--spacing-unit) * 1.25);
    margin-right: calc(var(--spacing-unit) * 1.25);
    padding-top: calc(var(--spacing-unit) * 2);
}

/* Sticky TOC only on desktop hub */
@media (min-width: 1024px) {
    .hub-layout.ed-page-school .hub-sidebar-sticky {
        position: sticky;
        top: var(--site-header-clearance, 7.5rem);
        max-height: calc(100vh - var(--site-header-clearance, 7.5rem) - 0.75rem);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .hub-layout.ed-page-school .report-navigator--contents {
        max-height: none; /* scroll the whole sticky stack (nav + downloads) */
    }

    .hub-layout.ed-page-school .report-navigator--contents .school-hub-nav {
        overflow-y: visible;
    }
}

/* Mobile / tablet school profile */
@media (max-width: 1023px) {
    .hub-layout.ed-page-school {
        gap: calc(var(--spacing-unit) * 3);
    }

    .hub-layout.ed-page-school .report-navigator--contents {
        padding: calc(var(--spacing-unit) * 1.5);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
    }

    .hub-layout.ed-page-school .report-navigator--contents .report-navigator-label {
        margin-bottom: calc(var(--spacing-unit) * 1.25);
    }

    .hub-layout.ed-page-school .report-navigator--contents .school-hub-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.5rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
    }

    .hub-layout.ed-page-school .report-navigator--contents .report-nav-link,
    .hub-layout.ed-page-school .report-navigator--contents .report-nav-link.is-active,
    .hub-layout.ed-page-school .report-navigator--contents .report-nav-link.active {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        white-space: nowrap;
        padding: 0.55rem 0.85rem;
        border: 1px solid var(--border);
        border-left: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface-alt);
        font-size: 0.8rem;
    }

    .hub-layout.ed-page-school .report-navigator--contents .report-nav-link.is-active,
    .hub-layout.ed-page-school .report-navigator--contents .report-nav-link.active {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #fff;
        padding-left: 0.85rem;
    }

    .hub-layout.ed-page-school .report-navigator--contents .report-nav-link.is-active .ti,
    .hub-layout.ed-page-school .report-navigator--contents .report-nav-link.active .ti {
        color: inherit;
    }

    .hub-layout.ed-page-school .report-navigator--contents .report-nav-link .ti {
        display: none;
    }

    .hub-layout.ed-page-school .report-navigator--contents .sidebar-download-card {
        margin: calc(var(--spacing-unit) * 1.5) 0 0;
        padding-top: calc(var(--spacing-unit) * 1.5);
        border-top: 1px solid var(--border-light, #e2e8f0);
    }

    .hub-layout.ed-page-school .report-navigator--contents .sidebar-download-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .hub-layout.ed-page-school .report-navigator--contents .sidebar-download-inner p {
        margin: 0;
    }

    .hub-layout.ed-page-school .profile-report-body {
        gap: calc(var(--spacing-unit) * 4);
        padding: 0;
    }

    .hub-layout.ed-page-school .page-header--report {
        padding: calc(var(--spacing-unit) * 3);
    }

    .hub-layout.ed-page-school .profile-report-body .chart-section {
        padding-left: 0;
        padding-right: 0;
    }

    .hub-layout.ed-page-school .chart-container {
        padding: calc(var(--spacing-unit) * 2.5);
        min-height: 280px;
        height: auto;
    }
}

@media (max-width: 480px) {
    .hub-layout.ed-page-school .cost-metric-grid {
        grid-template-columns: 1fr;
    }

    .hub-layout.ed-page-school .cost-metric-card .value {
        font-size: 1.35rem;
    }

    .top-programs-bars .ranking-bar-meta {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.25rem 0.75rem;
    }

    .top-programs-value {
        font-size: 0.95rem;
    }
}

/* Anchor targets clear sticky site header on all widths */
.hub-layout.ed-page-school [id],
.hub-layout.ed-page-school section[id] {
    scroll-margin-top: 5.5rem;
}

/* Widen report card; tighter body rhythm */
.hub-layout.ed-page-school .profile-report-body {
    gap: calc(var(--spacing-unit) * 5);
    padding: 0;
}

@media (min-width: 768px) {
    .hub-layout.ed-page-school .profile-report-body {
        padding: 0;
    }
}

.hub-layout.ed-page-school .page-header--report {
    padding: calc(var(--spacing-unit) * 4);
}

@media (min-width: 768px) {
    .hub-layout.ed-page-school .page-header--report {
        padding: calc(var(--spacing-unit) * 5);
    }
}

.hub-layout.ed-page-school .page-header--report .page-header-top {
    align-items: flex-start;
}

.hub-layout.ed-page-school .cost-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 480px) {
    .hub-layout.ed-page-school .cost-metric-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) {
    .hub-layout.ed-page-school .cost-metric-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.hub-layout.ed-page-school .cost-metric-card {
    padding: calc(var(--spacing-unit) * 2);
}

.hub-layout.ed-page-school .cost-metric-card .value {
    font-size: 1.5rem;
}

/* Insights full width */
.hub-layout.ed-page-school .insight-timeline {
    max-width: none;
}

.hub-layout.ed-page-school .insight-evidence-quote:not(.quote-card) {
    quotes: "“" "”";
}

.hub-layout.ed-page-school .insight-evidence-quote:not(.quote-card)::before {
    content: open-quote;
}

.hub-layout.ed-page-school .insight-evidence-quote:not(.quote-card)::after {
    content: close-quote;
}

/* Analysis panels closer to mock */
.hub-layout.ed-page-school .analysis-split {
    gap: calc(var(--spacing-unit) * 4);
    padding: calc(var(--spacing-unit) * 4);
    background: var(--surface-alt);
    border: 1px solid var(--border);
}

.hub-layout.ed-page-school .analysis-split--flip {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: calc(var(--spacing-unit) * 4);
}

@media (min-width: 900px) {
    .hub-layout.ed-page-school .analysis-split {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: calc(var(--spacing-unit) * 5);
    }
}

.hub-layout.ed-page-school .analysis-split-chart {
    padding: calc(var(--spacing-unit) * 2);
    box-shadow: inset 0 1px 2px rgba(10, 28, 74, 0.04);
}

.hub-layout.ed-page-school .chart-container--hbar {
    height: 220px;
    min-height: 220px;
    overflow: hidden;
}

.hub-layout.ed-page-school .chart-container--hbar-tall {
    height: 300px;
    min-height: 300px;
}

.hub-layout.ed-page-school .analysis-split-chart .chart-note {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
}

/* School / data guide: FAQ accordion + metric grids (not a chart panel) */
.hub-layout.ed-page-school .school-guide.chart-section,
.hub-layout.ed-page-school .data-guide.school-guide {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: calc(var(--spacing-unit) * 2) 0 0;
    box-shadow: none;
}

.hub-layout.ed-page-school .school-guide .school-guide-body,
.hub-layout.ed-page-school .data-guide .data-guide-body {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    max-width: none;
}

.hub-layout.ed-page-school .school-guide-body .ranking-table,
.hub-layout.ed-page-school .data-guide-answer .ranking-table,
.hub-layout.ed-page-school .guide-income-table {
    background: var(--surface);
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    margin: calc(var(--spacing-unit) * 2) 0 0;
}

.hub-layout.ed-page-school .guide-income-table thead th {
    background: var(--color-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.85rem 1rem;
    border: none;
}

.hub-layout.ed-page-school .guide-income-table tbody td {
    font-variant-numeric: tabular-nums;
}

/* Soften remaining chart sections — less nested-card noise */
.hub-layout.ed-page-school .profile-report-body > .chart-section:not(.school-guide):not(.data-guide) {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: calc(var(--spacing-unit) * 4);
}

.hub-layout.ed-page-school .profile-report-body > .chart-section:not(.school-guide):not(.data-guide) .chart-section-content {
    background: var(--surface-alt);
    border: none;
    box-shadow: none;
    padding: calc(var(--spacing-unit) * 3);
}

.hub-layout.ed-page-school .profile-report-body > .chart-section:not(.school-guide):not(.data-guide) .chart-insight {
    background: transparent;
    border: none;
    padding: 0;
}

.hub-layout.ed-page-school .profile-report-body > .chart-section:not(.school-guide):not(.data-guide) .chart-section-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Final mobile overrides (must follow school desktop padding rules above) */
@media (max-width: 1023px) {
    .hub-layout.ed-page-school .profile-report-body {
        gap: calc(var(--spacing-unit) * 3);
        padding: 0;
    }

    .hub-layout.ed-page-school .page-header--report {
        padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 2);
    }

    .hub-layout.ed-page-school .profile-report-body .chart-section,
    .hub-layout.ed-page-school .profile-report-body > .chart-section:not(.school-guide):not(.data-guide) {
        padding: calc(var(--spacing-unit) * 2);
        border-radius: 12px;
    }

    .hub-layout.ed-page-school .profile-report-body .chart-section-content,
    .hub-layout.ed-page-school .profile-report-body > .chart-section:not(.school-guide):not(.data-guide) .chart-section-content {
        padding: calc(var(--spacing-unit) * 1.5);
        background: transparent;
        border: none;
    }

    .hub-layout.ed-page-school .top-programs-panel {
        margin: calc(var(--spacing-unit) * 2) 0;
    }

    .hub-layout.ed-page-school .top-programs-bars {
        padding: calc(var(--spacing-unit) * 2);
    }

    .hub-layout.ed-page-school .chart-container {
        padding: calc(var(--spacing-unit) * 1.5);
        min-height: 240px;
        height: auto;
    }

    .hub-layout.ed-page-school .key-facts:not(.key-facts--navy) {
        padding: calc(var(--spacing-unit) * 2);
    }

    .hub-layout.ed-page-school section.faq {
        margin: calc(var(--spacing-unit) * 3) 0;
    }
}

.hub-layout.ed-page-school .key-facts:not(.key-facts--navy) {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: calc(var(--spacing-unit) * 4);
}

.hub-layout.ed-page-school .key-facts h2 {
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.hub-layout.ed-page-school .key-facts ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 2);
}

@media (min-width: 640px) {
    .hub-layout.ed-page-school .key-facts ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.hub-layout.ed-page-school .key-facts li {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: calc(var(--spacing-unit) * 2.5);
    padding-left: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border);
    border-radius: 10px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
    line-height: 1.45;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.hub-layout.ed-page-school .key-facts li::before {
    display: none;
}

.hub-layout.ed-page-school .key-facts li strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-meta);
}

.hub-layout.ed-page-school .key-facts li em {
    font-style: normal;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.hub-layout.ed-page-school .editorial-disclaimer {
    margin: 0;
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    background: rgba(0, 179, 198, 0.06);
    border: 1px solid rgba(0, 179, 198, 0.2);
    border-radius: 10px;
    font-size: 0.9rem;
}

.hub-layout.ed-page-school .market-insight {
    width: 100%;
}

.hub-layout.ed-page-school .analysis-split-copy .section-title--display {
    line-height: 1.15;
}

.hub-layout.ed-page-school .insight-timeline-body {
    padding-bottom: calc(var(--spacing-unit) * 4);
}

.hub-layout.ed-page-school .insight-timeline-item:not(:last-child) .insight-timeline-body {
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.hub-layout.ed-page-school .cost-deep-dives {
    gap: calc(var(--spacing-unit) * 4);
}

.hub-layout.ed-page-school .analysis-split-chart {
    background: #fff;
    box-shadow: 0 1px 3px rgba(10, 28, 74, 0.06);
}

.hub-layout.ed-page-school .report-navigator--contents .report-nav-link.is-active .ti,
.hub-layout.ed-page-school .report-navigator--contents .report-nav-link.active .ti {
    color: var(--color-aqua-text);
}



main:has(.ed-page-school) {
    background: var(--background, #f7f9fd);
    padding-top: calc(var(--spacing-unit) * 2);
    padding-bottom: calc(var(--spacing-unit) * 6);
}

main:has(.ed-page-school) > .container {
    padding-top: 0;
    padding-bottom: calc(var(--spacing-unit) * 6);
}

main:has(.ed-page-school) > .container > .breadcrumbs {
    margin: 0 0 calc(var(--spacing-unit) * 2);
}


/* ==========================================================================
   Insight timeline (Stitch Insight → Evidence → Why it matters)
   ========================================================================== */

.insights-section-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.insights-section-heading h2 {
    margin: 0;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.insights-accent-bar {
    display: block;
    width: 3rem;
    height: 4px;
    background: var(--color-aqua);
    flex-shrink: 0;
}

.insights-section-lead {
    margin: 0 0 calc(var(--spacing-unit) * 4);
    color: var(--text-secondary);
    max-width: 40rem;
}

.insight-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 42rem;
}

.insight-timeline-item {
    display: flex;
    gap: calc(var(--spacing-unit) * 3);
}

.insight-timeline-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 2.5rem;
}

.insight-timeline-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.insight-timeline-line {
    width: 1px;
    flex: 1;
    min-height: 1.5rem;
    margin: 0.35rem 0;
    background: var(--border);
}

.insight-timeline-body {
    flex: 1;
    min-width: 0;
    padding-bottom: calc(var(--spacing-unit) * 5);
}

.insight-timeline-item:last-child .insight-timeline-body {
    padding-bottom: 0;
}

.insight-timeline-body h3 {
    margin: 0 0 calc(var(--spacing-unit) * 2);
    font-size: 1.15rem;
    color: var(--color-primary);
    line-height: 1.35;
}

.insight-evidence-quote {
    margin: 0 0 calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 3);
    background: var(--surface-alt);
    border-left: 4px solid var(--color-aqua);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* Quote card (Design System) — journalistic evidence attribution */
.quote-card {
    margin: 0 0 calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 3);
    background: var(--surface-alt);
    border-left: 4px solid var(--color-aqua);
    border-radius: 0 12px 12px 0;
}

.quote-card p {
    margin: 0 0 calc(var(--spacing-unit) * 1.5);
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.55;
}

.quote-card footer {
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--text-meta, var(--text-secondary));
    font-size: 0.85rem;
    font-style: normal;
}

.quote-card cite {
    font-style: normal;
    font-weight: 700;
    color: var(--color-primary);
}

.insight-timeline-item:nth-child(even) .insight-evidence-quote,
.insight-timeline-item:nth-child(even) .quote-card {
    border-left-color: var(--color-primary);
}

.insight-why {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.insight-why-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.school-guide-lead,
.data-guide-lead {
    margin: 0 0 calc(var(--spacing-unit) * 4);
    color: var(--text-secondary);
    max-width: 46rem;
    line-height: 1.6;
}

.data-guide-header,
.school-guide-header {
    margin-bottom: calc(var(--spacing-unit) * 1);
}

/* Nested <header>s in school guide / campus snapshot must not stick with site chrome */
.school-guide header,
.data-guide header,
.school-guide-more header,
.profile-report-body header {
    position: static;
    top: auto;
    z-index: auto;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    padding: 0;
}

.data-guide-header h2,
.school-guide-header h2,
.school-guide > h2 {
    margin: 0.35rem 0 0.75rem;
}

.data-guide-body,
.school-guide-body,
.school-guide-accordion {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
}

/* Accordion cards reuse FAQ chrome; reset flat-article leftovers */
details.school-guide-item.faq-item,
details.data-guide-item.faq-item {
    margin: 0;
    padding: 0;
    border-top: none;
}

.data-guide-answer,
.school-guide-answer {
    color: var(--text-secondary);
    line-height: 1.65;
}

details.school-guide-item .faq-answer,
details.school-guide-item .school-guide-answer {
    max-width: none;
}

details.school-guide-item .faq-answer p,
details.school-guide-item .school-guide-answer p {
    max-width: 46rem;
}

.data-guide-answer > :first-child,
.school-guide-answer > :first-child {
    margin-top: 0;
}

.data-guide-answer > :last-child,
.school-guide-answer > :last-child {
    margin-bottom: 0;
}

.data-guide-answer p,
.school-guide-answer p {
    margin: 0 0 0.75rem;
}

.data-guide-answer strong,
.school-guide-answer strong {
    color: var(--color-primary);
}

.guide-lead-line {
    margin: 0 0 calc(var(--spacing-unit) * 2);
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.guide-footnote {
    margin: calc(var(--spacing-unit) * 2) 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-meta, var(--text-secondary));
}

/* ---- School guide dashboard (TL;DR + cards) ---- */
.school-guide-tldr {
    margin: 0 0 calc(var(--spacing-unit) * 4);
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 4.5);
    background: var(--color-primary);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(10, 28, 74, 0.18);
}

.school-guide-tldr-head {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.school-guide-tldr-badge {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--color-aqua);
    box-shadow: 0 0 0 4px rgba(0, 179, 198, 0.25);
}

.school-guide-tldr-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.school-guide-tldr-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 3);
}

@media (min-width: 900px) {
    .school-guide-tldr-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: calc(var(--spacing-unit) * 4);
    }

    .school-guide-tldr-grid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.school-guide-tldr-kicker {
    margin: 0 0 0.45rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.school-guide-tldr-text {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
}

.school-guide-tldr-text strong {
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.school-guide-tldr-text--muted {
    font-style: italic;
    color: rgba(255, 255, 255, 0.78);
}

/* Editorial finding inside dark TL;DR panel — light text, readable surface */
.school-guide-tldr .editorial-finding,
.school-guide-tldr .editors-analysis {
    margin: 0 0 calc(var(--spacing-unit) * 3);
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    background: rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--color-aqua, #00b3c6);
    border-radius: 0 8px 8px 0;
}

.school-guide-tldr .editorial-finding-kicker,
.school-guide-tldr .editors-analysis-kicker {
    color: var(--color-aqua, #00b3c6);
}

.school-guide-tldr .editorial-finding-text,
.school-guide-tldr .editors-analysis-text {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

.school-guide-tldr .editorial-finding-text strong,
.school-guide-tldr .editors-analysis-text strong {
    color: #fff;
}

.school-guide-tldr-col--accent {
    padding: calc(var(--spacing-unit) * 2.5);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    border-left: 4px solid var(--color-aqua);
}

.school-guide-dashboard {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 3);
    margin: 0 0 calc(var(--spacing-unit) * 4);
}

@media (min-width: 960px) {
    .school-guide-dashboard {
        grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 0.9fr);
        gap: calc(var(--spacing-unit) * 3.5);
        align-items: start;
    }
}

.school-guide-dashboard-main,
.school-guide-dashboard-aside {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
    min-width: 0;
}

.school-guide-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: calc(var(--spacing-unit) * 3.5) calc(var(--spacing-unit) * 4);
    box-shadow: 0 1px 3px rgba(10, 28, 74, 0.04);
}

.school-guide-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.school-guide-card-head h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
}

.guide-card-subhead {
    margin: 0 0 calc(var(--spacing-unit) * 2);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-meta, var(--text-secondary));
}

.guide-card-foot {
    margin: calc(var(--spacing-unit) * 2) 0 0;
    padding-top: calc(var(--spacing-unit) * 2);
    border-top: 1px solid var(--border);
    font-size: 0.88rem;
    color: var(--text-meta, var(--text-secondary));
}

.guide-finance-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.guide-finance-tile {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    background: var(--surface-alt, #eef2f8);
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 10px;
}

.guide-finance-tile--accent {
    background: var(--surface-alt, #eef2f8);
    border-left: 4px solid var(--color-aqua);
}

.guide-finance-label {
    margin: 0 0 0.4rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-meta, var(--text-secondary));
}

.guide-finance-tile--accent .guide-finance-label {
    color: var(--color-aqua-text, var(--color-aqua));
}

.guide-finance-value {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2.8vw, 1.75rem);
    font-weight: 800;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.guide-finance-tile--accent .guide-finance-value {
    color: var(--color-aqua-text, #0a5f6d);
}

.guide-finance-table-block {
    margin-top: calc(var(--spacing-unit) * 1);
}

.guide-outcomes-stack {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3.5);
}

.guide-outcome-meter {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.guide-outcome-meter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.guide-outcome-meter-label {
    font-size: 0.95rem;
    color: var(--text-primary, var(--color-primary));
    font-weight: 600;
}

.guide-outcome-meter-value {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
}

.guide-outcome-meter-value.is-success {
    color: #059669;
}

.guide-outcome-track {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--surface-container, #e6e8ec);
    overflow: hidden;
}

.guide-outcome-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.guide-outcome-fill.is-success {
    background: #059669;
}

.guide-admit-hero {
    margin: 0 0 0.2rem;
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5vw, 3.25rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #c45a3a;
    font-variant-numeric: tabular-nums;
}

.guide-admit-hero-label {
    margin: 0 0 calc(var(--spacing-unit) * 2.5);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-meta, var(--text-secondary));
}

.guide-admit-points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
}

.guide-admit-points li {
    padding-left: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.guide-admit-points strong {
    color: var(--color-primary);
}

.school-guide-value {
    margin: 0 0 calc(var(--spacing-unit) * 4);
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 4.5);
    background: var(--surface-alt, #eef2f8);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.school-guide-value-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 3.5);
}

@media (min-width: 860px) {
    .school-guide-value-inner {
        grid-template-columns: minmax(12rem, 0.85fr) minmax(0, 1.6fr);
        gap: calc(var(--spacing-unit) * 5);
        align-items: start;
    }
}

.school-guide-value-intro h3 {
    margin: 0 0 0.75rem;
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.25;
}

.school-guide-value-intro h3::after {
    content: "";
    display: block;
    width: 4.5rem;
    height: 3px;
    margin-top: 1rem;
    background: var(--color-aqua);
    border-radius: 2px;
}

.school-guide-value-note {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-meta, var(--text-secondary));
}

.school-guide-value-card {
    padding: calc(var(--spacing-unit) * 3.5);
    background: var(--surface);
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(10, 28, 74, 0.04);
}

.school-guide-value-card p {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--text-primary, var(--color-primary));
}

.school-guide-value-card p + p {
    margin-top: 0.75rem;
}

.school-guide-value-caveat {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

.school-guide-value-card strong {
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.school-guide-chips {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 1.5);
    margin-top: calc(var(--spacing-unit) * 2.5);
}

.school-guide-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.school-guide-chip--check {
    background: rgba(5, 150, 105, 0.1);
    color: #047857;
}

.school-guide-chip--trend {
    background: rgba(46, 80, 116, 0.1);
    color: #2e5074;
}

.school-guide-chip--aid {
    background: rgba(0, 179, 198, 0.12);
    color: var(--color-aqua-text, #0a5f6d);
}

.school-guide-chip--selective {
    background: rgba(196, 90, 58, 0.12);
    color: #a04830;
}

.school-guide-more {
    margin-top: calc(var(--spacing-unit) * 2);
}

.school-guide-more-header {
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.school-guide-more-heading {
    margin: 0.35rem 0 0.5rem;
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2.2vw, 1.45rem);
    font-weight: 700;
    color: var(--color-primary);
}

.school-guide-more-lead {
    margin: 0;
    max-width: 40rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.school-guide-fact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 3);
}

@media (min-width: 720px) {
    .school-guide-fact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: calc(var(--spacing-unit) * 3.5);
    }
}

.school-guide-fact-panel {
    margin: 0;
    padding: calc(var(--spacing-unit) * 3.5) calc(var(--spacing-unit) * 4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(10, 28, 74, 0.04);
    min-width: 0;
}

.school-guide-fact-kicker {
    margin: 0 0 0.4rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-aqua-text, var(--color-aqua));
}

.school-guide-fact-panel h4 {
    margin: 0 0 calc(var(--spacing-unit) * 2.5);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
}

.school-guide-fact-hero {
    margin: 0 0 0.4rem;
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.25;
    word-break: break-word;
}

.school-guide-fact-hero-label {
    margin: 0 0 calc(var(--spacing-unit) * 2.5);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-meta, var(--text-secondary));
    line-height: 1.35;
}

.school-guide-fact-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.school-guide-fact-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--border-light, #e8ecf2);
    margin: 0;
}

.school-guide-fact-row:first-child {
    border-top: 1px solid var(--border-light, #e8ecf2);
    padding-top: 0.85rem;
}

.school-guide-fact-row:last-child {
    padding-bottom: 0;
}

.school-guide-fact-row dt {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-meta, var(--text-secondary));
    line-height: 1.35;
}

.school-guide-fact-row dd {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    text-align: left;
    line-height: 1.4;
    max-width: none;
    word-break: break-word;
}

.school-guide-fact-panel .guide-footnote {
    margin-top: calc(var(--spacing-unit) * 2.5);
    padding-top: calc(var(--spacing-unit) * 2);
    border-top: 1px solid var(--border-light, #e8ecf2);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

@media (max-width: 560px) {
    .guide-finance-tiles {
        grid-template-columns: 1fr;
    }

    .school-guide-tldr,
    .school-guide-value,
    .school-guide-card {
        padding: calc(var(--spacing-unit) * 3);
    }
}

.guide-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing-unit) * 2);
    margin: 0;
}

.guide-stat {
    margin: 0;
    padding: calc(var(--spacing-unit) * 2.25) calc(var(--spacing-unit) * 2.5);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.guide-stat dt {
    margin: 0 0 0.35rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-meta, var(--text-secondary));
    line-height: 1.3;
}

.guide-stat dd {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    font-weight: 800;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    word-break: break-word;
}

.guide-table-wrap {
    margin-top: calc(var(--spacing-unit) * 2.5);
}

.guide-income-table th.text-right,
.guide-income-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.guide-program-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
}

.guide-program-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 2.5);
    border-top: 1px solid var(--border-light, #e8ecf2);
    font-size: 0.95rem;
    line-height: 1.4;
}

.guide-program-list li:first-child {
    border-top: none;
}

.guide-program-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--color-primary);
    font-weight: 600;
}

.guide-program-name a {
    color: inherit;
    text-decoration: none;
}

.guide-program-name a:hover {
    text-decoration: underline;
}

.guide-program-count {
    flex: 0 0 auto;
    font-family: var(--font-heading);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

@media (min-width: 720px) {
    .guide-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .guide-stat-grid:has(.guide-stat:only-child) {
        grid-template-columns: minmax(12rem, 18rem);
    }

    .guide-stat-grid:has(.guide-stat:nth-child(4):last-child),
    .guide-stat-grid:has(.guide-stat:nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .guide-stat-grid {
        grid-template-columns: 1fr;
    }

    .guide-program-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

.profile-report-body .chart-insight {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.profile-report-body .chart-insight h3 {
    margin: 0 0 calc(var(--spacing-unit) * 2.5);
    font-size: 1.05rem;
    color: var(--color-aqua-text);
}

/* Hero metrics belong in .metric-stack — do not promote prose <strong> to display:block
   (that orphaned punctuation like "White\n.") */

/* Metric stack — sitewide (admissions, cost panels, design system) */
.metric-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.metric-stack--panel {
    padding: var(--space-3, 1.25rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(10, 28, 74, 0.04));
}

.metric-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin: 0;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border);
}

.metric-row:first-child {
    padding-top: 0;
}

.metric-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.metric-row--hero {
    padding-bottom: 1.15rem;
    margin-bottom: 0.15rem;
}

.metric-value {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.metric-row--hero .metric-value {
    font-size: clamp(1.85rem, 3.2vw, 2.35rem);
    font-weight: 900;
    color: var(--color-primary);
}

.metric-row--hero .metric-value.is-aqua,
.metric-value.is-aqua {
    color: var(--color-aqua-text);
}

/* Accessible accent text: brand aqua is a fill — use text tokens for copy */
.is-aqua {
    color: var(--color-aqua-text);
}

.key-facts.key-facts--navy .is-aqua,
.mission-bar .is-aqua,
.report-navigator--branded .is-aqua {
    color: var(--color-aqua-on-dark);
}


.metric-label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-meta);
    line-height: 1.35;
}

.metric-note {
    margin: 1rem 0 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.hub-layout.ed-page-school .metric-note {
    margin: 1rem 0 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.55;
}


.hub-layout.ed-page-school .chart-section-content {
    align-items: stretch;
}

/* Cost attendance: heroes + chart on one row; detail tiles full-width below */
.hub-layout.ed-page-school .chart-section-content--cost-breakdown,
.chart-section-content--cost-breakdown {
    align-items: start;
    gap: calc(var(--spacing-unit) * 3);
}

@media (min-width: 900px) {
    .hub-layout.ed-page-school .chart-section-content--cost-breakdown,
    .chart-section-content--cost-breakdown {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "title title"
            "heroes chart"
            "details details";
        gap: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3.5);
    }

    .hub-layout.ed-page-school .chart-section-content--cost-breakdown > .chart-section-left,
    .hub-layout.ed-page-school .profile-report-body > .chart-section:not(.school-guide):not(.data-guide)
        .chart-section-content--cost-breakdown > .chart-section-left,
    .hub-layout.ed-page-school .chart-section-content--cost-breakdown .chart-insight,
    .chart-section-content--cost-breakdown > .chart-section-left,
    .chart-section-content--cost-breakdown .chart-insight {
        display: contents;
    }

    .chart-section-content--cost-breakdown .chart-insight > h3 {
        grid-area: title;
        margin: 0 0 0.25rem;
    }

    .chart-section-content--cost-breakdown .metric-stack--cost-heroes {
        grid-area: heroes;
        align-self: start;
    }

    .hub-layout.ed-page-school .chart-section-content--cost-breakdown > .chart-section-right,
    .chart-section-content--cost-breakdown > .chart-section-right {
        grid-area: chart;
        align-self: start;
        min-width: 0;
    }

    .chart-section-content--cost-breakdown .metric-stack--cost-details {
        grid-area: details;
    }

    .chart-section-content--cost-breakdown .metric-note {
        grid-area: details;
        margin: calc(var(--spacing-unit) * 2) 0 0;
    }
}

.chart-container.chart-container--cost-compare {
    height: 220px;
    min-height: 220px;
    max-height: 240px;
    margin-bottom: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 2);
}

.chart-section-content--cost-breakdown .metric-stack--cost-heroes {
    margin: 0;
}

.chart-section-content--cost-breakdown .metric-stack--cost-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: calc(var(--spacing-unit) * 0.5) 0 0;
    border-top: 1px solid var(--border);
}

@media (min-width: 640px) {
    .chart-section-content--cost-breakdown .metric-stack--cost-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: calc(var(--spacing-unit) * 4);
        padding-top: calc(var(--spacing-unit) * 2);
    }
}

@media (min-width: 1100px) {
    .chart-section-content--cost-breakdown .metric-stack--cost-details {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.chart-section-content--cost-breakdown .metric-stack--cost-details .metric-row {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-light, #e8ecf2);
}

.chart-section-content--cost-breakdown .metric-stack--cost-details .metric-row:last-child {
    border-bottom: 1px solid var(--border-light, #e8ecf2);
}

.chart-section-content--cost-breakdown .metric-row {
    padding: 0.65rem 0;
}

.chart-section-content--cost-breakdown .metric-row--hero {
    padding-bottom: 0.85rem;
}

.chart-section-content--cost-breakdown .metric-row--hero .metric-value {
    font-size: clamp(1.55rem, 2.6vw, 1.95rem);
}

.chart-section-content--cost-breakdown .metric-value {
    font-size: 1.12rem;
}

.chart-section-content--cost-breakdown .metric-label {
    font-size: 0.72rem;
    line-height: 1.35;
}

/* ROI panel — metric stack + horizontal comparison chart */
.chart-section-content--roi {
    align-items: stretch;
    gap: calc(var(--spacing-unit) * 4);
}

@media (min-width: 900px) {
    .chart-section-content--roi {
        grid-template-columns: minmax(16rem, 0.95fr) minmax(0, 1.35fr);
    }
}

.chart-insight--roi {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.metric-stack--roi-heroes {
    margin: 0 0 calc(var(--spacing-unit) * 1);
}

.metric-stack--roi-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding-top: calc(var(--spacing-unit) * 1.5);
    border-top: 1px solid var(--border);
}

@media (min-width: 520px) {
    .metric-stack--roi-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: calc(var(--spacing-unit) * 3.5);
    }
}

.metric-stack--roi-details .metric-row {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-light, #e8ecf2);
}

@media (min-width: 520px) {
    .metric-stack--roi-details .metric-row:nth-last-child(-n+2) {
        border-bottom: none;
    }
}

@media (max-width: 519px) {
    .metric-stack--roi-details .metric-row:last-child {
        border-bottom: none;
    }
}

.chart-insight--roi .metric-row--hero .metric-value {
    font-size: clamp(1.75rem, 3vw, 2.15rem);
}

.chart-insight--roi .metric-value {
    font-size: 1.15rem;
}

.chart-insight--roi .metric-label {
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.chart-container--roi {
    height: 260px;
    min-height: 240px;
    max-height: 280px;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

/* Employment outcomes — same metric-stack pattern as ROI */
.chart-section-content--employment {
    align-items: stretch;
    gap: calc(var(--spacing-unit) * 4);
}

@media (min-width: 900px) {
    .chart-section-content--employment {
        grid-template-columns: minmax(16rem, 0.95fr) minmax(0, 1.35fr);
    }
}

.chart-insight--employment {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.metric-stack--employment-heroes {
    margin: 0 0 calc(var(--spacing-unit) * 1);
}

.metric-stack--employment-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding-top: calc(var(--spacing-unit) * 1.5);
    border-top: 1px solid var(--border);
}

@media (min-width: 520px) {
    .metric-stack--employment-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: calc(var(--spacing-unit) * 3.5);
    }

    .metric-stack--employment-details .metric-row:nth-last-child(-n+2) {
        border-bottom: none;
    }
}

.metric-stack--employment-details .metric-row {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-light, #e8ecf2);
}

@media (max-width: 519px) {
    .metric-stack--employment-details .metric-row:last-child {
        border-bottom: none;
    }
}

.chart-insight--employment .metric-row--hero .metric-value {
    font-size: clamp(1.75rem, 3vw, 2.15rem);
}

.chart-insight--employment .metric-value {
    font-size: 1.15rem;
}

.chart-insight--employment .metric-label {
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.chart-container--employment {
    height: 260px;
    min-height: 240px;
    max-height: 280px;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

/* Compact admissions sub-panels (test scores / GPA) — hug content, no tall empty cells */
.hub-layout.ed-page-school .profile-report-body > .chart-section:not(.school-guide):not(.data-guide) .chart-section-content--compact,
.hub-layout.ed-page-school .chart-section-content--compact {
    align-items: start;
    background: transparent;
    padding: 0;
    gap: calc(var(--spacing-unit) * 2.5);
}

.hub-layout.ed-page-school .profile-report-body > .chart-section:not(.school-guide):not(.data-guide) .chart-section-content--compact .chart-section-left,
.hub-layout.ed-page-school .chart-section-content--compact .chart-section-left {
    justify-content: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
}

.hub-layout.ed-page-school .profile-report-body > .chart-section:not(.school-guide):not(.data-guide) .chart-section-content--compact .chart-section-right,
.hub-layout.ed-page-school .chart-section-content--compact .chart-section-right {
    min-height: 0;
}

.hub-layout.ed-page-school .profile-report-body > .chart-section:not(.school-guide):not(.data-guide) .chart-section-content--compact .score-range-panel,
.hub-layout.ed-page-school .chart-section-content--compact .score-range-panel {
    height: auto;
    width: 100%;
}

.hub-layout.ed-page-school .profile-report-body > .chart-section:not(.school-guide):not(.data-guide) .chart-section-content--compact .chart-note,
.hub-layout.ed-page-school .chart-section-content--compact .chart-note {
    margin-top: calc(var(--spacing-unit) * 1.25);
}

@media (min-width: 1024px) {
    .hub-layout.ed-page-school .profile-report-body > .chart-section:not(.school-guide):not(.data-guide) .chart-section-content--compact,
    .hub-layout.ed-page-school .chart-section-content--compact {
        grid-template-columns: minmax(13rem, 18rem) minmax(0, 1fr);
        gap: calc(var(--spacing-unit) * 2.5);
    }
}

.hub-layout.ed-page-school .market-insight {
    padding: calc(var(--spacing-unit) * 3);
}

/* ==========================================================================
   School profile — Stitch analysis panels (Alabama costs mock parity)
   ========================================================================== */

.overview-lead {
    margin: 0 0 calc(var(--spacing-unit) * 5);
    max-width: 42rem;
    color: var(--text-secondary);
    line-height: 1.65;
    font-size: 1.05rem;
}

.section-title--display {
    margin: 0 0 calc(var(--spacing-unit) * 2);
    font-family: var(--font-heading);
    font-weight: 900;
    font-style: italic;
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--color-primary);
}

.section-kicker--navy {
    color: var(--color-primary);
}

.benchmark-comparison-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 calc(var(--spacing-unit) * 3);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--color-primary);
}

.benchmark-comparison-title .ti {
    color: var(--color-aqua-text);
}

.benchmark-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(10, 28, 74, 0.04);
}

.benchmark-table {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    background: var(--surface);
}

.benchmark-table thead {
    background: var(--surface-alt);
}

.benchmark-table th,
.benchmark-table td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
}

.benchmark-table thead th {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-meta);
    text-align: left;
}

.benchmark-table thead th.text-right,
.benchmark-table .currency-cell,
.benchmark-table .text-right {
    text-align: right;
}

.benchmark-table thead th.text-center,
.benchmark-table .text-center,
.benchmark-table .num {
    text-align: center;
}

.benchmark-table .currency-cell {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.benchmark-table tbody tr.is-focus-row {
    background: rgba(0, 179, 198, 0.06);
}

.benchmark-table tbody tr.is-focus-row th,
.benchmark-table tbody tr.is-focus-row .currency-cell {
    color: var(--color-primary);
    font-weight: 700;
}

.benchmark-table tbody tr:last-child th,
.benchmark-table tbody tr:last-child td {
    border-bottom: none;
}

.cost-deep-dives {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 6);
}

/* Investigation framing (data journalism) */
.investigation-header {
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.investigation-question {
    margin: 0.35rem 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.45rem, 2.8vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--color-primary);
}

.investigation-subhead {
    font-size: clamp(1.15rem, 2vw, 1.35rem) !important;
}

.editorial-finding,
.editors-analysis {
    margin: calc(var(--spacing-unit) * 2.5) 0 calc(var(--spacing-unit) * 3);
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    border-left: 3px solid var(--color-aqua, #00b3c6);
    background: rgba(0, 179, 198, 0.06);
}

.editors-analysis {
    border-left-color: var(--color-primary);
    background: rgba(10, 28, 74, 0.04);
}

.editorial-finding-kicker,
.editors-analysis-kicker,
.research-findings-kicker,
.data-notes-kicker,
.analysis-module-label {
    display: block;
    margin: 0 0 0.4rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-aqua-text, #0d9488);
}

.editors-analysis-kicker {
    color: var(--color-primary);
}

.editorial-finding-text,
.editors-analysis-text {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--color-primary);
    font-weight: 600;
}

/* Citation units — AIO / LLM retrieval */
.answer-first-callout {
    margin: calc(var(--spacing-unit) * 3) 0 calc(var(--spacing-unit) * 2.5);
    padding: calc(var(--spacing-unit) * 2.75) calc(var(--spacing-unit) * 3.25);
    background: var(--surface-alt, #f4f7fb);
    border: 1px solid var(--border, #e2e8f0);
    border-left: 4px solid var(--color-aqua, #00b3c6);
    border-radius: 0 10px 10px 0;
}

.answer-first-kicker {
    display: block;
    margin: 0 0 0.45rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-aqua-text, #0d9488);
}

.answer-first {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1rem, 1.7vw, 1.125rem);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-primary);
    max-width: 42rem;
}

.findings-bullets {
    margin: 0 0 calc(var(--spacing-unit) * 3);
    padding: calc(var(--spacing-unit) * 2.25) calc(var(--spacing-unit) * 2.75);
    background: var(--surface-alt, #f5f7fa);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.findings-bullets-kicker,
.metric-glossary-kicker,
.key-takeaway-label {
    display: block;
    margin: 0 0 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-aqua-text, #0d9488);
}

.findings-bullets ul {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--color-primary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.findings-bullets li + li {
    margin-top: 0.4rem;
}

.citation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.65rem;
    margin: calc(var(--spacing-unit) * 1.5) 0 calc(var(--spacing-unit) * 2);
}

.citation-meta-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--text-secondary);
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.citation-meta-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
    font-size: 0.62rem;
}

.key-takeaway {
    margin: calc(var(--spacing-unit) * 3) 0 0;
    padding: calc(var(--spacing-unit) * 2.25) calc(var(--spacing-unit) * 2.75);
    background: rgba(10, 28, 74, 0.04);
    border: 1px solid var(--border);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 10px 10px 0;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-primary);
}

.key-takeaway-label {
    display: block;
    margin: 0 0 0.4rem;
}

.metric-definition,
.metric-glossary {
    margin: calc(var(--spacing-unit) * 2) 0;
}

.metric-definition {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.metric-definition dfn {
    font-style: normal;
    font-weight: 700;
    color: var(--color-primary);
}

.metric-glossary dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.glossary-item dt {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-primary);
}

.glossary-item dd {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.analysis-method {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.overview-citation-lead {
    margin: calc(var(--spacing-unit) * 1.5) 0 calc(var(--spacing-unit) * 2.5);
}

.overview-citation-lead .answer-first-callout {
    margin-top: 0;
}

.overview-citation-lead .findings-bullets {
    margin-top: calc(var(--spacing-unit) * 2);
}

.analysis-module {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0 0 calc(var(--spacing-unit) * 2);
}

.analysis-finding,
.analysis-evidence,
.analysis-interpretation,
.analysis-limitation {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.analysis-finding {
    color: var(--color-primary);
    font-weight: 600;
}

.analysis-limitation {
    font-size: 0.88rem;
    opacity: 0.92;
}

.data-notes {
    margin-top: calc(var(--spacing-unit) * 2);
    padding-top: calc(var(--spacing-unit) * 1.5);
    border-top: 1px dashed var(--border);
}

.data-notes ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
}

.data-notes li + li {
    margin-top: 0.35rem;
}

.research-findings {
    margin-top: calc(var(--spacing-unit) * 2);
}

.research-findings-kicker {
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.insight-limitation {
    margin: 0.65rem 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Bridge: published tuition vs average net price */
.tuition-highlight {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0 0 calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background: var(--surface-alt, #f4f7fb);
    border-left: 3px solid var(--color-aqua, #00b3c6);
    border-radius: 0 8px 8px 0;
}

.tuition-highlight-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-meta, var(--text-secondary));
}

.tuition-highlight-value {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.cost-sticker-gap {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 2);
    align-items: baseline;
    padding: calc(var(--spacing-unit) * 1.5) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

@media (min-width: 720px) {
    .cost-sticker-gap {
        grid-template-columns: minmax(10rem, max-content) 1fr;
        gap: calc(var(--spacing-unit) * 4);
        align-items: center;
    }
}

.cost-sticker-gap-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cost-sticker-gap-value {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.6rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-aqua-text, #0d9488);
    letter-spacing: -0.02em;
}

.cost-sticker-gap-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.cost-sticker-gap-body {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.cost-sticker-gap-body strong {
    color: var(--color-primary);
    font-weight: 700;
}

.analysis-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 5);
    align-items: center;
    padding: calc(var(--spacing-unit) * 4);
    background: rgba(238, 242, 248, 0.5);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.analysis-split--flip {
    background: transparent;
    border: none;
    padding: 0;
}

@media (min-width: 900px) {
    .analysis-split {
        grid-template-columns: 1fr 1fr;
        gap: calc(var(--spacing-unit) * 6);
        padding: calc(var(--spacing-unit) * 5);
    }

    .analysis-split--flip .analysis-split-chart {
        order: 1;
    }

    .analysis-split--flip .analysis-split-copy {
        order: 2;
    }
}

.analysis-split-copy p {
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0 0 calc(var(--spacing-unit) * 3);
}

.market-insight {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: calc(var(--spacing-unit) * 2.5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.market-insight .ti {
    color: var(--color-aqua-text);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.market-insight p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.market-insight-label {
    font-weight: 700;
    color: var(--color-primary);
}

.analysis-callout {
    display: block;
    margin: 0;
    padding-top: 0.25rem;
    font-weight: 700;
    color: var(--color-primary);
    font-size: 0.95rem;
    line-height: 1.45;
}

.analysis-callout-rule {
    display: block;
    width: 2rem;
    height: 2px;
    margin-bottom: 0.65rem;
    background: var(--color-primary);
}


.analysis-split-chart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: calc(var(--spacing-unit) * 3);
    box-shadow: 0 4px 16px rgba(10, 28, 74, 0.06);
}

.chart-container--hbar {
    height: 240px;
    min-height: 240px;
}

.chart-container--hbar-tall {
    height: 320px;
    min-height: 320px;
}

.methodology--split {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 4);
    padding-top: calc(var(--spacing-unit) * 6);
    border-top: 1px solid var(--border);
}

@media (min-width: 768px) {
    .methodology--split {
        grid-template-columns: 1.2fr 1fr;
        gap: calc(var(--spacing-unit) * 5);
    }
}

.methodology-copy p {
    color: var(--text-secondary);
    line-height: 1.65;
}

.field-definitions-card {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: calc(var(--spacing-unit) * 4);
}

.field-definitions-card h3 {
    margin: 0 0 calc(var(--spacing-unit) * 2);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.field-definitions-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.field-definitions-card li {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.field-definitions-card li:last-child {
    margin-bottom: 0;
}

.field-definitions-card strong {
    flex: 0 0 5.5rem;
    color: var(--color-primary);
}

.profile-report-body .analysis-overview,
.profile-report-body .benchmark-comparison,
.profile-report-body .cost-deep-dives {
    margin: 0;
}

.cost-metric-card .value.is-positive {
    color: #059669;
}

/* ---- Report hero metrics (frosted strip on full-bleed navy) ---- */
.report-hero-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 0;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
}

@media (min-width: 900px) {
    .report-hero-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: calc(var(--spacing-unit) * 5) calc(var(--spacing-unit) * 4);
    }

    .report-hero-metrics--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .report-hero-metrics--5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .report-hero-metrics--5 .report-hero-metric-value {
        font-size: clamp(1.45rem, 2.4vw, 2.15rem);
    }

    .report-hero-metrics--5 .report-hero-metric {
        padding-left: calc(var(--spacing-unit) * 2);
        padding-right: calc(var(--spacing-unit) * 2);
    }
}

.report-hero-metric {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 3);
    min-width: 0;
}

@media (min-width: 900px) {
    .report-hero-metric:not(:last-child) {
        border-right: 1px solid rgba(255, 255, 255, 0.15);
    }

    .report-hero-metric:not(:first-child) {
        border-left: none;
    }
}

.report-hero-metric-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(219, 225, 255, 0.9);
}

.report-hero-metric-value {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.report-hero-metric-value.is-accent {
    color: #fff;
}

.report-hero-metric-sub {
    display: none;
}

.hub-layout.ed-page-school .page-header--report .cost-metric-grid {
    display: none; /* legacy */
}

.hub-layout.ed-page-school .page-header--report .report-hero-metrics {
    margin-top: 0;
}

.school-report-hero .report-hero-metrics {
    margin-top: calc(var(--spacing-unit) * 5);
}

.school-report-hero .school-report-hero-location + .report-hero-metrics {
    margin-top: calc(var(--spacing-unit) * 5);
}

/* ---- Overview + strategic insight ---- */
.analysis-overview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 3.5);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

@media (min-width: 960px) {
    .analysis-overview-grid:has(.overview-grade-card) {
        grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 0.9fr);
        align-items: start;
        gap: calc(var(--spacing-unit) * 4);
    }
}

.analysis-overview-prose .overview-lead {
    margin: 0;
}

.overview-grade-card {
    margin: 0;
    padding: calc(var(--spacing-unit) * 2.75) calc(var(--spacing-unit) * 2.5);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary) 6%, transparent),
                0 8px 24px color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.overview-grade-kicker {
    margin: 0 0 calc(var(--spacing-unit) * 2);
    padding-bottom: 0.65rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-aqua-text);
    border-bottom: 2px solid var(--border-accent);
}

.overview-grade-mark {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 1.5);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.overview-grade-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 14px;
    font-family: var(--font-heading);
    font-size: 2.05rem;
    font-weight: 900;
    line-height: 1;
    color: #fff;
    flex-shrink: 0;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.overview-grade-letter[data-grade="C-"] {
    font-size: 1.55rem;
    letter-spacing: -0.04em;
}

/* Match sitewide grade-badge tokens (base.css) */
.overview-grade-letter.grade-badge--a { background: var(--button-success); }
.overview-grade-letter.grade-badge--b { background: var(--color-primary); }
.overview-grade-letter.grade-badge--c { background: var(--color-aqua-dark); }

.overview-grade-copy {
    min-width: 0;
    padding-top: 0.1rem;
}

.overview-grade-name {
    margin: 0 0 0.35rem;
    font-family: var(--font-heading);
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.2;
}

.overview-grade-score {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

.overview-grade-score-line strong,
.overview-grade-score-num {
    color: var(--color-primary);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.overview-grade-score-meta {
    font-variant-numeric: tabular-nums;
}

.overview-grade-facts {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: calc(var(--spacing-unit) * 1.75) 0 0;
    padding: 0;
    border-top: 1px solid var(--border);
}

.overview-grade-fact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--border);
    min-width: 0;
}

.overview-grade-fact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    background: var(--color-aqua-soft);
    color: var(--color-aqua-text);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.overview-grade-fact-label {
    flex: 0 1 auto;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.3;
}

.overview-grade-fact-leader {
    flex: 1 1 auto;
    align-self: center;
    min-width: 1.25rem;
    height: 0;
    margin: 0 0.1rem;
    border-bottom: 1.5px dotted color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.overview-grade-fact-value {
    flex: 0 0 auto;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.overview-grade-foot {
    padding-top: calc(var(--spacing-unit) * 1.75);
}

.overview-grade-footer {
    margin: 0 0 0.35rem;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--text-meta, var(--text-secondary));
}

.overview-grade-link {
    margin: 0 0 0.85rem;
    font-size: 0.82rem;
    line-height: 1.35;
}

.overview-grade-link a {
    color: var(--color-link, var(--color-primary));
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.overview-grade-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.overview-grade-brand .ti {
    font-size: 0.95rem;
    color: var(--color-aqua);
}

.strategic-insight {
    margin: 0;
    padding: calc(var(--spacing-unit) * 3.5);
    background: var(--surface-alt, #eef2f8);
    border: 1px solid var(--border);
    border-left: 4px solid var(--color-aqua);
    border-radius: 12px;
}

.strategic-insight-kicker {
    margin: 0 0 0.75rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.strategic-insight p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

.strategic-insight strong {
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

/* ---- Bento snapshot cards ---- */
.school-guide-fact-panel.school-guide-bento {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
}

.school-guide-fact-icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    color: var(--color-aqua-text, var(--color-aqua));
    line-height: 1;
    flex-shrink: 0;
}

.school-guide-bento .school-guide-fact-hero {
    font-size: clamp(1.4rem, 2vw, 1.7rem);
    margin-top: 0;
}

.school-guide-bento .school-guide-fact-hero-label {
    margin-bottom: calc(var(--spacing-unit) * 2.5);
}

.school-guide-bento .school-guide-fact-list {
    margin-top: auto;
}

#guide-debt.school-guide-bento {
    background: var(--surface-alt, #eef2f8);
    border-color: rgba(0, 179, 198, 0.28);
}

#guide-debt .school-guide-fact-hero {
    color: var(--color-aqua-text, #0a5f6d);
}

/* ---- Endowment navy hero ---- */
.endowment-hero {
    margin: 0;
    padding: calc(var(--spacing-unit) * 4);
    background: var(--color-primary);
    color: #fff;
    border-radius: 14px;
    min-height: 100%;
    box-shadow: 0 6px 22px rgba(10, 28, 74, 0.2);
}

.endowment-hero-kicker {
    margin: 0 0 0.75rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(182, 197, 252, 0.9);
}

.endowment-hero-value {
    margin: 0 0 0.4rem;
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.endowment-hero-label {
    margin: 0 0 calc(var(--spacing-unit) * 2.5);
    font-size: 0.88rem;
    color: rgba(219, 225, 255, 0.75);
}

.endowment-hero-meta {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.72);
    font-variant-numeric: tabular-nums;
}

.hub-layout.ed-page-school .chart-section-content--financials .endowment-hero {
    height: 100%;
}

.finance-compare-list {
    list-style: none;
    margin: 0.65rem 0 0;
    padding: 0.65rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.endowment-hero .finance-compare-list {
    border-top-color: rgba(255, 255, 255, 0.14);
}

.chart-insight .finance-compare-list {
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.finance-compare-list li {
    margin: 0;
    padding: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: inherit;
}

.endowment-hero .finance-compare-list li {
    color: rgba(255, 255, 255, 0.82);
}

.chart-insight .finance-compare-list li {
    color: var(--text-secondary);
}

.finance-compare-geo {
    display: inline-block;
    min-width: 7.5rem;
    font-weight: 600;
    color: inherit;
}

.endowment-hero .finance-compare-geo {
    color: rgba(255, 255, 255, 0.95);
}

.chart-insight .finance-compare-geo {
    color: var(--color-primary);
}

.instructional-resources-list > li {
    margin-bottom: 0.85rem;
}

.instructional-resources-list > li:last-child {
    margin-bottom: 0;
}

@media (max-width: 720px) {
    .report-hero-metric {
        padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    }

    .report-hero-metric:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }

    .report-hero-metric:nth-child(n + 3) {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
}