/* ===========================
   Base variables & utilities
   =========================== */

:root {
    --transition: 240ms ease;
    /* Radii & shadows */
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 6px 18px rgba(0,0,0,.12);
    --shadow-lg: 0 18px 40px rgba(0,0,0,.18);
    /* Focus ring (computed from --accent per theme) */
    --ring: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent);
    /* Default (overridden by themes) */
    --app-bg: #0a0a0a;
    --paper: #0b0b0b;
    --panel: #0e0e0e;
    --text: #e5e7eb;
    --heading: #ffffff;
    --muted: #a1a1aa;
    --hairline: #262626;
    --accent: #ffffff;
    --header-bg: rgba(12,12,12,0.82);
    --pill-active-bg: #ffffff;
    --pill-active-fg: #000000;
    --pill-active-border: #ffffff;
    --pill-border: #3f3f46;
    --pill-hover: rgba(255,255,255,0.06);
    --rule-color: rgba(255,255,255,.35);
    --heroA: rgba(0,0,0,0.55);
    --heroB: rgba(0,0,0,0.20);
    /* Timeline helpers (overridden by themes) */
    --timeline-line: #777;
    --timeline-dot: #aaa;
}

html {
    background-color: var(--app-bg);
}

body {
    background-color: var(--app-bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body, [data-theme] {
    transition: background-color var(--transition), color var(--transition);
}

/* Text treatments */
.sc {
    font-variant-caps: small-caps;
    letter-spacing: .18em;
}

.caption {
    font-size: .72rem;
    letter-spacing: .02em;
    color: color-mix(in oklab,var(--text) 80%, transparent);
}

.rule {
    height: 1px;
    background: linear-gradient(90deg,transparent,var(--rule-color),transparent);
}

.hero-vignette {
    background: linear-gradient(to top,var(--heroA),var(--heroB),transparent);
}

/* Links */
a {
    color: var(--heading);
    text-decoration-color: var(--accent);
}

    a:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

/* Hide default details marker */
details > summary {
    list-style: none;
    cursor: pointer;
}

    details > summary::-webkit-details-marker {
        display: none;
    }

/* Cards & panels */
.card {
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.panel {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: var(--radius-sm);
    padding: .55rem .9rem;
    border: 1px solid var(--hairline);
    background: var(--panel);
    color: var(--text);
    text-decoration: none;
    transition: transform .06s ease, box-shadow .12s ease, background-color var(--transition), color var(--transition);
}

    .btn:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

    .btn:focus-visible {
        outline: none;
        box-shadow: var(--ring);
    }

.btn-primary {
    background: color-mix(in oklab, var(--accent) 16%, var(--panel));
    border-color: color-mix(in oklab, var(--accent) 60%, var(--hairline));
}

    .btn-primary:hover {
        background: color-mix(in oklab, var(--accent) 26%, var(--panel));
    }

/* Pills */
.pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--pill-border);
    background: transparent;
    color: var(--muted);
}

    .pill:hover {
        background: var(--pill-hover);
    }

.pill-active {
    background: var(--pill-active-bg);
    color: var(--pill-active-fg);
    border-color: var(--pill-active-border);
}

/* Chips (year / tag) */
.chip {
    display: inline-block;
    padding: .25rem .6rem;
    border-radius: .6rem;
    border: 1px solid var(--hairline);
    background: var(--paper);
    color: var(--heading);
    font-weight: 600;
    letter-spacing: .01em;
}

/* Year chip base */
.year-chip {
    display: inline-block;
    padding: .25rem .5rem;
    border-radius: .5rem;
    font-weight: 600;
    letter-spacing: .01em;
    border: 1px solid var(--hairline);
    background: #fff;
    color: var(--heading);
}

/* Image frame */
.img-frame {
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--hairline);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}

/* Skeleton loader */
.skeleton {
    position: relative;
    overflow: hidden;
    background: color-mix(in oklab, var(--panel) 75%, var(--paper));
}

    .skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
        transform: translateX(-100%);
        animation: sk 1.4s infinite;
    }

@keyframes sk {
    to {
        transform: translateX(100%);
    }
}

/* Tables */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper);
}

    .table thead th {
        text-align: left;
        font-weight: 600;
        padding: .7rem .8rem;
        background: color-mix(in oklab, var(--panel) 70%, var(--paper));
        border-bottom: 1px solid var(--hairline);
        color: var(--heading);
    }

    .table tbody td {
        padding: .65rem .8rem;
        border-bottom: 1px solid var(--hairline);
    }

    .table tbody tr:nth-child(odd) td {
        background: color-mix(in oklab, var(--panel) 10%, transparent);
    }

