/*
 * Shared chrome for every ECE297 lecture deck.
 *
 * Linked by each deck's index.html as ../deck.css, after reveal's own
 * stylesheets so these override cleanly. Deck-specific styling stays in that
 * deck's own <style> block — this file is only for what every lecture wants.
 *
 * Pairs with deck.js. Change either and every deck picks it up.
 */

/* ---------- theme tokens ----------
   One place to retheme. Must stay in step with the #theme link in each deck
   (vendored: black.css, white.css — currently black). Light-theme values are
   kept alongside in comments so switching back is mechanical. */
:root {
  --ece-accent: #4da3ff; /*      light: #00449e */
  --ece-muted: #9fb3c8; /*       light: #5b6b7c */
  --ece-panel: #1e272e; /*       light: #ffffff */
  --ece-panel-edge: #37474f; /*  light: #cfd8dc */
  --ece-chip: #263238; /*        light: #eceff1 */
  --ece-alert: #ef5350; /*       light: #c62828 — the "something is wrong" red */
}

/* ---------- typography ---------- */
.reveal h1,
.reveal h2,
.reveal h3 {
  text-transform: none;
  letter-spacing: -0.01em;
}

.reveal section {
  text-align: left;
}

.reveal section.centered {
  text-align: center;
}

.reveal .muted {
  color: var(--ece-muted);
  font-size: 0.62em;
}

/* Nested bullets step down a size and fade a little at each level. Opacity
   rather than a colour so it follows whichever theme is in use. */
.reveal ul ul,
.reveal ol ul,
.reveal ul ol,
.reveal ol ol {
  font-size: 0.85em;
  margin-top: 0.3em;
  opacity: 0.8;
}

/* A numbered list inside a numbered list letters its items (1. a. b. …).
   A rule, not a type="a" attribute: the theme sets list-style-type on
   .reveal ol, which overrides the attribute. */
.reveal ol ol {
  list-style-type: lower-alpha;
}

/* Small uppercase lead-in above a title, e.g. the course name. */
.reveal .kicker {
  color: var(--ece-accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.42em;
  font-weight: 700;
}

/* ---------- layout helpers ---------- */
.reveal .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}

.reveal .two-col h3 {
  font-size: 0.72em;
  margin-bottom: 0.3em;
}

.reveal .two-col li {
  font-size: 0.62em;
}

/* Keyboard-shortcut table: <table class="keys"> with <kbd> in the first cell. */
.reveal .keys td {
  font-size: 0.55em;
  padding: 6px 14px;
}

.reveal .keys kbd {
  font: 600 0.9em ui-monospace, Consolas, monospace;
  background: var(--ece-chip);
  border: 1px solid var(--ece-panel-edge);
  border-radius: 3px;
  padding: 2px 7px;
}

/* ---------- code ----------
   Sized so a ~65-column sample fits without either scrollbar. A code block that
   scrolls during a lecture is a code block nobody can read — if yours overflows,
   shorten the lines rather than shrinking this. */
.reveal pre {
  width: 100%;
  font-size: 0.46em;
  box-shadow: none;
  border: 1px solid var(--ece-panel-edge);
  border-radius: 4px;
}

.reveal pre code {
  max-height: 560px;
  padding: 18px 22px;
  overflow: hidden;
}

/* Inline code in prose — a command or file name in a bullet — is a chip,
   like <kbd>, so it reads as a thing you type rather than a word in the
   sentence. Code inside <pre> is untouched. */
.reveal :not(pre) > code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.85em;
  color: var(--ece-accent);
  background: var(--ece-chip);
  border: 1px solid var(--ece-panel-edge);
  border-radius: 3px;
  padding: 0.05em 0.4em;
}

/* The vendored monokai theme paints diff deletions the same muted grey as
   comments and meta lines, so only the + side of a diff reads as a change.
   Give deletions monokai's red so both sides colour. */
.reveal .hljs-deletion {
  color: #f92672;
}

/* ---------- build-up code blocks ----------
   reveal dims un-highlighted rows to opacity .4. On a .build-lines block they go
   fully transparent instead, so cumulative ranges (data-line-numbers="1-3|1-6|…")
   read as lines *appearing* rather than un-dimming.

   Two things to know: a leading | in the range list breaks the effect, because
   reveal only adds .has-highlights once a group actually matches a line. And
   opacity rather than display:none is deliberate — the rows keep their space, so
   the block holds its final height from step one and nothing below it shifts.

   One class more specific than reveal's own rule, so it wins outright. */
.reveal .build-lines .hljs.has-highlights tr:not(.highlight-line) {
  opacity: 0;
}

.reveal .build-lines .hljs tr {
  transition: opacity 0.25s ease;
}

/* ---------- blackboard diagrams ----------
   Drives the SVG built by diagram.js. Each .diagram-part is one fragment (one
   keypress); the strokes inside it carry their own --dur and --delay, computed
   from their length so the pen moves at a constant speed.

   .fragment custom is reveal's own opt-out from the default opacity fade — see
   its base rule, .fragment:not(.custom){opacity:0}. Without `custom` the whole
   group would fade in and there would be nothing left to draw. */
/* Fills the slide width; the viewBox scales the drawing to match. max-height
   keeps a wide, short diagram from growing taller than the space under a
   heading on a 700-unit slide — lower it if a diagram crowds its title. */
.reveal .diagram {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-height: 520px;
  overflow: visible;
}

.reveal .diagram .stroke {
  fill: none;
  stroke: var(--ece-accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Padded, not exactly --len: with dasharray = offset = len the hidden dash
     ends precisely on the path's start point, and a round cap on a zero-length
     dash renders as a dot there (which strokes show it is down to floating
     point — a spoke or two, not all). Pushing the dash end 2 units before the
     start keeps every boundary off the path; the gap still covers it, and the
     drawn state (offset 0) still covers the full length. */
  stroke-dasharray: calc(var(--len) + 4);
  stroke-dashoffset: calc(var(--len) + 6);
}

/* linear, not ease — duration already scales with length, so a constant
   timing function is what actually produces a constant pen speed. */
.reveal .diagram-part.visible .stroke {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur) linear var(--delay);
}

/* Labels and arrowheads can't be "drawn" by dash offset — they fade in once
   the stroke they belong to has landed. */
.reveal .diagram .ink {
  opacity: 0;
}

.reveal .diagram .ink.filled {
  fill: var(--ece-accent);
  stroke: none;
}

.reveal .diagram .label {
  fill: var(--ece-muted);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 15px;
}

.reveal .diagram-part.visible .ink {
  opacity: 1;
  transition: opacity var(--dur) ease var(--delay);
}

/* PDF export: every diagram must print in its finished state, whether or not
   reveal marked the parts .visible (6.0.1 does) — a blank diagram is the worst
   possible failure for a handout. Force the drawn state, but WITHOUT
   !important on opacity: a deck hides ink on purpose (a "working tree" label
   under a revision name, a superseded arrowhead) with rules more specific
   than these, and those must still win on paper. */
html.print-pdf .reveal .diagram .stroke,
html.reveal-print .reveal .diagram .stroke {
  stroke-dashoffset: 0 !important;
  transition: none !important;
}

html.print-pdf .reveal .diagram .ink,
html.reveal-print .reveal .diagram .ink {
  opacity: 1;
  transition: none !important;
}