/* Theme Park Hall of Shame - Mary Blair-inspired Design */
/* Colors inspired by "it's a small world" and mid-century modern aesthetics */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=Space+Grotesk:wght@400;600;700;800&display=swap');

:root {
    --coral: #FF6B5A;
    --turquoise: #00B8C5;
    --gold: #FFB627;
    --soft-pink: #FF9BAA;
    --deep-teal: #007B8A;
    --warm-white: #FFF8F0;
    --charcoal: #2A2A2A;
    --light-gray: #F5F5F5;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--warm-white);
    color: var(--charcoal);
    line-height: 1.5;
}

/* ============================================
   GEOMETRIC TOP BAR
   ============================================ */
.geometric-bar {
    height: 12px;
    background: linear-gradient(
        to right,
        var(--coral) 0%,
        var(--coral) 25%,
        var(--turquoise) 25%,
        var(--turquoise) 50%,
        var(--gold) 50%,
        var(--gold) 75%,
        var(--soft-pink) 75%,
        var(--soft-pink) 100%
    );
}

/* ============================================
   BETA WARNING BANNER - Mary Blair Collage Style
   ============================================ */
.beta-section {
    background: var(--warm-white);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-height: 120px;
}

.beta-content {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.92);
    padding: 16px 32px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    font-family: 'Space Grotesk', sans-serif;
}

.beta-badge {
    background: var(--coral);
    color: white;
    padding: 6px 14px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.beta-message {
    font-size: 1rem;
    font-weight: 500;
    color: var(--charcoal);
}

@media (max-width: 600px) {
    .beta-section {
        min-height: 100px;
    }

    .beta-content {
        flex-direction: column;
        gap: 10px;
        padding: 14px 20px;
        margin: 0 10px;
    }

    .beta-message {
        font-size: 0.9rem;
        text-align: center;
    }
}

/* ============================================
   SPONSORSHIP SECTION - Mary Blair Collage Style
   ============================================ */
.sponsor-section {
    background: var(--warm-white);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-height: 180px;
}

/* Base layer - large blocks */
.geo-base-1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 35%;
    height: 100%;
    background: var(--coral);
}

.geo-base-2 {
    position: absolute;
    left: 35%;
    top: 0;
    width: 30%;
    height: 100%;
    background: var(--turquoise);
}

.geo-base-3 {
    position: absolute;
    right: 0;
    top: 0;
    width: 35%;
    height: 100%;
    background: var(--gold);
}

/* Overlapping rectangular shapes */
.geo-rect-coral-1 { position: absolute; left: 8%; top: 20px; width: 140px; height: 80px; background: #FF8B7A; }
.geo-rect-coral-2 { position: absolute; left: 20%; bottom: 30px; width: 100px; height: 100px; background: #FF4A36; }
.geo-rect-teal-1 { position: absolute; left: 30%; top: 15px; width: 120px; height: 70px; background: #00D4E0; }
.geo-rect-teal-2 { position: absolute; left: 38%; bottom: 20px; width: 90px; height: 90px; background: #005F6A; }
.geo-rect-gold-1 { position: absolute; right: 20%; top: 25px; width: 130px; height: 75px; background: #FFD052; }
.geo-rect-gold-2 { position: absolute; right: 8%; bottom: 35px; width: 110px; height: 85px; background: #FFA500; }
.geo-rect-pink-1 { position: absolute; right: 30%; top: 40px; width: 95px; height: 95px; background: var(--soft-pink); }
.geo-rect-pink-2 { position: absolute; left: 45%; top: 35px; width: 85px; height: 110px; background: #FFB5C5; }

/* Small accent squares */
.geo-square-1 { position: absolute; left: 15%; top: 50%; width: 45px; height: 45px; background: var(--deep-teal); }
.geo-square-2 { position: absolute; right: 25%; bottom: 20%; width: 50px; height: 50px; background: #CC5544; }
.geo-square-3 { position: absolute; left: 42%; bottom: 15%; width: 40px; height: 40px; background: #00A0AA; }

/* Tall vertical bars */
.geo-bar-1 { position: absolute; left: 25%; top: 0; width: 35px; height: 100%; background: #FF6B8A; }
.geo-bar-2 { position: absolute; right: 35%; top: 0; width: 30px; height: 100%; background: #FFE066; }

/* Content box with strong border */
.sponsor-content-expanded {
    position: relative;
    z-index: 100;
    background: white;
    padding: 20px 30px;
    border: 4px solid var(--charcoal);
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 25px;
    max-width: 700px;
}

.sponsor-led-display {
    flex-shrink: 0;
}

.led-gif {
    width: 180px;
    height: 90px;
    object-fit: cover;
    object-position: center 60%;
    border: 3px solid var(--charcoal);
    display: block;
}

.sponsor-text-content {
    flex: 1;
    text-align: left;
}

.sponsor-tagline {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--deep-teal);
    margin-bottom: 6px;
}

.sponsor-brand {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--charcoal);
    letter-spacing: -0.5px;
    margin-bottom: 6px;
    line-height: 1.1;
}

.sponsor-brand a {
    color: var(--charcoal);
    text-decoration: none;
    transition: color 0.3s ease;
}

.sponsor-brand a:hover {
    color: var(--coral);
}

.sponsor-description {
    font-size: 0.8rem;
    color: var(--charcoal);
    opacity: 0.8;
    line-height: 1.3;
}

/* ============================================
   HEADER SECTION
   ============================================ */
.header-section {
    background: var(--warm-white);
    padding: 30px 20px 25px;
    text-align: center;
    position: relative;
}

.header-section::before {
    content: '';
    position: absolute;
    top: 20px;
    right: 10%;
    width: 120px;
    height: 120px;
    background: var(--coral);
    opacity: 0.15;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.header-section::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 8%;
    width: 80px;
    height: 80px;
    background: var(--turquoise);
    opacity: 0.15;
    border-radius: 50%;
}

.established {
    display: none;
}

.header-section h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 0.95;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.title-line-1 {
    color: var(--coral);
    display: block;
}

.title-line-2 {
    color: var(--deep-teal);
    display: block;
}

.subtitle {
    font-size: 1rem;
    font-weight: 400;
    color: var(--charcoal);
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.8;
}

.about-link {
    position: fixed;
    top: 25px;
    left: 25px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--coral);
    text-decoration: none;
    border-bottom: 2px solid var(--coral);
    padding: 8px 12px 5px;
    background: white;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 1000;
}

.about-link:hover {
    color: var(--deep-teal);
    border-bottom-color: var(--deep-teal);
}

/* Header actions container - spans full width for split positioning */
.header-actions {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 1000;
    pointer-events: none;
}

/* About link on the LEFT */
.header-actions .about-link {
    position: static;
    pointer-events: auto;
}

/* Search trigger on the RIGHT */
.header-actions .search-trigger {
    pointer-events: auto;
}

@media (max-width: 600px) {
    .header-actions {
        top: 15px;
        left: 15px;
        right: 15px;
    }

    .header-actions .search-trigger span:not(.search-shortcut-hint) {
        display: none;
    }

    .header-actions .search-trigger {
        padding: 8px;
    }
}

/* ============================================
   NAVIGATION
   ============================================ */
.nav-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    background: var(--charcoal);
    padding: 4px;
}

.nav-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.nav-item {
    background: var(--warm-white);
    padding: 20px;
    text-align: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    position: relative;
    overflow: hidden;
}

.nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    transition: left 0.3s ease;
}

.nav-item:nth-child(1)::before { background: var(--coral); }
.nav-item:nth-child(2)::before { background: var(--turquoise); }
.nav-item:nth-child(3)::before { background: var(--gold); }
.nav-item:nth-child(4)::before { background: var(--soft-pink); }

.nav-item:hover::before {
    left: 0;
}

.nav-item:hover {
    color: white;
}

.nav-item.active {
    color: white;
}

.nav-item.active:nth-child(1) { background: var(--coral); }
.nav-item.active:nth-child(2) { background: var(--turquoise); }
.nav-item.active:nth-child(3) { background: var(--gold); }
.nav-item.active:nth-child(4) { background: var(--soft-pink); }

.nav-item span {
    position: relative;
    z-index: 1;
}

/* ============================================
   COMBINED FILTERS ROW
   ============================================ */
.filters-row {
    max-width: 1200px;
    margin: 10px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

/* ============================================
   PARK FILTER
   ============================================ */
.park-filter {
    display: flex;
    align-items: center;
    gap: 0;
}

.filter-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--charcoal);
    margin-right: 15px;
    opacity: 0.7;
}

.filter-toggle {
    display: flex;
    gap: 0;
    border: 3px solid var(--charcoal);
    background: white;
}

.global-filter-btn,
.filter-btn {
    padding: 12px 20px;
    background: white;
    border: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--charcoal);
    position: relative;
}

.global-filter-btn:first-child,
.filter-btn:first-child {
    border-right: 2px solid var(--light-gray);
}

.global-filter-btn:hover,
.filter-btn:hover {
    background: var(--light-gray);
}

.global-filter-btn.active,
.filter-btn.active {
    background: var(--soft-pink);
    color: white;
}

/* ============================================
   TIME SELECTOR
   ============================================ */
.time-selector {
    display: flex;
    gap: 0;
    align-items: center;
}

.timezone-indicator {
    margin-left: 16px;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--deep-teal);
    background: rgba(0, 123, 138, 0.1);
    border-radius: 4px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.time-btn,
.period-btn {
    padding: 12px 25px;
    background: white;
    border: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--charcoal);
}

/* Primary time buttons with colored left borders */
.time-btn:nth-child(1) { border-left: 3px solid var(--coral); }
.time-btn:nth-child(2) { border-left: 3px solid var(--turquoise); }
.time-btn:nth-child(3) { border-left: 3px solid var(--gold); }

.time-btn:hover,
.period-btn:hover {
    background: var(--light-gray);
}

.time-btn.active,
.period-btn.active {
    background: var(--charcoal);
    color: white;
}

/* History Dropdown */
.history-dropdown {
    position: relative;
    display: inline-block;
}

.history-btn {
    padding: 12px 25px;
    background: white;
    border: none;
    border-left: 3px solid var(--soft-pink);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--charcoal);
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
}

.history-btn .chevron {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.history-dropdown.open .history-btn .chevron {
    transform: rotate(180deg);
}

.history-btn:hover {
    background: var(--light-gray);
}

.history-btn.active {
    background: var(--charcoal);
    color: white;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 150px;
    border-top: 3px solid var(--soft-pink);
}

.history-dropdown.open .dropdown-menu {
    display: block;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background: white;
    border: none;
    border-left: 3px solid transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--charcoal);
    text-align: left;
}

.dropdown-item:first-child {
    border-left-color: var(--deep-teal);
}

.dropdown-item:last-child {
    border-left-color: var(--coral);
}

.dropdown-item:hover {
    background: var(--light-gray);
}

.dropdown-item.active {
    background: var(--charcoal);
    color: white;
}

/* ============================================
   LIVE STATUS INDICATOR
   ============================================ */
.live-status {
    max-width: 1200px;
    margin: 5px auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--charcoal);
}

.live-indicator {
    width: 10px;
    height: 10px;
    background: var(--coral);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
}

/* ============================================
   DATA SOURCE ATTRIBUTION
   ============================================ */
.data-source-callout {
    max-width: 1200px;
    margin: 15px auto;
    padding: 0 20px;
}

.data-source-content {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--deep-teal) 0%, #1a5a5a 100%);
    border-left: 4px solid var(--gold);
    color: white;
}

