/* X Games Legends Portal - Kristi's List */
/* Midnight Grip, Blinding Air White, Heat Red, Ice Run Blue, Neon Green */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;600;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Brand colors — X Games palette */
    --black: #000000;             /* Midnight Grip */
    --white: #F5F5F5;             /* Blinding Air White */
    --red: #FE2B06;               /* Heat Red */
    --blue: #4AC8EE;              /* Ice Run Blue */
    --green: #D1FE4C;             /* Altitude Acid */
    --navy: #112337;
    --gray: #8E95A0;
    --gray-light: #1a1a1a;
    --gray-dark: #0d0d0d;
    --card-bg: #111111;
    --border: #222222;

    /* RGB triples for use in rgba() so tokens stay in sync */
    --black-rgb: 0, 0, 0;
    --white-rgb: 245, 245, 245;
    --red-rgb: 254, 43, 6;
    --blue-rgb: 74, 200, 238;
    --green-rgb: 209, 254, 76;

    /* Type stack — Big Shoulders Display substitutes for Lateral until license lands */
    --font-display: 'Big Shoulders Display', 'Bebas Neue', 'Oswald', Impact, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

body {
    font-family: var(--font-body);
    background: var(--black);
    color: var(--white);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* Display headings — Lateral-spec metrics (−2% tracking, tight leading) */
h1, h2, h3,
.page-title,
.card-title,
.nav-brand h1 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    line-height: 0.95;
    font-weight: 800;
}

a { color: var(--blue); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--green); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }

/* Form input focus — visible ring, ADA-friendly */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 1px;
}

/* Layout */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.page { padding: 30px 0; }

