/**
 * HYROX - Main Stylesheet
 * Complete design system. Scoped to .hx-app wrapper. Foxiz theme compatible.
 * @package Hyrox
 * @since 1.0.0
 */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

.hx-app {
    /* Brand: HYROX neon yellow + blacks */
    --hx-primary: #E8FF00;
    --hx-primary-hover: #D4E800;
    --hx-primary-dark: #6B7A00;
    --hx-primary-light: rgba(232, 255, 0, 0.12);
    --hx-primary-soft: rgba(232, 255, 0, 0.08);
    --hx-primary-text: #1A1A1A;

    /* Dark palette */
    --hx-dark-900: #0A0A0A;
    --hx-dark-800: #111111;
    --hx-dark-700: #1A1A1A;
    --hx-dark-600: #222222;
    --hx-dark-500: #2A2A2A;
    --hx-dark-400: #333333;
    --hx-dark-300: #444444;

    /* Light palette */
    --hx-white: #FFFFFF;
    --hx-gray-50: #F8F9FA;
    --hx-gray-100: #F1F3F5;
    --hx-gray-200: #E9ECEF;
    --hx-gray-300: #DEE2E6;
    --hx-gray-400: #CED4DA;
    --hx-gray-500: #ADB5BD;
    --hx-gray-600: #6C757D;
    --hx-gray-700: #495057;
    --hx-gray-800: #343A40;
    --hx-gray-900: #212529;

    /* Semantic */
    --hx-bg: #F8F9FA;
    --hx-surface: #FFFFFF;
    --hx-border: #E9ECEF;
    --hx-border-strong: #DEE2E6;
    --hx-text: #1A1A1A;
    --hx-text-secondary: #495057;
    --hx-text-muted: #5A6577;

    /* Status colors */
    --hx-success: #00C853;
    --hx-success-light: rgba(0, 200, 83, 0.1);
    --hx-warning: #FFB300;
    --hx-warning-light: rgba(255, 179, 0, 0.1);
    --hx-error: #FF3366;
    --hx-error-light: rgba(255, 51, 102, 0.08);
    --hx-info: #2196F3;
    --hx-info-light: rgba(33, 150, 243, 0.1);

    /* Level/tier colors */
    --hx-level-beginner: #00C853;
    --hx-level-intermediate: #2196F3;
    --hx-level-advanced: #9C27B0;
    --hx-level-elite: #FF8F00;
    --hx-level-world-class: #E8FF00;

    /* Station colors */
    --hx-station-ski: #0288D1;
    --hx-station-sled: #E53935;
    --hx-station-burpee: #F4511E;
    --hx-station-row: #00897B;
    --hx-station-farmers: #6D4C41;
    --hx-station-sandbag: #E65100;
    --hx-station-wallball: #5E35B1;
    --hx-station-lunges: #00897B;

    /* Typography */
    --hx-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --hx-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

    /* Font sizes */
    --hx-fs-xs: 0.6875rem;
    --hx-fs-sm: 0.75rem;
    --hx-fs-base: 0.875rem;
    --hx-fs-md: 1rem;
    --hx-fs-lg: 1.125rem;
    --hx-fs-xl: 1.25rem;
    --hx-fs-2xl: 1.5rem;
    --hx-fs-3xl: 1.875rem;
    --hx-fs-4xl: 2.25rem;
    --hx-fs-5xl: 3rem;

    /* Spacing */
    --hx-sp-1: 0.25rem;
    --hx-sp-2: 0.5rem;
    --hx-sp-3: 0.75rem;
    --hx-sp-4: 1rem;
    --hx-sp-5: 1.25rem;
    --hx-sp-6: 1.5rem;
    --hx-sp-8: 2rem;
    --hx-sp-10: 2.5rem;
    --hx-sp-12: 3rem;
    --hx-sp-16: 4rem;
    --hx-sp-20: 5rem;

    /* Border radii */
    --hx-radius-xs: 4px;
    --hx-radius-sm: 6px;
    --hx-radius: 10px;
    --hx-radius-md: 12px;
    --hx-radius-lg: 16px;
    --hx-radius-xl: 20px;
    --hx-radius-2xl: 24px;
    --hx-radius-full: 9999px;

    /* Shadows */
    --hx-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --hx-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
    --hx-shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --hx-shadow-lg: 0 10px 40px rgba(0,0,0,0.08);
    --hx-shadow-xl: 0 20px 60px rgba(0,0,0,0.12);
    --hx-shadow-primary: 0 4px 20px rgba(232,255,0,0.25);

    /* Transitions */
    --hx-transition: 150ms ease;
    --hx-transition-fast: 100ms ease;
    --hx-transition-slow: 300ms ease;

    /* Layout */
    --hx-container: 1200px;

    /* Badge text tokens (WCAG AA compliant on respective tint backgrounds) */
    --hx-badge-success-text:      #007A31;  /* 5.1:1 on success-light */
    --hx-badge-warning-text:      #7A5500;  /* 5.4:1 on warning-light */
    --hx-badge-error-text:        #B5173B;  /* 5.6:1 on error-light */
    --hx-badge-info-text:         #0B5FB5;  /* 5.2:1 on info-light */

    /* Level badge text tokens (WCAG AA compliant) */
    --hx-level-beginner-text:     #007A31;  /* 5.1:1 on green tint */
    --hx-level-intermediate-text: #0B5FB5;  /* 5.2:1 on blue tint */
    --hx-level-advanced-text:     #6A0080;  /* 7.8:1 on purple tint */
    --hx-level-elite-text:        #7A5C00;  /* 5.3:1 on orange tint */
    --hx-level-world-class-text:  var(--hx-dark-700); /* dark on neon yellow */

    /* Semantic text for colored backgrounds */
    --hx-text-muted-strong:       #495057;  /* 5.9:1 on gray-50/100 surfaces */
    --hx-footer-disclaimer:       rgba(255,255,255,0.75); /* 10.8:1 on #0A0A0A */
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

.hx-app {
    font-family: var(--hx-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--hx-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Override WordPress/Foxiz theme styles */
.entry-content.rbct .hx-app {
    font-family: var(--hx-font) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--hx-text) !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hx-app *,
.hx-app *::before,
.hx-app *::after {
    box-sizing: border-box;
}

.entry-content.rbct .hx-app *,
.entry-content.rbct .hx-app *::before,
.entry-content.rbct .hx-app *::after {
    box-sizing: border-box;
}

.hx-app img,
.hx-app video {
    max-width: 100%;
    height: auto;
}

/* Typography reset — fight theme overrides */
.entry-content.rbct .hx-app h1,
.entry-content.rbct .hx-app h2,
.entry-content.rbct .hx-app h3,
.entry-content.rbct .hx-app h4,
.entry-content.rbct .hx-app h5,
.entry-content.rbct .hx-app h6 {
    font-family: var(--hx-font) !important;
    line-height: 1.2 !important;
    color: var(--hx-text) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Dark hero/surface overrides — keep light text on dark backgrounds */
.entry-content.rbct .hx-app .hx-page-header-dark h1,
.entry-content.rbct .hx-app .hx-page-header-dark h2,
.entry-content.rbct .hx-app .hx-page-header-dark h3,
.entry-content.rbct .hx-app .hx-page-header-dark h4,
.entry-content.rbct .hx-app .hx-page-header-dark h5,
.entry-content.rbct .hx-app .hx-page-header-dark h6,
.entry-content.rbct .hx-app .hx-page-header-dark .hx-page-title,
.hx-app .hx-page-header-dark h1,
.hx-app .hx-page-header-dark h2,
.hx-app .hx-page-header-dark h3,
.hx-app .hx-page-header-dark h4,
.hx-app .hx-page-header-dark h5,
.hx-app .hx-page-header-dark h6,
.hx-app .hx-page-header-dark .hx-page-title,
.hx-app .hx-hero h1,
.hx-app .hx-hero h2,
.hx-app .hx-hero h3,
.hx-app .hx-hero h4,
.hx-app .hx-hero h5,
.hx-app .hx-hero h6,
.hx-app .hx-result-hero h1,
.hx-app .hx-result-hero h2,
.hx-app .hx-result-hero h3,
.hx-app .hx-result-hero h4,
.hx-app .hx-result-hero h5,
.hx-app .hx-result-hero h6,
.entry-content.rbct .hx-app .hx-hero h1,
.entry-content.rbct .hx-app .hx-hero h2,
.entry-content.rbct .hx-app .hx-hero h3,
.entry-content.rbct .hx-app .hx-hero h4,
.entry-content.rbct .hx-app .hx-hero h5,
.entry-content.rbct .hx-app .hx-hero h6,
.entry-content.rbct .hx-app .hx-result-hero h1,
.entry-content.rbct .hx-app .hx-result-hero h2,
.entry-content.rbct .hx-app .hx-result-hero h3 {
    color: #fff !important;
}
.entry-content.rbct .hx-app .hx-page-header-dark .hx-page-subtitle,
.entry-content.rbct .hx-app .hx-page-header-dark p,
.hx-app .hx-page-header-dark .hx-page-subtitle,
.hx-app .hx-page-header-dark p,
.hx-app .hx-hero p,
.hx-app .hx-hero .hx-subtitle,
.hx-app .hx-hero .hx-race-detail-date {
    color: rgba(255,255,255,0.85) !important;
}

.hx-app h1 { font-size: var(--hx-fs-4xl); font-weight: 800; margin: 0 0 1rem; line-height: 1.15; }
.hx-app h2 { font-size: var(--hx-fs-3xl); font-weight: 700; margin: 0 0 1rem; line-height: 1.2; }
.hx-app h3 { font-size: var(--hx-fs-2xl); font-weight: 700; margin: 0 0 0.75rem; }
.hx-app h4 { font-size: var(--hx-fs-xl); font-weight: 700; margin: 0 0 0.5rem; }
.hx-app h5 { font-size: var(--hx-fs-lg); font-weight: 600; margin: 0 0 0.5rem; }
.hx-app h6 { font-size: var(--hx-fs-md); font-weight: 600; margin: 0 0 0.5rem; }

.hx-app p { margin: 0 0 1rem; line-height: 1.7; }
.hx-app p:last-child { margin-bottom: 0; }

.hx-app ul,
.hx-app ol { margin: 0 0 1rem; padding-left: 1.5rem; }

.hx-app li { margin-bottom: 0.25rem; line-height: 1.6; }

.hx-app a,
.entry-content.rbct .hx-app a {
    color: var(--hx-text);
    text-decoration: none;
    transition: color var(--hx-transition);
}

.hx-app a:hover,
.entry-content.rbct .hx-app a:hover {
    color: var(--hx-dark-700);
}

.entry-content.rbct .hx-app table { border: none !important; }
.entry-content.rbct .hx-app table th,
.entry-content.rbct .hx-app table td { border: none !important; }

.entry-content.rbct .hx-app input,
.entry-content.rbct .hx-app select,
.entry-content.rbct .hx-app textarea,
.entry-content.rbct .hx-app button {
    font-family: var(--hx-font) !important;
}

/* Alpine.js hide before init */
[x-cloak] { display: none !important; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.hx-app .hx-container {
    width: 100%;
    max-width: var(--hx-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--hx-sp-4);
    padding-right: var(--hx-sp-4);
}

@media (min-width: 640px) {
    .hx-app .hx-container {
        padding-left: var(--hx-sp-6);
        padding-right: var(--hx-sp-6);
    }
}

.hx-app .hx-main {
    min-height: calc(100vh - 200px);
    padding-top: var(--hx-sp-6);
    padding-bottom: var(--hx-sp-16);
}

@media (max-width: 768px) {
    .hx-app .hx-main {
        padding-top: var(--hx-sp-4);
    }
}

/* Consistent vertical rhythm: every section has the same top margin */
.hx-app .hx-section {
    margin: 0 0 var(--hx-sp-10);
    padding: 0;
}

.hx-app .hx-section:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .hx-app .hx-section {
        margin-bottom: var(--hx-sp-8);
    }
}

.hx-app .hx-section-lg {
    margin: 0 0 var(--hx-sp-12);
    padding: 0;
}

/* Grid system */
.hx-app .hx-grid {
    display: grid;
    gap: var(--hx-sp-6);
}

.hx-app .hx-grid-2 { grid-template-columns: repeat(2, 1fr); }
.hx-app .hx-grid-3 { grid-template-columns: repeat(3, 1fr); }
.hx-app .hx-grid-4 { grid-template-columns: repeat(4, 1fr); }

.hx-app .hx-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--hx-sp-6);
}

@media (max-width: 1024px) {
    .hx-app .hx-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .hx-app .hx-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .hx-app .hx-grid-2,
    .hx-app .hx-grid-3,
    .hx-app .hx-grid-4 { grid-template-columns: 1fr; }
}

/* Skip link - hidden until focused (display:none avoids audit false positives) */
.hx-app .hx-skip-link,
.entry-content.rbct .hx-app .hx-skip-link {
    position: absolute !important;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background: var(--hx-dark-700) !important;
    color: var(--hx-white) !important;
    text-decoration: none !important;
    z-index: 100;
    border-radius: var(--hx-radius);
}

.hx-app .hx-skip-link:focus,
.entry-content.rbct .hx-app .hx-skip-link:focus {
    position: absolute !important;
    left: 16px;
    top: 16px;
    width: auto;
    height: auto;
    padding: 12px 20px;
    overflow: visible;
    font-size: 14px;
    font-weight: 600;
}

/* ==========================================================================
   4. NAVIGATION
   ========================================================================== */

.hx-app .hx-nav,
.entry-content.rbct .hx-app .hx-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hx-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 0.375rem 0;
    margin: 0;
    transition: all var(--hx-transition);
}

.hx-app .hx-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.hx-app .hx-nav-logo,
.entry-content.rbct .hx-app .hx-nav-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--hx-text) !important;
    font-weight: 900;
    font-size: 1.25rem;
    text-decoration: none !important;
    letter-spacing: -0.03em;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.hx-app .hx-nav-logo:hover,
.entry-content.rbct .hx-app .hx-nav-logo:hover {
    opacity: 0.8;
    color: var(--hx-text) !important;
}

.hx-app .hx-nav-logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 22px;
    color: var(--hx-primary);
}

/* Brand accent on light surfaces (nav/footer text) — use darker yellow for >=4.5:1 contrast */
.hx-app .hx-brand-accent,
.entry-content.rbct .hx-app .hx-brand-accent { color: var(--hx-primary-dark, #5A6400) !important; }
/* Brand accent on dark surfaces (cta-section, dark hero) keeps the bright yellow */
.hx-app .hx-cta-section .hx-brand-accent,
.hx-app .hx-hero .hx-brand-accent,
.hx-app .hx-footer .hx-brand-accent { color: var(--hx-primary) !important; }

.hx-app .hx-nav-links { display: flex; gap: 0.25rem; align-items: center; }

.hx-app .hx-nav-link,
.hx-app .hx-nav-item,
.entry-content.rbct .hx-app .hx-nav-link,
.entry-content.rbct .hx-app .hx-nav-item {
    color: var(--hx-text-secondary) !important;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 12px 16px;
    border-radius: var(--hx-radius-sm);
    text-decoration: none !important;
    transition: all var(--hx-transition);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.hx-app .hx-nav-link:hover,
.entry-content.rbct .hx-app .hx-nav-link:hover {
    color: var(--hx-text) !important;
    background: var(--hx-gray-100);
}

.hx-app .hx-nav-link-active {
    color: var(--hx-text) !important;
    background: var(--hx-gray-100);
    font-weight: 600;
}

.hx-app .hx-unit-toggle {
    display: flex;
    border-radius: var(--hx-radius-full);
    overflow: hidden;
    border: 1px solid var(--hx-border);
}

.hx-app .hx-unit-btn {
    padding: 8px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: transparent;
    color: var(--hx-text-muted);
    border: none;
    cursor: pointer;
    transition: all var(--hx-transition);
    min-height: 40px;
    min-width: 40px;
}

.hx-app .hx-unit-btn.active,
.hx-app .hx-unit-btn[aria-pressed="true"] {
    background: var(--hx-primary);
    color: var(--hx-primary-text);
}

.hx-app .hx-mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--hx-gray-700);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 12px;
    min-height: 44px;
    min-width: 44px;
}

@media (max-width: 768px) {
    .hx-app .hx-nav-links { display: none; }
    .hx-app .hx-nav-links.open {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--hx-surface);
        border: 1px solid var(--hx-border);
        padding: 1rem;
        z-index: 50;
        border-radius: 0 0 var(--hx-radius) var(--hx-radius);
        box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    }
    .hx-app .hx-mobile-toggle { display: block; }
}

/* ==========================================================================
   5. HERO SECTIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   Unified hero — one shape for every page-level hero.
   Applies to .hx-hero, .hx-page-header, and .hx-hub-hero-section when they
   carry the .hx-hero-with-bg modifier. All three variants share identical
   width (100% of .hx-container), padding, radius, margin, and min-height
   so heroes look consistent across calculators, compare pages, guides,
   training, and stations — including background-image and text-color.
   -------------------------------------------------------------------------- */
.hx-app .hx-hero.hx-hero-with-bg,
.hx-app .hx-page-header.hx-hero-with-bg,
.hx-app .hx-hub-hero-section.hx-hero-with-bg {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 260px;
    padding: var(--hx-sp-10) var(--hx-sp-6);
    margin: 0 0 var(--hx-sp-8);
    border-radius: var(--hx-radius-xl);
    overflow: hidden;
    background-image:
        linear-gradient(180deg, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.50) 40%, rgba(10,10,10,0.88) 100%),
        var(--hx-hero-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0a0a0a;
    color: #fff;
    text-align: left;
}
.hx-app .hx-hero.hx-hero-with-bg::before { display: none; }

@media (max-width: 768px) {
    .hx-app .hx-hero.hx-hero-with-bg,
    .hx-app .hx-page-header.hx-hero-with-bg,
    .hx-app .hx-hub-hero-section.hx-hero-with-bg {
        min-height: 200px;
        padding: var(--hx-sp-8) var(--hx-sp-5);
        margin-bottom: var(--hx-sp-6);
    }
}

.hx-app .hx-page-header.hx-hero-with-bg .hx-page-title,
.hx-app .hx-page-header.hx-hero-with-bg .hx-page-subtitle,
.hx-app .hx-page-header.hx-hero-with-bg .hx-page-meta,
.hx-app .hx-page-header.hx-hero-with-bg .hx-page-meta-item { color: #fff !important; }
.hx-app .hx-page-header.hx-hero-with-bg .hx-page-header-badge {
    background: rgba(232,255,0,0.15);
    color: var(--hx-primary);
    border: 1px solid rgba(232,255,0,0.35);
}

.hx-app .hx-hero {
    text-align: center;
    padding: var(--hx-sp-12) var(--hx-sp-4) var(--hx-sp-8);
    background: var(--hx-dark-900);
    color: var(--hx-white);
    border-radius: 0 0 var(--hx-radius-xl) var(--hx-radius-xl);
    margin-bottom: var(--hx-sp-8);
    position: relative;
    overflow: hidden;
}

.hx-app .hx-hero::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(232,255,0,0.07) 0%, transparent 70%);
    pointer-events: none;
}

.hx-app .hx-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(232,255,0,0.1);
    color: var(--hx-primary);
    border: 1px solid rgba(232,255,0,0.25);
    padding: 5px 14px;
    border-radius: var(--hx-radius-full);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1.25rem;
}