.data-source-badge {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    background: var(--gold);
    color: var(--charcoal);
    padding: 4px 8px;
    white-space: nowrap;
}

.data-source-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.data-source-main {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
}

.data-source-main a {
    color: var(--gold);
    text-decoration: none;
}

.data-source-main a:hover {
    text-decoration: underline;
}

.data-source-sub {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    opacity: 0.85;
}

.data-source-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    text-decoration: none;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.data-source-link:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.data-source-link .external-arrow {
    font-size: 1rem;
}

@media (max-width: 768px) {
    .data-source-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .data-source-link {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   MAIN CONTENT WRAPPER
   ============================================ */
.content-wrapper,
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
}

#loading {
    text-align: center;
    padding: 60px 20px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    color: var(--charcoal);
    opacity: 0.6;
}

/* ============================================
   STATISTICS GRID
   ============================================ */
.stats-grid,
.aggregate-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    margin-bottom: 15px;
    background: var(--charcoal);
    padding: 3px;
}

/* 5-column layout for status panels */
.stats-grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 768px) {
    .stats-grid-5 {
        grid-template-columns: repeat(3, 1fr);
    }
    .stats-grid-5 .stat-block:nth-child(4),
    .stats-grid-5 .stat-block:nth-child(5) {
        grid-column: span 1;
    }
}

@media (max-width: 480px) {
    .stats-grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats-grid-5 .stat-block:last-child {
        grid-column: span 2;
    }
}

.stat-block,
.stat-card {
    background: white;
    padding: 12px 20px;
    text-align: center;
    position: relative;
}

/* Default colors for 3-column grid (legacy) */
.stat-block:nth-child(1),
.stat-card:nth-child(1) { border-left: 4px solid var(--coral); }
.stat-block:nth-child(2),
.stat-card:nth-child(2) { border-left: 4px solid var(--turquoise); }
.stat-block:nth-child(3),
.stat-card:nth-child(3) { border-left: 4px solid var(--gold); }

/* 5-column status panel colors */
.stat-parks { border-left: 4px solid var(--deep-teal) !important; }
.stat-operating { border-left: 4px solid var(--turquoise) !important; }
.stat-down { border-left: 4px solid var(--coral) !important; }
.stat-closed { border-left: 4px solid var(--charcoal) !important; }
.stat-repairs { border-left: 4px solid var(--gold) !important; }

.stat-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--charcoal);
    opacity: 0.6;
    margin-bottom: 4px;
}

.stat-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

/* Default colors for 3-column grid (legacy) */
.stat-block:nth-child(1) .stat-value,
.stat-card:nth-child(1) .stat-value { color: var(--coral); }
.stat-block:nth-child(2) .stat-value,
.stat-card:nth-child(2) .stat-value { color: var(--turquoise); }
.stat-block:nth-child(3) .stat-value,
.stat-card:nth-child(3) .stat-value { color: var(--gold); }

/* 5-column status panel value colors */
.stat-parks .stat-value { color: var(--deep-teal) !important; }
.stat-operating .stat-value { color: var(--turquoise) !important; }
.stat-down .stat-value { color: var(--coral) !important; }
.stat-closed .stat-value { color: var(--charcoal) !important; }
.stat-repairs .stat-value { color: var(--gold) !important; }

/* ============================================
   SECTION HEADERS
   ============================================ */
