/* 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;
}

/* ── Spinner motion (overrides the pack) ─────────────────────────────────────
   The pack's own cycle has two faults, both measured in a browser, and both are
   corrected here rather than in the pack file, which stays byte-identical to the
   handoff (§0.12):

     1. ORDER. Its negative delays play the glyphs backwards — wave, candle,
        calavera, marigold, compass rose, ship's wheel — against §10.1's wave →
        ship's wheel → compass rose → marigold → calavera → candle. The delays
        below re-map them so glyph k shows from (k − 1) × 0.9 s.
     2. DEFINITION. Its transition shrinks and rotates the outgoing glyph while
        the next fades in, so for about a third of every glyph's time two
        half-transparent, resampled drawings sit on top of each other. That is
        what read as a grainy mark. `vm-handoff` is opacity only: 150 ms in,
        600 ms held, 150 ms out, and the next glyph starts only once the last is
        gone. The pace (0.9 s a glyph, 5.4 s a cycle) is unchanged.

   Two cascade facts make these rules heavier than they look like they need to be:
     * Dash loads assets/brand/spinner/verdemar-spinner.css AFTER this file, so
       at equal specificity the pack wins. Every rule here is one class more
       specific than the pack rule it replaces.
     * The keyframes have a new NAME. A second `@keyframes vm-spin` would not
       merge with the pack's: the last one defined wins outright, and that is
       the pack's.

   The resting state is the wave alone, so a mark whose animation never applies
   still shows one clean glyph rather than six stacked ones. The reduced-motion
   freeze is restated because these rules outrank the pack's. Rotation and scale
   are gone, which §0.9 asked for anyway. tests/test_brand_spinner.py simulates
   the cycle from this text and fails on the wrong order or on two glyphs at
   once. */
.vm-spinner > .vm-spinner__frame {
    opacity: 0;
    transform: none;
    animation: vm-handoff 5.4s ease-in-out infinite;
}

.vm-spinner > .vm-spinner__frame:first-child { opacity: 1; }

.vm-spinner > .vm-spinner__frame:nth-child(1) { animation-delay: 0s; }
.vm-spinner > .vm-spinner__frame:nth-child(2) { animation-delay: -4.5s; }
.vm-spinner > .vm-spinner__frame:nth-child(3) { animation-delay: -3.6s; }
.vm-spinner > .vm-spinner__frame:nth-child(4) { animation-delay: -2.7s; }
.vm-spinner > .vm-spinner__frame:nth-child(5) { animation-delay: -1.8s; }
.vm-spinner > .vm-spinner__frame:nth-child(6) { animation-delay: -0.9s; }

@keyframes vm-handoff {
    0%      { opacity: 0; }
    2.778%  { opacity: 1; }
    13.889% { opacity: 1; }
    16.667% { opacity: 0; }
    100%    { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .vm-spinner > .vm-spinner__frame { animation: none; }
}

/* §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;
}