.hx-app .hx-hero-title {
    font-size: var(--hx-fs-4xl);
    font-weight: 900;
    color: var(--hx-white);
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.hx-app .hx-hero-title .hx-accent,
.hx-app .hx-hero-title span { color: var(--hx-primary); }

.hx-app .hx-hero-subtitle {
    font-size: var(--hx-fs-lg);
    color: rgba(255,255,255,0.65);
    max-width: 640px;
    margin: 0 auto 2rem;
    line-height: 1.65;
}



/* Legacy hero responsive */
@media (max-width: 640px) {
    .hx-app .hx-hero-title { font-size: var(--hx-fs-3xl); }
    .hx-app .hx-hero { padding: var(--hx-sp-8) var(--hx-sp-4) var(--hx-sp-6); }
}

/* ==========================================================================
   6. CARDS
   ========================================================================== */

.hx-app .hx-card {
    background: var(--hx-surface);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius-md);
    overflow: hidden;
    transition: transform var(--hx-transition), box-shadow var(--hx-transition);
}

.hx-app .hx-card:hover {
    box-shadow: var(--hx-shadow-md);
}

.hx-app .hx-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--hx-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Collapsible header button reset (converted from <div> to <button>) */
button.hx-card-header.hx-card-header-collapsible,
button.hx-plan-week-header,
button.hx-result-card-header {
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    text-align: left;
    width: 100%;
    cursor: pointer;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
button.hx-card-header.hx-card-header-collapsible:focus-visible,
button.hx-plan-week-header:focus-visible,
button.hx-result-card-header:focus-visible {
    outline: 2px solid var(--hx-dark-700);
    outline-offset: -2px;
}

.hx-app .hx-card-body { padding: 1.5rem; }

.hx-app .hx-card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--hx-border);
    background: var(--hx-gray-50);
}

.hx-app .hx-card--lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--hx-shadow-lg);
}

.hx-app .hx-card--link {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}

/* Calculator cards (hub grid) */
.hx-app .hx-calc-card,
.entry-content.rbct .hx-app .hx-calc-card,
.entry-content.rbct .hx-app a.hx-calc-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--hx-surface);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius-md);
    text-decoration: none !important;
    color: inherit !important;
    transition: transform var(--hx-transition-slow), box-shadow var(--hx-transition-slow);
    position: relative;
    overflow: hidden;
}

.hx-app .hx-calc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--hx-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--hx-transition-slow);
}

.hx-app .hx-calc-card:hover,
.entry-content.rbct .hx-app .hx-calc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--hx-shadow-lg);
    color: inherit !important;
}

.hx-app .hx-calc-card:hover::before { transform: scaleX(1); }

.hx-app .hx-calc-card-icon {
    width: 48px;
    height: 48px;
    background: var(--hx-primary-soft);
    border-radius: var(--hx-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--hx-dark-700);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.hx-app .hx-calc-card-icon svg {
    width: 26px;
    height: 26px;
}

.hx-app .hx-calc-card-name {
    font-size: var(--hx-fs-lg);
    font-weight: 700;
    color: var(--hx-text);
    margin-bottom: 0.375rem;
    letter-spacing: -0.01em;
}

.hx-app .hx-calc-card-desc {
    font-size: var(--hx-fs-sm);
    color: var(--hx-text-muted);
    line-height: 1.55;
    flex: 1;
}

.hx-app .hx-calc-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--hx-text);
    font-weight: 600;
    font-size: var(--hx-fs-sm);
    margin-top: 1rem;
    padding: 0.375rem 0.875rem;
    background: var(--hx-primary);
    border-radius: var(--hx-radius-full);
    align-self: flex-start;
}

.hx-app .hx-calc-card-cta svg { width: 14px; height: 14px; }

/* ==========================================================================
   7. BENTO / HUB GRID
   ========================================================================== */

.hx-app .hx-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

@media (max-width: 1024px) {
    .hx-app .hx-bento-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .hx-app .hx-bento-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   8. BUTTONS
   ========================================================================== */

.hx-app .hx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 16px;
    border-radius: var(--hx-radius-sm);
    font-family: var(--hx-font);
    font-weight: 600;
    font-size: var(--hx-fs-base);
    cursor: pointer;
    transition: all var(--hx-transition);
    border: 2px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    position: relative;
    overflow: hidden;
    min-height: 44px;
    min-width: 44px;
}

.hx-app .hx-btn:disabled,
.hx-app .hx-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary: neon yellow */
.hx-app .hx-btn-primary,
.entry-content.rbct .hx-app .hx-btn-primary {
    background: var(--hx-primary) !important;
    color: var(--hx-primary-text) !important;
    border-color: var(--hx-primary) !important;
    text-decoration: none !important;
}

.hx-app .hx-btn-primary:hover,
.entry-content.rbct .hx-app .hx-btn-primary:hover {
    background: var(--hx-primary-hover) !important;
    border-color: var(--hx-primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--hx-shadow-primary);
    color: var(--hx-primary-text) !important;
}

/* Secondary: dark */
.hx-app .hx-btn-secondary {
    background: var(--hx-dark-700);
    color: var(--hx-white);
    border-color: var(--hx-dark-700);
}

.hx-app .hx-btn-secondary:hover {
    background: var(--hx-dark-900);
    border-color: var(--hx-dark-900);
    transform: translateY(-1px);
}

/* Outline */
.hx-app .hx-btn-outline {
    background: transparent;
    color: var(--hx-text);
    border-color: var(--hx-border-strong);
}

.hx-app .hx-btn-outline:hover {
    background: var(--hx-gray-100);
    border-color: var(--hx-gray-400);
}

/* Ghost */
.hx-app .hx-btn-ghost {
    background: transparent;
    color: var(--hx-text-secondary);
    border-color: transparent;
}

.hx-app .hx-btn-ghost:hover {
    background: var(--hx-gray-100);
    color: var(--hx-text);
}

/* Sizes */
.hx-app .hx-btn-sm { padding: 8px 12px; font-size: var(--hx-fs-sm); min-height: 40px; min-width: 40px; }
.hx-app .hx-btn-lg { padding: 1rem 2rem; font-size: var(--hx-fs-md); border-radius: var(--hx-radius); min-height: 48px; }
.hx-app .hx-btn-xl { padding: 1.125rem 2.5rem; font-size: var(--hx-fs-lg); border-radius: var(--hx-radius-md); min-height: 52px; }
.hx-app .hx-btn-block { width: 100%; }

/* Loading state */
.hx-app .hx-btn-loading {
    pointer-events: none;
    color: transparent !important;
}

.hx-app .hx-btn-loading::after {
    content: '';
    position: absolute;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid rgba(0,0,0,0.3);
    border-top-color: var(--hx-primary-text);
    border-radius: 50%;
    animation: hxSpin 0.6s linear infinite;
}

/* Calculate button (full width primary) */
.hx-app .hx-btn-calculate,
.entry-content.rbct .hx-app .hx-btn-calculate {
    background: var(--hx-primary) !important;
    color: var(--hx-primary-text) !important;
    border: none !important;
    width: 100%;
    padding: 1rem 2rem;
    font-size: var(--hx-fs-md);
    border-radius: var(--hx-radius);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.hx-app .hx-btn-calculate:hover,
.entry-content.rbct .hx-app .hx-btn-calculate:hover {
    background: var(--hx-primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--hx-shadow-primary);
}

/* ==========================================================================
   9. FORMS
   ========================================================================== */

.hx-app .hx-form-group { margin-bottom: 1.25rem; }

.hx-app .hx-form-row {
    display: flex;
    gap: var(--hx-sp-4);
    align-items: flex-end;
}

.hx-app .hx-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hx-sp-4);
}

.hx-app .hx-form-row-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--hx-sp-4);
}

@media (max-width: 640px) {
    .hx-app .hx-form-row { flex-direction: column; align-items: stretch; }
    .hx-app .hx-form-row-2col,
    .hx-app .hx-form-row-3col { grid-template-columns: 1fr; }
}

.hx-app .hx-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.375rem;
    color: var(--hx-text);
    font-size: var(--hx-fs-base);
}

.hx-app .hx-required {
    color: var(--hx-error);
    margin-left: 2px;
}

.hx-app .hx-optional {
    font-size: var(--hx-fs-xs);
    color: var(--hx-text-muted);
    font-weight: 400;
    margin-left: var(--hx-sp-1);
}

.hx-app .hx-input,
.hx-app input[type="text"],
.hx-app input[type="number"],
.hx-app input[type="email"],
.hx-app input[type="tel"],
.hx-app input[type="url"],
.hx-app input[type="search"] {
    width: 100%;
    padding: 0.6875rem 0.875rem;
    border: 1.5px solid var(--hx-border-strong);
    border-radius: var(--hx-radius-sm);
    font-family: var(--hx-font);
    font-size: var(--hx-fs-md);
    background: var(--hx-surface);
    color: var(--hx-text);
    transition: border-color var(--hx-transition), box-shadow var(--hx-transition);
    line-height: 1.5;
    appearance: none;
    -webkit-appearance: none;
}

.hx-app .hx-select,
.hx-app select {
    width: 100%;
    padding: 0.6875rem 2.5rem 0.6875rem 0.875rem;
    border: 1.5px solid var(--hx-border-strong);
    border-radius: var(--hx-radius-sm);
    font-family: var(--hx-font);
    font-size: var(--hx-fs-md);
    background: var(--hx-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236C757D' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.875rem center;
    color: var(--hx-text);
    transition: border-color var(--hx-transition), box-shadow var(--hx-transition);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.hx-app .hx-textarea,
.hx-app textarea {
    width: 100%;
    padding: 0.6875rem 0.875rem;
    border: 1.5px solid var(--hx-border-strong);
    border-radius: var(--hx-radius-sm);
    font-family: var(--hx-font);
    font-size: var(--hx-fs-md);
    background: var(--hx-surface);
    color: var(--hx-text);
    transition: border-color var(--hx-transition), box-shadow var(--hx-transition);
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

/* Focus states */
.hx-app .hx-input:focus,
.hx-app input[type="text"]:focus,
.hx-app input[type="number"]:focus,
.hx-app input[type="email"]:focus,
.hx-app input[type="search"]:focus,
.hx-app .hx-select:focus,
.hx-app select:focus,
.hx-app .hx-textarea:focus,
.hx-app textarea:focus {
    outline: none;
    border-color: var(--hx-dark-700);
    box-shadow: 0 0 0 3px rgba(26,26,26,0.1);
}

/* Error state */
.hx-app .hx-input--error,
.hx-app input.hx-input--error {
    border-color: var(--hx-error) !important;
    background: var(--hx-error-light);
}

.hx-app .hx-input--error:focus {
    box-shadow: 0 0 0 3px rgba(255,51,102,0.15) !important;
}

/* Input wrapper (for suffix/prefix) */
.hx-app .hx-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.hx-app .hx-input-wrapper .hx-input,
.hx-app .hx-input-wrapper input {
    padding-right: 3.5rem;
}

.hx-app .hx-input-suffix {
    position: absolute;
    right: 0.875rem;
    color: var(--hx-text-muted);
    font-size: var(--hx-fs-base);
    font-weight: 500;
    pointer-events: none;
    background: transparent;
}

/* Time inputs */
.hx-app .hx-time-inputs {
    display: flex;
    align-items: center;
    gap: var(--hx-sp-2);
}

.hx-app .hx-time-inputs .hx-input {
    width: 4.5rem;
    text-align: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.hx-app .hx-time-sep {
    font-weight: 700;
    font-size: var(--hx-fs-xl);
    color: var(--hx-text-muted);
    margin-top: -2px;
}

/* --- Toggle Group (canonical segmented control) --- */
.hx-app .hx-toggle-group {
    display: inline-flex;
    gap: 0;
    background: var(--hx-gray-100);
    border-radius: var(--hx-radius);
    padding: 3px;
}


/* --- Radio Option (canonical pill-style) --- */
.hx-app .hx-radio-group {
    display: flex;
    gap: var(--hx-space-3, 0.75rem);
    flex-wrap: wrap;
}

.hx-app .hx-radio-option {
    display: inline-flex;
    align-items: center;
    gap: var(--hx-space-2, 0.5rem);
    padding: 10px 16px;
    background: var(--hx-surface);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius);
    cursor: pointer;
    transition: all var(--hx-transition);
    font-size: var(--hx-fs-sm);
    font-weight: var(--hx-weight-medium);
    color: var(--hx-text);
    min-height: 44px;
}

.hx-app .hx-radio-option:hover {
    border-color: var(--hx-primary);
    background: var(--hx-primary-light);
}

.hx-app .hx-radio-option.active,
.hx-app .hx-radio-option:has(input[type="radio"]:checked),
.hx-app .hx-radio-option:has(input[type="checkbox"]:checked) {
    background: var(--hx-primary-light);
    border-color: var(--hx-primary);
    color: var(--hx-primary-dark);
    font-weight: var(--hx-weight-semibold);
}

.hx-app .hx-radio-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hx-app .hx-radio-option:has(input:focus-visible) {
    outline: 2px solid var(--hx-primary-dark);
    outline-offset: 2px;
}


/* Help text / validation messages */
.hx-app .hx-help-text {
    font-size: var(--hx-fs-xs);
    color: var(--hx-text-muted);
    margin-top: var(--hx-sp-1);
    line-height: 1.4;
}

.hx-app .hx-error-text {
    font-size: var(--hx-fs-xs);
    color: var(--hx-error);
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ==========================================================================
   10. TABLES
   ========================================================================== */

/* Canonical wrapper. .hx-table-wrap / .hx-table-wrapper are aliases. */
.hx-app .hx-table-responsive,
.hx-app .hx-table-wrap,
.hx-app .hx-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1rem 0;
    border-radius: var(--hx-radius-sm);
    border: 1px solid var(--hx-border);
    background: var(--hx-surface);
    position: relative;
}

/* Monospace time values */
.hx-app .hx-td-time {
    text-align: right;
    white-space: nowrap;
    min-width: 85px;
}

/* Athlete name truncation */
.hx-app .hx-athlete-link {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Split expansion grid (default: 8-col desktop) */
.hx-app .hx-split-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--hx-space-2, 0.5rem);
    padding: var(--hx-space-4, 1rem);
}

.hx-app .hx-split-item {
    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
    text-align: center;
}

.hx-app .hx-split-label {
    font-size: var(--hx-fs-2xs, 0.625rem);
    color: var(--hx-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hx-app .hx-split-time {
    font-size: var(--hx-fs-sm, 0.875rem);
    font-weight: 600;
}

/* Heatmap table (desktop default) */
.hx-app .hx-heatmap-table-wrapper {
    overflow-x: auto;
    border-radius: var(--hx-radius-lg, 0.75rem);
    border: 1px solid var(--hx-border);
}

.hx-app .hx-heatmap-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.hx-app .hx-heatmap-station-col {
    text-align: left;
    min-width: 120px;
    position: sticky;
    left: 0;
    background: var(--hx-surface);
    z-index: 1;
}

.hx-app .hx-heatmap-cell {
    text-align: center;
    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
    min-width: 80px;
    border-bottom: 1px solid var(--hx-border);
    transition: background var(--hx-transition, 0.15s ease);
}

.hx-app .hx-heatmap-median {
    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
    border-left: 1px solid var(--hx-border);
    white-space: nowrap;
}

/* Heatmap legend */
.hx-app .hx-heatmap-legend {
    display: flex;
    align-items: center;
    gap: var(--hx-space-4, 1rem);
    margin-bottom: var(--hx-space-4, 1rem);
    font-size: var(--hx-fs-xs, 0.75rem);
    color: var(--hx-text-muted);
}

.hx-app .hx-heatmap-legend-item {
    display: flex;
    align-items: center;
    gap: var(--hx-space-1, 0.25rem);
}

.hx-app .hx-heatmap-legend-swatch {
    width: 16px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid var(--hx-border);
}

/* Heatmap row hover (desktop only) */
@media (hover: hover) {
    .hx-app .hx-heatmap-row:hover td {
        background: var(--hx-primary-light) !important;
    }
}

/* Heatmap mobile cards (hidden by default, shown at 640px) */
.hx-app .hx-heatmap-cards { display: none; }

.hx-app .hx-heatmap-card {
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius-sm);
    padding: var(--hx-space-3, 0.75rem);
    background: var(--hx-surface);
}

.hx-app .hx-heatmap-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--hx-space-2, 0.5rem);
}

.hx-app .hx-heatmap-card-station {
    font-weight: 600;
    font-size: var(--hx-fs-sm, 0.875rem);
}

.hx-app .hx-heatmap-card-median {
    font-size: var(--hx-fs-sm, 0.875rem);
    color: var(--hx-text-muted);
}

.hx-app .hx-heatmap-bar-stack {
    display: flex;
    height: 24px;
    border-radius: var(--hx-radius-sm);
    overflow: hidden;
}

.hx-app .hx-heatmap-bar-seg {
    height: 100%;
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--hx-text);
}

.hx-app .hx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--hx-fs-base);
    background: var(--hx-surface);
}

.hx-app .hx-table th,
.hx-app .hx-table td,
.entry-content.rbct .hx-app .hx-table th,
.entry-content.rbct .hx-app .hx-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--hx-border) !important;
    vertical-align: middle;
}

.hx-app .hx-table thead th,
.entry-content.rbct .hx-app .hx-table thead th {
    background: var(--hx-dark-900) !important;
    color: var(--hx-white) !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--hx-fs-xs);
    letter-spacing: 0.06em;
    border-bottom: none !important;
    white-space: nowrap;
}

/* Sticky header */
.hx-app .hx-table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.hx-app .hx-table tbody tr:last-child td { border-bottom: none !important; }

.hx-app .hx-table-striped tbody tr:nth-child(even) { background: var(--hx-gray-50); }

.hx-app .hx-table tbody tr:hover { background: var(--hx-primary-soft); }

.hx-app .hx-table-compact th,
.hx-app .hx-table-compact td { padding: 0.5rem 0.75rem; }

/* Rank highlight */
.hx-app .hx-table .hx-rank-1 td:first-child { color: #FFD700; font-weight: 700; }
.hx-app .hx-table .hx-rank-2 td:first-child { color: #C0C0C0; font-weight: 700; }
.hx-app .hx-table .hx-rank-3 td:first-child { color: #CD7F32; font-weight: 700; }

.hx-app .hx-table .hx-row-highlight { background: var(--hx-primary-soft) !important; }

/* Comparison table */
.hx-app .hx-vs-table { width: 100%; border-collapse: collapse; }

.hx-app .hx-vs-table th,
.hx-app .hx-vs-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--hx-border); }

.hx-app .hx-vs-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.hx-app .hx-vs-col { text-align: center; }

.hx-app .hx-vs-col-header {
    background: var(--hx-dark-900);
    color: var(--hx-white);
    padding: 1rem;
    border-radius: var(--hx-radius-sm);
    font-weight: 700;
    font-size: var(--hx-fs-lg);
}

.hx-app .hx-vs-col-header.hx-vs-primary {
    background: var(--hx-primary);
    color: var(--hx-primary-text);
}

/* Weight reference table (color-coded by division) */
.hx-app .hx-weight-table .hx-div-mens { border-left: 3px solid #2196F3; }
.hx-app .hx-weight-table .hx-div-womens { border-left: 3px solid #E91E63; }
.hx-app .hx-weight-table .hx-div-open { border-left: 3px solid var(--hx-primary); }
.hx-app .hx-weight-table .hx-div-masters { border-left: 3px solid var(--hx-warning); }
.hx-app .hx-weight-table .hx-div-juniors { border-left: 3px solid var(--hx-success); }

/* ==========================================================================
   11. CALCULATOR RESULTS
   ========================================================================== */

.hx-app .hx-calculator-section { margin: var(--hx-sp-6) 0; padding: var(--hx-sp-8) 0; }

.hx-app .hx-result-section,
.hx-app .hx-results-section {
    margin-top: 2rem;
    animation: hxFadeSlideUp 0.35s ease-out;
}

@keyframes hxFadeSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes hxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Result hero card */
.hx-app .hx-result-hero {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--hx-dark-900);
    color: var(--hx-white);
    border-radius: var(--hx-radius-md);
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.hx-app .hx-result-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--hx-primary);
}

.hx-app .hx-result-label {
    display: block;
    font-size: var(--hx-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.375rem;
    font-weight: 600;
}

.hx-app .hx-result-hero .hx-result-label { color: rgba(255,255,255,0.5); }

.hx-app .hx-result-card {
    background: var(--hx-surface);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius-md);
    padding: 1.5rem;
    text-align: center;
}

.hx-app .hx-result-value {
    font-size: var(--hx-fs-2xl);
    font-weight: 800;
    color: var(--hx-text);
    line-height: 1;
    letter-spacing: -0.02em;
}

.hx-app .hx-result-value-xl {
    font-size: var(--hx-fs-5xl);
    font-weight: 900;
    color: var(--hx-primary-dark);
    line-height: 1;
    letter-spacing: -0.04em;
    display: block;
    margin-bottom: 0.375rem;
}

.hx-app .hx-result-value-lg {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--hx-white);
    line-height: 1;
    letter-spacing: -0.03em;
    display: block;
}

