/* design-system.css (2026-10-15): one shared layer loaded LAST in <head> on every public page by tools/add_wsu_design_system.js.
   It does not restyle the dashboard; it removes the drift between pages that grew from different generators, so every page reads
   as one application. Page title -> section heading -> key finding -> chart -> supporting details, with one size per level.
   Tokens reuse the pages' own palette (--bg, --surface, --line, --ink, --guf, --allf, --up, --down ...); only spacing, radii,
   focus and type steps are new. Every rule was added for a defect measured on the rendered pages (see the runbook, 2026-10-15). */
:root{
  --ds-r-panel:14px;      /* section boxes: .spotlight, .xp-box, .ask-box, .home-bar */
  --ds-r-card:12px;       /* cards and chart frames */
  --ds-r-ctl:8px;         /* inputs, selects */
  --ds-gap:16px;
  --ds-focus:0 0 0 3px rgba(182,134,44,.45);
  --ds-title-card:17px;   /* card / chart titles, every page */
  --ds-text-min:12px;     /* smallest running text (table heads, notes) */
}

/* ---- palette (design critique 2026-10-15): stronger contrast, not more colours. Light mode only; dark mode keeps its tokens.
   Page warm off-white, cards white, charcoal headings, dark-grey supporting text (~6:1 on white), gold kept as the brand
   accent, deep blue for links and selected controls. Chart series colours (--ksu, --allf, --ou ...) are untouched. ---- */
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){
  --bg:#F7F6F2; --surface:#FFFFFF; --surface-2:#EFEDE6; --ink:#252A30; --ink-muted:#58616B; --ink-faint:#6F7780; --guf:#B88628; --ds-link:#245A73;
} }
:root[data-theme="light"]{ --bg:#F7F6F2; --surface:#FFFFFF; --surface-2:#EFEDE6; --ink:#252A30; --ink-muted:#58616B; --ink-faint:#6F7780; --guf:#B88628; --ds-link:#245A73; }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) body{ background:var(--bg); color:var(--ink); } }

/* ---- corner radii: one per level (budget cards were 10px, everything else 12px) ---- */
.card, .fundchart, .fundcard, .xp-chart, .xp-stat, .xp-hl, .xp-table-wrap, .rank-box, .sc-wrap, .stat, .tile,
.peer-table-wrap, .pi-table-wrap, .cmp-chart.boxed{ border-radius:var(--ds-r-card); }
select, input[type="text"], input[type="search"], input:not([type]){ border-radius:var(--ds-r-ctl); }

/* ---- headings: one size per level ---- */
/* section headings on the drill-down pages (budget detail, faculty / salary by college) were 24px regular next to 27-38px bold
   section headings on every other page */
.section-head h2{ font-family:'Newsreader', Georgia, serif; font-weight:700; font-size:clamp(24px, 2.6vw, 30px); line-height:1.15; letter-spacing:0; }
/* card and chart titles were 15px / 17px / 17.55px, weight 600 or 700, depending on the generator */
.card > h3, .card h3:first-of-type, .cmp-chart > h3, .xp-chart > h3, .xp-chart h3:first-of-type, .rank-box > h3, .fundchart > h3,
.sc-wrap > h3{ font-size:var(--ds-title-card); font-weight:700; line-height:1.3; }
.fd-card h4{ line-height:1.3; }

/* ---- readability floor: table heads and notes were 10.5-11.7px on five pages. Done in design-system.js, which only RAISES
   running text below 12px (a CSS rule cannot read the old size and would shrink the larger column labels the owner asked for). ---- */

/* ---- table cells named "wrap" ----
   Several tables mark long-text cells with class="wrap", which is also the page wrapper's class (.wrap{ display:flex;
   flex-direction:column; gap:40px }). The cells became flex boxes, so the browser stacked consecutive "wrap" cells into one
   column (title / instructor / home department piled up, header columns left empty). Restore table-cell layout. */
table td.wrap, table th.wrap{ display:table-cell !important; max-width:none !important; margin:0 !important; gap:normal; flex-direction:initial; }

/* ---- two-column "chart + explanation" layouts: text starts at the top, never floats mid-column ---- */
.compare-layout{ align-items:start; }

/* ---- tables never push past their card: scroll inside the card when wider ---- */
.xp-table-wrap, .staff-table-wrap, .pp-table-wrap, .peer-table-wrap, .pi-table-wrap, .cmp-table-wrap{ max-width:100%; overflow-x:auto; }

/* ---- phone widths: nothing may push the page sideways ----
   the peer administration charts asked for a 340px minimum column (wider than a phone's content box), and the course
   delivery-mode table sat in a chart frame with no scroll container */
.pa-charts{ grid-template-columns:repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.cmp-chart > table, table.course-mode-table{ display:block; max-width:100%; overflow-x:auto; }
.cmp-chart, .xp-chart, .card, .fundchart{ min-width:0; }

/* ---- keyboard focus: one visible ring everywhere ---- */
:where(a, button, select, input, textarea, summary, [tabindex]):focus-visible{ outline:2px solid var(--guf, #b6862c); outline-offset:2px; box-shadow:var(--ds-focus); }

/* ---- touch targets: small selects and tag buttons reach 28px+ ---- */
select{ min-height:32px; }
.fd-tone{ min-height:22px; }

/* ---- Context pills inside chart cards: compact, never under the corner "⋯" button ---- */
.cm-host > .ctx-bar{ padding-right:44px; }
.ctx-btn.ctx-compact .ctx-long{ display:none !important; }
.ctx-btn.ctx-compact .ctx-short{ display:inline !important; }

/* ---- the home page's change log folds away (still one click away) ---- */
details.fd-changes > p{ margin:6px 0 0; }
details.fd-changes > summary{ cursor:pointer; font-weight:700; font-size:14px; color:var(--ink-muted, #66645a); list-style:none; display:inline-flex; align-items:center; gap:6px; padding:4px 0; }
details.fd-changes > summary::before{ content:"\25B8"; transition:transform .15s; }
details.fd-changes[open] > summary::before{ transform:rotate(90deg); }
details.fd-changes > summary::-webkit-details-marker{ display:none; }

@media (max-width:760px){
  .section-head h2{ font-size:clamp(22px, 6vw, 26px); }
  .cm-host > .ctx-bar{ padding-right:40px; }
}
/* phone gutters: page margin 8 + padding 20 + section padding 26-36 left a 375 px phone only 242-262 px for a card (65%).
   One 12 px page gutter and 14 px section padding give the content ~320 px. */
@media (max-width:560px){
  body{ margin:0 !important; padding-left:12px !important; padding-right:12px !important; }
  .spotlight, section.xp-box, .ask-box, .home-bar{ padding-left:14px !important; padding-right:14px !important; }
  .fd-card{ padding-left:16px !important; padding-right:16px !important; }
  /* floating Top / Reset buttons: compact on phones (they covered card menus and the first line of text) */
  .wsu-top, body.home-compact .wsu-top{ top:auto !important; bottom:16px !important; right:12px !important; font-size:13px !important; padding:9px 12px !important; }
  .wsu-reset{ left:12px !important; bottom:16px !important; font-size:13px !important; padding:9px 12px !important; }
}
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
}