/* Verdemar brand marks — see docs/design_system.md §0 and components/brand.py.
   Dash auto-loads every stylesheet under assets/ recursively, so this file needs
   no registration.

   Only the WORDMARK is styled here. The glyph is an <img> pointing at the
   shipped SVG (assets/brand/logo/svg/glyph-*.svg) and carries its own colour —
   nothing in CSS may restyle it (§0.9: never recolour the block or line outside
   the approved palette, never add effects).

   Colours resolve through var(--vm-*), generated from utils_design_tokens.py
   and injected into :root by app.py. (Phase 1 shipped a literal here because
   that :root block did not exist yet; Phase 2 added it and the literal is now
   gone, as promised.) */

/* ── Wordmark ────────────────────────────────────────────────────────────────
   `verdemar`, all lowercase, Space Grotesk 600, tight tracking, with the
   leading `v` in the teal high-water accent. Live DOM text rather than the
   shipped wordmark SVG: browsers block web fonts inside referenced SVGs, so an
   <img> of that file renders in a system fallback and still looks plausible
   (§0.12's silent-failure trap). As text it is accessible, selectable, crisp at
   any zoom, and correct because the page loads Space Grotesk itself. */
.vm-wordmark {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    /* The wordmark is a mark, not prose — never let a parent's text-transform
       or font-variant reach it. §0.1: the logo is ALWAYS lowercase. */
    text-transform: none;
    font-variant: normal;
    font-feature-settings: normal;
}

/* The teal leading `v` — the tie between the wordmark and the glyph's teal
   block. Do not give it back to navy (§0.9). Fixed in both modes (§0.8). */
.vm-wordmark__v {
    color: var(--vm-brand-teal);
}

/* ── Lockups ─────────────────────────────────────────────────────────────────
   Clear space (§0.6): at least the height of the teal block on every side.
   The block is 19 units of the glyph's 96-unit grid (0.198×), and the glyph is
   rendered at 1.4× the wordmark font-size, so the block is ~0.28em. Expressed
   in em so the zone scales with the mark instead of drifting. */
.vm-lockup {
    display: inline-flex;
    padding: 0.28em;
}

/* Lockup A — horizontal (default). Glyph left, wordmark right, vertically
   centred. Gap = the wordmark's x-height, which `ex` gives us directly, so it
   tracks the font rather than needing a magic pixel value. */
.vm-lockup--horizontal {
    flex-direction: row;
    align-items: center;
    gap: 1ex;
}

/* Lockup B — stacked. Glyph centred above the wordmark, gap = x-height × 1.5. */
.vm-lockup--stacked {
    flex-direction: column;
    align-items: center;
    gap: 1.5ex;
}

/* ── Spinner embedding ───────────────────────────────────────────────────────
   The shipped verdemar-spinner.css sizes its frames with `.vm-spinner__frame
   svg`, which assumes the SVG is inlined into the DOM. We embed the frames as
   <img> instead — Dash exposes no SVG tag set, and the frames are pure geometry
   so a referenced file is safe (unlike the wordmark; §0.12). This adds the
   equivalent rule for that embedding rather than editing the pack file, which
   stays byte-identical to the handoff. */
.vm-spinner__frame img {
    width: 100%;
    height: 100%;
    display: block;
}

/* §0.9: no effects on the mark, ever — no shadow, gradient, glow, bevel,
   outline or texture; no stretch, skew or rotation. Stated as a rule the
   cascade enforces, because a parent's hover or transition can otherwise reach
   in and add one without anyone editing this file. */
.vm-lockup,
.vm-lockup:hover,
.vm-glyph,
.vm-glyph:hover,
.vm-wordmark,
.vm-wordmark:hover {
    text-shadow: none;
    box-shadow: none;
    filter: none;
    transform: none;
}