/* Result grid */
.hx-app .hx-result-grid {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.hx-app .hx-result-grid-2 { grid-template-columns: repeat(2, 1fr); }
.hx-app .hx-result-grid-3 { grid-template-columns: repeat(3, 1fr); }
.hx-app .hx-result-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 640px) {
    .hx-app .hx-result-grid-2,
    .hx-app .hx-result-grid-3,
    .hx-app .hx-result-grid-4 { grid-template-columns: 1fr; }
}

/* Percentile badge */
.hx-app .hx-percentile-badge {
    display: inline-block;
    background: var(--hx-primary-light);
    color: var(--hx-primary-text);
    padding: 5px 14px;
    border-radius: var(--hx-radius-full);
    font-weight: 700;
    font-size: var(--hx-fs-base);
    margin-top: 0.75rem;
}

/* Progress bar */
.hx-app .hx-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--hx-gray-200);
    border-radius: var(--hx-radius-full);
    overflow: hidden;
    margin: 0.5rem 0;
}

.hx-app .hx-progress-fill {
    height: 100%;
    background: var(--hx-primary);
    border-radius: var(--hx-radius-full);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hx-app .hx-progress-fill-success { background: var(--hx-success); }
.hx-app .hx-progress-fill-warning { background: var(--hx-warning); }
.hx-app .hx-progress-fill-error { background: var(--hx-error); }

/* Confidence interval */
.hx-app .hx-confidence-interval {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--hx-fs-sm);
    color: var(--hx-text-muted);
    margin-top: 0.5rem;
}

.hx-app .hx-confidence-range {
    font-weight: 600;
    color: var(--hx-text-secondary);
}

/* Radial gauge */
.hx-app .hx-gauge {
    position: relative;
    width: 160px;
    height: 80px;
    margin: 0 auto;
    overflow: hidden;
}

.hx-app .hx-gauge svg {
    width: 160px;
    height: 160px;
    transform: translateY(-50%);
}

.hx-app .hx-gauge-value {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--hx-text);
    white-space: nowrap;
}

/* ==========================================================================
   12. STATS
   ========================================================================== */

.hx-app .hx-stats-grid {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.hx-app .hx-stats-grid-2 { grid-template-columns: repeat(2, 1fr); }
.hx-app .hx-stats-grid-3 { grid-template-columns: repeat(3, 1fr); }
.hx-app .hx-stats-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
    .hx-app .hx-stats-grid-3,
    .hx-app .hx-stats-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .hx-app .hx-stats-grid-2,
    .hx-app .hx-stats-grid-3,
    .hx-app .hx-stats-grid-4 { grid-template-columns: 1fr; }
}

.hx-app .hx-stat {
    background: var(--hx-surface);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius-sm);
    padding: 1.25rem;
    text-align: center;
}

.hx-app .hx-stat-card {
    background: var(--hx-gray-50);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius-sm);
    padding: 1.25rem;
    text-align: center;
}

.hx-app .hx-stat-value {
    font-size: var(--hx-fs-2xl);
    font-weight: 800;
    color: var(--hx-text);
    letter-spacing: -0.02em;
    line-height: 1;
    display: block;
    margin-bottom: 0.25rem;
}

.hx-app .hx-stat-label {
    display: block;
    font-size: var(--hx-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hx-text-muted);
    font-weight: 600;
}

.hx-app .hx-stat-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1.25rem;
    background: var(--hx-gray-50);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius-sm);
    margin: 0.75rem 0;
}

.hx-app .hx-stat-inline-label { font-size: var(--hx-fs-base); color: var(--hx-text-secondary); }
.hx-app .hx-stat-inline-value { font-weight: 700; color: var(--hx-text); }

/* ==========================================================================
   13. TABS
   ========================================================================== */

.hx-app .hx-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--hx-border);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.hx-app .hx-tabs::-webkit-scrollbar { display: none; }

.hx-app .hx-tab-btn {
    padding: 12px 16px;
    font-family: var(--hx-font);
    font-weight: 500;
    font-size: var(--hx-fs-base);
    color: var(--hx-text-muted);
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--hx-transition);
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 44px;
    min-width: 44px;
}

.hx-app .hx-tab-btn:hover {
    color: var(--hx-text);
    background: var(--hx-gray-50);
}

.hx-app .hx-tab-btn.active,
.hx-app .hx-tab-btn[aria-selected="true"] {
    color: var(--hx-text);
    font-weight: 700;
    border-bottom-color: var(--hx-primary);
}

.hx-app .hx-tab-content { display: none; }
.hx-app .hx-tab-content.active { display: block; }

/* ==========================================================================
   14. ACCORDION / FAQ
   ========================================================================== */

.hx-app .hx-accordion { display: flex; flex-direction: column; gap: 0.5rem; }

.hx-app .hx-accordion-item {
    border: 1.5px solid var(--hx-border);
    border-radius: var(--hx-radius-sm);
    overflow: hidden;
    transition: border-color var(--hx-transition);
}

.hx-app .hx-accordion-item.open { border-color: var(--hx-border-strong); }

.hx-app .hx-accordion-trigger {
    width: 100%;
    text-align: left;
    padding: 1rem 1.25rem;
    background: var(--hx-surface);
    border: none;
    cursor: pointer;
    font-family: var(--hx-font);
    font-weight: 600;
    font-size: var(--hx-fs-md);
    color: var(--hx-text);
    transition: background var(--hx-transition);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.hx-app .hx-accordion-trigger:hover { background: var(--hx-gray-50); }

.hx-app .hx-accordion-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    transition: transform var(--hx-transition-slow);
    color: var(--hx-text-muted);
}

.hx-app .hx-accordion-item.open .hx-accordion-icon { transform: rotate(180deg); }

.hx-app .hx-accordion-content {
    padding: 0 1.25rem 1rem;
    color: var(--hx-text-secondary);
    line-height: 1.7;
    font-size: var(--hx-fs-base);
}

/* Alpine.js transition helpers */
.hx-app [x-show] { transition: opacity var(--hx-transition-slow), transform var(--hx-transition-slow); }

/* FAQ specific */
.hx-app .hx-faq-section { margin: 3rem 0 2rem; }
.hx-app .hx-faq-list { display: flex; flex-direction: column; gap: 0.5rem; }
.hx-app .hx-faq-item { border: 1.5px solid var(--hx-border); border-radius: var(--hx-radius-sm); overflow: hidden; }
.hx-app .hx-faq-question { width: 100%; text-align: left; padding: 1rem 1.25rem; background: var(--hx-surface); border: none; cursor: pointer; font-weight: 600; font-size: var(--hx-fs-md); color: var(--hx-text); transition: background var(--hx-transition); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.hx-app .hx-faq-question:hover { background: var(--hx-gray-50); }
.hx-app .hx-faq-answer { padding: 0 1.25rem 1rem; color: var(--hx-text-secondary); line-height: 1.7; }

/* ==========================================================================
   15. BADGES & TAGS
   ========================================================================== */

.hx-app .hx-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--hx-radius-full);
    font-size: var(--hx-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Interactive badge variant — for clickable/tappable badges (filter chips, tags, etc.) */
.hx-app .hx-badge-interactive,
.hx-app a.hx-badge,
.hx-app button.hx-badge {
    padding: 8px 12px;
    min-height: 40px;
    min-width: 40px;
    cursor: pointer;
    justify-content: center;
    transition: all var(--hx-transition);
}

.hx-app .hx-badge-interactive:hover,
.hx-app a.hx-badge:hover,
.hx-app button.hx-badge:hover {
    transform: translateY(-1px);
    box-shadow: var(--hx-shadow-sm);
}

/* Level badges (WCAG AA compliant text colors) */
.hx-app .hx-badge-beginner { background: rgba(0,200,83,0.12); color: var(--hx-level-beginner-text); }
.hx-app .hx-badge-intermediate { background: rgba(33,150,243,0.12); color: var(--hx-level-intermediate-text); }
.hx-app .hx-badge-advanced { background: rgba(156,39,176,0.12); color: var(--hx-level-advanced-text); }
.hx-app .hx-badge-elite { background: rgba(255,143,0,0.12); color: var(--hx-level-elite-text); }
.hx-app .hx-badge-world-class { background: var(--hx-primary-light); color: var(--hx-level-world-class-text); border: 1px solid var(--hx-primary); }

/* Status badges (WCAG AA compliant text colors) */
.hx-app .hx-badge-success { background: var(--hx-success-light); color: var(--hx-badge-success-text); }
.hx-app .hx-badge-warning { background: var(--hx-warning-light); color: var(--hx-badge-warning-text); }
.hx-app .hx-badge-error { background: var(--hx-error-light); color: var(--hx-badge-error-text); }
.hx-app .hx-badge-info { background: var(--hx-info-light); color: var(--hx-badge-info-text); }
.hx-app .hx-badge-dark { background: var(--hx-dark-700); color: var(--hx-white); }
.hx-app .hx-badge-primary { background: var(--hx-primary); color: var(--hx-primary-text); }

/* Tags */
.hx-app .hx-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--hx-gray-100);
    color: var(--hx-text-secondary);
    border-radius: var(--hx-radius-sm);
    font-size: var(--hx-fs-xs);
    font-weight: 500;
    gap: 4px;
}

.hx-app .hx-tag-remove {
    cursor: pointer;
    opacity: 0.6;
    font-size: 14px;
    line-height: 1;
}

.hx-app .hx-tag-remove:hover { opacity: 1; }

/* ==========================================================================
   16. ALERTS
   ========================================================================== */

.hx-app .hx-alert {
    padding: 0.875rem 1.25rem;
    border-radius: var(--hx-radius-sm);
    margin: 1rem 0;
    font-size: var(--hx-fs-base);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-left: 4px solid transparent;
}

.hx-app .hx-alert-icon { flex-shrink: 0; font-size: 1.125rem; margin-top: 1px; }

.hx-app .hx-alert-info {
    background: var(--hx-info-light);
    border-left-color: var(--hx-info);
    color: #0B5FB5;
}

.hx-app .hx-alert-success {
    background: var(--hx-success-light);
    border-left-color: var(--hx-success);
    color: #007A31;
}

.hx-app .hx-alert-warning {
    background: var(--hx-warning-light);
    border-left-color: var(--hx-warning);
    color: #7A5500;
}

.hx-app .hx-alert-error {
    background: var(--hx-error-light);
    border-left-color: var(--hx-error);
    color: var(--hx-error);
}

.hx-app .hx-alert-dark {
    background: var(--hx-dark-800);
    border-left-color: var(--hx-primary);
    color: rgba(255,255,255,0.9);
}

/* ==========================================================================
   17. INFO BOXES
   ========================================================================== */

.hx-app .hx-info-box {
    background: var(--hx-gray-50);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius-sm);
    padding: 1.25rem;
    margin: 1.25rem 0;
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
}

.hx-app .hx-info-box-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    margin-top: 1px;
}

.hx-app .hx-info-box-content { flex: 1; }

.hx-app .hx-info-box-title {
    font-weight: 700;
    font-size: var(--hx-fs-base);
    margin-bottom: 0.25rem;
    color: var(--hx-text);
}

.hx-app .hx-tip-box {
    background: var(--hx-primary-soft);
    border: 1px solid rgba(232,255,0,0.3);
    border-radius: var(--hx-radius-sm);
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: var(--hx-fs-base);
}

.hx-app .hx-tip-box .hx-tip-icon {
    flex-shrink: 0;
    font-size: 1.125rem;
}

/* ==========================================================================
   18. STATION CARDS
   ========================================================================== */

.hx-app .hx-station-card {
    background: var(--hx-surface);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius-md);
    overflow: hidden;
    transition: transform var(--hx-transition-slow), box-shadow var(--hx-transition-slow);
    position: relative;
}

.hx-app .hx-station-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--hx-shadow-lg);
}

.hx-app .hx-station-card-top {
    height: 5px;
    background: var(--hx-primary);
}

.hx-app .hx-station-card[data-station="ski-erg"] .hx-station-card-top { background: var(--hx-station-ski); }
.hx-app .hx-station-card[data-station="sled-push"] .hx-station-card-top { background: var(--hx-station-sled); }
.hx-app .hx-station-card[data-station="sled-pull"] .hx-station-card-top { background: var(--hx-station-sled); }
.hx-app .hx-station-card[data-station="burpee-broad-jump"] .hx-station-card-top { background: var(--hx-station-burpee); }
.hx-app .hx-station-card[data-station="rowing"] .hx-station-card-top { background: var(--hx-station-row); }
.hx-app .hx-station-card[data-station="farmers-carry"] .hx-station-card-top { background: var(--hx-station-farmers); }
.hx-app .hx-station-card[data-station="sandbag-lunges"] .hx-station-card-top { background: var(--hx-station-sandbag); }
.hx-app .hx-station-card[data-station="wall-balls"] .hx-station-card-top { background: var(--hx-station-wallball); }

.hx-app .hx-station-card-body { padding: 1.25rem; }

.hx-app .hx-station-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--hx-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    margin-bottom: 0.875rem;
    background: var(--hx-gray-100);
}

.hx-app .hx-station-name {
    font-weight: 700;
    font-size: var(--hx-fs-lg);
    margin-bottom: 0.25rem;
    color: var(--hx-text);
}

.hx-app .hx-station-distance {
    font-size: var(--hx-fs-sm);
    color: var(--hx-text-muted);
    margin-bottom: 0.875rem;
}

.hx-app .hx-station-stats {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.hx-app .hx-station-stat {
    text-align: center;
    flex: 1;
    min-width: 60px;
}

.hx-app .hx-station-stat-value {
    font-size: var(--hx-fs-xl);
    font-weight: 800;
    color: var(--hx-text);
    display: block;
    letter-spacing: -0.02em;
}

.hx-app .hx-station-stat-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hx-text-muted);
    font-weight: 600;
}

/* ==========================================================================
   19. TIMELINE
   ========================================================================== */

.hx-app .hx-timeline { position: relative; padding-left: 2rem; }

.hx-app .hx-timeline::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--hx-border);
}

.hx-app .hx-timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.hx-app .hx-timeline-item:last-child { padding-bottom: 0; }

.hx-app .hx-timeline-dot {
    position: absolute;
    left: -1.625rem;
    top: 0.25rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--hx-border-strong);
    border: 2px solid var(--hx-white);
    box-shadow: 0 0 0 2px var(--hx-border);
}

.hx-app .hx-timeline-item.active .hx-timeline-dot {
    background: var(--hx-primary);
    box-shadow: 0 0 0 2px rgba(232,255,0,0.3);
}

.hx-app .hx-timeline-time {
    font-size: var(--hx-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hx-text-muted);
    margin-bottom: 0.25rem;
}

.hx-app .hx-timeline-title {
    font-weight: 600;
    color: var(--hx-text);
    font-size: var(--hx-fs-base);
    margin-bottom: 0.25rem;
}

.hx-app .hx-timeline-desc {
    font-size: var(--hx-fs-sm);
    color: var(--hx-text-secondary);
    line-height: 1.55;
}

/* ==========================================================================
   20. TRAINING PLAN / WEEKLY SCHEDULE
   ========================================================================== */

.hx-app .hx-weekly-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
    overflow-x: auto;
}

.hx-app .hx-day-card {
    background: var(--hx-surface);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius-sm);
    padding: 0.75rem;
    min-width: 110px;
}

.hx-app .hx-day-label {
    font-size: var(--hx-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hx-text-muted);
    margin-bottom: 0.5rem;
}

.hx-app .hx-day-card.hx-rest-day { background: var(--hx-gray-50); }
.hx-app .hx-day-card.hx-rest-day .hx-day-label { color: var(--hx-gray-400); }

.hx-app .hx-session-pill {
    display: block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--hx-radius-xs);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
    background: var(--hx-primary-soft);
    color: var(--hx-dark-700);
}

.hx-app .hx-session-pill-run { background: rgba(33,150,243,0.12); color: #0B5FB5; }
.hx-app .hx-session-pill-strength { background: rgba(156,39,176,0.12); color: #6A0080; }
.hx-app .hx-session-pill-hyrox { background: var(--hx-primary-soft); color: var(--hx-dark-700); }
.hx-app .hx-session-pill-rest { background: var(--hx-gray-100); color: var(--hx-text-muted); }

/* ==========================================================================
   21. BREADCRUMBS
   ========================================================================== */

.hx-app .hx-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    font-size: var(--hx-fs-xs);
    color: var(--hx-text-muted);
    padding: 0.75rem 0;
    margin-bottom: 0.5rem;
}

.hx-app .hx-breadcrumb-item { display: inline-flex; align-items: center; gap: 0.25rem; }

.hx-app .hx-breadcrumb-item a,
.entry-content.rbct .hx-app .hx-breadcrumb-item a {
    color: var(--hx-text-muted) !important;
    text-decoration: none !important;
    transition: color var(--hx-transition);
}

.hx-app .hx-breadcrumb-item a:hover,
.entry-content.rbct .hx-app .hx-breadcrumb-item a:hover {
    color: var(--hx-text) !important;
}

.hx-app .hx-breadcrumb-sep {
    color: var(--hx-gray-400);
    margin: 0 0.125rem;
    font-size: 0.6875rem;
}

.hx-app .hx-breadcrumb-current { color: var(--hx-text-secondary); font-weight: 500; }

/* ==========================================================================
   22. LOADING STATES
   ========================================================================== */

/* Spinner */
.hx-app .hx-spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2.5px solid rgba(0,0,0,0.1);
    border-top-color: var(--hx-dark-700);
    border-radius: 50%;
    animation: hxSpin 0.65s linear infinite;
}

.hx-app .hx-spinner-sm { width: 1rem; height: 1rem; border-width: 2px; }
.hx-app .hx-spinner-lg { width: 2rem; height: 2rem; border-width: 3px; }
.hx-app .hx-spinner-white { border-color: rgba(255,255,255,0.25); border-top-color: var(--hx-white); }
.hx-app .hx-spinner-yellow { border-color: rgba(232,255,0,0.2); border-top-color: var(--hx-primary); }

@keyframes hxSpin {
    to { transform: rotate(360deg); }
}

/* Skeleton loader */
.hx-app .hx-skeleton {
    background: linear-gradient(90deg, var(--hx-gray-200) 25%, var(--hx-gray-100) 50%, var(--hx-gray-200) 75%);
    background-size: 200% 100%;
    animation: hxSkeletonPulse 1.5s ease-in-out infinite;
    border-radius: var(--hx-radius-xs);
    display: block;
}

@keyframes hxSkeletonPulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.hx-app .hx-skeleton-text { height: 14px; margin-bottom: 8px; }
.hx-app .hx-skeleton-title { height: 22px; margin-bottom: 12px; }
.hx-app .hx-skeleton-card { height: 140px; border-radius: var(--hx-radius-sm); }
.hx-app .hx-skeleton-circle { border-radius: 50%; }

/* Loading overlay */
.hx-app .hx-loading-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    flex-direction: column;
    gap: 1rem;
    color: var(--hx-text-muted);
    font-size: var(--hx-fs-sm);
}

