/* Tokens. Ink on cool paper; one warm signal color (marigold) is reserved for free days. */
:root {
  --paper: #f3f5f8;
  --sheet: #ffffff;
  --ink: #1b2436;
  --ink-2: #4a5468;
  --rule: #d8dde6;
  --grid: #eceff4;
  --signal: #f3c94b;
  --signal-ink: #5c4300;
  --signal-wash: #fdf4d8;
  --focus: #2a5bd7;
  --ok: #16653e;
  --ok-wash: #e4f3ea;
  --danger: #b42318;
  --danger-wash: #fdeceb;
  --hour: 56px;
  --page: 1560px;
  --font: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #10141c;
    --sheet: #171c26;
    --ink: #e8ebf1;
    --ink-2: #aab3c3;
    --rule: #2c3442;
    --grid: #202734;
    --signal: #e9bd3c;
    --signal-ink: #f6dc8c;
    --signal-wash: #2e2610;
    --focus: #7fa2ff;
    --ok: #5fd197;
    --ok-wash: #11291d;
    --danger: #ff8a7a;
    --danger-wash: #3a1714;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.45 var(--font);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, p { margin: 0; }
h1 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 15px; font-weight: 700; }
a { color: inherit; }

button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

button {
  border: 1px solid var(--rule);
  background: var(--sheet);
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 600;
  cursor: pointer;
}
button:hover { border-color: var(--ink-2); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
button.quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
button.quiet:hover { color: var(--ink); border-color: var(--rule); }

input[type="search"], input[type="number"], select {
  border: 1px solid var(--rule);
  background: var(--sheet);
  border-radius: 8px;
  padding: 8px 10px;
}
input[type="search"] { width: 100%; }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ink); margin: 0; flex: none; }

.check { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lang select { padding: 6px 8px; font-weight: 600; }

/* Masthead: title with totals and actions on one line, the seven requirements as a row of
   checkpoints under it. Its edges line up with the capped, centred page content below. */
.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 28px;
  padding: 10px max(20px, calc((100vw - var(--page)) / 2 + 20px)) 6px;
  background: var(--sheet);
  border-bottom: 1px solid var(--rule);
}
#subtitle { color: var(--ink-2); font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 2px; }
/* Program switch: reads as the subtitle text, with a chevron so it is clearly a choice. */
#program {
  max-width: 100%;
  padding: 2px 24px 2px 6px;
  margin-left: -6px;
  border-color: transparent;
  background-color: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  field-sizing: content;
}
#program:hover, #program:focus-visible { border-color: var(--rule); background-color: var(--sheet); }
/* Programs without requirement rules (all but Master Informatik) have no checkpoint row. */
body.no-req .req-rail { display: none; }
.summary { display: flex; align-items: center; gap: 10px 18px; }
.ects-meter { min-width: 150px; }
.ects-line { display: flex; align-items: baseline; gap: 5px; color: var(--ink-2); font-size: 13px; }
.ects-line strong { font-size: 20px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ects-line input { width: 52px; padding: 1px 5px; font-variant-numeric: tabular-nums; }
.bar { height: 5px; border-radius: 3px; background: var(--grid); overflow: hidden; margin-top: 5px; }
.bar > div { height: 100%; width: 0; background: var(--ink); transition: width .2s; }
.bar > div.reached { background: var(--ok); }
#ects-note { font-size: 12px; color: var(--ink-2); margin-top: 3px; }
.actions { display: flex; gap: 6px; align-items: center; }

.badge { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.badge.ok { background: var(--ok-wash); color: var(--ok); }
.badge.bad { background: var(--danger-wash); color: var(--danger); }

/* Requirements rail: four areas, a gap, three required modules. A ring fills with a check when covered. */
.req-rail { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: -6px; }
.req-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; }
.req-strip .divider { width: 1px; align-self: stretch; margin: 4px 6px; background: var(--rule); }
.req > button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  border-color: transparent;
  background: transparent;
  font-size: 13px;
  white-space: nowrap;
}
.req > button:hover { border-color: var(--rule); }
.req-mark {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid var(--ink-2);
  display: grid; place-items: center;
}
.req.covered .req-mark { background: var(--ok); border-color: var(--ok); }
.req.covered .req-mark::after { content: "\2713"; color: var(--sheet); font-size: 11px; font-weight: 700; line-height: 1; }
.req.covered .req-name { color: var(--ok); }
.req.active > button { border-color: var(--ink); background: var(--grid); }
.req-rail h2 { font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; margin-left: 6px; }
#req-summary { font-size: 12px; color: var(--signal-ink); background: var(--signal-wash); border-radius: 999px; padding: 2px 8px; white-space: nowrap; font-weight: 700; }
#req-summary.done { color: var(--ok); background: var(--ok-wash); }

