/* One page shell for the whole site. The main element keeps the shared .wrap container, the
   same one the header and the app pages use, and the 860px column sits against its left edge
   rather than centring. So a page title starts where the logo starts on every page, instead of
   jumping 150px sideways between a profile and Careers. The column cap is on the children, and
   the horizontal gutter is the one .wrap already gives: 40px, then 20px on phones. */
.pg { padding-top: 8px; padding-bottom: 64px; }
/* :where() gives the cap zero specificity, so any narrower measure a child sets (source notes,
   prose at var(--measure)) still wins. The first version of this rule overrode them all. */
:where(.pg) > * { max-width: 860px; }
/* Type below is token-only. Every size here used to be an ad-hoc rem value, because
   design/tokens.json had no type block for this file to reach for; it has one now, so a step
   change lands on 6,127 profiles and the homepage together instead of one or the other. */
.crumbs { font-size: var(--t-fine); color: var(--ink-faint); margin: 18px 0 6px; }
.crumbs a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 0.16em; }
.pg h1 { font-size: var(--t-title); letter-spacing: -0.03em; line-height: 1.08; margin: 6px 0 6px; }
.idline { color: var(--ink-soft); font-size: var(--t-ui); max-width: var(--measure-tight); margin: 0 0 18px; }
.offname { color: var(--ink-faint); }
.progsub { color: var(--ink-faint); font-size: var(--t-fine); display: block; margin-top: 2px; }
/* The verdict is the argument of the page, set in the editorial serif. Like every block on the page
   it runs to the shared 860px edge: capped narrower, it and the calculator each ended at their own
   width and the page's right edge stepped in and out (September 2026 review). */
.verdict { border-left: 4px solid var(--brand); background: var(--bg-alt); border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: 16px 20px; margin: 16px 0; font-family: var(--display); font-size: var(--t-lede); line-height: 1.5; }
.verdict__text { max-width: var(--measure); margin: 0; }
.verdict b { color: var(--ink); }
/* Caution tokens, 4.67 on their own background; the pill also states its meaning in words. */
.gem { display: inline-block; background: var(--caution-bg); color: var(--caution); border: 1px solid var(--caution); border-radius: var(--r-pill); padding: 2px 10px; font-size: var(--t-label); font-weight: 600; margin-left: 6px; }
.cta-row { margin: 18px 0 8px; }
h2.sec { font-size: var(--t-section); letter-spacing: -0.02em; line-height: 1.2; margin: 30px 0 8px; }
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; }
table.t { width: 100%; border-collapse: collapse; font-size: var(--t-ui); }
table.t th, table.t td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t th { color: var(--ink-soft); font-weight: 600; }
table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.t a { color: var(--ink); text-decoration: none; }
table.t a:hover { color: var(--brand); text-decoration: underline; }
.pass { color: var(--good); font-weight: 600; }
.fail { color: var(--bad); font-weight: 600; }
/* Diverging "vs a high-school grad" bar: the centre line is the benchmark, green to the
   right means graduates out-earn it, red to the left means they fall short. Bars in a table
   share one scale (the row with the biggest gap fills its half), so lengths are comparable. */