/* ==========================================================================
   23. CHARTS
   ========================================================================== */

.hx-app .hx-chart-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--hx-radius-sm);
    background: var(--hx-surface);
    border: 1px solid var(--hx-border);
    padding: 1.25rem;
}

.hx-app .hx-chart-responsive {
    position: relative;
    width: 100%;
    padding-bottom: 50%;
    height: 0;
}

.hx-app .hx-chart-responsive canvas,
.hx-app .hx-chart-responsive svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.hx-app .hx-chart-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    font-size: var(--hx-fs-sm);
}

.hx-app .hx-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--hx-text-secondary);
}

.hx-app .hx-chart-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ==========================================================================
   24. PAGINATION
   ========================================================================== */

.hx-app .hx-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin: 2rem 0;
}

.hx-app .hx-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--hx-border);
    border-radius: var(--hx-radius-sm);
    font-size: var(--hx-fs-base);
    font-weight: 500;
    color: var(--hx-text-secondary);
    cursor: pointer;
    background: var(--hx-surface);
    transition: all var(--hx-transition);
    font-family: var(--hx-font);
}

.hx-app .hx-page-btn:hover {
    background: var(--hx-gray-100);
    border-color: var(--hx-gray-400);
    color: var(--hx-text);
}

.hx-app .hx-page-btn.active {
    background: var(--hx-dark-900);
    border-color: var(--hx-dark-900);
    color: var(--hx-white);
    font-weight: 700;
}

.hx-app .hx-page-btn-next,
.hx-app .hx-page-btn-prev { width: auto; padding: 0 0.875rem; gap: 0.25rem; }

/* ==========================================================================
   25. SEARCH
   ========================================================================== */

.hx-app .hx-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.hx-app .hx-search-icon {
    position: absolute;
    left: 0.875rem;
    color: var(--hx-text-muted);
    pointer-events: none;
    font-size: 1rem;
}

.hx-app .hx-search-input {
    width: 100%;
    padding: 0.6875rem 0.875rem 0.6875rem 2.625rem;
    border: 1.5px solid var(--hx-border-strong);
    border-radius: var(--hx-radius-full);
    font-family: var(--hx-font);
    font-size: var(--hx-fs-base);
    background: var(--hx-surface);
    color: var(--hx-text);
    transition: border-color var(--hx-transition), box-shadow var(--hx-transition);
}

.hx-app .hx-search-input:focus {
    outline: none;
    border-color: var(--hx-dark-700);
    box-shadow: 0 0 0 3px rgba(26,26,26,0.08);
}

.hx-app .hx-search-clear {
    position: absolute;
    right: 0.875rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--hx-text-muted);
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    padding: 0;
}

/* ==========================================================================
   26. SHARE BUTTON
   ========================================================================== */

.hx-app .hx-share-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--hx-border-strong);
    border-radius: var(--hx-radius-sm);
    background: var(--hx-surface);
    color: var(--hx-text-secondary);
    font-size: var(--hx-fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--hx-transition);
    font-family: var(--hx-font);
}

.hx-app .hx-share-btn:hover {
    background: var(--hx-gray-100);
    color: var(--hx-text);
}

.hx-app .hx-share-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--hx-dark-900);
    color: var(--hx-white);
    padding: 4px 10px;
    border-radius: var(--hx-radius-xs);
    font-size: var(--hx-fs-xs);
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
}

.hx-app .hx-share-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--hx-dark-900);
}

/* ==========================================================================
   27. CTA SECTIONS
   ========================================================================== */

.hx-app .hx-cta-section,
.entry-content.rbct .hx-app .hx-cta-section,
html body .entry-content.rbct .hx-app section.hx-cta-section {
    background: var(--hx-dark-900) !important;
    color: var(--hx-white) !important;
    padding: var(--hx-sp-12) var(--hx-sp-8);
    border-radius: var(--hx-radius-lg);
    text-align: center;
    margin: 0 0 var(--hx-sp-10);
    position: relative;
    overflow: hidden;
}

.hx-app .hx-cta-section h2,
.hx-app .hx-cta-section .hx-cta-title,
.entry-content.rbct .hx-app .hx-cta-section h2,
.entry-content.rbct .hx-app .hx-cta-section .hx-cta-title { color: var(--hx-white) !important; }

.hx-app .hx-cta-section p,
.hx-app .hx-cta-section .hx-cta-desc,
.entry-content.rbct .hx-app .hx-cta-section p { color: rgba(255,255,255,0.75) !important; }

.hx-app .hx-cta-section a > div,
.entry-content.rbct .hx-app .hx-cta-section a > div { color: rgba(255,255,255,0.85) !important; }

@media (max-width: 768px) {
    .hx-app .hx-cta-section {
        padding: var(--hx-sp-8) var(--hx-sp-5);
        margin-bottom: var(--hx-sp-8);
    }
}

.hx-app .hx-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--hx-primary);
}

.hx-app .hx-cta-title {
    font-size: var(--hx-fs-3xl);
    font-weight: 800;
    color: var(--hx-white);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.hx-app .hx-cta-desc {
    color: rgba(255,255,255,0.65);
    font-size: var(--hx-fs-lg);
    margin-bottom: 1.75rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.hx-app .hx-cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   28. SECTION HEADINGS & CONTENT
   ========================================================================== */

.hx-app .hx-section-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--hx-text);
    margin: 0 0 1.25rem;
    padding-bottom: 0.625rem;
    border-bottom: 2px solid var(--hx-border);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.hx-app .hx-section-intro {
    color: var(--hx-text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: -0.5rem 0 1.25rem;
    max-width: 720px;
}

.hx-app .hx-section-heading {
    font-size: var(--hx-fs-2xl);
    font-weight: 700;
    color: var(--hx-text);
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
}

.hx-app .hx-section-heading-sm {
    font-size: var(--hx-fs-lg);
    font-weight: 700;
    color: var(--hx-text);
    margin-bottom: 1rem;
}

.hx-app .hx-section-label {
    font-size: var(--hx-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hx-text-muted);
    margin-bottom: 0.5rem;
    display: block;
}

.hx-app .hx-content-section {
    margin: var(--hx-sp-10) 0;
    line-height: 1.7;
    color: var(--hx-text-secondary);
}

.hx-app .hx-content-section h2 {
    font-size: var(--hx-fs-2xl);
    color: var(--hx-text);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.hx-app .hx-content-section h3 {
    font-size: var(--hx-fs-xl);
    color: var(--hx-text);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.hx-app .hx-content-body { line-height: 1.75; color: var(--hx-text-secondary); }
/* Guide article: full container width for hero + grids. Prose sections stay readable. */
.hx-app .hx-guide-page { max-width: none; margin: 0; }
.hx-app .hx-guide-page > .hx-content-section,
.hx-app .hx-guide-page > section:not([class*="hx-hero"]):not([class*="hx-page-header"]) {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   29. SPECS CARD
   ========================================================================== */

.hx-app .hx-specs-card {
    background: var(--hx-gray-50);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius-md);
    padding: var(--hx-sp-6);
    margin-bottom: var(--hx-sp-6);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--hx-sp-5);
}

.hx-app .hx-specs-item { text-align: center; }

.hx-app .hx-specs-label {
    display: block;
    font-size: var(--hx-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hx-text-muted);
    font-weight: 600;
    margin-bottom: var(--hx-sp-1);
}

.hx-app .hx-specs-value {
    font-size: var(--hx-fs-xl);
    font-weight: 800;
    color: var(--hx-text);
    letter-spacing: -0.02em;
}

/* ==========================================================================
   30. FOOTER
   ========================================================================== */

.hx-app .hx-footer,
.entry-content.rbct .hx-app .hx-footer {
    background: var(--hx-dark-900) !important;
    color: rgba(255,255,255,0.6) !important;
    padding: 2rem 1.5rem;
    margin-top: var(--hx-sp-8);
    border-radius: 0 0 var(--hx-radius) var(--hx-radius);
    font-size: var(--hx-fs-sm);
}

.hx-app .hx-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.hx-app .hx-footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }

.hx-app .hx-footer-links a,
.entry-content.rbct .hx-app .hx-footer-links a {
    color: rgba(255,255,255,0.5) !important;
    font-size: var(--hx-fs-sm);
    text-decoration: none !important;
    transition: color var(--hx-transition);
}

.hx-app .hx-footer-links a:hover,
.entry-content.rbct .hx-app .hx-footer-links a:hover {
    color: var(--hx-white) !important;
}

/* ==========================================================================
   31. UTILITIES
   ========================================================================== */

/* Spacing */
.hx-app .hx-mt-1 { margin-top: var(--hx-sp-1); }
.hx-app .hx-mt-2 { margin-top: var(--hx-sp-2); }
.hx-app .hx-mt-4 { margin-top: var(--hx-sp-4); }
.hx-app .hx-mt-6 { margin-top: var(--hx-sp-6); }
.hx-app .hx-mt-8 { margin-top: var(--hx-sp-8); }
.hx-app .hx-mb-2 { margin-bottom: var(--hx-sp-2); }
.hx-app .hx-mb-4 { margin-bottom: var(--hx-sp-4); }
.hx-app .hx-mb-6 { margin-bottom: var(--hx-sp-6); }
.hx-app .hx-mb-8 { margin-bottom: var(--hx-sp-8); }
.hx-app .hx-mb-12 { margin-bottom: var(--hx-sp-12); }
.hx-app .hx-p-4 { padding: var(--hx-sp-4); }
.hx-app .hx-p-6 { padding: var(--hx-sp-6); }

/* Text */
.hx-app .hx-text-xs { font-size: var(--hx-fs-xs); }
.hx-app .hx-text-sm { font-size: var(--hx-fs-sm); }
.hx-app .hx-text-base { font-size: var(--hx-fs-base); }
.hx-app .hx-text-lg { font-size: var(--hx-fs-lg); }
.hx-app .hx-text-xl { font-size: var(--hx-fs-xl); }
.hx-app .hx-text-muted { color: var(--hx-text-muted) !important; }
.hx-app .hx-text-secondary { color: var(--hx-text-secondary); }
.hx-app .hx-text-center { text-align: center; }
.hx-app .hx-text-right { text-align: right; }
.hx-app .hx-font-bold { font-weight: 700; }
.hx-app .hx-font-extrabold { font-weight: 800; }

/* Display */
.hx-app .hx-flex { display: flex; }
.hx-app .hx-flex-col { flex-direction: column; }
.hx-app .hx-items-center { align-items: center; }
.hx-app .hx-justify-between { justify-content: space-between; }
.hx-app .hx-justify-center { justify-content: center; }
.hx-app .hx-gap-2 { gap: var(--hx-sp-2); }
.hx-app .hx-gap-4 { gap: var(--hx-sp-4); }
.hx-app .hx-gap-6 { gap: var(--hx-sp-6); }
.hx-app .hx-flex-wrap { flex-wrap: wrap; }
.hx-app .hx-flex-1 { flex: 1; }
.hx-app .hx-hidden { display: none !important; }
.hx-app .hx-block { display: block; }
.hx-app .hx-w-full { width: 100%; }

/* Colors */
.hx-app .hx-text-primary { color: var(--hx-primary-dark); }
.hx-app .hx-text-success { color: var(--hx-success); }
.hx-app .hx-text-error { color: var(--hx-error); }
.hx-app .hx-text-warning { color: var(--hx-warning); }
.hx-app .hx-bg-surface { background: var(--hx-surface); }
.hx-app .hx-bg-gray { background: var(--hx-gray-50); }
.hx-app .hx-bg-dark { background: var(--hx-dark-900); color: var(--hx-white); }

/* Borders */
.hx-app .hx-border { border: 1px solid var(--hx-border); }
.hx-app .hx-border-top { border-top: 1px solid var(--hx-border); }
.hx-app .hx-border-bottom { border-bottom: 1px solid var(--hx-border); }
.hx-app .hx-rounded { border-radius: var(--hx-radius); }
.hx-app .hx-rounded-sm { border-radius: var(--hx-radius-sm); }
.hx-app .hx-rounded-full { border-radius: var(--hx-radius-full); }

/* Divider */
.hx-app .hx-divider {
    border: none;
    border-top: 1px solid var(--hx-border);
    margin: 1.5rem 0;
}

/* ==========================================================================
   32. COMPARE TABLE (side-by-side)
   ========================================================================== */

.hx-app .hx-compare-table { width: 100%; border-collapse: collapse; }

.hx-app .hx-compare-table th,
.hx-app .hx-compare-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--hx-border);
    text-align: left;
}

.hx-app .hx-compare-table thead th,
.entry-content.rbct .hx-app .hx-compare-table thead th {
    background: var(--hx-dark-900) !important;
    color: var(--hx-white) !important;
    font-weight: 700;
}

.hx-app .hx-compare-table .hx-feature-col {
    font-weight: 500;
    color: var(--hx-text-secondary);
    width: 40%;
}

.hx-app .hx-compare-check { color: var(--hx-success); font-size: 1.125rem; }
.hx-app .hx-compare-cross { color: var(--hx-error); font-size: 1.125rem; }

/* ==========================================================================
   33. FILTER CONTROLS
   ========================================================================== */

.hx-app .hx-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.25rem;
}

.hx-app .hx-filter-btn {
    padding: 0.375rem 0.875rem;
    border: 1.5px solid var(--hx-border-strong);
    border-radius: var(--hx-radius-full);
    background: var(--hx-surface);
    color: var(--hx-text-secondary);
    font-size: var(--hx-fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--hx-transition);
    font-family: var(--hx-font);
}

.hx-app .hx-filter-btn:hover {
    background: var(--hx-gray-100);
    color: var(--hx-text);
}

.hx-app .hx-filter-btn.active {
    background: var(--hx-dark-900);
    color: var(--hx-white);
    border-color: var(--hx-dark-900);
}

/* ==========================================================================
   34. EMPTY STATES
   ========================================================================== */

.hx-app .hx-empty-state {
    text-align: center;
    padding: var(--hx-sp-12) var(--hx-sp-6);
    color: var(--hx-text-muted);
}

.hx-app .hx-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
.hx-app .hx-empty-title { font-size: var(--hx-fs-xl); font-weight: 700; color: var(--hx-text); margin-bottom: 0.5rem; }
.hx-app .hx-empty-desc { font-size: var(--hx-fs-base); max-width: 400px; margin: 0 auto; }

/* ==========================================================================
   35. MODALS / OVERLAYS
   ========================================================================== */

.hx-app .hx-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(2px);
}

.hx-app .hx-modal {
    background: var(--hx-surface);
    border-radius: var(--hx-radius-lg);
    box-shadow: var(--hx-shadow-xl);
    width: 100%;
    max-width: 540px;
    overflow: hidden;
    animation: hxFadeSlideUp 0.2s ease-out;
}

.hx-app .hx-modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--hx-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hx-app .hx-modal-title { font-weight: 700; font-size: var(--hx-fs-lg); color: var(--hx-text); }

.hx-app .hx-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--hx-text-muted);
    font-size: 1.375rem;
    padding: 0.125rem;
    display: flex;
    align-items: center;
}

.hx-app .hx-modal-body { padding: 1.5rem; }
.hx-app .hx-modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--hx-border); display: flex; gap: 0.75rem; justify-content: flex-end; }

/* ==========================================================================
   36. TOOLTIPS
   ========================================================================== */

.hx-app [data-tooltip] { position: relative; cursor: help; }

.hx-app [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--hx-dark-900);
    color: var(--hx-white);
    padding: 5px 10px;
    border-radius: var(--hx-radius-xs);
    font-size: var(--hx-fs-xs);
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--hx-transition-fast);
    z-index: 50;
}

.hx-app [data-tooltip]:hover::after { opacity: 1; }

/* ==========================================================================
   37. RACE DAY / SPLIT TABLE
   ========================================================================== */

.hx-app .hx-split-table { width: 100%; border-collapse: collapse; }
.hx-app .hx-split-table th,
.hx-app .hx-split-table td { padding: 0.625rem 1rem; border-bottom: 1px solid var(--hx-border); text-align: left; }
.hx-app .hx-split-table thead th,
.entry-content.rbct .hx-app .hx-split-table thead th { background: var(--hx-dark-900) !important; color: var(--hx-white) !important; font-size: var(--hx-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

.hx-app .hx-split-run { color: #0B5FB5; font-weight: 600; }
.hx-app .hx-split-station { color: var(--hx-dark-700); font-weight: 600; }
.hx-app .hx-split-cumulative { color: var(--hx-text-muted); font-size: var(--hx-fs-sm); }

/* ==========================================================================
   38. CALCULATOR SECTIONS (specific layout)
   ========================================================================== */

.hx-app .hx-calc-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 768px) {
    .hx-app .hx-calc-layout { grid-template-columns: 1fr; }
}

.hx-app .hx-calc-form-panel {
    background: var(--hx-surface);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius-md);
    padding: 1.75rem;
}

.hx-app .hx-calc-results-panel {
    background: var(--hx-surface);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius-md);
    padding: 1.75rem;
    position: sticky;
    top: 80px;
}

.hx-app .hx-calc-title {
    font-size: var(--hx-fs-xl);
    font-weight: 700;
    color: var(--hx-text);
    margin-bottom: 0.25rem;
    letter-spacing: -0.01em;
}

.hx-app .hx-calc-subtitle {
    font-size: var(--hx-fs-sm);
    color: var(--hx-text-muted);
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   39. NOTIFICATION / TOAST
   ========================================================================== */

.hx-app .hx-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background: var(--hx-dark-900);
    color: var(--hx-white);
    padding: 0.875rem 1.25rem;
    border-radius: var(--hx-radius-sm);
    box-shadow: var(--hx-shadow-xl);
    z-index: 10000;
    font-size: var(--hx-fs-base);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    max-width: 360px;
    animation: hxFadeSlideUp 0.25s ease-out;
}

.hx-app .hx-toast-success { border-left: 4px solid var(--hx-success); }
.hx-app .hx-toast-error { border-left: 4px solid var(--hx-error); }
.hx-app .hx-toast-info { border-left: 4px solid var(--hx-primary); }

/* ==========================================================================
   40. RESPONSIVE OVERRIDES
   ========================================================================== */

