/* ============================================================
   College Graduation Rate Rankings — Stylesheet v1.0
   ============================================================ */
:root {
    --grr-brand:        #059669;
    --grr-excellent:    #15803d;
    --grr-good:         #1d4ed8;
    --grr-moderate:     #b45309;
    --grr-low:          #b91c1c;
    --grr-unknown:      #6b7280;
    --grr-bg:           #f8fafc;
    --grr-card:         #ffffff;
    --grr-border:       #e2e8f0;
    --grr-text:         #1e293b;
    --grr-muted:        #64748b;
    --grr-radius:       0.75rem;
    --grr-shadow:       0 1px 3px rgba(0,0,0,.1);
    --grr-shadow-md:    0 4px 6px -1px rgba(0,0,0,.1);
}
*,*::before,*::after{box-sizing:border-box;}

/* Body */
.grr-body { background:var(--grr-bg); color:var(--grr-text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; line-height:1.6; margin:0; padding:0; }

/* Header */
.grr-header { background:var(--grr-brand); color:#fff; position:sticky; top:0; z-index:100; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.grr-header__inner { max-width:1200px; margin:0 auto; padding:.85rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.grr-header__logo { color:#fff; font-weight:700; font-size:1.1rem; text-decoration:none; display:flex; align-items:center; gap:.4rem; }
.grr-header__nav { display:flex; gap:1.5rem; }
.grr-header__nav a { color:rgba(255,255,255,.85); text-decoration:none; font-size:.9rem; transition:color .2s; }
.grr-header__nav a:hover { color:#fff; }

/* Wrap */
.grr-wrap { max-width:1200px; margin:0 auto; padding:1.5rem 1.5rem 4rem; }

/* Breadcrumb */
.grr-breadcrumb { margin-bottom:1.25rem; }
.grr-breadcrumb__list { display:flex; flex-wrap:wrap; gap:.25rem; list-style:none; padding:0; margin:0; font-size:.85rem; color:var(--grr-muted); }
.grr-breadcrumb__list li { display:flex; align-items:center; }
.grr-breadcrumb__list li:not(:last-child)::after { content:"›"; margin-left:.25rem; }
.grr-breadcrumb__list a { color:var(--grr-brand); text-decoration:none; }
.grr-breadcrumb__list a:hover { text-decoration:underline; }
.grr-breadcrumb__current span { color:var(--grr-text); }

/* Hero */
.grr-hero { background:linear-gradient(135deg,var(--grr-brand),#047857); color:#fff; border-radius:var(--grr-radius); padding:3rem 2.5rem; text-align:center; margin-bottom:2rem; }
.grr-hero__badge { display:inline-block; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); border-radius:99px; padding:.3rem 1rem; font-size:.85rem; font-weight:600; margin-bottom:1rem; }
.grr-hero__title { font-size:clamp(1.6rem,4vw,2.5rem); font-weight:800; margin:0 0 .75rem; }
.grr-hero__sub { font-size:1.05rem; opacity:.9; max-width:680px; margin:0 auto 1.5rem; }
.grr-hero__stats { display:flex; justify-content:center; gap:2.5rem; flex-wrap:wrap; }
.grr-hero__num { display:block; font-size:2rem; font-weight:800; }
.grr-hero__lbl { font-size:.85rem; opacity:.8; }

/* Tier guide */
.grr-tier-guide { background:var(--grr-card); border:1px solid var(--grr-border); border-radius:var(--grr-radius); padding:1.5rem; margin-bottom:2rem; }
.grr-tier-guide__title { font-size:1rem; font-weight:700; margin:0 0 .75rem; }
.grr-tier-guide__chips { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:.75rem; }
.grr-tier-guide__note { font-size:.82rem; color:var(--grr-muted); margin:0; }

/* Tier chips */
.grr-tier-chip { display:inline-flex; align-items:center; gap:.3rem; padding:.28rem .8rem; border-radius:99px; font-size:.82rem; font-weight:600; white-space:nowrap; }
.grr-tier-chip--lg { font-size:.95rem; padding:.4rem 1.1rem; }
.grr-tier--excellent { background:#dcfce7; color:#15803d; }
.grr-tier--good      { background:#dbeafe; color:#1d4ed8; }
.grr-tier--moderate  { background:#fef3c7; color:#b45309; }
.grr-tier--low       { background:#fee2e2; color:#b91c1c; }
.grr-tier--unknown   { background:#f1f5f9; color:#64748b; }

/* Tier summary (state page) */
.grr-tier-summary { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.25rem; }

/* Section title */
.grr-section-title { font-size:1.2rem; font-weight:700; margin:2rem 0 1rem; padding-bottom:.5rem; border-bottom:2px solid var(--grr-border); }

/* Alpha groups (hub) */
.grr-alpha-group { margin-bottom:1.5rem; }
.grr-alpha-letter { font-size:1.4rem; font-weight:800; color:var(--grr-brand); margin-bottom:.6rem; }
.grr-state-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.75rem; }
.grr-state-card { background:var(--grr-card); border:1px solid var(--grr-border); border-radius:var(--grr-radius); padding:1rem; text-decoration:none; color:var(--grr-text); transition:box-shadow .2s,transform .15s,border-color .2s; display:flex; flex-direction:column; gap:.2rem; }
.grr-state-card:hover { box-shadow:var(--grr-shadow-md); transform:translateY(-2px); border-color:var(--grr-brand); }
.grr-state-card__abbr { font-size:1.6rem; font-weight:800; color:var(--grr-brand); }
.grr-state-card__name { font-size:.9rem; font-weight:600; }
.grr-state-card__cta  { font-size:.8rem; color:var(--grr-brand); margin-top:.25rem; }

/* Page header (state/college) */
.grr-page-header { display:flex; align-items:flex-start; gap:1.25rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.grr-page-header__code { background:var(--grr-brand); color:#fff; font-size:1.6rem; font-weight:900; width:3.5rem; height:3.5rem; display:flex; align-items:center; justify-content:center; border-radius:.7rem; flex-shrink:0; }
.grr-page-header__title { font-size:clamp(1.3rem,3vw,2rem); font-weight:800; margin:0 0 .3rem; }
.grr-page-header__sub { color:var(--grr-muted); margin:0; font-size:.95rem; }

/* Filter bar */
.grr-filter-bar { background:var(--grr-card); border:1px solid var(--grr-border); border-radius:var(--grr-radius); padding:1rem 1.25rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-bottom:1rem; }
.grr-filter-group { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.grr-filter-label { font-size:.85rem; font-weight:600; color:var(--grr-muted); white-space:nowrap; }
.grr-filter-btns { display:flex; gap:.4rem; flex-wrap:wrap; }
.grr-filter-btn { border:1px solid var(--grr-border); background:#fff; color:var(--grr-text); padding:.32rem .8rem; border-radius:99px; font-size:.82rem; cursor:pointer; transition:all .15s; }
.grr-filter-btn:hover { border-color:var(--grr-brand); color:var(--grr-brand); }
.grr-filter-btn--active { background:var(--grr-brand); color:#fff; border-color:var(--grr-brand); }
.grr-search { border:1px solid var(--grr-border); border-radius:.5rem; padding:.35rem .8rem; font-size:.85rem; width:200px; outline:none; transition:border-color .2s; }
.grr-search:focus { border-color:var(--grr-brand); }

/* Table */
.grr-table-wrap { overflow-x:auto; margin-bottom:1rem; }
.grr-table { width:100%; border-collapse:collapse; background:var(--grr-card); border-radius:var(--grr-radius); overflow:hidden; box-shadow:var(--grr-shadow); font-size:.9rem; }
.grr-table thead tr { background:var(--grr-brand); color:#fff; }
.grr-table th { padding:.75rem 1rem; text-align:left; font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.grr-table tbody tr { border-bottom:1px solid var(--grr-border); transition:background .15s; }
.grr-table tbody tr:hover { background:#f0fdf4; }
.grr-table tbody tr:last-child { border-bottom:none; }
.grr-table td { padding:.7rem 1rem; vertical-align:middle; }
.grr-col-rank { width:3rem; text-align:center; }
.grr-col-rate { min-width:110px; }
.grr-medal { font-size:1.2rem; }
.grr-rank-num { color:var(--grr-muted); font-size:.9rem; }
.grr-school-link { color:var(--grr-brand); font-weight:600; text-decoration:none; }
.grr-school-link:hover { text-decoration:underline; }
.grr-school-city { font-size:.78rem; color:var(--grr-muted); margin-top:.1rem; }
.grr-type-tag { background:#f1f5f9; color:#475569; border-radius:4px; padding:.15rem .5rem; font-size:.75rem; white-space:nowrap; }
.grr-na { color:var(--grr-muted); }
.grr-empty { text-align:center; padding:2.5rem; color:var(--grr-muted); }

/* Inline rate bar (table) */
.grr-rate-val { font-weight:700; display:block; font-size:.92rem; }
.grr-rate-bar-track { height:4px; background:#e2e8f0; border-radius:99px; margin-top:3px; overflow:hidden; }
.grr-rate-bar { height:100%; border-radius:99px; }
.grr-rate-bar.grr-tier--excellent { background:var(--grr-excellent); }
.grr-rate-bar.grr-tier--good      { background:var(--grr-good); }
.grr-rate-bar.grr-tier--moderate  { background:var(--grr-moderate); }
.grr-rate-bar.grr-tier--low       { background:var(--grr-low); }
.grr-rate-bar.grr-tier--unknown   { background:var(--grr-unknown); }

/* No results */
.grr-no-results { text-align:center; padding:2rem; background:#fff; border:1px solid var(--grr-border); border-radius:var(--grr-radius); color:var(--grr-muted); }
.grr-reset { background:none; border:1px solid var(--grr-brand); color:var(--grr-brand); padding:.3rem .8rem; border-radius:99px; cursor:pointer; margin-left:.5rem; }

/* States nav */
.grr-states-nav { background:var(--grr-card); border:1px solid var(--grr-border); border-radius:var(--grr-radius); padding:1.5rem; margin-top:2rem; }
.grr-states-nav__title { font-size:1rem; font-weight:700; margin:0 0 1rem; }
.grr-states-nav__grid { display:flex; flex-wrap:wrap; gap:.4rem; }
.grr-states-nav__link { display:inline-block; padding:.25rem .65rem; border:1px solid var(--grr-border); border-radius:.4rem; font-size:.82rem; font-weight:600; text-decoration:none; color:var(--grr-text); transition:all .15s; }
.grr-states-nav__link:hover { border-color:var(--grr-brand); color:var(--grr-brand); }
.grr-states-nav__link--active { background:var(--grr-brand); color:#fff; border-color:var(--grr-brand); }

/* College header */
.grr-college-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; margin-bottom:1.75rem; flex-wrap:wrap; }
.grr-college-header__meta { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-bottom:.5rem; font-size:.85rem; color:var(--grr-muted); }
.grr-college-header__name { font-size:clamp(1.4rem,3.5vw,2rem); font-weight:800; margin:0 0 .75rem; }
.grr-college-header__badges { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.grr-rank-badge { background:var(--grr-brand); color:#fff; border-radius:.6rem; padding:.4rem .9rem; display:flex; align-items:baseline; gap:.3rem; }
.grr-rank-badge__num { font-size:1.4rem; font-weight:900; }
.grr-rank-badge__lbl { font-size:.78rem; opacity:.85; }
.grr-grad-hero { display:flex; flex-direction:column; align-items:center; background:#f0fdf4; border:1px solid #86efac; border-radius:.6rem; padding:.5rem 1.1rem; }
.grr-grad-hero__num { font-size:1.8rem; font-weight:900; color:var(--grr-brand); line-height:1; }
.grr-grad-hero__lbl { font-size:.75rem; color:var(--grr-muted); }

/* Rate showcase bar (college page) */
.grr-rate-showcase { background:var(--grr-card); border:1px solid var(--grr-border); border-radius:var(--grr-radius); padding:1.5rem; margin-bottom:2rem; }
.grr-rate-showcase__label { font-size:.85rem; font-weight:600; color:var(--grr-muted); margin-bottom:.75rem; }
.grr-rate-showcase__track { height:2rem; background:#e2e8f0; border-radius:99px; position:relative; overflow:hidden; }
.grr-rate-showcase__fill { height:100%; border-radius:99px; transition:width .6s ease; }
.grr-rate-showcase__fill.grr-tier--excellent { background:var(--grr-excellent); }
.grr-rate-showcase__fill.grr-tier--good      { background:var(--grr-good); }
.grr-rate-showcase__fill.grr-tier--moderate  { background:var(--grr-moderate); }
.grr-rate-showcase__fill.grr-tier--low       { background:var(--grr-low); }
.grr-rate-showcase__pct { position:absolute; right:.75rem; top:50%; transform:translateY(-50%); font-weight:700; font-size:.9rem; color:var(--grr-text); }
.grr-rate-showcase__benchmarks { position:relative; height:1.5rem; margin-top:.25rem; }
.grr-rate-showcase__benchmarks span { position:absolute; font-size:.75rem; color:var(--grr-muted); transform:translateX(-50%); }

/* Metrics grid */
.grr-metrics-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:1rem; margin-bottom:2rem; }
.grr-metric-card { background:var(--grr-card); border:1px solid var(--grr-border); border-radius:var(--grr-radius); padding:1.25rem; box-shadow:var(--grr-shadow); }
.grr-metric-card__icon { font-size:1.4rem; margin-bottom:.5rem; }
.grr-metric-card__val  { font-size:1.4rem; font-weight:800; }
.grr-metric-card__lbl  { font-size:.85rem; font-weight:600; margin-top:.2rem; }
.grr-metric-card__note { font-size:.75rem; color:var(--grr-muted); margin-top:.2rem; }

/* Explainer box */
.grr-explainer-box { background:#f0fdf4; border:1px solid #86efac; border-radius:var(--grr-radius); padding:1.5rem; margin-bottom:2rem; }
.grr-explainer-box__title { font-size:1rem; font-weight:700; margin:0 0 .6rem; color:#15803d; }
.grr-explainer-box__text  { font-size:.9rem; color:var(--grr-text); margin:0; line-height:1.65; }

/* Buttons */
.grr-btn { display:inline-flex; align-items:center; gap:.4rem; background:var(--grr-brand); color:#fff; border:none; border-radius:.6rem; padding:.6rem 1.25rem; font-size:.9rem; font-weight:600; text-decoration:none; cursor:pointer; transition:opacity .2s; }
.grr-btn:hover { opacity:.88; }
.grr-btn--outline { background:transparent; color:var(--grr-brand); border:1.5px solid var(--grr-brand); }
.grr-btn--outline:hover { background:#f0fdf4; }

/* Source note */
.grr-source-note { background:#f8fafc; border:1px solid var(--grr-border); border-radius:var(--grr-radius); padding:1rem 1.25rem; font-size:.82rem; color:var(--grr-muted); margin-top:2rem; line-height:1.6; }
.grr-source-note a { color:var(--grr-brand); }

/* Peers section */
.grr-peers { margin-bottom:2rem; }

/* Not found */
.grr-not-found { text-align:center; padding:4rem 1.5rem; }
.grr-not-found h1 { font-size:2rem; margin-bottom:1rem; }

/* Footer */
.grr-footer { background:#064e3b; color:rgba(255,255,255,.75); margin-top:4rem; }
.grr-footer__inner { max-width:1200px; margin:0 auto; padding:1.5rem; text-align:center; font-size:.85rem; }
.grr-footer a { color:rgba(255,255,255,.85); }
.grr-footer p { margin:.25rem 0; }

/* Responsive */
@media(max-width:768px){
    .grr-wrap { padding:1rem 1rem 3rem; }
    .grr-hero { padding:2rem 1.25rem; }
    .grr-page-header__code { display:none; }
    .grr-filter-bar { flex-direction:column; align-items:flex-start; }
    .grr-search { width:100%; }
    .grr-table { font-size:.8rem; }
    .grr-table th,.grr-table td { padding:.5rem .6rem; }
    .grr-col-type,.grr-col-tuition { display:none; }
    .grr-metrics-grid { grid-template-columns:repeat(2,1fr); }
    .grr-college-header { flex-direction:column; }
    .grr-rate-showcase__benchmarks { display:none; }
}