/* Main layout */
.layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 18px;
  max-width: var(--page);
  margin: 0 auto;
  padding: 14px 20px 28px;
  align-items: start;
}
.layout.list-closed { grid-template-columns: minmax(0, 1fr); }
.layout.list-closed .sidebar { display: none; }
.workbar { display: flex; align-items: flex-end; gap: 14px; border-bottom: 1px solid var(--rule); }
.workbar .tabs { border-bottom: 0; }
.list-toggle { margin-bottom: 6px; padding: 5px 12px; font-size: 13px; }
.list-toggle::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(45deg); }
.list-toggle[aria-expanded="false"]::before { transform: translateY(-1px) rotate(-135deg); }

.sidebar {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 10px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.controls { padding: 14px; border-bottom: 1px solid var(--rule); display: grid; gap: 12px; }
.free-days { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.free-days legend { padding: 0; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.day-toggles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.day-toggles button { padding: 7px 0; font-weight: 600; }
.day-toggles button[aria-pressed="true"] {
  background: repeating-linear-gradient(135deg, var(--signal-wash) 0 6px, var(--signal) 6px 8px);
  border-color: var(--signal);
  color: var(--signal-ink);
}
.result-count { font-size: 13px; color: var(--ink-2); }
.result-count button { padding: 0; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: underline; }

/* Module list: rows on a sheet, separated by rules, not stacked cards. */
.module-list { list-style: none; margin: 0; padding: 4px 0 8px; overflow-y: auto; }
.section { display: block; }
.section-items { list-style: none; margin: 0; padding: 0; }
.section-head { position: sticky; top: 0; z-index: 1; background: var(--sheet); }
.section-head button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  padding: 12px 14px;
  text-align: left;
}
.caret { width: 10px; flex: none; color: var(--ink-2); transition: transform .15s; }
.section-head button[aria-expanded="true"] .caret { transform: rotate(90deg); }
.section-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; }
.section-count { font-size: 13px; color: var(--ink-2); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.section-head.has-picks .section-count { color: var(--ink); }
.section-head.covered .section-count { color: var(--ok); }
.section-head.covered button { box-shadow: inset 4px 0 0 var(--ok); }
.section-head.has-picks:not(.covered) button { box-shadow: inset 4px 0 0 var(--ink); }

.module { border-bottom: 1px solid var(--grid); box-shadow: inset 4px 0 0 transparent; }
.module.selected { box-shadow: inset 4px 0 0 var(--mod-color); background: color-mix(in srgb, var(--mod-color) 5%, var(--sheet)); }
.module.flash { outline: 2px solid var(--focus); outline-offset: -2px; }
.module.misfit .module-title { color: var(--ink-2); }
.module-head { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; }
.module-head .info { flex: 1; min-width: 0; cursor: pointer; }
.module-title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.module-alt { font-size: 13px; color: var(--ink-2); margin-top: 1px; }
.module-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.tag {
  font-size: 13px;
  line-height: 1.35;
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--grid);
  color: var(--ink-2);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag.code { background: var(--ink); color: var(--sheet); font-weight: 700; font-variant-numeric: tabular-nums; }
.tag.ects { background: transparent; border: 1px solid var(--rule); color: var(--ink); font-weight: 600; }
.tag.req-tag { background: var(--ok-wash); color: var(--ok); font-weight: 600; }
.tag.warn { background: var(--signal-wash); color: var(--signal-ink); font-weight: 600; }
.toggle { flex: none; min-width: 72px; }
.module.selected .toggle { background: var(--ink); border-color: var(--ink); color: var(--sheet); }

.module-body { padding: 0 14px 14px 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.hint { font-size: 13px; color: var(--ink-2); }
.course { display: grid; gap: 4px; min-width: 0; }
.course-head { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.course-head > span { min-width: 0; }
.course-type { font-weight: 700; }
.course-number { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.course-title { display: block; font-size: 14px; color: var(--ink); }
.course-head a { margin-left: auto; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.course.off .series-list, .course.off .group-select { opacity: .45; }
.group-select { justify-self: start; max-width: 100%; padding: 4px 8px; font-size: 13px; }
.series-list { list-style: none; margin: 0; padding: 0 0 0 24px; display: grid; gap: 4px; }
.series-list label { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; font-size: 14px; cursor: pointer; }
.series-list input { align-self: center; }
.when { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.when.on-free-day { color: var(--signal-ink); background: var(--signal-wash); border-radius: 4px; padding: 0 4px; }
.where { color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clash { color: var(--danger); font-weight: 700; font-size: 13px; }

/* Pick-one modules: one block per subject (lecture + exercise). */
.option { display: grid; gap: 8px; border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; background: var(--sheet); }
.option.chosen { border-color: var(--mod-color); box-shadow: inset 4px 0 0 var(--mod-color); }
.option:not(.chosen) .course { opacity: .6; }
.option-head { font-size: 15px; font-weight: 700; }
.option-title { flex: 1; min-width: 0; }
.option-parts { font-size: 13px; font-weight: 400; color: var(--ink-2); }

/* Workspace tabs */
.workspace { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); }
.tabs button {
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 8px 4px 10px;
  margin-right: 18px;
  color: var(--ink-2);
  font-size: 15px;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }

/* Calendar */
.calendar {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow-x: auto;
  display: grid;
  grid-template-columns: 64px repeat(var(--days), minmax(136px, 1fr));
}
.cal-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--sheet);
  border-bottom: 1px solid var(--rule);
  padding: 12px 6px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
}
.cal-head.free { color: var(--signal-ink); }
.cal-head small { display: block; font-size: 12px; font-weight: 600; }
/* Hour rows: a solid line at each full hour, a faint one at the half hour. The hour label hangs just
   below its line in the gutter, where the line continues as a tick. */
.cal-times {
  position: relative;
  background: repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px var(--hour)) right top / 8px 100% no-repeat;
}
.cal-times span {
  position: absolute;
  right: 14px;
  margin-top: 3px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.cal-day {
  position: relative;
  border-left: 1px solid var(--rule);
  background-image:
    repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px var(--hour)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--hour) / 2), var(--grid) calc(var(--hour) / 2) calc(var(--hour) / 2 + 1px), transparent calc(var(--hour) / 2 + 1px) var(--hour));
}
.cal-day:nth-child(even of .cal-day) { background-color: color-mix(in srgb, var(--grid) 35%, var(--sheet)); }
.cal-day.free {
  background-image:
    repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px var(--hour)),
    repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--signal) 35%, transparent) 10px 12px);
  background-color: color-mix(in srgb, var(--signal-wash) 60%, var(--sheet));
}
/* Blocks: tinted module color with dark text, so names stay readable at any hue. */
.block {
  position: absolute;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  line-height: 1.3;
  overflow: hidden;
  color: var(--ink);
  background: color-mix(in srgb, var(--mod-color) 16%, var(--sheet));
  border: 1px solid color-mix(in srgb, var(--mod-color) 45%, var(--sheet));
  box-shadow: inset 4px 0 0 var(--mod-color);
  cursor: pointer;
}
.block .t { font-weight: 700; color: var(--ink); }
.block .hm { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.block:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* A short block grows to its full content on hover or focus and lifts over its neighbours. */
.block.expanded {
  height: auto !important;
  min-height: fit-content;
  z-index: 5;
  box-shadow: inset 4px 0 0 var(--mod-color), 0 8px 24px rgba(16, 20, 28, .28);
  background: color-mix(in srgb, var(--mod-color) 16%, var(--sheet));
}
/* Block layouts, chosen per block by fitBlocks(): full (time and type, title, room up to two lines),
   tight (short room), compact ("time room", then title), tiny (one line, only when the hour height
   hits its maximum). Unused lines are hidden, not removed. */
.block .combo, .block .one, .block .room-short { display: none; }
.block.fit-tight .room { display: none; }
.block.fit-tight .room-short { display: block; }
.block.fit-full .room { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* Titles always wrap in full; a layout whose title does not fit counts as overflowing and steps down. */
.block.fit-tiny .one {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.block.fit-compact .when, .block.fit-compact .room, .block.fit-compact .dates { display: none; }
.block .dates, .agenda-body .dates { font-weight: 600; }
.block.fit-compact .combo { display: block; }
.block.fit-compact, .block.fit-tiny { padding-top: 2px; padding-bottom: 2px; }
.block.fit-tiny > :not(.one) { display: none; }
.block.fit-tiny .one { display: block; font-weight: 700; font-size: 12px; line-height: 1.2; }
.block.fit-compact { line-height: 1.2; }
/* Compact blocks keep "time room" whole and give the title what is left (up to two lines). */
.block.fit-compact .t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.block.fit-tight .t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* Phone: the week as a list per day. */
.calendar.agenda { display: block; padding: 4px 0; }
.agenda-day { padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.agenda-day:last-of-type { border-bottom: 0; }
.agenda-day h3 { margin: 0 0 8px; font-size: 16px; display: flex; gap: 8px; align-items: baseline; }
.agenda-day h3 small { font-size: 13px; color: var(--signal-ink); font-weight: 600; }
.agenda-day.free { background: color-mix(in srgb, var(--signal-wash) 60%, var(--sheet)); }
.agenda-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.agenda-item {
  display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: start;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  background: color-mix(in srgb, var(--mod-color) 14%, var(--sheet));
  box-shadow: inset 4px 0 0 var(--mod-color);
}
.agenda-item.conflict { box-shadow: inset 4px 0 0 var(--danger), 0 0 0 1px var(--danger); }
.agenda-item.ghost { background: transparent; border: 2px dashed var(--mod-color); box-shadow: none; }
.agenda-time { display: grid; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink-2); padding-left: 4px; }
.agenda-time b { font-size: 15px; color: var(--ink); }
.agenda-body { display: grid; gap: 2px; font-size: 14px; min-width: 0; }
.agenda-body > span { color: var(--ink-2); font-size: 13px; }
.agenda-body .alert { color: var(--signal-ink); font-weight: 700; }
.agenda-body .flag { color: var(--danger); font-weight: 700; }
.block.expanded .t, .block.expanded .room { display: block; -webkit-line-clamp: unset; white-space: normal; }
.block .d { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.block.conflict { border-color: var(--danger); box-shadow: inset 4px 0 0 var(--danger), 0 0 0 1px var(--danger); }
.block .flag { color: var(--danger); font-weight: 700; font-size: 12px; }
.block.ghost { background: transparent; border: 2px dashed var(--mod-color); box-shadow: none; opacity: .8; pointer-events: none; }
.cal-empty { grid-column: 1 / -1; padding: 28px; text-align: center; color: var(--ink-2); }

.other-dates { display: grid; gap: 6px; }
.other-dates:empty { display: none; }
.other-dates ul { margin: 0; padding-left: 18px; font-size: 14px; }
.footnote { font-size: 13px; color: var(--ink-2); max-width: 80ch; }

/* Ready-made programs */
.suggest-bar { margin-bottom: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.suggest-intro { flex: 1 1 320px; color: var(--ink-2); font-size: 14px; max-width: 70ch; }
.suggestions { display: grid; gap: 22px; }
.theme-group { display: grid; gap: 10px; }
.theme-group > h2 { font-size: 17px; }
.program-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.program {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px;
}
/* The theme heading leads the card: what the program is for comes before what it contains. */
.program-head { display: grid; gap: 3px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.program-head h3 { margin: 0; font-size: 18px; line-height: 1.25; }
.program-head p { font-size: 14px; color: var(--ink-2); max-width: 60ch; }
.program-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-2); }
.program-facts span:first-child { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.program-modules { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.program li { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.program li.on-theme .nm { font-weight: 700; }
.program li .swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--mod-color); flex: none; align-self: center; }
.program li .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.program li .ec { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.program li.kept .nm { color: var(--ink-2); }
.program .covers { font-size: 13px; color: var(--ok); }
.program .unscheduled { font-size: 13px; color: var(--signal-ink); background: var(--signal-wash); border-radius: 6px; padding: 6px 8px; }
.program-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; padding-top: 4px; }
.program.empty .empty-note { padding: 0; font-size: 14px; }

/* Mini week: five day columns, 08:00-20:00. */
.mini-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.mini-day { display: grid; grid-template-rows: auto 96px; gap: 2px; text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.mini-col { position: relative; background: var(--grid); border-radius: 4px; overflow: hidden; }
.mini-day.free { color: var(--signal-ink); }
.mini-day.free .mini-col { background: repeating-linear-gradient(135deg, var(--signal-wash) 0 5px, color-mix(in srgb, var(--signal) 40%, transparent) 5px 6px); }
.mini-col i { position: absolute; left: 2px; right: 2px; border-radius: 2px; background: var(--mod-color); }

.empty-note { color: var(--ink-2); padding: 20px 0; }

@media (max-width: 900px) {
  .masthead { padding-left: 16px; padding-right: 16px; grid-template-columns: minmax(0, 1fr); }
  .summary { flex-wrap: wrap; }
  /* Phone: title, totals and actions in two short rows, requirements as one swipeable row. */
  .masthead { padding-top: 10px; padding-bottom: 8px; gap: 8px; }
  .summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .ects-meter { min-width: 0; }
  #ects-note { display: none; }
  .actions { grid-column: 1 / -1; }
  .actions .lang { margin-left: auto; }
  /* contain: paint keeps the swipeable rows from widening the phone viewport. */
  .req-rail { grid-row: auto; order: 3; margin: 0 -16px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; contain: paint; }
  .req-rail h2 { display: none; }
  .req-strip { flex-wrap: nowrap; }
  .req-strip .divider { margin: 4px 2px; }
  .workbar { gap: 10px; overflow-x: auto; scrollbar-width: none; contain: paint; }
  .tabs button { font-size: 14px; margin-right: 10px; white-space: nowrap; }
  .list-toggle { white-space: nowrap; }
  .layout { grid-template-columns: minmax(0, 1fr); padding: 12px 16px 24px; }
  .sidebar { position: static; max-height: 70vh; }
  .calendar { grid-template-columns: 44px repeat(var(--days), minmax(104px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Courses whose dates are not announced yet, and the transient notice that says so. */
.tba-note { margin: 0; font-size: 13px; color: var(--signal-ink); background: var(--signal-wash); border-radius: 6px; padding: 6px 8px; }
.other-dates .tba-note { display: block; margin-top: 4px; }
.notice { font-size: 14px; color: var(--signal-ink); background: var(--signal-wash); border: 1px solid var(--signal); border-radius: 8px; padding: 10px 12px; max-width: 80ch; }
.notice[hidden], .toast[hidden] { display: none; }
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(560px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--sheet);
  font-size: 14px;
  box-shadow: 0 6px 24px rgba(16, 20, 28, .25);
}
.toast span { flex: 1; }
.toast button.quiet { color: var(--sheet); border-color: color-mix(in srgb, var(--sheet) 40%, transparent); }

/* Important notes under a course: kind label, parsed date/time/room, original remark. */
.notes { list-style: none; margin: 2px 0 0 24px; padding: 0; display: grid; gap: 6px; }
.note { display: grid; gap: 2px; font-size: 13px; padding: 8px 10px; border-radius: 6px; background: var(--grid); border-left: 4px solid var(--ink-2); }
.note.note-first, .note.note-kickoff { border-left-color: var(--signal); }
.note.note-registration { border-left-color: var(--danger); background: var(--danger-wash); }
.note-kind { font-weight: 700; color: var(--ink); }
.note-sum { font-weight: 600; font-variant-numeric: tabular-nums; }
.note-text { color: var(--ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.note.note-first, .note.note-kickoff { background: var(--signal-wash); }
.note-first .note-kind, .note-kickoff .note-kind, .note-first .note-sum, .note-kickoff .note-sum { color: var(--signal-ink); }
.note-registration .note-kind { color: var(--danger); }

/* Calendar blocks with an upcoming kick-off or first session elsewhere: a marker in the corner and the
   note in place of the room. */
.block.has-alert::after {
  content: "!";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--signal);
  color: #3b2c00;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.block.has-alert .t, .block.has-alert .one { padding-right: 16px; }
.block .alert { color: var(--signal-ink); font-weight: 700; }
/* Upcoming dates under the calendar: the one place besides free days that wears the signal color. */
.dates-panel {
  border: 1px solid var(--signal);
  border-left: 6px solid var(--signal);
  border-radius: 10px;
  background: var(--signal-wash);
  padding: 12px 16px 14px;
  display: grid;
  gap: 10px;
}
.dates-panel h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; color: var(--ink); }
.dates-panel .mark {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--signal); color: #3b2c00; font-size: 14px; font-weight: 700;
  display: grid; place-items: center;
}
.important-dates { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.important-dates li { display: flex; gap: 12px; align-items: baseline; font-size: 14px; }
.date-chip {
  flex: none; min-width: 96px; text-align: center;
  padding: 3px 8px; border-radius: 6px;
  background: var(--sheet); border: 1px solid var(--signal);
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink);
}
.date-what { display: grid; gap: 1px; min-width: 0; }
.date-what span { color: var(--ink-2); font-size: 13px; }
.important-dates .note-registration .date-chip { border-color: var(--danger); color: var(--danger); }
.important-dates .note-registration strong { color: var(--danger); }
.note-orig { font-size: 12px; color: var(--ink-2); opacity: .85; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.note-orig-label { font-size: 12px; color: var(--ink-2); font-style: italic; }

/* Program rules (from the handbook) and the note of the requirement the list is filtered by. */
.rules-box { font-size: 13px; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 8px; padding: 6px 10px; background: var(--sheet); }
.rules-box summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.rules-box p { margin: 6px 0; line-height: 1.45; }
.rules-box a { margin-right: 10px; color: var(--ink); }
.rule-note { font-size: 13px; color: var(--signal-ink); background: var(--signal-wash); border-radius: 6px; padding: 6px 8px; margin: 0; }

/* Link back to the program list, above the title. */
/* Title = home link: a back chevron, the app icon and the name; "All programs" slides in on hover and
   focus, and the chevron alone already says it goes back (so touch users need no hover). */
.brand { margin: 0; }
#home-link { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; border-radius: 8px; padding: 2px 8px 2px 4px; margin-left: -4px; }
#home-link:hover, #home-link:focus-visible { background: var(--paper); }
#home-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.brand-back { width: 8px; height: 8px; border-left: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); rotate: 45deg; margin: 0 2px 0 4px; transition: translate .15s; }
#home-link:hover .brand-back { translate: -2px 0; border-color: var(--ink); }
.brand-icon { width: 22px; height: 22px; color: var(--ink); flex: none; }
.brand-hint { font-size: 13px; font-weight: 600; color: var(--ink-2); max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .2s, opacity .2s; }
#home-link:hover .brand-hint, #home-link:focus-visible .brand-hint { max-width: 160px; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .brand-back, .brand-hint { transition: none; } }

/* Things worth checking about the chosen classes: one plain line each, a short label in front. */
.warn-panel {
  border: 1px solid var(--rule);
  border-left: 6px solid var(--danger);
  border-radius: 10px;
  background: var(--sheet);
  padding: 12px 16px 14px;
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}
.warn-panel h2 { font-size: 17px; color: var(--ink); margin: 0; }
.warn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.warn-list li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; line-height: 1.4; }
.warn-kind {
  flex: none; width: 128px; box-sizing: border-box;
  padding: 2px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 700; text-align: center;
  border: 1px solid var(--rule); color: var(--ink-2); background: var(--paper, transparent);
}
.warn-campus .warn-kind, .warn-cancelled .warn-kind, .warn-roomNote .warn-kind { border-color: var(--danger); color: var(--danger); }
.warn-period .warn-kind, .warn-late .warn-kind, .warn-early .warn-kind, .warn-noRoom .warn-kind { border-color: var(--signal); color: var(--signal-ink); }
@media (max-width: 560px) {
  .warn-list li { flex-direction: column; gap: 3px; }
  .warn-kind { width: auto; }
}

/* Moodle links: the word "Moodle", plus a key mark and words when an enrolment key is needed. */
.moodle-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.moodle-link .key { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--signal-ink); background: var(--signal-wash); border-radius: 5px; padding: 0 5px; }
.moodle-link .key svg { width: 13px; height: 13px; }
.course-head .moodle-link { margin-left: 8px; }
.moodle-panel { border: 1px solid var(--rule); border-radius: 10px; background: var(--sheet); padding: 12px 16px 14px; margin-bottom: 14px; display: grid; gap: 8px; }
.moodle-panel h2 { font-size: 17px; margin: 0; color: var(--ink); }
.moodle-panel p { margin: 0; font-size: 13px; color: var(--ink-2); }
.moodle-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.moodle-panel li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; flex-wrap: wrap; }
.moodle-panel li .moodle-link { min-width: 170px; }