.section-header,
.view-header {
    margin: 15px 0 15px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.section-marker {
    width: 8px;
    height: 60px;
    flex-shrink: 0;
    background: var(--coral);
}

.section-header:nth-of-type(2) .section-marker { background: var(--turquoise); }
.section-header:nth-of-type(3) .section-marker { background: var(--gold); }
.section-header:nth-of-type(4) .section-marker { background: var(--turquoise); }

.section-title,
.view-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--charcoal);
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin: 0;
}

.view-description {
    font-size: 1rem;
    color: var(--charcoal);
    opacity: 0.7;
    margin-top: 0.5rem;
}

/* ============================================
   ENTITY TOGGLE (PARKS/RIDES)
   ============================================ */
.entity-toggle {
    display: flex;
    gap: 0;
    margin-right: 20px;
}

.entity-btn {
    padding: 10px 20px;
    border: 3px solid var(--charcoal);
    background: var(--warm-white);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--charcoal);
}

.entity-btn:first-child {
    border-right: none;
}

.entity-btn:hover {
    background: var(--light-gray);
}

.entity-btn.active {
    background: var(--charcoal);
    color: var(--warm-white);
}

/* ============================================
   DATA TABLES
   ============================================ */
.data-container {
    background: white;
    border: 3px solid var(--charcoal);
    margin-bottom: 40px;
}

/* View containers - no border on outer wrapper */
.park-rankings-view,
.ride-performance-view,
.wait-times-view,
.trends-view {
    background: transparent;
    border: none;
    margin-bottom: 40px;
}

.table-header {
    padding: 20px 30px;
    background: var(--charcoal);
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.rankings-table-container {
    overflow-x: auto;
}

table,
.rankings-table,
.ride-table,
.wait-times-table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background: var(--light-gray);
}

th {
    padding: 18px 20px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--charcoal);
    text-align: left;
}

/* Sortable column headers */
th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, color 0.2s ease;
}

th.sortable:hover {
    background: rgba(255, 215, 0, 0.15);
}

th.sortable.sorted {
    color: var(--gold);
}

.sort-indicator {
    margin-left: 4px;
    font-size: 0.8em;
    opacity: 0.3;
}

.sort-indicator.active {
    opacity: 1;
    color: var(--gold);
}

tbody tr {
    border-bottom: 1px solid var(--light-gray);
    transition: background 0.2s ease;
}

tbody tr:hover {
    background: rgba(255, 107, 90, 0.05);
}

td {
    padding: 20px;
    font-size: 0.95rem;
    color: var(--charcoal);
}

/* Rank column */
.rank,
.rank-badge {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--coral);
}

.rank-badge {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    font-size: 1.25rem;
    background: var(--light-gray);
    color: var(--charcoal);
}

.rank-badge.rank-1 {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: var(--charcoal);
}

.rank-badge.rank-2 {
    background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
    color: var(--charcoal);
}

.rank-badge.rank-3 {
    background: linear-gradient(135deg, #cd7f32 0%, #d4a574 100%);
    color: white;
}

/* Park/Ride names */
.park-name,
.park-link,
.ride-link {
    font-weight: 700;
    color: var(--deep-teal);
    text-decoration: none;
}

.park-link:hover,
.ride-link:hover {
    color: var(--coral);
    text-decoration: underline;
}

/* Top rows highlighting */
.park-row.top-three,
.ride-row.top-three,
.top-three {
    background-color: rgba(255, 182, 39, 0.1);
}

.park-row.top-three:hover,
.ride-row.top-three:hover,
.top-three:hover {
    background-color: rgba(255, 182, 39, 0.15);
}

/* Ride name cell - matches park-name-cell structure */
.ride-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ride-name-cell .ride-name {
    font-weight: 700;
    color: var(--charcoal);
}

.ride-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ride-external-link {
    color: var(--deep-teal);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.ride-external-link:hover {
    opacity: 1;
    color: var(--coral);
}

/* ============================================
   STATUS BADGES
   ============================================ */
.status-badge {
    display: inline-block;
    padding: 6px 16px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 2px;
}

.status-down {
    background: var(--coral);
    color: white;
}

.status-running {
    background: var(--turquoise);
    color: white;
}

.status-closed {
    background: #6B7280;  /* Gray - distinct from Down/Running */
    color: white;
}

.status-unknown {
    background: var(--light-gray);
    color: var(--charcoal);
}

/* ============================================
   TREND INDICATORS
   ============================================ */
.trend,
.trend-indicator {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.trend-up,
.trend-better {
    color: var(--turquoise);
    background: rgba(0, 184, 197, 0.1);
}

.trend-down,
.trend-worse {
    color: var(--coral);
    background: rgba(255, 107, 90, 0.1);
}

.trend-neutral {
    color: var(--gold);
    background: rgba(255, 182, 39, 0.1);
}

/* ============================================
   DOWNTIME VISUALIZATION
   ============================================ */
.downtime-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.downtime-bar,
.uptime-bar {
    width: 100%;
    height: 12px;
    background: rgba(0, 184, 197, 0.2);  /* Light turquoise tint for contrast */
    position: relative;
    overflow: hidden;
}

.downtime-fill,
.uptime-fill {
    height: 100%;
    transition: width 0.5s ease;
}

.uptime-fill {
    background: var(--turquoise);
}

.shape-coral { background: var(--coral); }
.shape-turquoise { background: var(--turquoise); }
.shape-gold { background: var(--gold); }

.downtime-value {
    font-weight: 600;
    color: var(--coral);
}

.uptime-display {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.uptime-percentage {
    font-weight: 600;
    color: var(--turquoise);
}

/* ============================================
   TIER BADGES
   ============================================ */
.tier-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: help;
}

.tier-1 {
    background: var(--coral);
    color: white;
}

.tier-2 {
    background: var(--gold);
    color: var(--charcoal);
}

.tier-3 {
    background: var(--turquoise);
    color: white;
}

.tier-unknown {
    background: var(--light-gray);
    color: var(--charcoal);
}

/* ============================================
   SHAME SCORE
   ============================================ */
.shame-col {
    text-align: center;
    min-width: 80px;
}

.shame-score {
    font-weight: 700;
    font-size: 1rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.shame-critical {
    background: #FF6B5A;  /* Red for >= 2.0 */
    color: white;
}

.shame-high {
    background: #FFB627;  /* Orange for >= 1.0 */
    color: var(--charcoal);
}

.shame-medium {
    background: #FFE066;  /* Yellow for >= 0.5 */
    color: var(--charcoal);
}

.shame-low {
    background: #E8F7F8;  /* Very light blue for < 0.5 */
    color: var(--charcoal);
}

.clickable-shame {
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

.clickable-shame:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ============================================
   CONTROLS (period buttons, filters)
   ============================================ */
.rankings-controls,
.controls {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: white;
    border: 3px solid var(--charcoal);
}

.control-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.control-group label {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: var(--charcoal);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.button-group {
    display: flex;
    gap: 0;
    border: 2px solid var(--charcoal);
}

.button-group .period-btn,
.button-group .filter-btn,
.button-group .mode-btn {
    border: none;
    border-right: 1px solid var(--light-gray);
}

.button-group .period-btn:last-child,
.button-group .filter-btn:last-child,
.button-group .mode-btn:last-child {
    border-right: none;
}

/* ============================================
   LOADING & ERROR STATES
   ============================================ */
.loading-state {
    text-align: center;
    padding: 60px 20px;
}

.spinner {
    border: 4px solid var(--light-gray);
    border-top: 4px solid var(--coral);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 1.5rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.error-state,
.empty-state,
.placeholder-view {
    text-align: center;
    padding: 60px 20px;
    color: var(--charcoal);
    opacity: 0.7;
}

.error-message {
    color: var(--coral);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.retry-btn {
    background: var(--coral);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.2s;
}

.retry-btn:hover {
    background: var(--deep-teal);
}

/* ============================================
   MODAL STYLES
   ============================================ */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(42, 42, 42, 0.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.modal-overlay.active {
    display: flex;
}

/* JS-created modals (About, Park Details) - show when active */
#about-modal.modal-overlay.active,
#park-details-modal.modal-overlay.active {
    display: flex;
}

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

.modal-content {
    background: var(--warm-white);
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    border: 6px solid var(--charcoal);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

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

/* Geometric decorations in modal */
.modal-geo-1 {
    position: absolute;
    top: -20px;
    right: 40px;
    width: 80px;
    height: 80px;
    background: var(--coral);
    z-index: -1;
}

.modal-geo-2 {
    position: absolute;
    bottom: -15px;
    left: 50px;
    width: 60px;
    height: 100px;
    background: var(--turquoise);
    z-index: -1;
}

.modal-geo-3 {
    position: absolute;
    top: 50%;
    right: -25px;
    width: 50px;
    height: 50px;
    background: var(--gold);
    transform: translateY(-50%) rotate(45deg);
    z-index: -1;
}

.modal-inner,
.modal-body {
    padding: 50px;
    position: relative;
}

.modal-header {
    padding: 1.5rem 2rem;
    border-bottom: 3px solid var(--charcoal);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: var(--warm-white);
    z-index: 10;
}

.modal-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--deep-teal);
    margin: 0;
}

.modal-close,
.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: var(--charcoal);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    font-weight: 300;
}

.modal-close:hover,
.modal-close-btn:hover {
    background: var(--coral);
    transform: rotate(90deg);
}

.modal-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--deep-teal);
    margin-bottom: 10px;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.modal-subtitle {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 30px;
}

/* ============================================
   ABOUT MODAL TABS
   ============================================ */
.about-tabs {
    display: flex;
    gap: 0;
    border-bottom: 3px solid var(--charcoal);
    margin-bottom: 0;
    background: var(--warm-white);
    position: sticky;
    top: 60px;
    z-index: 5;
}

.about-tab-btn {
    flex: 1;
    padding: 14px 20px;
    background: transparent;
    border: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--charcoal);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.about-tab-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--deep-teal);
}

.about-tab-btn.active {
    color: var(--deep-teal);
    background: var(--warm-white);
}

.about-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--coral);
}

.about-tab-panel {
    display: none;
    padding: 30px;
    animation: fadeIn 0.2s ease;
}

.about-tab-panel.active {
    display: block;
}

/* About Content Sections */
.about-section {
    margin-bottom: 28px;
}

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

.about-section h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--deep-teal);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--coral);
    display: inline-block;
}

