/* =========================================================================
   UARO WoE — Dark-Fantasy Base
   Loads AFTER tokens.css. Applies the parchment-and-blood typography to body
   prose and headings while keeping tables, forms, and buttons in Rubik so
   long lists stay scannable. Numerals fall through to the existing
   .woe-num mono rule in custom.css.
   ========================================================================= */

/* ---------- Body prose ---------- */
body {
    /* EB Garamond for prose, with Rubik as immediate fallback if the web font
       hasn't loaded yet — that way the page never flashes a system serif. */
    font-family: var(--woe-font-body), var(--woe-font-sans);
    font-size: var(--woe-text-prose);
    line-height: var(--woe-leading-prose);
    letter-spacing: var(--woe-track-prose);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Italic flavor — kit subtitles render as italic Garamond */
.woe-page-subtitle,
.woe-hero__sub,
.player-id__subtitle,
.sx-row-flavor,
.woe-flavor {
    font-style: italic;
    color: var(--woe-text-secondary);
    letter-spacing: var(--woe-track-prose);
}

/* ---------- Display headings ---------- */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.woe-page-title,
.woe-hero__title,
.woe-section-title,
.woe-band h2 {
    font-family: var(--woe-font-display);
    font-weight: 600;
    letter-spacing: var(--woe-track-display);
    line-height: var(--woe-leading-display);
    color: var(--woe-text-primary);
}

h1, .h1, .woe-page-title, .woe-hero__title {
    text-transform: uppercase;
    letter-spacing: var(--woe-track-display-mega);
}

/* The display gold-blood title gradient is reserved for hero titles
   in step 4 — base.css just sets the typeface. */

/* ---------- Tables stay sans for scanning ---------- */
.woe-table,
.woe-table thead th,
.woe-table tbody td,
.player-table,
.player-table thead th,
.player-table tbody td,
.lb-table,
.lb-table thead th,
.lb-table tbody td,
.sx-table,
.sx-table thead th,
.sx-table tbody td,
table.table,
table.table thead th,
table.table tbody td {
    font-family: var(--woe-font-sans);
    font-style: normal;
}

/* Numerals — the existing .woe-num span continues to apply mono. Reinforce
   tabular-nums on cells so columns line up even without a wrapping span. */
.woe-table td,
.player-table td,
.lb-table td,
.sx-table td {
    font-variant-numeric: tabular-nums;
}

/* ---------- Form controls stay sans ---------- */
input,
button,
select,
textarea,
.btn,
.form-control,
.form-select,
.lb-chip,
.sx-chip,
.woe-segmented__btn,
.lb-search,
.lb-select,
.woe-table-search__field,
.woe-session-select {
    font-family: var(--woe-font-sans);
    font-style: normal;
}

/* ---------- Theme transition ---------- */
html {
    color-scheme: dark light;
}


/* =========================================================================
   GLOBAL CHROME — navbar
   ========================================================================= */

.woe-navbar {
    /* Atmospheric obsidian with a faint gold grid overlay; backdrop-blur lets
       the gold grid breathe over scrolled content. */
    background:
        linear-gradient(180deg, var(--woe-surface-base) 0%, color-mix(in srgb, var(--woe-surface-base) 92%, var(--df-blood) 4%) 100%),
        repeating-linear-gradient(0deg, var(--woe-bg-grid) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(90deg, var(--woe-bg-grid) 0 1px, transparent 1px 48px);
    background-blend-mode: normal, normal, normal;
    border-bottom: 1px solid var(--woe-border);
    box-shadow:
        0 1px 0 0 color-mix(in srgb, var(--df-gold) 18%, transparent),
        0 12px 28px -16px var(--df-shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[data-bs-theme="light"] .woe-navbar {
    background:
        linear-gradient(180deg, var(--woe-surface-base) 0%, color-mix(in srgb, var(--woe-surface-base) 94%, var(--df-rune) 6%) 100%),
        repeating-linear-gradient(0deg, var(--woe-bg-grid) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(90deg, var(--woe-bg-grid) 0 1px, transparent 1px 48px);
}

/* Brand — Cinzel uppercase with gold leaf. */
.woe-navbar .woe-brand,
.woe-navbar .navbar-brand.woe-brand {
    font-family: var(--woe-font-display);
    font-weight: 700;
    font-size: var(--woe-text-display-sm);
    letter-spacing: var(--woe-track-display-mega);
    text-transform: uppercase;
    color: var(--woe-text-accent);
    text-shadow: 0 0 10px color-mix(in srgb, var(--df-gold) 32%, transparent);
    transition: color var(--woe-duration-fast) var(--woe-ease-out),
                text-shadow var(--woe-duration-fast) var(--woe-ease-out);
}

[data-bs-theme="light"] .woe-navbar .woe-brand,
[data-bs-theme="light"] .woe-navbar .navbar-brand.woe-brand {
    /* Color flips automatically via --woe-text-accent; only the gold-glow
       text-shadow needs to be removed in light mode. */
    text-shadow: none;
}

.woe-navbar .woe-brand:hover {
    color: var(--df-bone);
    text-shadow: 0 0 14px color-mix(in srgb, var(--df-gold) 55%, transparent);
}

/* Light-mode hover: don't flip to bone (invisible on cream). Stay readable. */
[data-bs-theme="light"] .woe-navbar .woe-brand:hover {
    color: #4a2a18;
    text-shadow: none;
}

/* Nav links — rune-secondary at rest, bone on hover, gold underline when active. */
.woe-navbar .woe-nav-link {
    font-family: var(--woe-font-sans);
    font-weight: 500;
    font-size: var(--woe-text-meta);
    letter-spacing: var(--woe-track-display);
    text-transform: uppercase;
    color: var(--woe-text-secondary);
}

.woe-navbar .woe-nav-link:hover,
.woe-navbar .woe-nav-link:focus {
    color: var(--woe-text-primary);
}

.woe-navbar .woe-nav-link.active,
.woe-navbar .woe-nav-link[aria-current="page"] {
    color: var(--woe-text-accent);
}

/* Active nav-link color flips automatically via --woe-text-accent. */

/* The existing ::after underline rule in custom.css already paints
   var(--woe-accent), which now resolves to gold (dark) / blood-deep (light). */

/* Server-time pill — bone-on-obsidian frame, JetBrains Mono. */
.woe-navbar .woe-server-time {
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-meta);
    letter-spacing: var(--woe-track-eyebrow);
    text-transform: uppercase;
    color: var(--df-bone);
    border: 1px solid var(--woe-border);
    border-radius: 4px;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--woe-surface-base) 70%, transparent);
}

[data-bs-theme="light"] .woe-navbar .woe-server-time {
    color: var(--df-rune);
    background: color-mix(in srgb, var(--woe-surface-base) 60%, transparent);
}

/* Theme toggle — ornate frame, gold glow on hover. */
.woe-navbar .woe-theme-toggle {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--woe-border);
    background: var(--woe-surface);
    color: var(--woe-text-accent);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--woe-duration-fast) var(--woe-ease-out),
                box-shadow var(--woe-duration-fast) var(--woe-ease-out),
                color var(--woe-duration-fast) var(--woe-ease-out);
}

