/* Unreleased lectures are greyed out by stylesheets/unreleased.css, generated
   by scripts/gen_lecture_pages.py from the published materials. */

/* Lecture overview: sortable column headers (javascripts/sortable-tables.js). */
.sortable-table th.sortable-header { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-table th.sortable-header::after { content: " \2195"; opacity: 0.35; }
.sortable-table th[aria-sort="ascending"]::after { content: " \25B2"; opacity: 0.8; }
.sortable-table th[aria-sort="descending"]::after { content: " \25BC"; opacity: 0.8; }

/* University of Cambridge logo at the bottom of the left sidebar
   (overrides/partials/nav.html). The lettering is dark on a transparent
   background, so it sits on white in the dark scheme. */
.ucam-sidebar-logo { padding: 1.6rem 0.6rem 1rem; }
.ucam-sidebar-logo img { display: block; width: 130px; max-width: 100%; height: auto; }
[data-md-color-scheme="slate"] .ucam-sidebar-logo img {
  background: #fff; padding: 8px 10px; border-radius: 4px; box-sizing: border-box;
}

/* Lecture transcripts: errata in red (scripts/transcript_to_md.py) */
.errata-title, .errata .said { color: #b3261e; }
.errata .quoted { font-style: italic; }
[data-md-color-scheme="slate"] .errata-title, [data-md-color-scheme="slate"] .errata .said { color: #ff8a80; }

/* Transcript and recording pages: timestamps link into the recording */
a.ts { font-variant-numeric: tabular-nums; color: var(--md-default-fg-color--light); text-decoration: none; }
a.ts:hover { color: var(--md-accent-fg-color); text-decoration: underline; }
.chapters a.ts { display: inline-block; min-width: 3.4em; }
.errata li { margin-bottom: .7em; }

/* Blackboard panels on a recording page (lectures/<dir>/board.txt). */
/* The live panel under the player (docs/javascripts/board.js) and the
   position label "N / 9"; every colour is a Material variable so the default
   and slate schemes both work. */
.board-n { font-variant-numeric: tabular-nums; color: var(--md-default-fg-color--lighter); margin-right: .4em; }
.board-live { max-width: 1280px; margin: .6rem 0 1.2rem; }
.board-live-link { display: block; background: var(--md-code-bg-color); border-radius: 2px; }
.board-live-link img { display: block; width: 100%; height: auto; max-height: 50vh; object-fit: contain; border-radius: 2px; }
.board-live-caption { font-size: .8rem; color: var(--md-default-fg-color--light); margin: .3rem 0 0; }
.board-strip { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; }
/* Scoped under .md-typeset: Material's ".md-typeset a:focus, .md-typeset a:hover"
   (0,2,1) would otherwise outrank the chip colours, turning the filled chip's
   text accent-on-accent when hovered or focused. */
.md-typeset .board-chip { display: inline-flex; align-items: center; gap: .35em; min-height: 2.2rem; padding: 0 .7rem; border: 1px solid var(--md-default-fg-color--lighter); border-radius: 1.1rem; font-size: .7rem; font-variant-numeric: tabular-nums; color: var(--md-default-fg-color--light); text-decoration: none; }
.md-typeset .board-chip b { font-weight: 700; }
.md-typeset .board-chip:hover, .md-typeset .board-chip:focus { color: var(--md-accent-fg-color); border-color: var(--md-accent-fg-color); text-decoration: none; }
.md-typeset .board-chip:focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: 2px; }
.md-typeset .board-chip[aria-current="true"] { background: var(--md-accent-fg-color); border-color: var(--md-accent-fg-color); color: var(--md-accent-bg-color); }

/* Recording-page media: the videos (videos.txt) and, before a recording exists, the blackboard panels (board.txt). */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}
.md-typeset .media-grid figure { margin: 0; width: 100%; }
.media-grid video, .media-grid img { width: 100%; height: auto; display: block; background: var(--md-code-bg-color); border-radius: .2rem; }
.md-typeset .media-grid figcaption { font-size: .7rem; margin-top: .3rem; }