/* CHEM 548 shared deck component layer.

   The vocabulary the decks were copying by hand. Its first consumers are lec13
   and _scaffold, linked in the migration step that follows this one; every
   other deck keeps its own inline <style> until its own item migrates it, so
   each rule here is a COPY of a live deck's rule, not a move.

   Provenance is machine-checked. A `LIFT <deck>` marker means every rule under
   it is byte-identical to that deck's inline <style>, ignoring indentation:
   `~/projects/library/sources/work-teaching-w908_lec13-format/record/artifacts/lift_diff.sh` diffs them rule by rule and
   prints LIFT_DRIFT:0. A `NEW` marker means the rules under it are authored
   here and appear in no deck. There are exactly three of those -- `.hl`,
   `.eq-hl` and `svg.overlay` -- and lift_diff.sh exempts them by name.

   Three things a reader is told here rather than left to discover:

   1. Every colour is a literal hex, deliberately. Across all 22 deck files
      there is exactly one custom property declaration, `--pane-min`. No deck
      declares `--accent`, `--second` or `--ink-2`: those live in the website's
      tokens.css, which decks do not load. A var() reference to one of them here
      would fail substitution and render nothing, so the only var() in this file
      is the one below that reads --pane-min.
   2. Lifting the whole fit ladder ADDS live rules to two files. See the ladder.
   3. The print pin carries a comment that is wrong about its own number, and
      ships that way on purpose. See the pin.

   Deliberately NOT lifted, because one shared value could not be pixel-neutral
   today: `.lead` and `.title-card .lecture-title` (8 decks #ffd34e, 2 #8d90e8),
   `.key-rows`/`.key-row` (lec04 pads differently), `.lead-line` (lec02 differs),
   `.reveal .page` alignment is lifted at `left` and lec03-point keeps its local
   `justify`, the base `.fig` rule and the fit-heading rule (the selector, not
   the body, is what drifted), `.strike` (two different components share the
   name), and the three chip shapes. `.page .lead` spacing IS lifted below:
   spacing is not the property that drifted, colour is.
*/

/* LIFT lec01 */
.reveal .small   { font-size: 0.78em; }
.reveal .smaller { font-size: 0.62em; }
.reveal .tiny    { font-size: 0.52em; }

.caption { font-size: 0.5em; color: #bbb; margin-top: 0.4em; }
.cite    { font-size: 0.42em; color: #8a8; margin-top: 0.5em; }
.src     { font-size: 0.4em;  color: #667; margin-top: 0.35em; }

/* LIFT lec01 */
/* native rebuilds of the instructor's typed pages: left-aligned text block */
.reveal .page { text-align: left; max-width: 36em; margin: 0 auto; }
.reveal .page p { margin: 0.4em 0; }
.reveal .page .lead { margin: 0.6em 0 0.1em; }
/* denser variant for text-heavy rebuilt pages that overflow at .small */
.reveal .page.tight { font-size: 0.68em; }
.reveal .page.tight p { margin: 0.3em 0; }
.reveal .page.tight .lead { margin: 0.5em 0 0.05em; }

/* LIFT lec05-ionic-stoich */
/* the short verdict the instructor sets beside a worked count */
.reveal .page .verdict { float: right; max-width: 8.5em; color: #ffd34e; text-align: left; }

/* LIFT lec01 */
/* compact native table for rebuilt source tables */
.reveal table.ntab { font-size: 0.46em; margin: 0.55em auto 0; border-collapse: collapse; }
.reveal table.ntab th, .reveal table.ntab td { border: 1px solid #456; padding: 0.35em 0.6em; text-align: left; vertical-align: top; }
.reveal table.ntab th { color: #6ad; }
.reveal table.ntab tbody tr:last-child th, .reveal table.ntab tbody tr:last-child td { border-bottom: 1px solid #456; }
.reveal table.ntab td.c { text-align: center; }
/* LIFT lec03-point */
/* Row tints for the note table: neutral and danger. The two hexes are the
   design system's --second-wash and --accent-wash, written literally
   because a deck loads no token file. */
.reveal table.ntab tr.tint-n th, .reveal table.ntab tr.tint-n td { background: #26284a; }
.reveal table.ntab tr.tint-d th, .reveal table.ntab tr.tint-d td { background: #3a1e2c; }

/* NEW */
/* A build-state highlight on a table cell that is already present. Never
   display: neither none (removes the cell, the grid recomputes) nor block
   (leaves table-cell formatting, the column collapses). Painting only. */
.reveal table.ntab td.hl { background: #3a1e2c; outline: 2px solid #ff5a5f; outline-offset: -2px; }
/* A table cell that must APPEAR on click is a different problem needing none of
   this: a plain .fragment reveals it in place, because reveal's fragment CSS is
   opacity and visibility only (lib/reveal/dist/reveal.css). */

/* An equation highlight: the outline the instructor draws around one term of a
   KaTeX line (the pptx's red circle or box), as an inline span so it moves
   with the term at every scale. */
.reveal .eq-hl { outline: 2px solid #ff5a5f; outline-offset: 2px; border-radius: 4px; padding: 0 0.15em; }
/* It wraps the real term rather than sitting over it, so a screen reader reads
   the highlighted term in its place in the line. */

/* LIFT lec01 */
/* CAPABILITY GAIN, not a pure move: fitsm and fittiny are absent from lec13 and
   from _scaffold today, and fitmd is absent from _scaffold, so migrating those
   two files onto this stylesheet gives them three rules they did not have.
   It is pixel-neutral in fact -- neither file uses those classes -- but a
   reviewer should see the gain rather than find it. The five design numbers
   (500/430/390/340/525) are locked in deck-authoring.md. */
/* slides with title + image + 2-3 bullet lines + caption: cap tighter */
.reveal section.fitmd .fig { max-height: 430px; }
.reveal section.fitsm .fig { max-height: 390px; }
.reveal section.fittiny .fig { max-height: 340px; }
/* image-dominant slides (title + image + caption only) can go larger */
.reveal section.figbig .fig { max-height: 525px; }

/* LIFT lec13 */
/* Print: the pdf-page is wider (~998px) than the 960px screen box, so an
   aspect-constrained .fig (max-width:94%) grows ~20px taller than the
   centering math expects; its bottom crosses the page raster boundary and
   Chromium drops the image from that page. Pin the print width to the
   screen value (94% of 960 = 902px) so print layout matches screen. */
@media print { .reveal .fig { max-width: 902px; } }
/* Two facts about the rule above, both deliberate. It caps `.fig`, which this
   stylesheet does not declare: the base `.fig` rule stays in each deck, because
   moving it would force the selector decision described next. And the comment's
   last sentence is WRONG.
   The screen value is not 902px: bare `.fig` at specificity (0,1,0) loses to the
   black theme's `.reveal img { max-height: 95% }` at (0,1,1)
   (lib/reveal/dist/theme/black.css:136), so the real computed width is 912px in
   every deck but lec02-elements, which raises its own selector. The pin still
   does its job. The comment ships verbatim so the next reader does not "fix" the
   sentence or the selector by accident; fixing the inert cap is its own item.
*/

/* LIFT lec13 */
/* Q->A text-page builds: the base (question-only) render is a short strip
   while the answer state is taller. Reserve the ANSWER state's height and
   pin the content to the top so both fragment states measure identically —
   reveal's print layout centers each clone at BASE size, and a taller
   swapped-in answer image would cross the page boundary and vanish.
   Heights are per-pair (answer-state footprint), set inline. */
.reveal section .qafig { object-fit: contain; object-position: top center; }
/* Same page-edge guard for figure swaps whose later states trim taller
   than the base state: reserve the full 525px so every fragment state
   measures identically in the print layout. */
.reveal section .growfig { height: 525px; object-fit: contain; object-position: top center; }

/* LIFT lec04-structures */
/* Figure callouts: a thin accent frame around one region of the instructor's
   figure plus a small label. Every piece is absolutely positioned inside
   .figwrap, which hugs the rendered image, so the percentages track the
   figure at any size and no callout can add height to a printed page. */
.reveal .figwrap { position: relative; display: inline-block; width: fit-content; max-width: 94%; line-height: 0; }
/* the theme's 15px image margin would make the wrapper taller than the image
   and throw every percentage below off by that much */
.reveal .figwrap .fig { display: block; margin: 0; max-width: 100%; }
.reveal .figwrap .co { position: absolute; box-sizing: border-box; line-height: 1.3; }
.reveal .figwrap .cobox { border: 2px solid #ffd34e; border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(20, 22, 45, 0.8); }
/* Walking a grid of figures: every cell already visited keeps the thin frame,
   and the cell being talked about right now carries the heavy one, so the
   figure shows the path and the place at the same time. */
.reveal .figwrap .cobox.conow { border-width: 5px; }
/* A dashed frame marks a region that is empty on purpose, against the solid
   frame of a filled one. */
.reveal .figwrap .cobox.codash { border-style: dashed; }
.reveal .figwrap .cotag,
.reveal .figwrap .cochip { background: #1b1d3a; border: 1px solid #ffd34e; border-radius: 5px;
  color: #ffd34e; font-size: 0.26em; padding: 0.18em 0.45em; text-align: left; }
.reveal .figwrap .cochip { transform: translate(-50%, -50%); white-space: nowrap; }
.reveal .figwrap .sw { display: inline-block; width: 0.85em; height: 0.85em;
  margin-right: 0.4em; border: 1px solid #cfd8e3; vertical-align: -0.05em; }
/* Labels that belong to one swapped figure show only while that figure is on
   screen; applyAnim turns the matching group on. */
/* TRAP: .costate is display:none / display:block, and it is for absolutely
   positioned label groups over a figure. NEVER put it on a table cell. Neither
   value is safe on a <td>: display:none removes the cell and the grid
   recomputes, display:block takes the cell out of table-cell formatting and the
   column collapses. Use .hl above, which changes painting only. */
.reveal .costate { display: none; }
.reveal .costate.on { display: block; }
/* A one-idea caption under a figure, at the deck's supporting-text size so it
   can be added to a full-height figure slide without pushing it past the
   700px box. */
.reveal .figcap { font-size: 0.4em; color: #cfd8e3; max-width: 52em;
  margin: 0.3em auto 0; line-height: 1.35; }
.reveal .figcap b { color: #ffd34e; font-weight: 700; }

/* NEW */
/* The second child family on .figwrap: an SVG drawn over a cropped figure,
   where lec04's .co* family puts positioned HTML spans on the same wrapper.
   The overlay's viewBox is the crop's pixel size, so coordinates are read
   straight off the crop; width and height are 100% because an absolutely
   positioned replaced element does NOT stretch to inset:0 -- it would keep its
   intrinsic pixel size and overflow the capped figure. It never takes the
   pointer: the figure underneath is the thing on screen. */
.reveal .figwrap svg.overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* LIFT lec05-ionic-stoich */
/* Reveal centers a slide from the height it measures once, at layout time, and
   never recomputes it. A build whose later panes are taller than its first would
   therefore hang off the bottom of the box, so every pane reserves the group's
   full height and the slide is centered for all of its states from the start. */
.reveal .pane { min-height: var(--pane-min, 0); }

/* LIFT lec05-ionic-stoich */
/* The crystal chemical formula with its symbol classes named. The figure is
   a fixed 820x90 logical-px box, so the KaTeX marks and the leader-line
   coordinates share one coordinate system and reveal's scale moves both
   together; the line endpoints are measured off the rendered marks. The
   three labels sit in the empty margins beside the centred formula, so the
   block costs no more height than the coordination line it replaced. */
.reveal .ccf-fig { position: relative; width: 820px; height: 90px; margin: 0 auto; }
.reveal .ccf-fig .ccf-eq { position: absolute; left: 0; right: 0; top: 12px; margin: 0;
                           text-align: center; font-size: 1.5em; line-height: 1.15; }
.reveal .ccf-lead { position: absolute; left: 0; top: 0; width: 820px; height: 90px; }
.reveal .ccf-lead line { stroke-width: 1.4; }
.reveal .ccf-lead .l-charge { stroke: #ff5a5f; }
.reveal .ccf-lead .l-count { stroke: #e0b060; }
.reveal .ccf-lead .l-cn { stroke: #8d90e8; }
.reveal .ccf-tag { position: absolute; font-size: 0.64em; line-height: 1.1; white-space: nowrap; }
.reveal .ccf-tag.t-charge { color: #ff5a5f; }
.reveal .ccf-tag.t-count { color: #e0b060; }
.reveal .ccf-tag.t-cn { color: #8d90e8; }
/* The three balances side by side, one box each, at the crystal chemical
   formula's own 820px width so the boxes sit under the symbols they use.
   Equal flex basis keeps every box in place as the build substitutes
   numbers into the equations and adds the yellow results beneath them. */
.reveal .bal-row { display: flex; gap: 10px; width: 820px; margin: 0.4em auto 0; }
.reveal .bal-box { flex: 1 1 0; min-width: 0; text-align: center;
  background: #1e2038; border: 1px solid #31335a; border-radius: 12px;
  padding: 0.25em 0.5em 0.3em; }
.reveal .bal-box .nm { display: block; font-size: 0.5em; color: #a9abc4; }
.reveal .bal-box .eq { display: block; font-size: 0.62em; margin-top: 0.1em; }
.reveal .bal-box .res { display: block; font-size: 0.58em; color: #ffd34e; margin-top: 0.05em; }

/* LIFT lec01 */
/* homework call-to-action: a real link, keyboard-reachable. Reveal scales the
   960x700 logical box by about 0.39 at a 375px viewport, so the logical
   height must clear ~113px for the rendered target to reach 44 physical px. */
.reveal a.hw-link {
  display: inline-block; min-height: 120px; line-height: 120px;
  padding: 0 1.2em; border: 1px solid #6ad; border-radius: 6px;
  color: #6ad; text-decoration: none; font-size: 0.82em;
}
.reveal a.hw-link:hover,
.reveal a.hw-link:focus-visible { background: #6ad; color: #111; }

/* LIFT lec01 */
.title-card .meta { font-size: 0.72em; color: #cfd8e3; margin: 0.2em 0; }
.title-card .reading { font-size: 0.62em; margin: 1em auto 0; max-width: 34em; color: #ddd; }

/* LIFT lec01 */
/* KaTeX inside headings must not inherit the theme's uppercase transform */
.reveal h1 .katex, .reveal h2 .katex { text-transform: none; }
/* Reveal pins fragments to a GPU layer (will-change: opacity), so their text
   rasterizes before the deck's scale transform and lands soft. Drop the layer
   once the fragment is shown; the fade-in still gets it while animating. */
.reveal .slides section .fragment.visible { will-change: auto; }