/* =========================================
   AFTERGLOWS — UNIFIED HEADER + BACK NAVIGATION
   Generated by StarlightDaemon Project

   ONE canonical stylesheet, linked by root-absolute path
   (/assets/css/afterglows-header.css) from every page: root,
   concepts gallery, matrix_code hub + demos, retro. Its companion
   /assets/js/afterglows-header.js injects the markup, so no page
   carries its own header/back markup — the chrome is guaranteed
   identical everywhere. This mirrors the theme/font system
   (afterglows-settings.css / .js).

   It provides two floating, always-visible controls:
     1. .ag-header  — text-only Afterglows wordmark, fixed top-left.
                      No logo image (retired). Purely branding.
     2. .ag-back    — a fixed-position WRAPPER holding a static
                      .ag-back-link control, fixed bottom-left. This is
                      the exact structure the settings gear uses
                      (.ag-settings fixed + .ag-gear static), so the two
                      controls float and stay put identically. The gear
                      lives bottom-right; back lives bottom-left; the
                      wordmark lives top-left — the three never overlap.

   Colors ride the active phosphor tokens (--ag-color etc.) exported by
   afterglows-settings.css. On the bare demo pages that don't load that
   stylesheet, the fallbacks resolve to the page's own --matrix-* /
   --crt-* tokens so the chrome still themes correctly.
   ========================================= */

/* Shared color/typography fallbacks: prefer the site tokens, fall back
   to a subsite's local library tokens, then to a literal green. */
.ag-header,
.ag-back {
    --agh-color: var(--ag-color, var(--matrix-color, var(--crt-green, #00ff41)));
    --agh-dim:   var(--ag-dim,   var(--matrix-dim,   var(--crt-dim,   #00992a)));
    --agh-head:  var(--ag-head,  var(--matrix-head,  var(--crt-head,  #d9ffd9)));
    --agh-bg:    var(--ag-bg,    var(--matrix-bg,    var(--crt-bg,    #030804)));
    --agh-font:  var(--ag-font, 'IBM Plex Mono', 'Courier New', monospace);
}

/* -----------------------------------------
   1. WORDMARK — fixed top-left
   ----------------------------------------- */
.ag-header {
    position: fixed;
    top: 1rem;
    left: 1.25rem;
    z-index: 2147482000; /* just below the settings gear (2147483000) */
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-family: var(--agh-font);
    pointer-events: none; /* only the wordmark link itself is clickable */
    user-select: none;
}

.ag-header .ag-brand {
    pointer-events: auto;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--agh-color);
    text-shadow: 0 0 10px color-mix(in srgb, var(--agh-color) 55%, transparent);
    transition: text-shadow 150ms ease;
}

.ag-header .ag-brand:hover {
    text-shadow: 0 0 16px color-mix(in srgb, var(--agh-color) 80%, transparent);
}

.ag-header .ag-brand:focus-visible {
    outline: 2px solid var(--agh-head);
    outline-offset: 3px;
}

.ag-header .ag-tagline {
    font-size: 0.56rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--agh-dim);
}

/* -----------------------------------------
   2. BACK CONTROL — fixed WRAPPER, static link inside
   Structure and sizing intentionally match .ag-settings/.ag-gear.
   ----------------------------------------- */
.ag-back {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 2147483000; /* same layer as the settings gear */
    font-family: var(--agh-font);
}

.ag-back-link {
    position: static; /* the WRAPPER floats; the control does not */
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    height: 48px;
    padding: 0 16px;
    background: color-mix(in srgb, var(--agh-bg) 88%, black);
    border: 2px solid var(--agh-color);
    color: var(--agh-color);
    font-family: var(--agh-font);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.ag-back-link .ag-back-arrow {
    font-size: 0.9rem;
    line-height: 1;
}

.ag-back-link:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--agh-color);
}

.ag-back-link:focus-visible {
    outline: 2px solid var(--agh-head);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .ag-brand, .ag-back-link { transition: none !important; }
}