/* Nav */
.nav {
    background: var(--black);
    border-bottom: 1px solid var(--border);
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.nav-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    gap: 20px;
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}
.nav-brand .nav-logo {
    height: 50px;
    width: auto;
    display: block;
}
@media (max-width: 768px) {
    .nav-brand .nav-logo { height: 42px; }
}
@media (max-width: 480px) {
    .nav-brand .nav-logo { height: 36px; }
}
/* Legacy text lockup (kept for any templates not yet migrated) */
.nav-brand h1 {
    font-family: var(--font-display);
    font-size: 38px;
    color: var(--green);
    letter-spacing: 4px;
    line-height: 1;
    font-weight: 700;
}
.nav-brand span {
    font-size: 18px;
    color: var(--blue);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
}
.nav-links { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.nav-links a {
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s;
    position: relative;
    white-space: nowrap;
    padding: 8px 10px;
    border-radius: 0;
}
.nav-links a:hover,
.nav-links a:focus-visible { color: var(--green); background: rgba(var(--green-rgb), 0.08); }
.nav-links a:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.nav-links a.active { color: var(--green); }
.nav-links a.active::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 2px;
    height: 2px;
    background: var(--green);
}
.nav-badge {
    background: var(--red);
    color: #fff;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 0;
    position: absolute;
    top: -4px;
    right: -4px;
}
.nav-user {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.nav-user-name {
    font-size: 12px;
    color: var(--gray);
}
.nav-logout {
    font-size: 11px;
    color: var(--gray) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* Profile + Logout inside the collapsed menu. Desktop shows .nav-user instead. */
.nav-links-user { display: none; }

/* Nav dropdown */
.nav-dropdown {
    position: relative;
}
.nav-dropdown-toggle {
    cursor: pointer;
    position: relative;
}
.nav-dropdown-arrow {
    font-size: 16px;
    margin-left: 4px;
    opacity: 0.9;
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 14px 0 6px;
    min-width: 180px;
    z-index: 1001;
    margin-top: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.nav-dropdown.open .nav-dropdown-menu,
.nav-dropdown:hover .nav-dropdown-menu {
    display: block;
}
.nav-dropdown-menu a {
    display: block;
    padding: 10px 20px;
    font-size: 13px;
    color: var(--white);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
    background: rgba(var(--green-rgb), 0.12);
    color: var(--green);
}
.nav-dropdown-menu a:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.nav-dropdown-menu a.active {
    color: var(--green);
}
.nav-dropdown-menu .nav-badge {
    position: static;
    display: inline;
    margin-left: 6px;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 0;
    background: var(--red);
    color: #fff;
}

/* Mobile nav */
.nav-toggle { display: none; background: none; border: none; color: var(--white); font-size: 24px; cursor: pointer; }
@media (max-width: 1024px) {
    .nav-toggle { display: block; }
    .nav-links { display: none; flex-direction: column; position: absolute; top: 70px; left: 0; right: 0; background: var(--black); padding: 20px; gap: 8px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 10px 16px; font-size: 13px; }
    .nav-dropdown-menu { position: static; transform: none; background: none; border: none; box-shadow: none; padding: 0 0 0 16px; margin-top: 0; min-width: 0; }
    .nav-dropdown.open .nav-dropdown-menu { display: block; }
    .nav-dropdown-menu a { padding: 8px 16px; }
    .nav-user { display: none; }
    .nav-links-user {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
    }
    .nav-links-user a { color: var(--gray); text-align: center; }
}

/* Dashboard grid layout */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 40px;
    align-items: start;
}
.dashboard-discounts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 768px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-discounts { grid-template-columns: 1fr; }
}

/* Headings */
h1, h2, h3 { font-family: var(--font-display); letter-spacing: 2px; }
.page-title {
    font-size: 42px;
    color: var(--white);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.page-subtitle {
    color: var(--gray);
    font-size: 15px;
    margin-bottom: 30px;
}

/* Cards */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 24px;
    margin-bottom: 16px;
    transition: border-color 0.2s, transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { border-color: var(--green); transform: translateY(-2px); }
.card:focus-within { border-color: var(--green); outline: 1px solid var(--green); outline-offset: -2px; }
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.card-title {
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: 1px;
    color: var(--white);
}
.card-meta {
    font-size: 13px;
    color: var(--gray);
    margin-bottom: 8px;
}
.card-body { font-size: 14px; line-height: 1.6; color: #ccc; }
.card-has-image { padding: 0; overflow: hidden; }
.card-has-image .card-content { padding: 24px; }
.card-image { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Grid */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 768px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* Buttons — X Games hover treatment: radial bloom from center on hover,
   meets WCAG 2.1 AA contrast (no more subtle green glow). */
.btn {
    display: inline-block;
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-body);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    vertical-align: middle;
    line-height: 1.2;
}
/* Hover: a fast, flat color change. (This used to be a white circle that
   bloomed from the button's center; on wide buttons it read as a slow oval.) */
.btn-primary {
    background: var(--green);
    color: var(--black);
}
.btn-primary:hover,
.btn-primary:focus-visible { background: var(--white); color: var(--black); }

.btn-secondary {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}
.btn-secondary:hover,
.btn-secondary:focus-visible { background: var(--white); color: var(--black); }

.btn-danger {
    background: var(--red);
    color: #fff;
}
.btn-danger:hover,
.btn-danger:focus-visible { background: #ff5a3a; color: #fff; }

/* Keyboard focus ring — visible accent outline for ADA */
.btn:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 3px;
}
.btn-primary:focus-visible { outline-color: var(--white); }
.btn-danger:focus-visible { outline-color: var(--white); }

.btn-small { padding: 6px 14px; font-size: 11px; }
.btn-block { display: block; width: 100%; text-align: center; }

/* Inline action-button forms (delete, archive, pin, etc — thin CSRF
   wrappers around a .btn next to other action buttons). Without this,
   the form sits in the line box as an inline element and contributes
   its content baseline rather than its midline, so its inner button
   renders a couple pixels below neighboring .btn anchors. Promoting
   the form to inline-block + middle alignment lines everything up. */
form[style*="display:inline"],
form[style*="display: inline"] {
    display: inline-block !important;
    vertical-align: middle;
    margin: 0;
}

/* Arrow indicator on primary CTAs — slides in on hover.
   Applied to all .btn-primary automatically (X Games signature on forward
   actions). Secondary/danger buttons stay clean since they're typically
   Cancel/Back/Delete. Disable on .btn-no-arrow modifier if needed. */
.btn-primary::after {
    content: ' \2192';
    display: inline-block;
    margin-left: 0;
    width: 0;
    overflow: hidden;
    transition: width 0.25s ease-out, margin-left 0.25s ease-out;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}
.btn-primary:hover::after,
.btn-primary:focus-visible::after {
    width: 1.2em;
    margin-left: 6px;
}
.btn-primary.btn-no-arrow::after { content: none; }

.btn-like {
    background: none;
    border: 1px solid var(--border);
    color: var(--gray);
    padding: 4px 10px;
    border-radius: 0;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.btn-like:hover,
.btn-like:focus-visible { color: var(--red); border-color: var(--red); }
.btn-like:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.btn-like.liked { color: var(--red); border-color: var(--red); }

.read-more-arrow { display: inline-block; transition: transform 0.15s ease; }
a:hover .read-more-arrow,
a:focus-visible .read-more-arrow { transform: translateX(4px); }
.news-hero-box { transition: border-color 0.2s, box-shadow 0.2s; }
a:hover .news-hero-box,
a:focus-visible .news-hero-box { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }

/* Tags / Badges */
.tag {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0;
    background: var(--navy);
    color: var(--blue);
}
.tag-green { background: #1a2e00; color: var(--green); }
.tag-red { background: #2e0000; color: var(--red); }
.tag-yellow { background: #2e2a00; color: #FFD700; }
.tag-gray { background: #1a1a1a; color: var(--gray); }
/* Visually hidden, still read by screen readers. */
.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;
}
/* NEW since your last login. Inline, sits next to a title. */
.new-chip {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 2px 7px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #000;
    background: var(--green);
    line-height: 1.4;
}

/* Sport tags — colored by historic X Games season.
   Summer X Games (red) vs Winter X Games (blue). Applied wherever a sport
   name renders as a label next to an athlete (board posts, directory, profile,
   admin queue). The .sport-tag base class handles typography; the season
   modifier handles color. Use with the sport_season Jinja filter:
       <span class="sport-tag sport-{{ sport|sport_season }}">{{ sport }}</span> */
.sport-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.sport-summer { color: var(--red); }
.sport-winter { color: var(--blue); }
.sport-other  { color: var(--green); }

/* Linked author name on a post / reply / card. White by default, green on hover
   so the name signals "click for profile" without competing with the sport tag's
   red/blue color coding. */
.author-link, .author-link:visited {
    color: var(--white);
    text-decoration: none;
    transition: color 0.2s ease;
}
.author-link:hover, .author-link:focus-visible {
    color: var(--green);
    text-decoration: underline;
}

/* Square avatar treatment — overrides any inherited border-radius on inline
   avatar elements that historically were circular. Apply alongside sized
   wrappers; doesn't impose its own dimensions. */
.avatar-square,
.avatar-square img {
    border-radius: 0 !important;
}

/* Forms */
.form-group { margin-bottom: 20px; }
.form-group label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--white);
    margin-bottom: 6px;
}
/* Required-field marker (asterisk) — green, slightly larger, easy to scan */
.req {
    color: var(--green);
    font-weight: 800;
    font-size: 1.15em;
    margin-left: 2px;
}
/* Optional-field hint — italic gray, sits inline after the label text */
.opt-hint {
    color: var(--gray);
    font-weight: 400;
    font-style: italic;
    font-size: 12px;
    text-transform: none;
    letter-spacing: normal;
    margin-left: 6px;
}
/* Form legend explaining the * convention, placed at top of onboarding form */
.form-legend {
    text-align: center;
    color: var(--gray);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 28px;
}
/* Italic explanatory note for a field group (e.g. address details) */
.field-note {
    color: var(--gray);
    font-size: 12px;
    font-style: italic;
    line-height: 1.6;
    margin: 0 0 12px;
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    font-size: 13px;
    background: var(--gray-dark);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--white);
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--green);
}
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    width: auto;
    padding: 0;
    border: none;
    background: none;
    flex-shrink: 0;
}
.form-group textarea { min-height: 100px; resize: vertical; }
.form-group select { appearance: auto; }
.form-hint { font-size: 12px; color: var(--gray); margin-top: 4px; }

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.checkbox-group input[type="checkbox"] {
    width: auto;
    accent-color: var(--green);
}
.checkbox-group label {
    margin-bottom: 0;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--white);
}

/* Flash messages */
.flash {
    padding: 12px 20px;
    border-radius: 0;
    margin-bottom: 20px;
    font-size: 14px;
}
.flash-success { background: #1a2e00; color: var(--green); border: 1px solid #2a3e10; }
.flash-error { background: #2e0000; color: var(--red); border: 1px solid #3e1010; }

/* Tables */
.table-wrap { overflow-x: auto; }
table {
    width: 100%;
    border-collapse: collapse;
}
th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gray);
    border-bottom: 1px solid var(--border);
}
td {
    padding: 12px;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}
tr:hover td { background: var(--gray-light); }

/* Stats */
.stats { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.stat {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 20px 24px;
    min-width: 150px;
    flex: 1;
}
.stat-value {
    font-family: var(--font-display);
    font-size: 42px;
    color: var(--green);
    line-height: 1;
}
.stat-label {
    font-size: 12px;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* ============================================================
   Admin Action Center
   The "needs your attention" inbox at the top of /admin. Each
   row links to the relevant queue. Severity drives the left edge:
     red    = blocking / risk / overdue
     yellow = time-sensitive (renewal runway etc.)
     green  = neutral queue (signups, proposals, inquiries)
   ============================================================ */
.action-center {
    background: var(--card-bg);
    border: 1px solid var(--border);
    margin-bottom: 28px;
    padding: 0;
}
.action-center-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: #0a0a0a;
}
.action-center-eyebrow {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--white);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.action-center-meta {
    font-size: 11px;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.action-center-list {
    display: flex;
    flex-direction: column;
}
.action-row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #181818;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s ease;
    border-left: 4px solid var(--gray);
}
.action-row:last-child { border-bottom: none; }
.action-row:hover { background: #0e0e0e; }
.action-row.severity-red    { border-left-color: var(--red); }
.action-row.severity-yellow { border-left-color: #ffd84d; }
.action-row.severity-green  { border-left-color: var(--green); }
.action-row.severity-info   { border-left-color: #444; }
.action-row-count {
    font-family: var(--font-display);
    font-size: 38px;
    line-height: 1;
    text-align: center;
    color: var(--white);
}
.action-row.severity-red    .action-row-count { color: var(--red); }
.action-row.severity-yellow .action-row-count { color: #ffd84d; }
.action-row.severity-green  .action-row-count { color: var(--green); }
.action-row.severity-info   .action-row-count { color: #aaa; }

/* Info rows: same shape as actionable rows, but visually subordinated so
   they read as "FYI" instead of "needs clearing." Smaller count, muted
   label color, and a "View" arrow instead of "Review." Yellow time-trigger
   override (event within 14 days) still applies via severity-yellow. */
.action-row-info { padding: 12px 20px; }
.action-row-info .action-row-count { font-size: 28px; }
.action-row-info .action-row-label { font-size: 13px; color: #ccc; }
.action-row-info .action-row-arrow { color: var(--gray); }
.action-row-info:hover .action-row-arrow { color: var(--white); }
.action-row-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.action-row-detail {
    font-size: 12px;
    color: var(--gray);
    margin-top: 4px;
    line-height: 1.4;
}
.action-row-arrow {
    font-size: 12px;
    color: var(--green);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: transform 0.12s ease;
}
.action-row:hover .action-row-arrow { transform: translateX(3px); }
.action-center-empty {
    padding: 36px 20px;
    text-align: center;
}
.action-center-empty-title {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--green);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.action-center-empty-sub {
    color: var(--gray);
    font-size: 13px;
    margin-top: 8px;
    line-height: 1.5;
}
.action-center-sub-head {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: #070707;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.action-center-sub-eyebrow {
    font-size: 11px;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
}
.action-center-sub-meta {
    font-size: 11px;
    color: var(--gray);
    font-style: italic;
}

.dashboard-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.dashboard-stats .stat {
    flex: 0 1 220px;
}
.dashboard-shortcuts-head {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--white);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

/* Empty state */
.empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--gray);
}
.empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.3; }
.empty-text { font-size: 16px; }

/* Landing page */
.hero {
    text-align: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: linear-gradient(180deg, #0a0a0a 0%, #000 100%);
    box-sizing: border-box;
}
.hero .hero-logo {
    max-width: 360px;
    width: 70%;
    height: auto;
    margin-bottom: 40px;
    display: block;
}
/* Legacy text lockup (kept for fallback) */
.hero h1 {
    font-family: var(--font-display);
    font-size: 96px;
    letter-spacing: 12px;
    color: var(--green);
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 700;
}
.hero .subtitle {
    font-size: 22px;
    color: var(--blue);
    letter-spacing: 6px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 40px;
}
.hero p {
    font-size: 18px;
    color: var(--gray);
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.6;
}
@media (max-width: 768px) {
    .hero { min-height: auto; padding: 80px 20px; }
    .hero h1 { font-size: 56px; letter-spacing: 6px; }
    .hero .subtitle { font-size: 16px; }
}
@media (max-width: 480px) {
    .hero h1 { font-size: 42px; letter-spacing: 3px; }
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px 80px;
}
.feature {
    text-align: center;
    padding: 30px 20px;
}
.feature-icon {
    font-size: 36px;
    margin-bottom: 16px;
}
.feature h3 {
    font-size: 22px;
    margin-bottom: 8px;
    color: var(--white);
}
.feature p {
    font-size: 14px;
    color: var(--gray);
    line-height: 1.5;
}

/* Auth pages */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 20px;
}
.auth-box {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 48px;
    max-width: 440px;
    width: 100%;
    text-align: center;
}
.auth-box .auth-logo {
    max-width: 260px;
    width: 80%;
    height: auto;
    margin: 0 auto 32px;
    display: block;
}
/* Legacy text lockup (kept for fallback) */
.auth-box h1 {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--green);
    letter-spacing: 4px;
    margin-bottom: 4px;
    font-weight: 700;
}
.auth-box .auth-subtitle {
    color: var(--blue);
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 30px;
}
.auth-box .form-group { text-align: left; }

/* Athlete card in directory */
.athlete-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: border-color 0.2s, transform 0.15s ease, box-shadow 0.15s ease;
}
.athlete-card:hover,
.athlete-card:focus-visible {
    border-color: var(--green);
    transform: translateY(-1px);
}
.athlete-card:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}
.athlete-avatar {
    width: 56px;
    height: 56px;
    border-radius: 0;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--blue);
    flex-shrink: 0;
}
/* Sport-season tinted fallback avatar. Uses the athlete's first sport's season
   to color the tile: red for summer athletes, blue for winter, default navy/blue
   for other categories (Honorary Alumni, X Games Staff, etc.). Applied alongside
   the base .athlete-avatar class via the sport_season Jinja filter. */
.athlete-avatar.season-summer {
    background: rgba(254, 43, 6, 0.18);
    color: var(--red);
}
.athlete-avatar.season-winter {
    background: rgba(74, 200, 238, 0.18);
    color: var(--blue);
}
.athlete-avatar-fallback {
    background: #0a0a0a;
    border: 1px solid var(--border);
}
.athlete-avatar-fallback img {
    width: 56%;
    height: 56%;
    object-fit: contain;
    opacity: 0.75;
}
.athlete-info { flex: 1; }
.athlete-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 2px;
}
.athlete-sport {
    font-size: 13px;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.athlete-location {
    font-size: 12px;
    color: var(--gray);
    margin-top: 4px;
}

/* Messages */
.msg-list { max-height: 500px; overflow-y: auto; padding: 20px 0; }
.msg {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
}
.msg.sent { align-items: flex-end; }
.msg.received { align-items: flex-start; }
.msg-bubble {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 0;
    font-size: 14px;
    line-height: 1.5;
}
.msg.sent .msg-bubble {
    background: var(--navy);
    color: var(--white);
    border-bottom-right-radius: 4px;
}
.msg.received .msg-bubble {
    background: var(--gray-light);
    color: var(--white);
    border-bottom-left-radius: 4px;
}
.msg-time {
    font-size: 11px;
    color: var(--gray);
    margin-top: 4px;
}
.msg-form {
    display: flex;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.msg-form input,
.msg-form textarea {
    flex: 1;
    padding: 12px 16px;
    background: var(--gray-dark);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--white);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}
.msg-form input:focus,
.msg-form textarea:focus { outline: none; border-color: var(--green); }

/* Pending page */
.pending-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 40px 20px;
}
.pending-box {
    max-width: 500px;
}
.pending-box h1 {
    font-family: var(--font-display);
    font-size: 42px;
    color: var(--green);
    margin-bottom: 16px;
}
.pending-box p {
    color: var(--gray);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 12px;
}

