/* College profiles (profile release, 30 September 2026; design plan Prototype B, approved
   27 September). Loaded by profile pages only, after styles.css, pg.css, components.css and
   article.css, whose key-finding box, section nav and expandable sections it reuses. */

/* Width (profile layout, October 2026). Prose keeps its 760px measure; the program table and its
   controls use the full column. The rail used to be positioned over the whole page, which capped
   the table at 860px: tables that needed a little more (UCLA, Harvard, Irvine Valley) scrolled and
   cut off their last column while the space beside them stayed empty. Now the rail and everything
   above Programs share .prof__top, and from 1200px the rail is a grid column that ends where
   Programs starts. The caps use :where() so a child's own narrower measure still wins. */
.prof > * { max-width: 760px; }
.prof > .prof__top,
.prof > .progs { max-width: none; }
:where(.prof__main) > * { max-width: 760px; }
:where(.progs) > h2,
:where(.progs) > p,
:where(.progs) .tw-coverage { max-width: 760px; }

/* Below 1100px the rail is hidden and the wrappers take no part in layout, so the page reads as one
   column. This also keeps the section nav on phones sticky for the whole page: inside a wrapper box
   a sticky element stops at the wrapper's end, which would be above Programs. */
@media (max-width: 1099px) {
  .prof__top,
  .prof__main { display: contents; }
}
/* Site frame (October 2026): from 1100px the upper block takes the frame's 8/4 split (it was 860px
   plus a 240px rail from 1200px). The summary, the cost tools and the rail line up on the frame's
   columns; the summary box and its contents fill the main column, and prose inside it keeps the
   column's measure (about 750px). With the rail showing, the section links repeat it, so they go. */
@media (min-width: 1100px) {
  .prof__top { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--frame-gap); }
  /* styles.css positions .rail over the page; here it is an ordinary grid item, still sticky inside. */
  .prof__top > .rail { display: block; position: static; grid-column: 2; grid-row: 1; width: auto; }
  .prof__top .rail__inner { position: sticky; top: calc(var(--hdr-h, 0px) + 31px); padding-top: 40px; }
  .prof__main { grid-column: 1; grid-row: 1; min-width: 0; }
  .prof .sectnav { display: none; }
  :where(.prof__main) > * { max-width: none; }
  :where(.prof__main) > p, :where(.prof__main) > .crumbs { max-width: 760px; }
  .kf.sum > * { max-width: none; }
  /* Programs: the heading and intro in the main column, the notes that change how the table reads
     beside them (still visible, R2), then the table across the whole frame. Extra height from tall
     notes goes to the intro's row, so the heading and intro stay together. */
  .prof > .progs { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-rows: auto 1fr; column-gap: var(--frame-gap); }
  .progs > h2 { grid-column: 1; grid-row: 1; }
  .progs > p:not(.tw-source) { grid-column: 1; grid-row: 2; align-self: start; }
  .progs > .progs__aside { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .progs__aside .note { margin: 0 0 var(--s3); }
  .progs > [data-tw-profile], .progs > .tw-source { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  /* Automatic table layout shares the spare width by content, so long program names take most of
     it and numeric columns stay compact. These floors give Program and Degree theirs first. Only
     from 1200px: in a narrower column they just add scrolling (at 900px, UCLA scrolled 147px with
     them and 59px without). Nothing is forced onto one line, so the 1-year marker and unassessed
     labels wrap as before, and the scroll container stays as a fallback. */
  .prof .tw-td--program { min-width: 14em; }
  .prof .tw-td[data-label="Degree"] { min-width: 8.5em; }
}
.prof .idline { color: var(--ink-soft); margin: 0 0 var(--sp-group); }

/* Summary: the earnings verdict with its coverage in the same box (R1), then the one cost figure
   that never changes with the calculator. */
.kf__none { font-family: var(--display); font-size: clamp(26px, 6vw, 34px); line-height: 1.1; color: var(--ink); margin: 0; letter-spacing: -0.02em; }
.sum__cost { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 var(--sp-group); font-size: var(--t-ui); color: var(--ink-soft); }
.sum__costlab { font-weight: 600; color: var(--ink); }
.sum__costfig { font-family: var(--mono); font-weight: 500; font-size: var(--t-sub); color: var(--ink); }
.sum__na { font-style: italic; }

/* Cost: inputs as one group, the band-labelled result beside them, assumptions after. */
.cost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-related); margin: var(--sp-group) 0 var(--sp-related); }
@media (max-width: 640px) { .cost { grid-template-columns: 1fr; } }
.cost__inputs { margin: 0; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); min-width: 0; }
.cost__inputs legend { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); padding: 0 4px; }
.cost__field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 var(--sp-related); }
.cost__field:last-child { margin-bottom: 0; }
.cost__field label { font-weight: 600; font-size: var(--t-ui); }
.cost__field select { font: inherit; font-size: var(--t-ui); padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); max-width: 100%; }
.cost__out { padding: 14px 16px 16px; border: 1px solid var(--brand); border-top-width: 4px; border-radius: var(--r-md); background: var(--surface); }
.cost__band { font-size: var(--t-ui); font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.cost__fig { margin: 0; font-size: var(--t-ui); color: var(--ink-soft); }
.cost__num { font-family: var(--mono); font-weight: 500; font-size: clamp(30px, 8vw, 40px); line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); margin-right: 4px; }
.cost__total { margin: 8px 0 0; font-size: var(--t-fine); color: var(--ink-soft); }
.art .cost__assume, .art .cost__empty { font-size: var(--t-fine); color: var(--ink-soft); }

