/* Tokens: see DESIGN.md for the reason behind each value. */
:root {
  --crest: #920c24;
  --crest-deep: #760a1d;
  --crest-text: #f6dde1;
  --paper: #ffffff;
  --surface: #faf7f8;
  --ink: #26213a;
  --muted: #625a6b;
  --line: #e7e1e6;
  --tint: #fbeef0;
  --clash: #bb3939;
  --clash-hatch: repeating-linear-gradient(135deg, #f7dcdc 0 6px, #fff 6px 12px);

  --ui: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --title: "Source Serif 4", Georgia, serif;

  --r: 10px;
  --r-lg: 14px;
  --float-shadow: 0 12px 32px rgb(38 33 58 / 18%), 0 2px 6px rgb(38 33 58 / 10%);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 var(--ui);
}
h1, h2, h3, h4, p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--ink); color: #fff; border-radius: var(--r); }
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border: 2px solid var(--ink); border-radius: var(--r);
  background: transparent; color: var(--ink);
  font-weight: 700; font-size: 15px; line-height: 1.2; text-align: center;
  transition: background-color .12s, color .12s;
}
.button:hover { background: var(--surface); }
.button-primary { background: var(--crest); border-color: var(--crest); color: #fff; }
.button-primary:hover { background: var(--crest-deep); border-color: var(--crest-deep); }
.button-ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.button-ink:hover { background: #3d3654; border-color: #3d3654; }
.button-small { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.button-quiet { border-color: transparent; color: var(--muted); padding-inline: 8px; }
.button-quiet:hover { color: var(--ink); background: transparent; text-decoration: underline; }

/* ---------- Home (crest field) ---------- */
.home {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--crest); color: #fff;
  padding: 48px 24px 24px;
}
.home-inner {
  width: 100%; max-width: 1080px; margin: auto;
  display: grid; grid-template-columns: 1fr minmax(0, 560px); gap: 56px; align-items: start;
}
.home-intro { position: sticky; top: 48px; }
.home-intro .wordmark { font-weight: 700; font-size: 15px; color: var(--crest-text); margin-bottom: 20px; }
.setup-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; max-width: 46ch; }
.setup-top .link-button { flex: none; font-size: 14px; }
.start-again { margin: -6px 0 24px; padding: 14px 16px; border-radius: var(--r); background: #fff; color: var(--ink); max-width: 46ch; font-size: 15px; }
.start-again strong { display: block; color: var(--crest); margin-bottom: 4px; }
.home-intro .start-again p { color: var(--ink); max-width: none; }
.start-again-actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.start-again .button { border-color: var(--crest); color: var(--crest); }
.start-again .button:hover { background: var(--crest); color: #fff; }
.start-again .link-button { color: var(--ink); }
.home-intro h1 { font-size: 34px; line-height: 1.15; margin-bottom: 16px; text-wrap: balance; }
.home-intro p { color: var(--crest-text); max-width: 46ch; }
.home-intro ol { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; max-width: 46ch; }
.home-intro li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; color: #fff; }
.home-intro li b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--crest-text); font-size: 14px; }
.credit { padding: 24px 16px 32px; font-size: 13px; color: var(--muted); text-align: center; border-top: 1px solid var(--line); }
.home-footnote { max-width: 1080px; width: 100%; margin: 40px auto 0; font-size: 13px; color: var(--crest-text); }

.setup-card {
  border: 2px solid rgb(255 255 255 / 35%); border-radius: var(--r-lg);
  padding: 28px;
}
.steps { display: flex; gap: 6px; margin-bottom: 8px; }
.steps i { flex: 1; height: 5px; border-radius: 3px; background: rgb(255 255 255 / 25%); }
.steps i.on { background: #fff; }
.step-count { font-size: 14px; color: var(--crest-text); margin-bottom: 18px; }
.question { font-size: 26px; line-height: 1.2; margin-bottom: 6px; text-wrap: balance; }
.question-help { color: var(--crest-text); margin-bottom: 18px; font-size: 15px; }
.question + .options, .question-help + .options { margin-top: 0; }
.field-block + .field-block { margin-top: 28px; }
.setup-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; }
.setup-actions .button { border-color: #fff; color: #fff; }
.setup-actions .button:hover { background: rgb(255 255 255 / 10%); }
.setup-actions .button-primary { background: #fff; color: var(--crest); }
.setup-actions .button-primary:hover { background: var(--crest-text); }
.setup-note { margin-top: 14px; font-size: 14px; color: var(--crest-text); }

/* Options: radio tiles and toggles. A selected option is filled white with a ticked box. */
.options { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.options-days { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.option { position: relative; display: block; }
.option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.option .opt {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 10px 14px;
  border: 2px solid rgb(255 255 255 / 40%); border-radius: var(--r);
  color: #fff; font-weight: 700;
  transition: background-color .12s, border-color .12s, color .12s;
}
.option .opt::before {
  content: ""; flex: none; width: 20px; height: 20px;
  border: 2px solid #fff; border-radius: 5px;
  display: grid; place-items: center; font-size: 14px; line-height: 1;
}
.option input[type="radio"] + .opt::before { border-radius: 50%; }
.option input:checked + .opt { background: #fff; border-color: #fff; color: var(--crest); }
.option input:checked + .opt::before { content: "✓"; background: var(--crest); border-color: var(--crest); color: #fff; }
.option input:hover + .opt { border-color: #fff; }
.option input:focus-visible + .opt { outline: 3px solid #fff; outline-offset: 2px; }
.option small { display: block; font-weight: 400; font-size: 13px; opacity: .85; }

.home .check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; color: #fff; }
.home .check input { width: 20px; height: 20px; accent-color: #fff; margin: 2px 0 0; flex: none; }
/* The core timetable on the field sits on a white panel, like a page of the timetable. */
.core-timetable .week-scroll { margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--paper); }
.core-timetable .week-legend { color: var(--crest-text); }

.core-note { margin-top: 18px; padding: 12px 14px; border-radius: var(--r); background: rgb(0 0 0 / 15%); font-size: 14px; color: var(--crest-text); }
.core-note strong { color: #fff; }

/* Settings page ("Your setup") on the field */
.settings h1 { font-size: 30px; margin-bottom: 6px; }
.settings > p { color: var(--crest-text); margin-bottom: 8px; }
.settings-group { padding: 22px 0; border-top: 1px solid rgb(255 255 255 / 25%); }
.settings-group:first-child { border-top: 0; padding-top: 0; }
.settings-group h2 { font-size: 19px; margin-bottom: 4px; }
.settings-group > p { color: var(--crest-text); font-size: 14px; margin-bottom: 14px; }
.settings-group h3 { font-size: 15px; margin: 16px 0 8px; }
.settings details summary { cursor: pointer; font-weight: 700; font-size: 19px; list-style: none; display: flex; justify-content: space-between; }
.settings details summary::-webkit-details-marker { display: none; }
.settings details summary::after { content: "Show"; font-size: 14px; color: var(--crest-text); text-decoration: underline; }
.settings details[open] summary::after { content: "Hide"; }
.settings details[open] summary { margin-bottom: 12px; }
.field { display: grid; gap: 6px; margin-top: 14px; font-size: 15px; }
.field span { font-weight: 700; }
.field small { color: var(--crest-text); }
.field select, .field input[type="number"] {
  min-height: 44px; padding: 8px 12px; border-radius: var(--r);
  border: 2px solid rgb(255 255 255 / 45%); background: rgb(0 0 0 / 12%); color: #fff;
  max-width: 260px;
}
.field select option { color: var(--ink); }
.field input::placeholder { color: rgb(255 255 255 / 60%); }
.range { display: grid; grid-template-columns: 1fr 180px 36px; align-items: center; gap: 12px; margin-top: 10px; }
.range input { accent-color: #fff; }
.range output { font-variant-numeric: tabular-nums; text-align: right; }
.link-button { background: none; border: 0; padding: 0; color: #fff; text-decoration: underline; font-weight: 700; }

/* Time off: a day-by-part-of-day grid on the field. A cell that is off is filled white with a cross. */
.timeoff { width: 100%; border-collapse: separate; border-spacing: 6px; margin: 0 -6px; table-layout: fixed; }
.timeoff thead th { font-size: 14px; text-align: center; padding-bottom: 2px; }
.timeoff thead th:first-child { width: 31%; }
.timeoff small { display: block; font-weight: 400; font-size: 12px; color: var(--crest-text); }
.timeoff-day {
  width: 100%; min-height: 48px; padding: 6px 10px; text-align: left;
  border: 0; border-radius: var(--r); background: transparent; color: #fff; font-weight: 700; font-size: 15px;
}
.timeoff-day:hover { background: rgb(255 255 255 / 10%); }
.timeoff-day[aria-pressed="true"] small { color: #fff; font-weight: 700; }
.timeoff-day:focus-visible { outline-color: #fff; }
.timeoff-cell { position: relative; display: block; }
.timeoff-cell input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.timeoff-cell > span {
  display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 48px; padding: 6px;
  border: 2px solid rgb(255 255 255 / 40%); border-radius: var(--r);
  font-size: 14px; color: var(--crest-text);
  transition: background-color .12s, border-color .12s, color .12s;
}
.timeoff-cell input:hover + span { border-color: #fff; }
.timeoff-cell input:checked + span { background: #fff; border-color: #fff; color: var(--crest); font-weight: 700; }
.timeoff-cell input:checked + span::before { content: "✕"; }
.timeoff-cell input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }

/* Dashboard numbers on "Your setup" */
.dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0 0; max-width: 46ch; }
.dash > div { padding: 12px 14px; border-radius: var(--r); background: rgb(0 0 0 / 15%); }
.dash dt { font-size: 13px; color: var(--crest-text); }
.dash dd { margin: 2px 0 0; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.dash .dash-wide { grid-column: 1 / -1; }
.dash .dash-wide dd { font-size: 16px; }

/* ---------- Workspace band and tabs ---------- */
.band {
  display: flex; align-items: center; gap: 24px;
  padding: 10px 24px; background: var(--crest); color: #fff;
}
.band-name { display: grid; line-height: 1.25; padding: 4px 8px; margin: -4px -8px; border: 0; border-radius: var(--r); background: transparent; color: #fff; text-align: left; }
.band-name:hover { background: rgb(255 255 255 / 10%); }
.band-name:focus-visible { outline-color: #fff; }
.band-name strong { font-size: 16px; }
.band-name span { font-size: 13px; color: var(--crest-text); }
.band-batch { margin-left: auto; font-size: 14px; color: var(--crest-text); text-align: right; }
.band-batch strong { color: #fff; }
.band-setup {
  min-height: 40px; padding: 6px 14px; border-radius: var(--r);
  border: 2px solid #fff; background: transparent; color: #fff; font-weight: 700; font-size: 14px;
}
.band-setup:hover { background: #fff; color: var(--crest); }
.band-setup:focus-visible { outline-color: #fff; }

.tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 5; overflow-x: auto; }
.tab {
  border: 0; background: none; padding: 14px 12px 12px; font-weight: 700; color: var(--muted); font-size: 15px;
  box-shadow: inset 0 -3px transparent; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px var(--crest); }
.tab-count { font-weight: 400; font-variant-numeric: tabular-nums; }

main { outline: none; }
.view { padding: 28px 24px 56px; max-width: 1320px; margin: 0 auto; }
.view-head { margin-bottom: 24px; max-width: 70ch; }
.view-head h1 { font-size: 26px; line-height: 1.2; margin-bottom: 6px; }
.view-head p { color: var(--muted); }
.view-head-row { display: flex; justify-content: space-between; align-items: end; gap: 24px; max-width: none; }

/* ---------- Courses: split view ---------- */
.split { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 0; padding: 0; max-width: none; min-height: calc(100vh - 110px); }
.index { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.index-tools { display: grid; gap: 10px; padding: 16px 16px 10px; position: sticky; top: 50px; background: var(--surface); z-index: 2; }
.search input {
  width: 100%; min-height: 44px; padding: 8px 14px;
  border: 2px solid var(--line); border-radius: var(--r); background: #fff;
}
.search input:focus { border-color: var(--ink); outline: none; }
.sort { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.sort select { min-height: 36px; padding: 4px 8px; border: 2px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); font-size: 14px; }
.index-status { padding: 0 16px 10px; font-size: 14px; color: var(--muted); display: grid; gap: 4px; }
.index-status strong { color: var(--ink); }
.index-status .warn { color: var(--clash); }
.index-list { list-style: none; margin: 0; padding: 0 8px 8px; }
.row {
  display: block; width: 100%; text-align: left;
  padding: 12px 12px; margin: 2px 0;
  border: 0; border-radius: var(--r); background: transparent;
  transition: background-color .12s;
}
.row:hover { background: var(--tint); }
.row[aria-current="true"] { background: #fff; box-shadow: inset 4px 0 var(--crest), 0 0 0 1px var(--line); }
.row-title { display: block; font-family: var(--title); font-weight: 600; font-size: 16px; line-height: 1.3; margin-bottom: 4px; }
.row-times { display: block; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.row-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 13px; color: var(--muted); }
.row-meta .on { color: var(--crest); font-weight: 700; }
.index-empty { padding: 20px 16px; color: var(--muted); }
.index-empty strong { display: block; color: var(--ink); margin-bottom: 4px; }
/* "Trash (n)" opens the basket of trashed courses under the index tools. */
.trash-toggle { justify-self: start; border: 0; background: none; padding: 2px 0; font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.trash-toggle:hover, .trash-toggle[aria-expanded="true"] { color: var(--ink); }
.trash-panel { padding: 4px 16px 16px; margin-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.trash-help { color: var(--muted); margin-bottom: 10px; }
.trash-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.trash-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trash-title { text-align: left; font-size: 14px; }
/* A note that shows on hover or keyboard focus, for an action whose effect is not obvious from its name. */
.tip-wrap { position: relative; display: inline-flex; }
.tip { position: absolute; left: 0; top: calc(100% + 8px); z-index: 6; width: 290px; padding: 10px 12px; border-radius: var(--r); background: var(--ink); color: #fff; font-size: 13px; line-height: 1.4; box-shadow: 0 8px 24px rgb(38 33 58 / 25%); opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none; }
.tip-wrap:hover .tip, .tip-wrap:focus-within .tip { opacity: 1; visibility: visible; }
.index-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.filter-toggle { background: #fff; }
.filter-toggle-on, .filter-toggle-on:hover { background: var(--ink); color: #fff; }
.text-button { background: none; border: 0; padding: 0; color: var(--ink); font-weight: 700; text-decoration: underline; font-size: inherit; }
.text-button:hover { color: var(--crest); }

/* Filters panel under the search */
.filter-panel { padding: 4px 16px 16px; margin-bottom: 10px; border-bottom: 1px solid var(--line); display: grid; gap: 18px; }
.filter-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.filter-group legend { padding: 0; font-weight: 700; font-size: 15px; }
.filter-help { font-size: 13px; color: var(--muted); margin: 2px 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px;
  border: 2px solid var(--line); border-radius: var(--r); background: #fff; font-size: 14px;
  transition: background-color .12s, border-color .12s, color .12s;
}
.chip input:hover + span { border-color: var(--muted); }
.chip input:checked + span { background: var(--crest); border-color: var(--crest); color: #fff; font-weight: 700; }
.chip input:checked + span::before { content: "✓"; margin-right: 6px; }
.chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.chips-exclude .chip input:checked + span { background: var(--ink); border-color: var(--ink); text-decoration: line-through; text-decoration-thickness: 2px; }
.chips-exclude .chip input:checked + span::before { content: "✕"; text-decoration: none; display: inline-block; }
.filter-label { font-size: 14px; font-weight: 700; margin-top: 10px; }
.filter-group legend + .filter-label { margin-top: 4px; }
.tri-list { display: grid; gap: 6px; }
.tri { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.tri-label { font-size: 14px; line-height: 1.3; }
.tri-label small { display: block; font-size: 12px; color: var(--muted); }
.tri-options { display: inline-flex; border: 2px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; }
.tri-options label { position: relative; }
.tri-options input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tri-options span { display: block; min-width: 42px; padding: 6px 8px; text-align: center; font-size: 13px; color: var(--muted); }
.tri-options label + label span { border-left: 1px solid var(--line); }
.tri-options input:checked + span { background: var(--ink); color: #fff; font-weight: 700; }
.tri-options input[value="any"]:checked + span { background: var(--surface); color: var(--ink); }
.tri-options input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: -3px; }
.time-filters { display: grid; gap: 8px; }
.time-filters label { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
.time-filters select { min-height: 36px; padding: 4px 8px; border: 2px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); font-size: 14px; }
.filter-foot { display: flex; justify-content: space-between; gap: 10px; }
.filter-foot .button[disabled] { opacity: .45; cursor: default; }

.entry { padding: 32px 40px 56px; min-width: 0; }
/* The entry stays in view under the tabs and scrolls on its own, so a course chosen far down the index
   opens where the student is looking. */
.split .entry { position: sticky; top: 50px; align-self: start; height: calc(100vh - 50px); height: calc(100dvh - 50px); overflow-y: auto; }
/* On the Courses tab the credit closes the index, so nothing below the split cuts the sticky entry short. */
.index-credit { margin-top: auto; border-top: 0; text-align: left; }
.workspace:has(#view-courses:not([hidden])) > .credit { display: none; }
.entry-back { display: none; }
.entry-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.entry-nav:has(.button:not(.entry-back)) { margin-bottom: 16px; }
.entry-note { margin-bottom: 16px; padding: 10px 14px; border-radius: var(--r); background: var(--surface); font-size: 14px; color: var(--muted); max-width: 72ch; }
.entry-kicker { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.entry h1 { font-family: var(--title); font-weight: 600; font-size: 30px; line-height: 1.2; max-width: 30ch; text-wrap: balance; margin-bottom: 8px; }
.entry-faculty { font-size: 16px; color: var(--muted); }
.entry-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0 28px; }
.entry-body { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 40px; }
.entry-main { min-width: 0; }
.entry-main h2 { font-size: 17px; margin: 28px 0 10px; }
.entry-main h2:first-child { margin-top: 0; }
.entry-main > p { max-width: 68ch; }
.margin { border-left: 3px solid var(--crest); padding-left: 16px; align-self: start; display: grid; gap: 14px; font-size: 14px; }
.margin dt { color: var(--muted); }
.margin dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.margin dd.clash { color: var(--clash); }
/* Assessment: exam sentence, then the components largest first with a neutral bar each. */
.exam-line { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 12px; }
.marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 56ch; }
.marks li { display: grid; grid-template-columns: minmax(0, 13em) minmax(60px, 1fr) 4.5em; align-items: center; gap: 12px; font-size: 15px; }
.marks-name[title] { text-decoration: underline dotted rgb(98 90 107 / 50%); text-underline-offset: 3px; cursor: help; }
.marks-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.marks-bar i { display: block; height: 100%; border-radius: 4px; background: var(--muted); }
.marks-num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.marks-num .muted { font-weight: 400; font-size: 13px; }
.marks-total { margin-top: 10px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.marks-note { margin-top: 8px; font-size: 14px; color: var(--muted); max-width: 68ch; }
.outline-words { margin-top: 12px; }
.outline-words summary { cursor: pointer; font-size: 14px; color: var(--muted); text-decoration: underline; }
.outline-words .excerpt { margin-top: 8px; font-size: 15px; }
.compare-table .marks li { grid-template-columns: minmax(0, 1fr) 40px 3.5em; gap: 8px; font-size: 14px; }

/* Full outline, loaded when the student opens it */
.outline-link { margin-top: 16px; }

/* Reading pane: the outline scrolls on its own beside the entry; the course list steps aside. */
/* "Course details" and "Full outline": two tabs at the top of the entry body. They stay at the top of the
   entry while it scrolls, so the student can go back to the details from anywhere in the outline. */
.entry-tabs { position: sticky; top: 0; z-index: 3; display: flex; gap: 4px; margin: 0 -40px 24px; padding: 0 40px; background: var(--paper); border-bottom: 1px solid var(--line); }
/* The entry scrolls inside its own 32px top padding, so the tabs stop at the very top edge. */
.split .entry-tabs { top: -32px; }
.entry-tab { border: 0; background: none; padding: 12px 12px 10px; font-weight: 700; font-size: 15px; color: var(--muted); box-shadow: inset 0 -3px transparent; }
.entry-tab:hover { color: var(--ink); }
.entry-tab[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -3px var(--crest); }
.outline-text { max-width: 72ch; font-size: 15px; overflow-wrap: anywhere; }
.outline-text p, .outline-text ul, .outline-text ol { margin: 0 0 10px; }
.outline-text ul, .outline-text ol { padding-left: 22px; }
.outline-text h3 { font-size: 17px; margin: 20px 0 8px; }
.outline-text h4 { font-size: 15px; margin: 16px 0 6px; }
.outline-text a { color: var(--ink); }
.outline-table { overflow-x: auto; margin: 0 0 12px; }
.outline-table table { border-collapse: collapse; font-size: 14px; }
.outline-table td { border: 1px solid var(--line); padding: 6px 8px; vertical-align: top; min-width: 80px; }
.flag { color: var(--clash); font-weight: 700; }
.entry-flag { margin: -8px 0 24px; padding: 12px 16px; border-radius: var(--r); background: var(--clash-hatch); box-shadow: inset 0 0 0 2px var(--clash); max-width: 72ch; font-size: 15px; }
.entry-flag strong { color: var(--clash); }
.advice { margin: -6px 0 18px; padding: 10px 14px; border-left: 3px solid #fff; background: rgb(0 0 0 / 15%); border-radius: 0 var(--r) var(--r) 0; font-size: 15px; }
.options-label { font-weight: 700; margin-bottom: 8px; }
.options-exclude input:checked + .opt::before { content: "✕"; }
.options-exclude input:checked + .opt > span { text-decoration: line-through; text-decoration-thickness: 2px; }
.excerpt { margin: 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--line); max-width: 68ch; color: var(--ink); font-style: italic; }
.compare-table .excerpt { font-size: 14px; }
.muted { color: var(--muted); }
.question:focus { outline: none; }
.week-scroll { overflow-x: auto; }
.caveat { margin-top: 8px; font-size: 14px; color: var(--muted); max-width: 68ch; }
.outline-more { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 14px; }
.outline-more summary { cursor: pointer; font-weight: 700; }
.outline-more dl { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; margin: 14px 0 0; font-size: 15px; max-width: 80ch; }
.outline-more dt { color: var(--muted); }
.outline-more dd { margin: 0; }
.source { margin-top: 20px; font-size: 13px; color: var(--muted); max-width: 80ch; overflow-wrap: anywhere; }
.entry-empty { max-width: 46ch; padding-top: 40px; color: var(--muted); }
.entry-empty h1 { font-family: var(--ui); font-size: 22px; color: var(--ink); }

/* ---------- Week grid (core timetable + courses) ---------- */
.week { display: grid; grid-template-columns: 64px repeat(6, minmax(0, 1fr)); gap: 3px; font-size: 13px; font-variant-numeric: tabular-nums; }
.week > div { min-height: 34px; padding: 5px 6px; border-radius: 6px; background: var(--surface); color: var(--muted); line-height: 1.25; overflow-wrap: anywhere; }
.week .wh { background: none; font-weight: 700; color: var(--ink); text-align: center; min-height: 0; }
.week .wt { background: none; text-align: right; padding-right: 8px; }
.week .core { background: #efeaf0; color: var(--ink); }
.week .course { background: var(--crest); color: #fff; font-weight: 700; }
.week .short { background: var(--tint); color: var(--crest); font-weight: 700; box-shadow: inset 0 0 0 1px var(--crest); }
.week .clash { background: var(--clash-hatch); color: var(--clash); font-weight: 700; box-shadow: inset 0 0 0 2px var(--clash); }
.week-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.week-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; }
.week-legend .k-core { background: #efeaf0; }
.week-legend .k-course { background: var(--crest); }
.week-legend .k-short { background: var(--tint); box-shadow: inset 0 0 0 1px var(--crest); }
.week-legend .k-clash { background: var(--clash-hatch); box-shadow: inset 0 0 0 2px var(--clash); }
.week-status { font-weight: 700; margin-bottom: 12px; }
.week-status.bad { color: var(--clash); }

/* ---------- Shortlist ---------- */
.shortlist-layout { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 40px; align-items: start; }
.shortlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.shortlist-item { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.shortlist-item.bad { border-color: var(--clash); }
.shortlist-item h2 { font-family: var(--title); font-weight: 600; font-size: 17px; line-height: 1.3; }
.shortlist-item .row-times { margin-top: 4px; }
.shortlist-item .bad-text { color: var(--clash); font-size: 14px; font-weight: 700; margin-top: 6px; }
.shortlist-controls { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; margin-top: 12px; }
.shortlist-controls label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.shortlist-controls select { min-height: 40px; padding: 4px 8px; border: 2px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); font-size: 14px; }
.shortlist-item-foot { display: flex; justify-content: space-between; margin-top: 8px; }
.shortlist-week .button { margin-top: 20px; }
.empty { padding: 28px; border: 2px dashed var(--line); border-radius: var(--r-lg); color: var(--muted); max-width: 52ch; }
.empty h2 { color: var(--ink); font-size: 18px; margin-bottom: 6px; }
.empty .button { margin-top: 14px; }

/* ---------- Clashes with the shortlist ---------- */
#clashes-content { display: grid; gap: 14px; max-width: 900px; }
.clash-summary { color: var(--muted); }
.clash-group { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.clash-group h2 { font-family: var(--title); font-weight: 600; font-size: 19px; line-height: 1.3; }
.clash-when { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; margin: 2px 0 12px; }
.clash-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.clash-group li span { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.clash-group li strong { font-family: var(--title); font-weight: 600; font-size: 16px; display: block; }
.clash-group li .combo-open { color: var(--ink); font-weight: 700; text-decoration: underline; }
.clash-group li > button span:nth-child(2) { color: var(--clash); font-weight: 700; }
.clash-inside { border: 2px solid var(--clash); background: var(--clash-hatch); }
.clash-inside h2 { font-family: var(--ui); font-size: 17px; color: var(--clash); margin-bottom: 10px; }
.clash-inside li strong { display: inline; }
.clash-inside li span { display: block; color: var(--clash); font-weight: 700; }

/* ---------- Compare ---------- */
.compare-scroller { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.compare-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px; }
.compare-table th, .compare-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.compare-table tr:last-child th, .compare-table tr:last-child td { border-bottom: 0; }
.compare-table thead th { font-family: var(--title); font-weight: 600; font-size: 17px; line-height: 1.3; background: var(--surface); }
.compare-table tbody th { width: 170px; color: var(--muted); font-weight: 700; font-size: 14px; }
.compare-table ul { margin: 0; padding-left: 18px; }
.compare-table .bad { color: var(--clash); font-weight: 700; }
.compare-table .muted { color: var(--muted); }
.compare-remove { margin-top: 8px; font-family: var(--ui); }

/* ---------- Combinations ---------- */
.combinations { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 900px; }
.combo { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.combo-head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-bottom: 12px; }
.combo-head p { font-weight: 700; color: var(--muted); }
.combo-score { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.combo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.combo-course {
  display: grid; text-align: left; gap: 2px;
  margin: 0 -10px; width: calc(100% + 20px); padding: 8px 10px;
  border: 0; border-radius: var(--r); background: transparent;
  transition: background-color .12s;
}
.combo-course:hover { background: var(--tint); }
.combo li strong { font-family: var(--title); font-weight: 600; font-size: 17px; display: block; }
.combo li span { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.combo li .combo-open { color: var(--ink); font-weight: 700; text-decoration: underline; }
#combinations-summary .text-button { margin-left: 4px; }
.combo-foot { margin-top: 12px; font-size: 14px; color: var(--muted); }
.combo-warn { margin: 10px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink); }
.notice { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border-radius: var(--r-lg); background: var(--surface); font-size: 15px; }
.notice ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.notice .button { flex: none; }
.combo-first { border: 2px solid var(--crest); }
.combo-first .combo-head p { color: var(--crest); }

/* ---------- Tour ---------- */
.tour { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.tour-spot {
  position: fixed; border-radius: var(--r-lg);
  box-shadow: 0 0 0 3px #fff, 0 0 0 9999px rgb(38 33 58 / 62%);
  transition: top .2s var(--ease), left .2s var(--ease), width .2s var(--ease), height .2s var(--ease);
}
.tour-bubble {
  position: fixed; width: min(340px, calc(100vw - 24px));
  padding: 18px 20px; border-radius: var(--r-lg);
  background: #fff; color: var(--ink); box-shadow: var(--float-shadow);
  pointer-events: auto;
  transition: top .2s var(--ease), left .2s var(--ease);
}
.tour-bubble::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--crest); }
.tour-count { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.tour-bubble h2 { font-size: 19px; margin-bottom: 6px; }
.tour-bubble p:not(.tour-count) { font-size: 15px; }
.tour-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; }
.tour-actions span { display: flex; gap: 8px; }
.tour-skip { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; font-size: 14px; }

/* ---------- Faculty preview ---------- */
.faculty-name { cursor: help; text-decoration: underline dotted rgb(98 90 107 / 70%); text-underline-offset: 4px; border-radius: 3px; }
.faculty-name:hover, .faculty-name:focus-visible { color: var(--crest); text-decoration-color: currentColor; }
.faculty-name-empty { text-decoration-color: rgb(98 90 107 / 30%); }
.faculty-bio-popover {
  position: fixed; inset: auto; margin: 0;
  padding: 16px 18px; overflow-y: auto;
  color: var(--ink); background: #fff;
  border: 0; border-radius: var(--r-lg);
  box-shadow: var(--float-shadow);
  font: 15px/1.5 var(--ui);
}
.faculty-bio-popover::before { content: ""; position: sticky; display: block; top: -16px; height: 5px; margin: -16px -18px 12px; background: var(--crest); }
.faculty-bio-popover[hidden] { display: none; }
.faculty-bio-popover p { margin: 0 0 8px; }
.faculty-bio-popover p:last-child { margin-bottom: 0; }
.faculty-bio-label { display: block; margin-bottom: 8px; color: var(--crest); font-weight: 700; font-size: 14px; }
.faculty-bio-popover .faculty-bio-empty { color: var(--muted); font-style: italic; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 70;
  transform: translate(-50%, 140%); opacity: 0;
  padding: 12px 18px; border-radius: var(--r);
  background: var(--ink); color: #fff; font-weight: 700; box-shadow: var(--float-shadow);
  transition: transform .2s var(--ease), opacity .2s;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Narrow screens ---------- */
@media (max-width: 1100px) {
  .entry-body { grid-template-columns: 1fr; gap: 24px; }
  .margin { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-left: 0; border-top: 3px solid var(--crest); padding: 14px 0 0; }
  .shortlist-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .home { padding: 28px 16px 20px; }
  .home-inner { grid-template-columns: 1fr; gap: 28px; }
  .home-intro { position: static; }
  .options-days { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .home-intro h1 { font-size: 28px; }
  .setup-card { padding: 20px 16px; }
  .question { font-size: 22px; }
  .range { grid-template-columns: 1fr; gap: 4px; }

  .band { padding: 10px 16px; gap: 12px; }
  .band-name span, .band-batch { display: none; }
  .band-setup { margin-left: auto; }
  .view { padding: 20px 16px 48px; }

  .split { grid-template-columns: 1fr; min-height: 0; }
  .split .entry { display: none; position: static; height: auto; overflow: visible; }
  .split.show-entry .index { display: none; }
  .split.show-entry .entry { display: block; padding: 20px 16px 48px; }
  /* On a phone the page scrolls, so the entry tabs stop under the workspace tabs. */
  .split .entry-tabs { top: 50px; margin: 0 -16px 20px; padding: 0 16px; }
  .entry-back { display: inline-flex; }
  .entry-nav { margin-bottom: 16px; }
  .marks li { grid-template-columns: minmax(0, 1fr) 64px 4em; gap: 8px; }
  .dash { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .timeoff-day { padding: 6px 4px; font-size: 14px; }
  .entry h1 { font-size: 25px; }
  .index { border-right: 0; }
  .index-tools { top: 49px; }

  .week { min-width: 620px; font-size: 12px; }
  .shortlist-controls { grid-template-columns: 1fr 1fr; }
  .shortlist-controls label:first-child { grid-column: 1 / -1; }
  .outline-more dl { grid-template-columns: 1fr; gap: 2px; }
  .outline-more dd { margin-bottom: 8px; }
  .view-head-row { flex-direction: column; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}