/* ============================================================
 * Strabo FPL: shared chrome.
 *
 * Brand lockup, theme toggle, status pills. Loaded by base.html
 * after tokens-light.css so it can consume the alias tokens.
 *
 * Spec: docs/superpowers/specs/2026-05-16-light-mode-default-experience-design.md
 *
 * Brand lockup (Sep 2026): the twin symbol (a navy square PNG from
 * static/img/brand/twin/) to the left of the wordmark "Strabo FPL".
 * Markup lives in templates/_partials/brand.html.
 *
 * Brand don'ts (codified):
 *   - Don't letter-space "FPL" or change its weight relative to "Strabo".
 *   - Don't recolour the symbol; it ships as a fixed navy square.
 *   - Don't drop below 11px (tiny).
 * ============================================================ */

/* ---------- Brand mark ---------- */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--font-sans);
  font-size: 17px;            /* nav default (lk-nav) */
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-1);
  text-decoration: none;
}
.brand .brand-symbol { width: 18px; height: 18px; border-radius: 4px; display: block; flex-shrink: 0; align-self: center; margin-right: 0.45em; }
.brand .brand-name { color: var(--text-1); }
.brand .fpl   { color: var(--text-3); margin-left: 0.32em; font-weight: 700; }
.brand--display .brand-symbol { width: 56px; height: 56px; border-radius: 12px; }
.brand--heading .brand-symbol { width: 34px; height: 34px; border-radius: 8px; }
.brand--subhead .brand-symbol { width: 22px; height: 22px; border-radius: 5px; }
.brand--tiny .brand-symbol, .brand--mini .brand-symbol { width: 11px; height: 11px; border-radius: 2px; }
:root[data-theme="dark"] .brand .fpl { color: rgba(255, 255, 255, 0.55); }
.brand:hover { opacity: 0.85; }

/* Size variants — used in marketing, auth, modals, hero.
   Mirror the lockup sizes from logo/system.html: display 56 /
   heading 32 / subhead 22 / nav 17 (default) / tiny 11. */
.brand--display { font-size: 56px; letter-spacing: -0.03em; }
.brand--heading { font-size: 32px; letter-spacing: -0.025em; }
.brand--subhead { font-size: 22px; letter-spacing: -0.022em; }
.brand--nav     { font-size: 17px; letter-spacing: -0.02em; }
.brand--tiny    { font-size: 11px; letter-spacing: -0.01em; }
/* Back-compat: --mini was the old smallest variant; now alias of --tiny. */
.brand--mini    { font-size: 11px; letter-spacing: -0.01em; }

/* ---------- Signal triangles (in-product vocabulary) ---------- */
.signal {
  display: inline-flex;
  vertical-align: -2px;
}
.signal svg {
  width: 12px;
  height: 11px;
  display: block;
}
.signal--up svg   { color: var(--pos); }
.signal--down svg { color: var(--neg); transform: rotate(180deg); }
.signal--hold svg { color: var(--amb); fill: none; stroke: currentColor; stroke-width: 2.4; }

/* ---------- Status pills ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
}
.pill--pos { background: var(--pill-pos-bg); color: var(--pill-pos-fg); }
.pill--pos::before { background: var(--pill-pos-dot); }
.pill--neg { background: var(--pill-neg-bg); color: var(--pill-neg-fg); }
.pill--neg::before { background: var(--pill-neg-dot); }
.pill--amb { background: var(--pill-amb-bg); color: var(--pill-amb-fg); }
.pill--amb::before { background: var(--pill-amb-dot); }
.pill--cya { background: var(--pill-cya-bg); color: var(--pill-cya-fg); }
.pill--cya::before { background: var(--pill-cya-dot); }

/* ---------- Theme toggle (segmented control) ---------- */
.theme-toggle {
  display: inline-flex;
  background: var(--app-sunk);
  border: 1px solid var(--app-hairline);
  border-radius: 999px;
  padding: 2px;
  gap: 0;
}
.theme-toggle button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  cursor: pointer;
  border-radius: 999px;
  font-family: var(--font-mono);
}
.theme-toggle button[aria-pressed="true"] {
  background: var(--app-raised);
  color: var(--text-1);
  box-shadow: 0 1px 2px rgba(15, 42, 64, 0.08);
}
.theme-toggle button:hover:not([aria-pressed="true"]) {
  color: var(--text-2);
}