.about-section p {
    margin-bottom: 12px;
    line-height: 1.6;
    color: var(--charcoal);
}

.about-section ul {
    margin: 12px 0;
    padding-left: 24px;
}

.about-section li {
    margin-bottom: 8px;
    line-height: 1.5;
    color: var(--charcoal);
}

.about-section .external-link {
    color: var(--deep-teal);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid var(--coral);
    transition: all 0.2s ease;
}

.about-section .external-link:hover {
    color: var(--coral);
    border-bottom-color: var(--deep-teal);
}

/* Tier Explanation Styles */
.tier-explanation {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
}

.tier-item-explanation {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tier-badge-example {
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: 60px;
    text-align: center;
}

.tier-1-badge {
    background: var(--coral);
    color: white;
}

.tier-2-badge {
    background: var(--gold);
    color: var(--charcoal);
}

.tier-3-badge {
    background: var(--turquoise);
    color: white;
}

.tier-text {
    color: var(--charcoal);
    font-size: 0.9rem;
}

.tier-note,
.data-note {
    background: rgba(0, 0, 0, 0.04);
    padding: 12px 16px;
    border-left: 4px solid var(--deep-teal);
    font-size: 0.9rem;
    margin-top: 16px;
}

/* About Section - Formula & Scoring Styles */
.about-section h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-top: 24px;
    margin-bottom: 12px;
}

.formula-box {
    background: linear-gradient(135deg, var(--deep-teal) 0%, var(--turquoise) 100%);
    color: white;
    padding: 20px 24px;
    border-radius: 8px;
    text-align: center;
    font-size: 1.1rem;
    margin: 16px 0;
    box-shadow: 0 4px 12px rgba(0, 123, 138, 0.3);
}

.tier-table,
.score-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 0.9rem;
}

.tier-table th,
.tier-table td,
.score-table th,
.score-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.tier-table th,
.score-table th {
    background: var(--charcoal);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.tier-table tbody tr:hover,
.score-table tbody tr:hover {
    background: rgba(0, 184, 197, 0.1);
}

.tier-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
}

.tier-badge.tier-1 {
    background: var(--coral);
    color: white;
}

.tier-badge.tier-2 {
    background: var(--gold);
    color: var(--charcoal);
}

.tier-badge.tier-3 {
    background: var(--turquoise);
    color: white;
}

.about-screenshot {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    margin: 16px 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.about-section ol {
    margin: 12px 0;
    padding-left: 24px;
}

/* Report Link Styling */
.report-link {
    text-align: center;
    margin: 20px 0;
}

.report-link .external-link {
    display: inline-block;
    padding: 12px 24px;
    background: var(--deep-teal);
    color: white !important;
    border: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s ease;
}

.report-link .external-link:hover {
    background: var(--coral);
    color: white !important;
}

/* Disclaimer Styling */
.about-section.disclaimer {
    background: rgba(0, 0, 0, 0.03);
    padding: 20px;
    border-left: 4px solid var(--gold);
}

.about-section.disclaimer h3 {
    border-bottom-color: var(--gold);
}

/* About Footer */
.about-footer {
    text-align: center;
    font-style: italic;
    color: var(--charcoal);
    opacity: 0.8;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* ============================================
   PARK DETAILS MODAL - SHAME BREAKDOWN
   ============================================ */
.park-details-modal {
    max-width: 700px;
}

.park-details-content {
    padding: 1.5rem 2rem 2rem;
}

.shame-breakdown-section {
    margin-bottom: 2rem;
}

.shame-header h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--deep-teal);
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--coral);
}

.shame-score-display {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--charcoal) 0%, #2c3e50 100%);
    border: 4px solid var(--charcoal);
    margin-bottom: 1.5rem;
}

.shame-score-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.shame-score-value.low { color: #27ae60; }
.shame-score-value.medium { color: var(--gold); }
.shame-score-value.high { color: var(--coral); }

.shame-score-label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.7);
}

.shame-closed-message {
    text-align: center;
    padding: 2rem;
    background: #f8f9fa;
    border: 3px solid var(--charcoal);
}

.closed-badge {
    display: inline-block;
    background: var(--charcoal);
    color: white;
    padding: 0.5rem 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.shame-closed-message p {
    color: var(--charcoal);
    margin: 0;
    line-height: 1.6;
}

.shame-formula-box {
    background: #f8f9fa;
    border: 3px solid var(--charcoal);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.formula-title {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--deep-teal);
    margin-bottom: 0.75rem;
}

.formula {
    font-family: 'Space Grotesk', monospace;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.formula-part {
    font-weight: 700;
    color: var(--deep-teal);
}

.formula-fraction {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: white;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--charcoal);
}

.formula-fraction .numerator {
    font-weight: 600;
    color: var(--coral);
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--charcoal);
    font-size: 0.85rem;
}

