/*
 * Shared logo + theme-toggle chrome for every public page.
 *
 * The palette AND the logo colours (--lg-frame / --lg-ring / --lg-core)
 * are the single source of truth in /tokens.css. Every page pairs this
 * file with the tokens — directly, via /site.css, or via a page
 * stylesheet (e.g. /deck/style.css) — so this file only carries the
 * shared logo sizing + toggle-button styling, no palette of its own.
 */

/* ── Logo ──────────────────────────────────────────────────────── */
.fs-logo {
  display: inline-block;
  vertical-align: middle;
  /* In flex brand containers (some use align-items:baseline) this keeps
     the mark vertically centred against the wordmark text. */
  align-self: center;
  width: 26px;
  height: 26px;
  margin-right: 8px;
  flex: none;
}
/* Fallbacks (light-theme values) so a stale/missing tokens.css can never
   black out the logo — SVG fill defaults to black when a var is undefined. */
.fs-logo .lg-frame { fill: var(--lg-frame, #0A0A09); stroke: none; }
.fs-logo .lg-ring  { fill: var(--lg-ring, #FFFFFF); }
.fs-logo .lg-core  { fill: var(--lg-core, #14B8A6); }

/* ── Theme toggle ──────────────────────────────────────────────── */
.theme-btn {
  display: inline-flex;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.theme-btn:hover { border-color: var(--teal, #14B8A6); color: var(--ink); }
.theme-btn svg { width: 16px; height: 16px; flex: none; }
.theme-icon-moon { display: block; }
.theme-icon-sun  { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun  { display: block; }

/* Auto-injected floating toggle for pages without a nav control. */
.theme-btn--floating {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--ink);
  box-shadow: 0 2px 12px rgba(0,0,0,0.16);
  z-index: 1000;
}
.theme-btn--floating svg { width: 20px; height: 20px; }