/* ============================================================
   timeline-grimoire.css - grimoire visual treatment for the Lore Timeline.

   Class prefix `.timeline-` to avoid collision with `.codex-` and `.lore-`
   sibling pages. Adds:
     - Frame chrome (clean leather binding - edge stripes + corner sigils
       DELETED 2026-05-10 per user feedback)
     - INLINE grimoire tools (Jump / Start / Theme) appended to the
       existing .filter-bar - saga filters + tools share one row.
     - Light/Dark grimoire theme via CSS custom properties (--tl-*)

   Default theme is grimoire-dark (obsidian + ember + gold). Light is
   parchment + saddle-brown + wax-seal red.

   Existing horizontal scroll-snap behavior is preserved - this file only
   wraps the timeline in chrome and styles the inline tool buttons.
   ============================================================ */

/* ---------- Theme tokens (custom properties) ---------- */
body.timeline-theme-grimoire-dark {
    --tl-bg:          #0A0806;
    --tl-bg-deep:     #060403;
    --tl-bg-panel:    #120D08;
    /* Issue 4 (2026-05-08): leather palette REtuned to harmonize with the
       page background `--bg:#0A0806` (warm near-black) + the gold/bone
       accent stack. Earlier wine-red `#1a070c` clashed against the warm
       black bg + gold; replaced with umber `#1f1612` (gold-leaning warm
       brown) and deep cocoa `#15100c` so the frame reads as bound leather
       on the same warm-black plane, not as a separate red object. */
    --tl-leather-1:   #1f1612;
    --tl-leather-2:   #15100c;
    --tl-leather-3:   #1f1612;
    --tl-piping:      rgba(255, 122, 74, .22);
    --tl-piping-soft: rgba(255, 122, 74, .12);
    --tl-edge-light:  #d6a44a;
    --tl-edge-dark:   #3a2818;  /* unified 2026-05-10: umber, not wine */
    --tl-text:        #E8E0D0;
    --tl-text-mute:   #8A7A5A;
    --tl-accent:      #ff7a4a;     /* ember */
    --tl-accent-soft: rgba(255, 122, 74, .35);
    --tl-gold:        #C8A84B;
    --tl-gold-bright: #E8C870;
    --tl-glyph:       #C8A84B;     /* gold Enochian on dark */
    --tl-glyph-glow:  rgba(200, 168, 75, .35);
    --tl-tb-bg:       rgba(13, 10, 20, .94);
    --tl-tb-border:   rgba(200, 168, 75, .25);
    --tl-tb-text:     #E8E0D0;
    --tl-tb-text-mute:#8A7A5A;
    --tl-tb-hover:    rgba(255, 122, 74, .12);
}

body.timeline-theme-grimoire-light {
    --tl-bg:          #F0EBE0;
    --tl-bg-deep:     #E5DDC8;
    --tl-bg-panel:    #E8E1D2;
    /* Issue 4 (2026-05-08): light leather deepened from saddle-brown
       (`#6e3a1c`) to deeper umber `#3a2818` so the frame reads as a
       genuinely dark binding against the parchment `--bg:#F0EBE0`
       instead of a mid-tone smudge. Mids drop to `#2a1810`. */
    --tl-leather-1:   #3a2818;
    --tl-leather-2:   #2a1810;
    --tl-leather-3:   #3a2818;
    --tl-piping:      rgba(212, 164, 74, .55);
    --tl-piping-soft: rgba(212, 164, 74, .25);
    --tl-edge-light:  #d6b078;
    --tl-edge-dark:   #5a3e22;  /* unified 2026-05-10: umber, not saddle-red */
    --tl-text:        #1A1206;
    --tl-text-mute:   #4A3A1C;
    --tl-accent:      #8a2418;     /* wax seal red */
    --tl-accent-soft: rgba(138, 36, 24, .35);
    --tl-gold:        #6e4a18;
    --tl-gold-bright: #8a5a20;
    --tl-glyph:       #8a2418;     /* red wax-seal corners */
    --tl-glyph-glow:  rgba(138, 36, 24, .25);
    --tl-tb-bg:       rgba(232, 225, 210, .96);
    --tl-tb-border:   rgba(138, 36, 24, .35);
    --tl-tb-text:     #1A1206;
    --tl-tb-text-mute:#4A3A1C;
    --tl-tb-hover:    rgba(138, 36, 24, .08);
}

