/* Framework design layer: plain CSS, emitted as theme/styles.css. */

:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: Charter, "Iowan Old Style", "Source Serif 4", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

:root {
  --color-bg: #fdfcf9;
  --color-fg: #18181b;
  --color-muted: #636977;
  --color-border: #e5e7eb;
  --color-accent: #1d4ed8;
  --color-accent-soft: #eff6ff;
  --color-card: #ffffff;
  --color-code-bg: #f3f4f6;
  /* The ground of receded items (empty weeks, days outside the month or
     range, preview entries): the surface fades, the text keeps its contrast. */
  --color-faded: color-mix(in srgb, var(--color-fg) 5%, var(--color-bg));
  color-scheme: light;

  --measure: 70ch;
  --sidebar-w: 16rem;
  --toc-w: 14rem;
  --header-h: 3.5rem;
}

:root.dark {
  --color-bg: #0f0f10;
  --color-fg: #e7e5e4;
  --color-muted: #9ca3af;
  --color-border: #2a2a2c;
  --color-accent: #60a5fa;
  --color-accent-soft: #1e3a5f;
  --color-card: #18181b;
  --color-code-bg: #1f1f22;
  color-scheme: dark;
}

/* Kind palette */
:root {
  --kind-lecture: #5B8DEF;
  --kind-homework: #F5615C;
  --kind-reading: #52C41A;
  --kind-discussion: #52C41A;
  --kind-handout: #52C41A;
  --kind-demo: #B37FEB;
  --kind-quiz: #FFA940;
  --kind-exam: #FFA940;
  --kind-project: #FF85C0;
  --kind-holiday: #8C8C8C;
  --kind-default: #BFBFBF;
}

@layer base {
  body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: var(--color-accent);
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  code, pre, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }
  :not(pre) > code {
    background: var(--color-code-bg);
    padding: 0.1em 0.35em;
    border-radius: 3px;
  }

  pre.highlight {
    background: var(--color-code-bg);
    padding: 0.875rem 1rem;
    border-radius: 6px;
    overflow-x: auto;
    line-height: 1.5;
  }
  pre.highlight.numbers .linenos {
    color: var(--color-muted);
    user-select: none;
    margin-right: 1rem;
    display: inline-block;
    text-align: right;
    min-width: 2ch;
  }

  hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 2rem 0;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }
}

/* === Site shell ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-h);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  gap: 1.5rem;
}

/* The title keeps one line and truncates, so the header height holds at
   any width. */
.site-title {
  color: inherit;
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
  font-weight: 500;
}
.site-title:hover {
  text-decoration: none;
}
.site-title-line {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 1.25rem;
  white-space: nowrap;
}
.site-code {
  flex-shrink: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.site-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}
.site-term {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.site-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-control {
  background: transparent;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-control:hover {
  color: var(--color-fg);
  background: var(--color-accent-soft);
}
.site-control:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* === Search overlay ======================================================= */

.site-search-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, #000 35%, transparent);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 50;
}

.site-search-panel {
  width: min(36rem, 92vw);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.25);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-search-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-fg);
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid var(--color-border);
}

.site-search-status {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-muted);
  padding: 0.5rem 0.25rem;
}

.site-layout {
  gap: 2rem;
  max-width: 84rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 4rem;
}
/* Without a sidebar the reading column sits centred. */
.site-layout:not([data-sidebar]) > .site-main {
  justify-self: center;
  width: 100%;
}

.site-sidebar {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  max-height: calc(100vh - var(--header-h) - 2rem);
  overflow-y: auto;
}
@media (max-width: 768px) {
  /* The panel's visibility flips at the end of the slide, so it stays
     visible while it slides shut. */
  .site-sidebar {
    width: min(18rem, 80vw);
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
    padding: 1rem 1.25rem 1.25rem;
    transition: transform 0.2s ease, visibility 0.2s;
    box-shadow: 4px 0 24px -8px rgba(0, 0, 0, 0.2);
  }
  .is-sidebar-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(0, 0, 0, 0.35);
  }
}

/* The reading face stays on the column: `--measure` is in `ch` of that face. */
.site-main {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  min-width: 0;
  max-width: var(--measure);
}
/* The measure is a reading width; a data view (schedule, listing, staff
   cards) uses the whole column. */
.site-main-wide {
  max-width: none;
}

/* Page chrome: the title, and section headings a page template places
   directly in the column, outside the authored body. */
