/* TBredIQ design-system layer.
 *
 * Centralized tokens + utility classes that retrofit the existing pages
 * without rewriting them. Loads after main.css + premium.css so it
 * intentionally overrides specific selectors.
 *
 * Layers:
 *   1. Design tokens (CSS vars: spacing, radius, shadow, color)
 *   2. Component primitives (.tbq-hero-compact, .card-primary, .card-flat,
 *      .tbq-btn, .tbq-skeleton, .tbq-trust-band, .tbq-eyebrow)
 *   3. Micro-interactions (focus rings, button sheen, sequential fade)
 *   4. Type rhythm (editorial body line length, number tabular-nums)
 *
 * No emoji, no fluff. Every selector earns its weight.
 */

:root {
    /* Spacing scale — 4px base, doubling. Use these and only these. */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
    --s-6: 32px; --s-7: 48px; --s-8: 64px;
    /* Radius scale — three steps. Don't introduce intermediate values. */
    --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;
    /* Shadow tier — 1=subtle, 2=lift, 3=focus */
    --sh-1: 0 1px 2px rgba(0,0,0,0.18);
    --sh-2: 0 4px 14px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.04) inset;
    --sh-3: 0 14px 40px rgba(0,0,0,0.42), 0 0 0 1px rgba(251,191,36,0.12) inset;
    /* Color tokens — alias of premium palette */
    --c-bg: #08070a; --c-surface: rgba(15,23,42,0.55); --c-surface-2: rgba(15,23,42,0.4);
    --c-border: rgba(255,255,255,0.07); --c-border-strong: rgba(255,255,255,0.14);
    --c-text: #f1f5f9; --c-text-muted: rgba(255,255,255,0.65); --c-text-faint: rgba(255,255,255,0.45);
    --c-gold: #fbbf24; --c-gold-deep: #d97706;
    --c-green: #22c55e; --c-red: #ef4444; --c-blue: #60a5fa; --c-purple: #a78bfa;
    /* Type rhythm */
    --line-editorial: 70ch;
    /* Motion */
    --ease-out: cubic-bezier(.2, .7, .2, 1);
    --t-fast: 160ms; --t-base: 280ms; --t-slow: 480ms;
}

/* ─────────────── COMPACT HERO ─────────────────────────────────
 * Used on utility pages (today, intel, exotics, carryovers) instead
 * of the big marketing hero. Tighter vertical, no gradient text effect,
 * data-density bias.
 */
.tbq-hero-compact {
    padding: var(--s-5) 0 var(--s-3) 0;
    border-bottom: 1px solid var(--c-border);
}
.tbq-hero-compact h1 {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 6px 0;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.tbq-hero-compact h1 .accent { color: var(--c-gold); }
.tbq-hero-compact .lede {
    font-size: 13.5px; color: var(--c-text-muted);
    line-height: 1.55; margin: 0; max-width: var(--line-editorial);
}
.tbq-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--c-gold);
    margin-bottom: var(--s-2);
}
@media (max-width: 640px) { .tbq-hero-compact h1 { font-size: 22px; } }

/* ─────────────── CARD HIERARCHY ────────────────────────────────
 * .card-primary — full glass treatment; reserved for hero, daily wrap, spotlight.
 * .card-flat    — heading + content only; secondary signals.
 * .card-soft    — single-border subtle; tertiary listings.
 */
.card-primary {
    padding: var(--s-5) var(--s-5);
    border-radius: var(--r-md);
    background: linear-gradient(180deg, var(--c-surface) 0%, rgba(8,7,10,0.45) 100%);
    border: 1px solid var(--c-border);
    box-shadow: var(--sh-2);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.card-primary:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.card-flat {
    padding: var(--s-3) 0 var(--s-4) 0;
    border-bottom: 1px solid var(--c-border);
}
.card-flat:last-child { border-bottom: none; }
.card-soft {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-sm);
    background: var(--c-surface-2);
    border-left: 2px solid var(--c-border-strong);
}

/* ─────────────── BUTTONS ───────────────────────────────────────
 * Override existing inline-styled buttons with proper interactive
 * states + an animated shine sweep on hover for premium CTAs.
 */