/* The body itself adopts a deep theme bg so the leather frame reads as
   floating on a darker plane; we leave existing `body { background:var(--bg) }`
   alone so the existing legacy palette still drives card colours. */
body.timeline-grimoire-active {
    background:
        radial-gradient(ellipse at top, rgba(255, 122, 74, .04), transparent 55%),
        var(--tl-bg);
}
body.timeline-theme-grimoire-light.timeline-grimoire-active {
    background:
        radial-gradient(ellipse at top, rgba(212, 164, 74, .12), transparent 55%),
        var(--tl-bg);
}

/* ---------- Frame chrome ---------- */
:root { --tl-cover-w: 18px; --tl-cover-h: 12px; }

.timeline-frame {
    position: relative;
    max-width: 1400px;
    margin: 1rem auto 1.5rem;
    padding: var(--tl-cover-h) var(--tl-cover-w);
    border-radius: 6px;
    background:
        linear-gradient(135deg, var(--tl-piping-soft), transparent 40%),
        linear-gradient(180deg, var(--tl-leather-1) 0%, var(--tl-leather-2) 50%, var(--tl-leather-3) 100%);
    box-shadow:
        inset 0 0 0 1px var(--tl-piping-soft),
        0 0 0 1px var(--tl-piping),
        0 0 50px -10px rgba(0, 0, 0, .55);
}

/* Issue 2 (2026-05-10): decorative edge stripe DELETED. Previous version
   used a repeating-linear-gradient(90deg, edge-light, edge-dark) at 5px
   height which read as glowing red/ember "ridges" or "riffs" along the
   top + bottom of the leather frame against the warm bg. The frame now
   relies on the leather gradient + gold piping shadow alone - clean
   bound-book look with no decorative stripe. JS no longer creates the
   .timeline-frame__edge nodes, so these rules are removed entirely. */

/* Inner canvas - the actual content surface. Slightly recessed so the
   leather frame visually wraps it. */
.timeline-frame__canvas {
    position: relative;
    z-index: 1;
    background:
        radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, .25) 100%),
        var(--tl-bg-panel);
    border-radius: 3px;
    padding: 14px 8px;
    overflow: hidden;
}
body.timeline-theme-grimoire-light .timeline-frame__canvas {
    background:
        radial-gradient(ellipse at center, transparent 50%, rgba(74, 36, 16, .07) 100%),
        var(--tl-bg-panel);
}

/* Issue 3 (2026-05-10): corner Enochian sigil ornaments + their CSS
   rule blocks DELETED. JS no longer creates these nodes, so no hide
   rule is necessary. Canon reference (for future reinstatement only):
     tl: un (First), tr: or (Light/Era), bl: ger (Echo), br: ceph (End/Fold). */

/* ---------- Inline grimoire tools (live INSIDE the existing .filter-bar) ----------
   The grimoire JUMP / START / THEME buttons are appended to .filter-bar so all
   timeline controls share one row with the SAGA filters. They pick up the
   `.filter-btn` base look and only layer on grimoire-flavoured affordances
   (icon, gold accent on hover, dropdown menu).
*/
.filter-bar--with-tools {
    /* Allow the inline tools to sit at the right edge on wide screens
       without forcing a wrap if there's room. */
    align-items: center;
}

.timeline-tb-spacer {
    /* Soft gap between saga filters and grimoire tools on wide viewports.
       Collapses to 0 when the row wraps, so spacing falls back to the
       filter-bar's own gap. */
    flex: 1 1 0.5rem;
    min-width: .5rem;
    max-width: 1.5rem;
    height: 1px;
}