/* --- Global overflow prevention --- */
.hx-app {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

.hx-app * {
    box-sizing: border-box;
}

/* Exception: tables with intentional horizontal scroll */
.hx-app .hx-table-responsive *,
.hx-app .hx-table-wrap *,
.hx-app .hx-table-wrapper *,
.hx-app .hx-heatmap-table-wrapper * {
    max-width: none;
}

/* Images */
.hx-app img {
    max-width: 100%;
    height: auto;
}

/* Pre/code blocks */
.hx-app pre,
.hx-app code {
    overflow-x: auto;
    max-width: 100%;
    word-wrap: break-word;
}

/* --- Safe area insets (notched phones) --- */
@supports (padding: env(safe-area-inset-top)) {
    .hx-app .hx-nav {
        padding-top: env(safe-area-inset-top);
    }

    .hx-app .hx-footer {
        padding-bottom: max(var(--hx-sp-8, 2rem), env(safe-area-inset-bottom));
    }

    .hx-app .hx-mobile-nav {
        padding-top: env(safe-area-inset-top);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* --- Container safe area padding --- */
@supports (padding: max(0px)) {
    .hx-app .hx-container {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    @media (max-width: 640px) {
        .hx-app .hx-container {
            padding-left: max(0.75rem, env(safe-area-inset-left));
            padding-right: max(0.75rem, env(safe-area-inset-right));
        }
    }
}

/* --- Mobile nav drawer --- */
.hx-app .hx-mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: min(85vw, 320px);
    height: 100vh;
    height: 100dvh;
    background: var(--hx-secondary, #1A1A2E);
    z-index: var(--hx-z-nav, 1000);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.hx-app .hx-mobile-nav.hx-nav-open {
    transform: translateX(0);
}

.hx-app .hx-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: calc(var(--hx-z-nav, 1000) - 1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.hx-app .hx-nav-backdrop.hx-nav-open {
    opacity: 1;
    visibility: visible;
}

/* Nav link touch targets */
.hx-app .hx-mobile-nav a,
.hx-app .hx-mobile-nav button {
    display: block;
    padding: 12px 1.5rem;
    min-height: 44px;
    font-size: var(--hx-fs-base);
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.hx-app .hx-mobile-nav a:active,
.hx-app .hx-mobile-nav button:active {
    background: rgba(255,255,255,0.05);
}

/* --- 1200px: Standard Desktop --- */
@media (max-width: 1200px) {
    .hx-app { font-size: 15px; }
}

/* --- 1024px: Small Desktop / Tablet Landscape --- */
@media (max-width: 1024px) {
    .hx-app .hx-calc-layout { grid-template-columns: 1fr; }
    .hx-app .hx-calc-results-panel { position: static; }
    .hx-app .hx-bento-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- 768px: Tablet Portrait --- */
@media (max-width: 768px) {
    .hx-app .hx-section-heading { font-size: var(--hx-fs-xl); }
    .hx-app .hx-hero-title { font-size: var(--hx-fs-3xl); }
    .hx-app .hx-cta-title { font-size: var(--hx-fs-2xl); }
    .hx-app .hx-weekly-grid { grid-template-columns: repeat(4, 1fr); }
    .hx-app .hx-modal { max-width: 100%; margin: 0; border-radius: var(--hx-radius-lg) var(--hx-radius-lg) 0 0; }
    .hx-app .hx-modal-backdrop { align-items: flex-end; padding: 0; }

    /* Tables: hide tablet-priority columns */
    .hx-app .hx-table .hx-col-hide-tablet { display: none; }

    /* Tables: slightly compact */
    .hx-app .hx-table th,
    .hx-app .hx-table td { padding: 0.625rem 0.75rem; }

    /* Split expansion: 4-column grid */
    .hx-app .hx-split-grid { grid-template-columns: repeat(4, 1fr); }

    /* Heatmap: sticky station column */
    .hx-app .hx-heatmap-station-col {
        position: sticky;
        left: 0;
        background: var(--hx-surface);
        z-index: 2;
        box-shadow: 2px 0 4px rgba(0,0,0,0.05);
    }
    .hx-app .hx-heatmap-cell { min-width: 70px; padding: var(--hx-space-2, 0.5rem); font-size: var(--hx-fs-xs); }
    .hx-app .hx-heatmap-table th { font-size: 10px; padding: var(--hx-space-2, 0.5rem); }

    /* Heatmap legend: wrap */
    .hx-app .hx-heatmap-legend { flex-wrap: wrap; gap: var(--hx-space-2, 0.5rem); }

    /* Athlete popover: disabled on touch */
    .hx-app .hx-athlete-popover { display: none; }
}

/* --- 640px: Standard Mobile --- */
@media (max-width: 640px) {
    /* Layout */
    .hx-app .hx-hero-title { font-size: var(--hx-fs-2xl); }
    .hx-app .hx-result-value-xl { font-size: 2.25rem; }
    .hx-app .hx-cta-section { padding: var(--hx-sp-8) var(--hx-sp-4); }
    .hx-app .hx-specs-card { grid-template-columns: repeat(2, 1fr); }

    /* Page header dark */
    .hx-app .hx-page-header-dark { flex-direction: column; padding: 1.5rem; }
    .hx-app .hx-hero-icon { width: 80px; height: 80px; }

    /* Page title: fluid */
    .hx-app .hx-page-title { font-size: clamp(20px, 5vw, 28px); }

    /* Tables: compact cells */
    .hx-app .hx-table th,
    .hx-app .hx-table td { padding: 0.5rem 0.625rem; font-size: var(--hx-fs-sm); }

    /* Tables: edge-to-edge scroll */
    .hx-app .hx-table-responsive,
    .hx-app .hx-table-wrap,
    .hx-app .hx-table-wrapper {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        width: calc(100% + 1.5rem);
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* Tables: scroll shadow hint */
    .hx-app .hx-table-responsive::after,
    .hx-app .hx-table-wrap::after,
    .hx-app .hx-table-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.8));
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.2s;
    }

    .hx-app .hx-table-responsive.hx-scroll-end::after,
    .hx-app .hx-table-wrap.hx-scroll-end::after,
    .hx-app .hx-table-wrapper.hx-scroll-end::after {
        opacity: 0;
    }

    /* Tables: hide mobile-priority columns */
    .hx-app .hx-table .hx-col-hide-mobile { display: none; }

    /* Split expansion: 2-column grid */
    .hx-app .hx-split-grid { grid-template-columns: 1fr 1fr; gap: var(--hx-space-1, 0.25rem); padding: var(--hx-space-2, 0.5rem); }
    .hx-app .hx-split-label { font-size: var(--hx-fs-2xs, 0.625rem); }
    .hx-app .hx-split-time { font-size: var(--hx-fs-xs, 0.75rem); }

    /* Heatmap: switch to card layout */
    .hx-app .hx-heatmap-table-wrapper { display: none; }
    .hx-app .hx-heatmap-cards { display: flex; flex-direction: column; gap: var(--hx-space-3, 0.75rem); }
    .hx-app .hx-heatmap-legend { justify-content: center; margin-top: var(--hx-space-4, 1rem); }

    /* Podium: compact */
    .hx-app .hx-podium { gap: var(--hx-space-2, 0.5rem); }
    .hx-app .hx-podium-slot { min-width: 80px; }
    .hx-app .hx-podium-name { font-size: var(--hx-fs-xs); }

    /* Calculator form */
    .hx-app .hx-calc-form { padding: 1rem; }

    /* Form rows: stack */
    .hx-app .hx-form-row { flex-direction: column; }
    .hx-app .hx-form-row-2col { grid-template-columns: 1fr; }

    /* Stats grids: single column */
    .hx-app .hx-stats-grid-2,
    .hx-app .hx-stats-grid-3 { grid-template-columns: 1fr; }

    /* Footer: stack */
    .hx-app .hx-footer-inner { flex-direction: column; text-align: center; }

    /* Bento grid: single column */
    .hx-app .hx-bento-grid { grid-template-columns: 1fr; }
    .hx-app .hx-bento-wide,
    .hx-app .hx-bento-tall,
    .hx-app .hx-bento-full { grid-column: span 1; grid-row: span 1; }

    /* Athlete link: narrower on mobile */
    .hx-app .hx-athlete-link { max-width: 140px; }

    /* Container padding: tighter */
    .hx-app .hx-container { padding: 0 0.75rem; }
}

/* --- 480px: Very Small Mobile --- */
@media (max-width: 480px) {
    .hx-app .hx-weekly-grid { grid-template-columns: repeat(2, 1fr); }
    .hx-app .hx-tabs { flex-wrap: nowrap; overflow-x: auto; }
    .hx-app .hx-stats-grid-2 { grid-template-columns: 1fr; }

    /* Podium: ultra-compact */
    .hx-app .hx-podium { gap: var(--hx-space-1, 0.25rem); }
    .hx-app .hx-podium-slot { min-width: 70px; }
    .hx-app .hx-podium-name { font-size: 11px; }
    .hx-app .hx-podium-bar--1st { height: 60px; }
    .hx-app .hx-podium-bar--2nd { height: 40px; }
    .hx-app .hx-podium-bar--3rd { height: 28px; }

    /* Division tabs: smaller */
    .hx-app .hx-tab-btn { padding: 0.5rem 0.75rem; font-size: var(--hx-fs-xs); }

    /* Compare tables: card reflow */
    .hx-app .hx-compare-table thead { display: none; }
    .hx-app .hx-compare-table tr {
        display: block;
        margin-bottom: var(--hx-space-4, 1rem);
        border: 1px solid var(--hx-border);
        border-radius: var(--hx-radius-sm);
        padding: var(--hx-space-3, 0.75rem);
    }
    .hx-app .hx-compare-table td {
        display: flex;
        justify-content: space-between;
        padding: var(--hx-space-2, 0.5rem) 0;
        border-bottom: 1px solid var(--hx-gray-100);
    }
    .hx-app .hx-compare-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: var(--hx-fs-sm);
        color: var(--hx-text-muted);
    }
}

/* --- 769px+: Desktop-Up --- */
@media (min-width: 769px) {
    /* Tables: no scroll needed, all columns visible */
    .hx-app .hx-table-responsive,
    .hx-app .hx-table-wrap,
    .hx-app .hx-table-wrapper { overflow-x: visible; }

    .hx-app .hx-table .hx-col-hide-mobile,
    .hx-app .hx-table .hx-col-hide-tablet { display: table-cell; }

    /* Split grid: 8 columns */
    .hx-app .hx-split-grid { grid-template-columns: repeat(8, 1fr); }

    /* Heatmap: show table, hide cards */
    .hx-app .hx-heatmap-cards { display: none; }
    .hx-app .hx-heatmap-table-wrapper { display: block; }
}

/* --- 1024px+: Nav Desktop --- */
@media (min-width: 1024px) {
    .hx-app .hx-nav-links { display: flex; }
    .hx-app .hx-nav-search-inline { display: flex; }
    .hx-app .hx-nav-hamburger { display: none; }
}

/* ==========================================================================
   41. PRINT STYLES
   ========================================================================== */

@media print {
    .hx-app .hx-nav,
    .hx-app .hx-footer,
    .hx-app .hx-mobile-toggle,
    .hx-app .hx-btn,
    .hx-app .hx-faq-section,
    .hx-app .hx-share-btn,
    .hx-app .hx-cta-section {
        display: none !important;
    }

    .hx-app {
        font-size: 12pt;
        color: #000;
    }

    .hx-app .hx-result-hero,
    .hx-app .hx-result-card,
    .hx-app .hx-stat-card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }

    .hx-app .hx-result-value-xl,
    .hx-app .hx-result-value-lg {
        color: #000 !important;
    }

    .hx-app .hx-table-responsive { overflow: visible; }

    .hx-app .hx-table thead th {
        background: #333 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ==========================================================================
   42. ANIMATIONS & TRANSITIONS
   ========================================================================== */

/* Result reveal */
@keyframes hxResultReveal {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.hx-app .hx-animate-reveal { animation: hxResultReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1); }

/* Number count-up (triggered via JS) */
@keyframes hxCountUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.hx-app .hx-animate-count { animation: hxCountUp 0.5s cubic-bezier(0.16, 1, 0.3, 1); }

/* Slide down (accordion) */
@keyframes hxSlideDown {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 800px; }
}

/* Smooth hover lift for cards */
.hx-app .hx-calc-card,
.hx-app .hx-station-card,
.hx-app .hx-card--lift {
    will-change: transform;
}

/* Focus visible outline — dark outline for visibility on light surfaces */
.hx-app :focus-visible {
    outline: 2px solid var(--hx-dark-700);
    outline-offset: 2px;
}

/* ==========================================================================
   43. ALPINE.JS HELPERS
   ========================================================================== */

[x-cloak] { display: none !important; }

.hx-app .hx-transition-enter { transition: opacity 0.2s ease, transform 0.2s ease; }
.hx-app .hx-transition-enter-from { opacity: 0; transform: translateY(-4px); }
.hx-app .hx-transition-enter-to { opacity: 1; transform: translateY(0); }
.hx-app .hx-transition-leave { transition: opacity 0.15s ease; }
.hx-app .hx-transition-leave-from { opacity: 1; }
.hx-app .hx-transition-leave-to { opacity: 0; }

/* ==========================================================================
   44. FLAG ICONS (flagcdn.com)
   ========================================================================== */

.hx-app .hx-flag {
    display: inline-block;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

/* ==========================================================================
   45. NUTRITION / ZONE INDICATORS
   ========================================================================== */

.hx-app .hx-zone-z1 { background: #E3F2FD; color: #0D47A1; border-left: 3px solid #2196F3; }
.hx-app .hx-zone-z2 { background: #E8F5E9; color: #1B5E20; border-left: 3px solid #4CAF50; }
.hx-app .hx-zone-z3 { background: #FFF8E1; color: #E65100; border-left: 3px solid #FFB300; }
.hx-app .hx-zone-z4 { background: #FBE9E7; color: #BF360C; border-left: 3px solid #FF5722; }
.hx-app .hx-zone-z5 { background: #FCE4EC; color: #880E4F; border-left: 3px solid #E91E63; }

.hx-app .hx-zone-row {
    padding: 0.625rem 1rem;
    border-radius: var(--hx-radius-xs);
    margin-bottom: 0.375rem;
    font-size: var(--hx-fs-base);
    font-weight: 500;
}

/* ==========================================================================
   46. PERFORMANCE CATEGORY CHIPS
   ========================================================================== */

.hx-app .hx-perf-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: var(--hx-radius-full);
    font-size: var(--hx-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hx-app .hx-perf-novice { background: rgba(176,190,197,0.2); color: #546E7A; }
.hx-app .hx-perf-beginner { background: rgba(0,200,83,0.12); color: #007A31; }
.hx-app .hx-perf-intermediate { background: rgba(33,150,243,0.12); color: #0B5FB5; }
.hx-app .hx-perf-advanced { background: rgba(156,39,176,0.12); color: #6A0080; }
.hx-app .hx-perf-elite { background: rgba(255,143,0,0.12); color: #8A5000; }

/* ==========================================================================
   47. FOXIZ THEME OVERRIDES
   Reset Foxiz/rbct wrappers that inject whitespace around the HYROX app.
   ========================================================================== */

/* Reset outer rbct/entry-content margins so they don't push hx-app */
.entry-content.rbct {
    padding: 0 !important;
    margin: 0 !important;
}

/* article.page-content injects padding on Foxiz pages */
article.page-content {
    padding: 0 !important;
}

/* .grid-container constrains max-width — remove inside hx-app context */
.grid-container:has(.hx-app),
.hx-app ~ .grid-container,
.grid-container .hx-app {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Mobile: Foxiz .s-ct injects side padding that collapses mobile layout */
@media (max-width: 768px) {
    .without-sidebar .s-ct:has(.hx-app),
    .s-ct:has(.hx-app) {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

/* Ensure links inside hx-app are never styled by Foxiz global a rules */
.rbct .hx-app a,
.entry-content .hx-app a {
    text-decoration: none !important;
    color: var(--hx-text) !important;
    box-shadow: none !important;
}

.rbct .hx-app a:hover,
.entry-content .hx-app a:hover {
    color: var(--hx-dark-700) !important;
    text-decoration: none !important;
}

/* Foxiz injects border-bottom on headings inside entry-content */
.entry-content .hx-app h1,
.entry-content .hx-app h2,
.entry-content .hx-app h3,
.entry-content .hx-app h4,
.entry-content .hx-app h5,
.entry-content .hx-app h6 {
    border: none !important;
    padding: 0 !important;
    background: none !important;
}

/* Foxiz adds border/background to tables in entry-content */
.entry-content .hx-app table {
    border-collapse: collapse !important;
    background: none !important;
    border: none !important;
    border-spacing: 0 !important;
}

.entry-content .hx-app table th,
.entry-content .hx-app table td {
    border: none !important;
    background: none !important;
}
.hx-app .hx-perf-world-class { background: var(--hx-primary-light); color: var(--hx-dark-600); border: 1px solid rgba(232,255,0,0.4); }

/* =====================================================
   48. Data Pages - Races, Athletes, Leaderboard
   ===================================================== */

/* Loading / Error / Empty states */
.hx-app .hx-loading-state {
    text-align: center;
    padding: var(--hx-sp-12) var(--hx-sp-4);
    color: var(--hx-text-muted);
}
.hx-app .hx-loading-state .hx-spinner {
    margin: 0 auto var(--hx-sp-4);
    width: 2rem;
    height: 2rem;
}
.hx-app .hx-error-state {
    text-align: center;
    padding: var(--hx-sp-8);
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--hx-radius-lg);
    color: #991b1b;
    margin-bottom: var(--hx-sp-6);
}
.hx-app .hx-error-state .hx-btn { margin-top: var(--hx-sp-3); }
.hx-app .hx-empty-state {
    text-align: center;
    padding: var(--hx-sp-12) var(--hx-sp-4);
    color: var(--hx-text-muted);
}
.hx-app .hx-empty-state .hx-btn { margin-top: var(--hx-sp-3); }
.hx-app .hx-results-meta {
    margin-bottom: var(--hx-sp-4);
    font-size: var(--hx-fs-sm);
    color: var(--hx-text-muted);
}
.hx-app .hx-results-count strong { color: var(--hx-text); }

/* Search prompt (athletes) */
.hx-app .hx-search-prompt {
    text-align: center;
    padding: var(--hx-sp-12) var(--hx-sp-4);
    color: var(--hx-text-muted);
}
.hx-app .hx-search-prompt-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto var(--hx-sp-4);
    display: block;
    color: var(--hx-border);
}
.hx-app .hx-search-spinner {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
}
.hx-app .hx-search-spinner .hx-spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

/* Season tabs */
.hx-app .hx-season-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hx-sp-2);
    margin-bottom: var(--hx-sp-4);
}
.hx-app .hx-season-tab {
    padding: 0.5rem 1rem;
    border-radius: var(--hx-radius-full);
    border: 1px solid var(--hx-border);
    background: var(--hx-surface);
    cursor: pointer;
    font-size: var(--hx-fs-sm);
    font-weight: 500;
    transition: all 0.15s;
}
.hx-app .hx-season-tab:hover { border-color: var(--hx-primary); }
.hx-app .hx-season-tab.active,
.hx-app .hx-season-tab[aria-selected="true"] {
    background: var(--hx-primary);
    color: var(--hx-dark-900);
    border-color: var(--hx-primary);
    font-weight: 600;
}

/* Races grid */
.hx-app .hx-races-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--hx-sp-4);
    margin-bottom: var(--hx-sp-6);
}
.hx-app .hx-race-card {
    display: block;
    background: var(--hx-surface);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius-lg);
    padding: var(--hx-sp-5);
    text-decoration: none;
    color: var(--hx-text);
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.hx-app .hx-race-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--hx-primary);
    opacity: 0;
    transition: opacity 0.2s;
}
.hx-app .hx-race-card:hover {
    border-color: var(--hx-primary);
    box-shadow: var(--hx-shadow-md);
    transform: translateY(-2px);
}
.hx-app .hx-race-card:hover::before { opacity: 1; }
.hx-app .hx-race-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--hx-sp-3);
}
.hx-app .hx-race-card-season {
    font-size: var(--hx-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hx-primary-dark);
    background: var(--hx-primary-light);
    padding: 2px 8px;
    border-radius: var(--hx-radius-full);
}
.hx-app .hx-race-card-date {
    font-size: var(--hx-fs-xs);
    color: var(--hx-text-muted);
}
.hx-app .hx-race-card-location {
    display: flex;
    align-items: center;
    gap: var(--hx-sp-2);
    margin-bottom: var(--hx-sp-1);
    font-size: var(--hx-fs-sm);
    color: var(--hx-text-muted);
}
.hx-app .hx-race-card-name {
    font-weight: 600;
    font-size: var(--hx-fs-lg);
    margin-bottom: var(--hx-sp-3);
    text-transform: capitalize;
}
.hx-app .hx-race-card-stats {
    display: flex;
    gap: var(--hx-sp-4);
    border-top: 1px solid var(--hx-border);
    padding-top: var(--hx-sp-3);
}
.hx-app .hx-race-stat { text-align: center; flex: 1; }
.hx-app .hx-race-stat-value {
    display: block;
    font-weight: 700;
    font-size: var(--hx-fs-lg);
    color: var(--hx-text);
}
.hx-app .hx-race-stat-label {
    font-size: var(--hx-fs-xs);
    color: var(--hx-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Athletes grid */
.hx-app .hx-athletes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--hx-sp-4);
    margin-bottom: var(--hx-sp-6);
}
.hx-app .hx-athlete-card {
    display: flex;
    align-items: center;
    gap: var(--hx-sp-4);
    background: var(--hx-surface);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius-lg);
    padding: var(--hx-sp-4);
    text-decoration: none;
    color: var(--hx-text);
    transition: all 0.2s;
}
.hx-app .hx-athlete-card:hover {
    border-color: var(--hx-primary);
    box-shadow: var(--hx-shadow-md);
    transform: translateY(-1px);
}
.hx-app .hx-athlete-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--hx-dark-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hx-app .hx-avatar-initials {
    font-weight: 700;
    font-size: var(--hx-fs-sm);
    color: var(--hx-text-muted);
}
.hx-app .hx-athlete-card-info { flex: 1; min-width: 0; }
.hx-app .hx-athlete-card-name {
    font-weight: 600;
    font-size: var(--hx-fs-base);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hx-app .hx-athlete-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hx-sp-3);
    font-size: var(--hx-fs-xs);
    color: var(--hx-text-muted);
}
.hx-app .hx-athlete-nationality { display: flex; align-items: center; gap: 4px; }
.hx-app .hx-athlete-mini-stat { display: flex; align-items: center; gap: 4px; }
.hx-app .hx-athlete-mini-stat-label { color: var(--hx-text-muted); }
.hx-app .hx-athlete-mini-stat-value { font-weight: 600; color: var(--hx-text); }

/* Pagination */
.hx-app .hx-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--hx-sp-3);
    padding: var(--hx-sp-6) 0;
}
.hx-app .hx-pagination-btn {
    padding: 0.5rem 1rem;
    border-radius: var(--hx-radius-md);
    border: 1px solid var(--hx-border);
    background: var(--hx-surface);
    cursor: pointer;
    font-size: var(--hx-fs-sm);
    font-weight: 500;
    color: var(--hx-text);
    transition: all 0.15s;
}
.hx-app .hx-pagination-btn:hover:not(:disabled) {
    border-color: var(--hx-primary);
    background: var(--hx-primary-light);
}
.hx-app .hx-pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.hx-app .hx-pagination-info {
    font-size: var(--hx-fs-sm);
    color: var(--hx-text-muted);
}

@media (max-width: 640px) {
    .hx-app .hx-races-grid { grid-template-columns: 1fr; }
    .hx-app .hx-athletes-grid { grid-template-columns: 1fr; }
    .hx-app .hx-season-tabs { gap: var(--hx-sp-1); }
    .hx-app .hx-season-tab { padding: 0.375rem 0.75rem; font-size: 0.75rem; }
}

/* ==========================================================================
   49. NAVIGATION BAR
   Full nav bar: sticky, blur backdrop, logo, links with dropdowns, search, toggle
   ========================================================================== */

.hx-app .hx-nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hx-border); }
.hx-app .hx-nav-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 var(--hx-sp-4); height: 56px; }
.hx-app .hx-nav-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; }
.hx-app .hx-nav-logo-text { color: var(--hx-text); }
.hx-app .hx-nav-logo .hx-brand-accent { color: var(--hx-primary-dark, #5A6400); }

/* Nav links container */
.hx-app .hx-nav-links { display: none; align-items: center; gap: 0.25rem; }
@media (min-width: 1024px) { .hx-app .hx-nav-links { display: flex; } }

/* Nav link/dropdown trigger */
.hx-app .hx-nav-link { padding: 0.5rem 0.75rem; font-size: 0.8125rem; font-weight: 500; color: var(--hx-text-muted); border: none; background: none; cursor: pointer; border-radius: var(--hx-radius-md); transition: all 0.15s; display: flex; align-items: center; gap: 4px; }
.hx-app .hx-nav-link:hover, .hx-app .hx-nav-link.active { color: var(--hx-text); background: var(--hx-dark-50, #f3f4f6); }
.hx-app .hx-nav-link svg { width: 14px; height: 14px; transition: transform 0.2s; }
.hx-app .hx-nav-link[data-open="true"] svg { transform: rotate(180deg); }

/* Dropdown menu */
.hx-app .hx-nav-dropdown { position: relative; }
.hx-app .hx-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    max-width: min(100vw - 2rem, 20rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius-lg);
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
    padding: 0.5rem 0;
    z-index: 200;
}
.hx-app .hx-nav-dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    color: var(--hx-text);
    text-decoration: none;
    transition: all 0.1s;
}
.hx-app .hx-nav-dropdown-item:hover { background: var(--hx-primary-light, #faffc0); color: var(--hx-dark-900); }

/* Right actions */
.hx-app .hx-nav-actions { display: flex; align-items: center; gap: var(--hx-sp-3); }

/* Search inline */
.hx-app .hx-nav-search-inline { position: relative; display: none; }
@media (min-width: 1024px) { .hx-app .hx-nav-search-inline { display: flex; } }
.hx-app .hx-nav-search-inline input { width: 180px; padding: 0.375rem 0.75rem 0.375rem 2rem; border: 1px solid var(--hx-border); border-radius: var(--hx-radius-full); font-size: 0.8125rem; background: var(--hx-dark-50, #f8f9fa); transition: all 0.2s; }
.hx-app .hx-nav-search-inline input:focus { width: 240px; border-color: var(--hx-primary); outline: none; box-shadow: 0 0 0 3px rgba(232,255,0,0.15); }
.hx-app .hx-nav-search-icon { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--hx-text-muted); pointer-events: none; }
.hx-app .hx-search-dropdown { position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 300px; background: #fff; border: 1px solid var(--hx-border); border-radius: var(--hx-radius-lg); box-shadow: 0 10px 40px rgba(0,0,0,0.15); max-height: 360px; overflow-y: auto; z-index: 300; }
.hx-app .hx-search-group-label { padding: 0.5rem 1rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hx-text-muted); background: var(--hx-dark-50, #f8f9fa); }
.hx-app .hx-search-result { display: block; padding: 0.5rem 1rem; font-size: 0.8125rem; color: var(--hx-text); text-decoration: none; }
.hx-app .hx-search-result:hover { background: var(--hx-primary-light); }

/* Unit toggle (styled pill) */
.hx-app .hx-unit-toggle { display: flex; border-radius: var(--hx-radius-full); overflow: hidden; border: 1px solid var(--hx-border); }
.hx-app .hx-unit-btn { padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 600; border: none; cursor: pointer; transition: all 0.15s; background: transparent; color: var(--hx-text-muted); }
.hx-app .hx-unit-btn.active, .hx-app .hx-unit-btn[aria-checked="true"] { background: var(--hx-primary); color: var(--hx-dark-900); }

/* Hamburger */
.hx-app .hx-nav-hamburger { display: flex; padding: 0.5rem; background: none; border: none; cursor: pointer; }
@media (min-width: 1024px) { .hx-app .hx-nav-hamburger { display: none; } }
.hx-app .hx-nav-hamburger-icon { display: flex; flex-direction: column; gap: 4px; width: 20px; }
.hx-app .hx-nav-hamburger-icon span { display: block; height: 2px; background: var(--hx-text); border-radius: 1px; transition: all 0.2s; }

/* Mobile menu */
.hx-app .hx-nav-mobile { display: none; background: #fff; border-top: 1px solid var(--hx-border); padding: var(--hx-sp-4); }
.hx-app .hx-nav-mobile[x-show] { display: block; }
.hx-app .hx-nav-mobile-group { margin-bottom: var(--hx-sp-4); }
.hx-app .hx-nav-mobile-group-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hx-text-muted); margin-bottom: var(--hx-sp-2); }
.hx-app .hx-nav-mobile-link { display: block; padding: 0.5rem 0; font-size: 0.875rem; color: var(--hx-text); text-decoration: none; }
.hx-app .hx-nav-mobile-link:hover { color: var(--hx-primary-dark); }

/* ==========================================================================
   50. CALCULATOR PAGE HEADER (DARK HERO)
   ========================================================================== */

.hx-app .hx-page-header { padding: var(--hx-sp-8) var(--hx-sp-4); margin-bottom: var(--hx-sp-6); }
.hx-app .hx-page-meta { display: flex; align-items: center; gap: var(--hx-sp-3); flex-wrap: wrap; font-size: var(--hx-fs-sm); color: var(--hx-text-muted); margin-top: var(--hx-sp-2); }
.hx-app .hx-page-header-dark { background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%); border-radius: var(--hx-radius-xl); padding: 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--hx-sp-8); position: relative; overflow: hidden; margin-bottom: var(--hx-sp-6); }
.hx-app .hx-page-header-dark::before { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(232,255,0,0.08) 0%, transparent 70%); border-radius: 50%; }
.hx-app .hx-page-header-dark::after { content: ''; position: absolute; bottom: -60px; left: 20%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(232,255,0,0.04) 0%, transparent 70%); border-radius: 50%; }
.hx-app .hx-hero-text { flex: 1; position: relative; z-index: 1; }
.hx-app .hx-page-title { font-size: 2rem; font-weight: 800; color: #fff; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
.hx-app .hx-page-subtitle { font-size: 1rem; color: rgba(255,255,255,0.65); max-width: 500px; line-height: 1.6; }
.hx-app .hx-hero-icon { width: 120px; height: 120px; flex-shrink: 0; position: relative; z-index: 1; }
.hx-app .hx-hero-icon svg { width: 100%; height: 100%; color: rgba(232,255,0,0.25); }
@media (max-width: 640px) { .hx-app .hx-page-header-dark { flex-direction: column; padding: 1.5rem; } .hx-app .hx-hero-icon { width: 80px; height: 80px; } }

/* ==========================================================================
   51. CALCULATOR FORM CARD WITH ICON HEADER
   ========================================================================== */

.hx-app .hx-calculator-layout { max-width: 100%; width: 100%; margin: 0 auto; padding: 0; box-sizing: border-box; }
@media (min-width: 768px) { .hx-app .hx-calculator-layout { max-width: 720px; } }
@media (max-width: 767px) { .hx-app .hx-calculator-layout { padding: 0 var(--hx-sp-4); } }
.hx-app .hx-calc-form { background: var(--hx-surface); border: 1px solid var(--hx-border); border-radius: var(--hx-radius-xl); overflow: hidden; box-shadow: var(--hx-shadow-md); }
.hx-app .hx-form-header { display: flex; flex-direction: column; align-items: center; gap: var(--hx-sp-3); padding: 2rem var(--hx-sp-6) 1.5rem; background: var(--hx-dark-50, #f8f9fa); border-bottom: 1px solid var(--hx-border); text-align: center; }
.hx-app .hx-form-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--hx-primary); display: flex; align-items: center; justify-content: center; }
.hx-app .hx-form-icon svg { width: 28px; height: 28px; color: var(--hx-dark-900); stroke-width: 2; }
.hx-app .hx-form-title { font-size: 1.375rem; font-weight: 700; color: var(--hx-text); }
.hx-app .hx-form-subtitle { font-size: 0.875rem; color: var(--hx-text-muted); }
.hx-app .hx-form-body { padding: var(--hx-sp-6); }

/* ==========================================================================
   52. HUB WELCOME HERO
   Light layout: two-column split, stat cards on right.
   ========================================================================== */

.hx-app .hx-hub-welcome {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2.5rem;
    align-items: center;
    padding: 2rem 2rem 1.5rem;
    background: linear-gradient(135deg, #0a0a0a 0%, #14161d 55%, #1a1a2e 100%);
    border: 1px solid rgba(232,255,0,0.08);
    border-radius: var(--hx-radius-xl);
    overflow: hidden;
    margin: 0 0 var(--hx-sp-10);
    position: relative;
}

.hx-app .hx-hub-welcome::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(232,255,0,0.12) 0%, transparent 70%);
    border-radius: 50%;
}

.hx-app .hx-hub-welcome::after {
    content: '';
    position: absolute;
    bottom: -90px;
    left: 12%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(232,255,0,0.06) 0%, transparent 72%);
    border-radius: 50%;
}

.hx-app .hx-hub-welcome-left { flex: unset; position: relative; z-index: 1; max-width: 560px; }
.hx-app .hx-hub-welcome-right { display: flex; flex-direction: column; gap: var(--hx-sp-3); position: relative; z-index: 1; flex-shrink: 0; }

/* Badge — light surface variant */
.hx-app .hx-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(232,255,0,0.1);
    color: rgba(255,255,255,0.92);
    border: 1px solid rgba(232,255,0,0.28);
    padding: 5px 14px;
    border-radius: var(--hx-radius-full);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

.hx-app .hx-hero-badge-dot { width: 7px; height: 7px; background: var(--hx-primary); border-radius: 50%; animation: hxDotPulse 2s ease-in-out infinite; flex-shrink: 0; }
@keyframes hxDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.hx-app .hx-hero-badge-text { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255,255,255,0.92); }

/* Hub welcome title & sub — dark text on light bg */
.hx-app .hx-hub-welcome-title { font-size: 2.25rem; font-weight: 900; color: #FFFFFF; margin: 0 0 0.875rem; letter-spacing: -0.03em; line-height: 1.1; }
.hx-app .hx-hub-welcome-title .hx-brand-accent { color: var(--hx-primary); }
.hx-app .hx-hub-welcome-sub { font-size: 1rem; color: rgba(255,255,255,0.74); line-height: 1.65; margin: 0 0 1.5rem; max-width: 480px; }

/* Stat cards — light surface */
.hx-app .hx-hub-stat-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 1.25rem 1.75rem; text-align: center; min-width: 160px; backdrop-filter: blur(10px); }
.hx-app .hx-hub-stat-card-value { display: block; font-size: 1.875rem; font-weight: 900; color: #FFFFFF; letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.25rem; }
.hx-app .hx-hub-stat-card-label { display: block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255,255,255,0.62); }

.hx-app .hx-hub-actions { display: flex; gap: var(--hx-sp-3); flex-wrap: wrap; }

@media (max-width: 900px) {
    .hx-app .hx-hub-welcome { grid-template-columns: 1fr; }
    .hx-app .hx-hub-welcome-right { flex-direction: row; flex-wrap: wrap; }
    .hx-app .hx-hub-stat-card { flex: 1; min-width: 120px; }
}

@media (max-width: 640px) {
    .hx-app .hx-hub-welcome-title { font-size: 1.875rem; }
    .hx-app .hx-hub-welcome { padding: 1.5rem 1.25rem 1.25rem; }
}

/* ==========================================================================
   53. FOOTER
   ========================================================================== */

.hx-app .hx-footer,
.entry-content.rbct .hx-app .hx-footer { background: #0A0A0A !important; padding: 1.5rem 0; margin-top: var(--hx-sp-12); border-radius: var(--hx-radius-xl) var(--hx-radius-xl) 0 0; }
.hx-app .hx-footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--hx-sp-4); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--hx-sp-4); }
.hx-app .hx-footer-brand { color: rgba(255,255,255,0.75) !important; font-weight: 700; font-size: 0.875rem; text-decoration: none; }
.hx-app .hx-footer-brand .hx-brand-accent { color: var(--hx-primary) !important; }
.hx-app .hx-footer-links { display: flex; gap: var(--hx-sp-4); flex-wrap: wrap; }
.hx-app .hx-footer-links a { color: rgba(255,255,255,0.5); font-size: 0.8125rem; text-decoration: none; transition: color 0.15s; }
.hx-app .hx-footer-links a:hover { color: var(--hx-primary); }
.hx-app .hx-footer-disclaimer { width: 100%; text-align: center; font-size: 0.75rem; color: var(--hx-footer-disclaimer); margin-top: var(--hx-sp-2); }
@media (max-width: 640px) { .hx-app .hx-footer-inner { flex-direction: column; text-align: center; } }