.tbq-btn, .btn-premium, .btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13.5px;
    border-radius: var(--r-sm); padding: 10px 18px; cursor: pointer;
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out);
    position: relative; overflow: hidden;
    border: 1px solid transparent; line-height: 1.2;
}
.tbq-btn:active, .btn-premium:active, .btn-ghost:active { transform: scale(0.97); }
.btn-premium {
    background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-deep) 100%);
    color: #1c1917; border: none; box-shadow: var(--sh-1);
}
.btn-premium:hover { box-shadow: 0 8px 22px rgba(251,191,36,0.25); }
.btn-premium::before {
    /* Shine sweep on hover */
    content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg); transition: left var(--t-slow) var(--ease-out);
    pointer-events: none;
}
.btn-premium:hover::before { left: 125%; }
.btn-ghost {
    background: transparent; color: var(--c-text);
    border: 1px solid var(--c-border-strong);
}
.btn-ghost:hover { background: rgba(255,255,255,0.04); }

/* ─────────────── FOCUS RINGS (a11y + polish) ──────────────────── */
:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--c-gold) !important;
    outline-offset: 2px !important;
    border-radius: var(--r-sm) !important;
}
*:focus { outline: none; }   /* mouse focus stays clean */

/* ─────────────── SKELETON ─────────────────────────────────────── */
.tbq-skel {
    display: inline-block;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
    animation: tbq-shimmer 1.4s linear infinite;
    border-radius: var(--r-sm);
}
.tbq-skel-line { height: 14px; width: 100%; margin-bottom: 6px; }
.tbq-skel-line.short { width: 60%; }
@keyframes tbq-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─────────────── EMPTY STATE ──────────────────────────────────── */
.tbq-empty {
    padding: var(--s-7) var(--s-4);
    text-align: center;
    color: var(--c-text-faint);
    font-size: 13px;
    line-height: 1.6;
}
.tbq-empty .h { color: var(--c-text-muted); font-weight: 600; margin-bottom: 4px; display: block; }

/* ─────────────── TRUST BAND ───────────────────────────────────── */
.tbq-trust-band {
    padding: var(--s-3) var(--s-4);
    background: rgba(8,7,10,0.7);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text-faint);
    font-size: 11.5px;
    text-align: center;
    letter-spacing: 0.04em;
}
.tbq-trust-band span { display: inline-flex; align-items: center; gap: 4px; }
.tbq-trust-band .sep { margin: 0 var(--s-3); color: rgba(255,255,255,0.18); }
.tbq-trust-band b { color: var(--c-text-muted); font-weight: 600; }

/* ─────────────── DECORATIVE MOTIFS ──────────────────────────────
 * Photo-free header treatments for marketing pages. Each is a CSS-only
 * decoration that evokes racing without needing image assets.
 */
.tbq-motif-stripe {
    /* Diagonal racing stripes */
    background: linear-gradient(135deg,
        rgba(8,7,10,0.92) 0%,
        rgba(15,23,42,0.85) 50%,
        rgba(8,7,10,0.92) 100%),
        repeating-linear-gradient(
            -55deg,
            transparent 0 60px,
            rgba(251,191,36,0.04) 60px 62px);
}
.tbq-motif-finishline {
    /* Subtle finish-line checker fade at right edge */
    position: relative;
}
.tbq-motif-finishline::after {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 14%;
    background:
        linear-gradient(to right, rgba(8,7,10,0) 0%, rgba(8,7,10,0.85) 80%),
        conic-gradient(from 0deg at 50% 50%,
            rgba(255,255,255,0.06) 0deg 90deg,
            rgba(0,0,0,0.4) 90deg 180deg,
            rgba(255,255,255,0.06) 180deg 270deg,
            rgba(0,0,0,0.4) 270deg);
    background-size: 100% 100%, 28px 28px;
    pointer-events: none; opacity: 0.5;
}

/* ─────────────── SEQUENTIAL FADE (for spotlight, etc.) ────────── */
.tbq-stagger > * {
    opacity: 0; transform: translateY(8px);
    animation: tbq-fadein var(--t-base) var(--ease-out) forwards;
}
.tbq-stagger > *:nth-child(1) { animation-delay: 0ms; }
.tbq-stagger > *:nth-child(2) { animation-delay: 60ms; }
.tbq-stagger > *:nth-child(3) { animation-delay: 120ms; }
.tbq-stagger > *:nth-child(4) { animation-delay: 180ms; }
.tbq-stagger > *:nth-child(5) { animation-delay: 240ms; }
.tbq-stagger > *:nth-child(6) { animation-delay: 300ms; }
@keyframes tbq-fadein { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .tbq-stagger > * { animation: none; opacity: 1; transform: none; }
}

