/*
  stats-stories.css
  Shared stylesheet for every program's "Stats & Stories" page.
  Upload once to Cascade's asset library and link it from each
  program's page - do not paste this file's content directly into
  a page's content region.

  Structure below follows the order things appear on the page:
  root/typography -> rankings row -> cohort profile section
  (enrollment + splits, age/experience, countries, majors donut,
  GPA/advanced-degree/military stats, GRE/GMAT stats)
*/

/* Root wrapper. Same brand palette as career-impact.css, kept as its
   own copy here (rather than a shared variables file) so this file
   works standalone on pages that don't also load career-impact.css -
   not every program with a Stats & Stories page has a Career Impact
   page (e.g. FlexEvening, Executive MBA). */
.ss-root{--navy:#142c4f;--gold:#ecd23f;--teal:#167e98;--slate:#7a8794;--orange:#e2792e;--green:#3f8f5f;--ink:#1c2b3a;--line:#dfe4e9;font-family:Arial,Helvetica,sans-serif;color:var(--ink);max-width:1100px;margin:0 auto;clear:both}
.ss-root *{box-sizing:border-box}

/* Rankings row now reuses the site's own stats-block/callout-stat
   classes (see renderRankBox in stats-stories.js) instead of custom
   CSS here, so it inherits the sitewide styling exactly. Nothing to
   define for it in this file. */

/* Cohort profile section heading (program name + "Entering Fall 20xx Cohort Profile"). */
.ss-cohort-head{margin:44px 0 28px}
.ss-cohort-head h2{color:var(--navy);font-size:24px;font-weight:800;margin:0 0 6px}
.ss-cohort-head p{font-size:14px;font-weight:800;color:var(--ink);margin:0}

/* Two-column layout for the cohort profile body, wraps to one column below 640px. */
.ss-cohortgrid{display:flex;flex-wrap:wrap;gap:48px;margin-bottom:8px}
.ss-col{flex:1;min-width:280px}

/* Big yellow enrollment number + the two split bars beside it. */
.ss-enroll-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.ss-enroll-figure .ss-enroll-num{color:var(--gold);font-weight:800;font-size:140px;line-height:1}
.ss-enroll-figure .lbl{font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-top:8px}
.ss-splitbars{flex:1;min-width:180px}
.ss-splitbar{margin-bottom:14px}
.ss-splitbar:last-child{margin-bottom:0}
.ss-splitbar .track{display:flex;height:26px;border-radius:4px;overflow:hidden;font-size:13px;font-weight:800;color:#fff}
.ss-splitbar .seg{display:flex;align-items:center;justify-content:center;white-space:nowrap}
.ss-splitbar .seg.a{background:var(--slate)}
.ss-splitbar .seg.b{background:var(--navy)}
.ss-splitbar .lbls{display:flex;justify-content:space-between;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#5b6773;margin-top:4px}

/* Average age / average years of experience - a pair of big yellow stat numbers. */
.ss-statpair{display:flex;gap:48px;flex-wrap:wrap;margin-bottom:40px}
.ss-bigstat .num{color:var(--gold);font-weight:800;font-size:68px;line-height:1}
.ss-bigstat .lbl{font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-top:8px}

/* Countries represented - a plain sorted list. */
.ss-countries{margin-bottom:36px}
.ss-countries h3{font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#5b6773;margin:0 0 12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.ss-countries ul{list-style:none;margin:0;padding:0;columns:2;column-gap:24px;font-size:14px;line-height:2}

/* Majors donut + legend, same visual language as the Career Impact pie/legend. */
.ss-majors-heading{font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#5b6773;margin:0 0 18px;border-bottom:1px solid var(--line);padding-bottom:8px}
.ss-donutrow{display:flex;gap:36px;align-items:center;flex-wrap:wrap}
.ss-donutwrap{flex:0 1 300px}
.ss-donutsvg{display:block;width:100%;max-width:300px;height:auto}
.ss-donutlegend{list-style:none;margin:0;padding:0;flex:1;min-width:200px;font-size:13px}
.ss-donutlegend li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s,opacity .15s}
.ss-donutlegend li:last-child{border-bottom:none}
.ss-donutlegend .sw{width:14px;height:14px;border-radius:3px;flex-shrink:0}
.ss-donutlegend .pct{font-weight:700;color:var(--navy);margin-left:auto}
.ss-donutsvg path{cursor:pointer;transition:opacity .15s}

/* Hover/focus-linking between a pie slice and its legend row (see
   wireDonutHover in stats-stories.js): the linked pair gets a
   subtle highlight, everything else dims slightly. Legend rows are
   keyboard-focusable (tabindex="0"), so this also lights up on Tab. */
.ss-donutlegend li.ss-hot{background:#f4f6f8}
.ss-donutlegend li.ss-hot .nm,.ss-donutlegend li.ss-hot .pct{font-weight:800}
.ss-donutlegend li:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.ss-donutsvg path.ss-hot{stroke:#fff;stroke-width:2}
.ss-donutlegend li.ss-dim,.ss-donutsvg path.ss-dim{opacity:.45}

/* GPA mean + advanced-degree/military percentages + GRE/GMAT rows.
   All share the same small-multiple grid; ss-scoreitem.lg is used
   for the one number in a row (GPA mean) that should read larger
   than the rest, matching the source report's emphasis. */
.ss-scoregrid{display:grid;gap:26px 20px;margin-top:8px}
.ss-scoreitem .num{color:var(--gold);font-weight:800;font-size:46px;line-height:1}
.ss-scoreitem.blue .num{color:var(--teal)}
.ss-scoreitem.lg .num{font-size:68px}
.ss-scoreitem .lbl{font-size:11px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-top:8px}
.ss-scoregroup{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}

/* Big left stat + vertically-stacked num-beside-label stats to its
   right (EMBA's "36% Hold Advanced Degrees" / "11% ... / 38% ..."
   row) - see the percentStatsSideStack branch in stats-stories.js. */
.ss-sidestat-row{display:flex;align-items:flex-start;gap:40px;flex-wrap:wrap}
.ss-sidestats{display:flex;flex-direction:column;gap:18px;justify-content:center}
.ss-sidestat{display:flex;align-items:baseline;gap:12px}
.ss-sidestat .num{color:var(--teal);font-weight:800;font-size:40px;line-height:1}
.ss-sidestat .lbl{font-size:11px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);line-height:1.3;max-width:200px}

/* Full-width "Major Universities Represented" list, below the
   two-column grid - real bullets, matching the source block's plain
   <ul><li> markup rather than the swatch-style lists used elsewhere. */
.ss-universities{margin-top:44px}
.ss-universities h3{color:var(--navy);font-size:24px;font-weight:800;margin:0 0 20px}
.ss-universities ul{list-style:disc;margin:0;padding-left:20px;columns:2;column-gap:48px;font-size:15px;line-height:2}

@media(max-width:640px){
  .ss-rankgrid{grid-template-columns:repeat(1,1fr) !important}
  .ss-cohortgrid{flex-direction:column}
  .ss-enroll-figure .ss-enroll-num{font-size:96px}
  .ss-bigstat .num{font-size:48px}
  .ss-scoreitem .num{font-size:36px}
  .ss-scoreitem.lg .num{font-size:48px}
  .ss-scoregrid{grid-template-columns:repeat(2,1fr) !important}
  .ss-donutrow{flex-direction:column;align-items:flex-start}
  .ss-countries ul{columns:1}
  .ss-universities ul{columns:1}
}