/* CS 399 - Early Researcher Experience Program
   Light background only. No frameworks, no webfonts, no JavaScript. */

:root {
  color-scheme: light;
  --ink:    #1a1a1a;
  --ink-2:  #4a4a4a;
  --ink-3:  #767676;
  --line:   #dcdcd7;
  --bg:     #ffffff;
  --alt:    #f7f6f3;
  --gold:   #b47c00;
  --link:   #17457e;
  --grid:   #9aa0a6;

  --social:  #2f6a99;
  --panel:   #0d6b63;
  --talks:   #a8560a;
  --stories: #5c3d94;
  --intro:    #8a5f00;
  --workshop: #0b6ea8;
}

* { box-sizing: border-box; }

html { font-size: 112%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1.62 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 940px; margin: 0 auto; padding: 0 22px; }

a { color: var(--link); }
a:hover { color: var(--gold); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 14px; letter-spacing: -.01em; }
h2 {
  font-size: 1.15rem; margin: 0 0 14px; padding-bottom: 7px;
  border-bottom: 2px solid var(--gold);
}
h3 { font-size: 1.02rem; margin: 26px 0 9px; }
h4 { font-size: 1rem; margin: 22px 0 7px; color: var(--ink-2); }
p  { margin: 0 0 12px; }

/* ---------- header ---------- */

header { border-bottom: 1px solid var(--line); padding: 26px 0 0; }
.dept {
  font-size: 1rem; color: var(--ink-3);
  letter-spacing: .04em; margin-bottom: 6px;
}
nav { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 16px; }
nav a {
  padding: 7px 11px; font-size: .9rem; text-decoration: none;
  color: var(--ink-2); border-bottom: 2px solid transparent;
}
nav a:hover { color: var(--ink); border-bottom-color: var(--gold); }

/* ---------- sections ---------- */

section { padding: 34px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 14px; }
section:last-child { border-bottom: 0; }
.note { font-size: .9rem; color: var(--ink-3); margin-bottom: 14px; }
.flag {
  color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* ---------- course info list ---------- */

.info { margin: 18px 0 0; display: grid; grid-template-columns: 185px 1fr; gap: 10px 20px; }
.info dt { font-weight: 600; color: var(--ink-2); }
.info dd { margin: 0; }

@media (max-width: 620px) {
  .info { grid-template-columns: 1fr; gap: 2px 0; }
  .info dd { margin-bottom: 12px; }
}

/* ---------- body copy ---------- */

main p { max-width: 78ch; }
main h3 { margin-top: 30px; scroll-margin-top: 14px; }
main .scroll { margin: 14px 0 4px; }
main .note { margin: 8px 0 0; }

/* ---------- tables ---------- */

.scroll { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th[scope="col"] {
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--ink-3);
}
th[scope="row"] { font-weight: 400; color: var(--ink-2); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--alt); }
.num { text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; }
td:first-child, th:first-child { padding-left: 0; }
td:last-child, th:last-child { padding-right: 0; }

.grades { max-width: 680px; }

/* CRA's schedule tables, kept in CRA's layout and colours */
.cracal { min-width: 820px; border: 1px solid var(--grid); }
.cracal.ug   { --band: #dae3f3; }
.cracal.grad { --band: #e2efd9; }
.cracal th, .cracal td {
  border: 1px solid var(--grid); text-align: center; vertical-align: middle;
  padding: 7px 10px;
}
.cracal th[scope="col"], .cracal th[scope="row"], .cracal .cap {
  font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--ink);
}
.cracal thead th { background: var(--band); font-weight: 700; }
.cracal .cap { font-size: 1rem; }
.cracal th[scope="row"] { width: 170px; font-weight: 400; line-height: 1.35; }
.cracal tbody tr:nth-child(even) { background: none; }
.cracal tbody tr:last-child td, .cracal tbody tr:last-child th { border-bottom: 1px solid var(--grid); }
.cracal .foot { font-size: .92rem; color: var(--ink-2); }

.sched { min-width: 700px; }
.sched .num { width: 38px; color: var(--ink-3); }
.sched .date { width: 118px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sched .room { width: 104px; white-space: nowrap; }
.sched .off, .sched .off a { color: var(--ink-3); }

.k { font-weight: 600; }
.k-social  { color: var(--social); }
.k-panel   { color: var(--panel); }
.k-talks   { color: var(--talks); }
.k-stories { color: var(--stories); }
.k-intro   { color: var(--intro); }
.k-workshop { color: var(--workshop); }
.k-break   { color: var(--ink-3); font-weight: 400; }

.projs { min-width: 560px; }
.projs .num:first-child { width: 34px; color: var(--ink-3); }

/* ---------- lists ---------- */

.links, .next { margin: 0; padding-left: 20px; }
.next { max-width: 78ch; }
.next li { margin-bottom: 6px; }
.links li { margin-bottom: 6px; }

.policies { margin: 0; max-width: 78ch; }
.policies dt { font-weight: 600; margin-top: 14px; }
.policies dt:first-child { margin-top: 0; }
.policies dd { margin: 3px 0 0; color: var(--ink-2); font-size: .95rem; }
.land { max-width: 78ch; color: var(--ink-2); font-size: .93rem; }

/* ---------- print ---------- */

@media print {
  nav { display: none; }
  body { font-size: 11.5pt; }
  section { padding: 14px 0; break-inside: avoid; }
  tbody tr:nth-child(even) { background: none; }
  a { color: inherit; text-decoration: none; }
}