.page-title,
.site-main > h2,
.schedule-header > h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}
.page-title {
  font-size: 2rem;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}
.site-main > h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
}
/* The row carries the heading's margins: a flex item's margins do not
   collapse with the row's neighbors, a block's do. */
.schedule-header {
  margin: 2.5rem 0 0.5rem;
}
.schedule-header > h2 {
  font-size: 1.5rem;
  margin: 0;
}

/* A Schedule heading right under the hidden home title is the first thing
   on the page; after an intro body it keeps its section spacing. */
.site-main.home > .visually-hidden + .schedule-header,
.site-main.home > .visually-hidden + h2 {
  margin-top: 0.5rem;
}

.site-main .page-subtitle {
  font-family: var(--font-sans);
  color: var(--color-muted);
  font-size: 1rem;
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
}

/* Article typography: authored markdown only. Components rendered in the
   column keep their own rules; element selectors here would outrank them. */
:is(.page-body, .page-intro, .callout-content) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}
/* Content headings: `#` in a source file is a section heading under the
   page title, so it sizes with h2 rather than competing with it. */
:is(.page-body, .page-intro, .callout-content) h1 { font-size: 1.5rem; margin-top: 2.5rem; }
:is(.page-body, .page-intro, .callout-content) h2 { font-size: 1.5rem; margin-top: 2.5rem; }
:is(.page-body, .page-intro, .callout-content) h3 { font-size: 1.25rem; }
:is(.page-body, .page-intro, .callout-content) h4 { font-size: 1.0625rem; }
:is(.page-body, .page-intro, .callout-content) h5 { font-size: 1rem; }
:is(.page-body, .page-intro, .callout-content) h6 { font-size: 1rem; }

:is(.page-body, .page-intro, .callout-content) :is(p, ul, ol, dl, blockquote, pre, table, figure) {
  margin: 0 0 1rem;
}

:is(.page-body, .page-intro, .callout-content) :is(ul, ol) {
  padding-left: 1.5rem;
}
:is(.page-body, .page-intro, .callout-content) li + li {
  margin-top: 0.25rem;
}

:is(.page-body, .page-intro, .callout-content) blockquote {
  border-left: 3px solid var(--color-border);
  padding: 0.25rem 0 0.25rem 1rem;
  color: var(--color-muted);
  font-style: italic;
}

