/* destination-identity.css - the ONE product destination identity lockup.
   PRODUCT-DESTINATION-IDENTITY-1.

   What this owns
     The shared visual grammar that carries the seven founder-approved final
     destination marks (icons.py DESTINATION_GLYPHS) from the archive spine into
     the signed-in destination page mastheads:

         [ destination mark ]  PRODUCT WORDMARK  optional neutral context

     One accent map, one size scale, one set of tablet/phone steps. A destination
     page and the spine beside it must read as the same product system.

   What this does NOT own
     The mark's geometry (icons.py), its paths, or any page's layout. The lockup
     is span-level and the caller keeps its own H1, deck and page object.

   Accent fallbacks
     The canonical tokens live in foundation.css; the fallback hexes below are
     the same values, so an engine-rendered artefact that carries no foundation
     stylesheet still shows the correct product colour. Do not introduce a new
     accent anywhere except the token (and its pinned fallback here).

   Deliberate restraint (brief section 3)
     No container, ring, border, glow, shadow or gradient on the mark. The bare
     mark IS the identity; page-level atmosphere stays with the page. */

.mx-dl {
    --mx-dl-accent: var(--mx-canon, #95d6e8);
    --mx-dl-glyph: 40px;
    --mx-dl-word-size: 20px;
    --mx-dl-gap: 14px;
    --mx-dl-context-size: 15px;
    --mx-dl-context-ink: var(--mx-shell-ink-3, rgba(244,245,247,0.58));
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    /* Column gap is the lockup gap; the row gap only exists when a wide context
       wraps below the wordmark on phone. */
    gap: 4px var(--mx-dl-gap);
    min-width: 0;
    max-width: 100%;
}

/* The mark: exactly as authored. Square box, currentColor from the accent. */
.mx-dl-glyph {
    width: var(--mx-dl-glyph);
    height: var(--mx-dl-glyph);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mx-dl-accent);
}

.mx-dl-glyph svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* The product wordmark: full destination accent, never a white word with one
   accented letter (brief section 2). */
.mx-dl-word {
    color: var(--mx-dl-accent);
    font-size: var(--mx-dl-word-size);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    min-width: 0;
}

.mx-dl-word a {
    color: inherit;
    text-decoration: none;
}

.mx-dl-word a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .mx-dl-word a:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* Supporting context stays subordinate and neutral. */
.mx-dl-context {
    color: var(--mx-dl-context-ink);
    font-size: var(--mx-dl-context-size);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
    min-width: 0;
}

/* ── Canonical accent map. Mirrors destination_identity.DESTINATION_ACCENT_TOKENS
      and is pinned by tests/test_product_destination_identity_1.py. ─────────── */
.mx-dl--canon    { --mx-dl-accent: var(--mx-canon, #95d6e8); }
.mx-dl--annual   { --mx-dl-accent: var(--mx-annual, #8d98ff); }
.mx-dl--rotation { --mx-dl-accent: var(--mx-rotation, #7ee5b1); }
.mx-dl--phase    { --mx-dl-accent: var(--mx-phase, #ff8a4c); }
.mx-dl--live     { --mx-dl-accent: var(--mx-live, #ff85a6); }
.mx-dl--ledger   { --mx-dl-accent: var(--mx-ledger, #ffe14d); }
.mx-dl--atlas    { --mx-dl-accent: var(--mx-observatory, #34d2c4); }
.mx-dl--youtube  { --mx-dl-accent: var(--mx-youtube, #cdd2d6); }

/* ── Host-size lockup: the page's own display title IS the wordmark (LIVE's H1,
      LEDGER's opened H1). Everything scales from the host font-size, so an
      established page object keeps its dominance instead of being replaced by a
      fixed row (brief section 4: hierarchy, not homogenisation). ───────────── */
.mx-dl--hero {
    --mx-dl-glyph: 0.62em;
    --mx-dl-gap: 0.18em;
}

.mx-dl--hero .mx-dl-word {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

/* ── Responsive scale. Visual targets, not a grid fight: the tablet step lands
      at 1024 (where the archive spine's own capability boundary sits) and the
      phone step at 430. ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .mx-dl {
        --mx-dl-glyph: 36px;
        --mx-dl-word-size: 18px;
        --mx-dl-context-size: 14px;
    }

    .mx-dl--hero {
        --mx-dl-glyph: 0.62em;
    }
}

@media (max-width: 430px) {
    .mx-dl {
        --mx-dl-glyph: 32px;
        --mx-dl-word-size: 17px;
        --mx-dl-gap: 10px;
        --mx-dl-context-size: 14px;
    }

    .mx-dl--hero {
        --mx-dl-glyph: 0.58em;
        --mx-dl-gap: 0.14em;
    }

    /* Phone: a wide context wraps below the wordmark instead of being crushed. */
    .mx-dl > .mx-dl-context {
        flex: 1 1 100%;
        margin-left: calc(var(--mx-dl-glyph) + var(--mx-dl-gap));
    }
}

@media (prefers-reduced-motion: reduce) {
    .mx-dl * {
        animation: none !important;
        transition: none !important;
    }
}