/* Search */
.search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.search-bar input,
.search-bar select {
    padding: 10px 16px;
    background: var(--gray-dark);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--white);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}
.search-bar input { flex: 1; min-width: 200px; }
.search-bar select { min-width: 150px; appearance: auto; }
.search-bar input:focus,
.search-bar select:focus { outline: none; border-color: var(--green); }

/* Admin sidebar */
.admin-layout { display: flex; gap: 30px; }
.admin-sidebar {
    width: 200px;
    flex-shrink: 0;
}
.admin-sidebar a {
    display: block;
    padding: 10px 16px;
    color: var(--gray);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0;
    margin-bottom: 4px;
    transition: all 0.2s;
}
.admin-sidebar a:hover { color: var(--white); background: var(--gray-light); }
.admin-sidebar a.active { color: var(--green); background: var(--gray-light); }
.admin-content { flex: 1; min-width: 0; }
.sidebar-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 8px 16px;
}
.admin-sidebar a.sidebar-subitem {
    padding-left: 28px;
}
.admin-sidebar a.sidebar-subitem.active { color: var(--green); }
@media (max-width: 768px) {
    .admin-layout { flex-direction: column; }
    .admin-sidebar { width: 100%; display: flex; flex-wrap: wrap; gap: 4px; }
}

/* Utility */
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.text-center { text-align: center; }
.text-green { color: var(--green); }
.text-blue { color: var(--blue); }
.text-red { color: var(--red); }
.text-gray { color: var(--gray); }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-10 { gap: 10px; }
.inline-form { display: inline; }

/* =========================================================
   Mobile overrides — 600px and below
   ========================================================= */
@media (max-width: 600px) {

    /* Force ALL inline grid layouts to single column.
       Covers the many form grids defined with inline styles in templates. */
    div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Page titles */
    .page-title { font-size: 28px; }

    /* Cards — reduce padding on small screens */
    .card { padding: 16px; }

    /* Hero — smaller font on phones */
    .hero h1 { font-size: 40px; letter-spacing: 4px; }
    .hero .subtitle { font-size: 15px; }
    .hero { padding: 60px 16px; }

    /* Buttons — increase touch target for btn-small */
    .btn-small {
        padding: 10px 16px;
        font-size: 12px;
        min-height: 40px;
    }

    /* Search bar — stack fields vertically */
    .search-bar { flex-direction: column; }
    .search-bar input { min-width: 0; width: 100%; }
    .search-bar select { min-width: 0; width: 100%; }

    /* Messages — wider bubbles on small screens */
    .msg-bubble { max-width: 88%; }

    /* Container — tighter padding */
    .container { padding: 0 12px; }

    /* flex-between stacks on mobile */
    .flex-between { flex-wrap: wrap; gap: 10px; }

    /* Cookie banner buttons stack */
    #cookie-banner { flex-direction: column; align-items: flex-start; }
    #cookie-banner > div { width: 100%; display: flex; gap: 8px; }
    #cookie-banner > div button { flex: 1; }
}

/* ============================================================
   LANDING PAGE v2 — section color blocks, X Games visual DNA
   Scoped under .landing-v2 to not affect any other page.
   ============================================================ */

.landing-v2 {
    background: var(--black);
    color: var(--white);
    overflow-x: hidden;
}
.landing-v2 * { box-sizing: border-box; }

/* Section base */
.landing-v2 .lv-section {
    padding: 80px 24px;
    position: relative;
}
.landing-v2 .lv-inner {
    max-width: 1280px;
    margin: 0 auto;
}

/* Smooth in-page anchors on landing only */
.landing-v2 { scroll-behavior: smooth; }

/* HERO — dark gradient with vertical Legends logo */
.landing-v2 .lv-hero {
    background: radial-gradient(circle at 30% 20%, #1a1a1a 0%, #000 70%);
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 24px;
}

/* Scroll cue under the Sign In button */
.landing-v2 .lv-scroll-cue {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 40px;
    color: var(--gray);
    text-decoration: none;
    transition: color 0.2s;
}
.landing-v2 .lv-scroll-cue:hover,
.landing-v2 .lv-scroll-cue:focus-visible {
    color: var(--white);
}
.landing-v2 .lv-scroll-cue-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.landing-v2 .lv-scroll-chevron {
    font-size: 22px;
    line-height: 1;
    animation: lv-scroll-bounce 2.2s ease-in-out infinite;
}
@keyframes lv-scroll-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
    .landing-v2 .lv-scroll-chevron { animation: none; }
}
.landing-v2 .lv-hero-logo {
    max-width: 420px;
    width: 75%;
    height: auto;
    margin-bottom: 44px;
}
.landing-v2 .lv-hero-tagline {
    font-size: 22px;
    color: var(--white);
    line-height: 1.55;
    max-width: 720px;
    margin: 0 auto 16px;
}
.landing-v2 .lv-hero-sub {
    font-size: 13px;
    color: var(--gray);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 36px;
}