:is(.page-body, .page-intro, .callout-content) table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95em;
}
:is(.page-body, .page-intro, .callout-content) :is(th, td) {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
:is(.page-body, .page-intro, .callout-content) th {
  font-family: var(--font-sans);
  font-weight: 600;
  border-bottom-width: 2px;
}

.site-footer {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-muted);
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.site-credits {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.site-byline {
  margin: 0;
}
.site-affiliations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}
.site-affiliations li + li::before {
  content: "·";
  margin-right: 0.75rem;
  color: var(--color-border);
}
.site-affiliations a {
  color: inherit;
}
.site-affiliations a:hover {
  color: var(--color-accent);
}

.site-build-info {
  margin-left: auto;
}
.site-build-info summary {
  list-style: none;
  cursor: pointer;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  font-size: 0.75rem;
  user-select: none;
}
.site-build-info summary::-webkit-details-marker { display: none; }
.site-build-info[open] summary {
  background: var(--color-accent-soft);
}
.site-build-info dl {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 0.125rem 1rem;
  margin: 0.5rem 0 0;
  padding: 0.75rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.75rem;
  position: absolute;
  right: 1.25rem;
}
.site-build-info dt {
  color: var(--color-muted);
}
.site-build-info dd {
  margin: 0;
  font-family: var(--font-mono);
}

/* === Navigation =========================================================== */

.site-nav .nav-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.site-nav .nav-section {
  margin-top: 1.25rem;
}
.site-nav .nav-section:first-child {
  margin-top: 0;
}

.site-nav .nav-section-label,
.site-nav .nav-section-link {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  padding: 0.25rem 0;
}
.site-nav .nav-section-link:hover {
  color: var(--color-fg);
  text-decoration: none;
}

.site-nav .nav-children {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.site-nav .nav-link a {
  display: block;
  padding: 0.3rem 0.75rem;
  border-left: 2px solid transparent;
  margin-left: -0.75rem;
  color: var(--color-fg);
  border-radius: 0 3px 3px 0;
}
.site-nav .nav-link a:hover {
  background: var(--color-accent-soft);
  text-decoration: none;
}
.site-nav a[aria-current="page"] {
  border-left-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 500;
}
.site-nav .nav-external a::after {
  content: " ↗";
  color: var(--color-muted);
  font-size: 0.85em;
}

/* === Site links =========================================================== */

/* `course.yaml links:` in the sidebar. Every kind takes the accent pill; a
   brand or course stylesheet colours `.site-link-<kind>`. */

.site-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.site-sidebar > .site-links:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.site-links-label {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-muted);
}

.site-link {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: 0.75rem;
  font-weight: 600;
}
.site-link:hover {
  filter: brightness(1.15);
  text-decoration: none;
}

/* === Page list ============================================================ */

.page-list {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.page-list-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.page-list-section-label {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  margin: 0;
}

.page-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.page-list-item {
  border-bottom: 1px solid var(--color-border);
}
.page-list-item:last-child {
  border-bottom: none;
}

.page-list-item a,
.page-list-item > span {
  display: block;
  padding: 0.6rem 0;
  color: var(--color-fg);
}
.page-list-item a:hover {
  text-decoration: none;
  color: var(--color-accent);
}
/* Hidden items appear only under --show-hidden (staging review); normal
   builds omit them server-side. Mark them, never remove them. */
.page-list-item[data-state="hidden"] > * {
  color: var(--color-muted);
}
.page-list-item[data-state="hidden"] > *::after {
  content: " (unreleased)";
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.page-list-item[data-state="preview"] > * {
  color: var(--color-muted);
  font-style: italic;
}
.page-list-item[data-state="preview"] > *::after {
  content: " (draft)";
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-style: normal;
}

/* === Entry list =========================================================== */

.entry-list-section-label {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 2rem 0 0.5rem;
}

.entry-list-item {
  padding: 0.6rem 0.75rem;
}

.entry-list-item-heading {
  margin: 0 0 0.3rem 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
}

/* Structured listings, not prose: markers are the component's choice. */
.entry-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry-list-item-entries {
  list-style: none;
  margin: 0;
  padding-left: 1.4rem;
}

/* The shadow widens the ground without moving the item. */
.entry-list-item[data-state="preview"] {
  background: var(--color-faded);
  box-shadow: 0 0 0 0.35rem var(--color-faded);
  border-radius: 1px;
}

/* === Current marking ====================================================== */

/* The layout script sets `data-current` on the latest element whose
   `data-current-when` instant is at or before the viewer's clock.
   Layout-neutral on purpose: marking must not shift siblings. */
[data-current] {
  background: var(--color-accent-soft);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

/* === Schedule ============================================================= */

/* The schedule is interface, not reading text: it opts out of the
   column's reading face. */
.schedule {
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.schedule-unscheduled {
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
}
.schedule-unscheduled-heading {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
}

.schedule-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.schedule-group-empty {
  background: var(--color-faded);
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
}
.schedule-group-empty .schedule-group-label {
  margin: 0;
}

.schedule-group-label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.25rem;
}

.schedule-day {
  display: grid;
  grid-template-columns: 5em 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.35rem 0;
}

.schedule-day-label {
  margin: 0.6rem 0 0;
  color: var(--color-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.schedule-day .schedule-items {
  min-width: 0;
}

.schedule-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.schedule-item {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}
.schedule-item:last-child {
  border-bottom: none;
}

/* A tint of the kind with a kind-coloured edge and page-colour text, as the
   calendar filters: the text keeps its contrast whatever the kind colour. */
.schedule-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--kind) 18%, var(--color-bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kind) 55%, var(--color-bg));
  color: var(--color-fg);
  white-space: nowrap;
}

.schedule-item-link,
.schedule-item-text {
  color: var(--color-fg);
}
.schedule-item-link:hover {
  text-decoration: none;
  color: var(--color-accent);
}

.schedule-attachments {
  grid-column: 2;
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.875rem;
}
.schedule-attachment {
  color: var(--color-muted);
}
.schedule-attachment a {
  color: var(--color-muted);
}
.schedule-attachment a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

/* The schedule is a roadmap: every entry renders. Hidden entries are
   unlinked titles (the partial emits a span); preview entries link to a
   placeholder. Neither is ever removed. */
.schedule-item[data-state="hidden"] .schedule-item-text,
.schedule-attachment[data-state="hidden"] {
  color: var(--color-muted);
}
/* Unfilled rather than faded: fading would take the text under AA. */
.schedule-item[data-state="hidden"] .schedule-label {
  background: none;
  color: var(--color-muted);
}
.schedule-item[data-state="preview"] .schedule-item-text,
.schedule-item[data-state="preview"] .schedule-item-link {
  color: var(--color-muted);
  font-style: italic;
}

/* === Agenda calendar ====================================================== */

.agenda-filter,
.agenda-nav {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.4;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-muted);
  cursor: pointer;
}

.agenda-view-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  line-height: 0;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-card);
  color: var(--color-muted);
  cursor: pointer;
}
.agenda-view-toggle:hover {
  color: var(--color-fg);
}
.agenda-view-toggle[aria-pressed="true"] {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.agenda-filter {
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--kind) 50%, var(--color-bg));
}
.agenda-filter[aria-pressed="true"] {
  background: color-mix(in srgb, var(--kind) 18%, var(--color-bg));
  color: var(--color-fg);
}
.agenda-filter[aria-pressed="false"] {
  text-decoration: line-through;
}