.formula-fraction .denominator {
    font-weight: 600;
    color: var(--deep-teal);
    padding-top: 0.25rem;
    font-size: 0.85rem;
}

.formula-multiplier {
    font-weight: 800;
    color: var(--coral);
    font-size: 1.5rem;
    margin-left: 0.5rem;
}

/* Actual calculation display with numbers */
.formula-calculation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    border: 2px solid var(--charcoal);
    font-family: 'Space Grotesk', monospace;
    font-size: 1.25rem;
    font-weight: 600;
}

.calc-fraction {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.calc-numerator {
    color: var(--coral);
    padding-bottom: 0.15rem;
    border-bottom: 2px solid var(--charcoal);
}

.calc-denominator {
    color: var(--deep-teal);
    padding-top: 0.15rem;
}

.calc-multiply {
    color: var(--charcoal);
}

.calc-equals {
    color: var(--charcoal);
    font-weight: 800;
}

.calc-result {
    color: var(--coral);
    font-weight: 800;
    font-size: 1.4rem;
    background: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 2px solid var(--coral);
}

.formula-explanation {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
}

/* Park closed notice - shown when park was closed during selected period */
.park-closed-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 3px solid var(--charcoal);
    margin-top: 1rem;
}

.park-closed-notice .closed-icon {
    color: var(--deep-teal);
    margin-bottom: 1rem;
    opacity: 0.8;
}

.park-closed-notice .closed-icon svg {
    width: 48px;
    height: 48px;
}

.park-closed-notice .closed-message {
    margin-bottom: 1.5rem;
}

.park-closed-notice .closed-message h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--charcoal);
    margin: 0 0 0.5rem 0;
}

.park-closed-notice .closed-message p {
    font-size: 1.1rem;
    color: var(--deep-teal);
    margin: 0;
    font-weight: 500;
}

.park-closed-notice .closed-explanation {
    max-width: 450px;
}

.park-closed-notice .closed-explanation p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin: 0 0 0.75rem 0;
}

.park-closed-notice .closed-explanation p:last-child {
    margin-bottom: 0;
}

/* Excluded rides notice - shown when rides are excluded from 7-day denominator */
.excluded-rides-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    background: rgba(249, 175, 25, 0.1);
    border: 2px solid var(--gold);
    border-radius: 4px;
}

.excluded-icon {
    font-size: 1.1rem;
    color: var(--gold);
    flex-shrink: 0;
    line-height: 1.4;
}

.excluded-text {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
}

.excluded-text strong {
    color: var(--charcoal);
}

.rides-down-section {
    margin-bottom: 1.5rem;
}

.rides-down-section h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--charcoal);
    margin: 0 0 1rem 0;
}

.rides-down-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tier-group {
    border: 3px solid var(--charcoal);
    background: white;
}

.tier-group-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--charcoal);
}

.tier-group.tier-1 .tier-group-header { background: rgba(231, 76, 60, 0.1); }
.tier-group.tier-2 .tier-group-header { background: rgba(249, 175, 25, 0.1); }
.tier-group.tier-3 .tier-group-header { background: rgba(74, 137, 138, 0.1); }

.tier-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
}

.tier-group.tier-1 .tier-badge { background: var(--coral); }
.tier-group.tier-2 .tier-badge { background: var(--gold); color: var(--charcoal); }
.tier-group.tier-3 .tier-badge { background: var(--deep-teal); }

.tier-name {
    font-weight: 600;
    color: var(--charcoal);
    flex: 1;
}

.tier-weight-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--coral);
}

.rides-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ride-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #eee;
}

.ride-item:last-child {
    border-bottom: none;
}

.ride-name {
    color: var(--charcoal);
    font-size: 0.9rem;
}

.ride-weight {
    font-weight: 700;
    color: var(--coral);
    font-size: 0.85rem;
}

.no-rides-down {
    text-align: center;
    padding: 2rem;
    background: #e8f5e9;
    border: 3px solid #27ae60;
}

.no-rides-down .success-icon {
    display: inline-block;
    font-size: 2.5rem;
    color: #27ae60;
    margin-bottom: 0.5rem;
}

.no-rides-down p {
    margin: 0;
    font-weight: 600;
    color: #27ae60;
}

.tier-weights-info {
    background: #f8f9fa;
    border: 3px solid var(--charcoal);
    padding: 1rem;
}

.tier-weights-title {
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--charcoal);
    margin-bottom: 0.75rem;
}

.tier-weights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.tier-weight-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background: white;
    border: 2px solid var(--charcoal);
}

.tier-weight-item .tier-badge {
    font-size: 0.65rem;
    margin-bottom: 0.25rem;
}

.tier-weight-item.tier-1 .tier-badge { background: var(--coral); }
.tier-weight-item.tier-2 .tier-badge { background: var(--gold); color: var(--charcoal); }
.tier-weight-item.tier-3 .tier-badge { background: var(--deep-teal); }

.tier-weight-item .weight-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--charcoal);
}

.tier-weight-item .weight-desc {
    font-size: 0.7rem;
    color: #666;
    text-align: center;
}

/* Shame Breakdown - Period Badge (LIVE vs TODAY) */
.shame-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.breakdown-period-badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 2px;
}

.breakdown-period-badge.live {
    background: var(--coral);
    color: white;
}

.breakdown-period-badge.today {
    background: var(--deep-teal);
    color: white;
}

.breakdown-period-badge.last-week {
    background: var(--gold);
    color: #333;
}

.breakdown-period-badge.last-month {
    background: var(--purple);
    color: white;
}

/* Period label for historical breakdowns */
.period-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    font-weight: 500;
}

/* Historical Breakdown Styling */
.historical-breakdown .shame-formula-box {
    background: linear-gradient(135deg, #fef9f0 0%, #fef3e2 100%);
    border-color: var(--gold);
}

.historical-explanation {
    padding: 0.75rem;
    background: rgba(255, 182, 39, 0.12);
    border-left: 3px solid var(--gold);
    margin-bottom: 0.75rem;
}

.historical-rides-list .ride-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ride-days {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

/* Formula text display */
.formula-text {
    font-style: italic;
    color: var(--deep-teal);
    font-weight: 600;
}

/* Today Breakdown - Average Stats */
.today-breakdown .shame-formula-box {
    background: linear-gradient(135deg, #f0f9fa 0%, #e8f4f5 100%);
    border-color: var(--deep-teal);
}

.today-explanation {
    padding: 0.75rem;
    background: rgba(0, 123, 138, 0.08);
    border-left: 3px solid var(--deep-teal);
    margin-bottom: 0.75rem;
}

.cumulative-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.cumulative-stats .stat-item {
    text-align: center;
    padding: 0.75rem;
    background: white;
    border: 2px solid var(--charcoal);
}

.cumulative-stats .stat-value {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--deep-teal);
    line-height: 1.2;
}

.cumulative-stats .stat-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
    margin-top: 0.25rem;
}

/* Today Breakdown - Rides Section */
.rides-section-note {
    font-size: 0.85rem;
    color: #666;
    margin: -0.5rem 0 1rem 0;
    font-style: italic;
}

.today-rides-list .ride-item {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.today-ride-item .ride-name {
    flex: 1;
    min-width: 150px;
}

.ride-downtime-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
}

.ride-downtime {
    color: var(--coral);
    font-weight: 600;
}

.ride-weighted {
    color: var(--deep-teal);
    font-weight: 600;
    font-size: 0.75rem;
}

/* Shame Score Chart Section */
.shame-chart-section {
    margin: 1.5rem 0;
    background: white;
    border: 3px solid var(--charcoal);
    padding: 1rem;
}

.shame-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.shame-chart-header h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--charcoal);
    margin: 0;
}