/* ==========================================================================
   54. QUICK ACCESS BAR
   ========================================================================== */

.hx-app .hx-quick-bar {
    background: #FFFFFF;
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius-lg);
    padding: 0.875rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 var(--hx-sp-10);
    flex-wrap: wrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.hx-app .hx-quick-bar-text { color: var(--hx-text-muted); font-size: 0.875rem; }
.hx-app .hx-quick-bar-text strong { color: var(--hx-text); }
.hx-app .hx-quick-bar-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.hx-app .hx-quick-pill {
    padding: 0.375rem 0.875rem;
    background: var(--hx-primary);
    border: 1px solid var(--hx-primary);
    border-radius: var(--hx-radius-full);
    color: var(--hx-primary-text);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}
.hx-app .hx-quick-pill:hover { opacity: 0.85; }

/* ==========================================================================
   55. STATION MINI CARDS (HUB)
   ========================================================================== */

.hx-app .hx-station-mini { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--hx-surface); border: 1px solid var(--hx-border); border-radius: var(--hx-radius-lg); text-decoration: none; color: var(--hx-text); transition: all 0.2s; border-left: 3px solid transparent; }
.hx-app .hx-station-mini:hover { border-left-color: var(--hx-primary); box-shadow: var(--hx-shadow-md); transform: translateX(2px); }
.hx-app .hx-station-mini-num { font-size: 0.75rem; font-weight: 700; color: var(--hx-text-muted); min-width: 20px; }
.hx-app .hx-station-mini-name { font-weight: 600; font-size: 0.875rem; }
.hx-app .hx-station-mini-dist { font-size: 0.75rem; color: var(--hx-text-muted); margin-left: auto; }

/* ==========================================================================
   56. ACCESSIBILITY OVERRIDES (forensic-ui-qa fix-all pass)
   Fixes systemic issues found by forensic-ui-qa across 33 pages.
   ========================================================================== */

/* Force single font family across all hyrox elements (drop Foxiz theme inject) */
.hx-app,
.hx-app *,
.entry-content.rbct .hx-app,
.entry-content.rbct .hx-app * {
    font-family: var(--hx-font) !important;
}
.hx-app .hx-mono,
.entry-content.rbct .hx-app .hx-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

/* Tap targets >=44x44px on all interactive elements (mobile WCAG).
   Nav dropdown *items* are excluded here: they must be block-level flex rows
   inside .hx-nav-dropdown-menu so links stack in one column (inline-flex wraps
   into a broken multi-column layout). */
.hx-app .hx-nav-link,
.hx-app .hx-nav-dropdown-trigger,
.hx-app .hx-nav-mobile-link,
.hx-app .hx-tab-btn,
.hx-app .hx-faq-question,
.entry-content.rbct .hx-app .hx-nav-link,
.entry-content.rbct .hx-app .hx-tab-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.hx-app .hx-nav-dropdown-item,
.entry-content.rbct .hx-app .hx-nav-dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.hx-app .hx-nav-logo,
.entry-content.rbct .hx-app .hx-nav-logo {
    min-height: 44px;
    padding: 6px 0;
}

.hx-app .hx-unit-btn,
.hx-app .hx-nav-hamburger,
.entry-content.rbct .hx-app .hx-unit-btn {
    min-width: 44px;
    min-height: 36px;
}

/* Mobile-specific tap targets - bigger than 44 */
@media (max-width: 768px) {
    .hx-app .hx-nav-hamburger,
    .entry-content.rbct .hx-app .hx-nav-hamburger {
        min-width: 44px;
        min-height: 44px;
    }
}

/* FAQ icon overflow fix - constrain SVG size with high specificity */
.hx-app .hx-faq-icon,
.entry-content.rbct .hx-app .hx-faq-icon,
html body .entry-content.rbct .hx-app .hx-faq-section .hx-faq-icon {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    flex-shrink: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hx-app .hx-faq-icon svg,
.entry-content.rbct .hx-app .hx-faq-icon svg,
html body .entry-content.rbct .hx-app .hx-faq-section .hx-faq-icon svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    display: block;
    flex-shrink: 0;
}