.woe-navbar .woe-theme-toggle:hover,
.woe-navbar .woe-theme-toggle:focus-visible {
    border-color: color-mix(in srgb, var(--df-gold) 60%, var(--woe-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--df-gold) 32%, transparent),
                0 0 16px color-mix(in srgb, var(--df-gold) 28%, transparent);
    color: var(--df-bone);
}

/* Light-mode focus ring: gold reads as invisible on cream — swap to blood-deep
   so keyboard-focus indication stays visible. */
[data-bs-theme="light"] .woe-navbar .woe-theme-toggle:hover,
[data-bs-theme="light"] .woe-navbar .woe-theme-toggle:focus-visible {
    border-color: color-mix(in srgb, var(--df-blood-deep) 50%, var(--woe-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--df-blood-deep) 25%, transparent),
                0 0 16px color-mix(in srgb, var(--df-blood-deep) 18%, transparent);
    color: var(--df-blood-deep);
}

/* WoE flavor toggle — segmented pill, gold accent on dark / blood-deep on light.
   Splits stats between Saturday (Regular + WoE 2.0) and Sunday (Pre-Trans).
   Anchors, not buttons, so woe_query_link() threads every other GET param. */
.woe-flavor-toggle {
    display: inline-flex;
    border: 1px solid var(--woe-border);
    border-radius: 4px;
    background: var(--woe-surface);
    overflow: hidden;
}
.woe-flavor-toggle__btn {
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-eyebrow);
    letter-spacing: var(--woe-track-eyebrow);
    text-transform: uppercase;
    text-decoration: none;
    padding: 6px 12px;
    color: var(--woe-text-secondary);
    background: transparent;
    transition: color var(--woe-duration-fast) var(--woe-ease-out),
                background-color var(--woe-duration-fast) var(--woe-ease-out);
    white-space: nowrap;
}
.woe-flavor-toggle__btn + .woe-flavor-toggle__btn {
    border-left: 1px solid var(--woe-border);
}
.woe-flavor-toggle__btn:hover,
.woe-flavor-toggle__btn:focus-visible {
    color: var(--df-bone);
    background: color-mix(in srgb, var(--df-gold) 14%, transparent);
}
[data-bs-theme="light"] .woe-flavor-toggle__btn:hover,
[data-bs-theme="light"] .woe-flavor-toggle__btn:focus-visible {
    color: var(--df-blood-deep);
    background: color-mix(in srgb, var(--df-blood-deep) 10%, transparent);
}
.woe-flavor-toggle__btn.is-active {
    color: var(--woe-text-accent);
    background: color-mix(in srgb, var(--df-gold) 18%, transparent);
}
[data-bs-theme="light"] .woe-flavor-toggle__btn.is-active {
    background: color-mix(in srgb, var(--df-blood-deep) 14%, transparent);
}

