/* 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; }
}

/* ---- balance (owner rule 2026-10-15): in a filter row, filters sit left and the result note / count sits right ---- */
.xp-filters > .xp-count:first-of-type, .senior-controls .senior-count{ margin-left:auto; text-align:right; }
@media (max-width:640px){ .xp-filters > .xp-count:first-of-type, .senior-controls .senior-count{ margin-left:0; text-align:left; flex-basis:100%; } }

/* ---- table alignment standard (owner's brief 2026-10-15; columns classified by design-system.js) ---- */
table{ font-variant-numeric:tabular-nums; }
table td.ds-r, table th.ds-r{ text-align:right !important; }
table td.ds-l, table th.ds-l{ text-align:left !important; }
table td.ds-c, table th.ds-c{ text-align:center !important; }
table.ds-table th[colspan]:not([colspan="1"]){ text-align:center !important; }
table td.ds-r{ white-space:nowrap; }
table td.ds-n{ white-space:nowrap; } /* numeric cells, centred since 2026-10-17 */

/* ======================================================================================================================
   COORDINATED REVIEW (2026-10-15): one header system on every page, one type scale, contrast, aligned control heights.
   See design-review/2026-10-15-consolidated-assessment.md for the measurements behind each rule.
   ==================================================================================================================== */
/* ---- title and header spacing (pasted instruction: 40-48px above, 44-48px / 800 / 1.15-1.2, 32-40px to the panel) ---- */
body{ padding-top:44px !important; }
header h1:not(.site-title), h1.site-title .st-sub{ font-size:clamp(28px, 4.2vw, 46px) !important; font-weight:800 !important; line-height:1.18 !important; text-align:center; text-wrap:balance; overflow-wrap:break-word; }
body.home-compact header{ margin-bottom:22px !important; }
.wrap:has(.ds-bar){ position:relative; }
.wrap:has(.ds-bar) > header > a.back{ display:none !important; }
.wrap:has(.ds-bar) > header{ margin-bottom:-4px; }
@media (max-width:760px){ body{ padding-top:24px !important; } }