/* For Athletes — black section, massive display type */
.landing-v2 .lv-athletes {
    background: var(--black);
    padding: 110px 24px 90px;
}
.landing-v2 .lv-eyebrow {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 4px;
    color: var(--green);
    text-transform: uppercase;
    margin-bottom: 18px;
    font-weight: 700;
}
.landing-v2 .lv-megahead {
    font-family: var(--font-display);
    font-size: clamp(54px, 9vw, 110px);
    line-height: 0.92;
    letter-spacing: -0.02em;
    color: var(--white);
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 28px;
}
.landing-v2 .lv-megahead .lv-accent { color: var(--green); }
.landing-v2 .lv-body {
    font-size: 17px;
    line-height: 1.65;
    color: var(--white);
    max-width: 720px;
    margin: 0 0 36px;
}

/* Athlete photo grid (square monochrome with X1 accent stripe) */
.landing-v2 .lv-athlete-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 44px;
}
.landing-v2 .lv-athlete-card {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #0a0a0a;
    overflow: hidden;
}
.landing-v2 .lv-athlete-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
    display: block;
}
.landing-v2 .lv-athlete-card::after {
    /* X1-style accent stripe on the right side of each athlete card */
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 18%;
    background:
        repeating-linear-gradient(
            -60deg,
            transparent 0,
            transparent 6px,
            var(--red) 6px,
            var(--red) 12px
        );
    mix-blend-mode: screen;
    opacity: 0.78;
    pointer-events: none;
}
@media (max-width: 900px) {
    .landing-v2 .lv-athlete-grid { grid-template-columns: repeat(2, 1fr); }
}

/* What You Get — Altitude Acid lime green */
.landing-v2 .lv-perks {
    background: var(--green);
    color: var(--black);
    padding: 110px 24px;
}
.landing-v2 .lv-perks .lv-eyebrow { color: var(--black); }
.landing-v2 .lv-perks .lv-megahead { color: var(--black); }
.landing-v2 .lv-perks .lv-megahead .lv-accent { color: var(--black); -webkit-text-stroke: 2px var(--black); -webkit-text-fill-color: var(--green); }
.landing-v2 .lv-perks .lv-body { color: var(--black); }

.landing-v2 .lv-perk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 44px;
    border: 2px solid var(--black);
}
.landing-v2 .lv-perk {
    padding: 32px 26px;
    border-right: 2px solid var(--black);
    border-bottom: 2px solid var(--black);
    background: var(--green);
}
.landing-v2 .lv-perk:nth-child(3n) { border-right: none; }
.landing-v2 .lv-perk:nth-last-child(-n+3) { border-bottom: none; }
.landing-v2 .lv-perk-title {
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: 900;
    color: var(--black);
    margin-bottom: 10px;
}
.landing-v2 .lv-perk-body {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--black);
}
@media (max-width: 900px) {
    .landing-v2 .lv-perk-grid { grid-template-columns: 1fr; }
    .landing-v2 .lv-perk { border-right: none !important; border-bottom: 2px solid var(--black) !important; }
    .landing-v2 .lv-perk:last-child { border-bottom: none !important; }
}

/* For Brands & Partners — dark section */
.landing-v2 .lv-brands {
    background: var(--black);
    padding: 110px 24px;
}

.landing-v2 .lv-brands-card {
    background: #0a0a0a;
    border: 1px solid var(--border);
    padding: 44px 36px;
    margin-top: 36px;
    max-width: 760px;
}
.landing-v2 .lv-brands-card h3 {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 14px;
    font-weight: 800;
}
.landing-v2 .lv-brands-card p {
    color: var(--gray);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 22px;
}

/* X1 strip — used between sections as a graphic transition */
.landing-v2 .lv-x1-strip {
    height: 90px;
    width: 100%;
    background-image: url('/static/logos/x1-pattern-dark.svg');
    background-size: 280px 280px;
    background-repeat: repeat;
    background-color: #000;
}
.landing-v2 .lv-x1-strip-light {
    background-image: url('/static/logos/x1-pattern-light.svg');
    background-color: #fff;
}

/* Buttons + sharp corners (landing-v2 specific overrides) */
.landing-v2 .lv-btn {
    display: inline-block;
    padding: 16px 36px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    border-radius: 0; /* sharp */
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.landing-v2 .lv-btn-primary {
    background: var(--green);
    color: var(--black);
}
.landing-v2 .lv-btn-primary:hover,
.landing-v2 .lv-btn-primary:focus-visible { background: var(--white); color: var(--black); }
.landing-v2 .lv-btn-primary::after {
    content: ' \2192';
    display: inline-block;
    margin-left: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.25s ease-out, margin-left 0.25s ease-out;
    position: relative;
    z-index: 1;
}
.landing-v2 .lv-btn-primary:hover::after,
.landing-v2 .lv-btn-primary:focus-visible::after {
    width: 1.2em;
    margin-left: 6px;
}
.landing-v2 .lv-btn-dark {
    background: var(--black);
    color: var(--white);
    border: 2px solid var(--white);
}
.landing-v2 .lv-btn-dark:hover,
.landing-v2 .lv-btn-dark:focus-visible { background: var(--white); color: var(--black); }

/* Mobile tweaks */
@media (max-width: 768px) {
    .landing-v2 .lv-section { padding: 60px 20px; }
    .landing-v2 .lv-hero { min-height: 78vh; padding: 40px 20px; }
    .landing-v2 .lv-hero-logo { max-width: 280px; width: 80%; margin-bottom: 32px; }
    .landing-v2 .lv-hero-tagline { font-size: 17px; }
    .landing-v2 .lv-x1-strip { height: 60px; background-size: 180px 180px; }
}

/* ============================================================
   DASHBOARD v2 — color-block rhythm, athlete-first welcome,
   discounts as the lime "shiny thing" moment.
   Scoped under .dashboard-v2 on the .page wrapper.
   ============================================================ */

.dashboard-v2 { padding: 0; }
.dashboard-v2 * { box-sizing: border-box; }

/* Full-bleed section wrapper that escapes the .container max-width */
.dashboard-v2 .dv-bleed {
    margin-left: calc(-1 * (50vw - 50%));
    margin-right: calc(-1 * (50vw - 50%));
    padding-left: 20px;
    padding-right: 20px;
}

.dashboard-v2 .dv-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* Eyebrow label used above every section heading */
.dashboard-v2 .dv-eyebrow {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--green);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 10px;
}

.dashboard-v2 .dv-section-head {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--white);
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 22px;
}

/* HERO — Compact olive band with name inline, X Games-NOLA-style */
.dashboard-v2 .dv-hero {
    background:
        linear-gradient(135deg, rgba(0,0,0,0.4) 0%, transparent 50%),
        linear-gradient(180deg, #1f2810 0%, #131a08 100%);
    padding: 22px 24px;
    border-bottom: 1px solid #2a3a12;
}
.dashboard-v2 .dv-hero .dv-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.dashboard-v2 .dv-hero-eyebrow {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 3px;
    color: var(--green);
    text-transform: uppercase;
    font-weight: 700;
}
.dashboard-v2 .dv-hero-name {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--white);
    text-transform: uppercase;
    font-weight: 900;
    margin: 0;
}
.dashboard-v2 .dv-hero-tag {
    color: var(--gray);
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Active poll slim banner — sits just below hero */
.dashboard-v2 .dv-poll {
    background: #0d1a00;
    border: 1px solid var(--green);
    padding: 18px 22px;
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dashboard-v2 .dv-poll-eyebrow {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--green);
    text-transform: uppercase;
    font-weight: 700;
}
.dashboard-v2 .dv-poll-question {
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

/* Featured news section — 2-column split, text-first so it doesn't depend on the image */
.dashboard-v2 .dv-news {
    background: var(--black);
    padding: 44px 24px 10px;
}
/* News carousel: horizontal swipe / scroll-snap container. Each slide is a
   full-width news card. Arrow buttons sit overlaid on left/right; pagination
   dots sit below. When there's only one story the dots and arrows are not
   rendered and the layout matches the original single-story design. */
.dashboard-v2 .dv-news-carousel-wrap {
    position: relative;
    margin-top: 14px;
}
.dashboard-v2 .dv-news-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Hide native scrollbar but keep scroll functionality */
    scrollbar-width: none;
    -ms-overflow-style: none;
    outline: none;
}
.dashboard-v2 .dv-news-carousel::-webkit-scrollbar { display: none; }
.dashboard-v2 .dv-news-carousel:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 4px;
}
.dashboard-v2 .dv-news-slide {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
.dashboard-v2 .dv-news-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}
.dashboard-v2 .dv-news-dot {
    width: 28px;
    height: 4px;
    border: none;
    background: var(--border);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease;
}
.dashboard-v2 .dv-news-dot:hover {
    background: var(--gray);
}
.dashboard-v2 .dv-news-dot.active {
    background: var(--green);
}
.dashboard-v2 .dv-news-split {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
    align-items: center;
}
.dashboard-v2 .dv-news-text {
    color: var(--white);
}
.dashboard-v2 .dv-news-text .dv-news-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--white);
    text-transform: uppercase;
    font-weight: 900;
    margin: 8px 0 12px;
}
.dashboard-v2 .dv-news-text .dv-news-meta {
    font-size: 11px;
    color: var(--gray);
    margin-bottom: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.dashboard-v2 .dv-news-text .dv-news-body {
    color: rgba(245,245,245,0.85);
    font-size: 14.5px;
    line-height: 1.6;
    margin-bottom: 18px;
}
.dashboard-v2 .dv-news-text .dv-news-more {
    font-size: 13px;
    font-weight: 700;
    color: var(--green);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.dashboard-v2 .dv-news-image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
    border: 1px solid var(--border);
}
.dashboard-v2 .dv-news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dashboard-v2 .dv-news-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a1a 0%, #050505 100%);
}
.dashboard-v2 .dv-news-fallback img {
    width: 50%;
    height: auto;
    object-fit: contain;
    opacity: 0.35;
    filter: invert(1) brightness(0.9);
}
@media (max-width: 768px) {
    .dashboard-v2 .dv-news-split { grid-template-columns: 1fr; gap: 24px; }
}

