/* ============================================================================
   deck-chrome.css — shared topbar control chrome for tuul.dev decks & papers
   ----------------------------------------------------------------------------
   ONE definition for the look of the page controls: ✎ draw · ✐ notes ·
   ☾/☀ light-dark toggle. Extracted verbatim from the AlphaZero deck
   (courses/alphazero/alphazero.html) so that deck, nano-omni, the paper
   explainers, and any future page share a single source — change it here and
   every surface updates.

   Pair with deck-annotate.js: `DeckAnnotate.mountControls(slot, opts)` injects
   buttons carrying these classes. (Pages with bespoke topbars — the AlphaZero
   deck, nano-omni — instead hand-write the same markup; the classes are the
   contract.)

   Relies on the host page's palette vars (every tuul.dev deck/paper defines
   them per light/dark theme):
     --fill --fill-hover --hairline --chalk --blue --link --board --mono
   ========================================================================== */

/* Slot that mountControls fills, or a hand-written wrapper around the trio. */
.deck-controls{display:flex;align-items:center;gap:14px}

/* Pill buttons: ✎ draw, ✐ notes. `.on` = active (e.g. pencil engaged). */
.flow-btn{font:inherit;font-family:var(--mono);font-size:.7rem;cursor:pointer;background:var(--fill);border:1px solid var(--hairline);color:var(--chalk);border-radius:8px;padding:6px 11px;transition:.16s;letter-spacing:.04em}
.flow-btn:hover{background:var(--blue);color:var(--board);border-color:var(--blue)}
.flow-btn.on{background:var(--link);border-color:var(--link);color:var(--board)}

/* Round, icon-only light/dark toggle. Shows the DESTINATION: ☾ in light mode
   (click to go dark), ☀ in dark mode (click to go light). */
.theme-toggle{margin-left:14px;cursor:pointer;font-size:1rem;line-height:1;background:var(--fill);border:1px solid var(--hairline);color:var(--chalk);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;transition:.2s;flex-shrink:0}
.theme-toggle:hover{background:var(--fill-hover);transform:rotate(20deg)}

/* Button labels collapse to glyph-only on narrow screens. */
@media(max-width:560px){.btxt{display:none}}