/* Mobile small text floor — never below 11px */
@media (max-width: 768px) {
    .hx-app .hx-help-text,
    .hx-app .hx-optional,
    .hx-app .hx-stat-label,
    .hx-app .hx-hub-stat-card-label,
    .hx-app .hx-hero-badge-text,
    .hx-app .hx-section-label,
    .hx-app .hx-table th,
    .hx-app .hx-table td,
    .hx-app small,
    .hx-app .hx-text-xs,
    .entry-content.rbct .hx-app .hx-help-text,
    .entry-content.rbct .hx-app .hx-optional,
    .entry-content.rbct .hx-app .hx-stat-label,
    .entry-content.rbct .hx-app .hx-table th,
    .entry-content.rbct .hx-app .hx-table td,
    .entry-content.rbct .hx-app small,
    .entry-content.rbct .hx-app .hx-text-xs {
        font-size: 11px !important;
    }
}

/* Form subtitle contrast bump (was 4.45:1, needed >=4.5:1) */
.hx-app .hx-form-subtitle,
.entry-content.rbct .hx-app .hx-form-subtitle {
    color: var(--hx-text-secondary) !important;
}

/* Required asterisk - use red instead of muted (was 3.55:1) */
.hx-app .hx-required,
.entry-content.rbct .hx-app .hx-required {
    color: #C92A4D !important;
    font-weight: 700;
}

/* Help text mobile padding/margin to maintain 4px grid */
.hx-app .hx-help-text,
.entry-content.rbct .hx-app .hx-help-text {
    margin-top: 4px;
}

/* ==========================================================================
   57. TAP TARGET FIXES (WCAG 2.5.5 / 2.5.8 — 44px minimum)
   Fixes 600+ tap target violations across all pages.
   ========================================================================== */

/* --- 57.1 Pagination (was 36px, need 44px) --- */
.hx-app .hx-page-btn {
    min-height: 44px;
    min-width: 44px;
}

.hx-app .hx-pagination {
    gap: 8px;
}

.hx-app .hx-pagination-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- 57.2 Filter pills / radio options (was 28-34px, need 44px) --- */
.hx-app .hx-filter-pill,
.hx-app .hx-division-filter,
.hx-app .hx-radio-option,
.hx-app .hx-season-tab {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hx-app .hx-filter-group,
.hx-app .hx-radio-group {
    gap: 8px;
}

/* --- 57.3 Tab buttons (was ~36px, need 44px) --- */
.hx-app .hx-tab-btn {
    min-height: 44px;
}

/* --- 57.4 Share / social buttons (was 24-28px, need 44px) --- */
.hx-app .hx-share-btn,
.hx-app .hx-social-link {
    min-height: 44px;
    min-width: 44px;
}

/* --- 57.5 Table row action buttons (was 28-32px, need 44px) --- */
.hx-app .hx-table td button,
.hx-app .hx-table td a.hx-btn,
.hx-app .hx-table-action {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 12px;
}

/* --- 57.6 Search clear button --- */
.hx-app .hx-search-clear {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- 57.7 Quick pill links --- */
.hx-app .hx-quick-pill {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* --- 57.8 Station mini cards (interactive) --- */
.hx-app .hx-station-mini {
    min-height: 44px;
}

/* ==========================================================================
   57.9 MOBILE TAP TARGET ENLARGEMENT (768px and below)
   Larger targets on touch devices for comfortable thumb interaction.
   ========================================================================== */

@media (max-width: 768px) {
    /* Nav mobile links — 48px for thumb navigation */
    .hx-app .hx-nav-mobile-link {
        min-height: 48px;
        padding: 14px 20px;
        display: flex;
        align-items: center;
        font-size: var(--hx-fs-base);
    }

    /* Nav dropdown items on mobile */
    .hx-app .hx-nav-dropdown-item {
        min-height: 48px;
        padding: 14px 20px;
        display: flex;
        align-items: center;
    }

    /* Buttons — all buttons 48px on mobile */
    .hx-app .hx-btn {
        min-height: 48px;
        padding: 14px 24px;
        font-size: var(--hx-fs-base);
    }

    .hx-app .hx-btn-sm {
        min-height: 44px;
        padding: 10px 16px;
    }

    /* Tab buttons — 48px on mobile */
    .hx-app .hx-tab-btn {
        min-height: 48px;
        padding: 14px 16px;
    }

    /* Season tabs on mobile */
    .hx-app .hx-season-tab {
        min-height: 44px;
        padding: 10px 12px;
    }

    /* FAQ — 48px on mobile */
    .hx-app .hx-faq-question {
        min-height: 48px;
        padding: 14px 20px;
    }

    /* Pagination — 44px enforced with gap */
    .hx-app .hx-pagination {
        gap: 8px;
    }

    .hx-app .hx-page-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Breadcrumb links — padding creates target area */
    .hx-app .hx-breadcrumb-item a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 4px;
    }

    /* Footer links — comfortable tap targets */
    .hx-app .hx-footer-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 8px;
    }

    /* Unit toggle buttons */
    .hx-app .hx-unit-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 14px;
    }

    /* Filter pills and toggle buttons */
    .hx-app .hx-filter-pill,
    .hx-app .hx-radio-option {
        min-height: 44px;
        padding: 10px 16px;
    }

    /* Share button */
    .hx-app .hx-share-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 16px;
    }

    /* Interactive table rows — taller cells for thumb targets */
    .hx-app .hx-table-interactive tr {
        min-height: 48px;
        cursor: pointer;
    }

    .hx-app .hx-table-interactive td {
        padding: 14px 12px;
    }
}

/* Stack filter pills on very small screens */
@media (max-width: 480px) {
    .hx-app .hx-filter-group {
        flex-direction: column;
        align-items: stretch;
    }

    .hx-app .hx-filter-group .hx-filter-pill {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   58. ADDITIONAL CONTRAST FIXES (WCAG AA 4.5:1 minimum)
   ========================================================================== */

/* Muted text on gray backgrounds (was ~4.2:1, now 5.9:1) */
.hx-app .hx-card .hx-text-muted,
.hx-app .hx-gray-bg .hx-text-muted {
    color: var(--hx-text-muted-strong);
}

/* Focus ring on primary-background buttons — dark ring for visibility */
.hx-app .hx-btn-primary:focus-visible {
    outline: 2px solid var(--hx-dark-900);
    outline-offset: 2px;
}

/* Skip link */
.hx-app .hx-skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--hx-dark-900);
    color: var(--hx-white);
    padding: 12px 24px;
    z-index: 9999;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--hx-radius-sm) 0;
}

.hx-app .hx-skip-link:focus {
    top: 0;
}

/* Screen reader only utility */
.hx-app .hx-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible styles for all interactive elements */
.hx-app a:focus-visible,
.hx-app button:focus-visible,
.hx-app input:focus-visible,
.hx-app select:focus-visible,
.hx-app textarea:focus-visible,
.hx-app [tabindex]:focus-visible {
    outline: 2px solid var(--hx-dark-700);
    outline-offset: 2px;
}

/* ==========================================================================
   TOUCH TARGET ENFORCEMENT (WCAG 2.5.5 — 44x44 minimum)
   Applies to clickable rows and any interactive elements not covered above.
   ========================================================================== */

/* Clickable table rows — ensure 44px tap target */
.hx-app .hx-table-row-clickable,
.hx-app tr.hx-table-row-clickable,
.hx-app .hx-table tr[role="button"],
.hx-app .hx-table tbody tr.hx-clickable {
    cursor: pointer;
    min-height: 44px;
}

.hx-app .hx-table-row-clickable td,
.hx-app .hx-table tr[role="button"] td,
.hx-app .hx-table tbody tr.hx-clickable td {
    padding: 12px 8px;
    min-height: 44px;
}

/* Ensure ALL hx-table rows have min 44px height for tap comfort */
.hx-app .hx-table tbody tr {
    min-height: 44px;
}

.hx-app .hx-table tbody td {
    min-height: 44px;
}

/* ==========================================================================
   MOBILE TOUCH OPTIMIZATIONS (<768px)
   Larger targets (48px), wider spacing (8px min between adjacent targets).
   ========================================================================== */
@media (max-width: 767px) {
    /* Bigger button heights on mobile (48px = comfortable thumb tap) */
    .hx-app .hx-btn { min-height: 48px; padding: 14px 18px; }
    .hx-app .hx-btn-sm { min-height: 44px; padding: 10px 14px; }
    .hx-app .hx-btn-lg { min-height: 52px; }
    .hx-app .hx-btn-xl { min-height: 56px; }
    .hx-app .hx-btn-calculate { min-height: 56px; padding: 1.125rem 2rem; }

    /* Nav links — full 48px tap height */
    .hx-app .hx-nav-link,
    .hx-app .hx-nav-item { min-height: 48px; padding: 14px 18px; }

    /* Toggle / unit / tab buttons */
    .hx-app .hx-unit-btn { min-height: 44px; padding: 10px 14px; }
    .hx-app .hx-tab-btn { min-height: 48px; padding: 14px 18px; }
    .hx-app .hx-radio-option { min-height: 48px; padding: 12px 18px; }

    /* Mobile toggle */
    .hx-app .hx-mobile-toggle { min-height: 48px; min-width: 48px; }

    /* Interactive badges (filter chips) */
    .hx-app .hx-badge-interactive,
    .hx-app a.hx-badge,
    .hx-app button.hx-badge { min-height: 44px; padding: 10px 14px; }

    /* Clickable rows */
    .hx-app .hx-table-row-clickable td,
    .hx-app .hx-table tr[role="button"] td,
    .hx-app .hx-table tbody tr.hx-clickable td { padding: 14px 10px; }

    /* Spacing between adjacent interactive elements (8px minimum) */
    .hx-app .hx-nav-links { gap: 8px; }
    .hx-app .hx-radio-group { gap: 8px; }
    .hx-app .hx-btn + .hx-btn,
    .hx-app .hx-btn + .hx-btn-block,
    .hx-app .hx-btn-block + .hx-btn { margin-top: 8px; }
    .hx-app .hx-tabs { gap: 4px; }

    /* Container padding to prevent edge-touching */
    .hx-app .hx-container {
        padding-left: var(--hx-sp-4);
        padding-right: var(--hx-sp-4);
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Force any wide content to scroll within wrapper, not page */
    .hx-app .hx-table-responsive,
    .hx-app .hx-table-wrap,
    .hx-app .hx-table-wrapper {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .hx-app,
    .hx-app *,
    .hx-app *::before,
    .hx-app *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   59. TARGETED HEADER AND OVERFLOW FIXES
   Minimal audit overrides for header controls and mobile overflow affordance.
   ========================================================================== */

.hx-app .hx-nav-hamburger,
.entry-content.rbct .hx-app .hx-nav-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius-full);
    background: var(--hx-surface);
}

.hx-app .hx-nav-mobile,
.entry-content.rbct .hx-app .hx-nav-mobile {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--hx-surface, #ffffff);
    border-bottom: 1px solid var(--hx-border, #e9ecef);
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.18);
    max-height: calc(100dvh - 112px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.hx-app .hx-nav-hamburger[aria-expanded="true"] .hx-nav-hamburger-icon span:nth-child(1),
.entry-content.rbct .hx-app .hx-nav-hamburger[aria-expanded="true"] .hx-nav-hamburger-icon span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}

.hx-app .hx-nav-hamburger[aria-expanded="true"] .hx-nav-hamburger-icon span:nth-child(2),
.entry-content.rbct .hx-app .hx-nav-hamburger[aria-expanded="true"] .hx-nav-hamburger-icon span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hx-app .hx-nav-hamburger[aria-expanded="true"] .hx-nav-hamburger-icon span:nth-child(3),
.entry-content.rbct .hx-app .hx-nav-hamburger[aria-expanded="true"] .hx-nav-hamburger-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}

.hx-app .hx-nav-mobile-inner,
.entry-content.rbct .hx-app .hx-nav-mobile-inner {
    padding: var(--hx-sp-4, 1rem);
    max-width: 1200px;
    margin: 0 auto;
}

.hx-app .hx-nav-mobile-links,
.entry-content.rbct .hx-app .hx-nav-mobile-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 0.5rem;
}

.hx-app .hx-nav-mobile-link,
.entry-content.rbct .hx-app .hx-nav-mobile-link {
    display: block;
    padding: 0.72rem 0.85rem;
    color: var(--hx-text-secondary, #495057) !important;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.3;
    border-radius: var(--hx-radius-md, 0.5rem);
    transition: background 0.15s ease, color 0.15s ease;
    text-decoration: none !important;
}

.hx-app .hx-nav-mobile-link:hover,
.hx-app .hx-nav-mobile-link:focus,
.entry-content.rbct .hx-app .hx-nav-mobile-link:hover,
.entry-content.rbct .hx-app .hx-nav-mobile-link:focus {
    background: var(--hx-gray-50, #f8f9fa) !important;
    color: var(--hx-text, #1a1a1a) !important;
}

.hx-app .hx-nav-mobile-link[aria-current="page"],
.entry-content.rbct .hx-app .hx-nav-mobile-link[aria-current="page"] {
    background: rgba(232, 255, 0, 0.28) !important;
    color: var(--hx-primary-dark, #5a6400) !important;
}

.hx-app .hx-nav-mobile-group,
.entry-content.rbct .hx-app .hx-nav-mobile-group {
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--hx-gray-100, #f1f3f5);
}

.hx-app .hx-nav-mobile-group:last-child,
.entry-content.rbct .hx-app .hx-nav-mobile-group:last-child {
    border-bottom: 0;
}

.hx-app .hx-nav-mobile-group-label,
.entry-content.rbct .hx-app .hx-nav-mobile-group-label {
    padding: 0.25rem 1rem;
    margin: 0 0 0.125rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--hx-text-muted, #6c757d) !important;
    letter-spacing: 0.06em;
    background: transparent !important;
}

@media (min-width: 1024px) {
    .hx-app .hx-nav-mobile,
    .entry-content.rbct .hx-app .hx-nav-mobile,
    .hx-app .hx-nav-hamburger,
    .entry-content.rbct .hx-app .hx-nav-hamburger {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .hx-app .hx-nav-hamburger,
    .entry-content.rbct .hx-app .hx-nav-hamburger {
        display: inline-flex !important;
    }

    .hx-app .hx-nav-links,
    .entry-content.rbct .hx-app .hx-nav-links {
        display: none !important;
    }

    .hx-app .hx-nav-actions,
    .entry-content.rbct .hx-app .hx-nav-actions {
        gap: var(--hx-sp-2, 0.5rem);
    }

    .hx-app .hx-nav-mobile-inner,
    .entry-content.rbct .hx-app .hx-nav-mobile-inner {
        padding: 0.875rem;
    }

    .hx-app .hx-nav-mobile,
    .entry-content.rbct .hx-app .hx-nav-mobile {
        max-height: calc(100dvh - 104px);
    }
}

@media (max-width: 360px) {
    .hx-app .hx-nav-mobile-links,
    .entry-content.rbct .hx-app .hx-nav-mobile-links {
        grid-template-columns: 1fr;
    }
}

.hx-app .hx-nav-search-inline,
.entry-content.rbct .hx-app .hx-nav-search-inline {
    min-height: 44px;
    align-items: center;
}

.hx-app .hx-nav-search-input,
.entry-content.rbct .hx-app .hx-nav-search-input {
    min-height: 44px;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.hx-app .hx-unit-toggle,
.entry-content.rbct .hx-app .hx-unit-toggle {
    flex-shrink: 0;
}

.hx-app .hx-nav-hamburger:focus-visible,
.hx-app .hx-nav-search-input:focus-visible,
.hx-app .hx-unit-btn:focus-visible,
.entry-content.rbct .hx-app .hx-nav-hamburger:focus-visible,
.entry-content.rbct .hx-app .hx-nav-search-input:focus-visible,
.entry-content.rbct .hx-app .hx-unit-btn:focus-visible {
    outline: 2px solid var(--hx-dark-900);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(232, 255, 0, 0.22);
}

@media (max-width: 768px) {
    .hx-app .hx-nav-actions,
    .entry-content.rbct .hx-app .hx-nav-actions {
        gap: var(--hx-sp-2);
    }

    .hx-app .hx-nav-hamburger,
    .entry-content.rbct .hx-app .hx-nav-hamburger {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }

    .hx-app .hx-nav-search-inline,
    .entry-content.rbct .hx-app .hx-nav-search-inline {
        min-height: 48px;
    }

    .hx-app .hx-nav-search-input,
    .entry-content.rbct .hx-app .hx-nav-search-input {
        min-height: 48px;
        padding-left: 2.5rem;
    }

    .hx-app .hx-tabs,
    .hx-app .hx-table-responsive,
    .hx-app .hx-table-wrap,
    .hx-app .hx-table-wrapper {
        scrollbar-width: thin;
        scrollbar-color: rgba(26, 26, 26, 0.35) rgba(26, 26, 26, 0.08);
        -webkit-overflow-scrolling: touch;
    }

    .hx-app .hx-tabs {
        position: relative;
        gap: var(--hx-sp-2);
        flex-wrap: nowrap;
        padding: 0 2.5rem 0.625rem 0;
        margin-right: -0.25rem;
        box-shadow: inset -20px 0 18px -18px rgba(26, 26, 26, 0.35);
    }

    .hx-app .hx-table-responsive,
    .hx-app .hx-table-wrap,
    .hx-app .hx-table-wrapper {
        position: relative;
        overflow-x: auto !important;
        padding-bottom: 0.625rem;
        box-shadow: inset -20px 0 18px -18px rgba(26, 26, 26, 0.35);
    }

    .hx-app .hx-tabs::-webkit-scrollbar,
    .hx-app .hx-table-responsive::-webkit-scrollbar,
    .hx-app .hx-table-wrap::-webkit-scrollbar,
    .hx-app .hx-table-wrapper::-webkit-scrollbar {
        display: block;
        height: 6px;
    }

    .hx-app .hx-tabs::-webkit-scrollbar-track,
    .hx-app .hx-table-responsive::-webkit-scrollbar-track,
    .hx-app .hx-table-wrap::-webkit-scrollbar-track,
    .hx-app .hx-table-wrapper::-webkit-scrollbar-track {
        background: rgba(26, 26, 26, 0.08);
        border-radius: 999px;
    }

    .hx-app .hx-tabs::-webkit-scrollbar-thumb,
    .hx-app .hx-table-responsive::-webkit-scrollbar-thumb,
    .hx-app .hx-table-wrap::-webkit-scrollbar-thumb,
    .hx-app .hx-table-wrapper::-webkit-scrollbar-thumb {
        background: rgba(26, 26, 26, 0.35);
        border-radius: 999px;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .hx-app .hx-nav-inner,
    .entry-content.rbct .hx-app .hx-nav-inner {
        flex-wrap: wrap;
        align-items: center;
        row-gap: var(--hx-sp-3);
    }

    .hx-app .hx-nav-links,
    .entry-content.rbct .hx-app .hx-nav-links {
        order: 3;
        flex: 1 1 100%;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
    }

    .hx-app .hx-nav-actions,
    .entry-content.rbct .hx-app .hx-nav-actions {
        margin-left: auto;
        flex-wrap: nowrap;
        flex-shrink: 0;
    }

    .hx-app .hx-nav-search-inline input,
    .entry-content.rbct .hx-app .hx-nav-search-inline input {
        width: 160px;
    }

    .hx-app .hx-nav-search-inline input:focus,
    .entry-content.rbct .hx-app .hx-nav-search-inline input:focus {
        width: 200px;
    }
}

/* ==========================================================================
   SHARED MODERN FORM SYSTEM
   Additive layer for calculator/tool modernization work.
   Keep this near EOF so it wins over older legacy form blocks.
   ========================================================================== */

.hx-app .hx-form-section {
    display: flex;
    flex-direction: column;
    gap: var(--hx-sp-4);
    padding: var(--hx-sp-4);
    border: 1px solid rgba(26, 26, 26, 0.06);
    border-radius: var(--hx-radius-xl);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 249, 250, 0.96));
    box-shadow: 0 1px 2px rgba(26, 26, 26, 0.02), 0 12px 32px rgba(26, 26, 26, 0.05);
}

/* Horizontal filter/search bars stay horizontal even when combined with hx-form-section card styling */
.hx-app .hx-form-section.hx-filters-bar,
.hx-app .hx-form-section.hx-athlete-search-bar,
.hx-app .hx-form-section.hx-filters-bar-wrap {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
}

.hx-app .hx-field-shell {
    display: flex;
    align-items: center;
    gap: var(--hx-sp-3);
    min-height: 52px;
    padding: 0.75rem 0.875rem;
    border: 1.5px solid rgba(26, 26, 26, 0.08);
    border-radius: var(--hx-radius-lg);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: border-color var(--hx-transition), box-shadow var(--hx-transition), background var(--hx-transition);
}

.hx-app .hx-field-shell:focus-within {
    border-color: rgba(232, 255, 0, 0.9);
    box-shadow: 0 0 0 4px rgba(232, 255, 0, 0.16);
    background: #fff;
}

.hx-app .hx-field-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hx-sp-3);
    margin-bottom: var(--hx-sp-2);
}

.hx-app .hx-field-meta .hx-label {
    margin: 0;
}

.hx-app .hx-field-meta .hx-help-text {
    margin: 0;
    font-size: var(--hx-fs-sm);
}

.hx-app .hx-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.3125rem;
    border: 1px solid rgba(26, 26, 26, 0.08);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(248, 249, 250, 1), rgba(241, 243, 245, 0.92));
}

.hx-app .hx-segmented-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.625rem 1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--hx-text-secondary);
    font-size: var(--hx-fs-base);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--hx-transition), color var(--hx-transition), box-shadow var(--hx-transition), transform var(--hx-transition-fast);
}