/* ─────────────── NUMBER TYPOGRAPHY ─────────────────────────────
 * Tabular numerals everywhere we display data. Prevents jitter when
 * numbers update and aligns columns.
 */
.tbq-num, .mono {
    font-family: 'JetBrains Mono', Menlo, monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ─────────────── EDITORIAL BODY ───────────────────────────────── */
.tbq-prose { max-width: var(--line-editorial); }
.tbq-prose p, .tbq-prose li {
    line-height: 1.7;
}

/* ─────────────── RIGHT-RAIL TICKER (today page) ───────────────── */
@media (min-width: 1100px) {
    .tbq-with-rail { display: grid; grid-template-columns: 1fr 260px; gap: var(--s-5); }
    .tbq-rail {
        position: sticky; top: 80px;
        max-height: calc(100vh - 100px); overflow-y: auto;
        padding: var(--s-3) var(--s-4);
        border: 1px solid var(--c-border);
        border-radius: var(--r-md);
        background: rgba(15,23,42,0.4);
        font-size: 12.5px;
    }
    .tbq-rail .rail-h {
        font-family: 'Inter', sans-serif; font-weight: 700;
        font-size: 10px; letter-spacing: 0.12em;
        text-transform: uppercase; color: var(--c-gold);
        padding-bottom: var(--s-2); border-bottom: 1px solid var(--c-border);
        margin-bottom: var(--s-2);
    }
    .tbq-rail .rail-row {
        display: grid; grid-template-columns: 56px 1fr; gap: 8px;
        padding: 8px 0; border-bottom: 1px solid var(--c-border);
        font-size: 12px;
    }
    .tbq-rail .rail-row:last-child { border-bottom: none; }
    .tbq-rail .rail-row .when { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--c-gold); }
    .tbq-rail .rail-row .where { color: var(--c-text); font-weight: 500; }
    .tbq-rail .rail-row .where .meta { color: var(--c-text-faint); font-size: 10.5px; margin-top: 2px; font-weight: 400; }
}
@media (max-width: 1099px) { .tbq-rail { display: none; } }

/* ─────────────── ODOMETER NUMBER ──────────────────────────────── */
.tbq-odo {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    transition: color var(--t-base) ease-out;
}
.tbq-odo.bumped {
    animation: tbq-odo-bump 600ms var(--ease-out);
}
@keyframes tbq-odo-bump {
    0%   { transform: translateY(0);    color: inherit; }
    30%  { transform: translateY(-3px); color: var(--c-gold); }
    100% { transform: translateY(0);    color: inherit; }
}

/* ─────────────── TEXT TRUNCATION ──────────────────────────────── */
.tbq-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─────────────── L3/L4 — TYPE SCALE & RHYTHM ──────────────────
 * Modular type scale snapped to 1.25 ratio. Use semantic vars not raw px.
 */
:root {
    --fs-12: 11.5px; --fs-13: 13px; --fs-14: 14px;
    --fs-16: 16px; --fs-20: 20px; --fs-24: 24px; --fs-32: 32px;
    --fs-h1: 32px; --fs-h2: 22px; --fs-h3: 16px;
    --tracking-eyebrow: 0.10em;
    --opacity-border-1: 0.07; --opacity-border-2: 0.14;
    --c-border: rgba(255,255,255,0.07);
    --c-border-strong: rgba(255,255,255,0.14);
}

/* ─────────────── L4 — BRAND MICROTYPE ─────────────────────────── */
::selection { background: rgba(251,191,36,0.32); color: #f1f5f9; }
::-moz-selection { background: rgba(251,191,36,0.32); color: #f1f5f9; }

/* Custom scrollbar — premium feel on dark surfaces */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.10);
    border-radius: 6px; border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(251,191,36,0.30); background-clip: padding-box; }

/* Input focus glow — premium polish + a11y */
input:focus, select:focus, textarea:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(251,191,36,0.18) !important;
    border-color: var(--c-gold) !important;
}