/* Notes that change how the table reads stay visible (R2). */
.art .note { font-size: var(--t-fine); color: var(--ink-soft); border-left: 3px solid var(--line); padding: 2px 0 2px 12px; margin: 0 0 var(--sp-control); }
/* The 1-year marker inside a sentence is a word, not a block (beside the table it split the note
   over three lines). */
.note .tw-oneyr { display: inline; margin: 0; }
.progs .tw-verdict--none { color: var(--ink-faint); font-weight: 400; }

aside.rail .rail__h2 { margin-top: var(--sp-group); }
.src-links { font-size: var(--t-fine); }

.sum .kf__of { white-space: normal; }

/* At enlarged text one long word of a college name ("Pennsylvania", "Birmingham-Southern") is wider
   than a 320px column. A word breaks only when it cannot fit on a line by itself, which never happens
   at normal size. */
.prof h1 { overflow-wrap: break-word; }

/* The program table (October 2026): the site's shared table treatment (pg.css), set out for this
   table's eight columns. Desktop only (from 769px); the phone cards are unchanged. No stripes:
   unassessed rows already carry the sand tint, and it means "no verdict". */
@media (min-width: 769px) {
  .prof .tw-table .tw-td { padding-top: 14px; padding-bottom: 14px; border-bottom-color: var(--line); }
  .prof .tw-table tbody tr:last-child .tw-td { border-bottom: 0; }
  .prof .tw-table thead .tw-th { padding-top: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink-faint); color: var(--text); }
  /* Column groups: the program, its earnings, its debt, and the graduate count. */
  .prof .tw-table tr > :nth-child(3),
  .prof .tw-table tr > :nth-child(6),
  .prof .tw-table tr > :nth-child(8) { border-left: 1px solid var(--line-soft); }
  /* Following a row: a highlight on hover and keyboard focus, never on unassessed rows, whose tint
     must not change under the pointer. */
  .prof .tw-table tbody tr:not(.tw-tr--insuf):hover > .tw-td,
  .prof .tw-table tbody tr:not(.tw-tr--insuf):focus-within > .tw-td { background: var(--brand-50); }
  .prof .tw-table .tw-td--program { font-size: var(--t-ui); }
  /* The verdict as a tinted label in the existing pass and fail colours, with a thin border in its
     own colour so it stays visible on the highlight. The words do not change (R1). */
  .prof .tw-table .tw-verdict--pass,
  .prof .tw-table .tw-verdict--fail { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); line-height: 1.5; }
  .prof .tw-table .tw-verdict--pass { background: var(--good-bg); border: 1px solid color-mix(in srgb, var(--good) 30%, transparent); }
  .prof .tw-table .tw-verdict--fail { background: var(--bad-bg); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); }
  .prof .tw-table .tw-td--num { font-variant-numeric: tabular-nums lining-nums; }
}