/* Opportunities — LIME GREEN, the bright "available opportunities" moment */
.dashboard-v2 .dv-opps-section {
    background: var(--green);
    color: var(--black);
    padding: 50px 24px 56px;
}
.dashboard-v2 .dv-opps-section .dv-eyebrow { color: var(--black); }
.dashboard-v2 .dv-opps-section .dv-section-head { color: var(--black); }
.dashboard-v2 .dv-opps-section .dv-view-all { color: var(--black); }
.dashboard-v2 .dv-opps-section .dv-view-all:hover { color: #555; }

/* 3-up opp grid — no single image dominates the section */
.dashboard-v2 .dv-opp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 20px;
}
@media (max-width: 900px) {
    .dashboard-v2 .dv-opp-grid { grid-template-columns: 1fr; }
}
/* Opp cards on lime — black cards with white text, brand thumb in white frame */
.dashboard-v2 .dv-opp-card {
    background: var(--black);
    border: 2px solid var(--black);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
    min-height: 180px;
}
.dashboard-v2 .dv-opp-card:hover {
    border-color: var(--white);
    transform: translateY(-2px);
}

/* Brand thumb — bigger so the logo is actually readable */
.dashboard-v2 .dv-opp-thumb {
    width: 88px;
    height: 88px;
    background: var(--white);
    border: 1px solid rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    padding: 10px;
}
.dashboard-v2 .dv-opp-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.dashboard-v2 .dv-opp-eyebrow {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--green);
    text-transform: uppercase;
    font-weight: 700;
}
.dashboard-v2 .dv-opp-title {
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: 900;
    color: var(--white);
}
.dashboard-v2 .dv-opp-meta {
    font-size: 12px;
    color: var(--gray);
}
.dashboard-v2 .dv-events-section {
    background: var(--black);
    padding: 50px 24px 56px;
}

/* Partial-width X1 graphic accent — a "hash bar" anchored to one edge,
   crosses only partway across the screen. Used as a stylized divider that
   reads as graphic, not as a full-width band. */
.dashboard-v2 .dv-x1-partial {
    width: 100%;
    background: var(--black);
    padding: 0;
    overflow: hidden;
    line-height: 0;
}
.dashboard-v2 .dv-x1-partial-bar {
    height: 70px;
    width: 88%;
    background-image: url('/static/logos/x1-pattern-light.svg');
    background-size: 200px 200px;
    background-repeat: repeat;
    background-color: #fff;
    /* Long gradual dissolve: solid for the first half, then fades across the right
       half so the transition stretches past the photo and out toward the edge */
    -webkit-mask-image: linear-gradient(to right, black 0%, black 45%, transparent 100%);
            mask-image: linear-gradient(to right, black 0%, black 45%, transparent 100%);
}
@media (max-width: 768px) {
    .dashboard-v2 .dv-x1-partial-bar { width: 95%; height: 52px; background-size: 160px 160px; }
}

/* Asymmetric grid for opps + events sections: featured-large + 2 smaller stacked */
.dashboard-v2 .dv-feature-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 18px;
    margin-top: 20px;
}
.dashboard-v2 .dv-feature-grid .dv-feature {
    background: #0a0a0a;
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: border-color 0.15s ease;
}
.dashboard-v2 .dv-feature-grid .dv-feature:hover { border-color: var(--green); }
.dashboard-v2 .dv-feature-grid .dv-feature-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #050505;
}
.dashboard-v2 .dv-feature-grid .dv-feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dashboard-v2 .dv-feature-grid .dv-feature-body {
    padding: 18px 20px;
}
.dashboard-v2 .dv-feature-grid .dv-feature-eyebrow {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--green);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 6px;
}
.dashboard-v2 .dv-feature-grid .dv-feature-title {
    color: var(--white);
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 6px;
}
.dashboard-v2 .dv-feature-grid .dv-feature-meta {
    font-size: 12px;
    color: var(--gray);
    letter-spacing: 0.5px;
}
.dashboard-v2 .dv-feature-grid .dv-secondary-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.dashboard-v2 .dv-feature-grid .dv-secondary {
    background: #0a0a0a;
    border: 1px solid var(--border);
    padding: 16px 18px;
    text-decoration: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: border-color 0.15s ease;
}
.dashboard-v2 .dv-feature-grid .dv-secondary:hover { border-color: var(--green); }
.dashboard-v2 .dv-feature-grid .dv-secondary .dv-feature-title {
    font-size: 16px;
    margin-bottom: 4px;
}
@media (max-width: 900px) {
    .dashboard-v2 .dv-feature-grid { grid-template-columns: 1fr; }
}
.dashboard-v2 .dv-news-card {
    position: relative;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--border);
    display: block;
    text-decoration: none;
}
.dashboard-v2 .dv-news-card img {
    width: 100%;
    height: auto;
    max-height: 380px;
    min-height: 240px;
    object-fit: cover;
    object-position: center;
    display: block;
    opacity: 0.78;
}
.dashboard-v2 .dv-news-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 28px;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 60%, transparent);
}

/* Legacy lime ops/events section — removed in favor of dv-opps-section + dv-events-section.
   Kept declaration empty so existing template references don't error. */
.dashboard-v2 .dv-ops-events-section { padding: 0; }
.dashboard-v2 .dv-ops-events { padding: 0; background: transparent; border: none; }
.dashboard-v2 .dv-ops-events-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
@media (max-width: 768px) {
    .dashboard-v2 .dv-ops-events-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* Discounts block — dark red gradient with Heat Red accents.
   Distinctly different color identity from the lime opportunities above. */
.dashboard-v2 .dv-discounts {
    background:
        radial-gradient(circle at 50% 30%, rgba(254,43,6,0.18) 0%, transparent 70%),
        linear-gradient(180deg, #1a0303 0%, #260606 100%);
    color: var(--white);
    padding: 50px 28px 56px;
    margin-bottom: 0;
}
.dashboard-v2 .dv-discounts .dv-eyebrow { color: var(--red); }
.dashboard-v2 .dv-discounts .dv-section-head { color: var(--white); }
.dashboard-v2 .dv-discounts .dv-section-head .dv-accent { color: var(--red); }
.dashboard-v2 .dv-discounts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 24px;
    border: 2px solid var(--red);
}
.dashboard-v2 .dv-discount-card {
    padding: 22px 20px;
    background: var(--black);
    border-right: 2px solid var(--red);
    border-bottom: 2px solid var(--red);
    display: flex;
    gap: 14px;
    align-items: center;
    text-decoration: none;
    color: var(--white);
    transition: background 0.15s ease;
}
.dashboard-v2 .dv-discount-card:hover { background: #1a0606; }
.dashboard-v2 .dv-discount-card:last-child,
.dashboard-v2 .dv-discount-card:nth-child(3n) { border-right: none; }
.dashboard-v2 .dv-discount-card:nth-last-child(-n+3) { border-bottom: none; }
.dashboard-v2 .dv-discount-logo {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.dashboard-v2 .dv-discount-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.dashboard-v2 .dv-discount-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--white);
    line-height: 1;
    margin-bottom: 4px;
}
.dashboard-v2 .dv-discount-detail {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    line-height: 1.4;
}
.dashboard-v2 .dv-discounts-cta {
    margin-top: 20px;
    text-align: right;
}
.dashboard-v2 .dv-btn-on-lime {
    display: inline-block;
    background: var(--black);
    color: var(--green);
    padding: 10px 22px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.15s ease;
}
.dashboard-v2 .dv-btn-on-lime:hover {
    background: var(--white);
    color: var(--black);
}
@media (max-width: 900px) {
    .dashboard-v2 .dv-discounts-grid { grid-template-columns: 1fr; }
    .dashboard-v2 .dv-discount-card {
        border-right: none !important;
        border-bottom: 2px solid var(--black);
    }
    .dashboard-v2 .dv-discount-card:last-child { border-bottom: none; }
}

/* X1 strip transitions — three variants for different contexts */

/* Default: bold light pattern on black — for transitions between dark sections */
.dashboard-v2 .dv-x1-strip {
    height: 80px;
    width: 100%;
    background-image: url('/static/logos/x1-pattern-light.svg');
    background-size: 200px 200px;
    background-repeat: repeat;
    background-color: #fff;
}

/* On olive hero -> black news transition: torn-paper feel, jagged contrast */
.dashboard-v2 .dv-x1-strip-olive {
    background-color: #1f2810;
}

/* Dark variant for after lime sections (going back to black) */
.dashboard-v2 .dv-x1-strip-dark {
    background-image: url('/static/logos/x1-pattern-dark.svg');
    background-color: var(--green);
}

/* Community Board — dark feed-style cards, lighter touch */
.dashboard-v2 .dv-board {
    background: var(--black);
    padding: 40px 28px;
}
.dashboard-v2 .dv-board-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 900px) {
    .dashboard-v2 .dv-board-list { grid-template-columns: 1fr; }
}
.dashboard-v2 .dv-board-card {
    background: #0a0a0a;
    border: 1px solid var(--border);
    padding: 18px 20px;
    text-decoration: none;
    color: var(--white);
    transition: border-color 0.15s ease;
}
.dashboard-v2 .dv-board-card:hover { border-color: var(--green); }
.dashboard-v2 .dv-board-title {
    font-weight: 700;
    color: var(--white);
    font-size: 15px;
    margin-bottom: 8px;
    line-height: 1.3;
}
.dashboard-v2 .dv-board-meta {
    font-size: 12px;
    color: var(--gray);
}