.agenda-nav {
  border-radius: 4px;
  padding: 0 0.6rem;
  font-size: 1.125rem;
  line-height: 1.3;
}
.agenda-nav[data-nav="today"] {
  font-size: 0.8125rem;
}
.agenda-nav:disabled {
  opacity: 0.35;
  cursor: default;
}
.agenda-month {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
}

.agenda-weekday,
.agenda-week {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-muted);
}
.agenda-weekday {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: 0.25rem;
}
.agenda-week {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.agenda-row {
  border-top: 1px solid var(--color-border);
}
.agenda-row:last-child {
  border-bottom: 1px solid var(--color-border);
}
.agenda-day {
  border-left: 1px solid var(--color-border);
  font-family: var(--font-sans);
}
.agenda-day:last-child {
  border-right: 1px solid var(--color-border);
}
.agenda-day-number {
  font-size: 0.75rem;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  padding: 0 0.15rem;
}
.agenda-day[data-outside],
.agenda-day[data-outside-range] {
  background: var(--color-faded);
}
.agenda-day[data-outside] .agenda-chip {
  background: color-mix(in srgb, var(--kind) 6%, var(--color-faded));
  border-left-color: color-mix(in srgb, var(--kind) 35%, var(--color-bg));
}
.agenda-day[data-today] {
  box-shadow: inset 0 0 0 2px var(--color-accent);
}
.agenda-day[data-today] .agenda-day-number {
  color: var(--color-accent);
  font-weight: 700;
}
.agenda-row[data-break] .agenda-day {
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 6px,
    color-mix(in srgb, var(--color-fg) 4%, transparent) 6px 12px
  );
}
.agenda-break-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-muted);
}

.agenda-chip {
  font-size: 0.75rem;
  line-height: 1.3;
  padding: 0.1rem 0.3rem;
  border-left: 3px solid var(--kind);
  border-radius: 2px;
  background: color-mix(in srgb, var(--kind) 16%, var(--color-bg));
  color: var(--color-fg);
}
a.agenda-chip:hover {
  text-decoration: none;
  background: color-mix(in srgb, var(--kind) 30%, var(--color-bg));
}
.agenda-chip[data-span="middle"],
.agenda-chip[data-span="end"] {
  border-left-color: color-mix(in srgb, var(--kind) 16%, var(--color-bg));
}
.agenda-chip-time {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.agenda-chip[data-state="hidden"] {
  background: color-mix(in srgb, var(--kind) 6%, var(--color-bg));
  border-left-color: color-mix(in srgb, var(--kind) 40%, var(--color-bg));
  color: var(--color-muted);
}
.agenda-chip[data-state="preview"] {
  color: var(--color-muted);
  font-style: italic;
}
/* Kind colors over a near-black page need a larger share to read. */
:root.dark .agenda-chip {
  background: color-mix(in srgb, var(--kind) 26%, var(--color-bg));
}
:root.dark .agenda-chip[data-state="hidden"] {
  background: color-mix(in srgb, var(--kind) 11%, var(--color-bg));
}
:root.dark .agenda-day[data-outside] .agenda-chip {
  background: color-mix(in srgb, var(--kind) 11%, var(--color-faded));
}

/* === Callouts ============================================================= */

.callout {
  margin: 1.25rem 0;
  padding: 0.875rem 1rem;
  border-left: 3px solid var(--color-border);
  background: var(--color-card);
  border-radius: 0 4px 4px 0;
}
.callout-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem;
  color: var(--color-muted);
}
.callout-title p { margin: 0; }
.callout-content > :first-child { margin-top: 0; }
.callout-content > :last-child { margin-bottom: 0; }

