/* ═══════════════════════════════════════════════════════════════════════════
   BRAND LOCKUP  (`.nb-brand`)  —  the mark + wordmark, everywhere
   ═══════════════════════════════════════════════════════════════════════════

   Top-left on the dashboard and top-left on the landing page are the same
   thing and now say so. Before 2026-08-16 there were FOUR of them and they
   disagreed on both halves:

     · `.lp-brand`        landing nav   — mark + plain "NeoBot"
     · `.sidebar-wordmark` dashboard    — no mark, "Neo" + a purple "Bot"
     · `.nav-brand`        dashboard    — no mark, "Neo" + GRADIENT "Bot"
     · `.nav-brand-mark`   dashboard    — a DIFFERENT mark + gradient "Bot"

   ── The two decisions ──────────────────────────────────────────────────────

   THE MARK IS `neobot-mark-*.png`, not `neobot-avatar-*.png`. Both are
   generated from the same master, but the avatar is the mark composited into a
   filled circle for Discord to crop — it carries a dark disc that reads as a
   button next to a wordmark. The bare mark is the one drawn for a lockup.
   (See CLAUDE.md's brand-assets section for why the two exist at all.)

   THE WORDMARK IS PLAIN. Gradient text is a standing no across this product,
   and the mark already carries the colour — a gradient "Bot" beside it made
   two things compete to be the brand. The hero's "stay for." is the one
   deliberate exception in the type, and it is a headline, not a logo.

   ── Sizing ─────────────────────────────────────────────────────────────────

   One knob, `--nb-brand-h`: the mark's height in px. The wordmark tracks it,
   so a caller sets one number and the lockup stays in proportion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ `[hidden]` is (0,0,1) and loses to the `display` below, so the attribute
   would do nothing on its own. The dashboard toggles both of its lockups with
   it — see the note in dashboard.js — so this rule is what makes that work. */
.nb-brand[hidden] { display: none !important; }

.nb-brand {
    --nb-brand-h: 22px;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--nb-brand-h) * 0.45);
    text-decoration: none;
    white-space: nowrap;
    /* The lockup is one target; nothing inside it is separately clickable. */
    color: #f2f3f5;
}

.nb-brand-mark {
    height: var(--nb-brand-h);
    width: auto;
    display: block;
    flex: none;
}

.nb-brand-word {
    font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: calc(var(--nb-brand-h) * 0.77);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.035em;
    color: #f2f3f5;
}

/* A brand that is a link should say so on hover, quietly — it is chrome, not
   an action, so it lifts its ink rather than growing a background. */
a.nb-brand { transition: opacity 0.16s cubic-bezier(0.4, 0, 0.2, 1); }
a.nb-brand:hover { opacity: 0.82; color: #f2f3f5; }
a.nb-brand:hover .nb-brand-word { color: #f2f3f5; }

/* ---- Mounts -------------------------------------------------------------
   The size is a property of the SLOT, so it is set where the lockup is used
   rather than baked into a variant class nobody can find later. */

/* Dashboard sidebar — the 50px brand row. */
.sidebar-brand .nb-brand { --nb-brand-h: 21px; }

/* Dashboard topbar — the phone fallback, which is tighter. */
.navbar .nb-brand { --nb-brand-h: 20px; }

/* Landing nav, and the landing footer's smaller repeat. */
.lp-nav .nb-brand { --nb-brand-h: 22px; }
.lp-foot .nb-brand { --nb-brand-h: 18px; }
.lp-foot .nb-brand-mark { opacity: 0.9; }
.lp-foot .nb-brand-word { color: #c8cbd1; }

/* The shared `.site-footer` on about / cookies / feedback / privacy / terms
   and the dashboard. This was a FIFTH lockup until 2026-08-18 — a 2rem/900
   "Neo" + a gradient "Bot", which is the treatment this file exists to retire,
   and which is why the legal pages read as a different product name than the
   landing page. The `.footer-brand` div keeps owning the centring and the
   1.5rem gap beneath; only the size is set here.

   Its inherited `font-size: 2rem` is zeroed because the div now contains
   nothing but the inline-flex anchor — the wordmark sizes itself off
   `--nb-brand-h`, so the 2rem only survived as an empty 32px line box. */
.site-footer .footer-brand { font-size: 0; line-height: 0; }
.site-footer .nb-brand { --nb-brand-h: 26px; }