/* Section heading row with right-aligned "View All" link */
.dashboard-v2 .dv-section-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.dashboard-v2 .dv-view-all {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--gray);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.15s ease;
}
.dashboard-v2 .dv-view-all:hover { color: var(--green); }
.dashboard-v2 .dv-discounts .dv-view-all { color: var(--white); }
.dashboard-v2 .dv-discounts .dv-view-all:hover { color: var(--red); }

/* Compact list-style cards used inside the ops/events panel */
.dashboard-v2 .dv-list-card {
    background: #111;
    border: 1px solid var(--border);
    padding: 14px 16px;
    margin-bottom: 10px;
    display: block;
    text-decoration: none;
    transition: border-color 0.15s ease;
}
.dashboard-v2 .dv-list-card:hover { border-color: var(--green); }
.dashboard-v2 .dv-list-card:last-child { margin-bottom: 0; }
.dashboard-v2 .dv-list-card-title {
    color: var(--white);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 4px;
}
.dashboard-v2 .dv-list-card-meta {
    color: var(--gray);
    font-size: 12px;
}
.dashboard-v2 .dv-list-card-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.dashboard-v2 .dv-list-card-thumb {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    overflow: hidden;
    background: #000;
}
.dashboard-v2 .dv-list-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile spacing tightening */
@media (max-width: 768px) {
    .dashboard-v2 .dv-hero { padding: 40px 20px 32px; margin-bottom: 22px; }
    .dashboard-v2 .dv-ops-events { padding: 24px 18px; }
    .dashboard-v2 .dv-discounts { padding: 32px 18px; }
    .dashboard-v2 .dv-board { padding: 32px 18px; }
}

/* ============================================================
   Brand Discounts — compact card grid + per-card details modal
   ============================================================ */

.discount-grid {
    display: grid;
    /* minmax(0, 1fr) forces every column to be exactly the same width
       regardless of card content (long brand names were nudging the
       middle column wider with the default minmax(auto, 1fr)). */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
@media (max-width: 960px) {
    .discount-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .discount-grid { grid-template-columns: 1fr; }
}

.discount-card-compact {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
    min-height: 156px;
    outline: none;
}
.discount-card-main {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
}
.discount-card-compact:hover,
.discount-card-compact:focus-visible {
    border-color: var(--green);
    transform: translateY(-1px);
}
.discount-card-compact:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.discount-card-logo {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    overflow: hidden;
}
.discount-card-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
/* Pool with every code claimed: card stays in place, dimmed, with a stamp
   across the logo so nobody opens it expecting a code. */
.discount-card-logo { position: relative; }
.discount-card-compact.is-claimed-out .discount-card-logo img,
.discount-card-compact.is-claimed-out .discount-card-logo-fallback { opacity: 0.25; filter: grayscale(1); }
.discount-card-compact.is-claimed-out .discount-card-text { opacity: 0.55; }
.discount-claimed-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    border: 2px solid var(--red);
    color: var(--red);
    background: rgba(255, 255, 255, 0.88);
    font-family: var(--font-display);
    font-size: 13px;
    line-height: 1.05;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    padding: 4px 6px;
    white-space: nowrap;
}
.details-modal-claimed-out {
    border: 1px solid var(--border);
    border-left: 4px solid var(--red);
    padding: 14px 16px;
    color: var(--white);
    font-size: 14px;
    line-height: 1.6;
}
.details-modal-claimed-out strong {
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 4px;
}

.discount-card-logo-fallback {
    font-family: var(--font-display);
    font-size: 40px;
    color: var(--black);
    font-weight: 900;
}

.discount-card-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.discount-card-brand {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 900;
    color: var(--white);
    letter-spacing: 0.5px;
    line-height: 1.1;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.discount-card-detail {
    color: var(--green);
    font-weight: 700;
    font-size: 15px;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Labeled code pill on the claimed card. Spans the full width of the card
   (sibling of .discount-card-main, not a child of the text column) so even
   long brand codes have edge-to-edge room. Mirrors the modal treatment so
   the value reads as the actual discount code, not a SKU or product line.
   The small Copy button removes the manual select-and-copy step. */
.discount-card-code-block {
    padding: 10px 14px;
    background: var(--gray-dark);
    border: 1px solid var(--green);
    width: 100%;
}
.discount-card-code-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}
.discount-card-code-label {
    font-size: 10px;
    color: var(--gray);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.discount-card-code-copy {
    background: none;
    border: none;
    color: var(--green);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 2px 4px;
    transition: color 0.15s ease;
}
.discount-card-code-copy:hover { color: var(--white); }
.discount-card-code-copy.copied { color: var(--white); }
.discount-card-code-value {
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--green);
    font-weight: 700;
    word-break: break-all;
    overflow-wrap: anywhere;
    line-height: 1.3;
}
.discount-card-visit-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--blue);
    text-decoration: none;
    transition: color 0.15s ease;
}
.discount-card-visit-link:hover,
.discount-card-visit-link:focus-visible { color: var(--white); }
.discount-card-description {
    color: var(--gray);
    font-size: 13px;
    line-height: 1.5;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.discount-card-status {
    flex-shrink: 0;
    margin-left: 4px;
}

/* Wide-logo modifier — multi-brand families (e.g. Pro-Tec + Triple Eight + 187
   Killer Pads) and horizontal wordmark logos. Logo spans the full width of the
   card at a shorter height; text drops below. The card outline stays the same
   so the grid stays uniform alongside square-logo cards. */

/* Additional code chips — sub-brand codes listed below the primary code on
   multi-brand family discounts. Slightly muted so the headline code stays the
   visual anchor. */
.discount-card-extra-code {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.discount-card-extra-code-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}
.discount-card-extra-code-label {
    font-size: 10px;
    color: var(--gray);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.discount-card-extra-code-value {
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
    font-size: 15px;
    letter-spacing: 1.5px;
    color: var(--white);
    font-weight: 700;
    word-break: break-all;
    overflow-wrap: anywhere;
}

/* Modal mirrors — wide logo header + extra code blocks. */
.details-modal-extra-code-block {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--gray-dark);
    border: 1px solid var(--border);
    text-align: center;
}
.details-modal-extra-code-label {
    font-size: 11px;
    color: var(--gray);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.details-modal-extra-code-value {
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--white);
    font-weight: 700;
    word-break: break-all;
    overflow-wrap: anywhere;
    margin-bottom: 8px;
}

/* Multi-brand modal sections. Used when a discount is a family of sibling
   brands (Triple Eight Distribution: Pro-Tec, Triple Eight, 187 Killer Pads).
   No primary brand. Each section is equal weight: brand name, then either a
   Visit + Claim pair (before claim) or Code + Copy + Visit (after claim).
   Sections stack vertically with a divider between. */
.multi-brand-modal-section {
    padding: 14px 0;
    border-top: 1px solid var(--border);
}
.multi-brand-modal-section:first-of-type {
    border-top: none;
    padding-top: 4px;
}
.multi-brand-modal-section-name {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--white);
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.multi-brand-modal-code {
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
    font-size: 20px;
    letter-spacing: 2px;
    color: var(--green);
    font-weight: 700;
    word-break: break-all;
    overflow-wrap: anywhere;
    margin-bottom: 10px;
    padding: 10px 14px;
    background: var(--gray-dark);
    border: 1px solid var(--green);
    text-align: center;
}
.multi-brand-modal-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.multi-brand-modal-actions .btn {
    flex: 1;
    min-width: 120px;
    font-size: 12px;
    padding: 8px 12px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Details modal (one per discount, click-opened) ---------- */

.details-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.details-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}
.details-modal-content {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border);
    max-width: 520px;
    width: 100%;
    padding: 36px 32px 28px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
.details-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    color: var(--gray);
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
}
.details-modal-close:hover { color: var(--white); }

