/* ===========================================================================
   lect-key.css — marks #lect-key headings and bullets ("will be on the exam").
   Hand-written; render_site.py never touches this file.

   The renderer never replaces a #lect-key node's heading or bullet — Paul's
   call, so numbering, anchors and the right-hand ToC all keep working. This
   file only adds a colored marker on top of whatever the node would already
   have rendered as:

     h2.lect-key     a first-level #student-notes section that is also
                     #lect-key. Its published body (if it has one) is ALSO
                     boxed by the renderer in a stock "!!! important"
                     admonition, which is Material's fixed #ff9100 orange
                     (that's warning's color — important is just an alias of
                     it) and does NOT adapt between light/dark. The marker
                     color below deliberately does NOT match the box anymore:
                     Paul compared orange, teal, purple and rose/magenta
                     side by side in both themes 2026-09-21 and picked teal —
                     orange read poorly in dark mode, purple was too muted
                     there. A block-level left border across the row.

     span.lect-key   a #lect-key node nested deeper than the first level. No
                     heading exists at that depth, so the marker sits on a
                     <span> wrapping the bullet's own text instead — rendered
                     as raw HTML by render_bullets(), not via attr_list.
                     attr_list was tried first and does not reach a bullet
                     reliably (its bare `{ ... }` form is heading-only, and
                     even the colon form needs its own line, not inline after
                     list-item text — both caught live 2026-09-21). Being
                     inline, this gets a self-contained pill/badge treatment
                     rather than the heading's full-row border — the two are
                     deliberately not identical, since one marks a whole
                     section and the other a phrase inside a bullet line.
   =========================================================================== */

:root {
  --lect-key-color: #00bfa5; /* teal — chosen over orange/purple/rose 2026-09-21 */
}

h2.lect-key {
  border-left: 3px solid var(--lect-key-color);
  padding: 0.15em 0 0.15em 0.6em;
  background-color: rgba(0, 191, 165, 0.08);
}

span.lect-key {
  border-left: 3px solid var(--lect-key-color);
  border-radius: 3px;
  padding: 0.05em 0.5em 0.05em 0.4em;
  background-color: rgba(0, 191, 165, 0.12);
}