.chart-average-badge {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border: 2px solid var(--charcoal);
}

.chart-average-badge.low {
    background: var(--mint);
    color: var(--charcoal);
}

.chart-average-badge.medium {
    background: var(--gold);
    color: var(--charcoal);
}

.chart-average-badge.high {
    background: var(--coral);
    color: white;
}

.shame-chart-container {
    position: relative;
    height: 200px;
    width: 100%;
}

.chart-description {
    font-size: 0.8rem;
    color: #666;
    margin: 0.75rem 0 0 0;
    font-style: italic;
    text-align: center;
}

/* Ride Comparison Chart Section */
.ride-comparison-section {
    margin: 1.5rem 0;
    background: white;
    border: 3px solid var(--charcoal);
    padding: 1rem;
}

.ride-comparison-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ride-comparison-header h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--charcoal);
    margin: 0;
}

.chart-type-toggle {
    display: flex;
    gap: 0;
    border: 2px solid var(--charcoal);
}

.chart-type-toggle .toggle-btn {
    padding: 0.4rem 1rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    background: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--charcoal);
}

.chart-type-toggle .toggle-btn:first-child {
    border-right: 2px solid var(--charcoal);
}

.chart-type-toggle .toggle-btn:hover {
    background: #f0f0f0;
}

.chart-type-toggle .toggle-btn.active {
    background: var(--deep-teal);
    color: white;
}

/* Chart mode toggle (reuses chart-type-toggle styles) */
.chart-mode-toggle {
    display: flex;
    gap: 0;
    border: 2px solid var(--charcoal);
}

.chart-mode-toggle .toggle-btn {
    padding: 0.5rem 1.25rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    background: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--charcoal);
}

.chart-mode-toggle .toggle-btn:first-child {
    border-right: 2px solid var(--charcoal);
}

.chart-mode-toggle .toggle-btn:hover {
    background: #f0f0f0;
}

.chart-mode-toggle .toggle-btn.active {
    background: var(--deep-teal);
    color: white;
}

/* Section header layout for toggle */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* Heatmap grid layout */
.heatmaps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.heatmap-wrapper {
    overflow-x: auto;
    padding: 1rem 0;
}

.heatmap-container {
    min-width: fit-content;
}

.ride-comparison-chart-container {
    position: relative;
    height: 300px;
    width: 100%;
    min-height: 200px;
}

.ride-comparison-chart-container .chart-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.75rem;
    color: #666;
}

.ride-comparison-chart-container .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--deep-teal);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.ride-comparison-section .no-data-message {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-style: italic;
}

@media (max-width: 480px) {
    .ride-comparison-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ride-comparison-chart-container {
        height: 250px;
    }
}

/* Park Details - Current Status Section */
.current-status-section {
    margin-bottom: 1.5rem;
}

.current-status-section h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--charcoal);
    margin: 0 0 0.75rem 0;
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.status-card {
    background: white;
    border: 3px solid var(--charcoal);
    padding: 0.75rem;
    text-align: center;
}

.status-card .status-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
    margin-bottom: 0.25rem;
}

.status-card .status-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--charcoal);
}

.status-card.status-running .status-value { color: #27ae60; }
.status-card.status-down .status-value { color: var(--coral); }

/* Park Details - Tier Distribution Section */
.tier-distribution-section {
    margin-bottom: 1.5rem;
}

.tier-distribution-section h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--charcoal);
    margin: 0 0 0.25rem 0;
}

.tier-distribution-section .section-description {
    font-size: 0.85rem;
    color: #666;
    margin: 0 0 1rem 0;
}

.tier-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tier-item {
    background: white;
    border: 2px solid var(--charcoal);
    padding: 0.75rem;
}

.tier-item .tier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.tier-item .tier-description {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.tier-item .tier-count {
    font-weight: 700;
    color: var(--charcoal);
}

.tier-bar {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.tier-fill {
    height: 100%;
    border-radius: 4px;
}

.tier-item.tier-1 .tier-fill { background: var(--coral); }
.tier-item.tier-2 .tier-fill { background: var(--gold); }
.tier-item.tier-3 .tier-fill { background: var(--deep-teal); }

/* Park Details - Info Section */
.park-info-section {
    margin-bottom: 1.5rem;
}

.park-info-section h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--charcoal);
    margin: 0 0 0.75rem 0;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.info-item {
    background: white;
    border: 2px solid var(--charcoal);
    padding: 0.75rem;
}

.info-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
    margin-bottom: 0.25rem;
}

.info-value {
    font-weight: 600;
    color: var(--charcoal);
}

.info-value a.external-link {
    color: var(--deep-teal);
    text-decoration: none;
}

.info-value a.external-link:hover {
    text-decoration: underline;
}