/* Bootstrap toggler (mobile) — tint the burger icon to match */
.woe-navbar .navbar-toggler {
    border-color: var(--woe-border);
    color: var(--woe-text-accent);
}
/* Focus glow uses --woe-focus-tint so it flips to blood-deep on light mode.
   55% opacity clears WCAG 2.4.7's 3:1 indicator threshold on cream. */
.woe-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--woe-focus-tint) 55%, transparent);
}


/* =========================================================================
   GLOBAL CHROME — footer
   ========================================================================= */

.woe-footer {
    /* Rune divider with a faint blood drip rendered as a CSS-only SVG. */
    border-top: 1px solid var(--woe-border);
    margin-top: 4rem;
    padding-block: 2.25rem 1.75rem;
    position: relative;
    background:
        linear-gradient(180deg, transparent, color-mix(in srgb, var(--df-blood-deep) 6%, transparent) 100%);
    color: var(--woe-text-secondary);
    font-family: var(--woe-font-body);
    font-style: italic;
    font-size: var(--woe-text-prose-sub);
    letter-spacing: var(--woe-track-prose);
    text-align: center;
}

.woe-footer::before {
    /* Blood-drip ornament as a small SVG data URI, repeating along the rune line */
    content: "";
    position: absolute;
    left: 50%;
    top: -1px;
    transform: translateX(-50%);
    width: 220px;
    height: 12px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 12' preserveAspectRatio='none'><path d='M0 0 Q40 12 80 0 T160 0 T220 0' fill='%236B0F0F'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.5;
    pointer-events: none;
}

.woe-footer .container-xl {
    /* Override the existing .d-flex.justify-content-between layout into a single
       centered run; preserves the existing markup verbatim. */
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.4rem !important;
    text-align: center;
}

.woe-footer small {
    font-family: inherit;
    font-style: italic;
    font-size: inherit;
    color: var(--woe-text-secondary);
}

.woe-footer a {
    font-family: var(--woe-font-display);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: var(--woe-track-pill);
    font-size: var(--woe-text-pill);
    color: var(--woe-text-accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--df-gold) 32%, transparent);
    padding-bottom: 1px;
    transition: color var(--woe-duration-fast) var(--woe-ease-out),
                border-color var(--woe-duration-fast) var(--woe-ease-out);
}

.woe-footer a:hover {
    color: var(--df-bone);
    border-bottom-color: var(--df-gold);
}

[data-bs-theme="light"] .woe-footer a {
    /* Color flips automatically via --woe-text-accent.
       Override the bottom border so it doesn't stay gold-tinted on cream. */
    border-bottom-color: color-mix(in srgb, var(--df-blood-deep) 32%, transparent);
}

[data-bs-theme="light"] .woe-footer a:hover {
    color: var(--df-blood);
    border-bottom-color: var(--df-blood);
}


/* =========================================================================
   Emperium glow keyframe
   Consumed by .sx-status--Live (page-sessions.css), the first-break
   timeline marker (page-overview.css), and the rank-1 podium card glow.
   ========================================================================= */
@keyframes woe-emp-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--woe-emp-glow) 50%, transparent),
                    0 0 12px 0 color-mix(in srgb, var(--woe-emp-glow) 30%, transparent);
    }
    50% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--woe-emp-glow) 70%, transparent),
                    0 0 24px 4px color-mix(in srgb, var(--woe-emp-glow) 55%, transparent);
    }
}


/* =========================================================================
   Hero text fragments — typographic helpers used inside .woe-page-head--hero
   and any page-specific hero variant. The full hero band shell (background,
   borders, blood-drip ornament, grid overlay) lives under .woe-page-head--hero
   below.
   ========================================================================= */

/* Hero title — Cinzel uppercase with gold-blood gradient */
.woe-hero__title {
    font-family: var(--woe-font-display);
    font-weight: 700;
    font-size: var(--woe-text-display-lg);
    line-height: var(--woe-leading-display);
    letter-spacing: var(--woe-track-display-mega);
    text-transform: uppercase;
    margin: 0;
    background: linear-gradient(180deg, var(--df-bone) 0%, var(--df-gold) 60%, var(--df-blood-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 24px color-mix(in srgb, var(--df-blood-deep) 40%, transparent);
}
[data-bs-theme="light"] .woe-hero__title {
    background: linear-gradient(180deg, var(--df-blood-deep) 0%, #4a2a18 60%, var(--df-rune) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.woe-hero__eyebrow {
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-eyebrow);
    letter-spacing: var(--woe-track-eyebrow);
    text-transform: uppercase;
    color: var(--woe-text-accent);
    margin: 0 0 0.6rem;
    opacity: 0.9;
}
/* Eyebrow color flips automatically via --woe-text-accent. */

.woe-hero__sub {
    font-family: var(--woe-font-body);
    font-style: italic;
    font-size: var(--woe-text-prose);
    line-height: var(--woe-leading-prose);
    color: var(--woe-text-secondary);
    margin: 0.4rem 0 0;
    max-width: 60ch;
}

.woe-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}
.woe-hero__chip {
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-meta);
    letter-spacing: var(--woe-track-eyebrow);
    text-transform: uppercase;
    color: var(--df-bone);
    border: 1px solid var(--woe-border);
    border-radius: 4px;
    padding: 5px 10px;
    background: color-mix(in srgb, var(--woe-surface-base) 70%, transparent);
}
[data-bs-theme="light"] .woe-hero__chip {
    color: var(--df-rune);
}


/* =========================================================================
   PAGE-HEAD HERO MODIFIER — shared across pages
   Apply `.woe-page-head .woe-page-head--hero` (or just .woe-page-head--hero
   on a <section>) to wrap a page header with the dark-fantasy hero band:
   gold-grid overlay, blood-glow radial, blood-drip ornament, gold-blood
   gradient page title, mono eyebrow + meta row.
   ========================================================================= */

.woe-page-head--hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    margin-block: 0 2.5rem;
    padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem);
    background:
        radial-gradient(ellipse at 18% -10%, color-mix(in srgb, var(--df-blood-deep) 16%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at 82% 110%, color-mix(in srgb, var(--df-gold) 9%, transparent) 0%, transparent 55%),
        var(--woe-surface);
    border: 1px solid var(--woe-border);
    border-radius: 4px;
    overflow: hidden;
}

/* Title + meta column inside the hero band — flex-grows so the optional
   CTA / status pill on the right keeps its intrinsic width. Used as a
   direct child of .woe-page-head--hero on every page so headers, badges,
   and meta land in the same place across the site. */
.woe-page-head--hero .woe-page-head__main {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.woe-page-head--hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, var(--woe-bg-grid) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(90deg, var(--woe-bg-grid) 0 1px, transparent 1px 48px);
    pointer-events: none;
}

.woe-page-head--hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%) rotate(180deg);
    width: 280px;
    height: 12px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 12' preserveAspectRatio='none'><path d='M0 0 Q40 12 80 0 T160 0 T240 0 T320 0' fill='%236B0F0F'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.6;
    pointer-events: none;
}

.woe-page-head--hero > * {
    position: relative;
    z-index: 1;
}

.woe-page-head--hero .woe-hero__eyebrow {
    margin: 0 0 0.4rem;
}

.woe-page-head--hero .woe-page-title {
    font-family: var(--woe-font-display);
    font-weight: 700;
    font-size: var(--woe-text-display);
    line-height: var(--woe-leading-display);
    letter-spacing: var(--woe-track-display-mega);
    text-transform: uppercase;
    margin: 0;
    background: linear-gradient(180deg, var(--df-bone) 0%, var(--df-gold) 65%, var(--df-blood-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 24px color-mix(in srgb, var(--df-blood-deep) 40%, transparent);
}

[data-bs-theme="light"] .woe-page-head--hero .woe-page-title {
    background: linear-gradient(180deg, var(--df-blood-deep) 0%, #4a2a18 60%, var(--df-rune) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.woe-page-head--hero .woe-page-meta,
.woe-page-head--hero .text-secondary {
    color: var(--woe-text-secondary) !important;
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-meta);
    letter-spacing: var(--woe-track-prose);
    margin: 0;
}

/* Meta row — sits below the page title. Flex so badges, ids, dates, and
   counts align on the same baseline regardless of which combination a
   page uses. */
.woe-page-head--hero .woe-page-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
}

.woe-page-head--hero .woe-page-meta .woe-id,
.woe-page-head--hero .woe-id {
    color: var(--woe-text-accent);
    font-weight: 600;
}

/* .woe-id color flips automatically via --woe-text-accent. */

.woe-page-head--hero .woe-page-meta .badge,
.woe-page-head--hero .badge {
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-pill);
    letter-spacing: var(--woe-track-pill);
    text-transform: uppercase;
    border: 1px solid var(--woe-border);
    color: var(--df-bone);
    background: transparent !important;
    padding: 4px 10px;
}

[data-bs-theme="light"] .woe-page-head--hero .woe-page-meta .badge,
[data-bs-theme="light"] .woe-page-head--hero .badge {
    color: var(--df-rune);
}

/* Session status pill inside hero */
.woe-page-head--hero .woe-session-status {
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-pill);
    letter-spacing: var(--woe-track-eyebrow);
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--df-gold) 38%, var(--woe-border));
    background: color-mix(in srgb, var(--df-gold) 6%, var(--woe-surface));
    color: var(--woe-text-accent);
}

[data-bs-theme="light"] .woe-page-head--hero .woe-session-status {
    /* Color flips automatically via --woe-text-accent.
       Override frame to blood-deep tint instead of gold-tinted on cream. */
    border-color: color-mix(in srgb, var(--df-blood-deep) 38%, var(--woe-border));
    background: color-mix(in srgb, var(--df-blood-deep) 4%, var(--woe-surface));
}

.woe-page-head--hero .woe-session-status__dot {
    box-shadow: 0 0 12px color-mix(in srgb, var(--df-gold) 60%, transparent);
}

/* Live status: blood + emp-pulse */
.woe-page-head--hero .woe-session-status--live {
    color: var(--df-blood);
    border-color: color-mix(in srgb, var(--df-blood) 50%, var(--woe-border));
    background: color-mix(in srgb, var(--df-blood) 10%, var(--woe-surface));
    animation: woe-emp-pulse 2.4s ease-in-out infinite;
}


/* =========================================================================
   Stat card caption sizing — legacy custom.css pegs captions at
   --woe-font-xs / --woe-font-sm (11–13px) which reads as visual noise
   below the headline number. Bump the secondary text so contextual
   notes ("20.0B taken", "all-time best · Apr 22, 2026 GMT",
   "damage per kill") are comfortably scannable on every variant.
   ========================================================================= */

.woe-stat-card__caption {
    font-size: var(--woe-text-card-cap);
    line-height: var(--woe-leading-caption);
}

.woe-stat-card__foot {
    margin-top: 0.4rem;
}

/* Square variant (player career strip + guild lifetime) shares the same
   caption size as the wide variant — secondary copy reads the same. */
