/* Site-wide styles: design tokens, the header band both pages share, and the
   home page's card layout. The schedule grid's own styles live in
   schedule.css; both pages load this file first, so the :root tokens are the
   single source for colors and type. */

:root {
  --orange: #BF5700;              /* UT burnt orange */
  --orange-deep: #a34400;
  --ink: #23201c;
  --muted: #736c62;
  --line: #e5e0d7;
  --paper: #fcfbf8;
  --card: #ffffff;
  --red: #b3261e;                 /* DUE event banners */
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15.5px/1.6 var(--sans);
}

a { color: var(--orange-deep); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* Header band: course number as orange lead-in text inside the h1 (not a
   button), term line under it, nav buttons on their own row below. */
header {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 18px 0 0;
}
h1 { font: 700 1.45rem var(--sans); margin: 0; }
h1 .num { color: var(--orange); font-weight: 800; }
.term { color: var(--muted); font: 400 13.5px var(--sans); margin: 2px 0 12px; }
nav.top { display: flex; gap: 8px; padding-bottom: 14px; }
nav.top a {
  background: var(--orange);
  color: white;
  text-decoration: none;
  font: 600 13.5px var(--sans);
  padding: 7px 13px;
  border-radius: 6px;
}
nav.top a:hover { background: var(--orange-deep); }
nav.top a[aria-current] { box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.55); }
nav.top a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

footer { padding: 18px 0 30px; font: 400 12.5px var(--sans); color: var(--muted); }

/* ── Home page (index.html): single column of content cards. Everything below
      is scoped to the .cols layout (or classes only the home page uses) so it
      cannot leak into the schedule page, which also loads this file. ── */

.cols { margin: 22px 0; }
.cols .main section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 18px;
}
.cols h2 {
  font: 700 1.1rem var(--sans);
  margin: 0 0 0.7rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--orange);
}
.cols h3 { font: 700 0.95rem var(--sans); margin: 1.3rem 0 0.4rem; }
.cols p { margin: 0.55rem 0; }
.cols li::marker { color: var(--orange); }

/* Staff strip: compact instructor/TA line above the content cards */
.cols .main .staffbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 32px;
  padding: 12px 24px;
}
.staffbar .k { color: var(--muted); font: 400 13px var(--sans); margin-right: 7px; }

/* Grading breakdown: stacked bar + legend (colors validated for CVD
   separation and lightness; identity also carried by the direct labels) */
.gbar { display: flex; gap: 2px; height: 16px; margin: 12px 0 8px; }
.gbar span:first-child { border-radius: 4px 0 0 4px; }
.gbar span:last-child { border-radius: 0 4px 4px 0; }
.s1 { background: #8f3d00; }
.s2 { background: #BF5700; }
.s3 { background: #E0812E; }
/* Topic-mix bar: same ordinal ramp extended one step darker and one lighter
   (middle three match .s1–.s3); light end holds >=2:1 against --paper */
.t1 { background: #6b2c00; }
.t2 { background: #8f3d00; }
.t3 { background: #BF5700; }
.t4 { background: #E0812E; }
.t5 { background: #eda053; }
.glegend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font: 400 13.5px var(--sans);
}
.glegend .sw {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
}
.glegend b { font-variant-numeric: tabular-nums; margin-left: 4px; }

/* Project list: number, topic icon, description + beat chips */
.projects { border-top: 1px solid var(--line); margin: 12px 0 4px; }
.proj {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.proj .pi { color: var(--orange); flex: none; margin-top: 2px; }
.pnum { font: 600 12.5px var(--sans); color: var(--muted); min-width: 1.1em; margin-top: 3px; }
.pi svg { width: 1.2em; height: 1.2em; vertical-align: -0.2em; }
.proj .repo-tag {
  font: 600 11.5px var(--mono);
  color: #735b43;
  background: #f7f1e9;
  border: 1px solid #dfd2c2;
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* Beat chips: the staged drops (v1 → v2 → …) each project lands in */
.beats { display: flex; flex-wrap: wrap; gap: 5px 6px; margin-top: 6px; align-items: center; }
.bt {
  font: 600 11.5px var(--sans);
  background: #faeee2;
  color: #8a4a10;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.bt b { color: #bf5700; margin-right: 4px; font-weight: 800; }
.bt.ungraded { background: transparent; border: 1px dashed #d8c6b2; color: #8a7f70; }
.bt.ungraded b { color: #a08b74; }
.beats .sep { color: #c9b8a4; font-size: 11px; }