/* Park Details Modal Responsive */
@media (max-width: 600px) {
    .park-details-modal {
        max-width: 100%;
        margin: 0.5rem;
    }

    .park-details-content {
        padding: 1rem;
    }

    .shame-score-value {
        font-size: 3rem;
    }

    .formula {
        font-size: 0.85rem;
    }

    .status-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tier-weights-grid {
        grid-template-columns: 1fr;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   FOOTER
   ============================================ */
footer,
.footer {
    margin-top: 20px;
    padding: 40px 20px;
    background: var(--charcoal);
    color: var(--warm-white);
    text-align: center;
}

.footer-text,
.attribution {
    font-size: 0.85rem;
    opacity: 0.8;
}

footer a,
.footer a {
    color: var(--warm-white);
    text-decoration: none;
}

footer a:hover,
.footer a:hover {
    text-decoration: underline;
}

.last-update {
    margin-top: 15px;
    font-size: 0.75rem;
    opacity: 0.6;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
    .header-section h1 {
        font-size: 2.5rem;
    }

    .nav-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid,
    .aggregate-stats {
        grid-template-columns: 1fr;
    }

    .park-filter {
        flex-direction: column;
        gap: 12px;
    }

    .filter-label {
        margin-right: 0;
    }

    .filter-toggle {
        width: 100%;
    }

    .global-filter-btn,
    .filter-btn {
        flex: 1;
    }

    .time-selector {
        flex-direction: column;
    }

    .timezone-indicator {
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
        text-align: center;
    }

    .time-btn,
    .period-btn {
        border: none !important;
        border-top: 3px solid var(--coral) !important;
    }

    table {
        font-size: 0.85rem;
    }

    th, td {
        padding: 12px 10px;
    }

    .sponsor-section {
        min-height: 180px;
    }

    .geo-rect-coral-1, .geo-rect-teal-1, .geo-rect-gold-1, .geo-rect-pink-1 {
        width: 90px;
        height: 60px;
    }

    .geo-rect-coral-2, .geo-rect-teal-2, .geo-rect-gold-2, .geo-rect-pink-2 {
        width: 70px;
        height: 70px;
    }

    .geo-square-1, .geo-square-2, .geo-square-3 {
        width: 30px;
        height: 30px;
    }

    .geo-bar-1, .geo-bar-2 {
        width: 20px;
    }

    .sponsor-content-expanded {
        flex-direction: column;
        padding: 25px;
        gap: 25px;
    }

    .led-gif {
        width: 220px;
        height: 110px;
    }

    .sponsor-text-content {
        text-align: center;
    }

    .sponsor-brand {
        font-size: 1.6rem;
    }

    .sponsor-description {
        font-size: 0.85rem;
    }

    .modal-content {
        max-height: 90vh;
        border: 4px solid var(--charcoal);
    }

    .modal-inner,
    .modal-body {
        padding: 30px 25px;
    }

    .modal-title {
        font-size: 1.8rem;
    }

    .modal-geo-1, .modal-geo-2, .modal-geo-3 {
        display: none;
    }

    .rankings-controls,
    .controls {
        flex-direction: column;
        align-items: stretch;
    }

    .control-group {
        flex-direction: column;
        align-items: stretch;
    }

    .button-group {
        flex-wrap: wrap;
    }

    /* About Modal Tabs - Mobile */
    .about-tabs {
        flex-wrap: wrap;
        top: 52px;
    }

    .about-tab-btn {
        flex: 1 1 50%;
        padding: 12px 10px;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
    }

    .about-tab-panel {
        padding: 20px;
    }

    .about-section h3 {
        font-size: 1.1rem;
    }

    .tier-item-explanation {
        flex-wrap: wrap;
    }
}

/* ========================================
   TRENDS CHARTS - Mary Blair Style
   ======================================== */

.trends-charts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.chart-container {
    background: var(--warm-white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
}

.chart-container h3 {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--deep-teal);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--coral);
}

.chart-wrapper {
    position: relative;
    height: 280px;
    width: 100%;
}

.mock-data-indicator {
    display: block;
    font-size: 0.75rem;
    color: var(--gold);
    font-style: italic;
    margin-bottom: 12px;
    padding: 6px 10px;
    background: rgba(255, 182, 39, 0.1);
    border-radius: 4px;
    border-left: 3px solid var(--gold);
}

/* N/A message for charts not applicable to current period */
.chart-not-applicable {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.02);
    border: 1px dashed rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.na-message {
    text-align: center;
    color: #666;
    font-size: 0.9rem;
    line-height: 1.6;
    padding: 20px;
    font-style: italic;
}

/* Chart legend styling override */
.trends-charts canvas {
    font-family: 'Inter', sans-serif !important;
}

/* Responsive: stack charts on tablet/mobile */
@media (max-width: 1024px) {
    .trends-charts {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .chart-wrapper {
        height: 250px;
    }
}

@media (max-width: 768px) {
    .chart-container {
        padding: 16px;
    }

    .chart-container h3 {
        font-size: 0.9rem;
    }

    .chart-wrapper {
        height: 220px;
    }
}

/* ========================================
   CHARTS VIEW (Standalone Charts Tab)
   ======================================== */

.charts-view {
    padding: 0;
}

.charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 20px;
}

/* Responsive: Charts grid on larger screens */
@media (min-width: 1024px) {
    .charts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   AWARDS SECTION - Trends View
   ======================================== */

.awards-section {
    margin-bottom: 32px;
}

.awards-section .section-header {
    margin-bottom: 16px;
}

.awards-section .section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--charcoal);
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--gold);
}

.awards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 1024px) {
    .awards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.awards-table-container {
    background: var(--warm-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
}

.awards-table-header {
    background: linear-gradient(135deg, var(--deep-teal) 0%, #005a66 100%);
    color: white;
    padding: 14px 20px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.awards-icon {
    font-size: 1.2rem;
}

.awards-table {
    width: 100%;
}

.awards-table thead th {
    background: rgba(0, 123, 138, 0.08);
    padding: 10px 12px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--deep-teal);
}

.awards-table tbody tr {
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: background 0.2s ease;
}

.awards-table tbody tr:hover {
    background: rgba(0, 123, 138, 0.04);
}

.awards-row.medal-1 {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, transparent 50%);
}

.awards-row.medal-2 {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.15) 0%, transparent 50%);
}

.awards-row.medal-3 {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.15) 0%, transparent 50%);
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
    background: var(--charcoal);
    color: white;
}

.rank-badge.medal-1 {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #5a4000;
    box-shadow: 0 2px 6px rgba(255, 215, 0, 0.4);
}

.rank-badge.medal-2 {
    background: linear-gradient(135deg, #E8E8E8 0%, #A0A0A0 100%);
    color: #404040;
    box-shadow: 0 2px 6px rgba(160, 160, 160, 0.4);
}

.rank-badge.medal-3 {
    background: linear-gradient(135deg, #CD7F32 0%, #8B4513 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(205, 127, 50, 0.4);
}

.awards-table .rank-col {
    width: 50px;
    text-align: center;
    padding: 10px 8px;
}

.awards-table .ride-col {
    padding: 10px 12px;
    font-weight: 500;
    max-width: 180px;
}

.awards-table .ride-col .ride-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.awards-table .park-col {
    padding: 10px 12px;
    color: var(--charcoal);
    opacity: 0.75;
    font-size: 0.85rem;
    max-width: 140px;
}

.awards-table .park-col .park-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.awards-table .metric-col {
    padding: 10px 12px;
    text-align: right;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
}

.metric-value {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(0, 123, 138, 0.1);
    color: var(--deep-teal);
    font-size: 0.9rem;
}

.metric-value.metric-bad {
    background: rgba(255, 107, 90, 0.15);
    color: var(--coral);
}

/* Awards empty state */
.awards-table-container .empty-state {
    padding: 40px 20px;
    text-align: center;
    color: var(--charcoal);
    opacity: 0.7;
}

/* Responsive: Awards on mobile */
@media (max-width: 768px) {
    .awards-table-header {
        padding: 12px 16px;
        font-size: 0.9rem;
    }

    .awards-table thead th {
        padding: 8px 10px;
        font-size: 0.7rem;
    }

    .awards-table .rank-col {
        width: 40px;
        padding: 8px 6px;
    }

    .rank-badge {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }

    .awards-table .ride-col,
    .awards-table .park-col,
    .awards-table .metric-col {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    .awards-table .ride-col {
        max-width: 120px;
    }

    .awards-table .park-col {
        max-width: 100px;
    }

    .metric-value {
        padding: 2px 6px;
        font-size: 0.8rem;
    }
}

/* Nav responsive for 4 columns */
@media (max-width: 600px) {
    .nav-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.hidden {
    display: none !important;
}

/* ============================================
   AWARDS VIEW - V2 Card Design (matching mockup)
   ============================================ */
.awards-view {
    padding: 20px 0;
}

/* Awards Period Toggle - inline period selector specific to Awards tab */
.awards-period-toggle {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 24px;
}

.awards-period-btn {
    padding: 10px 20px;
    background: white;
    border: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--charcoal);
    border-top: 2px solid var(--charcoal);
    border-bottom: 2px solid var(--charcoal);
    border-left: 1px solid var(--charcoal);
    border-right: 1px solid var(--charcoal);
}

.awards-period-btn:first-child {
    border-radius: 6px 0 0 6px;
    border-left: 2px solid var(--charcoal);
}

.awards-period-btn:last-child {
    border-radius: 0 6px 6px 0;
    border-right: 2px solid var(--charcoal);
}

.awards-period-btn:hover {
    background: var(--light-gray);
}

.awards-period-btn.active {
    background: var(--charcoal);
    color: white;
}

@media (max-width: 480px) {
    .awards-period-toggle {
        flex-wrap: wrap;
        gap: 8px;
    }

    .awards-period-btn {
        padding: 8px 14px;
        font-size: 13px;
        border-radius: 6px !important;
        border: 2px solid var(--charcoal) !important;
    }
}

/* Awards Grid - 2x2 layout */
.awards-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .awards-grid-2x2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* =====================================================
   Award Card V3 - Branded Social Media Ready Cards
   Matching website header style with dark frame
   ===================================================== */

.award-card-v3 {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--charcoal);
    padding: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    transition: transform 0.2s, box-shadow 0.2s;
}

.award-card-v3:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

/* Inner container with geometric background - fills the card */
.award-geo-bg {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    bottom: 16px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--cream);
}

/* Geometric shapes - matching website header style */
.award-geo-bg .geo-block {
    position: absolute;
}

/* Block positions - mirroring the header's geometric bar pattern */
.award-card-v3 .geo-block-1 { background: var(--coral); width: 30%; height: 100%; left: 0; top: 0; }
.award-card-v3 .geo-block-2 { background: var(--soft-pink); width: 18%; height: 70%; left: 15%; top: 15%; }
.award-card-v3 .geo-block-3 { background: var(--turquoise); width: 25%; height: 100%; left: 35%; top: 0; }
.award-card-v3 .geo-block-4 { background: var(--gold); width: 40%; height: 100%; right: 0; top: 0; }

/* Main content area - white card overlaid on geometric bg */
.award-content-v3 {
    position: relative;
    z-index: 1;
    margin: 56px 40px;
    background: white;
    border: 1px solid #e0e0e0;
    padding: 24px 28px 28px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Branded logo header - text with colored bars */
.award-brand-logo {
    display: block;
    margin-bottom: 20px;
}

.award-brand-logo .logo-top-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--coral);
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
}