.woe-stat-group--square .woe-stat-card__caption,
.woe-stat-group--square .woe-stat-card__foot {
    font-size: var(--woe-text-card-cap);
    line-height: var(--woe-leading-caption);
}

.woe-stat-group--square .woe-stat-card__label {
    font-size: var(--woe-text-card-label);
    letter-spacing: var(--woe-track-label);
}

/* Wide variant labels (overview / records / session) — same role token. */
.woe-stat-card__label {
    font-size: var(--woe-text-card-label);
    letter-spacing: var(--woe-track-label);
}


/* =========================================================================
   .woe-table — canonical chrome shared by every page that renders a
   data-dense Bootstrap table. Page-specific exceptions (sessions
   .sx-month-row, leaderboard third-column gold metric, podium row tints
   on the overview index) live in their per-page CSS files.
   ========================================================================= */

.woe-table {
    border-collapse: separate;
    border-spacing: 0;
}

.woe-table thead th {
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-table-head);
    letter-spacing: var(--woe-track-eyebrow);
    text-transform: uppercase;
    color: var(--woe-text-secondary);
    border-bottom: 1px solid var(--woe-border-strong);
    background: var(--woe-surface);
    padding: 10px 12px;
}

/* `!important` is load-bearing: Bootstrap's `.link-body-emphasis` and
   `.text-decoration-none` utilities ship with !important and would
   otherwise win. */
.woe-table thead th a {
    color: inherit !important;
    text-decoration: none;
}

.woe-table thead th a:hover {
    color: var(--woe-text-accent) !important;
}

.woe-table tbody tr {
    transition: background-color var(--woe-duration-fast) var(--woe-ease-out);
    border-left: 2px solid transparent;
}

/* :not(.sx-month-row) exempts the sessions.php month-divider rows from
   gaining the gold left-border on hover. Pages without that class are
   unaffected. */
.woe-table tbody tr:not(.sx-month-row):hover {
    background-color: var(--woe-row-hover-strong);
    border-left-color: var(--df-gold);
}

.woe-table tbody td {
    border-bottom: 1px solid var(--woe-border);
    padding: 10px 12px;
    color: var(--woe-text-primary);
    line-height: var(--woe-leading-ui);
}

.woe-table tbody td.fw-semibold,
.woe-table tbody td .woe-num {
    font-family: var(--woe-font-mono);
    color: var(--woe-text-accent);
}

/* Table emphasized-cell color flips automatically via --woe-text-accent. */

.woe-row-emblem {
    border-radius: 3px;
    border: 1px solid var(--woe-border);
}


/* =========================================================================
   Pagination chrome — woe_pagination() emits <nav aria-label="…
   pagination"> and the leaderboard helper emits .woe-pagination /
   .woe-pagination__link. One canonical block covers both.
   ========================================================================= */

.woe-pagination,
.woe-pagination__list,
nav[aria-label$="pagination"],
nav[aria-label$="Pagination"] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
    padding-block: 1.5rem;
}

.woe-pagination a,
.woe-pagination__link,
nav[aria-label$="pagination"] a,
nav[aria-label$="Pagination"] a {
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-meta);
    letter-spacing: var(--woe-track-pill);
    text-transform: uppercase;
    color: var(--woe-text-secondary);
    border: 1px solid var(--woe-border);
    border-radius: 3px;
    padding: 6px 12px;
    text-decoration: none;
    transition: color var(--woe-duration-fast) var(--woe-ease-out),
                border-color var(--woe-duration-fast) var(--woe-ease-out),
                background-color var(--woe-duration-fast) var(--woe-ease-out);
}

.woe-pagination a:hover,
.woe-pagination__link:hover,
nav[aria-label$="pagination"] a:hover,
nav[aria-label$="Pagination"] a:hover {
    color: var(--woe-text-accent);
    border-color: color-mix(in srgb, var(--df-gold) 50%, var(--woe-border));
}

.woe-pagination .is-active,
.woe-pagination .active,
.woe-pagination__link--active {
    color: var(--woe-text-accent);
    border-color: color-mix(in srgb, var(--df-gold) 60%, var(--woe-border));
    background: color-mix(in srgb, var(--df-gold) 10%, transparent);
}