/* ---- shared control panel on report and drill-down pages (same look as the home toolbar) ---- */
.ds-bar{ display:grid; grid-template-columns:auto minmax(220px, 260px) minmax(320px, 1fr); align-items:end; gap:14px 24px; padding:26px 24px; background:#EEF3F6; border:1px solid #D6DEE4; border-radius:14px; }
.ds-bar .hb-nav{ display:flex; flex-direction:column; align-items:flex-start; gap:11px; min-width:0; }
.ds-bar .hb-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.ds-bar .hb-pills a{ min-height:52px; box-sizing:border-box; display:inline-flex; align-items:center; padding:0 18px; border-radius:999px; border:1px solid #d5d9de; background:#fff; color:#252A30; font:600 16px/1 'IBM Plex Sans',system-ui,sans-serif; text-decoration:none; }
.ds-bar .hb-pills a:hover{ border-color:#245A73; color:#245A73; }
.ds-bar .hb-pills a.on, .ds-bar .hb-pills a.on:hover{ background:#245A73; border-color:#245A73; color:#fff; font-weight:700; }
.ds-bar .hb-k, .ds-bar .hb-lab{ font:600 13.5px/1.2 'IBM Plex Sans',system-ui,sans-serif; letter-spacing:.04em; text-transform:uppercase; color:#3F4A55; margin:0; }
.ds-bar label.ds-col{ display:flex; flex-direction:column; gap:11px; min-width:0; }
.ds-bar select.ds-college{ min-height:52px; width:100%; box-sizing:border-box; padding:0 40px 0 16px; border:1.5px solid #B88628; border-radius:999px; background-color:#fff; background-image:linear-gradient(45deg, transparent 50%, #B88628 50%), linear-gradient(135deg, #B88628 50%, transparent 50%); background-position:calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; -webkit-appearance:none; appearance:none; font:700 16px/1.2 'IBM Plex Sans',system-ui,sans-serif; color:#252A30; cursor:pointer; }
.ds-bar .hb-askq{ display:flex; flex-direction:column; gap:11px; min-width:0; margin:0; }
.ds-bar .hb-askrow{ display:flex; align-items:center; gap:10px; min-height:52px; box-sizing:border-box; padding:0 5px 0 16px; border:1.5px solid #B88628; border-radius:999px; background:#fff; }
.ds-bar .hb-askrow:focus-within{ box-shadow:0 0 0 3px rgba(184,134,40,.28); }
.ds-bar .hb-askrow .ha-icon{ color:#B88628; font-size:18px; line-height:1; }
.ds-bar .hb-askrow input{ flex:1; min-width:0; min-height:48px; border:0 !important; outline:0; box-shadow:none !important; padding:0 !important; border-radius:0 !important; background:transparent !important; font:500 16px/1.2 'IBM Plex Sans',system-ui,sans-serif; color:#252A30; }
.ds-bar .hb-askrow input::placeholder{ color:#5F6670; }
.ds-bar .hb-askrow button{ flex:none; height:42px; padding:0 20px; border:0; border-radius:999px; background:#8F6618; color:#fff; font:600 16px/1 'IBM Plex Sans',system-ui,sans-serif; cursor:pointer; }
.ds-bar .hb-askrow button:hover{ background:#7A5A12; }
@media (max-width:1399px){ .ds-bar{ grid-template-columns:minmax(200px, 300px) minmax(0, 1fr); } .ds-bar .hb-nav{ grid-column:1 / -1; } }
@media (max-width:640px){ .ds-bar{ grid-template-columns:minmax(0, 1fr); padding:16px; } .ds-bar .hb-pills a{ min-height:42px; padding:0 14px; font-size:15px; } .ds-bar .hb-pills{ gap:6px; } }
/* the separate Ask boxes retire where the panel exists (answers open in the chat window); their Data sources / About row
   moves to the page's top-right corner, like the home page */
.wrap:has(.ds-bar) #askSection, .wrap:has(.ds-bar) #xpAskBox{ display:contents !important; }
.wrap:has(.ds-bar) #askSection > :not(.info-btns), .wrap:has(.ds-bar) #xpAskBox > :not(.info-btns){ display:none !important; }
.wrap:has(.ds-bar) .info-btns{ position:absolute !important; top:-34px !important; right:0 !important; margin:0 !important; width:auto !important; z-index:5; }
.wrap:has(.ds-bar) .xp-nav label.xp-other{ display:none !important; }
@media (max-width:760px){ .wrap:has(.ds-bar) .info-btns{ position:static !important; justify-content:flex-end; } }

/* ---- section links on every page: the same quiet tab strip as the home "Jump to" ---- */
.num-nav, .xp-jumps, header .nav{ background:var(--bg) !important; border:0 !important; border-bottom:1px solid var(--line) !important; border-radius:0 !important; box-shadow:none !important; padding:4px 0 !important; margin:0 !important; gap:2px 4px !important; display:flex; flex-wrap:wrap; align-items:center; }
.num-nav::before, .xp-jumps::before, header .nav::before{ content:"Jump to"; font:700 13px/1 'IBM Plex Sans',system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#58616B; margin:0 8px 0 0; }
.num-nav a, .xp-jumps .xp-jump, header .nav a{ font:600 16px/1.2 'IBM Plex Sans',system-ui,sans-serif !important; padding:8px 14px !important; border:0 !important; border-radius:999px !important; background:transparent !important; color:#245A73 !important; box-shadow:none !important; text-decoration:none; min-height:0 !important; }
.num-nav a:hover, .xp-jumps .xp-jump:hover, header .nav a:hover{ text-decoration:underline; }
.num-nav a.active, .num-nav a.on, .xp-jumps .xp-jump.active, .xp-jumps .xp-jump.on{ background:#fff !important; box-shadow:inset 0 -3px 0 #245A73 !important; }
.xp-nav{ border:0 !important; background:transparent !important; padding:0 !important; }
@media (max-width:760px){ .num-nav, .xp-jumps{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; } .num-nav a, .xp-jumps .xp-jump{ font-size:15px !important; white-space:nowrap; } }

/* ---- one type scale: page title 46 > section heading 30 > card title 17-18 > body 15-16; metrics at least 20 ---- */
.spotlight-head h2, .spotlight > h2{ font-size:clamp(24px, 2.4vw, 30px) !important; line-height:1.18 !important; }
.fundchart .fc-val, .fc-val{ font-size:20px !important; font-weight:700 !important; }

/* ---- contrast (WCAG AA): faint text, gold text, white on gold, warning red ---- */
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --ink-faint:#5F6670; } }
:root[data-theme="light"]{ --ink-faint:#5F6670; }
.college-cta, .fc-label.guf-label{ color:#7A5A12 !important; }
.wsu-reset, .home-bar .hb-askrow button{ background:#8F6618 !important; border-color:#7A5A12 !important; }
.xp-stat.bad-card .why{ color:#8E2418 !important; }
.xp-stat.bad-card .lbl, .xp-stat.bad-card .chg{ color:#3F4A55 !important; }

/* ---- card top rows: period badge, tag, Context and menu share one 28px height ---- */
.fd-card .fd-period, .fd-card .fd-topmid .fd-tone{ height:28px; box-sizing:border-box; display:inline-flex; align-items:center; }
.fd-card h4 .ctx-btn{ height:28px !important; box-sizing:border-box; padding-top:0 !important; padding-bottom:0 !important; top:16px !important; }
.fd-card > .cm-btn{ width:28px !important; height:28px !important; top:16px !important; font-size:16px !important; }

/* ---- cards sized to their content in mixed chart / table rows; controls never under the corner menu ---- */
.course-grid, .xp-charts{ align-items:start !important; }
.cm-host > .hp-controls:first-child, .cm-host > .xp-filters:first-child{ padding-right:44px; }

/* panel -> section strip 24px (wrap gap 40 - 16), strip spans the content width on the college page too */
.wrap > .ds-bar + .num-nav, .wrap > .ds-bar + .xp-nav, .wrap > .ds-bar ~ .num-nav:first-of-type{ margin-top:-16px !important; }
.xp-nav{ display:flex; } .xp-nav .xp-jumps{ flex:1 1 auto; }
header .ds-bar{ margin:6px 0 2px; }
.num-nav::before, .xp-jumps::before, header .nav::before{ white-space:nowrap; flex:none; }
@media (max-width:760px){ .wrap:has(.ds-bar) > header{ order:-3; } .wrap:has(.ds-bar) > #askSection .info-btns, .wrap:has(.ds-bar) > #xpAskBox .info-btns, .wrap:has(.ds-bar) > .info-btns{ order:-2; } }
@media (max-width:760px){ .wrap:has(.ds-bar){ gap:24px !important; } }
@media (max-width:640px){ .xp-filters label, .xp-filters > *{ min-width:0 !important; max-width:100% !important; } .xp-filters select, .xp-filters input{ max-width:100% !important; width:100% !important; min-width:0 !important; } } /* long department names must not widen phone filter rows (2026-10-15) */

/* View data disclosures under charts (design review 2026-10-17) */
.vd{ margin:6px 0 0; } .vd > summary{ cursor:pointer; display:inline-block; font:700 14px/1.3 'IBM Plex Sans',system-ui,sans-serif; color:#245A73; padding:6px 0; } .vd > summary:hover{ text-decoration:underline; } .vd[open] > summary{ margin-bottom:6px; }

/* Laptop screens (owner 2026-10-17: "if the overall font size gets smaller for small screens like laptops, visualization will be
   improved"): the whole page is scaled like browser zoom, text, spacing and charts together; phones (760 px and under) and wide
   monitors (1600 px and over) are unchanged. Most sizes in these pages are fixed pixels, so a smaller base font alone would not reach them. */
@media (min-width:761px) and (max-width:1279px){ html{ zoom:.85; } }
@media (min-width:1280px) and (max-width:1599px){ html{ zoom:.9; } }

/* One accent for every control (owner 2026-10-17, third design review: "one accent colour for interactions, neutral borders"): the
   dashboard blue. Gold stays in the logo and in the charts' data colours (--guf is a data colour, so it is not redefined). */
:root{ --ds-accent:#245A73; --ds-accent-dark:#1B4457; --ds-accent-soft:#EEF5F8; }
.hb-askrow, .ds-bar .hb-askrow{ border-color:var(--ds-accent) !important; }
html body .hb-askrow button, html body .ds-bar .hb-askrow button, html body .home-bar .hb-askrow button, .ask-form button, .xp-askform button{ background:var(--ds-accent) !important; border-color:var(--ds-accent-dark) !important; color:#fff !important; }
html body .hb-askrow button:hover, html body .ds-bar .hb-askrow button:hover, html body .home-bar .hb-askrow button:hover, .ask-form button:hover, .xp-askform button:hover{ background:var(--ds-accent-dark) !important; }
.wsu-reset, html body .wsu-top, html body.home-compact .wsu-top{ background:var(--ds-accent) !important; border-color:var(--ds-accent-dark) !important; }
.wsu-reset:hover, html body .wsu-top:hover{ background:var(--ds-accent-dark) !important; } .wsu-reset.on{ box-shadow:0 0 0 4px rgba(36,90,115,.22), 0 8px 22px rgba(0,0,0,.2) !important; }
.m-burger{ background:var(--ds-accent) !important; border-color:var(--ds-accent-dark) !important; } .m-burger span{ background:#fff !important; }
.m-link.active{ background:var(--ds-accent) !important; color:#fff !important; } .m-link:hover, .m-link:active{ background:var(--ds-accent-soft) !important; }
.home-bar select, .xp-other select, .ds-bar select, .ds-college, .xp-askform input{ border-color:var(--ds-accent) !important; }
.info-btn:hover, .info-btns.al-row .info-btn:hover, .ask-followups button:hover, .ask-chart-head button:hover, .xp-person .actions button:hover, .xp-modal-head button:hover{ border-color:var(--ds-accent) !important; }
.al-btn.gold{ background:var(--ds-accent) !important; color:#fff !important; border-color:var(--ds-accent-dark) !important; }
:where(a, button, select, input, textarea, summary, [tabindex]):focus-visible{ outline-color:var(--ds-accent) !important; }
/* Discussion: a quiet comment count, not a gold button (third design review: "Discussion · 0 should have very little prominence") */
.ctx-btn{ background:transparent !important; border:1px solid #D5D9DE !important; color:#58616B !important; font-weight:600 !important; box-shadow:none !important; }
.ctx-btn:hover{ border-color:var(--ds-accent) !important; color:var(--ds-accent) !important; }
.ctx-btn.has{ color:var(--ds-accent) !important; border-color:#9FBFCD !important; } .ctx-btn.office.has{ background:var(--ds-accent-soft) !important; color:var(--ds-accent-dark) !important; }
.fd-card .ctx-btn, .ct-card .ctx-btn{ border-color:transparent !important; padding:2px 6px !important; font-size:12.5px !important; font-weight:500 !important; }

/* Scope row on every page (owner 2026-10-17, "make all pages consistent, with a button to go back to the university report page"):
   a back button to the university overview and the report the page belongs to, the same row the landing page shows */
.ds-bar .hb-pills .ds-back{ border-color:var(--ds-accent) !important; color:var(--ds-accent) !important; font-weight:700; }
.ds-bar .hb-pills .ds-back:hover{ background:var(--ds-accent-soft) !important; }
.ds-bar .hb-pills .ds-here{ min-height:52px; box-sizing:border-box; display:inline-flex; align-items:center; padding:0 18px; border-radius:999px; border:1px solid var(--ds-accent); background:#fff; color:var(--ds-accent); font:600 16px/1 'IBM Plex Sans',system-ui,sans-serif; text-decoration:none; }
.ds-bar .hb-pills .ds-here.on{ background:var(--ds-accent); color:#fff; font-weight:700; }
@media (max-width:640px){ .ds-bar .hb-pills .ds-here{ min-height:42px; padding:0 14px; font-size:15px; } }
/* select chevrons in the accent too (one accent, 2026-10-17) */
.home-bar select, .ds-bar select, .ds-college, .ct-scopebar select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23245A73' stroke-width='2'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 14px center !important; background-size:12px 8px !important; }
/* the window's Discussion link is a quiet secondary action in the accent (2026-10-17) */
.fd-dlg-ctx, .ct-dlg .ctx-btn{ color:var(--ds-accent) !important; border-color:#9FBFCD !important; background:#fff !important; font-weight:600 !important; }

/* top bar 2026-10-17 (owner: "add logo to top left of each page"; "make logo top left larger"; "instead of this [the ← Overview button]
   have home button and logo on top of the page"): an in-flow bar opening the page column, logo + Home on the left, the page's Data sources /
   About / Share / Get the app row on the right (moved in by design-system.js); the page title starts below it. Phones keep only the row
   (its More menu): the phone bar carries the logo and the menu. */
.ds-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 20px; margin:0; padding:2px 0 0; }
.ds-top-l{ display:flex; align-items:center; gap:18px; min-width:0; }
.ds-top-r{ display:flex; justify-content:flex-end; min-width:0; }
.ds-logo{ display:block; line-height:0; border-radius:6px; }
.ds-logo img{ display:block; height:56px; width:auto; }
/* Home sits last in the button row in the same pill as Data sources / About / Share / Get the app (owner 2026-10-17); it is a link, so it
   gets the button's look explicitly and no underline; the tiles page has none */
.info-btns .info-btn.ds-home{ order:99; display:inline-flex; align-items:center; gap:6px; text-decoration:none; font:700 13px/1 'IBM Plex Sans',system-ui,sans-serif; padding:8px 14px; border-radius:999px; border:1px solid var(--line,#dcd8c9); background:var(--surface,#fff); color:var(--ink,#1b1c16); }
.info-btns .info-btn.ds-home svg{ width:14px; height:14px; flex:none; }
.ds-logo:focus-visible, .info-btns .ds-home:focus-visible{ outline:2px solid var(--ds-accent,#245A73); outline-offset:3px; }
html body .ds-top-r > .info-btns.info-btns.info-btns{ position:static !important; top:auto !important; right:auto !important; left:auto !important; margin:0 !important; width:auto !important; z-index:auto; }
@media (max-width:1099px){ .ds-logo img{ height:44px; } }
@media (max-width:760px){ .ds-top{ order:-4; justify-content:flex-end; padding:0; } .ds-top-l{ display:none !important; } .ds-top-r{ width:100%; } html body .ds-top-r > .info-btns.info-btns.info-btns{ width:100% !important; } }
@media print{ .ds-home, .ds-top-r{ display:none !important; } }
/* a page outside the reports (college page) has no Report column now: Scope and Ask take the panel */
.ds-bar.ds-bar--nonav{ grid-template-columns:minmax(220px, 300px) minmax(320px, 1fr); }
@media (max-width:640px){ .ds-bar.ds-bar--nonav{ grid-template-columns:minmax(0, 1fr); } }
/* logo 2026-10-17, dark mode: the logo's black lettering is drawn light (desktop logo and the phone bar's) */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ds-logo img, :root:not([data-theme="light"]) .m-logo img{ filter:invert(1) hue-rotate(180deg); } }
:root[data-theme="dark"] .ds-logo img, :root[data-theme="dark"] .m-logo img{ filter:invert(1) hue-rotate(180deg); }

/* discussion college 2026-10-17 (owner): the Discussion pill on the college-page tiles, top right and compact as on the home cards */
.ct-card{ position:relative; }
.ct-card h4 .ctx-btn{ position:absolute; top:14px; right:16px; margin:0 !important; font-size:11.5px !important; padding:0 9px !important; height:26px; box-sizing:border-box; }
.ct-card h4 .ctx-long{ display:none !important; } .ct-card h4 .ctx-short{ display:inline !important; }
/* owner 2026-10-17 ("move this to main page below logo ... remove it from top of the first page, and enlarge logo on top left"):
   the top-left logo is larger; the tiles page's big title (header h1.site-title, only on wsu-home.html) now sits under the landing
   page's logo and stays here for screen readers only */
html body header h1.site-title{ position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; margin:0 !important; padding:0 !important; border:0 !important; }
/* the tiles page's header holds only that hidden title now: it takes no room (it left a gap on phones) */
html body header:has(> h1.site-title){ padding:0 !important; margin:0 !important; min-height:0 !important; height:0 !important; border:0 !important; }
/* top bar 2026-10-17: the room above the page that the floating buttons used to need is not needed any more */
@media (min-width:761px){ html body:has(.ds-top){ padding-top:14px !important; } }
/* the college, detail, Omaha and by-college pages padded their column for the old floating buttons: the bar sits at the same height everywhere */
@media (min-width:761px){ html body > .wrap:has(> .ds-top){ padding-top:8px !important; } }
@media (min-width:761px){ html body:has(.ds-top){ margin-top:0 !important; } } /* the browser's default 8 px left the report pages' bar lower */
/* the college page's panel holds Ask the data only (its Scope bar picks the college and department; owner 2026-10-17) */
.ds-bar.ds-bar--askonly{ grid-template-columns:minmax(0, 1fr) !important; }
/* page title under the logo, left-aligned at the logo's scale (owner 2026-10-17: "move this under logo and align it size wise"); design-system.js
   moves the title on screens wider than a phone */
.ds-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
html body .ds-top .ds-brand h1, html body .ds-top .ds-brand h1#xpTitle{ margin:0 !important; text-align:left !important; font-size:clamp(22px, 2.1vw, 30px) !important; line-height:1.15 !important; font-weight:800; max-width:min(720px, 60vw); }
.ds-top.ds-has-title{ align-items:flex-start; }
.ds-top.ds-has-title .ds-top-r{ margin-top:13px; }
/* one top line on every page wider than a phone (owner 2026-10-19: "be consistent in page layout"): a long page title wraps inside the
   left side instead of pushing the Data sources / About / Share / Get the app / Home row onto a line of its own */
@media (min-width:761px){ .ds-top{ flex-wrap:nowrap; } .ds-top-l{ flex:1 1 auto; } .ds-top-r{ flex:0 0 auto; } }
/* the page note of the newer report pages (tools/add_wsu_page_frame.js): the header's paragraph, moved under the Jump-to bar */
.pg-note{ margin:4px 0 16px; max-width:1100px; font:400 14px/1.55 'IBM Plex Sans',system-ui,sans-serif; color:var(--ink-muted, #5d5a52); }
@media (max-width:1099px){ .ds-top.ds-has-title .ds-top-r{ margin-top:8px; } }
html body header.ds-hdr-empty{ display:none !important; }
/* sortable tables (owner 2026-10-17: "make tables sortable"): headings are buttons in effect; the arrow shows the order */
table.ds-sortable thead th{ cursor:pointer; user-select:none; }
table.ds-sortable thead th:hover{ color:var(--ds-accent,#245A73); }
table.ds-sortable thead th[aria-sort="ascending"]::after{ content:" \25B2"; font-size:.75em; color:var(--ds-accent,#245A73); }
table.ds-sortable thead th[aria-sort="descending"]::after{ content:" \25BC"; font-size:.75em; color:var(--ds-accent,#245A73); }
/* one arrow per picker (owner 2026-10-17: "why two arrows next to each other? drop right one"): the browser's own arrow goes, the drawn chevron stays */
html body .ct-scopebar select, html body .home-bar select, html body .ds-bar select{ -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important; padding-right:34px !important; }