.award-brand-logo .logo-bottom-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--turquoise);
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}

/* Colored bars under logo text */
.award-brand-logo .logo-bars {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.award-brand-logo .logo-bar {
    height: 4px;
    width: 60px;
}

.award-brand-logo .logo-bar-coral { background: var(--coral); }
.award-brand-logo .logo-bar-turquoise { background: var(--turquoise); }
.award-brand-logo .logo-bar-gold { background: var(--gold); }
.award-brand-logo .logo-bar-pink { background: var(--soft-pink); }

/* Category label */
.award-category-v3 {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--charcoal);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* Period/date */
.award-period-v3 {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 16px;
}

/* Winner name */
.award-winner-v3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--coral);
    line-height: 1.2;
    margin-bottom: 4px;
}

/* Clickable winner name - links to detail page or opens modal */
.award-winner-v3.clickable {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* Anchor tag version inherits parent styles */
a.award-winner-v3.clickable {
    color: var(--coral);
    display: block;
}

.award-winner-v3.clickable:hover {
    color: var(--turquoise);
    text-decoration-style: solid;
    text-decoration-color: var(--turquoise);
}

/* Location/park name */
.award-location-v3 {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 16px;
}

/* Social handle */
.award-handle-v3 {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: #666;
    border: 1px solid #ddd;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
}

/* Stats row */
.award-stats-v3 {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.award-stat-box {
    background: var(--gold);
    border: 2px solid var(--charcoal);
    padding: 10px 20px;
    min-width: 90px;
}

.award-stat-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--charcoal);
    line-height: 1;
}

.award-stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--charcoal);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* Data source attribution */
.award-data-source {
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    color: #888;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
}

/* Empty state */
.award-empty-v3 {
    padding: 40px 20px;
    color: #999;
    font-size: 0.9rem;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .award-card-v3 {
        padding: 12px;
    }

    .award-content-v3 {
        margin: 30px 16px;
        padding: 20px 20px 24px;
    }

    .award-brand-logo .logo-top-text {
        font-size: 0.75rem;
    }

    .award-brand-logo .logo-bottom-text {
        font-size: 1.1rem;
    }

    .award-brand-logo .logo-bar {
        width: 45px;
    }

    .award-winner-v3 {
        font-size: 1.25rem;
    }

    .award-stat-box {
        padding: 6px 12px;
        min-width: 70px;
    }

    .award-stat-value {
        font-size: 1.1rem;
    }
}

/* ============================================
   SEARCH MODAL - Cmd/Ctrl+K Global Search
   ============================================ */

/* Search button in header */
.search-trigger {
    background: transparent;
    border: 2px solid var(--charcoal);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--charcoal);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.search-trigger:hover {
    background: var(--charcoal);
    color: white;
}

.search-trigger svg {
    width: 16px;
    height: 16px;
}

.search-trigger .search-shortcut-hint {
    display: flex;
    gap: 2px;
    font-size: 0.7rem;
    opacity: 0.7;
}

.search-trigger .search-shortcut-hint kbd {
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 5px;
    border-radius: 3px;
    font-family: 'Space Grotesk', sans-serif;
}

/* Search modal overlay */
.search-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.search-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Search modal container */
.search-modal {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.95) translateY(-10px);
    transition: transform 0.2s ease;
}

.search-modal-overlay.active .search-modal {
    transform: scale(1) translateY(0);
}

/* Search input wrapper */
.search-input-wrapper {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e5e5;
    gap: 12px;
}

.search-input-wrapper .search-icon {
    width: 20px;
    height: 20px;
    color: #666;
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.1rem;
    font-family: 'Inter', sans-serif;
    color: var(--charcoal);
    background: transparent;
}

.search-input::placeholder {
    color: #999;
}

.search-shortcut {
    display: flex;
    gap: 4px;
}

.search-shortcut kbd {
    background: #f0f0f0;
    color: #666;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: 'Space Grotesk', sans-serif;
    border: 1px solid #ddd;
}

/* Search results */
.search-results {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    min-height: 200px;
    max-height: 400px;
}

.search-hint,
.search-no-results,
.search-loading,
.search-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    color: #666;
    font-size: 0.95rem;
}

.search-loading {
    flex-direction: column;
    gap: 12px;
}

.search-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid #e5e5e5;
    border-top-color: var(--turquoise);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.search-error {
    flex-direction: column;
    gap: 12px;
    color: var(--coral);
}

.search-retry-btn {
    background: var(--coral);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
}

.search-retry-btn:hover {
    opacity: 0.9;
}

/* Search groups */
.search-group {
    margin-bottom: 8px;
}

.search-group-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    padding: 8px 12px 4px;
}

/* Search result items */
.search-result-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    gap: 12px;
    transition: background 0.15s ease;
}

.search-result-item:hover,
.search-result-item.selected {
    background: #f5f5f5;
}

.search-result-item.selected {
    background: var(--turquoise);
    color: white;
}

.search-result-item.selected .result-subtitle,
.search-result-item.selected .result-type-badge {
    color: rgba(255, 255, 255, 0.8);
}

.search-result-item.selected .result-icon {
    color: white;
}

.result-icon {
    width: 18px;
    height: 18px;
    color: #666;
    flex-shrink: 0;
}

.result-content {
    flex: 1;
    min-width: 0;
}

.result-name {
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-subtitle {
    font-size: 0.8rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-type-badge {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    background: #f0f0f0;
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

.search-result-item.selected .result-type-badge {
    background: rgba(255, 255, 255, 0.2);
}

/* Search footer */
.search-footer {
    padding: 12px 20px;
    border-top: 1px solid #e5e5e5;
    background: #fafafa;
    border-radius: 0 0 12px 12px;
}

.search-footer-hint {
    display: flex;
    gap: 16px;
    font-size: 0.75rem;
    color: #666;
}

.search-footer-hint kbd {
    background: #e5e5e5;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    margin-right: 4px;
}

/* Mobile adjustments for search */
@media (max-width: 600px) {
    .search-modal-overlay {
        padding-top: 10vh;
    }

    .search-modal {
        width: 95%;
        max-height: 80vh;
    }

    .search-trigger .search-shortcut-hint {
        display: none;
    }

    .search-footer-hint {
        flex-wrap: wrap;
        gap: 8px;
    }
}