/* ==========================================================================
 * components.css — shared shell pieces used across pages
 *   topbar . nav (brand + cta) . chip . footer . badge-float
 *
 * Section markers `=== Name ===` below split the file into scannable
 * blocks. New components belong under a new === marker; if any single
 * section grows past ~150 LOC or gains variants, promote it to its own
 * file under `components/<name>.css` and update README + the canonical
 * CSS load order in tools/verify-css-parity.mjs.
 *
 * Dark-mode "always-dark islands" (.topbar, brand mark, nav cta) keep
 * #0e0d0a / #f4ecd8 explicit by design — they stay dark in both themes.
 * ========================================================================== */

/* === TopBar === */
.topbar{
  border-bottom:var(--b-thick);
  background:var(--ink);
  color:var(--paper);
  padding:10px 32px;
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--ff-mono);font-size:13px;
}
.topbar .marquee{
  overflow:hidden;flex:1;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.topbar .marquee-track{display:flex;width:max-content;animation:scroll 28s linear infinite}
.topbar .marquee span{white-space:nowrap;padding-right:48px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.topbar .dot{
  width:8px;height:8px;background:#22c55e;border-radius:50%;
  box-shadow:0 0 0 2px #052e13;
}
[data-theme="dark"] .topbar{background:#0e0d0a;color:#f4ecd8}

/* === Nav (with BrandMark + CTA) === */
nav.main{
  position:sticky;top:0;z-index:30;
  background:var(--paper);
  border-bottom:var(--b-thick);
  padding:14px 32px;display:flex;align-items:center;justify-content:space-between;
}
nav.main .brand{
  display:flex;align-items:center;gap:12px;font-weight:700;font-size:18px;letter-spacing:-.01em;
  text-decoration:none;color:var(--ink);
}
nav.main .brand .mark{
  width:40px;height:40px;
  border:var(--b);
  box-shadow:3px 3px 0 0 var(--accent);
  display:block;flex-shrink:0;
}
nav.main .brand .mark svg{display:block;width:100%;height:100%}
@keyframes brand-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
nav.main .brand .mark .cur{animation:brand-blink 1s steps(1) infinite}
nav.main ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
nav.main a{
  color:var(--ink);text-decoration:none;padding:8px 14px;font-weight:500;
  border:var(--bw) solid transparent;border-radius:0;
}
nav.main a:hover{background:var(--accent-2);border:var(--b)}
nav.main .cta{
  background:var(--ink);color:var(--paper);padding:10px 18px;font-weight:600;
  border:var(--b);box-shadow:4px 4px 0 0 var(--accent);
  text-decoration:none;
}
nav.main .cta:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 0 var(--accent)}
[data-theme="dark"] nav.main a:hover{color:#0e0d0a}
[data-theme="dark"] .brand .mark{border-color:#f4ecd8;box-shadow:3px 3px 0 0 var(--accent)}
[data-theme="dark"] .brand .mark .bar{fill:#f4ecd8}
[data-theme="dark"] .brand .mark .p{fill:#f4ecd8}
[data-theme="dark"] .cta{background:#0e0d0a;color:#f4ecd8;border-color:#f4ecd8}

/* === Chip === */
.chip{
  font-family:var(--ff-mono);font-size:12px;
  border:var(--b);padding:6px 12px;background:var(--paper);
  display:inline-flex;align-items:center;gap:6px;
}
.chip.b{background:var(--accent);color:#fff;border-color:var(--ink)}
.chip.y{background:var(--accent-2)}
.chip.o{background:var(--accent-3);color:#fff}
[data-theme="dark"] .chip.y{color:#0e0d0a}

/* === Footer === */
footer{
  padding:24px 32px;background:var(--paper);
  font-family:var(--ff-mono);font-size:12px;color:var(--muted);
  display:flex;justify-content:space-between;align-items:center;
  border-top:var(--b);
}

/* === TopBar variants — breadcrumbs (legal pages) === */
.topbar .crumbs{display:flex;gap:10px;color:rgba(255,255,255,.7)}
.topbar .crumbs a{color:inherit;text-decoration:none}
.topbar .crumbs a:hover{color:var(--accent-2)}
.topbar .crumbs .here{color:var(--accent-2)}

/* === Nav extras — right cluster + back link === */
nav.main .right{display:flex;gap:10px;align-items:center}
nav.main .back{
  font-family:var(--ff-mono);font-size:13px;color:var(--ink);text-decoration:none;
  padding:8px 14px;border:var(--b);background:var(--paper);
}
nav.main .back:hover{background:var(--accent-2)}

/* === Anchored-brand suppression =========================================
 * When a page renders `.brand` as <a> (legal pages do this so the mark
 * is clickable), the bare `nav.main a` and `nav.main a:hover` rules
 * above would otherwise paint the brand cell with the navigation
 * yellow hover and add 8px 14px padding. Higher-specificity
 * `nav.main a.brand` wins; the rule is inert when `.brand` is a <div>.
 * ========================================================================= */
nav.main a.brand{padding:0}
nav.main a.brand:hover{background:transparent;border:var(--bw) solid transparent;color:var(--ink)}

/* === BadgeFloat === */
.badge-float{
  position:absolute;font-family:var(--ff-mono);font-size:11px;
  background:var(--accent-3);color:#fff;border:var(--b);padding:6px 10px;
  box-shadow:3px 3px 0 0 var(--ink);transform:rotate(-3deg);
  pointer-events:none;
}
[data-theme="dark"] .badge-float{color:#fff}

/* === Theme-toggle dark hooks =============================================
 * Inline styles on .tt-disc / .tt-cut (in partials/theme-toggle.njk) paint
 * the light-mode "moon crescent". Dark mode collapses the crescent into a
 * solid accent disc. CSS — not JS — drives this so the button matches
 * `data-theme` on first paint (set by the inline init in base.njk), with
 * no FOUC. `!important` is required to beat the partial's inline style.
 * ========================================================================= */
[data-theme="dark"] .tt-disc{background:var(--accent) !important}
[data-theme="dark"] .tt-cut{display:none !important}