/* ── branding.css — club branding editor preview (js/branding.js) ──────────
   Scales down the real <nav> markup/CSS (css/shared.css) into a small
   mock-up rather than hand-approximating nav styling here — see
   js/branding.js's _brandingFieldsHtml() for the markup this wraps. Also
   inlined (duplicated) in login/index.html's own <style> block, since that
   page keeps all of its styling self-contained rather than loading this
   file — keep both copies in sync if these rules ever change. */

.branding-preview-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.branding-preview-wrap {
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  height: 48px; /* scaled nav height only (56px * 0.85) — the accent strip is
                   layered inside the nav's own bottom edge, not stacked after
                   it, so it no longer adds to this total. */
}

.branding-preview-scale {
  transform: scale(0.85);
  transform-origin: top left;
  width: 117.6%; /* 100 / 0.85 — keeps the scaled nav spanning the wrap's full width */
}

/* Mirrors css/shared.css's #nav-accent-strip: positioned absolute against the
   preview nav's own bottom edge (nav has position:relative from shared.css),
   painting flush over the last 3px of the nav's own background with zero gap
   — rather than the flowed-sibling-box approach this used previously, which
   left a sliver of nav background showing beneath the strip. */
#branding-preview-accent-strip { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }