/* =========================================
   AFTERGLOWS — UNIFIED SETTINGS (THEME + FONT)
   Generated by StarlightDaemon Project

   ONE canonical stylesheet, linked by root-absolute path
   (/assets/css/afterglows-settings.css) from every subsite:
   root, concepts gallery, matrix_code, retro.

   It provides three things:
     1. The 8 canonical phosphor palettes as generic tokens
        (--ag-color/-dim/-head/-glow/-bg + --ag-color-rgb),
        keyed off html[data-phosphor]. This mirrors the palette
        already shipped in matrix_tools.css / crt_tools.css so a
        downstream consumer of those portable libraries sees the
        exact same colors.
     2. The 4 canonical UI fonts as --ag-font, keyed off
        html[data-font].
     3. The shared gear-button + settings panel component
        (.ag-settings…), injected on every page by
        /assets/js/afterglows-settings.js.

   Storage contract (single source of truth):
     localStorage 'afterglows-phosphor'  -> html[data-phosphor]  (p1 omits the attribute)
     localStorage 'afterglows-font'      -> html[data-font]
   No build step, no framework.
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600&family=IBM+Plex+Mono:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=VT323&display=swap');

/* -----------------------------------------
   1. PHOSPHOR PALETTE TOKENS
   Default (:root) is P1 green; each non-default theme overrides.
   p1 intentionally has no [data-phosphor] attribute (the shim
   removes it), so the :root defaults ARE the p1 palette.
   ----------------------------------------- */
:root {
    --ag-color: #00ff41;
    --ag-color-rgb: 0, 255, 65;
    --ag-dim: #00992a;
    --ag-head: #d9ffd9;
    --ag-glow: #00ff41;
    --ag-bg: #030804;
}

html[data-phosphor="p1"] {
    --ag-color: #00ff41;  --ag-color-rgb: 0, 255, 65;
    --ag-dim: #00992a;    --ag-head: #d9ffd9;  --ag-glow: #00ff41;  --ag-bg: #030804;
}
html[data-phosphor="p31"] {
    --ag-color: #7be8a4;  --ag-color-rgb: 123, 232, 164;
    --ag-dim: #3d8a5f;    --ag-head: #eafff3;  --ag-glow: #7be8a4;  --ag-bg: #040b07;
}
html[data-phosphor="p3"] {
    --ag-color: #ffb000;  --ag-color-rgb: 255, 176, 0;
    --ag-dim: #9a6a00;    --ag-head: #ffe9c4;  --ag-glow: #ffb000;  --ag-bg: #0c0602;
}
html[data-phosphor="p4"] {
    --ag-color: #f2f7ff;  --ag-color-rgb: 242, 247, 255;
    --ag-dim: #77828f;    --ag-head: #ffffff;  --ag-glow: #dce9f7;  --ag-bg: #05070a;
}
html[data-phosphor="p7"] {
    --ag-color: #a9d7ff;  --ag-color-rgb: 169, 215, 255;
    --ag-dim: #4f7ba3;    --ag-head: #f0f8ff;  --ag-glow: #a9d7ff;  --ag-bg: #030711;
}
html[data-phosphor="p2"] {
    --ag-color: #00ffa2;  --ag-color-rgb: 0, 255, 162;
    --ag-dim: #00905c;    --ag-head: #d6fff0;  --ag-glow: #00ffa2;  --ag-bg: #030f0a;
}
html[data-phosphor="p14"] {
    --ag-color: #a37bff;  --ag-color-rgb: 163, 123, 255;
    --ag-dim: #5c449c;    --ag-head: #ece3ff;  --ag-glow: #a37bff;  --ag-bg: #08040f;
}
html[data-phosphor="neon"] {
    --ag-color: #00c8ff;  --ag-color-rgb: 0, 200, 255;
    --ag-dim: #00719c;    --ag-head: #d8f6ff;  --ag-glow: #00c8ff;  --ag-bg: #020a10;
}