/* ─────────────── L3 — UNIFIED LIVE INDICATOR ──────────────────── */
.tbq-live-dot {
    display: inline-block; width: 6px; height: 6px;
    background: var(--c-green); border-radius: 50%;
    box-shadow: 0 0 8px var(--c-green);
    animation: tbq-pulse-dot 2s ease-in-out infinite;
}
@keyframes tbq-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.85); }
}
/* Use TBQ keyframe in place of all the bespoke pulse-dots that drifted */
@keyframes pulse-dot { 0%,100% {opacity:1;transform:scale(1);} 50% {opacity:0.4;transform:scale(0.85);} }

/* Logo live pulse — applied when body[data-live="1"] is set during racing window */
body[data-live="1"] nav img[alt="TBredIQ"] {
    animation: tbq-logo-glow 3s ease-in-out infinite;
}
@keyframes tbq-logo-glow {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(251,191,36,0)); }
    50%      { filter: drop-shadow(0 0 6px rgba(251,191,36,0.4)); }
}

/* ─────────────── L3 — TIERED CARD HOVER ───────────────────────── */
.card-primary:hover     { transform: translateY(-3px) !important; }
.card-flat:hover        { background: rgba(15,23,42,0.3); }
.intel-card:hover       { transform: translateY(-2px); border-color: rgba(251,191,36,0.18); }
.race-row:hover, .timeline-row:hover, .race-card:hover { transform: translateY(-1px); }

/* ─────────────── L4 — TOP PROGRESS BAR ────────────────────────── */
#tbq-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0;
    background: linear-gradient(90deg, var(--c-gold), var(--c-gold-deep));
    box-shadow: 0 0 8px rgba(251,191,36,0.5);
    z-index: 200; pointer-events: none;
    transition: width 200ms ease-out, opacity 200ms ease-out;
}

/* ─────────────── L4 — THEME SWITCH OVERLAY ─────────────────────
 * Brief color-flash on toggle so the swap feels deliberate.
 */
#tbq-theme-veil {
    position: fixed; inset: 0; pointer-events: none;
    background: rgba(255,255,255,0.0);
    transition: background 240ms ease-out;
    z-index: 150;
}
#tbq-theme-veil.flashing {
    background: rgba(255,255,255,0.04);
}

/* ─────────────── L3 — BORDER UNIFICATION ──────────────────────── */
/* Override existing card borders to use only the two tokens */
.glass, .intel-card, .section, .race-card, .race-row, .timeline-row {
    border-color: var(--c-border) !important;
}
.tier-card.selected { border-color: rgba(251,191,36,0.40) !important; }

/* ─────────────── L3 — GRADIENT DIRECTION POLICY ────────────────
 * Buttons + accents always 135deg. Cards always 180deg.
 * The bg-mesh class stays as-is.
 */
.btn-premium { background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-deep) 100%); }
.card-primary { background: linear-gradient(180deg, var(--c-surface) 0%, rgba(8,7,10,0.45) 100%); }

/* ─────────────── L3 — NAV CRAFT ───────────────────────────────── */
nav { box-shadow: 0 1px 0 rgba(255,255,255,0.04); }
nav a:not(.btn-ghost):not(.btn-premium):hover {
    color: var(--c-gold) !important;
    transition: color var(--t-fast) var(--ease-out);
}
nav a[style*="#fbbf24"] {
    /* active nav item: thin underline accent */
    position: relative;
}
nav a[style*="#fbbf24"]::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -18px;
    height: 2px; background: var(--c-gold); border-radius: 2px;
}

/* ─────────────── L3 — TRUST BAND PIN ───────────────────────────
 * Sticks at bottom of viewport on short pages; in flow on long ones.
 */
.tbq-trust-band { margin-top: auto; }
body { display: flex; flex-direction: column; min-height: 100vh; }

/* ─────────────── L5+ — A11Y BATCH ─────────────────────────────── */
/* Color-contrast bumps: previous body text used 0.45-0.65 alpha which
 * dipped below AAA on dark. Bump baseline. */
.lede, .meta, .sub, .stat-label {
    color: rgba(255,255,255,0.72) !important;   /* up from 0.55-0.65 */
}
/* Touch-target minimum 44×44px for tappable chips on phones. */
@media (pointer: coarse) {
    .tag, .pool-tab, .tab-pill, .signal-pill {
        min-height: 32px;   /* visual */
        padding: 6px 12px !important;
    }
    a, button { min-height: 32px; }
}
/* Skip-to-content — visually hidden until focused */
.tbq-skip {
    position: absolute; left: -9999px; top: 0;
    background: var(--c-gold); color: #1c1917;
    padding: 10px 16px; border-radius: var(--r-sm);
    font-weight: 700; z-index: 250; text-decoration: none;
}
.tbq-skip:focus { left: 12px; top: 12px; }