.callout-note      { --c: #6b7280; }
.callout-tip       { --c: #059669; }
.callout-warning   { --c: #d97706; }
.callout-important { --c: #7c3aed; }
.callout-caution   { --c: #dc2626; }

.callout-note,
.callout-tip,
.callout-warning,
.callout-important,
.callout-caution {
  border-left-color: var(--c);
  background: color-mix(in srgb, var(--c) 6%, var(--color-bg));
}
.callout-note .callout-title,
.callout-tip .callout-title,
.callout-warning .callout-title,
.callout-important .callout-title,
.callout-caution .callout-title {
  color: var(--c);
}

/* === Figures ============================================================== */

figure.figure {
  margin: 1.5rem 0;
  text-align: center;
}
figure.figure img,
figure.figure video {
  display: inline-block;
  border-radius: 4px;
}
figure.figure figcaption {
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* === Columns ============================================================== */

.columns {
  gap: 1.5rem;
  margin: 0 0 1rem;
}
.column > :first-child { margin-top: 0; }
.column > :last-child { margin-bottom: 0; }

img.align-left  { margin: 0.25rem 1rem 0.5rem 0; }
img.align-right { margin: 0.25rem 0 0.5rem 1rem; }

/* === Cells ================================================================ */

.cell {
  margin: 0 0 1rem;
}
.cell > :last-child {
  margin-bottom: 0;
}
.cell-output pre,
pre.cell-error {
  margin: 0.5rem 0 0;
  padding: 0.625rem 0.875rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.cell-output pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}
.cell-output-stderr pre,
pre.cell-error {
  border-left: 3px solid #dc2626;
}
.code-fold {
  margin: 0 0 0.5rem;
}
.code-fold > summary {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

/* === Staff cards ========================================================== */

.staff-listing {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.staff-listing-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.staff-listing-section-label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin: 0;
}

.staff-listing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.875rem;
}

.staff-listing-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}

.staff-listing-name {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0;
}

.staff-listing-role {
  font-size: 0.8125rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.25rem;
}

.staff-listing-email,
.staff-listing-office,
.staff-listing-office-hours,
.staff-listing-zoom {
  margin: 0;
  font-size: 0.875rem;
}
.staff-listing-email a,
.staff-listing-zoom a {
  color: var(--color-accent);
}

.staff-listing-office,
.staff-listing-office-hours {
  color: var(--color-muted);
}

.staff-listing-hours {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  font-size: 0.875rem;
}
.staff-listing-hours li {
  padding: 0.1rem 0;
}

.staff-listing-bio {
  margin: 0.25rem 0 0;
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* === Math display ========================================================= */

.math.display {
  display: block;
  text-align: center;
  margin: 1rem 0;
  overflow-x: auto;
}

/* === Table of contents ==================================================== */

.toc-nav {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  max-height: calc(100vh - var(--header-h) - 2rem);
  overflow-y: auto;
  padding-left: 1rem;
  border-left: 1px solid var(--color-border);
}

.toc-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  margin: 0 0 0.5rem;
}

.toc-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.toc-nav ul ul {
  margin-left: 0.75rem;
  border-left: 1px solid var(--color-border);
  padding-left: 0.5rem;
}

.toc-nav li {
  margin: 0;
}
.toc-nav li > a {
  display: block;
  padding: 0.2rem 0;
  color: var(--color-muted);
  line-height: 1.35;
}
.toc-nav li > a:hover {
  color: var(--color-fg);
  text-decoration: none;
}
.toc-nav a[aria-current="location"] {
  color: var(--color-accent);
  font-weight: 500;
}

/* === Page notice ========================================================= */

.page-notice {
  border-left: 3px solid #d97706;
  background: color-mix(in srgb, #d97706 8%, var(--color-bg));
  border-radius: 0 4px 4px 0;
  padding: 0.75rem 1rem;
  margin: 0 0 1.5rem;
  font-family: var(--font-sans);
}
.page-notice p {
  margin: 0;
  font-weight: 600;
}

/* === Review marker ======================================================== */

/* A hidden page is built only under --show-hidden (the staging host); say so. */
body[data-state="hidden"] .site-main::before {
  content: "Unreleased: staff preview";
  display: block;
  margin-bottom: 1rem;
  padding: 0.4rem 0.75rem;
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-soft);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}