/* Grimoire-tool flavour layered onto .filter-btn - only when the button
   ALSO carries .timeline-tb-btn. We avoid touching the saga pills. */
.filter-btn.timeline-tb-btn {
    border-color: var(--tl-tb-border, var(--border));
    color: var(--tl-tb-text-mute, var(--muted));
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    line-height: 1;
}
.filter-btn.timeline-tb-btn:hover {
    color: var(--tl-gold-bright, var(--bone));
    border-color: var(--tl-tb-border, var(--border-active));
    background: var(--tl-tb-hover, transparent);
}
.filter-btn.timeline-tb-btn .timeline-tb-icon {
    font-size: .72rem;
    color: var(--tl-gold, var(--gold));
}

/* Era-jump dropdown - anchored to the inline JUMP button. */
.timeline-tb-jump { position: relative; display: inline-flex; }
.timeline-tb-jump__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    max-height: 60vh;
    overflow-y: auto;
    padding: .35rem;
    background: var(--tl-tb-bg);
    border: 1px solid var(--tl-tb-border);
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .55);
    list-style: none;
    margin: 0;
    z-index: 95;
    display: none;
}
.timeline-tb-jump[data-open="1"] .timeline-tb-jump__menu { display: block; }
.timeline-tb-jump__item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    color: var(--tl-tb-text);
    font-family: inherit;
    font-size: .75rem;
    padding: .35rem .55rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.timeline-tb-jump__item:hover {
    background: var(--tl-tb-hover);
    color: var(--tl-gold-bright);
}
.timeline-tb-jump__item-num {
    font-family: 'Cinzel', serif;
    font-size: .68rem;
    color: var(--tl-tb-text-mute);
    letter-spacing: .12em;
    margin-right: .4rem;
}

/* ---------- Mobile: tools wrap inside the filter-bar alongside saga pills ---------- */
@media (max-width: 640px) {
    /* On narrow screens collapse the spacer entirely so tools sit
       right after the saga filters without an awkward gap before wrap. */
    .timeline-tb-spacer { display: none; }
    .filter-btn.timeline-tb-btn { font-size: .68rem; padding: .22rem .55rem; }
    .timeline-tb-jump__menu { right: auto; left: 0; min-width: 180px; }

    :root { --tl-cover-w: 12px; --tl-cover-h: 8px; }
}

/* ---------- Light theme: re-tint a few existing elements without
            breaking saga/title-card colour logic ---------- */
body.timeline-theme-grimoire-light .timeline-frame__canvas .timeline-hint {
    color: var(--tl-text-mute);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .timeline-tb-btn,
    .timeline-tb-jump__item { transition: none; }
}

/* ---------- Visible horizontal scrollbar on the strip ----------
   Issue (2026-05-11): UAT reports "can't scroll" - the inline style sets
   the scrollbar to 4px / border-grey which is essentially invisible on
   the warm dark bg. Make it tall and gold so users SEE it and can drag.
   Also explicitly enforce overflow-x:auto in case any later style
   accidentally collapses it. */
.timeline-grimoire-active #timelineScroll {
    overflow-x: auto !important;
    overflow-y: hidden;
    scrollbar-width: auto;
    scrollbar-color: var(--tl-gold, #C8A84B) transparent;
    /* Reserve enough room under the cards for the new chunky scrollbar
       so it doesn't visually steal from the card border-radius. */
    padding-bottom: 18px !important;
}
.timeline-grimoire-active #timelineScroll::-webkit-scrollbar {
    height: 12px;
}
.timeline-grimoire-active #timelineScroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .25);
    border-radius: 6px;
}
.timeline-grimoire-active #timelineScroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--tl-gold, #C8A84B), var(--tl-edge-dark, #3a2818));
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.timeline-grimoire-active #timelineScroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--tl-gold-bright, #E8C870), var(--tl-gold, #C8A84B));
    background-clip: padding-box;
}

/* Stronger hint above the strip so the affordance is unmistakable. */
.timeline-grimoire-active .timeline-hint {
    color: var(--tl-gold, #C8A84B);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
}