.details-modal-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}
.details-modal-logo {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}
.details-modal-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.details-modal-brand {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 900;
    color: var(--white);
    letter-spacing: 0.5px;
    line-height: 1.05;
    text-transform: uppercase;
}
.details-modal-detail {
    color: var(--green);
    font-weight: 700;
    font-size: 18px;
    margin-top: 6px;
}

.details-modal-description {
    color: var(--white);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Rich-text rendering for discount descriptions saved through the
   Quill editor. Tags allowed by sanitize_rich_text() get sensible
   defaults so passcode info, bullet lists, and section headings
   render cleanly on the athlete-facing card and modal. */
.rich-text p { margin: 0 0 12px 0; }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text strong, .rich-text b { color: var(--green); font-weight: 700; }
.rich-text em, .rich-text i { font-style: italic; }
.rich-text u { text-decoration: underline; }
.rich-text h3 { font-size: 16px; color: var(--white); font-weight: 700; margin: 14px 0 6px 0; text-transform: uppercase; letter-spacing: 1px; }
.rich-text h4 { font-size: 14px; color: var(--white); font-weight: 700; margin: 12px 0 4px 0; }
.rich-text ul, .rich-text ol { margin: 4px 0 12px 0; padding-left: 22px; }
.rich-text li { margin-bottom: 4px; line-height: 1.6; }
.rich-text a { color: var(--blue); text-decoration: underline; }
.rich-text a:hover { color: var(--white); }

.details-modal-code-block {
    margin-bottom: 18px;
    padding: 16px;
    background: var(--gray-dark);
    border: 1px solid var(--green);
    text-align: center;
}
.details-modal-code-label {
    font-size: 11px;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}
.details-modal-code {
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
    font-size: 22px;
    color: var(--green);
    letter-spacing: 3px;
    font-weight: 700;
    word-break: break-all;
}
.details-modal-code-copy {
    margin-top: 12px;
    background: var(--green);
    color: var(--black);
    border: none;
    padding: 8px 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease;
}
.details-modal-code-copy:hover { background: var(--white); }
.details-modal-code-copy.copied { background: var(--white); color: var(--black); }

.details-modal-cooldown {
    margin-bottom: 18px;
    padding: 14px 16px;
    background: var(--gray-dark);
    border-left: 3px solid var(--green);
    font-size: 13px;
    color: var(--gray);
    line-height: 1.6;
}

.details-modal-warning {
    margin-bottom: 18px;
    padding: 10px 14px;
    background: rgba(254, 43, 6, 0.08);
    border-left: 3px solid var(--red);
    font-size: 13px;
    color: var(--white);
    line-height: 1.5;
    font-weight: 600;
}

/* Short line under the Claim button: the shop-first reminder sits where the
   decision happens. */
.details-modal-step-note {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--gray);
    text-align: center;
}
.details-modal-step-note::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--red); margin-right: 8px; vertical-align: middle; }

.details-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}



/* ---------- News list: featured lead + 3-across grid ---------- */
.news-page { max-width: 1100px; margin: 0 auto; }
.news-meta { font-size: 13px; color: var(--gray); }
.news-kicker { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--green); margin-bottom: 10px; }