/* -----------------------------------------
   2. FONT TOKENS
   Default (:root) is IBM Plex Mono; each choice overrides --ag-font.
   ----------------------------------------- */
:root { --ag-font: 'IBM Plex Mono', monospace; }
html[data-font="ibm"]       { --ag-font: 'IBM Plex Mono', monospace; }
html[data-font="vt323"]     { --ag-font: 'VT323', monospace; }
html[data-font="space"]     { --ag-font: 'Space Mono', monospace; }
html[data-font="fira"]      { --ag-font: 'Fira Code', monospace; }
html[data-font="jetbrains"] { --ag-font: 'JetBrains Mono', monospace; }

/* -----------------------------------------
   3. SHARED GEAR + PANEL COMPONENT
   Injected into every page by afterglows-settings.js. Fixed to the
   bottom-right corner, opens upward. Self-contained, namespaced
   (.ag-*) so it never collides with a page's own styles. The control
   colors itself from the active phosphor tokens and honours the
   active font.
   ----------------------------------------- */
.ag-settings {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 2147483000; /* above every subsite's own stacking contexts */
    font-family: var(--ag-font);
    line-height: 1.4;
}

.ag-gear {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ag-bg) 88%, black);
    border: 2px solid var(--ag-color);
    color: var(--ag-color);
    font-size: 24px;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease;
    font-family: var(--ag-font);
}

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

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

.ag-panel {
    position: absolute;
    bottom: 60px;
    right: 0;
    width: 232px;
    max-height: 78vh;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem;
    background: color-mix(in srgb, var(--ag-bg) 92%, black);
    border: 1px solid var(--ag-color);
    box-shadow: 0 0 22px rgba(0, 0, 0, 0.6);
}

.ag-panel.ag-open {
    display: flex;
}

.ag-group-label {
    margin: 0 0 0.6rem;
    color: var(--ag-color);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-family: var(--ag-font);
}

/* Color swatch grid (8 phosphor themes) */
.ag-swatches {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.ag-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 7px 2px 6px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--ag-dim) 60%, transparent);
    cursor: pointer;
    font-family: var(--ag-font);
    transition: border-color 150ms ease, background 150ms ease;
}

.ag-swatch:hover { border-color: var(--ag-color); }
.ag-swatch:focus-visible { outline: 2px solid var(--ag-head); outline-offset: 2px; }

.ag-swatch.ag-active {
    border-color: var(--ag-color);
    background: color-mix(in srgb, var(--ag-color) 12%, transparent);
}

.ag-swatch .ag-chip {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--ag-swatch-color);
    box-shadow: 0 0 7px color-mix(in srgb, var(--ag-swatch-color) 80%, transparent);
}

.ag-swatch .ag-chip-label {
    font-size: 8px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--ag-dim);
}

.ag-swatch.ag-active .ag-chip-label { color: var(--ag-color); }

/* Font buttons (4 fonts) */
.ag-fonts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.ag-font-btn {
    padding: 8px 10px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--ag-dim) 60%, transparent);
    color: color-mix(in srgb, var(--ag-color) 82%, var(--ag-bg));
    cursor: pointer;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.ag-font-btn:hover { border-color: var(--ag-color); color: var(--ag-color); }
.ag-font-btn:focus-visible { outline: 2px solid var(--ag-head); outline-offset: 2px; }

.ag-font-btn.ag-active {
    background: var(--ag-color);
    border-color: var(--ag-color);
    color: var(--ag-bg);
}

/* Each font button previews its own typeface. */
.ag-font-btn[data-font="ibm"]       { font-family: 'IBM Plex Mono', monospace; }
.ag-font-btn[data-font="vt323"]     { font-family: 'VT323', monospace; font-size: 1.05rem; }
.ag-font-btn[data-font="space"]     { font-family: 'Space Mono', monospace; }
.ag-font-btn[data-font="fira"]      { font-family: 'Fira Code', monospace; }

@media (prefers-reduced-motion: reduce) {
    .ag-gear, .ag-swatch, .ag-font-btn { transition: none !important; }
}