.hx-app .hx-segmented-btn:hover {
    color: var(--hx-text);
    background: rgba(255, 255, 255, 0.66);
}

.hx-app .hx-segmented-btn.is-active,
.hx-app .hx-segmented-btn[aria-pressed="true"] {
    background: #fff;
    color: var(--hx-text);
    box-shadow: 0 1px 2px rgba(26, 26, 26, 0.06), 0 6px 16px rgba(26, 26, 26, 0.08);
}

.hx-app .hx-segmented-btn:focus-visible {
    outline: 2px solid var(--hx-dark-900);
    outline-offset: 2px;
}

.hx-app .hx-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.hx-app .hx-chip-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgba(26, 26, 26, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.98);
    color: var(--hx-text-secondary);
    font-size: var(--hx-fs-sm);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color var(--hx-transition), background var(--hx-transition), box-shadow var(--hx-transition), color var(--hx-transition);
}

.hx-app .hx-chip-option:hover {
    border-color: rgba(26, 26, 26, 0.16);
    color: var(--hx-text);
}

.hx-app .hx-chip-option input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.hx-app .hx-chip-option:has(input:checked) {
    border-color: rgba(232, 255, 0, 0.9);
    background: rgba(232, 255, 0, 0.18);
    color: var(--hx-text);
    box-shadow: 0 0 0 3px rgba(232, 255, 0, 0.12);
}

.hx-app .hx-chip-option:focus-within {
    outline: 2px solid var(--hx-dark-900);
    outline-offset: 2px;
}

.hx-app .hx-select-modern,
.hx-app .hx-field-shell .hx-select-modern {
    width: 100%;
    min-height: 52px;
    padding: 0.8125rem 2.75rem 0.8125rem 0.95rem;
    border: 1.5px solid rgba(26, 26, 26, 0.08);
    border-radius: var(--hx-radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 249, 250, 0.92));
    color: var(--hx-text);
    font-size: var(--hx-fs-base);
    font-weight: 500;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color var(--hx-transition), box-shadow var(--hx-transition), background var(--hx-transition);
}

.hx-app .hx-select-modern:focus {
    outline: none;
    border-color: rgba(232, 255, 0, 0.9);
    box-shadow: 0 0 0 4px rgba(232, 255, 0, 0.16);
}

.hx-app .hx-form-group .hx-input,
.hx-app .hx-form-group .hx-select,
.hx-app .hx-form-group .hx-input-textarea {
    min-height: 52px;
    border-radius: var(--hx-radius-lg);
    border: 1.5px solid rgba(26, 26, 26, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 249, 250, 0.94));
    color: var(--hx-text);
    font-size: var(--hx-fs-base);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.hx-app .hx-form-group .hx-input:focus,
.hx-app .hx-form-group .hx-select:focus,
.hx-app .hx-form-group .hx-input-textarea:focus {
    border-color: rgba(232, 255, 0, 0.9);
    box-shadow: 0 0 0 4px rgba(232, 255, 0, 0.16);
}

.hx-app .hx-form-group .hx-input-textarea {
    min-height: 120px;
}

.hx-app .hx-form-group .hx-label {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.hx-app .hx-form-group .hx-help-text {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--hx-text-muted);
}

.hx-app .hx-form-group .hx-input-wrapper {
    position: relative;
}

.hx-app .hx-form-group .hx-input-suffix {
    color: var(--hx-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

@media (max-width: 768px) {
    .hx-app .hx-form-section {
        padding: var(--hx-sp-3);
        border-radius: var(--hx-radius-lg);
    }

    .hx-app .hx-segmented {
        width: 100%;
        border-radius: var(--hx-radius-xl);
    }

    .hx-app .hx-segmented-btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    .hx-app .hx-chip-group {
        gap: 0.5rem;
    }

    .hx-app .hx-chip-option {
        min-height: 44px;
        padding: 0.625rem 0.8125rem;
    }
}

/* Dark hub hero text must beat the generic entry-content heading color override. */
.entry-content.rbct .hx-app .hx-hub-welcome-title,
.entry-content.rbct .hx-app .hx-hub-welcome-title span,
.entry-content.rbct .hx-app .hx-hub-welcome-title .hx-brand-accent,
.entry-content.rbct .hx-app .hx-hub-stat-card-value {
    color: #ffffff !important;
}

.entry-content.rbct .hx-app .hx-hub-welcome-sub,
.entry-content.rbct .hx-app .hx-hub-stat-card-label,
.entry-content.rbct .hx-app .hx-hero-badge-text {
    color: rgba(255, 255, 255, 0.74) !important;
}

/* ============================================================
   SPOTLIGHT PAGES
   ============================================================ */

.hx-app .hx-spotlight-hub { background: #fff; }

.hx-app .hx-spotlight-hub-hero {
    max-width: 640px;
    margin: 0 0 2.5rem;
}

.hx-app .hx-spotlight-hub-title {
    font-size: 2rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

.hx-app .hx-spotlight-hub-lead {
    font-size: 1.0625rem;
    color: #555;
    line-height: 1.65;
    margin: 0;
}

.hx-app .hx-spotlight-section { margin-bottom: 3rem; }

.hx-app .hx-spotlight-section-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.hx-app .hx-spotlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.hx-app .hx-spotlight-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.hx-app .hx-spotlight-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.hx-app .hx-spotlight-card--placeholder {
    cursor: default;
    pointer-events: none;
    opacity: 0.55;
}

.hx-app .hx-spotlight-card-img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f3f4f6;
}

.hx-app .hx-spotlight-card-img-placeholder,
.hx-app .hx-spotlight-detail-hero-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
}

.hx-app .hx-spotlight-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hx-app .hx-spotlight-card-body {
    padding: 1rem 1.125rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
}

.hx-app .hx-spotlight-card-tag {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #2563eb;
}

.hx-app .hx-spotlight-card-name {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #111;
    margin: 0;
    line-height: 1.3;
}

.hx-app .hx-spotlight-card-excerpt {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.55;
    margin: 0;
    flex: 1;
}

.hx-app .hx-spotlight-card-updated {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}

/* Detail layout */
.hx-app .hx-spotlight-detail { background: #fff; }

.hx-app .hx-spotlight-detail-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 900px) {
    .hx-app .hx-spotlight-detail-layout {
        grid-template-columns: 1fr;
    }
}

.hx-app .hx-spotlight-detail-main { min-width: 0; }

.hx-app .hx-spotlight-detail-hero { margin-bottom: 2rem; }

.hx-app .hx-spotlight-detail-hero-img-wrap {
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    border-radius: 8px;
    background: #f3f4f6;
    margin-bottom: 1.5rem;
}

.hx-app .hx-spotlight-detail-h1 {
    font-size: 2rem;
    font-weight: 800;
    color: #111;
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

.hx-app .hx-spotlight-detail-byline {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

.hx-app .hx-spotlight-stats-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}

.hx-app .hx-spotlight-stats-card-heading {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hx-app .hx-spotlight-stats-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.hx-app .hx-spotlight-stat-row { display: contents; }

.hx-app .hx-spotlight-stats-dl dt {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.hx-app .hx-spotlight-stats-dl dd {
    font-size: 0.875rem;
    color: #111;
    margin: 0;
}

.hx-app .hx-spotlight-content h2 {
    font-size: 1.375rem;
    font-weight: 700;
    color: #111;
    margin: 2rem 0 0.75rem;
    line-height: 1.3;
}

.hx-app .hx-spotlight-content p {
    font-size: 1rem;
    line-height: 1.75;
    color: #374151;
    margin: 0 0 1rem;
}

.hx-app .hx-spotlight-faq {
    margin-top: 2.5rem;
    border-top: 2px solid #e5e7eb;
    padding-top: 2rem;
}

.hx-app .hx-spotlight-faq h2 {
    font-size: 1.375rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 1.5rem;
}

.hx-app .hx-spotlight-faq-item { margin-bottom: 1.5rem; }

.hx-app .hx-spotlight-faq-item h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 0.375rem;
}

.hx-app .hx-spotlight-faq-item p {
    font-size: 0.9375rem;
    color: #374151;
    line-height: 1.65;
    margin: 0;
}

.hx-app .hx-spotlight-disclaimer {
    margin-top: 2.5rem;
    padding: 1rem 1.25rem;
    background: #f9fafb;
    border-left: 3px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.8125rem;
    color: #6b7280;
    line-height: 1.55;
}

.hx-app .hx-spotlight-sidebar {
    position: sticky;
    top: 1.5rem;
}

.hx-app .hx-spotlight-sidebar-block {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.hx-app .hx-spotlight-sidebar-heading {
    font-size: 0.875rem;
    font-weight: 700;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.875rem;
}

.hx-app .hx-spotlight-sidebar-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hx-app .hx-spotlight-sidebar-link {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #2563eb;
    line-height: 1.3;
}

.hx-app .hx-spotlight-sidebar-link:hover { text-decoration: underline; }

.hx-app .hx-spotlight-sidebar-link-desc {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.45;
}

/* ==========================================================================
   Cohort Drawer Component (.hx-cohort-drawer)
   ========================================================================== */

.hx-cohort-drawer {
    border: 1px solid var(--hx-gray-200, #e5e7eb);
    border-radius: 8px;
    padding: 1rem;
    background: #fff;
    margin-top: 1rem;
}

.hx-cohort-drawer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hx-accent, #00d4aa);
    cursor: pointer;
    line-height: 1.4;
}

.hx-cohort-drawer-toggle:hover {
    color: var(--hx-accent-dark, #00b894);
}

.hx-cohort-drawer__meta {
    font-size: 0.75rem;
    color: var(--hx-gray-500, #6b7280);
    margin: 0.5rem 0 0.75rem;
}

.hx-cohort-percentile-bar {
    display: grid;
    grid-template-columns: 3rem 1fr 4rem;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
}

.hx-cohort-percentile-bar__track {
    height: 8px;
    background: var(--hx-gray-100, #f3f4f6);
    border-radius: 4px;
    overflow: hidden;
}

.hx-cohort-percentile-bar__fill {
    height: 100%;
    background: var(--hx-accent, #00d4aa);
    border-radius: 4px;
    transition: width 0.3s ease;
    min-width: 2px;
}

.hx-cohort-drawer-insufficient {
    font-size: 0.8125rem;
    color: var(--hx-gray-500, #6b7280);
    font-style: italic;
    margin: 0.5rem 0;
}

/* ==========================================================================
   QA READABILITY OVERRIDES
   Keep this at EOF so the plugin beats aggressive host-theme link/button rules.
   ========================================================================== */

.hx-app a.hx-cta-card,
.entry-content.rbct .hx-app a.hx-cta-card {
    display: block;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    color: var(--hx-text, #1a1a1a) !important;
    border: 1px solid rgba(26, 26, 26, 0.08) !important;
    border-radius: var(--hx-radius-lg, 0.875rem);
    box-shadow: 0 1px 2px rgba(26, 26, 26, 0.03), 0 14px 34px rgba(26, 26, 26, 0.06);
    text-decoration: none !important;
}

.hx-app a.hx-cta-card:hover,
.entry-content.rbct .hx-app a.hx-cta-card:hover {
    background: #ffffff !important;
    color: var(--hx-text, #1a1a1a) !important;
    border-color: rgba(26, 26, 26, 0.16) !important;
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(26, 26, 26, 0.04), 0 18px 42px rgba(26, 26, 26, 0.1);
}

.hx-app .hx-cta-card-title,
.entry-content.rbct .hx-app .hx-cta-card-title {
    color: var(--hx-text, #1a1a1a) !important;
}

.hx-app .hx-cta-card-desc,
.entry-content.rbct .hx-app .hx-cta-card-desc {
    color: var(--hx-text-secondary, #495057) !important;
}

.hx-app .hx-btn.hx-btn-secondary,
.entry-content.rbct .hx-app .hx-btn.hx-btn-secondary {
    background: var(--hx-dark-900, #0a0a0a) !important;
    color: #ffffff !important;
    border-color: var(--hx-dark-900, #0a0a0a) !important;
    text-decoration: none !important;
}

.hx-app .hx-btn.hx-btn-secondary:hover,
.entry-content.rbct .hx-app .hx-btn.hx-btn-secondary:hover {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

.hx-app .hx-footer,
.entry-content.rbct .hx-app .hx-footer {
    background: #0a0a0a !important;
    color: rgba(255, 255, 255, 0.72) !important;
}

.hx-app .hx-footer a.hx-footer-brand,
.entry-content.rbct .hx-app .hx-footer a.hx-footer-brand {
    color: rgba(255, 255, 255, 0.78) !important;
    text-decoration: none !important;
}

.hx-app .hx-footer a.hx-footer-brand .hx-brand-accent,
.entry-content.rbct .hx-app .hx-footer a.hx-footer-brand .hx-brand-accent {
    color: var(--hx-primary, #e8ff00) !important;
}

.hx-app .hx-footer .hx-footer-links a,
.entry-content.rbct .hx-app .hx-footer .hx-footer-links a {
    color: rgba(255, 255, 255, 0.68) !important;
    text-decoration: none !important;
}

.hx-app .hx-footer .hx-footer-links a:hover,
.entry-content.rbct .hx-app .hx-footer .hx-footer-links a:hover {
    color: var(--hx-primary, #e8ff00) !important;
}

.hx-app .hx-footer .hx-footer-disclaimer,
.entry-content.rbct .hx-app .hx-footer .hx-footer-disclaimer {
    color: rgba(255, 255, 255, 0.7) !important;
}

.hx-app .hx-faq-trigger,
.entry-content.rbct .hx-app .hx-faq-trigger {
    background: #b80f3a !important;
    color: #ffffff !important;
    border-color: #b80f3a !important;
}

.hx-app .hx-table-note,
.entry-content.rbct .hx-app .hx-table-note {
    color: #4b5563 !important;
}

.entry-content .hx-app .hx-cta-section a.hx-cta-card > .hx-cta-card-title,
.entry-content.rbct .hx-app .hx-cta-section a.hx-cta-card > .hx-cta-card-title,
.entry-content .hx-app .hx-cta-section a.hx-cta-card > div.hx-cta-card-title,
.entry-content.rbct .hx-app .hx-cta-section a.hx-cta-card > div.hx-cta-card-title {
    color: var(--hx-text, #1a1a1a) !important;
}

.entry-content .hx-app .hx-cta-section a.hx-cta-card > .hx-cta-card-desc,
.entry-content.rbct .hx-app .hx-cta-section a.hx-cta-card > .hx-cta-card-desc,
.entry-content .hx-app .hx-cta-section a.hx-cta-card > div.hx-cta-card-desc,
.entry-content.rbct .hx-app .hx-cta-section a.hx-cta-card > div.hx-cta-card-desc {
    color: var(--hx-text-secondary, #495057) !important;
}

.hx-app .hx-nav-mobile a,
.hx-app .hx-nav-mobile button,
.hx-app .hx-nav-mobile .hx-nav-mobile-group-label,
.entry-content.rbct .hx-app .hx-nav-mobile a,
.entry-content.rbct .hx-app .hx-nav-mobile button,
.entry-content.rbct .hx-app .hx-nav-mobile .hx-nav-mobile-group-label {
    background: transparent !important;
}

.hx-app .hx-nav-mobile a:hover,
.entry-content.rbct .hx-app .hx-nav-mobile a:hover {
    color: var(--hx-text, #1a1a1a) !important;
}

.hx-app .hx-cta-section .hx-grid > a:not(.hx-cta-card):not(.hx-btn),
.entry-content.rbct .hx-app .hx-cta-section .hx-grid > a:not(.hx-cta-card):not(.hx-btn) {
    display: block;
    padding: var(--hx-sp-5, 1.5rem);
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: var(--hx-radius-lg, 0.875rem);
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.hx-app .hx-cta-section .hx-grid > a:not(.hx-cta-card):not(.hx-btn) *,
.entry-content.rbct .hx-app .hx-cta-section .hx-grid > a:not(.hx-cta-card):not(.hx-btn) * {
    color: inherit !important;
}

.hx-app .hx-record-card-featured .hx-record-source,
.hx-app .hx-record-card-featured .hx-record-source a,
.entry-content.rbct .hx-app .hx-record-card-featured .hx-record-source,
.entry-content.rbct .hx-app .hx-record-card-featured .hx-record-source a {
    color: rgba(255, 255, 255, 0.78) !important;
}

.hx-app .hx-calculator-section .hx-unit-btn.hx-segmented-btn,
.entry-content.rbct .hx-app .hx-calculator-section .hx-unit-btn.hx-segmented-btn {
    min-height: 44px !important;
    padding-block: 10px !important;
}

.hx-app .hx-hub-hero,
.entry-content.rbct .hx-app .hx-hub-hero {
    background-color: #0a0d12 !important;
    color: #ffffff !important;
}

.hx-app .hx-hub-hero *,
.entry-content.rbct .hx-app .hx-hub-hero * {
    color: inherit;
}

.hx-app .hx-hub-hero .hx-eyebrow,
.hx-app .hx-hub-hero [class*="eyebrow"],
.hx-app .hx-hub-hero .hx-badge,
.entry-content.rbct .hx-app .hx-hub-hero .hx-eyebrow,
.entry-content.rbct .hx-app .hx-hub-hero [class*="eyebrow"],
.entry-content.rbct .hx-app .hx-hub-hero .hx-badge {
    color: #0a0d12 !important;
    background: var(--hx-primary, #e8ff00) !important;
    border-color: rgba(232, 255, 0, 0.65) !important;
    text-shadow: none !important;
}

.hx-app .hx-hub-hero p,
.entry-content.rbct .hx-app .hx-hub-hero p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ==========================================================================
   AUTHOR BYLINE — E-E-A-T scaffold
   ========================================================================== */

.hx-app .hx-byline { font-size: 0.875rem; color: #6b7280; margin: 0.5rem 0 1.5rem; display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.hx-app .hx-byline-name { font-weight: 600; color: #1f2937; }
.hx-app .hx-byline-reviewer::before { content: "·"; margin-right: 0.5rem; color: #d1d5db; }
.hx-app .hx-byline-updated::before { content: "·"; margin-right: 0.5rem; color: #d1d5db; }

.hx-app .hx-btn,
.entry-content.rbct .hx-app .hx-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}