/* L4-15: HOT_CONNECTIONS smallcaps utility */
.tbq-smallcaps {
    font-variant-caps: all-small-caps;
    letter-spacing: 0.02em;
    text-transform: lowercase;   /* lowercase + small-caps = visual SMALLCAPS */
}

/* ─────────────── L5+ — TOAST ──────────────────────────────────── */
#tbq-toast-host {
    position: fixed; bottom: 60px; right: 18px; z-index: 220;
    display: flex; flex-direction: column; gap: 10px;
    pointer-events: none;
}
.tbq-toast {
    pointer-events: auto;
    padding: 12px 18px; border-radius: var(--r-md);
    background: rgba(15,23,42,0.96); color: var(--c-text);
    border: 1px solid var(--c-border-strong);
    box-shadow: var(--sh-2);
    font-size: 13.5px; font-family: 'Inter', sans-serif;
    max-width: 360px;
    animation: tbq-toast-in var(--t-base) var(--ease-out);
}
.tbq-toast.error { border-color: rgba(239,68,68,0.3); color: #fda4af; }
.tbq-toast.success { border-color: rgba(34,197,94,0.3); color: #86efac; }
.tbq-toast.info { border-color: rgba(96,165,250,0.3); color: #93c5fd; }
@keyframes tbq-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ─────────────── L5+ — COOKIE NOTICE ──────────────────────────── */
#tbq-cookie-banner {
    position: fixed; bottom: 18px; left: 18px; right: auto; max-width: 380px;
    z-index: 195;
    padding: 14px 18px;
    background: rgba(15,23,42,0.96); color: var(--c-text);
    border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
    box-shadow: var(--sh-2); font-size: 13px; line-height: 1.5;
    backdrop-filter: blur(10px);
}
#tbq-cookie-banner button {
    margin-top: 10px; padding: 7px 14px; font-size: 12px;
    background: var(--c-gold); color: #1c1917; border: none;
    border-radius: var(--r-sm); font-weight: 700; cursor: pointer;
}

/* ─────────────── L5+ — KEYBOARD HINT BAR ───────────────────────── */
#tbq-shortcut-hint {
    position: fixed; bottom: 18px; right: 80px;
    background: rgba(15,23,42,0.85); color: var(--c-text-muted);
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill); padding: 6px 12px;
    font-size: 11px; opacity: 0; transition: opacity 240ms ease-out;
    pointer-events: none;
}
#tbq-shortcut-hint kbd {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 3px;
    margin: 0 2px;
}

/* ─────────────── L5+ — STAT LABELS RHYTHM ──────────────────────── */
.tbq-time-since {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 600; color: var(--c-text-faint);
    font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em;
}
.tbq-time-since::before {
    content: ''; display: inline-block; width: 5px; height: 5px;
    background: var(--c-green); border-radius: 50%;
    animation: tbq-pulse-dot 2s ease-in-out infinite;
}

/* ─────────────── L5+ — SIZED SKELETON BLOCKS ──────────────────
 * Reserve space matching real content height so swap-in doesn't shift
 * layout (CLS=0). Apply to known section types.
 */
.tbq-skel-pick    { height: 64px; margin-bottom: 8px; }
.tbq-skel-spot    { height: 90px; margin-bottom: 8px; }
.tbq-skel-stat    { height: 28px; margin-bottom: 4px; }
.tbq-skel-card    { height: 200px; margin-bottom: 12px; }
.tbq-skel-row     { height: 48px; margin-bottom: 6px; }

/* ─────────────── PRINT BASELINE ───────────────────────────────── */
@media print {
    body { background: white !important; color: black !important; }
    nav, footer, .tbq-rail, .tbq-trust-band, #tbq-ticker, #tbq-theme-btn { display: none !important; }
    .card-primary, .card-flat, .glass, .intel-card, .section {
        background: white !important; border: 1px solid #d6d3c8 !important;
        color: #1c1917 !important; page-break-inside: avoid;
        box-shadow: none !important;
    }
    a { color: #92400e !important; }
}