.prem-cell { min-width: 132px; }
.prem-val { display: block; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.prem-val.pos { color: var(--good); }
.prem-val.neg { color: var(--bad); }
.pbar { position: relative; height: 7px; margin-top: 5px; background: var(--bg-alt); border-radius: var(--r-sm); }
.pbar::before { content: ""; position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1px; background: var(--line); }
.pbar i { position: absolute; top: 0; height: 100%; min-width: 2px; }
/* Solid token fills: bar length is the datum, so the fill carries no extra meaning. */
.pbar i.pos { left: 50%; background: var(--good); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.pbar i.neg { right: 50%; background: var(--bad); border-radius: var(--r-sm) 0 0 var(--r-sm); }
@media (prefers-reduced-motion: no-preference) { .pbar i { transition: width .3s ease; } }
.np td.num { font-variant-numeric: tabular-nums; }
.src { color: var(--ink-faint); font-size: var(--t-fine); max-width: var(--measure); margin: 22px 0 0; line-height: 1.5; }
.calc { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; margin: 12px 0 18px; background: var(--bg-alt); }
.calc-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--t-ui); }
.calc-controls select { border: 1px solid var(--line); border-radius: var(--r-md); padding: 7px 10px; font-size: var(--t-ui); background: #fff; color: var(--ink); }
/* The payback sentence is prose about a number, not a control label, so it takes the serif. */
.calc-big { font-family: var(--display); font-size: var(--t-sub); max-width: var(--measure); margin: 14px 0 6px; line-height: 1.5; }
.calc-note { color: var(--ink-soft); font-size: var(--t-fine); max-width: var(--measure); line-height: 1.5; margin: 6px 0 0; }
.dl { margin: 14px 0 4px; }
/* Serves a <button> on the profile calculator and an <a download> on the lists, so it
   declares both. 11px of padding on a 15px step at line-height 1.5 is a 46px target,
   past the 44px floor the phone pass asked for. */
.dl-note { color: var(--ink-faint); font-size: var(--t-fine); }
.upd { border-left: 3px solid var(--line); padding: 2px 0 2px 16px; margin: 20px 0; }
.upd h2.sec { margin: 4px 0 6px; font-size: var(--t-sub); }
.upd-meta { color: var(--ink-soft); font-size: var(--t-ui); max-width: var(--measure); line-height: 1.55; margin: 4px 0; }
.upd-src { color: var(--ink-faint); font-size: var(--t-label); margin: 3px 0; word-break: break-all; }
.mono { font-family: var(--mono); font-size: var(--t-fine); overflow-wrap: anywhere; }
.statecols { columns: 220px 4; column-gap: 20px; margin: 14px 0; }
.statecols a { display: block; padding: 5px 0; color: var(--brand); text-decoration: none; }
ul.schoollist { list-style: none; padding: 0; margin: 12px 0; }
ul.schoollist li { padding: 10px 0; border-bottom: 1px solid var(--line); }
ul.schoollist a { color: var(--brand); text-decoration: none; font-weight: 600; }
ul.schoollist .meta { color: var(--ink-soft); font-size: var(--t-ui); }
/* Simple data tables stack into labelled rows on phones (audit V13). The header script copies each
   column heading onto its cells as data-label and adds .stack, so without JS the table keeps its
   horizontal scroll. The first cell is the row's name and reads as a heading. */
@media (max-width: 520px) {
  table.t.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.t.stack, table.t.stack tbody, table.t.stack tr { display: block; width: 100%; }
  table.t.stack tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  table.t.stack td, table.t.stack th { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 0; text-align: right; }
  table.t.stack td::before, table.t.stack th::before { content: attr(data-label); color: var(--ink-soft); font-weight: 600; text-align: left; }
  table.t.stack tr > :first-child { display: block; text-align: left; font-weight: 600; color: var(--ink); }
  table.t.stack tr > :first-child::before { content: none; }
}
/* Majors range chart: a phone-width drawing below 560px so its text is not scaled to 6px. */
.ladder--narrow { display: none; }
@media (max-width: 560px) { .ladder--wide { display: none; } .ladder--narrow { display: block; } }

/* Data tables (October 2026): one look for every table, so a reader learns it once. A frame, a tinted
   header band with a firmer base, rows with air and a clear rule between them, a highlight on the row
   under the pointer or holding keyboard focus, and figures on tabular, lining numerals. No stripes:
   the profile's sand tint means "no verdict", and a tinted row should have one meaning. From 521px,
   where the table is still a table (below it, rows stack into labelled cards). */
@media (min-width: 521px) {
  .tscroll { border: 1px solid var(--line); border-radius: var(--r-lg); }
  table.t th, table.t td { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  table.t thead th { background: var(--bg-alt); color: var(--text); font-weight: 600; border-bottom: 2px solid var(--ink-faint); vertical-align: bottom; }
  table.t tbody tr:last-child > * { border-bottom: 0; }
  table.t tbody tr:hover > *, table.t tbody tr:focus-within > * { background: var(--brand-50); }
  table.t td.num, table.t th.num { font-variant-numeric: tabular-nums lining-nums; }
  /* The cell that names the row reads as its heading: the first cell, or the one after a rank. */
  table.t tbody tr > :first-child:not(.num),
  table.t tbody tr > .num:first-child + * { font-weight: 600; color: var(--ink); }
}