/* Focus styles for form controls */
input, select, textarea {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    padding: .55rem .65rem;
}

    input:focus-visible, select:focus-visible, textarea:focus-visible {
        outline: none;
        box-shadow: var(--ring);
    }

/* Timeline helpers */
.tl-line {
    position: relative;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--timeline-line));
    animation: tl-line-reveal 900ms ease-out both;
}

@keyframes tl-line-reveal {
    from {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: top;
    }

    to {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: top;
    }
}

.tl-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--timeline-dot);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--timeline-dot) 22%, transparent);
    animation: tl-dot-drop 650ms 140ms cubic-bezier(.2,.7,.2,1.1) both;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html, body, [data-theme] {
        transition: none;
    }

    .tl-line, .tl-dot, .skeleton::after {
        animation: none !important;
    }
}

/* ===========================
   Themes
   =========================== */

/* ===== Black & White (improved contrast) ===== */
:root[data-theme='bw'] {
    --app-bg: #0a0a0a;
    --paper: #0b0b0b;
    --panel: #101010;
    --text: #e7e7e7;
    --heading: #ffffff;
    --muted: #b0b0b0;
    --hairline: #1f1f1f;
    --accent: #cfcfcf;
    --header-bg: rgba(14,14,14,0.86);
    --pill-active-bg: #ffffff;
    --pill-active-fg: #000000; /* black text */
    --pill-active-border: #ffffff;
    --pill-border: #2d2d2d;
    --pill-hover: rgba(255,255,255,0.05);
    --rule-color: rgba(255,255,255,.28);
    --heroA: rgba(0,0,0,0.55);
    --heroB: rgba(0,0,0,0.20);
    --timeline-line: #7a7a7a;
    --timeline-dot: #bcbcbc;
}

/* ===== Green & Gold (refined for readability) ===== */
:root[data-theme='gold'] {
    --app-bg: #fffdf6;
    --paper: #fffdf6;
    --panel: #fffaef;
    --text: #1e2a23;
    --heading: #0d3326;
    --muted: #5a665f;
    --hairline: #eadfbf;
    --accent: #e1b400; /* focus ring & link accent */
    --header-bg: #fff9ee;
    --pill-active-bg: #fff4c2; /* pale yellow */
    --pill-active-fg: #153c2e; /* deep green */
    --pill-active-border: #e1b400;
    --pill-border: #eadfbf;
    --pill-hover: rgba(225,180,0,0.12);
    --rule-color: rgba(205,183,114,.45);
    --heroA: rgba(19,60,43,0.45);
    --heroB: rgba(19,60,43,0.15);
    --timeline-line: #9a8442;
    --timeline-dot: #e1b400;
}

/* ===== Sepia Archive (higher contrast text) ===== */
:root[data-theme='sepia'] {
    --app-bg: #f8f5e9;
    --paper: #f7f2e3;
    --panel: #f5efe0;
    --text: #2a2218;
    --heading: #17120a;
    --muted: #6b5e4a;
    --hairline: #e3d8bd;
    --accent: #9a5a2a;
    --header-bg: #f7f2e3;
    --pill-active-bg: #f1e6d5; /* light parchment */
    --pill-active-fg: #2c241a; /* dark sepia */
    --pill-active-border: #9a5a2a;
    --pill-border: #e3d8bd;
    --pill-hover: rgba(154,90,42,0.12);
    --rule-color: rgba(154,90,42,.35);
    --heroA: rgba(87,65,45,0.45);
    --heroB: rgba(87,65,45,0.15);
    --timeline-line: #b29066;
    --timeline-dot: #9a5a2a;
}

/* ===== Vivid Archive (multi-color, site-wide) ===== */
:root[data-theme='vivid'] {
    /* Surfaces & ink */
    --app-bg: #fbfaf6;
    --paper: #ffffff;
    --panel: #fff7f0;
    --text: #1b1b1b;
    --heading: #0d0d0d;
    --muted: #626262;
    /* Chrome */
    --hairline: #e6e2d8;
    --header-bg: rgba(255,255,255,0.92);
    /* Accent kept neutral; we inject color elsewhere */
    --accent: #2b2b2b;
    /* Pills */
    --pill-border: #ddd6c8;
    --pill-hover: rgba(0,0,0,0.05);
    --pill-active-bg: #111;
    --pill-active-fg: #fff;
    --pill-active-border: #111;
    /* Dividers & decorative */
    --rule-color: rgba(0,0,0,.22);
    /* Timeline */
    --timeline-line: #b7b7b7;
    --timeline-dot: #111;
    /* Optional vignette hues */
    --heroA: rgba(0,0,0,0.12);
    --heroB: rgba(0,0,0,0.04);
}