.news-lead { display: block; text-decoration: none; margin-bottom: 32px; }
.news-lead-media { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 560px; overflow: hidden; background: #111; border: 1px solid var(--border); transition: border-color 0.2s; }
.news-lead:hover .news-lead-media, .news-lead:focus-visible .news-lead-media { border-color: var(--blue); }
.news-lead-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.news-lead:hover .news-lead-media img { transform: scale(1.02); }
.news-lead-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 38%, rgba(0,0,0,0) 70%); }
.news-lead-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 36px; }
.news-lead-title { font-family: var(--font-display); font-size: 48px; line-height: 1.02; letter-spacing: 1px; text-transform: uppercase; color: var(--white); margin: 0 0 10px; }
.news-lead:hover .news-lead-title { color: var(--blue); }
.news-lead-dek { color: #D5D5D2; font-size: 16px; line-height: 1.55; margin: 12px 0 0; max-width: 720px; }
.news-lead-more { margin-top: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; color: var(--green); }

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-card { display: block; text-decoration: none; background: var(--card-bg); border: 1px solid var(--border); overflow: hidden; transition: border-color 0.2s, transform 0.2s; }
.news-card:hover, .news-card:focus-visible { border-color: var(--blue); transform: translateY(-2px); }
.news-card-media { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.news-card-media img, .news-card-blank { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card-blank { background: #111 url('/static/logos/x1-pattern-dark.svg') center / 160px repeat; opacity: 0.7; }
.news-card-body { padding: 16px 18px 18px; border-left: 3px solid var(--blue); }
.news-card-title { font-family: var(--font-display); font-size: 24px; line-height: 1.08; letter-spacing: 0.5px; text-transform: uppercase; color: var(--white); margin: 0 0 8px; }
.news-card:hover .news-card-title { color: var(--blue); }

@media (max-width: 1024px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .news-lead-title { font-size: 40px; }
}
@media (max-width: 640px) {
    .news-grid { grid-template-columns: 1fr; gap: 16px; }
    .news-lead-media { aspect-ratio: 4 / 3; }
    .news-lead-text { padding: 18px 16px; }
    .news-lead-title { font-size: 30px; }
    .news-lead-dek { display: none; }
}

/* ---------- Hint text ----------
   Example text inside empty fields is dark gray so an empty field reads as
   empty. What someone actually types is white. One shade site-wide, matching
   the empty optional-date fields. */
:root { --hint: #5f5f5c; }
input::placeholder,
textarea::placeholder { color: var(--hint); opacity: 1; }
.ql-editor.ql-blank::before { color: var(--hint) !important; font-style: normal; }

/* ---- News / Films tabs ---- */
.news-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--border); margin: 0 0 28px; }
.news-tabs a { font-family: var(--font-display); font-size: 20px; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); text-decoration: none; padding: 0 0 10px; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.news-tabs a:hover { color: var(--white); }
.news-tabs a.is-active { color: var(--white); border-bottom-color: var(--blue); }

/* ---- Legends on Film ---- */
.film-lead { display: block; margin-bottom: 32px; cursor: pointer; }
.film-lead-media { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 560px; overflow: hidden; background: #111; border: 1px solid var(--border); transition: border-color 0.2s; }
.film-lead:hover .film-lead-media, .film-lead:focus-visible .film-lead-media { border-color: var(--blue); }
.film-lead-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.film-lead:hover .film-lead-media img { transform: scale(1.02); }
.film-card { cursor: pointer; }
.film-card .news-card-media { position: relative; }
.film-credit { font-size: 13px; color: var(--blue); font-weight: 600; letter-spacing: 0.3px; }
.film-card-tagline { font-size: 14px; line-height: 1.5; color: var(--gray); margin: 8px 0 0; }
.film-play { position: absolute; top: 50%; left: 50%; width: 84px; height: 84px; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.55); border: 2px solid var(--white); border-radius: 50%; transition: background 0.2s, border-color 0.2s; }
.film-play::after { content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 15px 0 15px 25px; border-color: transparent transparent transparent var(--white); }
.film-play-small { width: 44px; height: 44px; top: auto; left: 12px; bottom: 12px; transform: none; }
.film-play-small::after { border-width: 8px 0 8px 13px; }
.film-lead:hover .film-play, .film-card:hover .film-play { background: var(--green); border-color: var(--green); }
.film-lead:hover .film-play::after, .film-card:hover .film-play::after { border-left-color: var(--black); }
.film-lead .film-play { top: auto; left: auto; right: 28px; bottom: 28px; transform: none; }
.film-intro { font-size: 17px; line-height: 1.6; color: var(--white); max-width: 760px; margin: 0 0 28px; padding-left: 16px; border-left: 3px solid var(--green); }
.film-submit { margin-top: 40px; padding: 32px 20px; border: 1px solid var(--border); background: var(--card-bg); text-align: center; }
.film-submit-q { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; letter-spacing: 1px; color: var(--white); margin-bottom: 16px; }
.film-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.85); align-items: center; justify-content: center; padding: 20px; }
.film-modal-content { position: relative; width: 100%; max-width: 920px; max-height: 92vh; overflow-y: auto; background: var(--card-bg); border: 1px solid var(--border); padding: 0; }
.film-modal-content .details-modal-close { position: absolute; top: 8px; right: 10px; z-index: 2; background: rgba(0,0,0,0.6); color: var(--white); border: 0; width: 36px; height: 36px; font-size: 24px; line-height: 1; cursor: pointer; }
.film-player { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.film-player iframe, .film-player img { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.film-modal-body { padding: 22px 26px 26px; }
.film-modal-title { font-family: var(--font-display); font-size: 36px; line-height: 1.05; letter-spacing: 0.5px; text-transform: uppercase; color: var(--white); margin: 0 0 6px; }
.film-modal-desc { color: var(--white); font-size: 15px; line-height: 1.65; margin: 14px 0 0; white-space: pre-wrap; }
.film-watch-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gray); margin: 22px 0 10px; }
.film-watch { display: flex; flex-wrap: wrap; gap: 10px; }
.film-outside { color: var(--gray); font-size: 12px; line-height: 1.5; margin: 14px 0 0; }
@media (max-width: 640px) {
    .film-modal { padding: 0; }
    .film-modal-content { max-height: 100vh; height: 100%; }
    .film-modal-title { font-size: 28px; }
    .film-play { width: 60px; height: 60px; }
    .film-play::after { border-width: 10px 0 10px 17px; }
}

/* ---- The Wall (community board) ---- */
.wall-page { max-width: 1200px; margin: 0 auto; }
.wall-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.wall-chip { background: transparent; border: 1px solid #333; color: var(--white); font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 8px 14px; cursor: pointer; }
.wall-chip:hover { border-color: var(--white); }
.wall-chip.is-on { background: var(--green); border-color: var(--green); color: var(--black); }
.wall-chip-open { margin-left: auto; border-color: var(--red); color: var(--red); }
.wall-chip-open.is-on { background: var(--red); border-color: var(--red); color: #fff; }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px 22px; align-items: start; padding-top: 10px; }
.wall-note { display: block; width: 100%; margin: 0; padding: 20px 20px 16px; position: relative; text-align: left; color: #000; border: 0; box-shadow: 0 7px 0 rgba(0, 0, 0, 0.65); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.wall-note:nth-child(3n+1) { transform: rotate(-1.3deg); }
.wall-note:nth-child(3n+2) { transform: rotate(1deg); }
.wall-note:nth-child(3n) { transform: rotate(-0.4deg); }
.wall-note:hover, .wall-note:focus-within { transform: rotate(0) translateY(-6px) scale(1.02); box-shadow: 0 16px 0 rgba(0, 0, 0, 0.75); z-index: 2; }
.wall-note::before { content: ''; position: absolute; top: -8px; left: 50%; width: 58px; height: 17px; transform: translateX(-50%) rotate(-2deg); background: rgba(245, 245, 245, 0.5); }
.wall-note-link { position: absolute; inset: 0; z-index: 1; }
.note-green { background: var(--green); }
.note-blue { background: var(--blue); }
.note-white { background: var(--white); }
.note-red { background: var(--red); color: #fff; }
.note-navy { background: var(--navy); color: var(--white); outline: 1px solid #24405e; }
.note-gray { background: #d9d6cc; }
.wall-note-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 16px; }
.wall-note-topic { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; opacity: 0.75; }
.wall-note-q { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.03; letter-spacing: 0.3px; text-transform: uppercase; margin: 10px 0 16px; color: inherit; overflow-wrap: break-word; hyphens: auto; }
.wall-note.note-big .wall-note-q { font-size: 38px; }
.wall-note-who { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; margin-bottom: 12px; }
.wall-avatar { width: 28px; height: 28px; flex-shrink: 0; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: #000; color: #fff; font-family: var(--font-display); font-size: 16px; font-weight: 800; }
.note-navy .wall-avatar, .note-red .wall-avatar { background: #fff; color: #000; }
.wall-note-sport { opacity: 0.7; font-weight: 500; }
.wall-note-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(0, 0, 0, 0.2); padding-top: 12px; font-size: 12px; font-weight: 700; }
.note-red .wall-note-foot, .note-navy .wall-note-foot { border-top-color: rgba(255, 255, 255, 0.28); }
.wall-note-count { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.wall-faces { display: inline-flex; }
.wall-face { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: #000; color: #fff; font-family: var(--font-display); font-size: 13px; font-weight: 800; margin-left: -5px; border: 2px solid rgba(255, 255, 255, 0.85); }
.wall-face:first-child { margin-left: 0; }
.wall-answer { position: relative; z-index: 2; background: #000; color: #fff; text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 8px 12px; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.wall-answer:hover, .wall-answer:focus-visible { background: #fff; color: #000; outline: 2px solid #000; }
.note-navy .wall-answer { background: var(--green); color: #000; }
.note-red .wall-answer { background: #fff; color: #000; }
.wall-answer-first { box-shadow: 0 0 0 2px currentColor inset; }
.wall-note-likes { position: absolute; bottom: -10px; right: 14px; z-index: 2; background: #000; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; }
.wall-note .new-chip, .wall-note .chip-new { position: relative; z-index: 2; }
.wall-add { background: transparent; border: 2px dashed #3a3a3a; color: var(--white); box-shadow: none; text-align: center; padding: 38px 18px; cursor: pointer; font-family: var(--font-body); }
.wall-add::before { display: none; }
.wall-add:hover { border-color: var(--green); box-shadow: none; }
.wall-add-plus { display: block; font-family: var(--font-display); font-size: 58px; line-height: 1; color: var(--green); }
.wall-add-title { display: block; font-family: var(--font-display); font-size: 26px; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
.wall-add-sub { display: block; color: var(--gray); font-size: 12px; margin-top: 6px; }
.wall-empty { color: var(--gray); text-align: center; margin-top: 10px; }
.wall-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.85); align-items: center; justify-content: center; padding: 20px; }
.wall-modal-box { position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: var(--card-bg); border: 1px solid var(--border); border-top: 4px solid var(--green); padding: 26px; }
.wall-modal-close { position: absolute; top: 8px; right: 10px; background: transparent; border: 0; color: var(--white); font-size: 28px; line-height: 1; cursor: pointer; }
.wall-modal-title { font-family: var(--font-display); font-size: 32px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 18px; color: var(--white); }
.wall-topic-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.wall-topic-opt { position: relative; cursor: pointer; padding: 0; outline: none; }
.wall-topic-opt input { position: absolute; opacity: 0; }
.wall-topic-opt span { display: block; padding: 8px 12px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; opacity: 0.45; }
.wall-topic-opt input:checked + span { opacity: 1; box-shadow: 0 0 0 2px var(--black), 0 0 0 4px var(--white); }
.wall-topic-opt input:focus-visible + span { box-shadow: 0 0 0 2px var(--black), 0 0 0 4px var(--green); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .wall-note, .wall-note:hover { transform: none; transition: none; } }
@media (max-width: 640px) {
    .wall { grid-template-columns: 1fr; }
    .wall-note:nth-child(n) { transform: none; }
    .wall-chip-open { margin-left: 0; }
    .wall-note.note-big .wall-note-q { font-size: 32px; }
}

/* Staff tag on directory cards (admins who also appear as Legends) */
.staff-tag { display: inline-block; background: var(--green); color: var(--black); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 2px 8px; margin: 2px 0 4px; }
.staff-note { font-size: 12px; color: var(--green); margin-bottom: 4px; }

/* Coming soon holding page */
.landing-v2 .lv-coming-soon { min-height: 100vh; justify-content: center; }
.landing-v2 .lv-coming-soon-head { font-family: var(--font-display); font-size: 96px; line-height: 0.95; letter-spacing: 1px; text-transform: uppercase; color: var(--green); margin: 28px 0 18px; }
.landing-v2 .lv-coming-soon-signin { display: inline-block; margin-top: 36px; color: var(--gray); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid #333; padding-bottom: 2px; }
.landing-v2 .lv-coming-soon-signin:hover { color: var(--white); border-color: var(--white); }
@media (max-width: 640px) { .landing-v2 .lv-coming-soon-head { font-size: 60px; } }