/* Vivid color tokens */
:root[data-theme='vivid'] {
    --c-red: #e53935;
    --c-orange: #fb8c00;
    --c-amber: #fdd835;
    --c-lime: #9ccc65;
    --c-green: #43a047;
    --c-teal: #26a69a;
    --c-cyan: #00acc1;
    --c-blue: #1e88e5;
    --c-indigo: #3949ab;
    --c-purple: #8e24aa;
    --c-pink: #d81b60;
    --c-brown: #8d6e63;
}

    /* Make Vivid theme feel colorful without changing markup */
    :root[data-theme='vivid'] .rule {
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--c-red), var(--c-orange), var(--c-amber), var(--c-lime), var(--c-green), var(--c-teal), var(--c-cyan), var(--c-blue), var(--c-indigo), var(--c-purple), var(--c-pink) );
    }

    :root[data-theme='vivid'] a {
        text-decoration: none;
        background-image: linear-gradient(currentColor,currentColor);
        background-size: 100% 2px;
        background-repeat: no-repeat;
        background-position: 0 100%;
    }

        :root[data-theme='vivid'] a:hover {
            background-image: linear-gradient( 90deg, var(--c-red), var(--c-orange), var(--c-amber), var(--c-green), var(--c-blue), var(--c-indigo), var(--c-purple) );
        }

    /* Vivid buttons */
    :root[data-theme='vivid'] .btn-primary {
        background: var(--c-blue);
        border-color: color-mix(in oklab, var(--c-blue) 70%, #000);
        color: #fff;
    }

        :root[data-theme='vivid'] .btn-primary:hover {
            background: color-mix(in oklab, var(--c-blue) 85%, #000);
        }

    /* Vivid: auto-accent cards (first-level tiles) */
    :root[data-theme='vivid'] .grid > * {
        --tile-accent: var(--c-blue);
        box-shadow: inset 0 0 0 1px var(--hairline), 0 0 0 0 rgba(0,0,0,0);
    }

        :root[data-theme='vivid'] .grid > *:hover {
            box-shadow: inset 0 0 0 1px var(--hairline), 0 6px 22px rgba(0,0,0,.12);
        }

        :root[data-theme='vivid'] .grid > *:nth-child(12n+1) {
            --tile-accent: var(--c-red);
        }

        :root[data-theme='vivid'] .grid > *:nth-child(12n+2) {
            --tile-accent: var(--c-orange);
        }

        :root[data-theme='vivid'] .grid > *:nth-child(12n+3) {
            --tile-accent: var(--c-amber);
        }

        :root[data-theme='vivid'] .grid > *:nth-child(12n+4) {
            --tile-accent: var(--c-lime);
        }

        :root[data-theme='vivid'] .grid > *:nth-child(12n+5) {
            --tile-accent: var(--c-green);
        }

        :root[data-theme='vivid'] .grid > *:nth-child(12n+6) {
            --tile-accent: var(--c-teal);
        }

        :root[data-theme='vivid'] .grid > *:nth-child(12n+7) {
            --tile-accent: var(--c-cyan);
        }

        :root[data-theme='vivid'] .grid > *:nth-child(12n+8) {
            --tile-accent: var(--c-blue);
        }

        :root[data-theme='vivid'] .grid > *:nth-child(12n+9) {
            --tile-accent: var(--c-indigo);
        }

        :root[data-theme='vivid'] .grid > *:nth-child(12n+10) {
            --tile-accent: var(--c-purple);
        }

        :root[data-theme='vivid'] .grid > *:nth-child(12n+11) {
            --tile-accent: var(--c-pink);
        }

        :root[data-theme='vivid'] .grid > *:nth-child(12n+12) {
            --tile-accent: var(--c-brown);
        }

        /* a subtle 2px top bar in each tile using the auto-accent */
        :root[data-theme='vivid'] .grid > * > figure::before,
        :root[data-theme='vivid'] .grid > a > figure::before {
            content: "";
            display: block;
            height: 2px;
            background: var(--tile-accent);
        }

    /* Vivid YEAR CHIPS (1956–2000) */
    :root[data-theme='vivid'] .year-chip {
        color: #111;
        border-color: transparent;
    }

        :root[data-theme='vivid'] .year-chip.y1956 {
            background: var(--c-indigo);
            color: #fff;
        }

        :root[data-theme='vivid'] .year-chip.y1960 {
            background: var(--c-red);
            color: #fff;
        }

        :root[data-theme='vivid'] .year-chip.y1964 {
            background: var(--c-green);
            color: #fff;
        }

        :root[data-theme='vivid'] .year-chip.y1968 {
            background: var(--c-amber);
            color: #1b1b1b;
        }

        :root[data-theme='vivid'] .year-chip.y1972 {
            background: var(--c-blue);
            color: #fff;
        }

        :root[data-theme='vivid'] .year-chip.y1976 {
            background: var(--c-purple);
            color: #fff;
        }

        :root[data-theme='vivid'] .year-chip.y1980 {
            background: var(--c-cyan);
            color: #0a0a0a;
        }

        :root[data-theme='vivid'] .year-chip.y1984 {
            background: var(--c-orange);
            color: #0a0a0a;
        }

        :root[data-theme='vivid'] .year-chip.y1988 {
            background: var(--c-teal);
            color: #0a0a0a;
        }

        :root[data-theme='vivid'] .year-chip.y1992 {
            background: var(--c-pink);
            color: #fff;
        }

        :root[data-theme='vivid'] .year-chip.y1996 {
            background: var(--c-lime);
            color: #0a0a0a;
        }

        :root[data-theme='vivid'] .year-chip.y2000 {
            background: var(--c-brown);
            color: #fff;
        }

/* ===== Concept Yellow (PDF-inspired, improved per-year palette) ===== */
:root[data-theme='concept'] {
    /* Surfaces & ink */
    --app-bg: #fff7df;
    --paper: #fff4d1;
    --panel: #fff0bd;
    --text: #1e1912;
    --heading: #0f0c07;
    --muted: #6a5b44;
    /* Chrome */
    --hairline: #e8d7aa;
    --header-bg: rgba(255,244,209,0.92);
    /* Accents & pills */
    --accent: #a86e00;
    --pill-border: #ead9ad;
    --pill-hover: rgba(168,110,0,0.10);
    --pill-active-bg: #f1e6d5; /* soft parchment */
    --pill-active-fg: #2c241a; /* readable ink */
    --pill-active-border: #9a5a2a;
    /* Dividers & decorative */
    --rule-color: rgba(168,110,0,.35);
    /* Timeline motif */
    --timeline-line: #9c7c36;
    --timeline-dot: #a86e00;
    /* Optional vignette hues */
    --heroA: rgba(168,110,0,0.35);
    --heroB: rgba(168,110,0,0.12);
}

    /* Concept: refined, harmonious year chip palette (warm archival) */
    :root[data-theme='concept'] .year-chip {
        border-color: #e1cfaa;
    }

        :root[data-theme='concept'] .year-chip.y1956 {
            background: #f7dd96;
            color: #1d1305;
        }

        :root[data-theme='concept'] .year-chip.y1960 {
            background: #f2d084;
            color: #1d1305;
        }

        :root[data-theme='concept'] .year-chip.y1964 {
            background: #ecc477;
            color: #1d1305;
        }

        :root[data-theme='concept'] .year-chip.y1968 {
            background: #e6b76a;
            color: #1d1305;
        }

        :root[data-theme='concept'] .year-chip.y1972 {
            background: #dfa95f;
            color: #1d1305;
        }

        :root[data-theme='concept'] .year-chip.y1976 {
            background: #d79e59;
            color: #1d1305;
        }

        :root[data-theme='concept'] .year-chip.y1980 {
            background: #d09555;
            color: #1d1305;
        }

        :root[data-theme='concept'] .year-chip.y1984 {
            background: #c88c53;
            color: #fffaf3;
        }

        :root[data-theme='concept'] .year-chip.y1988 {
            background: #bf8250;
            color: #fffaf3;
        }

        :root[data-theme='concept'] .year-chip.y1992 {
            background: #b6784e;
            color: #fffaf3;
        }

        :root[data-theme='concept'] .year-chip.y1996 {
            background: #ae6e4c;
            color: #fffaf3;
        }

        :root[data-theme='concept'] .year-chip.y2000 {
            background: #a7654a;
            color: #fffaf3;
        }

/* ===========================
   Robust helpers/overrides
   =========================== */

/* Ensure active filter pills show correct text color even on <a> */
a.bg-\[var\(--pill-active-bg\)\],
button.bg-\[var\(--pill-active-bg\)\] {
    color: var(--pill-active-fg) !important;
    border-color: var(--pill-active-border) !important;
}

/* Ensure readable year chips in Black & White theme */
:root[data-theme='bw'] .year-chip,
:root[data-theme='bw'] .year-chip[class*=" y"] {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #1f1f1f !important;
}